@font-face {
	font-family: 'Apercu Condensed Bold Pro';
	src: url('apercu-condensed-bold-pro.woff');
}

html, body{
	margin:0; padding:0; width:100%; height:100%; overflow:hidden;
}

body{
	background:url('images/background-01.jpg') center no-repeat; background-size:100%; font-family:Apercu Condensed Bold Pro;
}

body:after{
	/* Preloading */
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
   content:url(images/search-1.png) url(images/search-2.png) url(images/search-3.png);
}

#banner{
	position:absolute; top:200px; bottom:auto; left:0; right:0; margin:auto; z-index:100;
}


#game{
	height:80%; width:80%; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background:no-repeat center;  background-size:cover; box-shadow:0 0 50px rgba(0,0,0,0.5); border-radius:80px;
}

#game-container{
	height:100%; width:100%; transform:translateY(0); transition:all 0.5s ease;
}

#game-container.slide-down{
	transform:translateY(33%);
}

#move-game{
	width:180px; height:180px; background:blue; position:absolute; bottom:0; right:0;
}

#game-over,
#game-instructions{
	height:80%; width:80%; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background:#fff; align-items:center; justify-content:center; font-size:100px; display:none; box-sizing:border-box; padding:200px; border-radius:80px; background:#d43631; color:#fff; text-align:center;
}

#game-over.show{
	display:flex;
}

#game-instructions{
	display:none;
}

#game-instructions.show{
	display:flex;
}

#game-instructions h1{
	font-size:120px;
}

#game-over h1{
	font-size:200px;
}

#game-instructions .go-home,
#game-over .go-home{
	background:#d43631; border:10px solid #ffca2e; color:#ffca2e;
}

.target{
	/*border:10px solid red;*/
	/*animation:testFlash 0.5s infinite;*/
	position:absolute; box-sizing: border-box;
}

@keyframes testFlash{
	0%{
		border-color:red;
	}
	50%{
		border-color:transparent;
	}
	0%{
		border-color:red;
	}
}

#progress{
	position:absolute; left:10%; right:auto; bottom:180px; top:auto; margin:auto;

	display:flex; justify-content:center; align-items: center; 
}

.indicator{
	width:60px; height:60px; border-radius:50%; border:10px solid #012A72; background:transparent; position:relative; display:flex; align-items:center; justify-content:center;
}

.indicator:after{
	content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:#012A72; border-radius:50%; opacity:0; transform:scale(0); transition:transform 0.5s ease;
}

.indicator span{
	font-size:50px; color:#012A72; line-height:1; position:relative; z-index:10; transition:all 0.5s ease;
}

.indicator.incomplete{}

.indicator.complete:after{
	opacity:1; transform:scale(1.02);
}

.indicator.complete span{
	color:#fff; 
}

.bar{
	height:15px; width:20px; position:relative; background:#012A72; opacity:0.25;
}

.bar:after{
	content:""; height:100%; width:100%; transform:scaleX(0); transform-origin:center left; position:absolute; background:#012A72; 
}

.indicator.complete + .bar:after{
	transform:scaleX(1); transition:all 1s ease; transition-delay:0.5s;
}

#timer{
	font-size:60px; margin-left:50px;
}

button{
	padding: 50px 100px;
    text-transform: uppercase;
    font-size: 90px;
    color: #d43631;
    background: #ffca2e;
    border: 0;
    border-radius: 100px;
    font-family: 'Apercu Condensed Bold Pro';
}