:root{
--font: 300 1em/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-2: georgia, serif;
--line-height: 1.3;

--header-font-color:#24292E;
--font-color:#24292E;
--link-color:var(--blue);
--link-color-hover: var(--blue);

--background-color:#F5F8FA;
--background-color-light: #FFFFFF;
--background-color-dark: #E9EDF1;
--background-color-fade: rgba(0, 0, 0, 0.02);

--button-color:#2f363d;
--button-color-hover:#ffffff;
--button-color-active:#ffffff;
--button-text-color:#ffffff;
--button-text-color-hover:var(--button-color);
--button-text-color-active:var(--button-color);

--border-color:rgba(0, 0, 0, 0.1);
--border:1px solid var(--border-color);
--shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
--blur:5px;
--header-height:0px;
--min-width:250px;
--max-width:1300px;

--size-xxs: 2px;
--size-xs: 4px;
--size-s: 8px;
--size-m: 24px;
--size-l: 48px;
--size-xl: 72px;
--size-xxl: 96px;

  --space-xxs: 4px;
  --space-xs:  8px;
  --space-s:   16px;
  --space-m:   24px;
  --space-l:   32px;
  --space-xl:  48px;
  --space-xxl: 64px;

  --font-size-xxs: 0.512rem; /* ~8.2px  */
  --font-size-xs:  0.64rem;  /* ~10.2px */
  --font-size-s:   0.8rem;   /* ~12.8px */
  --font-size-m:   1rem;     /* 16px - Base/body size */
  --font-size-l:   1.25rem;  /* 20px */
  --font-size-xl:  1.563rem; /* ~25px */
  --font-size-xxl: 1.953rem; /* ~31.2px*/
  --font-size-xxxl:3rem; /* ~39px */
  --font-size-xxxxl:3.4rem; /* ~48.8px*/

  --font-size-display: clamp(var(--font-size-xl), 10vw, 7.5rem);

--strong:500;
--feather:6px;
--round-corners:90px;

--image-thumbnail:90px;
--image-medium:300px;
--image-large:1024px;

--yellow: #F9A825;       /* Onboarding – Yellow 800 */
--pink: #F06292;         /* Brand Development – Pink 300 */
--blue: #64B5F6;         /* Online Presence – Blue 300 */
--orange: #FB8C00;       /* Targeted Campaigns – Orange 700 */
--green: #388E3C;        /* Sales Enablement – Green 700 */
--purple: #8E24AA;       /* Performance Optimization – Purple 700 */
--white: #FAFAFA;        /* Base / Neutral UI */
--red: #E57373;          /* Alert / Error – Red 300 */
--beige: #A1887F;        /* Optional background – Brown/Beige 400 */
--black: #24292E;
}

h1, h2, h3, h4 {margin:0 0 var(--space-s);font-weight: var(--strong);color: var(--header-font-color);line-height: 1.2;}

h1,.font-size-xxl {font-size: clamp(var(--font-size-xxl), 5vw + 1rem, var(--font-size-xxxl));letter-spacing: -0.025em;}
h2,.font-size-xl {font-size: clamp(var(--font-size-xl), 4vw + 1rem, var(--font-size-xxl));}
h3,.font-size-l {font-size: clamp(var(--font-size-l), 3vw + 1rem, var(--font-size-xl));}
h4 {font-size: clamp(var(--font-size-m), 2vw + 1rem, var(--font-size-l));font-weight: var(--font-weight-medium);}

p{margin: 0 0 var(--space-s)}

.space-xxs { width: var(--space-xxs); }
.space-xs  { width: var(--space-xs); }
.space-s   { width: var(--space-s); }
.space-m   { width: var(--space-m); }

.font-size-xxs { font-size: var(--font-size-xxs); }
.font-size-xs { font-size: var(--font-size-xs); }
.font-size-s  { font-size: var(--font-size-s); }
.font-size-m  { font-size: var(--font-size-m); }
.font-size-l  { font-size: var(--font-size-l); }
.font-size-xl { font-size: var(--font-size-xl); }
.font-size-xxl{ font-size: var(--font-size-xxl); }
.font-size-display{ font-size: var(--font-size-display); line-height: 1.1;letter-spacing: -0.02em;font-weight: 600; }

--yellow: #F9A825;       /* Onboarding – Yellow 800 */
--pink: #F06292;         /* Brand Development – Pink 300 */
--blue: #64B5F6;         /* Online Presence – Blue 300 */
--orange: #FB8C00;       /* Targeted Campaigns – Orange 700 */
--green: #388E3C;        /* Sales Enablement – Green 700 */
--purple: #8E24AA;       /* Performance Optimization – Purple 700 */
--white: #FAFAFA;        /* Base / Neutral UI */
--red: #E57373;          /* Alert / Error – Red 300 */
--beige: #A1887F;        /* Optional background – Brown/Beige 400 */
--black: #24292E;

.bg-yellow{color: var(--yellow)}
.bg-pink{color: var(--pink)}
.bg-blue{color: var(--blue)}
.bg-orange{color: var(--orange)}
.bg-green{color: var(--green)}
.bg-purple{color: var(--purple)}
.bg-red{color: var(--red)}
.bg-beige{color: var(--beige)}

.accent-red{color: var(--red);border-color: var(--red);}
.accent-yellow{color: var(--yellow);border-color: var(--yellow);}
.accent-blue{color: var(--blue);border-color: var(--blue);}
.accent-green{color: var(--green);border-color: var(--green);}

.font-color-white{color: var(--white);}
.font-color-black{color: var(--black);}
.font-color-red{color: var(--red);}
.font-color-green{color: var(--green);}
.font-color-blue{color: var(--blue);}
.font-color-orange{color: var(--orange);}
.font-color-yellow{color: var(--yellow);}
.font-color-pink{color: var(--pink);}
.font-color-purple{color: var(--purple);}

.light-theme {
--background-color: var(--background-color);
--background-color-dark: var(--background-color-dark);
--background-color-light: var(--background-color-light);
--background-color-fade: var(--background-color-light);
--font-color: #24292E;
--header-font-color:#24292E;
--font-secondary-color: #70757a;
--link-color: #2f363d;
--link-color-hover: #4B5562;
--button-color:#2f363d;
--button-color-hover:#ffffff;
--button-color-active:#ffffff;
--button-text-color:#ffffff;
--button-text-color-hover:var(--button-color);
--button-text-color-active:var(--button-color);
--border-color: rgba(0, 0, 0, 0.1);
}
.dark-theme{
--background-color:  #24292E;
--background-color-dark:#1f2227;
--background-color-light: #2f363d;
--background-color-fade: rgb(0 0 0 / 20%);
--font-color: #F5F8FA;
--header-font-color:#ffffff;
--border-color: rgba(0 0 0 / 30%);
--button-color: #2f363d;
--button-color-hover: #F5F8FA;
--button-color-active: #F5F8FA;
--button-text-color: #F5F8FA;
--button-text-color-hover:var(--button-color);
--button-text-color-active:var(--button-color);
color:var(--font-color);
}

.background-color{background-color:var(--background-color)}
.background-color-light{background-color:var(--background-color-light)}
.background-color-dark{background-color:var(--background-color-dark)}
.background-color-fade{background-color: var(--background-color-fade)}

html{font-size: 16px;box-sizing:border-box;scroll-behavior:smooth}
body{font:var(--font);background-color:var(--background-color);color:var(--font-color);text-rendering:optimizeLegibility;width:100%;min-height:100vh;padding:0;margin:0;overflow-x:hidden}
div{position:relative}
section::after{display: table;clear: both;}
section{position:relative}
sup{font-size: var(--size-s)}
strong,
.strong{font-weight:var(--strong)}

.grid{display:grid}
.block{display:block}
.flex{display:flex}
.flex-wrap{display:flex;flex-wrap: wrap;}
.relative{position:relative}
.font-2{font-family: var(--font-2)}
.text-shadow{text-shadow:rgba(0,0,0,0.5) 1px 2px 18px}
.fade{opacity:0.7}
.blur{backdrop-filter: blur(5px)}

.round-thumbnail{width: var(--image-thumbnail);height:var(--image-thumbnail);border-radius: 90px;overflow: hidden}
.round-thumbnail.medium{width: var(--image-medium);height:var(--image-medium);border-radius: 90px;overflow: hidden}
.round-thumbnail.large{width: var(--image-large);height:var(--image-large);border-radius: 90px;overflow: hidden}
img{width:100%;max-width:100%;height:auto}
img.thumbnail{max-width:var(--image-thumbnail)}
img.medium{max-width:var(--image-medium);}
img.large{max-width:var(--image-large);}



/*
:is(h1, h2, h3, h4, h5, h6, .wckd-icon) + :is(h1, h2, h3, h4, h5, h6, p, ul, ol, form, div),
p + :is(h1, h2, h3, h4, h5, h6, p,ul,ol),
button + p {
margin: 0 0 1.2em;
}
*/

hr{border-color: var(--border-color);margin-top:var(--size-m);margin-bottom:var(--size-m);padding:0;display:block}

a{color:var(--font-color);position:relative;cursor:pointer;line-height:var(--line-height)}
a:hover{color:var(--font-color-hover);text-decoration:underline}

p > a, p > button.text{color: var(--link-color);}
p > a:hover, p > button.text:hover{color: var(--link-color-hover);}

ul, ol{margin-top: 0;margin-bottom: 1em;padding-left: 1.5em;}
ul li, ol li{margin-bottom: 0.5em;}
ul.no-bullets,
ol.no-bullets{padding:0;list-style:none;line-height: var(--line-height)}
ul.no-bullets > li, ol.no-bullets > li{margin:0}

dl {display: grid;grid-template-columns: auto 1fr;margin: var(--size-m) 0;padding: 0;border-bottom: 1px solid var(--border-color);overflow: hidden;}
dt, dd {margin: 0;padding: var(--size-s);border-top: 1px solid var(--border-color);}

.button, button{font: var(--font);font-size: 1em;text-decoration:none;line-height: var(--line-height);padding: var(--size-s) var(--size-m);height:auto;align-items: center;display:flex;justify-content: space-between;column-gap: 8px;background: var(--button-color);color: var(--button-text-color);border:1px solid  var(--button-color);border-radius: var(--feather);cursor: pointer}
.button.center, button.center{justify-content: center}
.button.size-xs, button.size-xs{padding: var(--size-xxs) var(--size-xs)}
.button.size-s, button.size-s{padding: var(--size-xs) var(--size-s)}
.button.size-l, button..size-l{padding: var(--size-l) var(--size-l)}
.button.size-xl, button..size-xl{padding: var(--size-l) var(--size-xl)}

.button.text, button.text{background: none;border-color: transparent;color:var(--font-color);padding:0}
.button.text:hover, button.text:hover{background:none;color:var(--font-color);text-decoration: underline;border-color: transparent;stroke: var(--button-text-color-hover);}
.button.outline, button.outline{background: none;color:var(--font-color);border:1px solid var(--border-color)}

.fit-content{width: fit-content;}

.button.round-corners, button.round-corners{border-radius: var(--round-corners);}
.button:hover .wckd-icon svg, 
button:hover .wckd-icon svg{stroke:var(--button-text-color-hover)}

.icon-button {padding: var(--size-s);border-radius: 90px;}
.icon-button.outline{border-color:var(--border-color)}
.icon-button .wckd-icon svg{fill:var(--button-text-color)}

.button:hover,
button:hover,
.button.outline:hover,
button.outline:hover,
.wckd-cards a:hover .button{background-color: var(--button-color-hover);border-color: var(--border-color);color:var(--button-text-color-hover);text-decoration:none;cursor: pointer}
.wckd-cards a:hover .button.text{background:none;color:var(--button-text-color);text-decoration: underline;border-color: transparent}
.wckd-cards li{list-style:none;margin:0;padding:0}

/* SHELL */

.side-header {
display: grid;
grid-template-columns: 70px auto;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header main"
"header footer";
}
.side-header > header {height: 100vh;display:grid;}
.side-header > aside {height: 100vh;display:grid;}
.sidebar {
display: grid;
grid-template-columns: 156px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
height: 100vh;
margin: 0;
}
.sidebar.side-header {
grid-template-columns: 67px 156px minmax(0, 1fr);
grid-template-areas:
"header sidebar main"
"header footer footer";
}
header {grid-area: header;}
aside {grid-area: sidebar;min-height:100vh}
main {grid-area: main;}
footer {grid-area: footer;}

.side-header > header{
position: fixed;
width: 68px;
}
.side-header > aside{
position: fixed;
left: 106px;
}
.collapse #sidebar{width:0;height:0;padding:0;overflow:hidden;}
.sidebar.collapse {
grid-template-columns: 68px 1fr;
grid-template-areas:
"header"
"main"
"footer";
}
.sidebar.side-header.collapse {
grid-template-columns: 68px 1fr;
grid-template-areas:
"header main"
"footer footer";
}

/* GRID */

.columns {display: grid;box-sizing: border-box;align-items: start;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));width: 100%;}
ul.columns, ol.columns{margin:0;padding:0;}
.column, .columns > li {box-sizing: border-box;width: 100%;}
.count-1 { grid-template-columns: repeat(1, minmax(200px, 1fr)); }
.count-2,
.count-2-important { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
.count-3,
.count-3-important { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.count-4,
.count-4-important { grid-template-columns: repeat(4, minmax(50px, 1fr)); }
.count-5,
.count-5-important { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
.count-6,
.count-6-important { grid-template-columns: repeat(6, minmax(20px, 1fr)); }

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }

.row-gap-xs{row-gap: var(--size-xs);}
.row-gap-s{row-gap: var(--size-s);}
.row-gap{row-gap: var(--size-m);}
.row-gap-l{row-gap: var(--size-l);}
.row-gap-xl{row-gap: var(--size-xl);}

.column-gap-xs,
.columns.column-gap-xs, 
ul.column-gap-size-xs { gap: var(--size-xs); }
.column-gap-xs,.columns.column-gap-xs, ul.column-gap-xs { gap: var(--size-xs); }
.column-gap-s,.columns.column-gap-s, ul.column-gap-s { gap: var(--size-s); }
.column-gap, .columns.column-gap, ul.column-gap { gap: var(--size-m); }
.column-gap-l,.columns.column-gap-l, ul.column-gap-l { gap: var(--size-l); }
.column-gap-xl,.columns.column-gap-xl, ul.column-gap-xl { gap: var(--size-xl); }

.padded > .column, .padded > li{padding: var(--size-m)}
.padded-xs > .column, .padded-xs > li{padding: var(--size-xs)}
.padded-s > .column, .padded-s > li{padding: var(--size-s)}
.padded-l > .column, .padded-l > li{padding: var(--size-l)}
.padded-xl > .column, .padded-xl > li{padding: var(--size-xl)}
.padded-xxl > .column, .padded-xxl > li{padding: var(--size-xxl)}

.fill,
.filled > .column,
.filled > li {background-color: var(--background-color-light)}

.feather-corners,
.feathered > .column,
.feathered > li {border-radius: var(--feather);}

.round-corners,
.rounded > .column,
.rounded > li {border-radius: var(--round-corners);}

.border,
.columns.borders > .column, 
.columns.borders > li {border: var(--border);}

.border-top {border-top: var(--border);}
.border-right {border-right: var(--border);}
.border-bottom {border-bottom: var(--border);}
.border-left {border-left: var(--border);}

.border,
.border-top,
.border-right,
.border-bottom,
.border-left {box-sizing: border-box;}

.shadow,
.columns.shadows > .column, 
.columns.shadows > li{box-shadow:var(--shadow);}

.match-height > .column,
.match-height > li{height:100%}

.align-middle{align-self:center}
.align-center{margin-left:auto!important;margin-right:auto!important;justify-content: center;left:0;right: 0}
.align-right{justify-self:end;margin-left:auto!important}
.align-bottom{align-self:end}

.flex.align-contents li{align-content: center;}

.center{text-align: center}
.right{text-align:right}
.left{text-align:left}

.layer-1{z-index: 1}
.layer-2{z-index: 2}
.layer-3{z-index: 3}

.uppercase{text-transform:uppercase}

.height-25{display:grid;min-height:25vh}
.height-50{display:grid;min-height:50vh}
.height-65{display:grid;min-height:65vh}
.height-75{display:grid;min-height:75vh}
.height-100{display:grid;min-height:calc(100vh - var(--header-height))}

.width-20{width:20%;}
.width-25{width:25%;}
.width-33{width:33.33%;}
.width-40{width:40%;}
.width-50{width:50%;}
.width-60{width:60%;}
.width-70{width:70%;}
.width-75{width:75%;}
.width-80{width:80%;}
.min-width{min-width:var(--min-width)}
.max-width{max-width:var(--max-width)}

.pad { padding: var(--size-m); }
.pad-top { padding-top: var(--size-m); }
.pad-right { padding-right: var(--size-m); }
.pad-bottom { padding-bottom: var(--size-m); }
.pad-left { padding-left: var(--size-m); }

.pad-xs { padding: var(--size-xs); }
.pad-top-xs { padding-top: var(--size-xs); }
.pad-right-xs { padding-right: var(--size-xs); }
.pad-bottom-xs { padding-bottom: var(--size-xs); }
.pad-left-xs { padding-left: var(--size-xs); }

.pad-s { padding: var(--size-s); }
.pad-top-s { padding-top: var(--size-s); }
.pad-right-s { padding-right: var(--size-s); }
.pad-bottom-s { padding-bottom: var(--size-s); }
.pad-left-s { padding-left: var(--size-s); }

.pad-l { padding: var(--size-l); }
.pad-top-l { padding-top: var(--size-l); }
.pad-right-l { padding-right: var(--size-l); }
.pad-bottom-l { padding-bottom: var(--size-l); }
.pad-left-l { padding-left: var(--size-l); }

.pad-xl { padding: var(--size-xl); }
.pad-top-xl { padding-top: var(--size-xl); }
.pad-right-xl { padding-right: var(--size-xl); }
.pad-bottom-xl { padding-bottom: var(--size-xl); }
.pad-left-xl { padding-left: var(--size-xl); }

.pad-xxl { padding: var(--size-xxl); }
.pad-top-xxl { padding-top: var(--size-xxl); }
.pad-right-xxl { padding-right: var(--size-xxl); }
.pad-bottom-xxl { padding-bottom: var(--size-xxl); }
.pad-left-xxl { padding-left: var(--size-xxl); }

.space { margin: var(--size-m); }
.space-top { margin-top: var(--size-m); }
.space-right { margin-right: var(--size-m); }
.space-bottom { margin-bottom: var(--size-m); }
.space-left { margin-left: var(--size-m); }

.space-xs { margin: var(--size-xs); }
.space-top-xs { margin-top: var(--size-xs); }
.space-right-xs { margin-right: var(--size-xs); }
.space-bottom-xs { margin-bottom: var(--size-xs); }
.space-left-xs { margin-left: var(--size-xs); }

.space-s { margin: var(--size-s); }
.space-top-s { margin-top: var(--size-s); }
.space-right-s { margin-right: var(--size-s); }
.space-bottom-s { margin-bottom: var(--size-s); }
.space-left-s { margin-left: var(--size-s); }

.space-l { margin: var(--size-l); }
.space-top-l { margin-top: var(--size-l); }
.space-right-l { margin-right: var(--size-l); }
.space-bottom-l { margin-bottom: var(--size-l); }
.space-left-l { margin-left: var(--size-l); }

.space-xl { margin: var(--size-xl); }
.space-top-xl { margin-top: var(--size-xl); }
.space-right-xl { margin-right: var(--size-xl); }
.space-bottom-xl { margin-bottom: var(--size-xl); }
.space-left-xl { margin-left: var(--size-xl); }

.space-xxl { margin: var(--size-xxl); }
.space-top-xxl { margin-top: var(--size-xxl); }
.space-right-xxl { margin-right: var(--size-xxl); }
.space-bottom-xxl { margin-bottom: var(--size-xxl); }
.space-left-xxl { margin-left: var(--size-xxl); }


.sticky{top:0;position:sticky;z-index:100}

.heading{display:flex;font-size: var(--font-size-xl);font-weight:var(--strong);margin-bottom: 0.5em;}
.subheading{display:block;}
.excerpt{}
.meta {font-size: var(--font-size-s)}
.tag {font-size: var(--font-size-xs);background: var(--background-color-fade);padding: 2px 10px !important;border-radius: var(--round-corners);margin: var(--size-s);}


/* CORE COMPONENTS */

.always-visible{position:fixed;z-index: 9999}
.wckd-cards.match-height a{height:100%}
.wckd-cards a{display:grid;border-radius: var(--feather);overflow:hidden;color: var(--font-color)}
.wckd-cards a:hover{text-decoration:none;}
.wckd-cards a > span{display:block}

.wckd-cards .image-left {display: grid; column-gap: var(--size-m); grid-template-columns: auto 1fr;}

.wckd-menu{margin:0;padding:0;overflow: hidden;}

.wckd-menu.horizontal{display: inline-flex;max-width:100%;overflow-x: auto}
.wckd-menu.horizontal a{white-space: nowrap;}
.wckd-menu li{margin:0;padding:0;list-style: none;border-radius:unset!important}
.wckd-menu.borders.columns > li{border-width:0.05em}
.wckd-menu li > ul li > ul {left: 100%;margin-top: -44px;display: none;}
.wckd-menu li li:hover a {background:var(--button-color-active);color: var(--background-color);}

.wckd-menu.horizontal::-webkit-scrollbar {height: 4px;}
.wckd-menu.horizontal::-webkit-scrollbar-track {background-color: var(--border-color);border-radius:0;}
.wckd-menu.horizontal::-webkit-scrollbar-thumb {background-color: var(--border-color);border-radius:0;}
.wckd-menu.horizontal::-webkit-scrollbar-thumb:hover {background-color: var(--border-color);}

.wckd-menu li > a {padding: var(--size-s) var(--size-m);font-size: var(--font-size-m);display: flex;text-decoration: none;align-items: center;justify-content: space-between;column-gap: var(--size-s);color: var(--font-color); font-weight: var(--strong)}
.wckd-menu > li.active:hover > a,
.wckd-menu li.active a{background-color: var(--background-color-light);}
.wckd-menu li:hover a{background-color: var(--background-color-fade);}
.wckd-menu li > ul {display: none;position: absolute;margin:0;padding:0;z-index: 1;box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);}
.wckd-menu li:hover > ul{display:block;}
.wckd-menu a.icon-button{text-align:center;border-radius: unset}
.wckd-menu a.icon-button .wckd-icon{margin:0 auto}
.wckd-menu a.button{background-color: var(--button-color);color: var(--button-text-color)}
.wckd-menu a.button:hover{background-color: var(--button-color-active);color: var(--button-text-color-active)}



input,
textarea {
border: 1px solid var(--border-color);
box-sizing: border-box;
font-size: 90%;
margin: 0;
line-height: 1;
padding:16px;
width:100%;
outline: none;
border-radius: var(--border-radius);
background: var(--background-color-fade);
color: var(--font-color);
}
input[type=range] {
width: 100%;
padding: 0px;
}

.wckd-form > div{margin-bottom:8px}

.wckd-form label {
font-size: 90%;
line-height: 1.2;
padding: 4px 0;
}

.wckd-form label {
color: var(--font-secondary-color);
position: absolute;
pointer-events: none;
left: 0;
top: 8px;
padding: var(--size-s) var(--size-m);
margin: 0;
transition: all 0.5s ease-in-out;
border-radius: var(--border-radius);
}
.wckd-form input{border-radius: var(--feather)}
.wckd-form label:has(+ input:focus),
.wckd-form label:has(+ input:valid),
.wckd-form label:has(+ textarea:focus),
.wckd-form label:has(+ textarea:valid) {
top: -10px;
font-size: 70%;
padding: 4px;
background: var(--button-color-active);
color: var(--button-text-color-active);
border-radius: var(--round-corners);
}

.search-submit {width: 18px;height: 18px;position: absolute;left: 12px;top: 15px;padding: 0;border: none;}
input[type=search] {background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs/%3E%3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E);background-position: center left 0.5em;background-repeat: no-repeat;background-size: 1.25rem;-webkit-padding-start: 2.5rem;padding-inline-start: 2.5rem;}

.wckd-icon{display:inline-flex;height: auto;width: auto;}
.wckd-icon svg{width: 24px;height: 24px;stroke-width:1.8px;stroke:var(--font-color);fill:none;background-repeat: no-repeat;background-position: center;transition: fill 0.2s ease, stroke 0.2s ease; }
a .wckd-icon svg,
button .wckd-icon svg{height:1em;width: 1em;margin-left: auto;margin-right: auto;stroke: var(--button-text-color);}}

.wckd-icon.size-xs svg{width:16px;height:16px}
.wckd-icon.size-s svg{width: 24px;height:24px}
.wckd-icon.size-m svg{width:32px;height:32px}
.wckd-icon.size-l svg{width:48px;height:48px}
.wckd-icon.size-xl svg{width:64px;height:64px}

.rotate-north svg{transform: rotate(-90deg);-webkit-transform: rotate(-90deg)}
.rotate-north-east svg{transform: rotate(-45deg)}
.rotate-east svg{transform: rotate(0deg)}
.rotate-south svg{transform: rotate(90deg)}
.rotate-south-east svg{transform: rotate(45deg)}
.rotate-west svg{transform: rotate(-180deg)}
.rotate-south-west svg{transform: rotate(135deg)}
.rotate-north-west svg{transform: rotate(225deg)}
.text > .wckd-icon svg,
.outline > .wckd-icon svg,
.outline:hover > .wckd-icon svg{stroke:var(--font-color)}
.text:hover > .wckd-icon svg{stroke:var(--font-color)}
.wckd-icon.solid svg{fill:var(--font-color)}

a.icon-label, button.icon-label{font-size: var(--font-size-xs)!important;display: grid!important;align-items: stretch!important;line-height: 1!important;justify-content: center !important;padding-bottom: 14px !important;background: none;border: 1px solid transparent;color: var(--font-color);stroke: var(--font-color);}
a.icon-label > .wckd-icon, button.icon-label > .wckd-icon{font-size: var(--size-m)!important;margin-bottom: var(--size-xs);display: grid!important;}
a.icon-label > .wckd-icon svg, button.icon-label > .wckd-icon svg{padding:4px}

.video-background {position: relative;overflow: hidden;width: 100%;background-color: transparent;}
.video-background video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: -1;}

.wckd-marquee {overflow: hidden;height: 100%;max-height:80vh;border-radius: var(--feather)}
.wckd-marquee img{width:100%;border-radius: var(--feather)}
.wckd-marquee .group {animation: marquee 10s linear infinite;}

.wckd-marquee[data-marquee-reverse="true"] .group {animation: marquee-reverse 10s linear infinite;}
@keyframes marquee {
0%, 100% {transform: translateY(0%)}
25%, 75% {transform: translateY(-25%)}
50% {transform: translateY(-50%)}
}
@keyframes marquee-reverse {
0%, 100% {transform: translateY(-100%)}
25%, 75% {transform: translateY(-75%)}
50% {transform: translateY(-50%)}
}


button.plate {background: none;border: none;position: absolute;right: 30px;top: -55px}
.plate svg {position: absolute;height: 60px;width: 60px;left: -5px;top: -5px;max-width: initial;max-height: initial}
.plate .burger {filter: url(#eat-hamburger)}
.plate .x {opacity: 0;transform: scale(0);transition: transform 400ms}
.plate .line {fill: none;stroke: var(--font-color);stroke-width: 6px;stroke-linecap: round;stroke-linejoin: round;transform-origin: 50%;transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms}
.plate .x .line {stroke-width: 4px;stroke: var(--font-color)}
.plate .active .line {transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms}
.plate.active .x {opacity: 1;transform: scale(0.7);transition: transform 400ms 350ms}
.plate .line1 {stroke-dasharray: 21 185.62753295898438;transition-delay: 0}
.plate .line2 {stroke-dasharray: 21 178.6514129638672;transition-delay: 30ms}
.plate .line3 {stroke-dasharray: 21 197.92425537109375;transition-delay: 60ms}
.plate .line4 {stroke-dasharray: 21 190.6597137451172;transition-delay: 90ms}
.plate .line5 {stroke-dasharray: 21 208.52874755859375;transition-delay: 120ms}
.plate .line6 {stroke-dasharray: 21 186.59703063964844;transition-delay: 150ms}
.active.plate .line1 {stroke-dasharray: 5 185.62753295898438;stroke-dashoffset: -141px}
.active.plate .line2 {stroke-dasharray: 5 178.6514129638672;stroke-dashoffset: -137px}
.active.plate .line3 {stroke-dasharray: 5 197.92425537109375;stroke-dashoffset: -176px}
.active.plate .line4 {stroke-dasharray: 5 190.6597137451172;stroke-dashoffset: -159px}
.active.plate .line5 {stroke-dasharray: 5 208.52874755859375;stroke-dashoffset: -139px}
.active.plate .line6 {stroke-dasharray: 5 186.59703063964844;stroke-dashoffset: -176px}
.active.plate .x {transition: transform 400ms 250ms}
.hamburger-btn {display: none}
.desktop-only {display: flex}
.mobile-only {display: none !important}


@media (max-width: 900px) {
.menu-container {	position: absolute;right: 0;top: 56px;background: var(--background-color-fade);z-index: 999}
.menu-container .wckd-menu {display: none;}
.hamburger-btn {display: block;background: none;border: none;font-size: 24px;cursor: pointer}
.menu-container.active .wckd-menu {display: block}
.count-6, .span-6, 
.count-5, .span-5{grid-template-columns:repeat(3, 1fr)}
.width-50{width: 60%}
}
@media (max-width: 768px) {
html {font-size: 14px;}

.hide-on-mobile{display: none}

.count-6, .span-6, 
.count-5, .span-5, .count-4, .span-4{grid-template-columns:repeat(2, 1fr)}
.width-50{width: 75%}

.side-header {
display: block;		
}
.side-header > aside{position: relative;left: 0}
.sidebar{height: auto}
.side-header > header,
.side-header > aside{
height:auto;
width: 100%;
min-height: auto;
position: relative;
}
.sidebar.side-header {
grid-template-columns: 1fr;
grid-template-areas:
	"header"
	"main"
	"footer";
}
.width-50{width: 75%}
.mobile-only{display: block}
}



@media (max-width: 600px) {	
.count-6, .span-6, 
.count-5, .span-5, .count-4, .span-4{grid-template-columns:repeat(2, 1fr)}
.count-3, .span-3,
.count-2, .span-2,
.count-1, .span-1{grid-template-columns:repeat(1, 1fr)}
.narrow {max-width: 95%;}
.has-sidebar {grid-template-columns: 50px auto;}
.width-33{width:50%;max-width:var(--max-width)}
}
@media (max-width: 540px) {
.count-6, .span-6, .count-5, .span-5{grid-template-columns:repeat(2, 1fr)}
.count-4, .span-4{grid-template-columns:repeat(1, 1fr)}
.width-50, .width-75{width: auto;}
.title{font-size: 3vw}
}