@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

/*ANIMATION ==========*/
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes bounceInDown{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInDown{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}
@-webkit-keyframes flash{from,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{from,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}
@-webkit-keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}}@keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}}.fadeIn{-webkit-animation-name: fadeIn; animation-name: fadeIn;}
@-webkit-keyframes shake {from, to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}10%, 30%, 50%, 70%, 90% {-webkit-transform: translate3d(-1px, 0, 0);transform: translate3d(-1px, 0, 0);}20%, 40%, 60%, 80% {-webkit-transform: translate3d(1px, 0, 0);transform: translate3d(1px, 0, 0);}}
@keyframes shake {from, to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}10%, 30%, 50%, 70%, 90% {-webkit-transform: translate3d(-1px, 0, 0);transform: translate3d(-1px, 0, 0);}20%, 40%, 60%, 80% {-webkit-transform: translate3d(1px, 0, 0);transform: translate3d(1px, 0, 0);}}.shake {-webkit-animation-name: shake;animation-name: shake;}
/*COMMON STRUCTURE ==========*/
#navContent, #game1, #game2, .splash, .failure, .final, .intermediaire, .gameplay, .block-free-game {height:414px; width: 690px}
#navContent{
	font-family: 'Lato', sans-serif;
	font-size:18px;
	margin:30px auto 0 auto;
	position:relative;
	overflow:hidden;
	line-height: normal;
}
#game1{
margin:auto;
right:0px;
position:absolute;
}
#game2{
margin:auto;
right:-800px;
position:absolute;
} 

/*SPLASH ==========*/
.splash{
	background:url('img/splash.jpg');
	overflow: auto;
}
.splash p{
	position: absolute;
	width: 340px;
	left: 35%;
	bottom: 30%;
	color: #fefccb;
	font-size: 22px;
	text-shadow: 0 1px 0 #707070;
}

/*SPLASH: Buttons*/
.splash-btn{
	width: 280px;
	position: absolute;
	z-index: 10;
	bottom: 20px;
	right: 140px;
}
[class*='-btn'] span{
	color: #cc9933;
	cursor: pointer;
}
[class*='-btn'] span:hover{
	color: #ad7e20;
	transition: .5s ease;
}

.MH-btn{
	height:35px;
	width:130px;
	color: #fff;
	line-height: 35px;
	background-color: #465631;
	border: 3px solid #578c23;
	cursor:pointer;
	border-radius: 7px;
	position: absolute;
}
.MH-btn:hover{
	-webkit-box-shadow: inset 0px -30px 25px -25px rgba(73, 184, 50,0.7);
	-moz-box-shadow: inset 0px -30px 25px -25px rgba(73, 184, 50,0.7);
	box-shadow: inset 0px -30px 25px -25px rgba(73, 184, 50,0.7);
	transition: .5s ease;
}
#start{bottom: 19%;	left: 50%;}
#next-level{bottom: 14%;right: 10%}

/*SPLASH: Panels*/
.splash-panel{
	display:none;
	background-color: #FFF;
	border: 5px solid #ccc;
	padding:12px;
	-webkit-box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
	position: absolute;
	left: 180px;
	bottom: 140px;
	width:420px;  
	height:225px;
}
.splash-panel em{
	background-color: #ffeeee;
	padding: 1px 5px;
	font-style: normal;
	font-size: 12px;
	border: 1px solid #aa9999;
	color: #393939;
}
.gameplay{
	background: url('img/gameplay.jpg');
 } 
.gameplay-btn{
	position: absolute;
	z-index: 10;
	top: 10px;
	right: 10px;
}
.progression{
 	width: 176px;
 	height:24px;
	display:block;
	background-color:#fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	position: absolute;
	color:#356600;
	font-weight: bold;
	font-size: 14px;
	line-height: 26px;
 }
 .timer-container, .score, .hearts{left: 20px}
 /*spacing is 30 px, think about .hide also +3 px*/
 .timer-container{bottom: 15px}
 .score{top: 305px}
 .hearts {top: 340px}

 .timer{
	width:1px;
	height:18px;
	margin: 3px;
	display:block;
	text-align: center;
	background: #b7deed;
	background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%);
	background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
	background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;
	border-radius: 10px 0 0 10px;
}
.timer-level{
	color:#356600;
	font-weight: bold;
	position: absolute;
	z-index: 10;
	left: 0;
	width: 176px;
	font-size: 14px;
}
.hide{
	width:20px;
	height:20px;
	display:block;
	background-color:#fff;
	position:absolute;
	opacity: 0.8;
	bottom:12.4%;
	left: 11.2%;
}
.question-container {
	font-size: 26px;
	position: absolute;
	width: 350px;
	left: 32%;
	top: 78.9%;
	color: #f0e612;
	cursor: pointer;
 }
.good-feedback, .bad-feedback {
	width: 171px;
	height: 102px;
	font-size: 66px;
	color: white;
	text-shadow: 1px 1px 8px rgba(150, 150, 150, 1);
	position: absolute;
	top: 170px;
	left: 331px;
	display: none;
}
.good-feedback{	background:url('img/notesOK.png')}

/*PAGES FAILURE ==========*/
.failure{
	background:url('img/failure.jpg');
	overflow: auto;
}
.failure p{
	font-size: 31px;
	color: white;
	text-shadow: 1px 1px 8px rgba(150, 150, 150, 1);
	width: 450px;
	position: absolute;
	top: 22%;
	left: 19%;
}
.failure b{
	color: #E21A6F;
	font-size:32px;
	position: absolute;
	top: 61%;
	left: 43%;
}
.failure-btn{
	position: absolute;
	bottom: 20px;
	right: 231px;
}