/*
Author: Greg Wohlwend
Author URI: http://aeiowu.com
*/

body, html
{
	height: 100%;
	touch-action: none;
}

body
{
	position: relative;

	background: black;
	margin: 0;
	font-size: 62.5%;

	font-family: "avenir-next-lt-pro-condensed", sans-serif;
	font-weight: 800;
	font-style: normal;
	
	color: #FCFAE8;

	-webkit-font-smoothing: antialiased;

	overflow: hidden;

	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported in all major browsers */
}
	h4
	{
		padding: 0;
		line-height: 0vh;
		font-size: 120vh;
		text-transform: uppercase;
		opacity: 10%;
	}

	h1, h2, h3
	{
		margin-top: 140px;
		padding: 0;
		line-height: 0px;
		font-size: 320px;
		text-transform: uppercase;
	}

	h2
	{
		margin-top: 80px;
		font-size: 70px;
	}

	h3
	{
		margin-top: 0px;
		padding: 28px;
		font-size: 28px;
		line-height: 28px;
	}

	#wrapper
	{
		

		position: absolute;
		top: -111vh;
		left: 0;
		
		height: 140vh;
		white-space: nowrap;
		will-change: width;

		z-index: -1000;
	}

	#marquee
	{
		display: inline-block;
		padding-left: 110vw;

		animation: slideX 60s linear infinite;
		animation-delay: -10s;
		will-change: transform;

		cursor: default;

		z-index: -1000;
	}

	@keyframes slideX
	{
		0% { transform: translateX(0); }
		100% { transform: translateX(-115%); }
	}

	#mainContainer
	{
		width: 100vw;
		height: 100vh;

		margin: 0 auto;
	}
	
		#phoneContainer
		{
/*			outline: 2px solid red;*/
		}

			#normalContainer
			{
				position: absolute;
			}

				.normalphonegraphic
				{
					position: relative;
					margin: -222px 0 0 -240px;

					width: 460px;
					height: 625px;

					background: url("images/PhoneGraphicNormalLong.svg");
					background-size: 460px 625px;
					background-repeat: no-repeat;

					z-index: 2;
				}

				.normalphonemask, .upsidedownphonemask, .smallnormalphonemask, .tinyupsidedownphonemask
				{
					position: relative;
					top: 60px;
					left: 40px;

					overflow: hidden;
					white-space: nowrap;
					width: 160px;
					height: 280px;

					-webkit-mask-image: url(images/phonemask.svg);
					-webkit-mask-size: 160px 280px;
					-webkit-mask-repeat: no-repeat;
					mask-image: url(images/phonemask.svg);
					mask-size: 160px 280px;
					mask-repeat: no-repeat;

					background-color: #FF66B3;

					z-index: 1;
				}

				#normalMarquee
				{
					color: #261C83;

					display: inline-block;
					padding-left: 320px;

					animation: slideX 3s linear infinite;

					cursor: default;
					z-index: 0;
				}

			#upsideDownContainer
			{
				position: absolute;

				width: 220px;
				height: 345px;
			}

				.upsidedownphonegraphic
				{
					position: relative;
					margin: -735px 0 0 20px;

					width: 220px;
					height: 800px;

					background: url("images/PhoneGraphicLong.svg");
					background-size: 220px 800px;
					background-repeat: no-repeat;

					z-index: 2;
				}

				.upsidedownphonemask
				{
					background-color: #FFCD00;
				}

				#upsideDownMarquee
				{
					color: #000000;

					display: inline-block;
					padding-left: 320px;

					animation: slideX 6s linear infinite;

					cursor: default;
					z-index: 0;
				}

			#landscapeContainer
			{
				position: absolute;

				width: 220px;
				height: 345px;

				text-align: center;
			}

				.landscapephonegraphic
				{
					position: relative;
					margin: -200px 0 0 -40px;

					width: 325px;
					height: 780px;

					background: url("images/phonelandscapeblinkerLong.svg");
					background-size: 325px 780px;
					background-repeat: no-repeat;

					z-index: 2;
				}

				.landscapephonemask, .landscapesignboardphonemask
				{
					position: relative;

					overflow: hidden;
					white-space: nowrap;
					width: 280px;
					height: 160px;

					-webkit-mask-image: url(images/phonemasklandscape.svg);
					-webkit-mask-size: 280px 160px;
					-webkit-mask-repeat: no-repeat;
					mask-image: url(images/phonemasklandscape.svg);
					mask-size: 280px 160px;
					mask-repeat: no-repeat;

					background-color: #66DE33;

					z-index: 1;
				}

				#landscapeFlash
				{
					color: #FF44DE;

					display: inline-block;
					padding-left: 320px;

					cursor: default;
					z-index: 0;
				}

				#rotating-string
				{
					color: #CF44AE;
				}

			#landscapeSignboardContainer
			{
				position: absolute;

				width: 460px;
				height: 625px;
			}

				.landscapesignboardphonegraphic
				{
					position: relative;
					margin: -180px 0 0 0px;

					width: 625px;
					height: 460px;

					background: url("images/PhoneGraphicNormalLongLandscape.svg");
					background-size: 625px 460px;
					background-repeat: no-repeat;

					z-index: 2;
				}

				.landscapesignboardphonemask
				{
					background-color: #000000;
				}

				#landscapeSignboard
				{
					color: #FAFCE8;

					cursor: default;
					z-index: 0;
				}


			#smallContainer
			{
				position: absolute;
			}

				.smallnormalphonemask
				{
					background-color: #3344DE;
				}

				#smallMarquee
				{
					color: #22DE23;

					display: inline-block;
					padding-left: 320px;

					animation: slideX 4s linear infinite;

					cursor: default;
					z-index: 0;
				}

			#tinyContainer
			{
				position: absolute;

				z-index: -222;
			}

				.tinyupsidedownphonemask
				{
					background-color: #000000;
				}

				#tinyMarquee
				{
					color: #DE0000;

					display: inline-block;
					padding-left: 320px;

					animation: slideX 4s linear infinite;

					cursor: default;
					z-index: 0;
				}

					.mirror
					{
						display: inline-block;
						transform: scaleX(-1);
						transform: scaleY(-1);
					}

		@keyframes slideX
		{
			0% { transform: translateX(0); }
			100% { transform: translateX(-115%); }
		}


		#links
		{
			position: absolute;
			top: 150px;
			left: 50%;

			transform-origin: center center;
			transform: translate(-50%, -50%) scale(0.5);

			display: block;

			text-align: center;

			z-index: 500;
		}

			#google
			{
				position: relative;

				width: 240px;
				height: 80px;

				margin: 0 auto;
				text-align: center;
				align-items: center;

				background: url("images/GooglePlayButtonBlack.svg");
				background-size: 240px 80px;

				z-index: 500;
			}

			#apple
			{
				position: relative;

				width: 240px;
				height: 80px;

				margin: 0 auto;
				text-align: center;
				align-items: center;

				background: url("images/AppleStoreButtonBlack.svg");
				background-size: 240px 80px;

				z-index: 500;
			}

	/* PORTRAIT — 375x812 */
	@media (orientation: portrait)
	{
		#phoneContainer
		{
			position: absolute;
			width: 375px;
			height: 812px;
			top: 50%;
			left: 50%;
			transform-origin: center center;
			transform: translate(-50%, -50%) scale(var(--scene-scale));
		}

		#upsideDownContainer
		{
			top: 20px;
			left: -60px;
			transform: rotate(-10deg) scale(0.4);
		}

		#normalContainer
		{
			top: 220px;
			left: -60px;
			transform: rotate(15deg) scale(0.65);
		}

		#landscapeContainer
		{
			top: 70px;
			left: 140px;
			transform: rotate(-2deg) scale(0.65);
		}
			.landscapephonegraphic
			{
				position: relative;
				margin: -200px 0 0 -5px;

				width: 600px;
				height: 481px;

				background: url("images/phonelandscapeblinkerLongPortrait.svg");
				background-size: 600px 481px;
				background-repeat: no-repeat;

				z-index: 2;
			}
			#landscapeFlash
			{
				padding-left: 620px;
			}

		#landscapeSignboardContainer
		{
			bottom: -150px;
			right: -100px;
			transform: rotate(15deg) scale(0.5);
		}

		#smallContainer
		{
			bottom: -220px;
			left: 0px;
			transform: rotate(-3deg) scale(0.35);
		}

		#tinyContainer
		{
			bottom: -20px;
			right: -80px;
			transform: rotate(160deg) scale(0.2);
		}

		#links
		{
			position: absolute;
			top: 40%;
			left: 50%;

			transform-origin: center center;
			transform: translate(-50%, -50%) scale(0.5);

			display: block;

			text-align: center;

			z-index: 500;
		}
	}

	/* LANDSCAPE — 1060x780 */
	@media (orientation: landscape)
	{
		#phoneContainer
		{
			position: absolute;
			width: 1060px;
			height: 780px;
			top: 50%;
			left: 50%;
			transform-origin: center center;
			transform: translate(-50%, -50%) scale(var(--scene-scale));
		}

		#upsideDownContainer
		{
			top: 0px;
			left: 60px;
			transform: rotate(-3deg) scale(0.65);
		}

		#normalContainer
		{
			bottom: -125px;
			left: 250px;
			transform: rotate(6deg) scale(1);
		}

		#landscapeContainer
		{
			bottom: 320px;
			left: 65%;
			transform: rotate(-1deg);
		}
			.landscapephonegraphic
			{
				position: relative;
				margin: -200px 0 0 -40px;

				width: 325px;
				height: 780px;

				background: url("images/phonelandscapeblinkerLong.svg");
				background-size: 325px 780px;
				background-repeat: no-repeat;

				z-index: 2;
			}

		#landscapeSignboardContainer
		{
			bottom: -265px;
			right: 100px;
			transform: rotate(30deg) scale(0.9);
		}

		#smallContainer
		{
			bottom: -222px;
			left: 50px;
			transform: rotate(-10deg) scale(0.4);
		}

		#tinyContainer
		{
			bottom: 0px;
			left: 45%;
			transform: rotate(190deg) scale(0.3);
		}

		#links
		{
			position: absolute;
			top: 20%;
			left: 50%;

			transform-origin: center center;
			transform: translate(-50%, -50%) scale(0.75);

			display: block;

			text-align: center;

			z-index: 500;
		}
	}