/* intro */
.intro {
	z-index: 50;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100svh;
}
.intro .cnt {
		position: relative;
		width: 100%;
		max-width: 7rem;
		margin: auto;
		text-align: center;
	}
:is(.intro .cnt) .button {
			display: block;
			padding: 0.09rem 0.28rem 0.13rem;
			width: fit-content;
			border: 0.01rem solid #1da1a5;
			color: #1da1a5;
			border-radius: 0.4rem;
			font-size: 0.16rem;
			line-height: 1em;
			letter-spacing: -0.04em;
			font-weight: 700;
			backdrop-filter: blur(0.08rem);
			margin: auto;
			margin-top: 0.3rem;
		}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.intro .cnt) .button {
				white-space: nowrap;
		}
			}
:is(.intro .cnt) .icon {
			width: 0.8rem;
			margin: auto;
			margin-bottom: 0.22rem;
		}
:is(.intro .cnt) .logo {
			width: 4.07rem;
			margin: auto;
			margin-bottom: 0.28rem;
		}
:is(.intro .cnt) .text {
			max-width: 5.28rem;
			text-align: center;
			margin: auto;
			margin-bottom: 0.08rem;
		}
.de:is(:is(.intro .cnt) .text) {
				max-width: 5.38rem;
			}
:is(.intro .cnt) .label {
			margin-bottom: 0.18rem;
		}
:is(.intro .cnt) .small-text {
			font-size: 0.13rem;
			line-height: 1.1em;
			color: #1da1a5;
			font-weight: 500;
		}
:is(.intro .cnt) .subtitle {
			font-size: 0.24rem;
			line-height: 1.2em;
			letter-spacing: 0em;
			font-weight: 700;
			color: #1da0a5;
			text-transform: uppercase;
			margin-bottom: 0.18rem;
			text-align: center;
		}
:is(.intro .cnt) .explanation {
			text-align: center;
			margin-top: 0.6rem;
		}
:is(:is(.intro .cnt) .explanation) .subtext {
				font-size: 0.16rem;
				line-height: 1.2em;
				letter-spacing: 0;
				font-weight: 500;
				color: #1da0a5;
			}
:is(.intro .cnt) .cards {
			display: flex;
			gap: 0.64rem;
			margin-top: 0.32rem;
			margin-bottom: 0.24rem;
		}
:is(:is(.intro .cnt) .cards) .card {
				display: block;
				padding: 0.5rem 0.25rem;
				background-color: #ecfdfd;
				flex: 1;
			}
:is(:is(:is(.intro .cnt) .cards) .card) .card-title {
					font-size: 0.32rem;
					line-height: 1.4em;
					letter-spacing: 0;
					font-weight: 700;
					text-transform: uppercase;
					color: #1da0a5;
				}
:is(:is(:is(.intro .cnt) .cards) .card) .card-subtitle {
					font-size: 0.16rem;
					line-height: 1em;
					letter-spacing: 0;
					font-weight: 500;
					color: #ff5714;
					margin-bottom: 0.4rem;
				}
:is(:is(:is(.intro .cnt) .cards) .card) .card-text {
					font-size: 0.16rem;
					line-height: 1.3em;
					letter-spacing: 0;
					font-weight: 500;
					color: #1da1a5;
				}
@media screen and (max-width: 768px) and (orientation: portrait) {
		.intro .cnt {
			max-width: 94%;
		}

			:is(.intro .cnt) .cards {
				gap: 0.3rem;
			}

				:is(:is(.intro .cnt) .cards) .card {
					padding: 0.24rem;
				}

					:is(:is(:is(.intro .cnt) .cards) .card) .card-title {
						line-height: 1em;
						margin-bottom: 0.04rem;
					}
	}

/* timeline */
.timeline {
	display: block;
	position: relative;
	height: 600svh;

	/*  */
}
.timeline .sticky {
		display: block;
		position: relative;
		width: 100%;
		height: 100lvh;
		overflow: hidden;
	}
.timeline .canvas-frame {
		display: block;
		position: absolute;
		width: 100%;
		height: 100lvh;
	}
:is(.timeline .canvas-frame) canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
/*  */
.timeline .block:not(.intro) {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		height: 100dvh;
		transform-origin: 50% 100%;
	}
@media screen and (max-width: 768px) and (orientation: portrait) {
.timeline .block:not(.intro) {
			transition: height 300ms ease;
			height: var(--mobile100vh);
	}
		}
:is(.timeline .block:not(.intro)):not(:first-child) {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
/*  */
:is(.timeline .block:not(.intro)) .small-logo {
			position: absolute;
			transform: translate(-50%, 0);
			top: 0.4rem;
			left: 50%;
			width: 2.27rem;
		}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.timeline .block:not(.intro)) .small-logo {
				top: 0.8rem;
		}
			}
/*  */
:is(.timeline .block:not(.intro)) .buttons-frame {
			display: block;
			position: absolute;
			z-index: 10;
			transform: translate(-50%, 0);
			width: fit-content;
			left: 50%;
			bottom: 0.6rem;
		}
.disable:is(:is(.timeline .block:not(.intro)) .buttons-frame) {
				pointer-events: none;
			}
:is(:is(.timeline .block:not(.intro)) .buttons-frame) .frame {
				display: flex;
				align-items: center;
				width: fit-content;
				gap: 0.12rem;
				margin: auto;
				margin-bottom: 0.24rem;
			}
:is(:is(.timeline .block:not(.intro)) .buttons-frame) .or {
				display: block;
				width: 0.22rem;
			}
:is(:is(.timeline .block:not(.intro)) .buttons-frame) .button {
				display: block;
				padding: 0.09rem 0.28rem 0.13rem;
				width: fit-content;
				border: 0.01rem solid #ecfdfd;
				border-radius: 0.4rem;
				font-size: 0.24rem;
				line-height: 1em;
				letter-spacing: -0.04em;
				font-weight: 700;
				backdrop-filter: blur(0.08rem);
				color: #ecfdfd;
			}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.timeline .block:not(.intro)) .buttons-frame) .button {
					white-space: nowrap;
			}
				}
:is(:is(.timeline .block:not(.intro)) .buttons-frame) .text {
				color: #ecfdfd;
			}
:is(:is(.timeline .block:not(.intro)) .buttons-frame.color-2) .button {
				border: 0.01rem solid #1da1a5;
				color: #1da1a5;
			}
:is(:is(.timeline .block:not(.intro)) .buttons-frame.color-2) .text {
				color: #1da1a5;
			}
:is(.timeline .block:not(.intro)) .text {
			font-size: 0.16rem;
			line-height: 1.1em;
			letter-spacing: 0;
			text-transform: uppercase;
			color: #1da1a5;
			text-align: center;
		}
/*  */
:is(.timeline .block:not(.intro)) .media-frame:not(.title-frame):not(.small-logo) {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
:is(:is(.timeline .block:not(.intro)) .media-frame:not(.title-frame):not(.small-logo)) .media:nth-child(1) {
				z-index: 1;
			}
:is(:is(.timeline .block:not(.intro)) .media-frame:not(.title-frame):not(.small-logo)) .media:nth-child(2) {
				z-index: 2;
			}
:is(:is(.timeline .block:not(.intro)) .media-frame:not(.title-frame):not(.small-logo)) .media:nth-child(3) {
				z-index: 3;
			}
:is(:is(.timeline .block:not(.intro)) .media-frame:not(.title-frame):not(.small-logo)) .media:nth-child(4) {
				z-index: 4;
			}
:is(:is(.timeline .block:not(.intro)) .media-frame:not(.title-frame):not(.small-logo)) .media:nth-child(5) {
				z-index: 5;
			}
:is(:is(.timeline .block:not(.intro)) .media-frame:not(.title-frame):not(.small-logo)) .media:nth-child(6) {
				z-index: 6;
			}
:is(:is(.timeline .block:not(.intro)) .media-frame:not(.title-frame):not(.small-logo)) .media:nth-child(7) {
				z-index: 7;
			}
/*  */
:is(.timeline .block:not(.intro)) .media-frame.revealers {
			pointer-events: none;
			z-index: 15;
		}
:is(.timeline .block:not(.intro)) .transformer {
			display: block;
			position: absolute;
			backface-visibility: hidden;
		}
:is(.timeline .block:not(.intro)) .media-frame .media {
			backface-visibility: hidden;
		}
:is(.timeline .block-intro) .media.lepi {
			transition: transform 900ms ease;
			transform: translate(110%, -50%);
			z-index: 0 !important;
			width: 4rem;
			height: 6rem;
			top: 50%;
			left: auto;
			right: 0;
		}
:is(.timeline .block-intro) .title-frame {
			width: 4.1rem;
			top: -2rem;
		}
:is(:is(.timeline .block-intro) .title-frame) .media {
				transition: transform 400ms ease-out;
			}
:is(:is(.timeline .block-intro) .title-frame) .media:active {
				transform: scale(0.5);
			}
@media screen and (min-aspect-ratio: 16 / 9) {
:is(.timeline .block-intro) .title-frame {
				width: 3rem;
				top: -1.4rem;
		}
			}
:is(.timeline.lepi .block-intro) .media.lepi {
				transform: translate(0%, -50%);
			}
:is(.timeline .block-solothurn) .title-frame {
			width: 4.9rem;
		}
:is(.timeline .block-losinj) .title-frame {
			width: 2.84rem;
		}

.footer-frame {
	display: block;
	position: relative;
	overflow: hidden;
	backface-visibility: hidden;
}

.footer-frame .content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100lvh;
		background-color: #ecfdfd;
		padding: 0rem 0 0.8rem;
	}

.footer-frame .layout {
		width: 100%;
		max-width: 8.14rem;
		margin: auto;
	}

@media screen and (max-width: 768px) and (orientation: portrait) {

.footer-frame .layout {
			max-width: 90%;
	}
		}

:is(.footer-frame .layout) .icon {
			width: 0.7rem;
			margin: auto;
			margin-bottom: 0.58rem;
		}

@media screen and (max-width: 768px) and (orientation: portrait) {

:is(.footer-frame .layout) .icon {
				transform: scale(0.75);
		}
			}

:is(.footer-frame .layout) .logo {
			width: 100%;
			margin: auto;
			margin-bottom: 0.38rem;
		}

@media screen and (min-aspect-ratio: 16 / 9) {

:is(.footer-frame .layout) .logo {
				width: 65%;
		}
			}

@media screen and (max-width: 768px) and (orientation: portrait) {

:is(.footer-frame .layout) .logo {
				transform: scale(0.75);
		}
			}

:is(.footer-frame .layout) .label {
			font-size: 0.19rem;
			line-height: 1em;
			letter-spacing: 1.26em;
			text-transform: uppercase;
			text-align: center;
			font-weight: 500;
			color: #1da1a5;
			margin-bottom: 0.08rem;
		}

:is(.footer-frame .layout) .text {
			text-align: center;
			color: #1da0a5;
		}

:is(.footer-frame .layout) .subtext {
			text-transform: none;
			margin: 0.04rem 0 0.3rem;
		}

.footer-frame .media-frame.bg {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

.footer-frame .copy {
		position: absolute;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		transform: translate(-50%, 0);
		left: 50%;
		bottom: 0.5rem;
		max-width: 14.4rem;
		width: 100%;
		padding: 0 0.56rem;
	}

:is(.footer-frame .copy) .copy-inner {
			display: flex;
			align-items: center;
			gap: 0.3rem;
		}

@media screen and (max-width: 768px) and (orientation: portrait) {

.footer-frame .copy {
			display: block;
			text-align: center;
	}

			:is(.footer-frame .copy) .copy-inner {
				width: fit-content;
				margin: auto;
				margin-top: 0.1rem;
			}
		}