body {
	background: #eac36b;
	padding-top: 0
}

.kilnAnimationContainer {
	min-height: 100vh;
	min-height: -moz-available;
	min-height: -webkit-fill-available;
	min-height: fill-available;
	overflow: hidden;
	background: #eac36b;
	position: relative;
	bottom: 0;
	text-align: center;
	display: grid
}

.kilnAnimationContainer h2 {
	line-height: 1.1
}

.kilnAnimationContainer .backgroundAnimation__skip {
	position: absolute;
	bottom: var(--margin-s);
	right: var(--page-wrapper-padding-raw);
	color: #fff;
	text-transform: uppercase;
	cursor: pointer;
	font-size: var(--fs-hero-skip);
	letter-spacing: 0.05em;
	font-weight: 400;
	z-index: 5
}

.kilnAnimationContainer canvas,.kilnAnimationContainer picture {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	right: 0;
	margin: 0 auto;
	height: 100vh;
	aspect-ratio: 1.7777777778;
	transform-origin: bottom center
}

@media (min-width:1025px) {
	.kilnAnimationContainer canvas,.kilnAnimationContainer picture {
		left: 0;
		transform: none
	}
}

.kilnAnimationContainer picture:first-child {
	transform: translateX(-45%) scale(0.7)
}

@media (min-width:769px) {
	.kilnAnimationContainer picture:first-child {
		transform: translateX(-60%) scale(0.8)
	}
}

@media (min-width:1025px) {
	.kilnAnimationContainer picture:first-child {
		transform: translateX(-20vw) scale(0.9)
	}
}

.kilnAnimationContainer .backgroundAnimation__slide {
	--background-size: 10%;
	--scale: 0.1;
	--opacity: 0;
	--opacity-duration: 0.5s;
	--translateX: -200%;
	opacity: 1;
	padding-top: var(--page-header-height);
	display: grid;
	align-items: start;
	text-align: left;
	pointer-events: none;
	height: 100vh;
	margin-left: var(--page-wrapper-padding-raw);
	margin-right: var(--page-wrapper-padding-raw);
	grid-column: 1;
	grid-row: 1;
	position: relative;
	z-index: 2
}

.kilnAnimationContainer .backgroundAnimation__slide:first-child,.kilnAnimationContainer .backgroundAnimation__slide:last-child {
	align-items: start
}

@media (min-width:1020px) {
	.kilnAnimationContainer .backgroundAnimation__slide {
		align-items: center
	}

	.kilnAnimationContainer .backgroundAnimation__slide:first-child,.kilnAnimationContainer .backgroundAnimation__slide:last-child {
		align-items: start
	}
}

@media (min-width:1025px) {
	.kilnAnimationContainer .backgroundAnimation__slide:first-child,.kilnAnimationContainer .backgroundAnimation__slide:last-child {
		align-items: center
	}
}

.kilnAnimationContainer .backgroundAnimation__slide>div {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--grid-gap);
	align-items: start;
	justify-content: center;
	margin: var(--margin-std) 0
}

@media (min-width:1020px) {
	.kilnAnimationContainer .backgroundAnimation__slide>div {
		justify-self: start;
		margin: 0
	}
}

.kilnAnimationContainer .backgroundAnimation__slide .color--black {
	color: #fff
}

.kilnAnimationContainer .backgroundAnimation__slide .ofenslide__text {
	color: #fff;
	opacity: 0;
	font-weight: 400;
	letter-spacing: 0.01em
}

.kilnAnimationContainer .backgroundAnimation__slide .ofenslide__text .arrowLink .icon--doubleArrow {
	--arrowSide: 24px
}

@media (min-width:1020px) {
	.kilnAnimationContainer .backgroundAnimation__slide .ofenslide__text .arrowLink .icon--doubleArrow {
		--arrowSide: 54px
	}
}

.kilnAnimationContainer .backgroundAnimation__slide .ofenslide__text h2 {
	margin-bottom: var(--margin-s);
	line-height: 1.1
}

.kilnAnimationContainer .backgroundAnimation__slide .ofenslide__text p {
	margin: 0 0 var(--margin-s)
}

.kilnAnimationContainer .backgroundAnimation__slide--left .ofenslide__text {
	grid-column: 1 / span 12
}

@media (min-width:1020px) {
	.kilnAnimationContainer .backgroundAnimation__slide--left .ofenslide__text {
		grid-column: 1 / span 6
	}
}

.kilnAnimationContainer .backgroundAnimation__slide--left .ofenslide__box {
	grid-column: 1 / span 8
}

@media (min-width:1020px) {
	.kilnAnimationContainer .backgroundAnimation__slide--left .ofenslide__box {
		grid-column: 8 / span 4
	}
}

@media (min-width:1500px) {
	.kilnAnimationContainer .backgroundAnimation__slide--left .ofenslide__box {
		grid-column: 9 / span 3
	}
}

.kilnAnimationContainer .backgroundAnimation__slide--right .ofenslide__text {
	grid-column: 1 / span 12
}

@media (min-width:1020px) {
	.kilnAnimationContainer .backgroundAnimation__slide--right .ofenslide__text {
		grid-column: 5 / span 6
	}
}

@media (min-width:1500px) {
	.kilnAnimationContainer .backgroundAnimation__slide--right .ofenslide__text {
		grid-column: 7 / span 6
	}
}

.kilnAnimationContainer .backgroundAnimation__slide .ofenslide__box {
	color: var(--color-flame-2);
	opacity: var(--opacity);
	padding: var(--margin-s);
	display: none;
	flex-direction: column;
	justify-content: center;
	position: relative;
	transform-origin: center center;
	margin: var(--margin-std) 0;
	font-size: var(--fs-hero-box-text)
}

@media (min-height:700px) {
	.kilnAnimationContainer .backgroundAnimation__slide .ofenslide__box {
		display: flex
	}
}

@media (min-width:1020px) {
	.kilnAnimationContainer .backgroundAnimation__slide .ofenslide__box {
		aspect-ratio: 1;
		margin: 0 var(--margin-s) var(--margin-s)
	}
}

.kilnAnimationContainer .backgroundAnimation__slide .ofenslide__box * {
	position: relative;
	z-index: 2
}

.kilnAnimationContainer .backgroundAnimation__slide .ofenslide__box .ofenslide__box__background {
	content: "";
	display: block;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: top left
}

.kilnAnimationContainer .backgroundAnimation__slide .ofenslide__box .arrowLink {
	margin-top: 25px
}

.kilnAnimationContainer .backgroundAnimation__slide .box__header {
	font-size: var(--fs-hero-box-header);
	line-height: 1.1;
	font-weight: 300;
	margin-bottom: 15px
}

.kilnAnimationContainer .backgroundAnimation__slide .box__text {
	font-weight: 400;
	letter-spacing: 0.01em
}

.kilnAnimationContainer #backgroundAnimation__slide--1 .header--lvlHero {
	margin-bottom: 0
}

.kilnAnimationContainer #backgroundAnimation__slide--1 .lead {
	font-weight: 400;
	line-height: 1.1;
	font-size: var(--fs-hero-lead);
	color: var(--color-flame-3)
}

.kilnAnimationContainer #backgroundAnimation__slide--3 .box__header {
	font-size: var(--fs-hero-box-header-lvl2)
}

.kilnAnimationContainer .backgroundAnimation__scroll {
	position: absolute;
	z-index: 5;
	bottom: 35px;
	left: 0;
	right: 0;
	align-items: center;
	justify-content: center;
	display: none
}

@media (min-width:1020px) {
	.kilnAnimationContainer .backgroundAnimation__scroll {
		display: flex
	}
}

.kilnAnimationContainer .backgroundAnimation__scroll>div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	animation-name: pulse;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite
}

.kilnAnimationContainer .backgroundAnimation__scroll>div:hover {
	animation-play-state: paused
}

.kilnAnimationContainer .backgroundAnimation__scroll a .icon--dropdown {
	transition: transform 0.2s ease
}

.kilnAnimationContainer .backgroundAnimation__scroll a .icon--doubleArrow {
	--arrowSide: 17px
}

.kilnAnimationContainer .backgroundAnimation__scroll a:hover .icon--dropdown {
	transform: rotate(90deg) translateX(10px)
}

.kilnAnimationContainer .backgroundAnimation__scroll a#prevSlide .icon--dropdown {
	transform: rotate(-90deg)
}

.kilnAnimationContainer .backgroundAnimation__scroll a#prevSlide:hover .icon--dropdown {
	transform: rotate(-90deg) translateX(10px)
}

@keyframes pulse {
	from {
		transform: scale3d(1, 1, 1)
	}

	50% {
		transform: scale3d(1.1, 1.1, 1.1)
	}

	to {
		transform: scale3d(1, 1, 1)
	}
}

.pulse {
	animation-name: pulse;
	animation-timing-function: ease-in-out
}

.pageheader {
	--background-opacity: 1
}

.navigation--sidebar {
	--background-color: var(--header-background-color);
	--flyout-color: #fff
}

.navigation--sidebar .sidebar__flyout {
	--link-color: #fff;
	--link-color-hover: #fff
}

.pageWrapper>.contentWrapper {
	background: #fff;
	overflow: hidden
}