/*FONTS ==========*/
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap|Lato');

/*ANIMATION ==========*/
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated-quick {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}
@-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, .intermediaire, .character, .gameplay, .block-free-game, .final {
	height:414px;
	width: 690px;
	line-height: normal;
}
#navContent{
	font-family: 'Lato', sans-serif;
	font-size:16px;
	margin:30px auto 0 auto;
	position:relative;
	overflow:hidden;
}
#game1{
margin:auto;
right:0px;
position:absolute;
}
#game2{
margin:auto;
right:-800px;
position:absolute;
} 

/*SPLASH ==========*/
.splash{
	background:url('img/splash.jpg');
	overflow: hidden;
}
.splash p{
	font-family: 'Kaushan Script', cursive;
	font-size: 28px;
	position: absolute;
	bottom: 21%;
	left: 24%;
	width: 360px;
	color: #fff;
}

/*SPLASH: Buttons*/
.splash-btn1 {
	position: absolute;
	bottom: 17px;
	left: 192px;
}
.splash-btn2{
	position: absolute;
	bottom: 17px;
	right: 192px;
}
[class*='-btn'] span{
	color: #ac0b03;
	cursor: pointer;
	text-shadow: 1px 1px 1px #d29809;
	border-radius: 85px;
	-webkit-box-shadow: inset 0px -30px 25px -25px #FCA600;
	-moz-box-shadow: inset 0px -30px 25px -25px #FCA600;
	box-shadow: inset 0px -30px 25px -25px #FCA600;
}
[class*='-btn'] span:hover {
	color: #760906;
	transition: .5s ease;
}
.fa-inverse {
    color: #eb8c16;
}
.AC-btn{
	height:75px;
	width:75px;
	cursor:pointer;
	border-radius: 85px;
	position: absolute;
}
.AC-btn:hover{
	-webkit-box-shadow: inset 0px -30px 25px -25px rgba(248, 250, 0,0.4);
	-moz-box-shadow: inset 0px -30px 25px -25px rgba(248, 250, 0,0.4);
	box-shadow: inset 0px -30px 25px -25px rgba(248, 250, 0,0.4);
	transition: .5s ease;
}
#start{bottom: 6%;	left: 45.5%;}

.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: 135px;
	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;
}
.intermediaire{
	background:url('img/intermediaire.jpg');
}
.intermediaire p{
	font-family: 'Kaushan Script', cursive;
	font-size: 32px;
	width: 460px;
	color: #f2e4b3;
	position: absolute;
	top: 25%;
	left: 17%;
}
.intermediaire-btn{
	position: absolute;
	bottom: 7%;
	left: 27%;
}
#next-level {
	-moz-box-shadow:inset 0px 1px 0px 0px #fbe8af;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fbe8af;
	box-shadow:inset 0px 1px 0px 0px #fbe8af;
	background:-moz-linear-gradient(top, #efb402 5%, #ef0202 100%);
	background:-webkit-linear-gradient(top, #efb402 5%, #ef0202 100%);
	background:-o-linear-gradient(top, #efb402 5%, #ef0202 100%);
	background:-ms-linear-gradient(top, #efb402 5%, #ef0202 100%);
	background:linear-gradient(to bottom, #efb402 5%, #ef0202 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#efb402', endColorstr='#ef0202',GradientType=0);
	background-color:#efb402;
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;
	border:1px solid #ee1e28;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:28px;
	padding:20px 50px;
	text-decoration:none;
	text-shadow:0px 1px 0px #c70067;
	position: absolute;
	bottom: 7%;
	left: 33%;
}
#next-level:hover {
	transition: .5s ease;
	background:-moz-linear-gradient(top, #ef0202 5%, #efb402 100%);
	background:-webkit-linear-gradient(top, #ef0202 5%, #efb402 100%);
	background:-o-linear-gradient(top, #ef0202 5%, #efb402 100%);
	background:-ms-linear-gradient(top, #ef0202 5%, #efb402 100%);
	background:linear-gradient(to bottom, #ef0202 5%, #efb402 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef0202', endColorstr='#efb402',GradientType=0);
	background-color:#ef0202;
}
.tuto{
	position: absolute;
	top: 33%;
	left: 37%;
	font-size: 26px;
	text-align: left;
	color: #fbe8af;
}
.tuto img{
	vertical-align: middle;
	padding-bottom: 6px;
}
.tuto span{
	font-family: 'Kaushan Script', cursive;
}
.character{
	background:url('img/intermediaire.jpg');
}
.character p{
	font-family: 'Kaushan Script', cursive;
	font-size: 26px;
}
.character span{
	font-size: 18px;
	font-weight: bold;
	display: inline-block;
	margin-top: 10px;
}
.character-explicatif{
	position: absolute;
	top: 18%;
	left: 19%;
	width: 66%;
	color: #01567f;
}
.character-explicatif i{
	line-height: 40px;
	color: #fff;
}
.pair{
	float: left;
	width: 74px;
	color: #fbe8af;
	line-height: 30px;
}
.pair:nth-child(3), .pair:nth-child(5) {
  font-size: 35px;
  line-height: 40px;
}
.pair:nth-child(6) {
  margin-top: -3px;
  font-variant: small-caps;
  width:100px;
}

/*GAMEPLAY ==========*/
.gameplay{
	background: url('img/gameplay1.jpg');
	overflow: auto;
 } 
.gameplay-btn{
	position: absolute;
	top: 12%;
	right: 20.6%;
}
.gameplay-answer{
	padding:3px;
	cursor:pointer;
	opacity: 0.8;
	/*position: relative;
	z-index: 4;*/
}
.gameplay-answer:hover{
	opacity: 1;
}
#t1, #s2, #t3, #s4, #t5, #s6 {position: absolute; top: 29%}
#s7, #t8, #s9, #t10, #s11, #t12 {position: absolute; top: 40%}
#s1, #t2, #s3, #t4, #s5, #t6 {position: absolute; top: 51%}
#t7, #s8, #t9, #s10, #t11, #s12 {position: absolute; top: 62%}
#t1, #t7, #s1, #s7 {left: 7.5%}
#t2, #t8, #s2, #s8 {left: 13.5%}
#t3, #t9, #s3, #s9 {left: 19.5%}
#t4, #t10, #s4, #s10 {left: 25.5%}
#t5, #t11, #s5, #s11 {left: 31.5%}
#t6, #t12, #s6, #s12 {left: 37.5%}

#t1, #t2, #t3, #t4 {position: absolute}
#t5, #t6, #t7, #t8, #t9, #t10, #t11, #t12, #s1, #s2, #s3, #s4,#s5, #s6, #s7, #s8, #s9, #s10, #s11, #s12 {display: none; position: absolute}

.combi{position: absolute; bottom: 12.5%; left: 11.5%;}
.combi img{width: 32px; height: auto; opacity: 0.3; padding-right:7px; display: none}
.barres img{
	position: absolute;
	right: 35.7%;
	width:105px;
	height: 20px;
}
.barres img:nth-child(1){top: 35%}
.barres img:nth-child(2){top: 45%}
.barres img:nth-child(3){top: 55%}
.barres img:nth-child(4){top: 65%}
.barres img:nth-child(5){top: 75%}

[id*='cog']{position: absolute}
#cog1{top: 45.3%; left: 61.9%; width: 100px}
#cog2{top: 33%; left: 58%}
#cog3{top: 70.5%; left: 63.5%; width: 94px}
#cog4{top: 60%; left: 55%; width: 90px}
.rotateR {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
transition-duration:0.8s;
}
.rotateL {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
transition-duration:0.8s;
}

[id*='jewel']{display: none}
#jewel1{position: absolute; top: 8%; right: 8.1%; width: 80px}
#jewel2{position: absolute; top: 27%; right: 10.6%; width: 48px}
#jewel3{position: absolute; top: 38.6%; right: 6.9%; width: 95px}
#jewel4{position: absolute; top: 55.2%; right: 7.6%; width: 86px; height: 80px}

/*GAMEPLAY: Progression-related*/
.progression{
	display:block;
	background-color:#fff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	position: absolute;
	text-align: center;
	color:#cc9933;
	font-weight: bold;
	font-size: 14px;
	line-height: 26px;
 }
 .timer-container{
 	width: 136px;
 	height:24px;
 	right: 20%;
 	top: 5%;
 }
 .score{
 	width: 100px;
 	height:50px;
	left: 55%;
	top: 4%;
}

/*GAMEPLAY: Progression-related: TIMER*/
 .timer{
	width:1px;
	height:18px;
	margin: 3px;
	display:block;
	background: #bfd255;
	background: -moz-linear-gradient(top,  #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%);
	background: -webkit-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
	background: linear-gradient(to bottom,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
	-moz-border-radius: 4px 0 0 4px;
	-webkit-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px;
}
.timer-level{
	color:#F5EA02;
	font-weight: bold;
	position: absolute;
	z-index: 10;
	width: 136px;
	display: block;
	font-size: 14px;
	text-shadow: 0px 0px 2px #414141;
}

.failure{	
	background:url('img/intermediaire.jpg');
}
.failure p{	
	font-family: 'Kaushan Script', cursive;
	font-size: 32px;
	width: 370px;
	color: #f2e4b3;
	position: absolute;
	top: 26%;
	left: 24%;
}
.failure-btn{
	position: absolute;
	bottom: 40px;
	right: 232px;
}