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


body {
	
	font-family:'Open Sans',sans-serif; font-size:100%;
	}


#headerCont{height:50px; background-color:#a8c656; box-shadow:0px 2px 4px rgba(0,0,0,.5); }

#header h2 {height:50px; text-align:left; color:#FFF; line-height:50px; z-index:99;}

#info{
	position:absolute;
	display:none;
	width:100%;
	left:0;
	background-color:#FFF;
	text-align:left;
	margin:0 auto;
	padding:4%;
	z-index:9999;
	box-shadow:0px 2px 4px #000;

}



#controls{
	float: right;
	position: absolute;
	right: 30px;
	top: 7px;
	}

.controlBtn{
	display:inline-block;
	cursor:pointer;
	background-color:#FFF;
	background-position:top left;
	background-size:25px 25px;
	width:25px;
	height:25px;}


.controlBtn:hover{
	background-color:#222;
}

#content{text-align:center}




#shed {position:relative; width:80%; margin:0 auto;}

#shedFront, #shedBack, #waves {
position:absolute;
top:0;
left:0
}

#shedFront, #waves{pointer-events:none;}


#ducks{position:relative; display:inline; width:100%; height:auto;left:10%}

.duck {position:relative;

	;
}

.duck .content{float:left; width:26%; height:auto}

.duck img {float:left; width:100%; height:auto;

}

.duck img  {
	
	transform-origin:bottom;
	-webkit-transform-origin: bottom;
	-moz-transform-origin:bottom;
	
	transform:rotate(0deg);	
	-webkit-transform:rotateX(0deg);
	-moz-transform:rotateX(0deg);
	
}

.content h3{
width:26%; text-align:center;
position:absolute; margin-top:20%; font-size:16px;}



#waves{padding:30px;}





.clear{clear:both}

#hole {
	position: absolute;
	height: 50px;
	width: 50px;
	top: 0;
	left: 0;
	z-index: 9999;
	display: none;
}

#feedback{
	position:relative;
	text-align:center; 
	display:block;
	width:200px; 
	margin-left:-100px; 
	left:50%; 
	font-weight:bold; 
	font-size:2em;
	z-index:90;
	opacity:0;
	
	
}

#timer {
	position:relative;
	text-align:center;
	z-index:999;
	}

.correct{color:#090;}
.wrong{color:#900;}


.btn {
	position:relative;
	display:inline-block;
	margin-top:10%;
	width:220px; 
	height:80px;
	background-color:#e2a853;
	padding:12px auto;
	line-height:80px;
	color:#FFF;
	text-align:center;
	font-weight:bold;
	cursor:pointer;
	
}

.btn:hover{color:#222; box-shadow:0px 3px 3px #222;}

#Qbox{position:relative;
margin-top:10%;}




#footer {
	position:fixed;
	bottom:0; 
	width:100%; 
	background-color:#778691; 
	height:40px;
	color:#FFF; 
	text-align:center; 
	line-height:30px;
}





/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	

	.btn{
	margin-top:2%;
	}
	
	#Qbox{	margin-top:6%}
	
/* Styles */
}