#fadeout {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(4px);
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 998;
	transition: all 0.3s ease-in-out;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity = 0);
	cursor: pointer;
}

.wckd-toggle{text-decoration: underline}
.wckd-toggle-content {height: 0;overflow: hidden;}
.open-toggle .wckd-toggle-content {height: auto !important;}

.wckd-toggle.peekaboo {position: absolute;bottom:var(--size-l);z-index: 100;left: 0;right: 0;margin: 0 auto;}
.wckd-toggle.peekaboo:hover{text-decoration: underline}
.wckd-toggle.peekaboo+.wckd-toggle-content{height:0px;overflow:hidden}
.fade-to-white::before{content:'';background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));height:100%;position:absolute;z-index:1;width:100%;left:0}
.fade-to-white.open-toggle::before{display:none !important}

.wckd-accordion{grid-template-columns: initial;}
.accordion-toggle {width: 100%;text-align:left;padding: var(--size-m) var(--size-s);justify-content: normal;background: none;color:var(--font-color);border: none;border-top: 1px solid var(--border-color);	border-radius: initial;}
.accordion-toggle .wckd-icon > svg{stroke:var(--font-color)}
.accordion-toggle:hover{background:none;color: var(--font-color);fill: var(--font-color);column-gap:2px;}
.accordion-content {display: none;margin: 0 var(--size-m) var(--size-m) var(--size-s);padding-left: var(--size-m);left: 6px;border-left: 1px solid var(--border-color);}
.accordion-toolbar{display: grid;}
button.open-all {padding: var(--extra-small) var(--small);font-size: var(--font-size-s);line-height: 1.3em;justify-self: end;margin-left: auto !important;}
.accordion-toggle.is-open + .accordion-content {display: block;}
.accordion-toggle:hover .wckd-icon svg {padding-left: 6px;stroke: var(--font-color)}
.accordion-toggle.is-open .wckd-icon svg {transform: rotate(90deg);stroke: var(--font-color)}
.accordion-filter + .open-all{position: absolute;top: 6px;right: 8px}
.accordion-toggle.is-open .wckd-icon svg{padding-left:0}
.accordion-toggle.is-open:hover{column-gap: 8px}

.wckd-slides{grid-template-columns: repeat(1, minmax(200px, 1fr));}
.wckd-slides h3 {text-transform: uppercase;font-size: clamp(35px, 5vw, 60px);margin: 0 auto;text-align: center;font-weight: 700;max-width: 800px;line-height: 1.1;padding: var(--size-l) 0  var(--size-l) ;}
.wckd-slides p {text-align: center;margin: 0 auto;padding-bottom: var(--size-l);max-width: 600px;}
.wckd-slides > .column {
  min-height: 80vh;
  position: sticky;
  top: 200px; /* or try 15vh for more responsive spacing */
  overflow: visible; /* important so slides don’t clip each other */
  transition: transform 0.4s ease, opacity 0.4s ease;
  will-change: transform, opacity;
}

.wckd-slides > .column .blur-slide,
.wckd-slides > .column .fade-slide {transition: filter 0.3s ease, opacity 0.3s ease;will-change: filter, opacity;}

.overlay-navigation {z-index: 999999}
.wckd-overlay-content {
  display: none;
  z-index: 99999;
  position: fixed;
  height: auto;
  max-height: 85%;
  width: 90%;
  background: var(--background-color-light);
  color: var(--font-color);
  transform: translateY(-50%);
  margin: 20px auto;
  top: 50%;
  right: 0;
  left: 0;
  text-wrap: initial;
  box-shadow: 10px 0px 20px 0 rgb(0 0 0 / 10%);
  border-radius: var(--feather);
  transition: all 0.5s ease-in-out;
  overflow-y: auto;
}
.wckd-overlay-nav{z-index: 99999;right: 0;opacity: 1;transition: all 0.5s ease-in-out;}
.wckd-overlay-nav {position: fixed;top: 50%;display: block;}
.wckd-overlay-nav.visible {opacity: 1;right:0px;}
button.next-overlay,
button.prev-overlay{width: 44px;height: 44px;line-height: 44px;padding: 0;text-align: center;color: var(--font-color);background-color: var(--background-color);border-radius: 0;-webkit-border-top-left-radius: 6px;-webkit-border-bottom-left-radius: 6px;-moz-border-radius-topleft: 6px;-moz-border-radius-bottomleft: 6px;border-top-left-radius: 6px;border-bottom-left-radius: 6px;display: block;margin: 0 0 1px 0;}
button.close-overlay{position:fixed;top:6px;right:12px;width:36px;height: 34px;font-size: 34px;padding:0;text-align:center;}
button.close-overlay svg{stroke:var(--font-color);}
button.next-overlay:hover,
button.prev-overlay:hover,
button.close-overlay:hover{background:var(--background-color)}
button.next-overlay:after{font-family:"Material Icons";content:"\e5c8";width:32px}
button.prev-overlay:before{font-family:"Material Icons";content:"\e5c4";width:32px}

.wckd-overlay-content .pad{overflow-y:auto;max-height:99vh}
.wckd-overlay-content.open-overlay{display:block}
.wckd-overlay-content.flyout{transform:none;margin:0;right:-80%;top:0;bottom:0;left:auto;max-height: 100%;width:80%;max-width:900px;display:block;transition:all 0.5s ease-in-out;overflow-y:auto}
.wckd-overlay-content.flyout.open-overlay{right:0}
.wckd-overlay-content.flyout-top{top:-100%;bottom:auto;left:0;width:100%;display:block;transition:all 0.5s ease-in-out;overflow-y:auto}
.wckd-overlay-content.flyout-top.open-overlay {top:0}

.wckd-overlay-content.horizontal-scroll{text-align: left;transform:none;margin:0;right:-100%;top:0;bottom:0;left:auto;max-height: 100%;width:100%;display:flex;transition:all 0.5s ease-in-out;overflow-x:auto;}
.wckd-overlay-content.horizontal-scroll.open-overlay{right:0}
.wckd-overlay-content.horizontal-scroll > .item {flex: 0 0 100%;box-sizing: border-box;scroll-snap-align: start;}

.wckd-gallery{overflow:hidden}
.wckd-gallery.round-thumbs:hover a{margin-right:0px}
.wckd-gallery.round-thumbs a {max-width: 36px;overflow: hidden;display: block;float: left;margin: 12px -8px 12px 0;transition: 0.2s;padding: 0;border-radius: var(--border-radius);border: 3px solid var(--background-color-x);}
.wckd-gallery.round-thumbs a:hover{border:none;max-width:36px}





.wckd-bento.columns {display: grid;box-sizing: content-box;align-items: start;position: relative;overflow: hidden;}
.wckd-bento .column {position: absolute;}
.wckd-bento .column img {display: block;width: 100%;height: auto;}

.progression{	align-self: end;background:#f1f1f1;display:block;width:100%;height:12px;}
.progression span{display:inline-block;height:12px;position:absolute;left:0}
.progression span.in-progress{background:#edfcf9;left:0}
.progression span.is_ready{background-color:#edfcf9}
.progression span.is_done{background-color:var(--theme-1)}
.progression span.total_progress{background-color:var(--green)}
.progression .percent {height: 12px;font-size: 10px;line-height: 12px;font-weight: bold;left:1px;margin: 0;padding: 0;color: #ffffff;}

.columns.wckd-showcase {display: flex;flex-wrap: wrap;box-sizing: border-box;}
.wckd-showcase > .column {display: flex;flex: 1 0 auto;box-sizing: border-box;transition: width 0.3s ease;border-left: 1px solid var(--border-color);overflow: hidden;height: 100%;background-size: cover;background-position: center center;background-repeat: no-repeat}
.wckd-showcase > .column.expanded {flex-basis: 40%;}

.wckd-carousel {display: flex;overflow-x: auto;overflow-y: hidden;scroll-snap-type: x mandatory; scroll-snap-stop: always;scroll-behavior: smooth;-webkit-overflow-scrolling: touch;padding-bottom: var(--size-m);align-items: stretch;overscroll-behavior-x: contain;gap: var(--gap-value, 0);}
.wckd-carousel > .column {flex: 0 0 var(--column-width);scroll-snap-align: start;min-height: 100px;height: auto;}
.wckd-carousel.show-next-slide > .column {flex-basis: calc(var(--column-width) - 60px);}
.wckd-carousel.column-gap-xs { --gap-value: var(--size-xs); }
.wckd-carousel.column-gap-s  { --gap-value: var(--size-s); }
.wckd-carousel.column-gap    { --gap-value: var(--size-m); }
.wckd-carousel.column-gap-l  { --gap-value: var(--size-l); }
.wckd-carousel.column-gap-xl { --gap-value: var(--size-xl); }
.wckd-carousel.column-gap-xxl{ --gap-value: var(--size-xxl); }
.wckd-carousel.count-1 { --column-width: calc((100% - 0 * var(--gap-value)) / 1); }
.wckd-carousel.count-2 { --column-width: calc((100% - 1 * var(--gap-value)) / 2); }
.wckd-carousel.count-3 { --column-width: calc((100% - 2 * var(--gap-value)) / 3); }
.wckd-carousel.count-4 { --column-width: calc((100% - 3 * var(--gap-value)) / 4); }
.wckd-carousel.count-5 { --column-width: calc((100% - 4 * var(--gap-value)) / 5); }
.wckd-carousel.count-6 { --column-width: calc((100% - 5 * var(--gap-value)) / 6); }
.wckd-carousel-nav {display: grid;grid-template-columns: var(--size-xl) 1fr var(--size-xl);align-items: center;position: absolute;inset: 0;pointer-events: none;z-index: 2;}
.prev-btn,
.next-btn {pointer-events: auto;cursor: pointer;border: none;}
.prev-btn { grid-column: 1; justify-self: start;margin-left: var(--size-s);}
.next-btn { grid-column: 3; justify-self: end; margin-right: var(--size-s);}
.prev-btn:disabled,
.next-btn:disabled {pointer-events: none;opacity: 0.2;}
/* WebKit Browsers: Chrome, Safari, Edge, Opera  */
.wckd-carousel::-webkit-scrollbar {height: 4px;}
.wckd-carousel::-webkit-scrollbar-track {background-color: var(--border-color, #eee); }
.wckd-carousel::-webkit-scrollbar-thumb {background-color: var(--background-color-light, #333);border-radius: 2px;}
.wckd-carousel::-webkit-scrollbar-thumb:hover {background-color: #555;}
/* Firefox Only */
@-moz-document url-prefix() {
  .wckd-carousel {scrollbar-width: thin;scrollbar-color: var(--background-color-light, #333) var(--border-color, #eee);}
}
@media (prefers-reduced-motion: reduce) {
	.wckd-carousel {scroll-behavior: auto;}
}
@media (max-width: 767px) {
	.wckd-carousel.count-2,
	.wckd-carousel.count-3 { --column-width: 80%; }
	.wckd-carousel.count-4,
	.wckd-carousel.count-5,
	.wckd-carousel.count-6 { --column-width: 60%; }
}

.checklist {list-style-type: none;counter-reset: checklist-counter;}
.checklist li {position: relative;padding-left: 30px;margin-bottom: 10px;}
.checklist li::before {content: "";position: absolute;left: 0;top: 1px;width: 20px;height: 20px;border: 1px solid #ccc;background-color: #fff;}
.checklist li::after {content: "";position: absolute;left: 6px;top: 7px;width: 8px;height: 4px;border-width: 0 2px 2px 0;border-style: solid;border-color: #555;transform: rotate(45deg);opacity: 0;}
.checklist li.checked::before {background-color: #a7d48f;border-color: #a7d48f;}
.checklist li.checked::after {opacity: 1;}
.checklist li.checked span {text-decoration: line-through;color: #999;}


#toc ol{margin:0;padding:0}
#toc li{margin:0;padding:0;list-style: none}
#toc li > ol{margin:0 0 0 8px;padding:0 0 0 4px;}
#toc  a{display:block;padding:4px;border-bottom:1px dashed  var(--border-color)}
#toc  a.active{background: var(--button-active-color)}
#toc li li a{border-left: 1px solid var(--border-color)}
#toc li li a.active{background:none; color:var(--red);border-color:var(--red)}

.wckd-menu input[type="radio"] {display: none;}
.wckd-menu span:before {content: "";position: absolute;}
.wckd-menu input[type="radio"]:checked + span,.nav input[type="radio"]:checked + span:before {color:var(--font-color);border-bottom: 1px solid var(--border-color);}
.wckd-menu label span{padding:6px 12px;font-size:85%;white-space: nowrap;display: block}

#breadcrumbs {display: flex;overflow: hidden;padding: 0;margin: 0;align-items: center}
#breadcrumbs li{list-style:none;margin:0;padding:0}
#breadcrumbs a{white-space:nowrap;color: var(--font-color);text-align:center;}
#breadcrumbs a:hover{text-decoration:underline}
#breadcrumbs li+li:before{padding:var(--size-s);content:"\00bb"}
#breadcrumbs .wckd-icon{width:1em;height:1em}

#pagination{display: flex;overflow: hidden;padding: 0;margin: 0;font-size:var(--font-small);align-items: center;}
#pagination li{list-style:none;margin:2px;padding:0;}
#pagination a{display: block;color: var(--font-color);text-align:center; border: 1px solid transparent;padding: 6px 12px;border-radius: var(--border-radius)}

#pagination a:hover,
#pagination .active a{background-color: var(--background-color-low);color:var(--meta-color);border: 1px solid var(--border-color);}
#pagination .wckd-icon{padding: 6px;}

/*
.tooltip {
position: relative;display: inline-block;cursor: pointer;}
.tooltip:hover::before, 
.tooltip:focus::before {content: attr(data-tooltip-content);position: absolute;background-color: #333;color: #fff;font-size: 80%;line-height: 1.4;padding: 8px;border-radius: 5px;z-index: 1;bottom: 125%;width: 300px;opacity: 0;transition: opacity 0.3s ease;}
.tooltip:hover::before, .tooltip:focus::before {opacity: 1;}
*/
.wckd-tooltip{cursor:pointer}
.tooltip-content {visibility: hidden;position: absolute;bottom: 125%;transform: translateX(-50%);background-color: var(--background-color-high);color: var(--font-color);border-radius: var(--border-radius);padding: var(--pad-condensed);box-shadow:var(--shadow);font-size:1em;transition: opacity 0.5s;opacity: 0;z-index: 99;text-transform: none;max-width: 576px;}
.wckd-tooltip:hover + .tooltip-content {visibility: visible;opacity: 1;}

.wckd-tabs{grid-template-columns: repeat(1, 1fr);}
.wckd-tabs > .column{padding:0;width:100%}
.wckd-tabs > .column > .tabs-toggle{display: none;}
.wckd-tabs > .column > .tabs-content{height: 0;position: absolute;visibility: hidden;}
.wckd-tabs > .column.active > .tabs-content{ visibility: visible;position: relative;height: auto;max-height: unset;}
.wckd-tabs.padded .tabs-content{padding: var(--size-m)}

.wckd-tabs .tabs-toggle,
.tabs-toolbar .tabs-toggle {display: block;background: var(--background-color-fade);border-color:transparent;color: var(--font-color);padding:4px var(--size-m);border-radius: var(--feather);}

.tabs-toolbar .tabs-toggle.active,
.wckd-tabs .column.active > .tabs-toggle{background-color: var(--background-color-light);
	padding-bottom: 8px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}
.tabs-toolbar > ol{position: relative;margin:0;padding:0;display: grid;grid-gap:2px;grid-auto-flow: column;grid-auto-columns: max-content;overflow-x: auto}
.tabs-toolbar ol > li{margin:0;padding:0;list-style:none;max-width: 100%;}

.wckd-tabs.vertical{display: inline-block;vertical-align: top;flex: 1;}
.tabs-toolbar.vertical > ol{grid-auto-flow: initial}
.tabs-toolbar.vertical .tabs-toggle{width:100%;padding:var(--size-s) var(--size-m);
-webkit-border-radius: var(--feather);
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: var(--feather);
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-radius: var(--feather);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.tabs-toolbar > ol::-webkit-scrollbar {height: 4px;}
.tabs-toolbar > ol::-webkit-scrollbar-track {background-color: var(--border-color);border-radius:0;}
.tabs-toolbar > ol::-webkit-scrollbar-thumb {background-color: var(--border-color);border-radius:0;}
.tabs-toolbar > ol::-webkit-scrollbar-thumb:hover {background-color: var(--border-color);}
@media (max-width: 767px) {
	.tabs-toolbar.accordion{display:none}
	.wckd-tabs.accordion > .column > .tabs-toggle{display: block;width: 100%;}
}

.steps{display:inline-block;overflow:hidden;counter-reset:flag}
.steps a{position: relative;text-decoration:none;display:block;float:left;font-size:14px;font-weight:var(--strong);line-height:36px;padding:0 10px 0 60px;overflow:initial}
.steps a:first-child{padding-left:46px;border-radius:5px 0 0 5px}
.steps a:first-child:before{left:14px}
.steps a:last-child{border-radius:0 5px 5px 0;padding-right:20px}
.steps a:after{content:"";position:absolute;top:0;right:-18px;width:36px;height:36px;transform:scale(0.707) rotate(45deg);z-index:1;box-shadow:1px -1px 0 1px var(--border-color),2px -1px 0 1px rgba(255, 255, 255, 0.1);border-radius:0 5px 0 50px}
.steps a:last-child:after{content:none}
.steps a:before{content:counter(flag);color:var(--font-color);counter-increment:flag;border-radius:100%;text-align:center;font-size:80%;width:20px;height:20px;line-height:20px;margin:8px 0;position:absolute;background:var(--background-color);top:0;left:30px;font-weight:var(--strong);border:1px solid var(--border-color)}
.steps a,
.steps a:after{background:var(--background-color);color:var(--meta-color)}
.steps a:hover,
.steps a.active,
.steps a:hover:after,
.steps a.active:after{background:var(--font-color);color:var(--font-color-x)}

.wckd-checkers{grid-template-columns:repeat(1, 1fr)}
.wckd-checkers .column{display:grid;grid-template-columns:repeat(2, 1fr);align-items:center;grid-template-areas:"group image""group image"}
.wckd-checkers .column:nth-child(even) .column-image{grid-area:image;justify-self:end}
.wckd-checkers .column:nth-child(even) .group{grid-area:group}
.wckd-checkers .column .group{padding:60px 15%}