@import url('wckd-components.css');


:root{
--font: 300 16px/26px Roboto, Arial, sans-serif;
--font-2: georgia, serif;

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

--background-color:#ffffff;
--background-color-light: #FFFFFF;
--background-color-dark: #E9EDF1;
--background-color-fade: rgba(0 0 0 / 2%);

--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);
--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;
--max-width:1200px;
--extra-small: 4px;
--small: 8px;
--medium: 16px;
--large: 24px;
--extra-large: 38px;

--strong:650;
--feather:6px;
--round-corners:90px;
--font-size-xxs: 65%;
--font-size-xs: 75%;
--font-size-s: 85%;
--font-size-m: 100%;
--font-size-lg: 130%;
--font-size-xl: 180%;
--font-size-xxl: 380%;
--spacing: var(--extra-large);
--spacing-tight: var(--small);

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

--red:#e57373;
--green:#81c784;
--blue:#64b5f6;
--orange: #ffb74d;
--pink:#f06292;

--line-height:1.3;
}

.light-theme {
--background-color: #F5F8FA;
--background-color-dark: #E9EDF1;
--background-color-light: #FFFFFF;
--background-color-fade: rgba(0 0 0 / 2%);
--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;
--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);
}

li{
line-height: 1.4
}
li strong{margin: 8px 0;display: block}

.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)}
.fill > .column, .fill > li {background-color: var(--background-color-light)}


.filled > .column, .filled > li {background-color: var(--background-color-light)}
.feathered > .column, .feathered > li {border-radius: var(--feather);overflow:hidden}
.rounded > .column, .rounded > li {border-radius: var(--feather);overflow:hidden}

html{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(--small)}
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)}
.shadow{box-shadow:var(--shadow);}
.text-shadow{text-shadow:rgba(0,0,0,0.5) 1px 2px 18px}
.round-corners{border-radius: var(--round-corners)}
.feather-corners{border-radius: var(--feather)}
.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);}

h1, h2, h3, h4 {padding: 0;margin:0;font-weight: var(--strong);color: var(--font-color);}

h1{font-size: clamp(var(--font-size-xxl), 4vw, var(--font-size-xxl) );letter-spacing: -0.025em;line-height:1.1}
h2{font-size: clamp(var(--font-size-lg), 2vw, var(--font-size-xxl) );line-height:1.2}
h3{font-size: var(--font-size-lg);line-height:1.3}
h4 {font-size: var(--font-size-m);line-height:1.3}
p {color: var(--font-color)}

: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: var(--medium) 0;
}

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

a{color:var(--font-color);text-decoration:none;position:relative;cursor:pointer}
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.no-bullets,
ol.no-bullets{padding:0;list-style:none}
ul.no-bullets > li{margin:0}
li{margin:var(--medium);}

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

.button, button{font: var(--font);font-size: 1em;padding: var(--small) var(--large);align-items: center;display:inline-flex;width: fit-content;column-gap: 8px;background: var(--button-color);color: var(--button-text-color);border:1px solid  var(--button-color);border-radius: var(--feather);}
.button.small, button.small{padding: var(--extra-small) var(--small)}
.button.large, button.large{padding: var(--small) var(--medium)}
.button.extra-large, button.extra-large{padding: var(--medium) var(--large)}
.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)}

.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(--small);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:content-box;align-items:start;grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}
.column{box-sizing: border-box;}
.count-1{grid-template-columns:repeat(1, 1fr)}
.count-2{grid-template-columns:repeat(2, 1fr)}
.count-3{grid-template-columns:repeat(3, 1fr)}
.count-4{grid-template-columns:repeat(4, 1fr)}
.count-5{grid-template-columns:repeat(5, 1fr)}
.count-6{grid-template-columns:repeat(6, 1fr)}
.span-2{grid-column:auto / span 2}
.span-3{grid-column:auto / span 3}
.span-4{grid-column:auto / span 4}
.span-5{grid-column:auto / span 5}
.span-6{grid-column:auto / span 6}

.columns.borders > .column, 
.columns.borders > li{border:1px solid var(--border-color);border-radius: var(--feather);box-sizing: border-box;}

.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}
.align-right{justify-self:end;margin-left:auto!important}
.align-bottom{align-self:end}

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

.uppercase{text-transform:uppercase}

.extra-small{font-size: var(--font-size-xs)}
.small, small{font-size: var(--font-size-s);line-height: 1.2em}
.medium{font-size: var(--font-size-m);line-height: 1.3em}
.large{font-size: var(--font-size-lg);line-height:1.5em}
.extra-large{font-size: var(--font-size-xl);line-height: 1.3em}
.extra-extra-large{font-size: var(--font-size-xxl);line-height: 1em}

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

.width-25{width:25%;max-width:var(--max-width)}
.width-33{width:33.33%;max-width:var(--max-width)}
.width-50{width:50%;max-width:var(--max-width)}
.width-75{width:75%;max-width:var(--max-width)}
.max-width{max-width:var(--max-width)}

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

.pad-tight{padding:var(--spacing-tight);}
.pad-top-tight{padding-top:var(--spacing-tight);}
.pad-right-tight{padding-right:var(--spacing-tight);}
.pad-bottom-tight{padding-bottom:var(--spacing-tight);}
.pad-left-tight{padding-left:var(--spacing-tight);}

.columns.gap, ul.gap{gap:var(--spacing)}
.columns.gap-tight, ul.gap-tight{gap:var(--spacing-tight)}

.padded > .column, .padded > li{padding: var(--spacing)}
.padded-tight > .column, .padded-tight > li{padding: var(--spacing-tight)}

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

.heading{display:flex;font-size: var(--font-size-lg);font-weight:var(--strong);margin-bottom: 0.5em;}
.subheading{display:block;text-transform:uppercase;margin-bottom:0.25em}
.excerpt{display:block;margin-bottom:0.75em;line-height:var(--line-height);}
.meta {font-size: var(--font-size-xs) !important;background: var(--background-color-fade);padding: 2px 10px !important;border-radius: var(--round-corners);margin: var(--small);}


.border{border: 1px solid var(--border-color);border-radius: var(--feather)}
.border-top{border-top: 1px solid var(--border-color);}
.border-right{border-right: 1px solid var(--border-color);}
.border-bottom{border-bottom: 1px solid var(--border-color);}
.border-left{border-left: 1px solid var(--border-color);}


/* CORE COMPONENTS */

.always-visible{position:fixed;width: 100%;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(--spacing); grid-template-columns: auto 1fr;}


.column.image-right {
display: flex;
align-items: center;
justify-content: space-between;
}

.column.image-right, .column.image-left {
display: flex;
align-items: center;
justify-content: space-between;
}

.column.image-right .content { order: 1; width: 30%;margin: 0 auto}
.column.image-right .image { order: 2; width: 50%;}
.column.image-left .content { order: 2; width: 30%; margin: 0 auto}
.column.image-left .image { order: 1; width: 50%;}
.column .image img {
width: 100%;
height: auto;
display: block;
}
/* Responsive */
@media (max-width: 768px) {
.column {
flex-direction: column-reverse;
}
.column .content,
.column .image {
width: 100%;
}
}





/* Optional: Add some responsive adjustments */
@media (max-width: 768px) { /* Example breakpoint */

.column.image-on-right {
flex-direction: column; /* Stack image and text vertically on smaller screens */
}
.column.image-on-right.image,
.column.image-on-right.content {
width: 100%; /* Each takes full width on smaller screens */
}
}

.wckd-menu{margin:0;padding:0;overflow: hidden;}
.wckd-menu.gap{column-gap: var(--small);}
.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(--small) var(--medium);font-size: var(--font-size-m);display: flex;align-items: center;justify-content: space-between;column-gap: var(--small);color: var(--font-color);}
.wckd-menu > li.active:hover > a,
.wckd-menu li.active a{background: var(--background-color-light);}
.wckd-menu li:hover a{background: 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)}

form {position:relative}
form label{font-size:90%;line-height:1;color:var(--font-secondary-color);position:absolute;pointer-events:none;left:12px;top:8px;padding:var(--small) var(--medium);margin:0;transition:all 0.5s ease-in-out;border-radius:var(--border-radius)}
input,
textarea{border:1px solid var(--border-color);font-size:90%;margin:0;line-height:38px;padding:0 var(--medium);width:calc(100% - var(--medium) * 2);outline:none;border-radius:var(--border-radius);background: var(--background-color-fade);color: var(--font-color)}
input[type="radio"],
input[type="checkbox"]{width:24px}
textarea{resize:none}
legend{background-color: var(--background-color-light);display: block;padding:var(--extra-small) var(--small);font-size: var(--font-size-s);text-transform: uppercase;border: 1px solid var(--border-color);border-radius: var(--feather-corners)}
fieldset{border-color: var(--border-color);padding: var(--spacing)}
input:focus,
textarea:focus{box-shadow:var(--shadow)}
::placeholder {color:var(--font-secondary-color);opacity: 1; }
::-ms-input-placeholder {color:var(--font-secondary-color);}

textarea:focus~label,
textarea:valid~label,
input:focus~label,
input:valid~label{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: 22px;height: 22px;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.extra-small svg{width:16px;height:16px}
.wckd-icon.small svg{width: 24px;height:24px}
.wckd-icon.medium svg{width:32px;height:32px}
.wckd-icon.large svg{width:48px;height:48px}
.wckd-icon.extra-large 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(--large)!important;margin-bottom: var(--extra-small);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;}
.gap .wckd-marquee .group{margin-bottom:var(--spacing);}
.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%)}
}


@media (max-width: 900px) {
.count-6, .span-6, 
.count-5, .span-5{grid-template-columns:repeat(3, 1fr)}
.width-50{width: 60%}
}
@media (max-width: 768px) {
	:root{
	--font-size-xxs: 65%;
	--font-size-xs: 75%;
	--font-size-s: 85%;
	--font-size-m: 100%;
	--font-size-lg: 124%;
	--font-size-xl: 150%;
	--font-size-xxl: 218%;
	--spacing: var(--large);
	--spacing-tight: var(--small);
	}
	.count-6, .span-6, 
	.count-5, .span-5, .count-4, .span-4{grid-template-columns:repeat(2, 1fr)}
	.width-50{width: 75%}
	
	.column.image-right .image,
	.column.image-right .content,
	.column.image-left .image,
	.column.image-left .content{order: 1;width: 90%;padding:20px 0}
	
	.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}
}