@charset "utf-8";
/* CSS Document */
/**
 * @package WordPress
 * @subpackage HLX
 * @since HLX 1.7.0.2412
 */

:root,
html,
body.scroll-lock {
	/* scroll-snap-type: y proximity;
	scroll-snap-stop: always; */
	scroll-behavior: smooth;
}
#app #app-main.sectioned {
}
#app #app-main.sectioned .section {
	--sec-radius: calc(var(--hlx-sp-10));
	scroll-snap-align: start end;
}
@media (min-width: 992) {
	#app #app-main.sectioned .section {
		--sec-radius: calc(2 * var(--hlx-sp-10));
	}

}
#app #app-main.sectioned .section.full-height {
	min-height: 100vh;
}
#app #app-main.sectioned .section:not(.active) {
}
#app #app-main.sectioned .container,
#app #app-main.sectioned .container-fluid,
#app #app-main.sectioned .container-xxl,
#app #app-main.sectioned .container-xl,
#app #app-main.sectioned .container-lg,
#app #app-main.sectioned .container-md,
#app #app-main.sectioned .container-sm {
	--bs-gutter-x: var(--hlx-sp-6);
	--bs-gutter-y: calc(4 * var(--hlx-sp-6));
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow-x: clip;
	overflow-y: clip;
}
#app #app-main.sectioned .folded-top,
#app #app-main.sectioned .folded-bottom,
#app #app-main.sectioned .padded-top,
#app #app-main.sectioned .padded-bottom {
	overflow-y: visible;
}
#app #app-main.sectioned .folded-top {
	margin-top: calc(-1 * var(--bs-gutter-y) - var(--sec-radius));
}
#app #app-main.sectioned .folded-bottom {
	margin-bottom: calc(-1 * var(--bs-gutter-y) - var(--sec-radius));
}
#app #app-main.sectioned .padded-top {
	margin-top: calc(-1 * var(--bs-gutter-y) - var(--sec-radius));
	padding-top: calc(var(--bs-gutter-y) + var(--sec-radius));
}
#app #app-main.sectioned .padded-bottom {
	margin-bottom: calc(-1 * var(--bs-gutter-y) - var(--sec-radius));
	padding-bottom: calc(var(--bs-gutter-y) + var(--sec-radius));
}

#app #app-main.sectioned .block {
	/* appearance */
	--sec-opacity: 1;
	/* transformation */
	--sec-stage: max(100vw, 100vh);
	--sec-depth: 2;
	--sec-perspective: perspective(calc(var(--sec-depth) * var(--sec-stage)));
	--sec-translate: translate(0, 0);
	--sec-translateZ: translateZ(0);
	--sec-scale: scale(1, 1);
	--sec-rotate: rotate(0);
	--sec-rotateX: rotateX(0);
	--sec-rotateY: rotateY(0);
	--sec-rotateZ: rotateZ(0);
	/* transition */
	--sec-time: 1s;
	--sec-duration: 0.5;
	--sec-delay: 0;
	--sec-easing: ease;
	--sec-duration-f: var(--sec-duration);
	--sec-delay-f: var(--sec-delay);
	/* transform-origin: center; */
	/* transform-style: preserve-3d; */
	transform: var(--sec-perspective) var(--sec-translateZ) var(--sec-rotateX) var(--sec-rotateY) var(--sec-rotateZ) var(--sec-translate) var(--sec-rotate) var(--sec-scale);
	transition: all calc(var(--sec-time) * var(--sec-duration-f)) var(--sec-easing) calc(var(--sec-time) * var(--sec-delay-f));
	opacity: var(--sec-opacity);
	position: relative;
}
#app #app-main.sectioned .block.type-text {
	z-index: 9;
}
#app #app-main.sectioned .block.type-image {
	z-index: 5;
}
#app #app-main.sectioned .block.type-video {
	z-index: 4;
}
#app #app-main.sectioned .block.type-button {
	z-index: 8;
}
#app #app-main.sectioned .block.type-card {
	z-index: 7;
}
#app #app-main.sectioned .block.type-list {
	z-index: 6;
}
#app #app-main.sectioned .block.type-layout {
	z-index: 3;
}


#app #app-main.sectioned .block.fast { --sec-duration: 0.3; }
#app #app-main.sectioned .block.slow { --sec-duration: 0.8; }
/* #app #app-main.sectioned .section.active .block.delayed-1 { --sec-delay: 0.5; }
#app #app-main.sectioned .section.active .block.delayed-2 { --sec-delay: 0.8; }
#app #app-main.sectioned .section.active .block.delayed-3 { --sec-delay: 1.3; }
#app #app-main.sectioned .section.active .block.delayed-4 { --sec-delay: 2.1; }
#app #app-main.sectioned .section.active .block.delayed-5 { --sec-delay: 3.4; }
#app #app-main.sectioned .section.active .block.defered-1 { --sec-delay-f: calc(var(--sec-delay) + 0.1 * var(--n)); }
#app #app-main.sectioned .section.active .block.defered-2 { --sec-delay-f: calc(var(--sec-delay) + 0.2 * var(--n)); }
#app #app-main.sectioned .section.active .block.defered-3 { --sec-delay-f: calc(var(--sec-delay) + 0.3 * var(--n)); } */
#app #app-main.sectioned .block.delayed-1 { --sec-delay: 0.5; }
#app #app-main.sectioned .block.delayed-2 { --sec-delay: 0.8; }
#app #app-main.sectioned .block.delayed-3 { --sec-delay: 1.3; }
#app #app-main.sectioned .block.delayed-4 { --sec-delay: 2.1; }
#app #app-main.sectioned .block.delayed-5 { --sec-delay: 3.4; }
#app #app-main.sectioned .block.defered-1 { --sec-delay-f: calc(var(--sec-delay) + 0.1 * var(--n)); }
#app #app-main.sectioned .block.defered-2 { --sec-delay-f: calc(var(--sec-delay) + 0.2 * var(--n)); }
#app #app-main.sectioned .block.defered-3 { --sec-delay-f: calc(var(--sec-delay) + 0.3 * var(--n)); }
#app #app-main.sectioned .block.rushed { --sec-duration-f: calc(var(--sec-duration) - 0.01 * var(--n)); }
#app #app-main.sectioned .block.slowed { --sec-duration-f: calc(var(--sec-duration) + 0.01 * var(--n)); }
#app #app-main.sectioned .block.linear { --sec-easing: linear; }
#app #app-main.sectioned .block.ease-in { --sec-easing: ease-in; }
#app #app-main.sectioned .block.ease-out { --sec-easing: ease-out; }
#app #app-main.sectioned .block.ease-in-out { --sec-easing: ease-in-out; }
#app #app-main.sectioned .block.ease-over { --sec-easing: cubic-bezier(0.67, 1.33, 0.67, 1.00); }
#app #app-main.sectioned .block.ease-back { --sec-easing: cubic-bezier(0.50, 1.50, 0.50, 1.00); }
#app #app-main.sectioned .block.ease-snap { --sec-easing: cubic-bezier(1.00, 0.00, 0.50, 1.00); }
#app #app-main.sectioned .block.delegate .block {
	--sec-time: inherit;
	--sec-duration: inherit;
	--sec-delay: inherit;
	--sec-easing: inherit;
}

#app #app-main.sectioned .section:not(.active) .block.fade-in { --sec-opacity: 0; }

#app #app-main.sectioned .section:not(.active) .block.from-left-25 { --sec-translate: translate(-25%, 0) }
#app #app-main.sectioned .section:not(.active) .block.from-left-50 { --sec-translate: translate(-50%, 0) }
#app #app-main.sectioned .section:not(.active) .block.from-left-75 { --sec-translate: translate(-75%, 0) }
#app #app-main.sectioned .section:not(.active) .block.from-left-100 { --sec-translate: translate(-100%, 0) }

#app #app-main.sectioned .section:not(.active) .block.from-right-25 { --sec-translate: translate(25%, 0) }
#app #app-main.sectioned .section:not(.active) .block.from-right-50 { --sec-translate: translate(50%, 0) }
#app #app-main.sectioned .section:not(.active) .block.from-right-75 { --sec-translate: translate(75%, 0) }
#app #app-main.sectioned .section:not(.active) .block.from-right-100 { --sec-translate: translate(100%, 0) }

#app #app-main.sectioned .section:not(.active) .block.from-top-25 { --sec-translate: translate(0, -50%) }
#app #app-main.sectioned .section:not(.active) .block.from-top-50 { --sec-translate: translate(0, -100%) }
#app #app-main.sectioned .section:not(.active) .block.from-top-75 { --sec-translate: translate(0, -150%) }
#app #app-main.sectioned .section:not(.active) .block.from-top-100 { --sec-translate: translate(0, -200%) }

#app #app-main.sectioned .section:not(.active) .block.from-bottom-25 { --sec-translate: translate(0, 50%) }
#app #app-main.sectioned .section:not(.active) .block.from-bottom-50 { --sec-translate: translate(0, 100%) }
#app #app-main.sectioned .section:not(.active) .block.from-bottom-75 { --sec-translate: translate(0, 150%) }
#app #app-main.sectioned .section:not(.active) .block.from-bottom-100 { --sec-translate: translate(0, 200%) }

@media (max-width: 767.98px) {
	#app #app-main.sectioned .section:not(.active) .block.from-left-25.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-left-50.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-left-75.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-left-100.simp-mob,

	#app #app-main.sectioned .section:not(.active) .block.from-right-25.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-right-50.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-right-75.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-right-100.simp-mob,

	#app #app-main.sectioned .section:not(.active) .block.from-top-25.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-top-50.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-top-75.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-top-100.simp-mob,

	#app #app-main.sectioned .section:not(.active) .block.from-bottom-25.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-bottom-50.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-bottom-75.simp-mob,
	#app #app-main.sectioned .section:not(.active) .block.from-bottom-100.simp-mob { --sec-translate: translate(0, 25vh) }
}

#app #app-main.sectioned .section:not(.active) .block.from-back-25 { --sec-translateZ: translateZ(calc(-1 * var(--sec-stage))) }
#app #app-main.sectioned .section:not(.active) .block.from-back-50 { --sec-translateZ: translateZ(calc(-2 * var(--sec-stage))) }
#app #app-main.sectioned .section:not(.active) .block.from-back-75 { --sec-translateZ: translateZ(calc(-3 * var(--sec-stage))) }
#app #app-main.sectioned .section:not(.active) .block.from-back-100 { --sec-translateZ: translateZ(calc(-4 * var(--sec-stage))) }

#app #app-main.sectioned .section:not(.active) .block.grow-25 { --sec-rotateX: scale(0.75, 0.75) }
#app #app-main.sectioned .section:not(.active) .block.grow-50 { --sec-rotateX: scale(0.50, 0.50) }
#app #app-main.sectioned .section:not(.active) .block.grow-75 { --sec-rotateX: scale(0.25, 0.25) }
#app #app-main.sectioned .section:not(.active) .block.grow-100 { --sec-rotateX: scale(0.00, 0.00) }

#app #app-main.sectioned .section:not(.active) .block.shrink-25 { --sec-rotateX: scale(1.25, 1.25) }
#app #app-main.sectioned .section:not(.active) .block.shrink-50 { --sec-rotateX: scale(1.50, 1.50) }
#app #app-main.sectioned .section:not(.active) .block.shrink-75 { --sec-rotateX: scale(1.75, 1.75) }
#app #app-main.sectioned .section:not(.active) .block.shrink-100 { --sec-rotateX: scale(2.00, 2.00) }

#app #app-main.sectioned .section:not(.active) .block.flip-up { --sec-rotateX: rotateX(-90deg) }
#app #app-main.sectioned .section:not(.active) .block.flip-down { --sec-rotateX: rotateX(90deg) }
#app #app-main.sectioned .section:not(.active) .block.flip-in { --sec-rotateX: rotateY(90deg) }
#app #app-main.sectioned .section:not(.active) .block.flip-out { --sec-rotateX: rotateY(-90deg) }

#app #app-main.sectioned .block.type-image,
#app #app-main.sectioned .block.type-video {
	position: absolute;
	pointer-events: none;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
#app #app-main.sectioned .block.type-image .block-content.media,
#app #app-main.sectioned .block.type-video .block-content.media {
	display: inline-block;
	width: 100%;
	height: 100%;
	position: inherit;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#app #app-main.sectioned .block.type-text .block-content.jumbo > * {
	font-size: min(11cqw, 10rem);
	font-family: var(--hlx-ff-alt);
	text-transform: uppercase;
	line-height: var(--hlx-lh-xs);
}
#app #app-main.sectioned .block.reset {
	transform: none !important;
}
#app #app-main.sectioned .block.backdrop {
	width: 100vw !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 0 0 -50vw !important;
	border: 0 !important;
	padding: 0 !important;
	position: absolute !important;
	top: 0 !important;
	left: 50% !important;
	overflow: hidden !important;
	clip-path: content-box !important;
	transform: none !important;
	pointer-events: none !important;
	z-index: 0 !important;
}
#app #app-main.sectioned .block.backdrop .media {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	transform: none !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
}