/* Airwolf: The Game */
/* Copyright 2020 AirwolfHelicopter.com */
/* Version 1.2 */
/* Last Updated 16.12.2020
/* Stylesheet */

@charset "UTF-8";

/* @import url("./explosion.min.css"); */

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

html, body {
	font-family: "Press Start 2P", Courier, cursive;
	color: #fff;
	margin: 0;
	padding: 0;
}

.container {
	height: 100%;
	width: 100%;
}

a, a:hover {
	color: #fff;
	cursor: pointer;
}

/* moves audio elements out of sight */
audio {
	position: absolute;
	left: -999em;
}

/* IE Fix */
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section, address {
	display: block;
}

time {
	display: inline;
}

/* Banner */
.banner {
	z-index: 201;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #ff0000;
	width: 100%;
	height: auto;
	text-align: center;
	padding: 0;
}

.banner p, .banner a {
	color: #fff;
	line-height: 1em;
	font-size: 0.9em;
}

/* Info and Scores */

#info-wrapper {
	z-index: 100;
	display: block;
	position: absolute;
	top: initial;
	right: initial;
	width: 100%;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

#current-score-wrapper, #high-score-wrapper, #timer-wrapper, #lives-wrapper {
	font-family: "Press Start 2P", Courier, cursive;
	position: relative;
	color: #fff;
	text-transform: uppercase;
	float: right;
}

#high-score-wrapper {
	margin-top: 1rem;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

#current-score-wrapper {
	margin-top: 1rem;
	margin-right: 1rem;
}

#timer-wrapper {
	margin-top: 1rem;
	margin-left: 1rem;
	margin-right: 2rem;
}

#lives-wrapper {
	margin-top: 1rem;
	margin-left: 1rem;
	margin-right: 2rem;
	width: 11rem;
}

.life {
	display: inline-block;
	height: 1rem;
	width: 1rem;
	background-image: url("../images/icons/heart-icon.svg");
	background-size: 100%;
	background-repeat: no-repeat;
}

@media (min-width: 1200px) {
	#high-score-wrapper {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	#current-score-wrapper {
		margin-right: 2rem;
	}

	#timer-wrapper {
		margin-left: 2rem;
		margin-right: 2rem;
	}

	#lives-wrapper {
		margin-left: 2rem;
		margin-right: 3rem;
	}
}

@media (max-width: 992px) {
	#current-score-wrapper, #high-score-wrapper, #timer-wrapper {
		margin-left: 0;
		margin-right: 0;
	}
	
	#lives-wrapper {
		margin-right: 0;
	}
	
	#info-wrapper {
		display: block;
		position: absolute;
		top: 1rem;
		right: 2rem;
		width: 300px;
	}
	
}

/* Mute Button */
#mute-button {
	display: block;
	position: fixed;
	cursor: pointer;
	top: 10px;
	left: 10px;
	height: 30px;
	width: 30px;
	background-image: url("../images/icons/sound-on.svg");
	background-size: 100%;
	background-repeat: no-repeat;
}

#mute-button.muted {
	background-image: url("../images/icons/sound-off.svg");
	background-size: 100%;
	background-repeat: no-repeat;
}

/* Pause */
#pause-button {
	display: block;
	position: fixed;
	cursor: pointer;
	top: 10px;
	left: 60px;
	height: 30px;
	width: 30px;
	background-image: url("../images/icons/pause-button.svg");
	background-size: 100%;
	background-repeat: no-repeat;
}

#pause-screen {
	z-index: 90;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	background-color: rgb(0, 0, 0); /* fallback */
	background-color: rgba(0, 0, 0, 0.51);
	text-align: center;
	cursor: crosshair;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

#paused {
	margin-top: 12rem;
	display: block;
	color: #fff;
	font-family: "Press Start 2P", Courier, cursive;
	font-size: 3em;
	text-transform: uppercase;
}

#play-button {
	font-size: 1.5em;
	left: 0;
	right: 0;
	margin-top: 4rem;
}

#reset-button {
	display: block;
	color: #fff;
	text-align: center;
	font-size: 1em;
	text-shadow: -1px 2px #000;
	height: 75px;
	width: 200px;
	margin-top: 2.5rem;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
}

#reset-button img {
	margin-right: 1rem;
	margin-bottom: -5px;
}

/* Game Background */

#background {
	z-index: 0;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-image: url("../images/bg.jpg");
	background-repeat: repeat-x;
	background-size: 100% 100%;
	background-position: 0;
	/* overflow-x: hidden; */
	overflow: hidden;
}

#mountain-wrapper {
	z-index: 2;
	display: block;
	position: absolute;
	left: 200%;
	bottom: 0;
	width: 900px;
	height: 200px;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

#mountain-1 {
	display: block;
	position: absolute;
	height: 200px;
	width: 450px;
	left: 0;
	bottom: 0;
	background-image: url("../images/mountain1.png");
	background-size: 100% 100%;
	background-position: 0;
}

#mountain-2 {
	display: block;
	position: absolute;
	height: 150px;
	width: 450px;
	left: 450px;
	bottom: 0;
	background-image: url("../images/mountain1.png");
	background-size: 100% 100%;
	background-position: 0;
}

/* Coins and Super Coins */

#coin {
	z-index: 4;
	display: block;
	position: fixed;
	left: 80%;
	top: 40%;
	height: 75px;
	width: 75px;
	background-image: url("../images/coin.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
    transform-style: preserve-3d;
    transform-origin: 50%;
	animation-timing-function: linear;
	animation: spinning 2s infinite;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50%;
    -webkit-animation: spinning 2s infinite;
    -webkit-animation-timing-function: linear;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

#coin.super-coin {
	height: 67px;
	width: 184px;
	background-image: url("../images/badge.png");
}

#coin.heart {
	height: 62px;
	width: 75px;
	background-image: url("../images/heart.png");
}

@-webkit-keyframes spinning {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}

@keyframes spinning {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}

/* Mines */

#mine {
	display: none;
	position: absolute;
	top: 60%;
	left: 200%;
	height: 40px;
	width: 40px;
	background-image: url("../images/mine.png");
	background-size: 100%;
	background-repeat: no-repeat;
	border-radius: 50%;
	-webkit-animation: flash_white linear 2s infinite;
	animation: flash_white linear 2s infinite;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}


@-webkit-keyframes flash_white {
	0% { background-image: url("../images/mine-white.png"); }
	40% { background-image: url("../images/mine.png"); } 
	50% { background-image: url("../images/mine.png"); }
	60% { background-image: url("../images/mine.png"); } 
	100% { background-image: url("../images/mine-white.png"); }
}
@keyframes flash_white {
	0% { background-image: url("../images/mine-white.png"); }
	40% { background-image: url("../images/mine.png"); } 
	50% { background-image: url("../images/mine.png"); }
	60% { background-image: url("../images/mine.png"); } 
	100% { background-image: url("../images/mine-white.png"); }
}

/* Missile */

#missile, #boss-missile {
	display: none;
	position: absolute;
	z-index: 8;
	height: 20px;
	width: 50px;
	top: 10%;
	left: 40%;
	background-image: url("../images/missile.png");
	background-size: 100%;
	background-repeat: no-repeat;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

#boss-missile {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}

/* Helicopter */

@-webkit-keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

@-webkit-keyframes tailblade {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    transform: rotate3d(0, 0, 1, -360deg);
  }
}

@keyframes tailblade {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    transform: rotate3d(0, 0, 1, -360deg);
  }
}

@-webkit-keyframes float {
  from {
    transform: translateY(8px) rotate3d(0, 0, 1, 3deg);
  }
  to {
    transform: translateY(-8px) rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes float {
  from {
    transform: translateY(8px) rotate3d(0, 0, 1, 3deg);
  }
  to {
    transform: translateY(-8px) rotate3d(0, 0, 1, 0deg);
  }
}

#helicopter-wrapper {
	z-index: 10;
	position: fixed;
	height: 57px;
	width: 176px;
	top: 40%;
	left: 10%;
	-webkit-transform: rotate(0deg) scaleX(1);
	transform: rotate(0deg) scaleX(1);
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

#bogey-wrapper {
	z-index: 5;
	display: none;
	position: fixed;
	height: 57px;
	width: 176px;
	top: -20%;
	left: 120%;
    -webkit-transform: rotate(-20deg) scaleX(-1);
    transform: rotate(-20deg) scaleX(-1);
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

#boss-wrapper {
	z-index: 5;
	display: none;
	position: fixed;
	height: 57px;
	width: 173px;
	top: -120%;
	left: 70%;
    -webkit-transform: rotate(-20deg) scaleX(-1);
    transform: rotate(-20deg) scaleX(-1);
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}
/*
.helicopter-wrapper.flipped {
	-webkit-transform: rotate(0deg) scaleX(-1) !important;
	transform: rotate(0deg) scaleX(-1) !important;
}

.helicopter-wrapper.flipped.rotated {
	-webkit-transform: rotate(-20deg) scaleX(-1) !important;
	transform: rotate(-20deg) scaleX(-1) !important;
}

.helicopter-wrapper.reverse {
	-webkit-transform: rotate(-10deg) scaleX(1) !important;
	transform: rotate(-10deg) scaleX(1) !important;
}

.helicopter-wrapper.rotated {
	-webkit-transform: rotate(20deg) scaleX(1) !important;
	transform: rotate(20deg) scaleX(1) !important;
} */

#helicopter-wrapper.flashing {
	-webkit-animation: flash linear 1s infinite;
	animation: flash linear 1s infinite;
}

#bogey-wrapper.flashing {
	-webkit-animation: flash linear 1s infinite;
	animation: flash linear 1s infinite;
}

#boss-wrapper.flashing {
	-webkit-animation: flash linear 1s infinite;
	animation: flash linear 1s infinite;
}

@-webkit-keyframes flash {
	0% { opacity: 1.0; } 
	50% { opacity: 0.1; } 
	100% { opacity: 1.0; }
}
@keyframes flash {
	0% { opacity: 1.0; } 
	50% { opacity: 0.1; } 
	100% { opacity: 1.0; }
}

#helicopter-wrapper, #background {
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
#helicopter-wrapper, #background {
	-webkit-transform: rotate3d(0,0,0,0deg);
	-moz-transform: rotate3d(0,0,0,0deg);
	-o-transform: rotate3d(0,0,0,0deg);
	transform: rotate3d(0,0,0,0deg);
}

.helicopter {
  position: relative;
  animation-duration: 1s;
  animation-name: float;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-play-state: running;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
  -webkit-animation-name: float;
}

.helicopter-body {
	height: 45px;
	width: 173px;
}

.blade {
  position: absolute;
  top: -5px;
  left: 20px;
  height: 12px;
  width: 176px;
  animation-duration: 0.2s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-play-state: running;
  -webkit-animation-name: spin;
}

.tailblade {
  width: 3px;
  height: 7px;
  background-color: black;
  position: absolute;
  top: 12px;
  left: 9px;
  transform-origin: 50% 100%;
  animation-duration: 0.1s;
  animation-name: tailblade;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-play-state: running;
  -webkit-animation-name: tailblade;
}

/* Mobile Styles */

@media (max-width: 480px) {
	
	#helicopter-wrapper, #bogey-wrapper {
		height: 29px;
		width: 88px;
	}
	
	#boss-wrapper {
		height: 29px;
		width: 87px;
	}
	
	.helicopter-body {
		height: 23px;
		width: 87px;
	}
	
	.blade {
		top: -2px;
		left: 10px;
		height: 6px;
		width: 88px;
	}
	
	.tailblade {
		display: none;
	}
	
	#coin {
		height: 38px;
		width: 38px;
	}
	
	.super-coin {
		height: 34px;
		width: 92px;
	}
	
	.heart {
		height: 31px;
		width: 38px;
	}
	
	#mine {
		height: 25px;
		width: 25px;
	}
	
	#missile {
		height: 10px;
		width: 25px;
	}
	
	#mountain-wrapper {
		width: 450px;
		height: 100px;
	}

	#mountain-1 {
		height: 100px;
		width: 225px;
		left: 0;
		bottom: 0;
	}

	#mountain-2 {
		height: 75px;
		width: 225px;
		left: 225px;
	}
	
}

/* Start Button */

#start-screen {
	display: block;
	z-index: 200;
	cursor: crosshair;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../images/vr.jpg");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 700px;
}

button, a {
	cursor: crosshair;
}

#airwolf-logo {
	display: block;
	height: 310px;
	width: 100%;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	background-position: center center;
	background-image: url("../images/airwolf-logo.png");
	background-size: 90%;
	background-repeat: no-repeat;
	text-align: center;
}

#airwolf-logo span.the-game h2 {
	display: inline-block;
	position: relative;
	text-transform: uppercase;
	letter-spacing: 8px;
	color: #FF0000;
	margin-top: 15rem;
	font-size: 2.5em;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #fff;
	text-shadow: -1px 3px #000;
}

#airwolf-logo span.airwolf h1 {
	position: absolute;
	left: -999rem;
}

#start-button {
	margin-top: 0;
	margin-bottom: 1rem;
}

button.big-button {
	position: relative;
	left: calc(50% - 125px);
/*	top: calc(50% - 50px); */
	display: inline-block;
	margin-top: 0.5em;
	margin-bottom: 1em;
	height: 100px;
	width: 250px;
	background-color: #ff0000;
	color: #FFF;
	font-size: 2em;
	text-shadow: -1px 3px #000;
	border: 2px solid #fff;
	border-radius: 5px;
	box-shadow: 0px 15px #ccc;
	line-height: 1.2;
	padding: 0;
	font-family: "Press Start 2P", Courier, cursive;
	-webkit-transition: background-color 400ms linear, font-size 200ms linear, scale 200ms linear;
	-moz-transition: background-color 400ms linear, font-size 200ms linear, scale 200ms linear;
	-o-transition: background-color 400ms linear, font-size 200ms linear, scale 200ms linear;
	transition: background-color 400ms linear, font-size 200ms linear, scale 200ms linear;
}

button.big-button:hover {
	font-size: 2.2em;
	background-color: #00ffff;
	-webkit-transform: scale(1.5);
	        transform: scale(1.5);
}

button.big-button:active {
	box-shadow: 0px 7px #757575;
	-webkit-transform: translateY(8px);
	        transform: translateY(8px);
	-webkit-transform: scale(1);
	        transform: scale(1);
}

.blink {
	background: none;
	padding: 25px 10px 25px 25px;
	-webkit-animation: blinker 1s linear infinite;
	        animation: blinker 1s linear infinite;
}

@-webkit-keyframes blinker {
	50% { opacity: 0.25; }
}

@keyframes blinker {
	50% { opacity: 0.25; }
}

.blink:hover, .blink:active {
	-webkit-animation: none;
	        animation: none;
}

.shake:hover {
	-webkit-animation-name: shaking;
	-webkit-animation-duration: 0.5s;
	-webkit-transform-origin:75% 75%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

.shake:active {
	-webkit-animation: none;
	        animation: none;
}

@-webkit-keyframes shaking {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

@media (max-width: 576px) {
	#airwolf-logo span.the-game h2 {
		font-size: 1.5em;
		margin-top: 12.5rem;
	}
	
	#start-button {
		margin-top: -5rem;
	}
	
	.banner p, .banner a {
		color: #fff;
		line-height: 1.5em;
		font-size: 0.8em;
	}
	
	/* #start-screen {
		min-height: 825px;
	} */
}

@media (max-width: 320px) {
	#airwolf-logo {
		margin-top: -2rem;
	}
	
	/* #start-screen {
		min-height: 800px;
	} */
}

/* Winner */

#winner-screen {
	z-index: 90;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	padding: 0 5%;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

#winner {
	margin-top: 12rem;
	display: block;
	color: #fff;
	font-family: "Press Start 2P", Courier, cursive;
	font-size: 2em;
/*	text-shadow: -1px 3px #000; */
	text-transform: uppercase;
}

/* Game Over */

#game-over-screen {
	z-index: 100;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	padding: 0 5%;
	background-color: rgb(0, 0, 0); /* fallback */
	background-color: rgba(0, 0, 0, 0.51);
	text-align: center;
	cursor: crosshair;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

#game-over {
	margin-top: 12rem;
	display: block;
	color: #fff;
	font-family: "Press Start 2P", Courier, cursive;
	font-size: 3em;
	text-transform: uppercase;
}

#final-score, #final-score-display {
	display: block;
	margin-top: 2rem;
	color: #fff;
	font-family: "Press Start 2P", Courier, cursive;
	font-size: 2em;
	text-transform: uppercase;
}

#restart-button {
	font-size: 1.5em;
	left: 0;
	right: 0;
	margin-top: 2rem;
}

@media (max-width: 768px) {
	
	#game-over {
		margin-top: 7rem;
		line-height: 1.25em;
	}
	
	#paused {
		margin-top: 7rem;
		line-height: 1.25em;
	}
	
	#final-score-display {
		line-height: 1.25em;
	}
	
}

@media (max-width: 320px) {
	
	#game-over {
		margin-top: 5rem;
		line-height: 1.25em;
	}
	
	#paused {
		margin-top: 7rem;
		line-height: 1.25em;
	}
	
}

/* D-pad */

#controls {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

#d-pad {
	z-index: 20;
	position: fixed;
	right: 7rem;
	bottom: 2rem;
	height: 150px;
	width: 150px;
}

#buttons {
	z-index: 20;
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	height: 50px;
	width: 50px;
}

#a-button {
	z-index: 20;
	position: absolute;
	cursor: pointer;
	height: 50px;
	width: 50px;
	color: #fff;
	background-color: #32CD32;
	border-radius: 50%;
	-webkit-box-shadow: 0 7px #1E7B1E;
	-moz-box-shadow: 0 7px #1E7B1E;
	box-shadow: 0 7px #1E7B1E;
}

#a-button span {
	position: absolute;
	color: #fff;
	font-size: 1.5em;
	top: 12px;
	left: 14px;
	/* text-shadow: -1px 3px #000; */
}

#a-button:active {
	-webkit-box-shadow: 0 3px #1E7B1E;
	-moz-box-shadow: 0 3px #1E7B1E;
	box-shadow: 0 3px #1E7B1E;
	transform: translateY(4px);
	-webkit-transform: translateY(4px);
}

#up-arrow, #left-arrow, #right-arrow, #down-arrow {
	position: absolute;
	cursor: pointer;
	height: 50px;
	width: 50px;
	background-color: #FF8C00;
	border-radius: 50%;
	-webkit-box-shadow: 0 7px #C16E00;
	-moz-box-shadow: 0 7px #C16E00;
	box-shadow: 0 7px #C16E00;
}

#up-arrow:active, #left-arrow:active, #right-arrow:active, #down-arrow:active {
	-webkit-box-shadow: 0 3px #C16E00;
	-moz-box-shadow: 0 3px #C16E00;
	box-shadow: 0 3px #C16E00;
	transform: translateY(4px);
	-webkit-transform: translateY(4px);
}

#up-arrow {
	top: 0;
	left: calc(50% - 25px);
}

#down-arrow {
	bottom: 0;
	left: calc(50% - 25px);
}

#left-arrow {
	top: calc(50% - 25px);
	left: 0;
}

#right-arrow {
	top: calc(50% - 25px);
	right: 0;
}

.arrow {
	display: inline-block;
	padding: 12px;
	margin-top: 12px;
	margin-left: 12px;
	background-image: url("../images/icons/button-arrow.svg");
	background-size: 100%;
	background-repeat: no-repeat;
}

.right {
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

.left {
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
}

.up {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}

.down {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}

@media (max-width: 576px) {
	#d-pad {
		right: initial;
		left: 2rem;
	}
}

/* News - Blog */

.news {
	font-size: 0.65em;
	margin-top: 2em;
	text-align: center;
	color: #fff;
	text-shadow: -1px 3px #000;
}

.news a, .news a:hover {
	color: #ff0000;
}

/* Instructions */
.instructions {
	font-size: 1em;
	margin-top: 0;
	line-height: 1.5em;
	text-align: center;
	color: #fff;
	text-shadow: -1px 3px #000;
}

@media (max-width: 320px) {
	.instructions {
		font-size: 0.75em;
	}
}

/* E-mail */

.email-button {
	z-index: 1000;
	position: fixed;
	left: 10px;
	bottom: 10px;
	height: 30px;
	width: 30px;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.1);
	box-shadow: 
		inset 0 2px 3px rgba(255,255,255,0.3),
		inset 0 -2px 3px rgba(0,0,0,0.3),
		0 1px 1px rgba(255,255,255,0.9);
}

.email-button img {
	height: 30px;
	width: 30px;
}

/* Footer - Copyright */

footer {
	z-index: 100;
	position: absolute;
	color: #fff;
	width: 100%;
	bottom: 0;
	line-height: 1.7em;
	text-align: center;
	font-size: 0.55em;
}

footer a {
	color: #fff;
	text-decoration: none;
	text-shadow: -1px 3px #000;
}

footer p {
	padding-top: 40px;
	text-shadow: -1px 3px #000;
}

.footer-logo {
	position: absolute;
	height: 50px;
	width: 50px;
	bottom: 2rem;
	left: calc(50% - 25px);
	background: url("../images/coin.png");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

/* scrolling text aka flyby */
div.flyby {
    width: 100%;
    margin: 0 auto 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
	padding-top: 5px;
	padding-bottom: 22px;
	z-index: 1;
	position: absolute;
	top: 4rem;
	display: block;
	background: none;
	height: 20px;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

.flyby p {
	display: inline;
	color: #fff000; /* yellow */
	margin: 0;
	padding: 0;
	font-size: 0.8em;
	text-shadow: -1px 3px #000;
}

span.flyby-text {
    display: inline-block;
    padding-left: 100%;  /* show the marquee just outside the paragraph */
    -webkit-animation: flyby 480s linear infinite;
            animation: flyby 480s linear infinite;
	-webkit-animation-delay: 5s; /* Chrome, Safari, Opera */
	animation-delay: 5s; /* Delays scrolling text (in seconds) */
}

/*
.flyby span.flyby-text:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused
} */

/* Make it move */
@-webkit-keyframes flyby {
    0%   { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
    100% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
}
@keyframes flyby {
    0%   { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
    100% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
}

/* animated gif */
.flyby span img {
	display: inline-block;
	height: 20px;
	background-color: none;
	margin-bottom:;
}

/* The Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content in Box */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: 15% auto;
	border: 1px solid #888;
	width: 80%;
	max-width: 480px;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-top: 30px;
	line-height: 1.5em;
	color: #000;
}

.modal-image {
	width: 300px;
	height: 225px;
}

/* The Close Button */
.close-modal {
	color: #aaa;
	position: absolute;
	right: 12px;
	top: 18px;
	font-size: 36px;
	font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
	color: #ff0000;
	text-decoration: none;
	cursor: pointer;
}

@media (max-width: 480px) {
	
	.modal-content {
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.modal-image {
		width: 220px;
		height: 165px;
	}
	
}

/* Progress Bar - Loading */

#progress-bar-wrapper {
	position: relative;
	width: 50%;
	background-color: #3d7373;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	line-height: 2.5em;
	color: #fff;
	border-radius: 20px;
	box-shadow: 0 0 10px #afffff;
	margin-top: 1rem;
	max-width: 576px;
}

#progress-bar {
	width: 1%;
	height: 40px;
	background-color: #00fcfd;
	border-radius: 20px;
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
}

#loading {
	position: absolute;
	display: inline-block;
	font-family: "Press Start 2P", Courier, cursive;
	text-align: center;
	text-shadow: -1px 2px #000;
	line-height: 2.5em;
	color: #fff;
	left: calc(50% - 3.5em);
}

/* Rotate Phone */

#rotate-phone {
	z-index: 150;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	color: #fff;
	font-family: "Press Start 2P", Courier, cursive;
	text-align: center;
	line-height: 2em;
	text-shadow: -1px 3px #000;
	background-color: rgb(0, 0, 0); /* fallback */
	background-color: rgba(0, 0, 0, 0.51);
	padding: 10% 5%;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

@media screen and (orientation: landscape) and (max-device-width: 736px) {
	
	#rotate-phone {
		display: block;
	}
	
}

/* Welcome Back */

#welcome-back {
	display: none;
	text-align: center;
	margin-top: 1rem;
	color: #fff;
	line-height: 1.5em;
	text-shadow: -1px 2px #000;
	padding: 0 5%;
}

#welcome-back video {
	height: 180px;
	width: 320px;
}

@media (max-width: 576px) {
	#welcome-back video {
		height: 135px;
		width: 240px;
	}
}

/* Cookie Warning */

#cookie-warning {
	display: block;
	padding: 0 5%;
}

#cookie-warning p {
	color: #fff;
	line-height: 1.7em;
	text-align: center;
	font-size: 0.55em;
	text-shadow: -1px 3px #000;
}

/* Error Page 404 */

#error-message-wrapper {
	display: block;
	cursor: crosshair;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../images/vr.jpg");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 500px;
}

#error-message {
	margin-top: 2rem;
	text-align: center;
	color: #fff;
	text-shadow: -1px 3px #000;
}

#error-message h1 {
	font-size: 5em;
}

#error-message h2 {
	font-size: 1.5em;
	line-height: 1.5em;
}

/* End of Stylesheet */