*,
	*::after,
	*::before {
		box-sizing: border-box;
	}

	:root {
		--length: 0;
		font-size: 16px;
		--color-text: #000;
		--color-bg: #fff;
		--color-link: #fff;
		--color-link-hover: #fff;
	}


	body {
		margin: 0;
		padding: 0;
		color: var(--color-text);
		/* background-image: url( '/img/forair3.png' ); */
		background-color: var(--color-bg);
		background-size: contain;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		font-family: "area-normal",-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
		font-family: "anonymous-pro", monospace;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		height: 100%;
		overflow: hidden;
		animation: color 9s infinite linear;
	}


	@keyframes color {
		0%  { background: #F32837; }
		33%  { background: #FFCC00; }
		66%  { background: #FFFFFF; }
		100%  { background: #009A3D; }

	}

	.clouds {
		position: relative;
		overflow: hidden;
		height: 400px;
	}
	
	.initialCloud {
		position: absolute;
		transform: translateX(100vw);
		top: 150px;
		animation: moveFirst 5s linear .2s;
		animation-iteration-count: 1;
		width: 150px;
	}
	
	.firstCloud {
		position: absolute;
		transform: translateX(-30vw);
		top: 150px;
		animation: move 5s linear 5s infinite;
		width: 150px;
	}
	
	.secondCloud {
		position: absolute;
		transform: translateX(-30vw);
		top: 200px;
		animation: move 8s linear 0s infinite;
		width: 150px;
	}
	
	.thirdCloud {
		top: 250px;
		transform: translateX(-30vw);
		position: absolute;
		animation: move 11s linear 1s infinite;
		width: 150px;
	}

	.fourthCloud {
		top: 450px;
		transform: translateX(-30vw);
		position: absolute;
		animation: movetext 15s linear 1s infinite;
		width: 150px;
	}
	
	@keyframes move {
		from {
		transform: translateX(-30vw);
		}
		to {
		transform: translateX(100vw);
		}
	}
	
	@keyframes movetext {
		from {
		transform: translateX(100vw);
		}
		to {
		transform: translateX(-50vw);
		}
	}


	@keyframes moveFirst {
		from {
		transform: translateX(50vw);
		}
		to {
		transform: translateX(100vw);
		}
	}



	.pic-1 {
		animation: slideShow 10s linear infinite 0s;
		-o-animation: slideShow 10s linear infinite 0s;
		-moz-animation: slideShow 10s linear infinite 0s;
		-webkit-animation: slideShow 10s linear infinite 0s;
	}

	@keyframes slideShow {
		0% {
		opacity: 1;
		transform: scale(1);
		-ms-transform: scale(1);
		}
		5% {
		opacity: 1;
		transform: scale(1.1);
		-ms-transform: scale(1.1);
		}
		25% {
		opacity: 1;
		transform: scale(1.2);
		-ms-transform: scale(1.2);
		}
		30% {
		opacity: 1;
		transform: scale(1.3);
		-ms-transform: scale(1.3);
		}
		100% {
		opacity: 1;
		transform: scale(1.2);
		-ms-transformm: scale(1.2);
		}
	}
	@-o-keyframes slideShow {
		0% {
		opacity: 1;
		-o-transform: scale(1);
		}
		5% {
		opacity: 1;
		-o-transform: scale(1.1);
		}
		25% {
		opacity: 1;
		-o-transform: scale(1.2);
		}
		30% {
		opacity: 1;
		-o-transform: scale(1.3);
		}
		100% {
		opacity: 1;
		-o-transformm: scale(1.2);
		}
	}
	@-moz-keyframes slideShow {
		0% {
		opacity: 1;
		-moz-transform: scale(1);
		}
		5% {
		opacity: 1;
		-moz-transform: scale(1.1);
		}
		25% {
		opacity: 1;
		-moz-transform: scale(1.2);
		}
		30% {
		opacity: 1;
		-moz-transform: scale(1.3);
		}
		100% {
		opacity: 1;
		-moz-transformm: scale(1.2);
		}
	}
	@-webkit-keyframes slideShow {
		0% {
		opacity: 1;
		-webkit-transform: scale(1);
		}
		5% {
		opacity: 1;
		-webkit-transform: scale(1.1);
		}
		25% {
		opacity: 1;
		-webkit-transform: scale(1.2);
		}
		30% {
		opacity: 1;
		-webkit-transform: scale(1.3);
		}
		100% {
		opacity: 1;
		-webkit-transformm: scale(1.2);
		}
	}
	/* Page Loader */
	.js .loading::before,
	.js .loading::after {
		content: '';
		position: fixed;
		z-index: 1000;
	}

	.js .loading::before {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--color-bg);
	}

	.js .loading::after {
		top: 50%;
		left: 50%;
		width: 60px;
		height: 60px;
		margin: -30px 0 0 -30px;
		border-radius: 50%;
		opacity: 0.4;
		background: var(--color-link);
		animation: loaderAnim 0.7s linear infinite alternate forwards;

	}

	@keyframes loaderAnim {
		to {
			opacity: 1;
			transform: scale3d(0.5,0.5,1);
		}
	}

	a {
		text-decoration: none;
		color: var(--color-link);
		outline: none;
		cursor: pointer;
	}

	a:hover {
		color: var(--color-link-hover);
		outline: none;
	}

	/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
	a:focus {
		/* Provide a fallback style for browsers
		that don't support :focus-visible */
		outline: none;
		background: lightgrey;
	}

	a:focus:not(:focus-visible) {
		/* Remove the focus indicator on mouse-focus for browsers
		that do support :focus-visible */
		background: transparent;
	}

	a:focus-visible {
		/* Draw a very noticeable focus style for
		keyboard-focus on browsers that do support
		:focus-visible */
		outline: 2px solid red;
		background: transparent;
	}

	.unbutton {
		background: none;
		border: 0;
		padding: 0;
		margin: 0;
		font: inherit;
		cursor: pointer;
	}

	.unbutton:focus {
		outline: none;
	}

	.frame {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		color: var(--color-title);
		padding: 2rem;
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto auto auto 1fr;
		grid-template-areas: 'title title' 'prev back' 'demos demos' 'sponsor sponsor' 'nav nav';
		justify-content: start;
		align-content: start;
		align-items: start;
		z-index: 100;
		pointer-events: none;
		grid-gap: 1rem;
	}

	body #cdawrap {
		align-self: start;
		justify-self: start;
	}

	.frame a,
	.frame button {
		pointer-events: auto;
	}

	.frame__title {
		grid-area: title;
		display: flex;
		align-items: flex-end;
		font-weight: 400;
	}

	.frame strong {
		font-weight: 700;
	}

	.frame__title-main {
		font-size: inherit;
		margin: 0;
		font-weight: inherit;
	}

	.frame__back {
		grid-area: back;
	}

	.frame__prev {
		grid-area: prev;
	}

	.frame__demos {
		grid-area: demos;
		display: grid;
		grid-template-columns: repeat(8,auto);
		column-gap: 1rem;
		row-gap: 0.5rem;
	}

	.frame__demos span {
		grid-column: 1 / span 8;
	}

	a.frame__demo {
		font-weight: 400;
		font-size: 1rem;
		text-decoration: none;
		opacity: 0.5;
		font-family: "anonymous-pro", monospace;
	}

	a.frame__demo--current {
		font-weight: 700;
		opacity: 1;
		color: var(--color-link-hover);
	}

	.slides {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: grid;
		grid-template-rows: 100%;
		grid-template-columns: 100%;
		place-items: center;
	}

	.slide {
		width: 100%;
		height: 100%;
		grid-area: 1 / 1 / -1 / -1;
		pointer-events: none;
		opacity: 0;
		overflow: hidden;
		position: relative;
		display: grid;
		place-items: center;
		will-change: transform, opacity;
	}

	.slide--current {
		pointer-events: auto;
		opacity: 1;
	}

	.deco {
		width: 100%;
		height: 100%;
		grid-area: 1 / 1 / -1 / -1;
		pointer-events: none;
		position: relative;
		opacity: 0;
		background: #8c718e;
		will-change: transform, opacity;
	}

	.deco--1 {
		background: #d4503e;
	}

	.deco--2 {
		background: #1c1a1a;
	}

	.deco--3 {
		background: #4e4141;
	}

	.deco--4 {
		background: #000;
	}

	.deco--5 {
		background: #060b17;
	}

	.deco--6 {
		background: #34365c;
	}

	.deco--7 {
		background: #9f6794;
	}

	.slide__img {
		width: 100%;
		height: 100%;
		background-size: 99%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		will-change: transform, opacity, filter;
	}

	#uniqueSlide {
		object-fit: contain;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		will-change: transform, opacity, filter;
	}

	svg {
		object-fit: cover;
		background-position: 100%;
		background-repeat: no-repeat;
		will-change: transform, opacity, filter;
	}

	/* FULL PAGE VIDEO */
	video {
		object-fit: cover;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.demo-2 .slide__img {
		width: 120%;
		height: 120%;
	}

	.slides-nav {
		display: none;

	}

	.slides-nav::before {
		content: 'scroll / drag';
		margin-right: 2rem;
	}

	.slides-nav__item {
		border: 0;
		background: #000;
		color: #fff;
		width: 60px;
		aspect-ratio: 1;
		display: grid;
		place-items: center;
		border-radius: 50%;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.slides-nav__item:hover {
		background-color: #ccc;
	}

	/* Google chrome */
	@-webkit-keyframes svg-text-anim {
		40% {
			stroke-dashoffset: 0;
			fill: transparent;
	}
		60% {
			stroke-dashoffset: 0;
			fill: #f16f6b;
	}
		100% {
			stroke-dashoffset: 0;
			fill: #f16f6b;
	}
	}
	/* Most browsers */
	@keyframes svg-text-anim {
		40% {
			stroke-dashoffset: 0;
			fill: transparent;
	}
		60% {
			stroke-dashoffset: 0;
			fill: #f16f6b;
	}
		100% {
			stroke-dashoffset: 0;
			fill: #f16f6b;
	}
	}

	@media only screen and (min-width: 768px) {
	/* For desktop: */
	.slide__img {
		background-size: contain;
		}
		svg {
		object-fit: contain;
		}
		video {
		object-fit: contain;
		}
	}

	@media screen and (min-width: 53em) {
		.frame { 
			height: 100vh; 
			grid-gap: 2rem;
			align-content: space-between;
			grid-template-columns: auto auto auto 1fr;
			grid-template-rows: auto auto;
			grid-template-areas: 'title back prev demos' 'sponsor ... ... nav ';
		}
		.frame__demos {
			justify-self: end;
			justify-content: end;
		}
		.frame__demos span,
		a.frame__demo {
			text-align: right;
		}
		.slides-nav {
			grid-area: nav;
			display: flex;
			gap: 0.5rem;
			align-self: end;
			align-items: center;
			justify-self: end;
		}
		body #cdawrap {
			align-self: center;
			justify-self: start;
		}
	}