@charset "UTF-8";
/* CSS Document */

/* UNIVERSAL STYLING */
	
	:root {
		--base-color: hsla(184, 100%, 97%, 1.00);
		--light-green: 	hsla(184, 94%, 32%, 1.00);
		--dark-green: hsla(192, 26%, 50%, 1.00);
		--light-blue: hsla(200, 78%, 57%, 1.00);
		--dark-blue: hsla(197, 53%, 55%, 1.00);
		--pink: hsla(328, 97%, 69%, 1.00);
		--fullHeight: 100vh;
		--frameHeight: 2000px;
		--frameWidth: 2000px;
		--scrollHeaderHeight: max(14vw, 10vh);
		--fallDistance: 0;
		--cameraZ: 0; 
		--mouse-x: 0; 
		--mouse-y: 0;
	}

	body {
		box-sizing: border-box;
		margin: 0 auto;
		padding: 0;
		background-color: var(--light-green);
		overflow-y: scroll;
		letter-spacing: 0.025em;
	}

	.dark-blue {color: var(--dark-blue) !important;} .light-blue {color: var(--light-blue) !important;} 
	.pink {color: var(--pink) !important;} .dark-green {color: var(--dark-green) !important;} 
	.light-green {color: var(--light-green) !important;} .base-color {color: var(--base-color) !important;}

	.caption {
		position: fixed;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		font-size: 2vw;
		width: 60vw;
		left: 20vw;
		bottom: 5vw;
		color: hsla(51,59%,68%,1.00);
		text-align: center;
		pointer-events: none;
		z-index: 9999;
	}
	
	.caption span { line-height: 1.4; padding: 3px; background-color: black; }	

	#mute-button-container {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: var(--fullHeight); 
		perspective: 100px;
   		perspective-origin: 50% 30%;
		z-index: 9998;
		pointer-events: none;
	}

	.mute-button {
		position: absolute;
		top: 1.75vw;
		right: 1.75vw;
		width: 3.5vw;
		height: 3.5vw;
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer;
		user-select: none;
		opacity: 0.25;
		will-change: transform;
		transform-style: preserve-3d;
		pointer-events: auto;
	}
		
	.mute-button:hover {opacity: 0.75; transition: all 0.15s ease-in-out;}

	.unmuted {background-image: url(images/unmuted.png);} .muted {background-image: url(images/muted.png);}	

	.mute3d {transform: translateZ(calc(var(--cameraZ) * 0.1px));} 

	.mutedark {opacity: 1; filter: brightness(60%);}

	textarea, input[type=text] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none !important;
		box-shadow: none !important;
	}

	.hide {opacity: 0;} .show {opacity: 1 !important;}

	.hide-overflow {overflow: hidden;}
	
	.fade {animation-name: fade; animation-duration: 3.0s;}

	@keyframes fade {from {opacity: 0} to {opacity: 1}}	

	@media only screen and (max-width: 576px) {
		
		.caption{
			font-size: 4.5vw; 
			width: 90%; 
			left: 5%;
			bottom: 12.5vh;
		}
		
		.mute-button {width: 10vw; height: 10vw; top: 4vw; right: 4vw;}
		
		.desktop {display: none;}
		.medium {display: none;}
		
	}
	
	@media only screen and (min-width: 577px) and (max-width: 899px) {
	
		.caption{
			font-size: 3vw;
			width: 90%;
			left: 5vw;
			bottom: 10vh;
		}
		
		.mute-button {top: 2.75vw; right: 2.75vw; width: 5.25vw; height: 5.25vw;}
		.mobile {display: none;}	
		
	}
	
	@media only screen and (min-width: 900px) {
		
		.mobile {display: none;}
		.medium {display: none;}
	}

/* HEADERS*/		
	
	.header {
		position: relative;
		background-color: var(--light-green);
		width: 100%;
		height: var(--fullHeight); 
		will-change: transform;
		z-index: 7;
	}
	
	.header-text, #header-text {
		position: absolute;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: center;
		font-weight: 600;
		font-size: 7vw;
		color: hsla(185,100%,97%,1.00);
		width: 80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
		
	#header-text {opacity: 0; will-change: opacity;}

	.header-fade {animation: fade 1s ease-in forwards;}

	#repeat-visitor-text {
		position: absolute;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: center;
		font-weight: 400;
		font-size: 2.25vw;
		color: hsla(185,100%,97%,1.00);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: none;
	}
	
	#repeat-visitor-text-answer {cursor: pointer; width: 70%; margin: 5vw 0 0 15%; user-select: none;}
	#repeat-visitor-text-answer:hover {filter: brightness(130%); transition: all 0.15s ease-in-out;}
	
	#loading-text {
		position: absolute;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: center;
		font-weight: 400;
		font-size: 2.25vw;
		color: hsla(185,100%,97%,1.00);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		animation: load 6s;
	}
	
	@keyframes load {0% {opacity: 0} 50% {opacity:0} 100% {opacity:1} }

	.l1 {opacity: 0%; animation: ellipsisFade 2.75s; animation-delay: 0; animation-iteration-count: infinite;}
	.l2 {opacity: 0%; animation: ellipsisFade 2.75s; animation-delay: 0.4s; animation-iteration-count: infinite;}
	.l3 {opacity: 0%; animation: ellipsisFade 2.75s; animation-delay: 0.8s; animation-iteration-count: infinite;}
		
	@keyframes ellipsisFade {0% { opacity: 0;} 10% {opacity: 0;} 25% {opacity: 1;} 82.5% {opacity: 1;} 100% { opacity: 0; } }
	@keyframes ellipsisFade {0% { opacity: 0;} 10% {opacity: 0;} 25% {opacity: 1;} 65% {opacity: 1;} 80% { opacity: 0; } 100% { opacity: 0; } }
	
	.header-transition {transition: all .6s ease-in-out;}
	
	.small-header {height: 15vw !important; }

	.scroll-header {
		position: fixed;
		top: 0;
		left: 0;
		box-shadow: 0 0.2vw 0.2vw hsla(0, 0%, 0%, 0.25);
		background-color: var(--light-green);
		width: 100%;
		height: 6vw;
		z-index: 6;
	}
	
	#scroll-header {display: none;} #scroll-header-alt {display: none;}
	
	.logo {
		position: absolute;
		top: 1.5vw;
		left: 1.5vw;
		width: 3vw;
		height: 3vw;
		background-image: url(images/logo.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	.scroll-header-text {
		position: absolute;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: left;
		font-weight: 500;
		font-size: 1.8vw;
		color: hsla(185,100%,97%,1.00);
		top: 1.85vw;
		left: 5.5vw;
		cursor: default;
		user-select: none;
	}
	
	.scroll-header-image {
		position: absolute;
		top: 1vw;
		right: 1vw;
		width: 16vw;
		height: 4vw;
		background-image: url(images/test_button_white_blank.png);
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer;
		user-select: none;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: left;
		font-weight: 400;
		font-size: 1.45vw;
		color: hsla(192,26%,50%,1.00);
	}
	
	.scroll-header-image:hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50);}
	
	.about-us {
		position: absolute;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: left;
		font-weight: 400;
		font-size: 1.45vw;
		color: hsla(185,100%,97%,1.00);
		top: 2vw;
		right: 20vw;
		cursor: pointer;
	}

	.about-us:hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); border-bottom: .175vw solid hsla(185,100%,97%,1.00);}
		
	.log-in {
		position: absolute;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: left;
		font-weight: 400;
		font-size: 1.45vw;
		color: hsla(185,100%,97%,1.00);
		top: 2vw;
		right: 30vw;
		cursor: pointer;
	}

	.log-in:hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); border-bottom: .175vw solid hsla(185,100%,97%,1.00);}

	.home-link {cursor: pointer;}

/* MODAL MENU */
	
	.modal-container {
		display: none; 
		position: fixed; 
		top: 20vw; 
		width: 100%; 
		height: calc(100vh - 20vw); 
		background-color: hsla(0,0%,0%,0.2);
		z-index: 8;
	}
	
	.modal-exit {
		position: absolute;
		top: 0; 
		left: 0;
		width: 100%;
		height: calc(100vh - 14vw);
		z-index: 4;
	}
	
	.modal-menu {
		display: flex;
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		height: 1vw;
		border-bottom-left-radius: 8vw;
		background-color: var(--base-color);
		will-change: transform;
		transition: all 0.5s ease-in-out; 
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		z-index: 5;	
	}

	.modal-menu-extend {height: 68vw !important;} 

	.modal-item {
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: center;
		font-weight: 400;
		font-size: 4.25vw;
		color: hsla(192,26%,50%,1.00);
		width: 35vw;
		height: 9vw;
		margin-top: 3vw;
		cursor: pointer;
		user-select: none;
	}
	
	.modal-item:hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); transition: all 0.15s ease-in-out;}
	
	.modal-take-test {
		position: absolute; 
		bottom: 2.5vw;
		left: 2.5vw;
		width: 45vw;
		height: 16vw;
		background-image: url(images/test_button_mobile_blank.png);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer;
		user-select: none;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: center;
		font-weight: 400;
		font-size: 4.25vw;
		color: var(--base-color);
	}

	.modal-take-test:hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); transition: all 0.15s ease-in-out;}
	
	#m1 {display: none;} #m2 {display: none;} #m3 {display: none;} #m4 {display: none;} #m5 {display: none;}

	#log-in-modal-container {
		display: none; 
		position: fixed;
		top: 0;
		left: 0;
		width: 100%; 
		height: 100vh; 
		background-color: hsla(0,0%,0%,0.2);
		z-index: 9;
	}
	
	#log-in-p {margin: 3vw 4vw 3vw 3vw;}

	#log-in-input {
		position: absolute;
		left: 3vw;
		bottom: 4vw;
		width: 70%;
		border: none;
		border-radius: 0.33vw;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		font-weight: 400;
		font-size: 1.6vw;
		line-height: 2.2vw;
		padding: .25vw;
		color: hsla(185,100%,97%,1.00);
		background-color: hsla(0,0%,0%,0.1);
	}
	
	#log-in-button {width: 3.75vw; position: absolute; left: calc(70% + 4vw); bottom: 4vw;} #log-in-input:focus {outline: none;}

	#log-in-modal-exit {height: 100vh;}

	#log-in-x:hover {filter: brightness(120%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); transition: all 0.15s ease-in-out; }
	
	.shake {animation-name: shake; animation-duration: 0.25s;}

	@keyframes shake {
		
		0% {
			transform: translate(0,0);
		}
		33% {
			transform: translate(2.5%,0);
		}
		66% {
			transform: translate(-2.5%,0);
		}
		0% {
			transform: translate(0,0);
		}
	}


/* SUBHEADER CONTENT */	
	
	.subheader-container {display: none; background-color: var(--base-color); z-index: 1;}
	
	.subheader {position: relative; width: 100%; box-sizing: border-box;}
	
	.subheader-container h1 {
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: left;
		font-weight: 500;
		font-size: 2vw;
		line-height: 3vw;
		color: hsla(192,26%,50%,1.00);
		margin: 0 0 2vw 0;
		padding: 0;
	}
	
	.subheader-container h2,
	.viewport h2,
	.subheader-container p, 
	.subheader-container ul {
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: left;
		font-weight: 400;
		font-size: 1.8vw;
		line-height: 2.8vw;
		color: hsla(192,26%,50%,1.00);
		margin: 0 0 1.8vw 0;
		padding: 0;
		list-style-position: inside;
	}
	
	.subheader-container p, .subheader-container ul li:nth-child(-n+2) { margin: 0 0 0 0; }

	.take-test-text {color: hsla(200,78%,57%,1.00); cursor: pointer; user-select: none;}
	.take-test-text:hover {filter: brightness(120%);}
	
	#sub-1 {height: 37.5vw;} 
	#sub-1-text {display: flex; position: absolute; left: 17.5%; top: 0; width: 55%; height: 35vw; flex-direction: column; justify-content: center;}
	
	.bird {
		position: absolute; 
		right: 0; 
		top: 0; 
		width: 25%; 
		height: 35vw; 
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat;
	}
	
	#bird-intro {background-image: url(images/bird_intro.gif); z-index: 1;} 
	#bird {background-image: url(images/bird.gif); z-index: 2; display: none;}
	#bird-thumbsup {background-image: url(images/bird_thumbs_up.gif); z-index: 3; display: none;}	
	
	.quote-container {position: relative; width: 100%; height: 40vw;}
	
	.quotation-mark {
		position: absolute;
		top: 0;
		left: 14%;
		width: 10%;
		height: 8vw;
		z-index: 2;
		background-image: url(images/quote.png);
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat;
	}
	
	.quote {
		display: flex; 
		position: absolute; 
		width: 60%; 
		height: 30vw; 
		left: 20%;
		top: 5vw;
		border-radius: 1.5vw;
		flex-direction: column; 
		justify-content: center; 
		align-items: center; 
		background-color: var(--dark-blue); 
	}
	
	.quote-text {width: 80%; margin-top: 2vw !important; color: var(--base-color) !important;}
	
	.quote-container img {
		position: absolute;
		width: 12.5vw;
		height: 12.5vw;
		bottom: 1vw;
		left: 70%;
		z-index: 2;
	}

	#sub-2 {height: 30vw; margin-top: 10vw;} 
	#sub-2-text {display: flex; position: absolute; left: 25%; top: 0; height: 30vw; width: 60%; flex-direction: column; justify-content: center;}
		
	.flower {
		position: absolute; 
		left: 0; 
		top: 0; 
		width: 25%; 
		height: 30vw; 
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat;
	}
	
	#flower-intro {background-image: url(images/flower_intro.png);}
	#flower {background-image: url(images/flower.gif); display: none;}
	#flower-end {background-image: url(images/flower_end.png); display: none;}
	
	.graph {
		position: absolute; 
		left: 75%; 
		top: 0; 
		width: 25%; 
		height: 30vw; 
		background-image: url(images/graph.gif); 
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat;
	}

	#sub-3 {height: 30vw;}
	#sub-3-text {display: flex; position: absolute; left: 15%; top: 0; height: 30vw; width: 60%; flex-direction: column; justify-content: center;}
	
	#sub-4 {height: 30vw; margin-bottom: 10vw;}
	#sub-4-text {display: flex; position: absolute; left: 25%; top: 0; height: 30vw; width: 60%; flex-direction: column; justify-content: center;}
	
	.beakers {
		position: absolute; 
		left: 0; 
		top: 0; 
		width: 25%; 
		height: 30vw; 
		background-image: url(images/beakers.gif); 
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat;
	}
	
	#sub-5 {height: 52.5vw; margin-bottom: 7.5vw;}
	#sub-5-text {display: flex; position: absolute; left: 18.75%; top: 10vw; width: 62.5%; height: 42.5vw; flex-direction: column; justify-content: center;}


	#butterfly { 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 42.5vw; 
		background-image: url(images/butterfly.gif); 
		background-size: cover;
		background-position: top;
		background-repeat: no-repeat;
		pointer-events: none;
		z-index: 2;
	}
	
	.take-test-button {
		width: 25vw;
		height: 6.667vw;
		margin-top: 7.5vw;
		align-self: center;
		background-image: url("images/test_button_blank.png");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer;
		user-select: none;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		font-weight: 500;
		font-size: 2vw;
		line-height: 3vw;
		color: var(--base-color);
	}
	
	.ttb {display: flex; flex-direction: row; align-items: center; justify-content: center;}
	
	.ttb1 {width: 1vw; margin-left: 1.25vw;} .ttb2 {width: .75vw; margin: 0 1.25vw 0 .75vw;}

	.take-test-button:hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); transition: all 0.15s ease-in-out;}
	
	.line { position: relative; width: 50%; height: 0.5vw; margin: 10vw 25vw; background-color: hsla(192,26%,50%,1.00); }

	.linedark{filter: brightness(70%);}
	
/* FOOTER LINKS */
	
	.footer {
		position: relative;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: center;
		font-weight: 400;
		font-size: 1.45vw;
		color: hsla(185,100%,97%,1.00);
		height: 20vw; 
		width: 100%;
		background-color: var(--light-green);		
	}
	
	#footer-copyright-line {
		color: hsla(185,100%,97%,0.50);
		position: absolute; 
		left: 0;
		top: 4vw;
		width: 100%;
}

	#footer-link-line {
		display: flex; 
		position: absolute; 
		left: 30%; 
		top: 9vw;
		width: 40%; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center;
		user-select: none;
	}

	#footer-icon-line {
		display: flex; 
		position: absolute; 
		left: 47%; 
		top: 14.5vw;
		width: 6%; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center;
		user-select: none;
	}
	
	.footer-icon {
		width: 2vw; 
		height: 2vw; 
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat;
		cursor: pointer;
	}

	.footer-icon:hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50);}	

	 #facebook-icon{background-image: url(images/facebook-icon.png);} #instagram-icon{background-image: url(images/instagram-icon.png);}
	
	.footer span {cursor: pointer; border-bottom: .175vw solid hsla(185,100%,97%, 0);} 
	
	.footer span:hover {
		filter: brightness(150%); 
		drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); 
		border-bottom: .175vw solid hsla(185,100%,97%,1.00);
	}
	
	#about-us-page {display: none; margin-top: 6vw; padding: 5vw 20vw; min-height: calc(var(--fullHeight) - 20vw);}
	#privacy-page {display: none; margin-top: 6vw; padding: 5vw 20vw; min-height: calc(var(--fullHeight) - 20vw);}
	#contact-page {display: none; margin-top: 6vw; padding: 5vw 25vw; min-height: calc(var(--fullHeight) - 20vw);}
	
	#about-us-page h1 { font-size: 1.6vw; line-height: 2.6vw;}
	#about-us-page h2, #about-us-page p, #about-us-page ul {font-size: 1.45vw; line-height: 2.45vw;}
	#privacy-page h1 { font-size: 1.6vw; line-height: 2.6vw;}
	#privacy-page h2, #privacy-page p, #privacy-page ul {font-size: 1.45vw; line-height: 2.45vw;}
	#contact-page h1 { font-size: 1.6vw; line-height: 2.6vw;}
	#contact-page h2, #contact-page p, #contact-page ul {font-size: 1.45vw; line-height: 2.45vw;}

	.contact-input:focus {outline: none;}
	
	.contact-input {
		width: 96%;
		border: .25vw solid hsla(192,26%,50%,0.4);
		border-radius: .25vw;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		font-weight: 500;
		font-size: 1.45vw;
		color: hsla(200,78%,57%,1.00);
		padding: .75vw;
		margin-bottom: 2vw;
	}

	.contact-message:focus {outline: none;}

	.contact-message {
		width: 96%;
		height: 17.5vw;
		min-height: 3vw;
		border: .25vw solid hsla(192,26%,50%,0.4);
		border-radius: .25vw;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		font-weight: 500;
		font-size: 1.45vw;
		color: hsla(200,78%,57%,1.00);
		resize: vertical;
		overflow: auto;
		padding: .75vw;
		margin-bottom: 2vw;
	}

	#contact-submit {
		display: flex; 
		flex-direction: row; 
		align-items: center; 
		justify-content: center;
		width: 15vw;
		height: 4.75vw;
		margin-left: 17.5vw;
		background-image: url("images/contact-submit.png");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer; 
		user-select: none;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		font-weight: 500;
		font-size: 1.6vw;
		color: var(--base-color);
	}

	#contact-submit:hover {filter: brightness(110%); drop-shadow: 0 0 1.5vw hsla(192,26%,50%,0.88); transition: all 0.15s ease-in-out;}
	
	@media only screen and (max-width: 576px) {
	
		.header-text, #header-text {font-size: 8.5vw; width: 100%;}
	
		#repeat-visitor-text {	
			font-size: 4.5vw;
			width: 80%;
			left: 10%;	
			top: 50%;
			transform: translateY(-50%);
		}
		
		#loading-text {	
			font-size: 6.5vw;
			width: 80%;
			left: 10%;	
			top: 50%;
			transform: translateY(-50%);
		}
		
		.small-header {height: 30vw !important;}

		.scroll-header {height: 20vw; z-index: 8;}
		
		.logo {
			top: 5vw;
			left: 4vw;
			width: 10vw;
			height: 10vw;
		}

		.scroll-header-text {
			font-weight: 500;
			font-size: 5.25vw;
			top: 6.625vw;
			left: 17vw;
		}
	
		.scroll-header-image {
			top: 5.25vw;
			right: 4vw;
			width: 9.5vw;
			height: 9.5vw;
			background-image: url(images/mobile_menu.png);
		}
		
		.about-us {display: none;}	
		.log-in {display: none;}
		
		#log-in-p {margin: 7.5vw 6.5vw 3.2vw;}
		
		#log-in-input {
			left: 6.5vw;
			bottom: 6vw;
			width: 65%;
			font-size: 3.5vw;
			line-height: 4.5vw;
			padding: 1vw;
		}
	
		#log-in-button {width: 9vw; left: 78%; bottom: 6.25vw;}
		
		.subheader-container h1 {
			font-size: 4.25vw;
			line-height: 5.25vw;
			padding: 5vw 5vw 1vw;
			margin: 0 0 4.25vw 0;
		}

		.subheader-container h2, 
		.viewport h2,
		.subheader-container p, 
		.subheader-container ul {
			font-size: 4vw;
			line-height: 5vw;
			padding: 0 5vw 0vw;
			margin: 0 0 4vw 0;
		}
		
		.subheader-container p, .subheader-container ul li:nth-child(-n+2) { margin: 0 0 0 0; }
		
		#sub-1 {height: 140vw;}
		#sub-1-text {left: 5%; top: 0; width: 90%; height: 60vw; margin-top: 10vw; }
		
		.bird {right: 0; top: 80vw; width: 80%; height: 50vw;}	
		#bird-intro {background-image: url(images/bird_intro_small.gif);} 
		#bird {background-image: url(images/bird_small.gif);}
		#bird-thumbsup {background-image: url(images/bird_thumbs_up_small.gif);}
		
		.quote-container {height: 120vw; margin: 20vw 0 0 0;}
		.quotation-mark {top: 0; left: 20%; width: 30%; height: 23vw;}
		.quote {top: 18vw; left: 10vw; height: 80vw; width: 80%; border-radius: 2.5vw;}
		.quote-text {width: 86;} 
		.quote-container img {
			position: absolute;
			width: 30vw;
			height: 30vw;
			bottom: 5vw;
			left: 50%;
			transform: translateX(-50%);
			z-index: 2;
		}
		
		#sub-2 {height: 130vw;} 
		#sub-2-text {left: 5%; top: 0; height: 60vw; width: 90%;}

		.flower {left: 20%; top: 62.5vw; width: 60%; height: 60vw;}
		#flower-intro {background-image: url(images/flower_mobile.png);}
		#flower {background-image: url(images/flower_mobile.png);}
		#flower-end {background-image: url(images/flower_mobile.png);}
		
		.graph {left: 20%; top: 72.5vw; width: 60%; height: 60vw; background-image: url(images/graph_mobile.gif);}
		#sub-3 {height: 137.5vw;} 
		#sub-3-text {position: absolute; left: 5%; top: 0; height: 80vw; width: 90%;}

		.beakers {left: 20%; top: 60vw; width: 60%; height: 60vw; background-image: url(images/beakers_mobile.gif);}
		#sub-4 {height: 130vw;} 
		#sub-4-text {position: absolute; left: 5%; top: 0; height: 60vw; width: 90%;}

		#sub-5 {height: 100vw; margin: 15vw 0; overflow-x: hidden;} 
		#sub-5-text {position: absolute; left: 5%; top: 0; height: 90vw; width: 90%;} 
	
		#butterfly { 
			left: -45.23%; 
			width: 190.46%; 
			height: 80.95vw; 
			background-image: url(images/butterfly_small.gif); 
		}
		
		.take-test-button {
			width: 50vw;
			height: 18vw;
			margin-top: 15vw;
			align-self: center;
			cursor: pointer;
			background-image: url(images/test_button_mobile_blank.png);
			font-size: 4.25vw;
			line-height: 5.25vw;
		}
		
		.ttb1 {width: 2.5vw; margin-left: 2.75vw;} .ttb2 {display: none;}
		
		.line { position: relative; width: 50%; height: 0.5vw; margin: 20vw 25vw; background-color: hsla(192,26%,50%,1.00); }
		
		.footer {font-size: 4.25vw; height: 67.5vw; width: 100%;}
	
		#footer-copyright-line {left: 0; top: 8vw; width: 100%;}
		
		#footer-link-line {
			left: 25%; 
			top: 18vw;
			width: 50%; 
			height: 27.5vw;
			flex-direction: column; 
		}

		#footer-icon-line {left: 41.25%; top: 52.25vw; width: 17.5%; }

		.footer-icon {width: 5vw; height: 5vw; }

		#about-us-page {display: none; margin-top: 20vw; padding: 5vw 5vw; min-height: calc(var(--fullHeight) - 40vw);}
		#privacy-page {display: none; margin-top: 20vw; padding: 5vw 5vw; min-height: calc(var(--fullHeight) - 40vw);}
		#contact-page {display: none; margin-top: 20vw; padding: 5vw 5vw; min-height: calc(var(--fullHeight) - 40vw);}
		
		#about-us-page h1 {font-size: 3.75vw; line-height: 4vw;}
		#about-us-page h2, #about-us-page p, #about-us-page ul {font-size: 3.5vw; line-height: 4.5vw;}
		#privacy-page h1 {font-size: 3.75vw; line-height: 4vw;}
		#privacy-page h2, #privacy-page p, #privacy-page ul {font-size: 3.5vw; line-height: 4.5vw;}
		#contact-page h1 {font-size: 3.75vw; line-height: 4vw;}
		#contact-page h2, #contact-page p, #contact-page ul {font-size: 3.5vw; line-height: 4.5vw;}
		
		.contact-input {
			width: 85%;
			border: .75vw solid hsla(192,26%,50%,0.4);
			border-radius: .75vw;
			font-size: 3.5vw;
			padding: 2vw;
			margin: 0 5vw 5vw;
		}

		.contact-message {
			width: 85%;
			height: 30vw;
			border: .75vw solid hsla(192,26%,50%,0.4);
			border-radius: .75vw;
			font-size: 3.5vw;
			padding: 2vw;
			margin: 0 5vw 5vw;
		}

		#contact-submit {
			width: 35vw;
			margin: 0 0 10vw 27.5vw;
			height: 11.08vw;
			font-weight: 500;
			font-size: 3.75vw;
		}

	}
	
	@media only screen and (min-width: 577px) and (max-width: 899px) {
		
		.header-text, #header-text {
			font-size: 7.5vw;
			width: 80%;
		}

		#repeat-visitor-text {
			font-size: 3vw;
			width: 60%;
			left: 20%;
			top: 50%;
			transform: translateY(-50%);
		}

		#repeat-visitor-text-answer {cursor: pointer; width: 70%; margin: 5vw 0 0 15%; user-select: none;}
		#repeat-visitor-text-answer:hover {filter: brightness(130%); transition: all 0.15s ease-in-out;}

		#loading-text {
			font-size: 3vw;
		}

		.small-header {height: 20vw !important; }

		.scroll-header {
			height: 10vw;
		}

		.logo {
			top: 2vw;
			left: 2vw;
			width: 6vw;
			height: 6vw;
		}

		.scroll-header-text {
			font-size: 2.5vw;
			top: 3.25vw;
			left: 10vw;
		}

		.scroll-header-image {
			top: 1.5vw;
			right: 0;
			width: 28vw;
			height: 7vw;
			font-weight: 500;
			font-size: 2vw;
		}

		.scroll-header-image:hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50);}

		.about-us {display: none;}	
		
		.log-in {
			font-size: 2vw;
			top: 3.75vw;
			right: 31vw;
		}

		.about-us:hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); border-bottom: .175vw solid hsla(185,100%,97%,1.00);}
		
		.subheader-container h1 {
			font-size: 2.25vw;
			line-height: 3.25vw;
			margin: 0 0 3.25vw 0;
		}

		.subheader-container h2, 
		.viewport h2,
		.subheader-container p, 
		.subheader-container ul {
			font-size: 2vw;
			line-height: 3vw;
			margin: 0 0 2.5vw 0;
		}
		
		.subheader-container p, .subheader-container ul li:nth-child(-n+2) { margin: 0 0 0 0; }
		
		#sub-1 {height: 40vw;} 
		#sub-1-text {display: flex; position: absolute; left: 7.5%; width: 60%; height: 35vw; flex-direction: column; justify-content: center;}

		.bird {
			width: 30%; 
			height: 35vw; 
		}

		.quote-container {position: relative; width: 100%; height: 45vw;}

		.quotation-mark {
			left: 10.5%;
			width: 12%;
			height: 9.6vw;
		}

		.quote {
			width: 65%; 
			height: 35vw; 
			left: 17.5%;
			top: 5vw;
			border-radius: 1.5vw;
		}

		.quote-text {width: 80%; margin-top: 2vw !important; color: var(--base-color) !important;}

		.quote-container img {
			width: 14vw;
			height: 14vw;
			bottom: 1vw;
			left: 72.5%;
		}

		#sub-2 {height: 30vw; margin-top: 10vw;} 
		#sub-2-text {display: flex; position: absolute; left: 27.5%; top: 0; height: 30vw; width: 65%; flex-direction: column; justify-content: center;}

		.flower {
			width: 25%; 
			height: 30vw; 
		}

		.graph {
			left: 75%; 
			width: 25%; 
			height: 30vw; 
		}

		#sub-3 {height: 30vw;}
		#sub-3-text {display: flex; position: absolute; left: 7.5%; top: 0; height: 30vw; width: 65%; flex-direction: column; justify-content: center;}

		#sub-4 {height: 30vw; margin-bottom: 10vw;}
		#sub-4-text {display: flex; position: absolute; left: 25%; top: 0; height: 30vw; width: 70%; flex-direction: column; justify-content: center;}

		.beakers {
			width: 25%; 
			height: 30vw; 
		}

		#sub-5 {height: 55vw; margin-bottom: 7.5vw;}
		#sub-5-text {display: flex; position: absolute; left: 15%; top: 10vw; width: 70%; height: 42.5vw; flex-direction: column; justify-content: center;}

		#butterfly { 
			width: 100%; 
			height: 42.5vw; 
		}

		.take-test-button {
			width: 32vw;
			height: 8vw;
			margin-top: 5.5vw;
			font-size: 2.25vw;
			line-height: 3vw;
		}

		.ttb1 {width: 1.25vw; margin-left: 1.5vw;} .ttb2 {width: 1.25vw; margin: 0 1.25vw 0 1.25vw;}

		.take-test-button:hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); transition: all 0.15s ease-in-out;}

		.line { position: relative; width: 50%; height: 0.5vw; margin: 10vw 25vw; background-color: hsla(192,26%,50%,1.00); }

		.footer {
			font-size: 2vw;
			height: 25vw; 		
		}

		#footer-copyright-line {
			top: 5vw;
			width: 100%;
	}

		#footer-link-line { 
			left: 25%; 
			top: 11vw;
			width: 50%; 
		}

		#footer-icon-line {
			left: 46%; 
			top: 17.25vw;
			width: 8%; 
		}

		.footer-icon {
			width: 2.5vw; 
			height: 2.5vw; 
		}

		.footer-icon:hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50);}	
		
		.footer span {cursor: pointer; border-bottom: .175vw solid hsla(185,100%,97%, 0);} 

		.footer span:hover {
			filter: brightness(150%); 
			drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); 
			border-bottom: .175vw solid hsla(185,100%,97%,1.00);
		}

		#about-us-page {display: none; margin-top: 6vw; padding: 10vw 15vw; min-height: calc(var(--fullHeight) - 20vw);}
		#privacy-page {display: none; margin-top: 6vw; padding: 10vw 15vw; min-height: calc(var(--fullHeight) - 20vw);}
		#contact-page {display: none; margin-top: 6vw; padding: 10vw 15vw; min-height: calc(var(--fullHeight) - 20vw);}

		#about-us-page h1 { font-size: 2.25vw; line-height: 3.25vw;}
		#about-us-page h2, #about-us-page p, #about-us-page ul {font-size: 2vw; line-height: 3vw;}
		#privacy-page h1 { font-size: 2.25vw; line-height: 3.25vw;}
		#privacy-page h2, #privacy-page p, #privacy-page ul {font-size: 2vw; line-height: 3vw;}
		#contact-page h1 { font-size: 2.25vw; line-height: 3.25vw;}
		#contact-page h2, #contact-page p, #contact-page ul {font-size: 2vw; line-height: 3vw;}

		.contact-input {
			width: 96%;
			border: .35vw solid hsla(192,26%,50%,0.4);
			border-radius: .75vw;
			font-size: 2vw;
			padding: 1vw;
		}

		.contact-message {
			width: 96%;
			height: 20vw;
			border: .35vw solid hsla(192,26%,50%,0.4);
			border-radius: .75vw;
			font-size: 2vw;
			padding: 1vw;
		}
		
		#contact-submit {
			width: 20vw;
			height: 6.333vw;
			font-weight: 500;
			font-size: 2.25vw;
			margin-left: 35.7%;
		}
		
		#contact-submit:hover {filter: brightness(110%); drop-shadow: 0 0 1.5vw hsla(192,26%,50%,0.88); transition: all 0.15s ease-in-out;}

		#log-in-p {margin: 4.25vw 7vw 2.25vw 4vw;}
		
		#log-in-input {
			left: 4vw;
			bottom: 5.75vw;
			width: 67.75%;
			font-size: 2vw;
			line-height: 2.5vw;
			padding: 0.5vw;
		}
	
		#log-in-button {width: 5.25vw; left: 80%; bottom: 5.75vw;}
	}
	
	@media only screen and (min-width: 900px) {}
	
/* QUIZ STYLING */
	
	#suspend-video, #sound-video, #webm-video {
		position: fixed;
  		width: 25px;
  		height: 25px;
  		top: 0;
  		left: 0;
		opacity: 0.001;
		pointer-events: none;
	}
	
	.suspend-video-check {position: fixed !important; top: 0; left: 0; z-index: 2 !important;} 
	
	.quiz-input:focus {outline: none;}
	
	.quiz-input {
		width: 70%;
		border: none;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		font-weight: 500;
		font-size: 2.5vw;
		color: hsla(200,78%,57%,1.00);
		border-bottom: .3vw solid hsla(192,26%,50%,0.4);
		background-color: hsla(185,100%,97%,1.00);
	}
	
	.quiz-container { 
		display: flex;
		position: relative; 
		background-color: var(--base-color);
		width: 100%;
		height: var(--fullHeight);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 1;
	}
	
	.quiz-question, .quiz-question p {
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: center;
		font-weight: 400;
		color: hsla(192,26%,50%,1.00);
		font-size: 2.25vw;
	}

	.quiz-question {width: 50%;}
	.quiz-question p {margin: 0 0 5vw 0;}

	.quiz-answer {display: flex; width: 100%; flex-direction: row; justify-content: space-around; margin: 0 0 2.25vw 0; user-select: none;}

	.highlight {font-size: 2.5vw; color: hsla(200,78%,57%,1.00); cursor: pointer;}
	.highlight:hover {color: hsla(190,100%,66%,1.00); text-shadow: 0 0 0.5vw hsla(190,100%,66%,0.30); transition: 0.15s ease-in-out;}
	.highlight-button {width: 10%; cursor: pointer; user-select: none;}		
	.highlight-button:hover {opacity: 0.8; drop-shadow: 0 0 1.5vw hsla(192,26%,50%,0.88); transition: 0.15s ease-in-out;}
	
	.quiz-agreement {display: flex; width: 100%; flex-direction: row; justify-content: center; align-items: center; font-size: 1.5vw;}
	
	.quiz-agreement span {pointer-events: none;}
	
	.circle {margin: 0 1.5vw; cursor: pointer; transition: color 0.2s ease-in-out; width: 4vw; height: 4vw; border-radius: 50%;}

	.disagree-str {border: 0.3vw solid var(--pink);} .disagree-str:hover {background-color: var(--pink);}
	.disagree { border: 0.3vw solid var(--pink); opacity: 0.7;} .disagree:hover {	background-color: var(--pink);}
	.neutral { border: 0.3vw solid hsla(210,5%,61%,0.50);} .neutral:hover {background-color: hsla(210,5%,61%,0.50);}
	.agree{ border: 0.3vw solid var(--light-blue); opacity: 0.7;} .agree:hover {background-color: var(--light-blue);}
	.agree-str { border: 0.3vw solid var(--light-blue);} .agree-str:hover {background-color: var(--light-blue);}

	.mobile-agreement {display: none;}
	
	.desktop-agreement {
		display: flex; 
		margin: 3vw 0 0 5%; 
		width: 90%; 
		flex-direction: row; 
		justify-content: center; 
		font-size: 1.5vw;
		opacity: 0;
	}
	
	.quiz-video-container {line-height: 0;}
	
	.quiz-video {
		width: 70vmin; 
		width: min(70vmin,50vw);
		height: 70vmin; 
		height: min(70vmin,50vw);
		object-fit: cover; 
		background-color: var(--base-color);
	}

	.sponsored {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		font-weight: 400;
		color: hsla(192,26%,50%,1.00);
		font-size: 1.25vw;
		margin: 0 0 2vw 0;
	}

	.sponsored img {width: 10vw;}

	.sponsored-video {width: 100%; object-fit: cover; }

	#caption-ad {width: 10vw; height: 3vw; background-color: black;}

	#bird-container {position: fixed; top: 0; left: 0; background-color: transparent; z-index: 2; pointer-events: none;} 

	#happy-bird-vid {
		width: 70vmin; 
		width: min(70vmin,50vw);
		height: 70vmin; 
		height: min(70vmin,50vw);
		object-fit: cover; 
	}

	#happy-bird-alt {display: none;}

	#happy-bird-gif {
		width: 70vmin; 
		width: min(70vmin,50vw);
		height: 70vmin; 
		height: min(70vmin,50vw);
		background-image: url("images/bird_pop-up_happy.gif");
		background-size: cover; 
		background-position: center; 
		background-repeat: no-repeat;
	}

	#load-p {margin:0 0 2.5vw 0;}

	#progress-bar-container {position: relative; width: 100%; height: 2vw; margin: 0 0 2.5vw 0;}

	#progress-bar {
		position: absolute; 
		top: .25vw; 
		left: 12.75%;
		width: 100%; 
		height: 1.75vw;
		background-color: var(--dark-green);
		transform-origin: left;
		transform: scaleX(.01);
	} 

	.progressBar1 {animation: progressBar1 15s ease-in forwards;}

	@keyframes progressBar1 {
		0% {transform: scaleX(.01);} 
		30% {transform: scaleX(.15);} 
		45% {transform: scaleX(.25);} 
		65% {transform: scaleX(.45);} 
		80% {transform: scaleX(.60);} 
		100% {transform: scaleX(.70);}
	}

	.progressBar2 {animation: progressBar2 30s ease-in forwards;}

	@keyframes progressBar2 {
		0% {transform: scaleX(.01);} 
		10% {transform: scaleX(.10);} 
		20% {transform: scaleX(.15);} 
		40% {transform: scaleX(.20);} 
		50% {transform: scaleX(.23);} 
		60% {transform: scaleX(.30);} 
		80% {transform: scaleX(.35);} 
		100% {transform: scaleX(.5);}
	}

	#progress-bar-border {
		position: absolute; 
		top: 0; 
		left: 12.5%;
		width: 74.75%; 
		height: 1.6vw;
		border-radius: 0.66vw;
		border: 0.33vw solid var(--dark-green);
	}

	#construction-container {position: relative; width: 100%; height: 20vw;}

	.construction {
		position: absolute;
		top: 0;
		left: 10%;
		width: 80%;
		height: 20vw;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	#construction-base {background-image: url("images/bird_construction.jpg"); z-index: 1;}
	#construction-blink {background-image: url("images/bird_construction_blink.gif"); z-index: 2; display: none;}

	@media only screen and (max-width: 576px) {
		
		.quiz-input {font-size: 4.5vw; border-bottom: .7vw solid hsla(192,26%,50%,0.4);}

		.quiz-question, .quiz-question p {font-size: 4.5vw;}
		.quiz-question {width: 80%;}
		.quiz-question p {margin: 0 0 9vw 0; }
		
		.quiz-answer {margin: 0 0 4.5vw 0;}
		
		.highlight {font-size: 5.5vw;}
		.highlight-button {width: 40%; margin: 4.5vw 0 0 0;}
		
		.quiz-agreement {width: 100%; font-size: 4vw;}
		
		.quiz-agreement span {display: none;}
		
		.circle {margin: 0 2.25vw; width: 10vw; height: 10vw;}
		
		.disagree-str { width: 12vw; height: 12vw; border: 0.6vw solid var(--pink);} 
	
		.disagree { width: 10vw; height: 10vw; border: 0.6vw solid var(--pink);}

		.neutral { width: 8vw; height: 8vw; border: 0.6vw solid hsla(210,5%,61%,0.50);}
	
		.agree { width: 10vw; height: 10vw; border: 0.6vw solid var(--light-blue);}
	
		.agree-str { width: 12vw; height: 12vw; border: 0.6vw solid var(--light-blue);}
	
		.mobile-agreement {display: flex; margin: 3.5vw 0 0 0; width: 100%; flex-direction: row; justify-content: space-between; font-size: 4vw;}
		
		.desktop-agreement {display: none;}
		
		.quiz-video {
			width: 70vmin; 
			width: min(70vmin,80vw);
			height: 70vmin; 
			height: min(70vmin,80vw);
		}
		
		.sponsored {font-size: 2.5vw; margin: 0 0 4.5vw 0;}

		.sponsored img {width: 22.5vw;}
		
		#caption-ad {width: 22.5vw; height: 6vw; background-color: black;}
		
		#happy-bird-vid {
			width: 70vmin; 
			width: min(70vmin,80vw);
			height: 70vmin; 
			height: min(70vmin,80vw);
		}
		
		#happy-bird-gif {
			width: 70vmin; 
			width: min(70vmin,80vw);
			height: 70vmin; 
			height: min(70vmin,80vw);
		}
		
		#load-p {margin:0 0 5.5vw 0; font-size: 4vw;}
		
		#progress-bar-container {height: 8vw; margin: 0 0 2.5vw 0;}

		#progress-bar {height: 4.75vw; border-radius: 1.33vw;} 

		#progress-bar-border {
			height: 3.66vw;
			border-radius: 1.33vw;
			border: 0.8vw solid var(--dark-green);
		}
		
		#construction-container {position: relative; width: 100%; height: 59.94vw;}
		
		.construction {left: 5%; width: 90%; height: 59.94vw;}
		
		#construction-base {background-image: url("images/bird_construction_small.jpg");}
		#construction-blink {background-image: url("images/bird_construction_small.gif");}
		
	}

	@media only screen and (min-width: 577px) and (max-width: 899px) {
		
		.quiz-input {font-size: 3vw; border-bottom: .5vw solid hsla(192,26%,50%,0.4);}

		.quiz-question, .quiz-question p {font-size: 2.75vw;}

		.quiz-question {width: 60%;}
		.quiz-question p {margin: 0 0 5vw 0;}

		.quiz-answer {display: flex; width: 100%; flex-direction: row; justify-content: space-around; margin: 0 0 2.25vw 0; user-select: none;}

		.highlight {font-size: 3vw; color: hsla(200,78%,57%,1.00); cursor: pointer;}
		.highlight:hover {color: hsla(190,100%,66%,1.00); text-shadow: 0 0 0.5vw hsla(190,100%,66%,0.30); transition: 0.15s ease-in-out;}
		.highlight-button {width: 10%; cursor: pointer; user-select: none;}		
		.highlight-button:hover {opacity:0.8; drop-shadow: 0 0 1.5vw hsla(192,26%,50%,0.88); transition: 0.15s ease-in-out;}

		.quiz-agreement {display: flex; width: 100%; flex-direction: row; justify-content: center; align-items: center; font-size: 1.75vw;}

		.quiz-agreement span {pointer-events: none;}

		.circle {margin: 0 1.75vw; cursor: pointer; transition: color 0.2s ease-in-out; width: 5vw; height: 5vw; border-radius: 50%;}

		.disagree-str { width: 6vw; height: 6vw; border: 0.4vw solid var(--pink);} 
	
		.disagree { width: 5vw; height: 5vw; border: 0.4vw solid var(--pink);}

		.neutral { width: 4vw; height: 4vw; border: 0.4vw solid hsla(210,5%,61%,0.50);}
	
		.agree { width: 5vw; height: 5vw; border: 0.4vw solid var(--light-blue);}
	
		.agree-str { width: 6vw; height: 6vw; border: 0.4vw solid var(--light-blue);}
	
		.mobile-agreement {display: flex; margin: 2vw 0 0 12.5%; width: 75%; flex-direction: row; justify-content: space-between; font-size: 2vw;}
		
		.desktop-agreement {display: none;}
		
		.quiz-video-container {line-height: 0;}

		.quiz-video {
			width: 70vmin; 
			width: min(70vmin,60vw);
			height: 70vmin; 
			height: min(70vmin,60vw);
		}

		.sponsored {
			font-size: 1.5vw;
			margin: 0 0 2vw 0;
		}

		.sponsored img {width: 15vw;}

		#caption-ad {width: 12vw; height: 3.5vw; background-color: black;}

		#happy-bird-vid {
			width: 70vmin; 
			width: min(70vmin,60vw);
			height: 70vmin; 
			height: min(70vmin,60vw);
			object-fit: cover; 
		}

		#happy-bird-gif {
			width: 70vmin; 
			width: min(70vmin,60vw);
			height: 70vmin; 
			height: min(70vmin,60vw);
		}

		#load-p {margin:0 0 3vw 0;}

		#progress-bar-container {height: 6vw; margin: 0 0 0 0;}

		#progress-bar {
			position: absolute; 
			top: .25vw; 
			left: 12.75%;
			width: 100%; 
			height: 2.4vw;
			border-radius: 0.66vw;
		} 

		#progress-bar-border {
			position: absolute; 
			top: 0; 
			left: 12.5%;
			width: 74.75%; 
			height: 2vw;
			border-radius: 0.66vw;
			border: 0.4vw solid var(--dark-green);
		}

		#construction-container {position: relative; width: 100%; height: 25vw;}

		.construction {left: 8%; width: 84%; height: 25vw;}

	}
	
	@media only screen and (min-width: 900px) {}

/* BREAK QUESTION */	

	#break-question {
		position: fixed;
		width: 100%;
		height: var(fullHeight);
		top: 0;
		left: 0;
		perspective: 100px;
   		perspective-origin: 50% 30%;
		z-index: 3;
		display: none;
	}

	.break-container { 
		display: flex;
		position: relative; 
		width: 100%;
		height: var(--fullHeight);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		will-change: transform;
		transform-style: preserve-3d;
	}

	.break-box {
		display: flex;
		width: 50%;
		flex-direction: row;
		justify-content: space-around;
	}
	
	.break-box:first-child {
		flex: 1 1 46.5%;
	}
	
	.break-box:last-child {
		flex: 1 1 53.5%;
	}
	
	.break-question, .break-question p {
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: center;
		font-weight: 400;
		color: hsla(192,26%,50%,1.00);
		font-size: 2.25vw;
	}

	.break-question {width: 50%;}
	.break-question p { margin: 0 0 5vw 0;}

	.break {
		position: relative;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: center;
		font-weight: 400;
		font-size: 2.5vw;
		line-height: 3vw;
		color: hsla(200,78%,57%,1.00); 
		width: 30%;
	}
	
	.break-answer {cursor: pointer;}
	
	.break-answer:hover {filter: brightness(130%); text-shadow: 0 0 0.5vw hsla(192,26%,50%,0.3); transition: all 0.15s ease-in-out; }
	
	.break-text {
		position: absolute;
		left: 10%;
		width: 80%;
		bottom: var(--fallDistance);
		user-select: none;
	}
	
	.break-text span {display: inline-block;}
	
	.text-fall {
		animation: textFall 1.5s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
	}
	
	.break3d {transform: translateZ(calc(var(--cameraZ) * 0.1px));} 
	
	@keyframes textFall {
		
		0% {
			bottom: var(--fallDistance);
		}
		
		40% {
			bottom: var(--fallDistance);
		}
		
		48% {
			bottom: 0vh;
		}
		
		
		64% {
			bottom: 7vh;
		}
		
		66% {
			bottom: 6vh;
		}
		
		71% {
			bottom: 0vh;
		}
		
		80% {
			bottom: 2vh;
		}
		
		82% {
			bottom: 1.5vh;
		}
		
		84% {
			bottom: 0vh;
		}
		
		100% {
			bottom: 0vh;
		}
	
	}
	
	.y-fall {
		transform-origin: bottom;
		animation: yFall 1.5s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
	}
	
	@keyframes yFall {
		
		0% {
			transform: rotate(0deg);
		}
		
		20% {
			transform: rotate(0deg);
		}
		
		40% {
			transform: rotate(-30deg);
		}
		
		48% {
			transform: rotate(-50deg);
		}
		
		
		100% {
			transform: rotate(-70deg);
		}
	
	}
	
	
	.e-fall {
		transform-origin: bottom left;
		animation: eFall 1.5s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
	}
	
	@keyframes eFall {
		
		0% {
			transform: rotate(0deg);
			
		}
		
		40% {
			transform: rotate(-30deg);
		}
		
		48% {
			transform: translate(-0.8vh, 1vh) rotate(-40deg);
		}
		
		64% {
			transform: translate(-2.8vh, -0.5vh) rotate(-60deg);
		}
		
		84% {
			transform: translateX(-4vh) rotate(-90deg);
		}
		
		100% {
			transform: translateX(-4.5vh) rotate(-93deg);
		}
	}
	
	.s-fall {
		transform-origin: bottom right;
		animation: sFall 1.5s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
	}
	
	@keyframes sFall {
		
		0% {
			transform: rotate(0deg);
			
		}
		
		40% {
			transform: rotate(40deg);
		}
		
		48% {
			transform: rotate(50deg);
		}
	
		71% {
			transform: rotate(80deg);
		}
		
		100% {
			transform: rotate(93deg);
		}
	
	}
	
	.n-fall {
		transform-origin: bottom left;
		animation: nFall 1.5s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
	}
	
	
	@keyframes nFall {
		
		0% {
			transform: translate(0,0) rotate(0deg);
		}
		
		10% {
			transform: translate(0,0) rotate(0deg);
		}
		
		30% {
			transform: translate(-7vh, -2vh) rotate(-15deg);
		}
		
		40% {
			transform: translate(-10vh, 0vh) rotate(-15deg);
		}
		
		48% {
			transform: translate(-12vh, 0.5vh) rotate(-45deg);
		}
		
		66% {
			transform: translate(-12vh, 0.5vh) rotate(-80deg);
		}
		
		84% {
			transform: translate(-12.5vh, 0.5vh) rotate(-90deg);
		}
		
		100% {
			transform: translate(-12.5vh, 0.5vh) rotate(-90deg);
		}
	
	}
	
	.o-fall {
		transform-origin: bottom right;
		animation: oFall 1.5s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
	}
	
	@keyframes oFall {
		
		0% {
			transform: translate(0,0) rotate(0deg);
		}
		
		10% {
			transform: translate(0,0) rotate(0deg);
		}
		
		30% {
			transform: translate(8vh, -6vh) rotate(90deg);
		}
		
		40% {
			transform: translate(10vh, 0) rotate(90deg);
		}
		
		48% {
			transform: translate(12vh, 0) rotate(90deg);
		}
		
		64% {
			transform: translate(15vh, -0) rotate(90deg);
		}
		
		71% {
			transform: translate(16vh, 0) rotate(90deg);
		}
		
		80% {
			transform: translate(18vh, 0) rotate(90deg);
		}
		
		84% {
			transform: translate(19vh, 0) rotate(90deg);
		}
		
		100% {
			transform: translate(20vh, 0) rotate(90deg);
		}
	
	}
	
	@media only screen and (min-width: 577px) and (max-width: 899px) {
		
		.break-question, .break-question p {font-size: 2.75vw;}
		.break-question {width: 60%;}
		.break-question p {margin: 0 0 5vw 0; }
		
		.break-box {width: 60%;}
		
		.break {font-size: 3vw; line-height: 4vw;}
		
	}

	@media only screen and (max-width: 576px) {
		
		.break-question, .break-question p {font-size: 4.5vw;}
		.break-question {width: 80%;}
		.break-question p {margin: 0 0 9vw 0; }
		
		.break-box {width: 80%;}
		
		.break {font-size: 5.5vw; line-height: 6.5vw;}
				
		@keyframes nFall {

			0% {
				transform: translate(0,0) rotate(0deg);
			}

			10% {
				transform: translate(0,0) rotate(0deg);
			}

			30% {
				transform: translate(-5.5vh, -5vh) rotate(-15deg);
			}

			40% {
				transform: translate(-7.5vh, 0vh) rotate(-15deg);
			}

			48% {
				transform: translate(-9vh, 0.5vh) rotate(-45deg);
			}

			66% {
				transform: translate(-9.5vh, 0.5vh) rotate(-80deg);
			}

			84% {
				transform: translate(-10vh, 0.5vh) rotate(-90deg);
			}

			100% {
				transform: translate(-10vh, 0.5vh) rotate(-90deg);
			}

		}
		
		@keyframes oFall {

			0% {
				transform: translate(0,0) rotate(0deg);
			}

			10% {
				transform: translate(0,0) rotate(0deg);
			}

			30% {
				transform: translate(4vh, -10vh) rotate(90deg);
			}

			40% {
				transform: translate(6vh, 0) rotate(90deg);
			}

			48% {
				transform: translate(8vh, 0) rotate(90deg);
			}

			64% {
				transform: translate(9vh, -0) rotate(90deg);
			}

			71% {
				transform: translate(9vh, 0) rotate(90deg);
			}

			80% {
				transform: translate(9.5vh, 0) rotate(90deg);
			}

			84% {
				transform: translate(10vh, 0) rotate(90deg);
			}

			100% {
				transform: translate(10.2vh, 0) rotate(90deg);
			}

		}

	}

/* 3D SCENE */	

	#section-3d {display: none; z-index:1; height: 150000px;}

	.viewport {
		position: relative; 
		width: 100%; 
		z-index: 2;	
	}

	.viewport * {-webkit-font-smoothing: subpixel-antialiased;}

	#viewport-1 {height: 100000px;} 
	#viewport-2 {display: none; height: 100000px;} 
	#viewport-3 {display: none; height: 50000px;} 
	#viewport-4 {display: none; height: 50000px;} 

	.scene3d-container {
		position: fixed;
		top: 0;
  		left: 0;
		width: 100%;
		height: 100vh;
		perspective: 100px;
   		perspective-origin: 50% 30%;
		pointer-events: none;
		z-index: 2;
	}
	
	.scene3d {
		position: absolute;
    	width: 100%;
    	height: 100vh;
		will-change: transform;
		transform-style: preserve-3d;
	}
		
	.s3dslow {transform: translateZ(calc(var(--cameraZ) * 0.1px)); z-index: 4;} 
	
	.s3d1 {transform: translateZ(calc(var(--cameraZ) * 1px)); z-index: 3;} 
	.s3d2 {transform: translateX(-60%) translateZ(calc(var(--cameraZ) * 2px)); z-index: 2;}
	.s3d3 {transform: translate(100%, 50%) translateZ(calc(var(--cameraZ) * 0.75px)); z-index: 2;}
	.s3d4 {transform: translate(-120%, -50%) translateZ(calc(var(--cameraZ) * 0.75px)); z-index: 1;}
	.s3d5 {transform: translate(120%, -100%) translateZ(calc(var(--cameraZ) * 0.5px)); z-index: 1;}
	.s3d6 {transform: translate(70%) translateZ(calc(var(--cameraZ) * 1.5px)); z-index: 2;}

	.frame {
		display: flex;
		position: absolute; 
		width: 100%;
		height: var(--fullHeight);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transform-style: preserve-3d;
	}
	
	.frame .quiz-answer, .quiz-agreement, .quiz-input, .highlight-button {pointer-events: auto; transform: translateZ(0px);}

	.q3d {padding: 2.5%; transform: translateZ(0px);}
	
	.q3dbox {background-color: hsla(185,100%,97%,1.00); box-shadow: 0 0 1.5vw 3vw hsla(185,100%,97%,1.00);}

	#ocean {
		position: fixed;
  		object-fit: cover;
		object-position: 50% 30%;
		width: 100%;
  		height: 100vh;
  		top: 0;
  		left: 0;
		opacity: 0;
		z-index: 1;
	}

	#angry-bird {
		position: fixed;
  		object-fit: cover;
  		width: 40%;
		height: 40vw;
  		bottom: 0;
  		right: 5vw;
		z-index: 4;
		pointer-events: none;
	}
	
	#angry-bird-alt {
		display: none;
		position: fixed;
  		width: 40%;
		height: 40vw;
  		bottom: 0;
  		right: 5vw;
		z-index: 4;
		pointer-events: none;
		background-image: url("images/bird_pop-up_angry.gif");
		background-size: cover; 
		background-position: center; 
		background-repeat: no-repeat;
	}

	.bird-move {animation: birdMove 1.25s ease-in-out 1 forwards;}
	@keyframes birdMove {0% {transform: translateX(0%);} 100% {transform: translateX(-20%);} }

	#eqorex-video {
		position: fixed;
  		object-fit: contain;
		object-position: 50% 50%;
		background-color: black;
		width: 100%;
  		height: 100vh;
  		top: 0;
  		left: 0;
		z-index: 3;
		opacity: 0;
		pointer-events: none;
	}
	
	#running {
		display: none;
		position: fixed;
  		object-fit: cover;
		width: 17.5%;
  		height: 17.5vw;
  		top: 10vh;
  		right: 5%;
		z-index: 5;
		pointer-events: none;
	}

	.overlay-container { 
		display: flex;
		position: fixed; 
		top: 0; 
		left: 0;
		width: 100%;
		background-color: transparent;
		height: 100vh;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		pointer-events: none;
		z-index: 3;
	}

	#jello-container {transform: translateY(-10%); z-index: 4;}	

	#jello {
		display: none;
  		object-fit: cover;
		width: 30vw; 
		height: 30vw; 
		object-fit: cover; 
		pointer-events: none;
	}

	#inf {
		display: none;
		width: 70vmin; 
		width: min(70vmin, 50vw);
		height: 70vmin; 
		height: min(70vmin, 50vw);
		object-fit: cover; 
	}

	#dripping-container {background-color: var(--base-color); opacity: 0; z-index: 6;}	

	#dripping {
		width: 70vmin; 
		width: min(70vmin, 50vw);
		height: 70vmin; 
		height: min(70vmin, 50vw);
		object-fit: cover; 
	}	

	#qwell-small {
		display: none;
		position: fixed;
  		object-fit: cover;
		width: 35%;
  		height: 19.7vw;
  		top: 60vh;
  		left: 5%;
		z-index: 4;
		pointer-events: none;
	}

	#glitch-bird {
		display: none;
		position: fixed; 
		right: 0; 
		top: 0; 
		width: 25%;
		height: 35vw; 
		background-image: url("images/glitch_bird_intro.gif");
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat;
		z-index: 4;
	}

	#glitch-butterfly {
		display: none;
		position: fixed; 
		left: 0; 
		top: 20vh; 
		width: 100%;
		height: 42.5vw; 
		background-image: url("images/glitch_butterfly.gif");
		background-size: cover; 
		background-position: top;
		background-repeat: no-repeat;
		z-index: 4;
	}


	#dex-container {
		display: none;
		position: fixed;
		bottom: -12.5vw;
		left: 0;
		width: 100%;
		height: 12.5vw;
		background-color: white;
		animation: adContainerMove 0.8s ease-in-out 1 forwards;
		z-index: 1;
	}	

	@keyframes adContainerMove {0% {transform: translateY(0%);} 100% {transform: translateY(-100%);} }	
	
	#dexterra-video {
		position: absolute;
		top: 0;
		left: 32.5%;
		width: 35%;
		height: 12.5vw;
		object-fit: cover;
		object-position: 50% 50%;
	}
	
	.dex {
		display: none;
		position: absolute; 
		left: 35%; 
		top: 0; 
		width: 30%; 
		height: 12.5vw; 
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat;
	}
	
	#dexterra-logo-intro {background-image: url(images/dexterra_intro.gif); z-index: 2;} 
	#dexterra-logo {background-image: url(images/dexterra_logo.png); z-index: 1;}
	
	
	.dex-move {animation: dexMove 1.5s ease-in-out 1 forwards;}
	@keyframes dexMove {0% {transform: translateX(0%);} 100% {transform: translateX(-45%);} }
	
	
	#dex-img {
		display: none;
		position: absolute;
		left: 52.5%;
		top: 0;
		width: 25%;
		height: 12.5vw;
		background-image: url(images/dexterra_img.jpg);
		background-size: cover; 
		background-position: center; 
		background-repeat: no-repeat;
		z-index: 1;
	}
	
	#dex-close {
		position: absolute;
		height: 2vw;
		width: 2vw;
		right: 1vw;
		top: 1vw;
		cursor: pointer;
		background-image: url(images/ad-close.png);
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat;
		z-index: 2;
	}

	#fadebox {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		opacity: calc((var(--cameraZ) * .001) - 19.1);
		background-color: black;
		pointer-events: none;
		z-index: 4;
	}

	.blackbox {
		position: absolute;
		width: 100%;
		height: 100vh;
		background-color: black;
		box-shadow: 0 0 2vw 4vw black;
		transform-style: preserve-3d;
		pointer-events: none;
	}

	@media only screen and (max-width: 576px) {
		
		#angry-bird, #angry-bird-alt {
			width: 80%;
			height: 80vw;
			bottom: 0;
			right: 10%;
		}
		
		#running {
			width: 35%;
			height: 35vw;
			top: 5vh;
			right: 5%;
		}
		
		#jello {
			width: 60%; 
			height: 60vw; 
		}

		#inf {
			width: 70vmin; 
			width: min(70vmin, 80vw);
			height: 70vmin; 
			height: min(70vmin, 80vw);
		}
		
		#dripping {
			width: 70vmin; 
			width: min(70vmin, 80vw);
			height: 70vmin; 
			height: min(70vmin, 80vw);
		}	

		#qwell-small {
			width: 50%;
			height: 28.14vw;
			bottom: 5vh;
			left: 2%;
		}
		
		#glitch-bird {
			right: 0; 
			top: 0; 
			width: 50%; 
			height: 80vw; 
		
		}
		
		#dex-container { bottom: -30vw; height: 30vw; }
		
		#dexterra-video {
			left: 0;
			width: 100%;
			height: 30vw;
		}	
		
		.dex {
			left: 25%; 
			width: 50%; 
			height: 30vw; 
		}
		
		#dex-img {
			left: 50%;
			top: 0;
			width: 50%;
			height: 30vw;
			background-position: left center; 
		}
		
		#dex-close {
			height: 5vw;
			width: 5vw;
			right: 2vw;
			top: 2vw;
			background-image: url(images/ad-close-mobile.png);
		}
		
		#fadebox {opacity: 0;}
		
	}

	@media only screen and (min-width: 577px) and (max-width: 899px) {
	
		#angry-bird, #angry-bird-alt {
			width: 50%;
			height: 50vw;
			right: 0;
		}
		
		#jello {
			width: 40%; 
			height: 40vw; 
		}
	
		#running {
			width: 25%; 
			height: 25vw; 
		}

		#inf {
			width: 70vmin; 
			width: min(70vmin, 60vw);
			height: 70vmin; 
			height: min(70vmin, 60vw);
		}
		
		#dripping {
			width: 70vmin; 
			width: min(70vmin, 60vw);
			height: 70vmin; 
			height: min(70vmin, 60vw);
		}
		
		#qwell-small {
			width: 45%;
			height: 25.33vw;
			bottom: 5vh;
			left: 2%;
		}
		
		#glitch-bird {
			right: 0; 
			top: 0; 
			width: 30%; 
			height: 35vw; 
		}
		
		#dex-container { bottom: -17.5vw; height: 17.5vw; }
		
		#dexterra-video {
			left: 20%;
			width: 60%;
			height: 17.5vw;
		}	
		
		.dex {
			left: 30%; 
			width: 40%; 
			height: 17.5vw; 
		}
		
		#dex-img {
			left: 50%;
			top: 0;
			width: 37.5%;
			height: 17.5vw;
			background-position: left center; 
		}
		
		#dex-close {
			height: 2.8vw;
			width: 2.8vw;
			right: 1.2vw;
			top: 1.2vw;
			background-image: url(images/ad-close.png);
		}
		
	}

/* TUNNEL */

	#tunnel {
		display: none;
		height: 65000px;
	}

	.burn {
		background-color: hsla(0, 100%, 1%, 1);
		mix-blend-mode: color-burn;
	}

	#ink {
		display: none;
		position: fixed;
  		object-fit: cover;
		object-position: 50% 30%;
		width: 100%;
  		height: 100vh;
  		top: 0;
  		left: 0;
		z-index: 1;
		filter: hue-rotate(0deg);
		animation: hue 20s infinite;
	}

	@keyframes hue {0%, 100%  {filter: hue-rotate(0deg); } 50% {filter: hue-rotate(360deg); } }

	.bbox {
		width: 100vmin;
		height: 100vmin;
		padding: 2.5%;
		opacity: 0;
		box-shadow: 0 0 1.5vw 1.5vw hsla(305, 80%, 57%, .2), 
					0 0 4vw 4vw hsla(305, 80%, 57%, .15), 
					0 0 8vw 8vw hsla(305, 80%, 57%, .1),
					0 0 12vw 12vw hsla(305, 80%, 57%, .05);
	}	

	#b1 {perspective-origin: 50% 30%;} #b1 .frame {transform: translateZ(-40000px);}
	#b2 {perspective-origin: 52% 29%;} #b2 .frame {transform: translateZ(-40300px);}
	#b3 {perspective-origin: 54% 28%;} #b3 .frame {transform: translateZ(-40600px);}
	#b4 {perspective-origin: 56% 27%;} #b4 .frame {transform: translateZ(-40900px);}
	#b5 {perspective-origin: 58% 26%;} #b5 .frame {transform: translateZ(-41200px);}
	#b6 {perspective-origin: 60% 25%;} #b6 .frame {transform: translateZ(-41500px);}
	#b7 {perspective-origin: 61% 24%;} #b7 .frame {transform: translateZ(-41800px);}
	#b8 {perspective-origin: 62% 23%;} #b8 .frame {transform: translateZ(-42100px);}
	#b9 {perspective-origin: 63% 23%;} #b9 .frame {transform: translateZ(-42400px);}
	#b10 {perspective-origin: 64% 23%;} #b10 .frame {transform: translateZ(-42700px);}
	#b11 {perspective-origin: 64% 24%;} #b11 .frame {transform: translateZ(-43000px);}
	#b12 {perspective-origin: 64% 25%;} #b12 .frame {transform: translateZ(-43300px);}
	#b13 {perspective-origin: 64% 26%;} #b13 .frame {transform: translateZ(-43600px);}
	#b14 {perspective-origin: 63% 28%;} #b14 .frame {transform: translateZ(-43900px);}
	#b15 {perspective-origin: 62% 30%;} #b15 .frame {transform: translateZ(-44200px);}
	#b16 {perspective-origin: 60% 32%;} #b16 .frame {transform: translateZ(-44500px);}
	#b17 {perspective-origin: 58% 34%;} #b17 .frame {transform: translateZ(-44800px);}
	#b18 {perspective-origin: 56% 35%;} #b18 .frame {transform: translateZ(-45100px);}
	#b19 {perspective-origin: 54% 36%;} #b19 .frame {transform: translateZ(-45400px);}
	#b20 {perspective-origin: 52% 36%;} #b20 .frame {transform: translateZ(-45700px);}
	#b21 {perspective-origin: 51% 36%;} #b21 .frame {transform: translateZ(-46000px);}
	#b22 {perspective-origin: 50% 35%;} #b22 .frame {transform: translateZ(-46300px);}
	#b23 {perspective-origin: 49% 34%;} #b23 .frame {transform: translateZ(-46600px);}
	#b24 {perspective-origin: 48% 33%;} #b24 .frame {transform: translateZ(-46900px);}
	#b25 {perspective-origin: 47% 32%;} #b25 .frame {transform: translateZ(-47200px);}
	#b26 {perspective-origin: 46% 30%;} #b26 .frame {transform: translateZ(-47500px);}
	#b27 {perspective-origin: 45% 28%;} #b27 .frame {transform: translateZ(-47800px);}
	#b28 {perspective-origin: 44% 26%;} #b28 .frame {transform: translateZ(-48100px);}
	#b29 {perspective-origin: 43% 24%;} #b29 .frame {transform: translateZ(-48400px);}
	#b30 {perspective-origin: 43% 23%;} #b30 .frame {transform: translateZ(-48700px);}
	#b31 {perspective-origin: 43% 23%;} #b31 .frame {transform: translateZ(-49000px);}
	#b32 {perspective-origin: 43% 23%;} #b32 .frame {transform: translateZ(-49300px);}
	#b33 {perspective-origin: 44% 23%;} #b33 .frame {transform: translateZ(-49600px);}
	#b34 {perspective-origin: 45% 24%;} #b34 .frame {transform: translateZ(-49900px);}
	#b35 {perspective-origin: 46% 25%;} #b35 .frame {transform: translateZ(-50200px);}
	#b36 {perspective-origin: 47% 26%;} #b36 .frame {transform: translateZ(-50500px);}
	#b37 {perspective-origin: 48% 27%;} #b37 .frame {transform: translateZ(-50800px);}
	#b38 {perspective-origin: 49% 28%;} #b38 .frame {transform: translateZ(-51100px);}
	#b39 {perspective-origin: 50% 29%;} #b39 .frame {transform: translateZ(-51400px);}

	@media only screen and (max-width: 576px) {
		
		#tunnel .frame {height: 90vh;}
		
		.bbox {
			width: 70vmin;
			height: 70vmin;
			padding: 2.5%;
			box-shadow: 0 0 4.5vw 4.5vw hsla(305, 80%, 57%, .25), 
						0 0 7vw 7vw hsla(305, 80%, 57%, .2), 
						0 0 11vw 11vw hsla(305, 80%, 57%, .1),
						0 0 15vw 15vw hsla(305, 80%, 57%, .05);
		}
		
	}

/* OLD WEBSITE */

	#old-website {display: none;}

	#ow-background {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-image: url(images/texture.png); 
		z-index: 1;
	}

	#ow-container {position: relative; z-index: 2;}

	#ow-body {font-family: "Times New Roman", "serif"; letter-spacing: normal; font-size: 1.125em; width: 750px;}

	#ow-header {text-align: center; margin: 0 0 30px 0;}

	.banner {display: block; margin: 0 auto 30px auto;}

	#banner-1 {} #banner-2 {display: none;}

	#ow-home-page h3 { margin: 0 50px 50px;}

	#links-container {
		display: flex;
		width: 750px;
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
		row-gap: 20px;
	}
	
	.ow-links {
		color: blue;
		text-decoration: underline;
		cursor: pointer;
	}

	.ow-link-clicked {color: purple;}
	
	.ow-img-links {
		display: flex;
		flex-direction: column;
		justify-content: center ;
		align-items: center;
		width: 150px;
		gap: 10px;
	}

	.ow-img-links img {width: 100px;}

	#ow-message-container {
		width: 100%;
		border-bottom: 1px solid black;
	}
	
	.ow-message {
		width: 100%;
		border-top: 1px solid black;
		line-height: 0.75em;
	}
	
	#ow-about-us-page {display: none; margin: 0 20px 20px;}

	#ow-test-page {display: none; margin: 0 50px 50px;}
	
	#ow-body input[type=radio] {cursor: pointer;}

	#ow-body label, #ow-body p {font-weight: 500;}
	
	#ow-body input[type=submit] {font-weight: 500; font-size: 0.9em; margin-top: 2.2em; cursor: pointer;}

	#ow-testimonials-page {display: none; margin: 0 20px 20px;}

	#ow-awards-page {display: none; text-align: center;}

	#ow-awards-1 {} #ow-awards-2 {display: none;}

	#ow-footer { border: 1px solid black; text-align: left; margin: 50px 0 0;}

	#pi {position: absolute; bottom: 0; right: 0;}

	#midi-player-container {
		position: relative;
		width: 200px;
		height: 74px;
		background-image: url("images/midi_blank.gif");
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat;
		text-align: center;
		margin: 0 auto 60px;
	}

	#midi-player {
		position: absolute;
		width: 200px;
		height: 74px;
		top: 0;
		left: 0;
		background-image: url("images/midi_stop.gif");
		background-size: contain; 
		background-position: center; 
		background-repeat: no-repeat;
		text-align: center;
		margin: 0 auto 60px;
		z-index: 1;
	}
	
	#midi-play {
		position: absolute;
		width: 45px;
		height: 74px;
		top: 0;
		right: 101px;
		cursor: pointer;
		z-index: 2;
	}

	#midi-play {
		position: absolute;
		width: 45px;
		height: 74px;
		top: 0;
		right: 101px;
		cursor: pointer;
		z-index: 2;
	}
	
	#midi-pause {
		position: absolute;
		width: 45px;
		height: 74px;
		top: 0;
		right: 56px;
		cursor: pointer;
		z-index: 2;
	}

	#midi-stop {
		position: absolute;
		width: 45px;
		height: 74px;
		top: 0;
		right: 11px;
		cursor: pointer;
		z-index: 2;
	}

	@media only screen and (max-width: 576px) {
		
		#ow-body {width: 100%;}
		
		.banner img {width: 100vw; width: min(500px, 100vw);}
		
		#ow-home-link {width: 400px; width: min(100vw, 400px);}
		
		#ow-home-page p { margin: 0 10%;}
		
		.ow-star {display: none;}
		
		#links-container {width: 100vw; flex-wrap: wrap; column-gap: 20px;}
		
		.ow-img-links {width: 37.5vw;}
		
		.ow-img-links img {width: 66%;}
		
		#pi {display: none;}
		
	}

	@media only screen and (min-width: 577px) and (max-width: 750px) {

		#ow-body {width: 100%;}
		
		#links-container {width: 100vw; flex-wrap: wrap;}
		
		.ow-img-links {width: 25vw; width: min(25vw, 150px);}
		
		.ow-img-links img {width: 66%; }
		
	}

/* ENDING */

	#butterfly-container {
		position: fixed;
		width: 100%;
		height: var(--full-height);
		z-index: 1;
	}

	#ending-butterfly {
		position: absolute;
		top: 2.5vw;
		left: 7%;
		width: 10%;
		height: 10vw;
		background-image: url(images/logo.png);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}

	#ending-accent {
		position: absolute;
		top: 12.5vw;
		left: 10%;
		width: 10%;
		height: 10vw;
		background-image: url(images/accent.png);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}

	#ending-container { 
		display: flex;
		position: relative; 
		width: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: center;
		margin-top: 2.5vw;
		z-index: 2;
	}

	#ending-container h1 {
		width: 60%;
		font-weight: 500;
		font-size: 2vw;
		color: hsla(192,26%,50%,1.00);
	}

	#ending-container p {
		width: 60%;
		font-weight: 400;
		font-size: 1.8vw;
		color: hsla(192,26%,50%,1.00);
	}

	#membership-container {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 70%;
	}	

	.membership-box {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		width: 30%;
		height: 30vw;
		border-radius: 1.5vw;
		margin: 1vw;	
		background-color: var(--base-color);
	}
	
	.hover {filter: brightness(110%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); transition: all 0.15s ease-in-out;}

	.m-items {
		display: flex;
		flex-direction: column;
		width: 80%;
		font-weight: 400;
		text-align: left;
		font-size: 1.25vw;
		line-height: 2vw;
		color: hsla(192,26%,50%,1.00);
	}

	.m-item {display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}
	.mi1 { width: 100%; line-height: 1.5em; border-bottom: 0.15vw solid hsla(192,26%,50%,1.00);}
	.mi2 {width: 1.25vw; height: 1.25vw;}

	.membership-square {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: var(--base-color);
	}
	
	.rounded {	
		background-image: url(images/test_button_mobile_blank.png);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		width: 90%;
		height: 10vw;
		font-weight: 400;
		font-size: 1.25vw;
		cursor: pointer;
	}

	#basic { border: solid 0.75vw var(--dark-green); } 
	#premium { border: solid 0.75vw var(--pink); } 
	#basic-square {background-color: var(--dark-green); width: 80%; height: 4.25vw; font-weight: 500; font-size: 1.8vw; }
	#premium-square {background-color: var(--pink); width: 80%; height: 4.25vw; font-weight: 500; font-size: 1.8vw; }
	
	@media only screen and (max-width: 576px) {
		
		#butterfly-container {
			position: relative;
			width: 100%;
			height: 35vw;
		}
		
		#ending-butterfly {
			top: 0;
			left: 35vw;
			width: 30%;
			height: 30vw;
		}
		
		#ending-container {margin-top: 0vw;}
		#ending-container p {width: 80%; font-size: 4vw;}
		
		#ending-container h1 {width: 80%; font-size: 4.25vw;}
		#ending-container p {width: 80%; font-size: 4vw;}
		
		#membership-container { flex-direction: column; width: 100%;}
		
		.membership-box {
			justify-content: space-evenly;
			width: 70%;
			height: 90vw;
			border-radius: 3.5vw;
			margin: 3vw;	
		}
		
		.m-items {
			font-size: 4vw;
			line-height: 6vw;
		}

		.mi1 {width: 60% !important; line-height: 1.5em; font-size: 4.5vw !important; margin: 0; border-bottom: 0.5vw solid hsla(192,26%,50%,1.00);}
		.mi2 {width: 3vw; height: 3vw;}
	
		.rounded {height: 20vw; font-size: 4vw;}

		#basic { border: solid 2vw var(--dark-green); }
		#premium { border: solid 2vw var(--pink); }
		#basic-square {height: 12.5vw; font-size: 4.5vw; }
		#premium-square {height: 12.5vw; font-size: 4.5vw; }
		
	}

	@media only screen and (min-width: 577px) and (max-width: 899px) {

		#butterfly-container {
			position: relative;
			width: 100%;
			height: 10vw;
			margin-top: 1.25vw;
		}
		
		#ending-butterfly {
			top: 0;
			left: 45%;
			width: 10%;
			height: 10vw;
		}
		
		#ending-accent {display: none;}
		
		#ending-container p {width: 65%; font-size: 2.25vw;}
		
		#ending-container h1 {width: 65%; font-size: 2.25vw;}
		#ending-container p {width: 65%; font-size: 2vw;}
		
		#membership-container { width: 70%;}
		
		.membership-box {
			justify-content: space-evenly;
			width: 40%;
			height: 40vw;
			border-radius: 2vw;	
		}
		
		.m-items {
			font-size: 1.5vw;
			line-height: 2.5vw;
			margin-bottom: 0.5vw;
		}

		.mi1 {font-size: 2.25vw !important; border-bottom: 0.175vw solid hsla(192,26%,50%,1.00);}
		.mi2 {width: 1.4vw; height: 1.4vw;}
		
		.rounded {font-size: 2vw;}

		#basic { border: solid 1vw var(--dark-green); }
		#premium { border: solid 1vw var(--pink); }
		#basic-square {height: 5.5vw; font-size: 2.25vw; }
		#premium-square {height: 5.5vw; font-size: 2.25vw; }
		
	}

/* GLITCH EFFECTS */

	.glitch-left-1 {transform: translate(-55%, 10%);} .glitch-left-2 {transform: translate(-100%, -10%);}
	.glitch-right-1 {transform: translate(25%, -20%);} .glitch-right-2 {transform: translate(65%, -5%);}
	
	.glitch-move-1 {animation: glitchMoveOne 2s ease-in-out infinite;}
	@keyframes glitchMoveOne {
		0% {transform: translate(0%);} 
		19% {transform: translate(0%);}
		20% {transform: translate(-35%, -5%);} 
		30% {transform: translate(-35%, -5%);}
		31% {transform: translate(15%, 45%);} 
		80% {transform: translate(15%, 45%);}
		81% {transform: translate(75%, 49%);}
		100% {transform: translate(75%, 49%);}
	}

	.glitch-move-2 {animation: glitchMoveTwo 2s ease-in-out infinite;}
	@keyframes glitchMoveTwo {
		0% {transform: translate(0%);} 
		9% {transform: translate(0%);}
		10% {transform: translate(45%, 15%);} 
		30% {transform: translate(45%, 15%);}
		31% {transform: translate(40%, 5%);} 
		70% {transform: translate(40%, 5%);}
		71% {transform: translate(700%, 60%);}
		100% {transform: translate(700%, 60%);}
	}

	.effect-box {
		position: fixed; 
		top: 0;
		left: 0;
		width: 100%;
		height: var(--fullHeight);
		pointer-events: none;
		z-index: 999;
		display: none;
	}
	
	.effect-box2 {
		position: fixed; 
		top: 0;
		left: 0;
		width: 100%;
		height: var(--fullHeight);
		pointer-events: none;
		z-index: 999;
		display: none;
	}

	.effect-box-glitch-vid {
  		object-fit: cover;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.effect-box-glitch-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		mix-blend-mode: lighten;
		z-index: 2;
	}
	
	.top-half {height: calc(var(--fullHeight) / 2) !important;}
	.bottom-half {top: calc(var(--fullHeight) / 2) !important; height: calc(var(--fullHeight) / 2) !important;}

	#black-screen {background-color: black; pointer-events: auto;}
	#pink-screen {left: 40%; width: 60%; background-color: var(--pink); mix-blend-mode: screen; opacity: .25;}
	#green-screen {width: 80%; top: 50vh; height: 30vh; background-color: hsla(115,100%,58%,1.00); mix-blend-mode: screen; opacity: .25;}

	#e1 {top: 50vh; left: 50%; height: 10vh; width: 50%; mix-blend-mode: color-burn;}
	#e2 {top: 70vh; left: 20%; height: 2px; width: 80%; background-color: red;}
	#e3 {top: 10vh; height: 3vh; width: 30%; background-color: hsla(115,100%,58%,1.00); mix-blend-mode: screen; opacity: .5;}
	#e4 {top: 16vh; height: 8vh; width: 30%; background-color: hsla(115,100%,58%,1.00); mix-blend-mode: screen; opacity: .5;}
	#e5 {top: 20vh; left: 20%; height: 10vh; width: 40%; background-color: black; z-index: 998;}
	#e6 {top: 10vh; left: 10%; height: 2px; width: 2px; background-color: red;}
	#e7 {top: 70vh; height: 20vh;}
	#e8 {top: 75vh; height: 2.5vh; mix-blend-mode: screen;}
	#e9 {top: 40vh; left: 50%; height: 30vh; width: 10px; background-color: hsla(115,100%,58%,1.00); mix-blend-mode: screen; opacity: .5;}	
	#e10 {top: 45vh; left: 55%; height: 2px; width: 2px; background-color: red;}
	#e11 {top: 60vh; left: 40%; height: 20vh; width: 10%; background-color: black; z-index: 998;}
	#e12 {top: 60vh; left: 75%; height: 5px; width: 5px; background-color: red;}
	#e13 {top: 70vh; left: 5%; height: 5px; width: 5px; background-color: hsla(115,100%,58%,1.00); opacity: .25;}
	#e14 {height: 8vh; width: 100%; background-color: var(--pink); mix-blend-mode: screen;}

	#e15 {top: 40vh; left: 0; height: 20vh; width: 100%; background-color: black; z-index: 998;}
	#e16 {top: 42.5vh; left: 10%; height: 2.5vh; width: 10%; background-color: hsla(115,100%,58%,1.00);}
	#e17 {top: 45vh; left: 20%; height: 2.5vh; width: 30%; background-color: hsla(115,100%,58%,1.00); mix-blend-mode: screen; opacity: .5;}
	#e18 {top: 57.5vh; left: 90%; height: 2.5vh; width: 5%; background-color: hsla(115,100%,58%,1.00);}
	#e19 {top: 40vh; left: 90%; height: 2.5vh; width: 10%; background-color: red;}
	#e20 {top: 55vh; left: 0; height: 2.5vh; width: 20%; background-color: red;}
	#e21 {top: 47.5vh; left: 60%; height: 2.5vh; width: 5%; background-color: var(--pink); mix-blend-mode: screen; opacity: .5;}
	#e22 {top: 52.5vh; left: 0; height: 2.5vh; width: 20%; background-color: var(--pink); mix-blend-mode: screen; opacity: .5;}
	#e23 {top: 47.5vh; left: 5%; height: 2.5vh; width: 30%; background-color: var(--pink); mix-blend-mode: screen;}
	#e24 {top: 52.5vh; left: 60%; height: 2.5vh; width: 15%; background-color: hsla(115,100%,58%,1.00);}
	#e25 {top: 55vh; left: 20%; height: 2.5vh; width: 5%; background-color: hsla(115,100%,58%,1.00); mix-blend-mode: screen; opacity: .5;}

	#e26 {top: 20vh; left: 0; height: 2.5vh; width: 80%; background-color: black; opacity: .75;}
	#e27 {top: 40vh; left: 0; height: 2.5vh; width: 100%; background-color: black;}
	#e28 {top: 0; left: 70%; height: 15vh; width: 30%; background-color: black; opacity: .25;}
	#e29 {top: 45vh; left: 0; height: 15vh; width: 100%; background-color: black;}
	#e30 {top: 70vh; left: 10%; height: 20vh; width: 70%; background-color: black; opacity: .25;}
	
	@media only screen and (max-width: 576px) {
		
		.glitch-left-1 {transform: translate(-20%, 10%);} .glitch-left-2 {transform: translate(-30%, -10%);}
		.glitch-right-1 {transform: translate(15%, -20%);} .glitch-right-2 {transform: translate(25%, -5%);}

	}

	@media only screen and (min-width: 577px) and (max-width: 899px) {
		
		.glitch-left-1 {transform: translate(-20%, 10%);} .glitch-left-2 {transform: translate(-30%, -10%);}
		.glitch-right-1 {transform: translate(15%, -20%);} .glitch-right-2 {transform: translate(25%, -5%);}

	}

/* CREDITS */

	#credits {
		display: none;
		position: fixed; 
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: black;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		color: hsla(51,59%,68%,1.00);
		z-index: 999999;
	}	

	.credits-animation { animation: cAnim 3s ease-in forwards; }
	@keyframes cAnim { 0% {background-color: black;} 100% {background-color: var(--light-green);} }

	#credits-header {display: none; color: hsla(51,59%,68%,1.00);}

	.c-item {display: none;}
	
	.credits-container {
		display: flex;
		position: fixed; 
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		font-size: 2.25vw;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: 2.5vw;
	}

	.credits-container p {
		line-height: 0.5em; font-weight: 500;
	}

	.credits-container a {
		color: hsla(51,59%,68%,1.00);
		text-decoration: none;
	}

	@media only screen and (max-width: 576px) {
		
		.credits-container {
			font-size: 4.5vw;
			gap: 5vw;
		}

	}

	@media only screen and (min-width: 577px) and (max-width: 899px) {
		
		.credits-container {
			font-size: 3vw;
			gap: 3.25vw;
		}

	}

	.alert {
		position: fixed;
		background-color: var(--dark-green);
		width: 40vw;
		height: 20vw;
		top: calc((var(--fullHeight) - 20vw) / 2);
		left: calc((100vw - 40vw) / 2);
		border: solid hsla(192, 26%, 30%, 1.00);
		border-width: 0.2vw;
		border-radius: 0.3vw;
		box-shadow: 0.2vw 0.2vw 0.8vw hsla(0, 0%, 0%, 0.30);
		will-change: transform;
		z-index: 997;
	}
	
	.alert h1, 
	.alert p {
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: left;
		font-weight: 400;
		font-size: 1.6vw;
		color: hsla(185,100%,97%,1.00);
		cursor: default;
	}
	
	.alert h1 {	margin: 3vw 3vw 1.6vw;}
	.alert p {	margin: 0 3vw; line-height: 2vw;}

	.alert img {
		position: absolute;
		top: 1vw;
		right: 1vw;
		width: 2vw;
		padding: 0.5vw;
		cursor: pointer;
		z-index: 998;
	}
	
	.alert img:hover {filter: brightness(120%); drop-shadow: 0 0 1vw hsla(0, 0%, 100%, 0.50); transition: all 0.15s ease-in-out; }

	@media only screen and (max-width: 576px) {
	
		:root {
			--top-position: calc((var(--fullHeight) - 37.5vw) / 2);
			--left-position: calc((100vw - 75vw) / 2);
			--alert-width: 75vw;
			--alert-height: 37.5vw;
		}
		
		.alert {
			width: 75vw;
			height: 37.5vw;
			top: calc((var(--fullHeight) - 37.5vw) / 2);
			left: calc((100vw - 75vw) / 2);
			border-width: 0.2vw;
			box-shadow: 0.2vw 0.2vw 0.8vw hsla(0, 0%, 0%, 0.50);
		}
	
		.alert h1, .alert p {font-size: 3.2vw;}
		.alert h1 {	margin: 5.5vw 5.5vw 3.2vw;}
		.alert p {	margin: 0 5.5vw; line-height: 3.6vw;}
		
		.alert img {padding: 2.5vw; width: 4vw;}
	
		/*new version?*/
		
		:root {
			--top-position: calc((var(--fullHeight) - 47.5vw) / 2);
			--left-position: calc((100vw - 75vw) / 2);
			--alert-width: 75vw;
			--alert-height: 47.5vw;
		}
		
		.alert {
			width: 75vw;
			height: 47.5vw;
			top: calc((var(--fullHeight) - 47.5vw) / 2);
			left: calc((100vw - 75vw) / 2);
		}
	
		.alert h1, .alert p {font-size: 3.5vw;}
		.alert h1 {	margin: 7.5vw 6.5vw 3.2vw;}
		.alert p {	margin: 0 6.5vw 0 6.5vw; line-height: 4.5vw;}
		
		.alert img {padding: 2.5vw; width: 5vw;}
	
		
		
	}
	
	@media only screen and (min-width: 577px) and (max-width: 899px) {

		:root {
			--top-position: calc((var(--fullHeight) - 25vw) / 2);
			--left-position: calc((100vw - 50vw) / 2);
			--alert-width: 50vw;
			--alert-height: 25vw;
		}

		.alert {
			width: 50vw;
			height: 25vw;
			top: calc((var(--fullHeight) - 25vw) / 2);
			left: calc((100vw - 50vw) / 2);
			border-width: 0.17.5vw;
			box-shadow: 0.2vw 0.2vw 0.8vw hsla(0, 0%, 0%, 0.50);
		}
	
		.alert h1, .alert p {font-size: 2.2vw;}
		.alert h1 {	margin: 4.25vw 4vw 2.2vw;}
		.alert p {	margin: 0 4vw; line-height: 2.6vw;}
		
		.alert img {
			padding: 1.25vw;
			width: 2.75vw;
		}
		
		/*new version?*/
		
		:root {
			--top-position: calc((var(--fullHeight) - 27.75vw) / 2);
			--left-position: calc((100vw - 50vw) / 2);
			--alert-width: 50vw;
			--alert-height: 27.75vw;
		}

		.alert {
			width: 50vw;
			height: 27.75vw;
			top: calc((var(--fullHeight) - 27.75vw) / 2);
			left: calc((100vw - 50vw) / 2);
		}
	
		.alert h1, .alert p {font-size: 2vw;}
		.alert h1 {	margin: 4.5vw 4vw 2.2vw 3.8vw;}
		.alert p {	margin: 0 4vw; line-height: 2.75vw;}
		
		.alert img {
			padding: 1.25vw;
			width: 2.75vw;
		}
		
		
	}
	
	@media only screen and (min-width: 900px) {
		
		:root {
			--top-position: calc((var(--fullHeight) - 20vw) / 2);
			--left-position: calc((100vw - 40vw) / 2);
			--alert-width: 40vw;
			--alert-height: 20vw;
		}
		
	}

	#glitch-alert-container {
		display: none;
		position: fixed;
		width: var(--alert-width);
  		height: var(--alert-height);
		top: var(--top-position);
		left: var(--left-position);
		z-index: 1000;
	}

	#glitch-alert {
		position: absolute;
		width: var(--alert-width);
  		height: var(--alert-height);
		top: 0;
		left: 0;
		background: linear-gradient(180deg, rgba(255,255,255,1) 10%, rgba(251,251,215,1) 15%, rgba(94,147,161,1) 85%, rgba(94,147,161,1) 100%);
		background-size: 100% 300%;
		filter: brightness(.75);
		animation: gradient 1.75s ease-in-out infinite, animateFilter 1.75s ease-in-out infinite;
		filter: blur(0);
		pointer-events: none;
		mix-blend-mode: lighten;
	}
	
	#glitch-vid-container {animation: blurFilter  2s ease-in-out infinite, shift 2s ease-in-out infinite;}
	
	#alert-glitch {
		position: absolute;
  		object-fit: fill;
		object-position: center;
  		width: var(--alert-width);
  		height: var(--alert-height);
		top: 0;
		left: 0;
		z-index: 1;
	}
	
	.blur {animation: blurFilter  2s ease-in-out infinite;}
	.shift {animation: shift 2s ease-in-out infinite;}

	@keyframes blurFilter {
		0% {
			filter: blur(0);
		}
		13% {
			filter: blur(0);
		}
		15% {
			filter: blur(0.4vw);
		}	
		17% {
			filter: blur(0);
		}	
		63% {
			filter: blur(0);
		}
		65% {
			filter: blur(0.4vw);
		}	
		67% {
			filter: blur(0);
		}
		73% {
			filter: blur(0);
		}
		75% {
			filter: blur(0.4vw);
		}	
		77% {
			filter: blur(0);
		}
		100% {
			filter: blur(0);
		}
	}
	
	@keyframes shift {
		0% {
			transform: translate(0%, 0%);
		}
		14% {
			transform: translate(0%, 0%);
		}
		15% {
			transform: translate(-3%, 2%);
		}	
		16% {
			transform: translate(0%, 0%);
		}	
		64% {
			transform: translate(0%, 0%);
		}
		65% {
			transform: translate(-4%, 1%);
		}	
		66% {
			transform: translate(0%, 0%);
		}
		74% {
			transform: translate(0%, 0%);
		}
		75% {
			transform: translate(3%, -2%);
		}	
		76% {
			transform: translate(0%, 0%);
		}
		100% {
			transform: translate(0%, 0%);
		}
	}
	
	@keyframes gradient {
		0% {
			background-position: 0% 100%;
		}
		20% {
			background-position: 0% 70%;
		}	
		30% {
			background-position: 0% 90%;
		}
		60% {
			background-position: 0% 80%;
		}	
		70% {
			background-position: 0% 90%;
		}	
		100% {
			background-position: 0% 100%;
		}
	}

	@keyframes animateFilter {
		0% {
			filter: brightness(.75);
		}
		20% {
			filter: brightness(1);
		}	
		30% {
			filter: brightness(.8);
		}
		60% {
			filter: brightness(.9);
		}	
		70% {
			filter: brightness(.8);
		}	
		100% {
			filter: brightness(.75);
		}
	}
	
	.hide {display: none;}

	#alert-animation-1 {z-index: 999;}

	#aa1 {display: none; z-index: 1001;} 
	#aa2 {display: none; z-index: 1002; top: calc(var(--top-position) - 1%); left: calc(var(--left-position) - 1%);} 
	#aa3 {display: none; z-index: 1003; top: calc(var(--top-position) - 2%); left: calc(var(--left-position) - 2%);} 
	#aa4 {display: none; z-index: 1004; top: calc(var(--top-position) - 3%); left: calc(var(--left-position) - 3%);} 
	#aa5 {display: none; z-index: 1005; top: calc(var(--top-position) - 4%); left: calc(var(--left-position) - 4%);} 
	#aa6 {display: none; z-index: 1006; top: calc(var(--top-position) - 5%); left: calc(var(--left-position) - 5%);} 
	#aa7 {display: none; z-index: 1007; top: calc(var(--top-position) - 6%); left: calc(var(--left-position) - 6%);} 
	#aa8 {display: none; z-index: 1008; top: calc(var(--top-position) - 7%); left: calc(var(--left-position) - 7%);} 
	#aa9 {display: none; z-index: 1009; top: calc(var(--top-position) - 8%); left: calc(var(--left-position) - 8%);} 
	#aa10 {display: none; z-index: 1010; top: calc(var(--top-position) - 9%); left: calc(var(--left-position) - 9%);} 
	#aa11 {display: none; z-index: 1011; top: calc(var(--top-position) - 10%); left: calc(var(--left-position) - 10%);}
	#aa12 {display: none; z-index: 1012; top: calc(var(--top-position) - 12%); left: calc(var(--left-position) - 11%);}
	#aa13 {display: none; z-index: 1013; top: calc(var(--top-position) - 14%); left: calc(var(--left-position) - 12%);}
	#aa14 {display: none; z-index: 1014; top: calc(var(--top-position) - 16%); left: calc(var(--left-position) - 13%);}
	#aa15 {display: none; z-index: 1015; top: calc(var(--top-position) - 18%); left: calc(var(--left-position) - 14%);}
	#aa16 {display: none; z-index: 1016; top: calc(var(--top-position) - 20%); left: calc(var(--left-position) - 15%);}
	#aa17 {display: none; z-index: 1017; top: calc(var(--top-position) - 22%); left: calc(var(--left-position) - 16%);}
	#aa18 {display: none; z-index: 1018; top: calc(var(--top-position) - 24%); left: calc(var(--left-position) - 17%);}
	#aa19 {display: none; z-index: 1019; top: calc(var(--top-position) - 26%); left: calc(var(--left-position) - 18%);}
	#aa20 {display: none; z-index: 1020; top: calc(var(--top-position) - 28%); left: calc(var(--left-position) - 19%);}
	#aa21 {display: none; z-index: 1021; top: calc(var(--top-position) - 30%); left: calc(var(--left-position) - 20%);}
	#aa22 {display: none; z-index: 1022; top: calc(var(--top-position) - 32%); left: calc(var(--left-position) - 20%);}
	#aa23 {display: none; z-index: 1023; top: calc(var(--top-position) - 34%); left: calc(var(--left-position) - 20%);}
	#aa24 {display: none; z-index: 1024; top: calc(var(--top-position) - 36%); left: calc(var(--left-position) - 20%);}
	#aa25 {display: none; z-index: 1025; top: calc(var(--top-position) - 38%); left: calc(var(--left-position) - 20%);}
	#aa26 {display: none; z-index: 1026; top: calc(var(--top-position) - 40%); left: calc(var(--left-position) - 18%);}
	#aa27 {display: none; z-index: 1027; top: calc(var(--top-position) - 42%); left: calc(var(--left-position) - 16%);}
	#aa28 {display: none; z-index: 1028; top: calc(var(--top-position) - 44%); left: calc(var(--left-position) - 14%);}
	#aa29 {display: none; z-index: 1029; top: calc(var(--top-position) - 46%); left: calc(var(--left-position) - 12%);}
	#aa30 {display: none; z-index: 1030; top: calc(var(--top-position) - 46%); left: calc(var(--left-position) - 10%);}
	#aa31 {display: none; z-index: 1031; top: calc(var(--top-position) - 46%); left: calc(var(--left-position) - 8%);}
	#aa32 {display: none; z-index: 1032; top: calc(var(--top-position) - 46%); left: calc(var(--left-position) - 6%);}
	#aa33 {display: none; z-index: 1033; top: calc(var(--top-position) - 46%); left: calc(var(--left-position) - 4%);}
	#aa34 {display: none; z-index: 1034; top: calc(var(--top-position) - 44%); left: calc(var(--left-position) - 2%);}
	#aa35 {display: none; z-index: 1035; top: calc(var(--top-position) - 42%); left: calc(var(--left-position) - 0%);}
	#aa36 {display: none; z-index: 1036; top: calc(var(--top-position) - 40%); left: calc(var(--left-position) + 2%);}
	#aa37 {display: none; z-index: 1037; top: calc(var(--top-position) - 38%); left: calc(var(--left-position) + 4%);}
	#aa38 {display: none; z-index: 1038; top: calc(var(--top-position) - 36%); left: calc(var(--left-position) + 6%);}
	#aa39 {display: none; z-index: 1039; top: calc(var(--top-position) - 33%); left: calc(var(--left-position) + 9%);}
	#aa40 {display: none; z-index: 1040; top: calc(var(--top-position) - 30%); left: calc(var(--left-position) + 12%);}
	#aa41 {display: none; z-index: 1041; top: calc(var(--top-position) - 27%); left: calc(var(--left-position) + 15%);}
	#aa42 {display: none; z-index: 1042; top: calc(var(--top-position) - 24%); left: calc(var(--left-position) + 18%);}
	#aa43 {display: none; z-index: 1043; top: calc(var(--top-position) - 21%); left: calc(var(--left-position) + 21%);}
	#aa44 {display: none; z-index: 1044; top: calc(var(--top-position) - 18%); left: calc(var(--left-position) + 24%);}
	#aa45 {display: none; z-index: 1045; top: calc(var(--top-position) - 15%); left: calc(var(--left-position) + 27%);}
	#aa46 {display: none; z-index: 1046; top: calc(var(--top-position) - 12%); left: calc(var(--left-position) + 30%);}
	#aa47 {display: none; z-index: 1047; top: calc(var(--top-position) - 9%); left: calc(var(--left-position) + 33%);}
	#aa48 {display: none; z-index: 1048; top: calc(var(--top-position) - 6%); left: calc(var(--left-position) + 36%);}
	#aa49 {display: none; z-index: 1049; top: calc(var(--top-position) - 3%); left: calc(var(--left-position) + 39%);}
	#aa50 {display: none; z-index: 1050; top: calc(var(--top-position) - 0%); left: calc(var(--left-position) + 42%);}
	#aa51 {display: none; z-index: 1051; top: calc(var(--top-position) + 3%); left: calc(var(--left-position) + 45%);}
	#aa52 {display: none; z-index: 1052; top: calc(var(--top-position) + 6%); left: calc(var(--left-position) + 45%);}
	#aa53 {display: none; z-index: 1053; top: calc(var(--top-position) + 9%); left: calc(var(--left-position) + 45%);}
	#aa54 {display: none; z-index: 1054; top: calc(var(--top-position) + 12%); left: calc(var(--left-position) + 45%);}
	#aa55 {display: none; z-index: 1055; top: calc(var(--top-position) + 15%); left: calc(var(--left-position) + 42%);}
	#aa56 {display: none; z-index: 1056; top: calc(var(--top-position) + 18%); left: calc(var(--left-position) + 39%);}
	#aa57 {display: none; z-index: 1057; top: calc(var(--top-position) + 21%); left: calc(var(--left-position) + 36%);}
	#aa58 {display: none; z-index: 1058; top: calc(var(--top-position) + 24%); left: calc(var(--left-position) + 33%);}
	#aa59 {display: none; z-index: 1059; top: calc(var(--top-position) + 27%); left: calc(var(--left-position) + 30%);}
	#aa60 {display: none; z-index: 1060; top: calc(var(--top-position) + 30%); left: calc(var(--left-position) + 27%);}
	#aa61 {display: none; z-index: 1061; top: calc(var(--top-position) + 33%); left: calc(var(--left-position) + 24%);}
	#aa62 {display: none; z-index: 1062; top: calc(var(--top-position) + 36%); left: calc(var(--left-position) + 21%);}
	#aa63 {display: none; z-index: 1063; top: calc(var(--top-position) + 39%); left: calc(var(--left-position) + 18%);}
	#aa64 {display: none; z-index: 1064; top: calc(var(--top-position) + 42%); left: calc(var(--left-position) + 15%);}
	#aa65 {display: none; z-index: 1065; top: calc(var(--top-position) + 42%); left: calc(var(--left-position) + 12%);}
	#aa66 {display: none; z-index: 1066; top: calc(var(--top-position) + 42%); left: calc(var(--left-position) + 9%);}
	#aa67 {display: none; z-index: 1067; top: calc(var(--top-position) + 42%); left: calc(var(--left-position) + 6%);}
	#aa68 {display: none; z-index: 1068; top: calc(var(--top-position) + 39%); left: calc(var(--left-position) + 3%);}
	#aa69 {display: none; z-index: 1069; top: calc(var(--top-position) + 36%); left: calc(var(--left-position) + 0%);}
	#aa70 {display: none; z-index: 1070; top: calc(var(--top-position) + 33%); left: calc(var(--left-position) - 3%);}
	#aa71 {display: none; z-index: 1071; top: calc(var(--top-position) + 30%); left: calc(var(--left-position) - 6%);}
	#aa72 {display: none; z-index: 1072; top: calc(var(--top-position) + 27%); left: calc(var(--left-position) - 9%);}
	#aa73 {display: none; z-index: 1073; top: calc(var(--top-position) + 24%); left: calc(var(--left-position) - 12%);}
	#aa74 {display: none; z-index: 1074; top: calc(var(--top-position) + 21%); left: calc(var(--left-position) - 15%);}
	#aa75 {display: none; z-index: 1075; top: calc(var(--top-position) + 18%); left: calc(var(--left-position) - 18%);}
	#aa76 {display: none; z-index: 1076; top: calc(var(--top-position) + 15%); left: calc(var(--left-position) - 21%);}
	#aa77 {display: none; z-index: 1077; top: calc(var(--top-position) + 12%); left: calc(var(--left-position) - 24%);}
	#aa78 {display: none; z-index: 1078; top: calc(var(--top-position) + 9%); left: calc(var(--left-position) - 27%);}
	#aa79 {display: none; z-index: 1079; top: calc(var(--top-position) + 6%); left: calc(var(--left-position) - 30%);}
	#aa80 {display: none; z-index: 1080; top: calc(var(--top-position) + 3%); left: calc(var(--left-position) - 33%);}
	#aa81 {display: none; z-index: 1081; top: calc(var(--top-position) + 0%); left: calc(var(--left-position) - 33%);}
	#aa82 {display: none; z-index: 1082; top: calc(var(--top-position) - 3%); left: calc(var(--left-position) - 33%);}
	#aa83 {display: none; z-index: 1083; top: calc(var(--top-position) - 6%); left: calc(var(--left-position) - 33%);}
	#aa84 {display: none; z-index: 1084; top: calc(var(--top-position) - 9%); left: calc(var(--left-position) - 30%);}
	#aa85 {display: none; z-index: 1085; top: calc(var(--top-position) - 12%); left: calc(var(--left-position) - 27%);}
	#aa86 {display: none; z-index: 1086; top: calc(var(--top-position) - 15%); left: calc(var(--left-position) - 24%);}
	#aa87 {display: none; z-index: 1087; top: calc(var(--top-position) - 18%); left: calc(var(--left-position) - 21%);}
	#aa88 {display: none; z-index: 1088; top: calc(var(--top-position) - 21%); left: calc(var(--left-position) - 18%);}
	#aa89 {display: none; z-index: 1089; top: calc(var(--top-position) - 24%); left: calc(var(--left-position) - 15%);}
	#aa90 {display: none; z-index: 1090; top: calc(var(--top-position) - 27%); left: calc(var(--left-position) - 12%);}
	#aa91 {display: none; z-index: 1091; top: calc(var(--top-position) - 30%); left: calc(var(--left-position) - 9%);}
	#aa92 {display: none; z-index: 1092; top: calc(var(--top-position) - 33%); left: calc(var(--left-position) - 6%);}
	#aa93 {display: none; z-index: 1093; top: calc(var(--top-position) - 36%); left: calc(var(--left-position) - 3%);}
	#aa94 {display: none; z-index: 1094; top: calc(var(--top-position) - 39%); left: calc(var(--left-position) - 0%);}
	#aa95 {display: none; z-index: 1095; top: calc(var(--top-position) - 42%); left: calc(var(--left-position) + 3%);}
	#aa96 {display: none; z-index: 1096; top: calc(var(--top-position) - 45%); left: calc(var(--left-position) + 6%);}
	#aa97 {display: none; z-index: 1097; top: calc(var(--top-position) - 48%); left: calc(var(--left-position) + 9%);}
	#aa98 {display: none; z-index: 1098; top: calc(var(--top-position) - 51%); left: calc(var(--left-position) + 12%);}
	#aa99 {display: none; z-index: 1099; top: calc(var(--top-position) - 51%); left: calc(var(--left-position) + 15%);}
	#aa100 {display: none; z-index: 1100; top: calc(var(--top-position) - 51%); left: calc(var(--left-position) + 18%);}
	#aa101 {display: none; z-index: 1101; top: calc(var(--top-position) - 51%); left: calc(var(--left-position) + 21%);}
	#aa102 {display: none; z-index: 1102; top: calc(var(--top-position) - 48%); left: calc(var(--left-position) + 24%);}
	#aa103 {display: none; z-index: 1103; top: calc(var(--top-position) - 45%); left: calc(var(--left-position) + 27%);}
	#aa104 {display: none; z-index: 1104; top: calc(var(--top-position) - 42%); left: calc(var(--left-position) + 30%);}
	#aa105 {display: none; z-index: 1105; top: calc(var(--top-position) - 39%); left: calc(var(--left-position) + 33%);}
	#aa106 {display: none; z-index: 1106; top: calc(var(--top-position) - 36%); left: calc(var(--left-position) + 36%);}
	#aa107 {display: none; z-index: 1107; top: calc(var(--top-position) - 33%); left: calc(var(--left-position) + 39%);}
	#aa108 {display: none; z-index: 1108; top: calc(var(--top-position) - 30%); left: calc(var(--left-position) + 42%);}
	#aa109 {display: none; z-index: 1109; top: calc(var(--top-position) - 27%); left: calc(var(--left-position) + 45%);}
	#aa110 {display: none; z-index: 1110; top: calc(var(--top-position) - 24%); left: calc(var(--left-position) + 48%);}
	#aa111 {display: none; z-index: 1111; top: calc(var(--top-position) - 21%); left: calc(var(--left-position) + 51%);}
	#aa112 {display: none; z-index: 1112; top: calc(var(--top-position) - 18%); left: calc(var(--left-position) + 54%);}
	#aa113 {display: none; z-index: 1113; top: calc(var(--top-position) - 15%); left: calc(var(--left-position) + 57%);}
	#aa114 {display: none; z-index: 1114; top: calc(var(--top-position) - 12%); left: calc(var(--left-position) + 60%);}
	#aa115 {display: none; z-index: 1115; top: calc(var(--top-position) - 9%); left: calc(var(--left-position) + 63%);}
	#aa116 {display: none; z-index: 1116; top: calc(var(--top-position) - 6%); left: calc(var(--left-position) + 66%);}
	#aa117 {display: none; z-index: 1117; top: calc(var(--top-position) - 3%); left: calc(var(--left-position) + 69%);}
	#aa118 {display: none; z-index: 1118; top: calc(var(--top-position) - 0%); left: calc(var(--left-position) + 69%);}
	#aa119 {display: none; z-index: 1119; top: calc(var(--top-position) + 3%); left: calc(var(--left-position) + 69%);}
	#aa120 {display: none; z-index: 1120; top: calc(var(--top-position) + 6%); left: calc(var(--left-position) + 69%);}
	#aa121 {display: none; z-index: 1121; top: calc(var(--top-position) + 9%); left: calc(var(--left-position) + 66%);}
	#aa122 {display: none; z-index: 1122; top: calc(var(--top-position) + 12%); left: calc(var(--left-position) + 63%);}
	#aa123 {display: none; z-index: 1123; top: calc(var(--top-position) + 15%); left: calc(var(--left-position) + 60%);}
	#aa124 {display: none; z-index: 1124; top: calc(var(--top-position) + 18%); left: calc(var(--left-position) + 57%);}
	#aa125 {display: none; z-index: 1125; top: calc(var(--top-position) + 21%); left: calc(var(--left-position) + 54%);}
	#aa126 {display: none; z-index: 1126; top: calc(var(--top-position) + 24%); left: calc(var(--left-position) + 51%);}
	#aa127 {display: none; z-index: 1127; top: calc(var(--top-position) + 27%); left: calc(var(--left-position) + 48%);}
	#aa128 {display: none; z-index: 1128; top: calc(var(--top-position) + 30%); left: calc(var(--left-position) + 45%);}
	#aa129 {display: none; z-index: 1129; top: calc(var(--top-position) + 33%); left: calc(var(--left-position) + 42%);}
	#aa130 {display: none; z-index: 1130; top: calc(var(--top-position) + 36%); left: calc(var(--left-position) + 39%);}
	#aa131 {display: none; z-index: 1131; top: calc(var(--top-position) + 39%); left: calc(var(--left-position) + 36%);}
	#aa132 {display: none; z-index: 1132; top: calc(var(--top-position) + 42%); left: calc(var(--left-position) + 33%);}
	#aa133 {display: none; z-index: 1133; top: calc(var(--top-position) + 45%); left: calc(var(--left-position) + 30%);}
	#aa134 {display: none; z-index: 1134; top: calc(var(--top-position) + 48%); left: calc(var(--left-position) + 27%);}
	#aa135 {display: none; z-index: 1135; top: calc(var(--top-position) + 51%); left: calc(var(--left-position) + 24%);}
	#aa136 {display: none; z-index: 1136; top: calc(var(--top-position) + 54%); left: calc(var(--left-position) + 21%);}
	#aa137 {display: none; z-index: 1137; top: calc(var(--top-position) + 57%); left: calc(var(--left-position) + 18%);}
	#aa138 {display: none; z-index: 1138; top: calc(var(--top-position) + 60%); left: calc(var(--left-position) + 15%);}
	#aa139 {display: none; z-index: 1139; top: calc(var(--top-position) + 63%); left: calc(var(--left-position) + 12%);}
	#aa140 {display: none; z-index: 1140; top: calc(var(--top-position) + 66%); left: calc(var(--left-position) + 9%);}
	#aa141 {display: none; z-index: 1141; top: calc(var(--top-position) + 69%); left: calc(var(--left-position) + 6%);}
	#aa142 {display: none; z-index: 1142; top: calc(var(--top-position) + 69%); left: calc(var(--left-position) + 3%);}
	#aa143 {display: none; z-index: 1143; top: calc(var(--top-position) + 69%); left: calc(var(--left-position) + 0%);}
	#aa144 {display: none; z-index: 1144; top: calc(var(--top-position) + 69%); left: calc(var(--left-position) - 3%);}
	#aa145 {display: none; z-index: 1145; top: calc(var(--top-position) + 66%); left: calc(var(--left-position) - 6%);}
	#aa146 {display: none; z-index: 1146; top: calc(var(--top-position) + 63%); left: calc(var(--left-position) - 9%);}
	#aa147 {display: none; z-index: 1147; top: calc(var(--top-position) + 60%); left: calc(var(--left-position) - 12%);}
	#aa148 {display: none; z-index: 1148; top: calc(var(--top-position) + 57%); left: calc(var(--left-position) - 15%);}
	#aa149 {display: none; z-index: 1149; top: calc(var(--top-position) + 54%); left: calc(var(--left-position) - 18%);}
	#aa150 {display: none; z-index: 1150; top: calc(var(--top-position) + 51%); left: calc(var(--left-position) - 21%);}
	#aa151 {display: none; z-index: 1151; top: calc(var(--top-position) + 48%); left: calc(var(--left-position) - 24%);}
	#aa152 {display: none; z-index: 1152; top: calc(var(--top-position) + 45%); left: calc(var(--left-position) - 27%);}
	#aa153 {display: none; z-index: 1153; top: calc(var(--top-position) + 42%); left: calc(var(--left-position) - 30%);}
	#aa154 {display: none; z-index: 1154; top: calc(var(--top-position) + 39%); left: calc(var(--left-position) - 33%);}
	#aa155 {display: none; z-index: 1155; top: calc(var(--top-position) + 36%); left: calc(var(--left-position) - 36%);}
	#aa156 {display: none; z-index: 1156; top: calc(var(--top-position) + 33%); left: calc(var(--left-position) - 39%);}
	#aa157 {display: none; z-index: 1157; top: calc(var(--top-position) + 30%); left: calc(var(--left-position) - 42%);}
	#aa158 {display: none; z-index: 1158; top: calc(var(--top-position) + 27%); left: calc(var(--left-position) - 45%);}
	#aa159 {display: none; z-index: 1159; top: calc(var(--top-position) + 24%); left: calc(var(--left-position) - 48%);}
	#aa160 {display: none; z-index: 1160; top: calc(var(--top-position) + 21%); left: calc(var(--left-position) - 51%);}
	#aa161 {display: none; z-index: 1161; top: calc(var(--top-position) + 18%); left: calc(var(--left-position) - 54%);}
	#aa162 {display: none; z-index: 1162; top: calc(var(--top-position) + 15%); left: calc(var(--left-position) - 57%);}
	#aa163 {display: none; z-index: 1163; top: calc(var(--top-position) + 12%); left: calc(var(--left-position) - 60%);}
	#aa164 {display: none; z-index: 1164; top: calc(var(--top-position) + 9%); left: calc(var(--left-position) - 63%);}
	#aa165 {display: none; z-index: 1165; top: calc(var(--top-position) + 6%); left: calc(var(--left-position) - 66%);}
	#aa166 {display: none; z-index: 1166; top: calc(var(--top-position) + 3%); left: calc(var(--left-position) - 69%);}
	#aa167 {display: none; z-index: 1167; top: calc(var(--top-position) + 0%); left: calc(var(--left-position) - 72%);}
	#aa168 {display: none; z-index: 1168; top: calc(var(--top-position) - 3%); left: calc(var(--left-position) - 75%);}
	#aa169 {display: none; z-index: 1169; top: calc(var(--top-position) - 6%); left: calc(var(--left-position) - 75%);}
	#aa170 {display: none; z-index: 1170; top: calc(var(--top-position) - 9%); left: calc(var(--left-position) - 75%);}
	#aa171 {display: none; z-index: 1171; top: calc(var(--top-position) - 12%); left: calc(var(--left-position) - 75%);}
	#aa172 {display: none; z-index: 1172; top: calc(var(--top-position) - 15%); left: calc(var(--left-position) - 72%);}
	#aa173 {display: none; z-index: 1173; top: calc(var(--top-position) - 18%); left: calc(var(--left-position) - 69%);}
	#aa174 {display: none; z-index: 1174; top: calc(var(--top-position) - 21%); left: calc(var(--left-position) - 66%);}
	#aa175 {display: none; z-index: 1175; top: calc(var(--top-position) - 24%); left: calc(var(--left-position) - 63%);}
	#aa176 {display: none; z-index: 1176; top: calc(var(--top-position) - 27%); left: calc(var(--left-position) - 60%);}
	#aa177 {display: none; z-index: 1177; top: calc(var(--top-position) - 30%); left: calc(var(--left-position) - 57%);}
	#aa178 {display: none; z-index: 1178; top: calc(var(--top-position) - 33%); left: calc(var(--left-position) - 54%);}
	#aa179 {display: none; z-index: 1179; top: calc(var(--top-position) - 36%); left: calc(var(--left-position) - 51%);}
	#aa180 {display: none; z-index: 1180; top: calc(var(--top-position) - 39%); left: calc(var(--left-position) - 48%);}
	#aa181 {display: none; z-index: 1181; top: calc(var(--top-position) - 42%); left: calc(var(--left-position) - 45%);}
	#aa182 {display: none; z-index: 1182; top: calc(var(--top-position) - 45%); left: calc(var(--left-position) - 42%);}
	#aa183 {display: none; z-index: 1183; top: calc(var(--top-position) - 48%); left: calc(var(--left-position) - 39%);}
	#aa184 {display: none; z-index: 1184; top: calc(var(--top-position) - 51%); left: calc(var(--left-position) - 36%);}
	#aa185 {display: none; z-index: 1185; top: calc(var(--top-position) - 54%); left: calc(var(--left-position) - 33%);}
	#aa186 {display: none; z-index: 1186; top: calc(var(--top-position) - 57%); left: calc(var(--left-position) - 30%);}
	#aa187 {display: none; z-index: 1187; top: calc(var(--top-position) - 60%); left: calc(var(--left-position) - 27%);}
	#aa188 {display: none; z-index: 1188; top: calc(var(--top-position) - 63%); left: calc(var(--left-position) - 24%);}
	#aa189 {display: none; z-index: 1189; top: calc(var(--top-position) - 66%); left: calc(var(--left-position) - 21%);}
	#aa190 {display: none; z-index: 1190; top: calc(var(--top-position) - 69%); left: calc(var(--left-position) - 18%);}
	#aa191 {display: none; z-index: 1191; top: calc(var(--top-position) - 72%); left: calc(var(--left-position) - 15%);}
	#aa192 {display: none; z-index: 1192; top: calc(var(--top-position) - 75%); left: calc(var(--left-position) - 12%);}
	#aa193 {display: none; z-index: 1193; top: calc(var(--top-position) - 78%); left: calc(var(--left-position) - 9%);}
	#aa194 {display: none; z-index: 1194; top: calc(var(--top-position) - 81%); left: calc(var(--left-position) - 6%);}
	#aa195 {display: none; z-index: 1195; top: calc(var(--top-position) - 84%); left: calc(var(--left-position) - 3%);}
	#aa196 {display: none; z-index: 1196; top: calc(var(--top-position) - 87%); left: calc(var(--left-position) - 0%);}
	#aa197 {display: none; z-index: 1197; top: calc(var(--top-position) - 90%); left: calc(var(--left-position) + 3%);}
	#aa198 {display: none; z-index: 1198; top: calc(var(--top-position) - 93%); left: calc(var(--left-position) + 6%);}
	#aa199 {display: none; z-index: 1199; top: calc(var(--top-position) - 96%); left: calc(var(--left-position) + 9%);}
	#aa200 {display: none; z-index: 1200; top: calc(var(--top-position) - 99%); left: calc(var(--left-position) + 12%);}

	#caption-grow {
		display: none;
		position: fixed;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		font-size: 2vw;
		line-height: 1.4;
		width: 16vw;
		height: 3vw;
		left: 42vw;
		bottom: 5vw;
		color: hsla(51,59%,68%,1.00);
		background-color: black;
		opacity: 0;
		text-align: center;
		transform-origin: bottom right;
		will-change: transform opacity;
		animation: caption-fade 0.1s linear, caption-rotate 3.5s linear, caption-scale 3.5s linear;
		animation-fill-mode: forwards;
		pointer-events: none;
		z-index: 9999; 
	}
	
	@keyframes caption-fade {0% {opacity: 0} 100% {opacity: 1}}

	@keyframes caption-rotate {
		0% {transform: translate(0%) rotate(0deg)} 
		75% {transform: translate(0%) rotate(0deg)} 
		100% {transform: translate(300%, -50%) rotate(90deg)}
	}

	@keyframes caption-scale {
		0% {width: 16vw} 
		75% {width: 16vw} 
		100% {width: var(--fullHeight)}
	}

	#caption-block {
		display: none;
		position: fixed; 
		height: 150vh; 
		width: 40vw; 
		top: -20vh; 
		right: -50vw;
		background-color: black;
		transform: rotate(10deg);
		transform-origin: bottom center;
		will-change: transform;
		animation: caption-swipe 2.4s ease-in; 
		animation-fill-mode: forwards;
		z-index: 9999;
	}

	#caption-block2 {
		display: none;
		position: fixed; 
		height: 150vh; 
		width: 70vw; 
		top: -20vh; 
		right: -70vw;
		background-color: black;
		transform: translateX(0%);
		will-change: transform;
		animation: push-left 3s ease-in-out; 
		animation-fill-mode: forwards;
		z-index: 9999;
	}

	.caption-block-span {
		position: absolute;
		font-family: 'Montserrat', Helvetica, Verdana, sans-serif;
		text-align: center;
		font-size: 5vw;
		color: hsla(51,59%,68%,1.00);
		width: 100vw;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(90deg);
	}

	@keyframes caption-swipe {
		0% {transform: translateX(0%) rotate(10deg)} 
		75% {transform: translateX(-350%) rotate(-10deg)} 
		100% {transform: translateX(-500%) rotate(-5deg)}
	}


	.push-left { will-change: transform; transform: translateX(0%); animation: push-left 3s ease-in-out; animation-fill-mode: forwards;}
	@keyframes push-left {0% {transform: translateX(0%)} 100% {transform: translateX(-600%)}}

.push-left-10ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 10ms; animation-fill-mode: forwards;}
.push-left-20ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 20ms; animation-fill-mode: forwards;}
.push-left-30ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 30ms; animation-fill-mode: forwards;}
.push-left-50ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 50ms; animation-fill-mode: forwards;}
.push-left-70ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 70ms; animation-fill-mode: forwards;}
.push-left-90ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 90ms; animation-fill-mode: forwards;}
.push-left-110ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 110ms; animation-fill-mode: forwards;}
.push-left-130ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 130ms; animation-fill-mode: forwards;}
.push-left-150ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 150ms; animation-fill-mode: forwards;}
.push-left-170ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 170ms; animation-fill-mode: forwards;}
.push-left-190ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 190ms; animation-fill-mode: forwards;}
.push-left-200ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 200ms; animation-fill-mode: forwards;}
.push-left-210ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 210ms; animation-fill-mode: forwards;}
.push-left-220ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 220ms; animation-fill-mode: forwards;}
.push-left-230ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 230ms; animation-fill-mode: forwards;}
.push-left-240ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 240ms; animation-fill-mode: forwards;}
.push-left-250ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 250ms; animation-fill-mode: forwards;}
.push-left-260ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 260ms; animation-fill-mode: forwards;}
.push-left-270ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 270ms; animation-fill-mode: forwards;}
.push-left-280ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 280ms; animation-fill-mode: forwards;}
.push-left-290ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 290ms; animation-fill-mode: forwards;}
.push-left-300ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 300ms; animation-fill-mode: forwards;}
.push-left-310ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 310ms; animation-fill-mode: forwards;}
.push-left-320ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 320ms; animation-fill-mode: forwards;}
.push-left-330ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 330ms; animation-fill-mode: forwards;}
.push-left-340ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 340ms; animation-fill-mode: forwards;}
.push-left-350ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 350ms; animation-fill-mode: forwards;}
.push-left-360ms {  will-change: transform; animation: push-left 3s ease-in-out; animation-delay: 360ms; animation-fill-mode: forwards;}


	@media only screen and (max-width: 576px) {

		
		#caption-grow {
			font-size: 4.5vw; 
			width: 38vw;
			height: 7vw;
			left: 31vw; 
			bottom: 15vh;
		}
			
		@keyframes caption-scale {
			0% {width: 38vw} 
			75% {width: 38vw} 
			100% {width: var(--fullHeight)}
		}
		
		#caption-block {
			height: 150vh; 
			width: 60vw; 
			top: -25vh; 
			right: -60vw;
		}

		#caption-block {
			display: none;
			position: fixed; 
			height: 150vh; 
			width: 82.5vw; 
			top: -20vh; 
			right: -82.5vw;
			background-color: black;
			transform: translateX(0%);
			will-change: transform;
			animation: caption-swipe 3.3s ease-in-out; 
			animation-fill-mode: forwards;
			z-index: 9999;
		}
		
		.caption-block-span {
			font-size: 10vw;
			width: 150vw;
		}
		
	}

	@media only screen and (min-width: 577px) and (max-width: 899px) {

		#caption-grow {
			font-size: 3.2vw;
			width: 24vw;
			height: 5vw;
			left: 38vw;
			bottom: 10vh;
		}
		
		@keyframes caption-scale {
			0% {width: 24vw} 
			75% {width: 24vw} 
			100% {width: var(--fullHeight)}
		}
		
		#caption-block {
			height: 150vh; 
			width: 50vw; 
			top: -25vh; 
			right: -50vw;
		}

		.caption-block-span {
			font-size: 10vw;
			width: 150vw;
			top: 50%;
			left: 50%;
		}

	}

	#alert-animation-2 {position: fixed; top: 0; left: 0; z-index: 999;}

	.aaa-container-left {
		position: fixed; 
		height: var(--alert-height); 
		width: calc(5 * var(--alert-width));
		left: calc(-2vw - (5 * var(--alert-width)));
		will-change: transform;
	}

	.aaa-container-right {
		position: fixed; 
		height: var(--alert-height); 
		width: calc(5 * var(--alert-width));
		right: calc(-2vw - (5 * var(--alert-width)));
		will-change: transform;
	}

	#aaa-container-1 {display: none; top: calc((var(--alert-height) / 2) - var(--alert-height));}
	#aaa-container-2 {display: none; top: calc((var(--alert-height) / 2));}

	#aaa-container-3 {display: none; bottom: calc((var(--alert-height) / 2) - var(--alert-height));}
	#aaa-container-4 {display: none; bottom: calc((var(--alert-height) / 2));}

	#aaa-container-5 {
		display: none; 
		top: calc(105vh + (var(--alert-height)));
		transform: rotate(-90deg) translateX(0%); 
		transform-origin: right top; 
	}

	#aaa-container-6 {
		display: none; 
		right: 0;
		top: calc(-5vh - (var(--alert-height))); 
		transform: rotate(90deg) translateX(0%); 
		transform-origin: right top; 
	}

	.aaa1 {position: absolute; top: 0; left: 0;}
	.aaa2 {position: absolute; top: 0; left: var(--alert-width);}
	.aaa3 {position: absolute; top: 0; left: calc(var(--alert-width) * 2);}
	.aaa4 {position: absolute; top: 0; left: calc(var(--alert-width) * 3);}
	.aaa5 {position: absolute; top: 0; left: calc(var(--alert-width) * 4);}

	.move-right {animation: move-right 1.5s ease-in-out forwards; } .move-left {animation: move-left 1.5s ease-in-out forwards; }
	.move-up {animation: move-up 1.5s ease-in-out forwards; } .move-down {animation: move-down 1.5s ease-in-out forwards; }

	@keyframes move-right {0% {transform: translateX(0%)} 100% {transform: translateX(calc(10 * var(--alert-width)))}}
	@keyframes move-left {0% {transform: translateX(0%)} 100% {transform: translateX(calc(-10 * var(--alert-width)))}}
	@keyframes move-up {0% {transform: rotate(-90deg) translateX(0%)} 100% {transform: rotate(-90deg) translateX(calc(10 * var(--alert-width)))}}
	@keyframes move-down {0% {transform: rotate(90deg) translateX(0%)} 100% {transform: rotate(90deg) translateX(calc(10 * var(--alert-width)))}}


/* SECTION AND VOICE IDS */	
	
	#start {} #section-1 {display: none;} #section-2 {display: none;} #section-3 {display: none;} 

	#loading-screen {display: none;} #end {display: none;}
	
	#a1 {display: none;} #a2 {display: none;} #a3 {display: none;} #a4 {display: none;} #a5 {display: none;} #a6 {display: none;} 
	
	#c1 {display: none;} #c2 {display: none;} #c3 {display: none;} #c4 {display: none;} #c5 {display: none;} #c6 {display: none;}
	#c7 {display: none;} #c8 {display: none;} #c9 {display: none;} #c10 {display: none;} #c11 {display: none;} #c12 {display: none;}
	#c13 {display: none;} #c14 {display: none;} #c15 {display: none;} #c16 {display: none;} #c17 {display: none;} #c18 {display: none;}
	#c19 {display: none;} #c20 {display: none;} #c21 {display: none;} #c22 {display: none;} #c23 {display: none;} #c24 {display: none;} 
	#c25 {display: none;} #c26 {display: none;} #c27 {display: none;} #c28 {display: none;} #c29 {display: none;} #c30 {display: none;} 
	#c31 {display: none;} #c32 {display: none;} #c33 {display: none;} #c34 {display: none;} #c35 {display: none;} #c36 {display: none;} 
	#c37 {display: none;} #c38 {display: none;} #c39 {display: none;} #c40 {display: none;} #c41 {display: none;} #c42 {display: none;} 
	#c43 {display: none;} #c44 {display: none;} #c45 {display: none;} #c46 {display: none;} #c47 {display: none;} #c48 {display: none;} 
	#c49 {display: none;} #c50 {display: none;} #c51 {display: none;} #c52 {display: none;} #c53 {display: none;} #c54 {display: none;} 
	#c55 {display: none;} #c56 {display: none;} #c57 {display: none;} #c58 {display: none;} #c59 {display: none;} #c60 {display: none;} 
	#c61 {display: none;} #c62 {display: none;} #c63 {display: none;} #c64 {display: none;} #c65 {display: none;} #c66 {display: none;} 
	#c67 {display: none;} #c68 {display: none;} #c69 {display: none;} #c70 {display: none;} #c71 {display: none;} #c72 {display: none;} 
	#c73 {display: none;} #c74 {display: none;} #c75 {display: none;} #c76 {display: none;} #c77 {display: none;} #c78 {display: none;} 
	#c79 {display: none;} #c80 {display: none;} #c81 {display: none;} #c82 {display: none;} #c83 {display: none;} #c84 {display: none;} 
	#c85 {display: none;} #c86 {display: none;} #c87 {display: none;} #c88 {display: none;} #c89 {display: none;} #c90 {display: none;} 
	#c91 {display: none;} #c92 {display: none;} #c93 {display: none;} #c94 {display: none;} #c95 {display: none;} #c96 {display: none;} 
	#c97 {display: none;} #c98 {display: none;} #c99 {display: none;} #c100 {display: none;} #c101 {display: none;} #c102 {display: none;} 
	#c103 {display: none;} #c104 {display: none;} #c105 {display: none;} #c106 {display: none;} #c107 {display: none;} #c108 {display: none;} 
	#c109 {display: none;} #c110 {display: none;} #c111 {display: none;} #c112 {display: none;} #c113 {display: none;} #c114 {display: none;} 
	#c115 {display: none;} #c116 {display: none;} #c117 {display: none;} #c118 {display: none;} #c119 {display: none;} #c120 {display: none;}

	#q1 {} #q1a {display: none;} #q2 {display: none;} #q2a {display: none;} #q3 {display: none;} #q4 {display: none;} #q5 {display: none;} 
	#q6 {display: none;} #q7 {display: none;} #q8 {display: none;} #q9 {display: none;} #q10 {display: none;} #q11 {display: none;} 
	#q12 {display: none;} #q13 {display: none;} #q14 {display: none;} #q15 {display: none;} #q16 {display: none;} #q17 {display: none;} 
	#q18 {display: none;} #q19 {display: none;} #q20 {display: none;} #q21 {display: none;} #q22 {display: none;} #q23 {display: none;} 
	#q24 {display: none;} #q25 {display: none;} #q26 {display: none;} #q27 {display: none;} #q28 {display: none;} #q29 {display: none;} 
	#q30 {display: none;} #q31 {display: none;} #q32 {display: none;} #q33 {display: none;} #q34 {display: none;} #q35 {display: none;} 
	#q36 {display: none;} #q37 {display: none;} #q38 {display: none;} #q39 {display: none;} #q40 {display: none;} #q41 {display: none;} 
	#q42 {display: none;} #q43 {display: none;} #q44 {display: none;} #q45 {display: none;} #q46 {display: none;} #q47 {display: none;} 
	#q48 {display: none;} #q49 {display: none;} #q50 {display: none;} #q51 {display: none;} #q52 {display: none;} #q53 {display: none;} 
	#q54 {display: none;} #q55 {display: none;} #q56 {display: none;} #q57 {display: none;} #q58 {display: none;} #q59 {display: none;} 
	#q60 {display: none;} #q61 {display: none;} #q62 {display: none;} #q63 {display: none;} #q64 {display: none;} #q65 {display: none;} 
	#q66 {display: none;} #q67 {display: none;} #q68 {display: none;} #q69 {display: none;} #q70 {display: none;} #q71 {display: none;} 
	#q72 {display: none;} #q73 {display: none;} #q74 {display: none;} #q75 {display: none;} #q76 {display: none;} #q77 {display: none;} 
	#q78 {display: none;} #q79 {display: none;} #q80 {display: none;} #q81 {display: none;} #q82 {display: none;} #q83 {display: none;} 
	#q84 {display: none;} #q85 {display: none;} #q86 {display: none;} #q87 {display: none;} #q88 {display: none;} #q89 {display: none;} 
	#q90 {display: none;} #q91 {display: none;} #q92 {display: none;} #q93 {display: none;} #q94 {display: none;} #q95 {display: none;}
	#q96 {display: none;} #c97 {display: none;} #q98 {display: none;} #q99 {display: none;} #q100 {display: none;} #q101 {display: none;} 
	#q102 {display: none;} #q103 {display: none;} #q104 {display: none;} #q105 {display: none;} #q106 {display: none;} #q107 {display: none;}
	#q108 {display: none;} #q109 {display: none;} #q110 {display: none;} #q111 {display: none;} #q112 {display: none;} #q113 {display: none;} 
	#q114 {display: none;} #q115 {display: none;} #q116 {display: none;} #q117 {display: none;} #q118 {display: none;} #q119 {display: none;}

	#v1 {display: none;} #v2 {display: none;} #v3 {display: none;} #v4 {display: none;} #v5 {display: none;} #v6 {display: none;} 
	#v7 {display: none;} #v8 {display: none;} #v9 {display: none;} #v10 {display: none;} #v11 {display: none;} #v12 {display: none;} 
	#v13 {display: none;} #v14 {display: none;} #v15 {display: none;} #v16 {display: none;} #v17 {display: none;} #v18 {display: none;} 

/* LOAD IMAGES */

	.img-loader {
		display: none;
		position: fixed;
		top: -999px;
		left: -999px;	
		width: 10px;
		height: 10px;
		overscroll: none;
		pointer-events: none;
	}	
	
#imgl-1 {background-image: url("images/bird_construction_blink.gif");}
#imgl-2 {background-image: url("images/nash.png");}
#imgl-3 {background-image: url("images/ann.png");}
#imgl-4 {background-image: url("images/kevin.png");}
#imgl-5 {background-image: url("images/dexterra_img.jpg");} 
#imgl-6 {background-image: url("images/dexterra_intro.gif");} 
#imgl-7 {background-image: url("images/dexterra_logo.png");} 
#imgl-8 {background-image: url("images/ad-close.png");} 
#imgl-9 {background-image: url("images/accent.png");} 
#imgl-10 {background-image: url("images/glitch_butterfly.gif");} 
#imgl-11 {background-image: url("images/glitch_bird_intro.gif");} 


@media only screen and (max-width: 576px) {
	
	#imgl-1 {background-image: url("images/bird_construction_small.gif");}
	#imgl-7 {background-image: url("images/dexterra_small.png");} 
	#imgl-8 {background-image: url("images/ad-close-mobile.png");} 
	#imgl-10 {background-image: url("images/glitch_butterfly_small.gif");} 
	
}