@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300&family=Kavoon&family=Lato&family=Yellowtail&display=swap');
.animated-quick {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}
.infinite {
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@-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, .gameplay, .block-free-game, .final, #map {
	height:414px;
	width: 690px;
	line-height: normal;
}
#navContent{
	font-family: 'Lato', sans-serif;
	font-size:18px;
	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: 'Kalam', cursive;
	font-size: 18px;
	font-weight: bold;
	position: absolute;
	bottom: 2%;
	left: 3%;
	width: 190px;
	color: #603a15;
}

/*SPLASH: Buttons*/
.fa-bulle{
	width: 45px;
	height: 45px;
	background: rgb(234,48,113);
	background: -moz-linear-gradient(top,  rgba(234,48,113,1) 0%, rgba(251,234,33,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(234,48,113,1) 0%,rgba(251,234,33,1) 100%);
	background: linear-gradient(to bottom,  rgba(234,48,113,1) 0%,rgba(251,234,33,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea3071', endColorstr='#fbea21',GradientType=0 );
	border-radius: 28px;
	line-height: 44px;
	font-size: 26px;
	color: white;
	-webkit-box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
	-moz-box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
	box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
	position: absolute;
	bottom: 6%;
	cursor: pointer;
	text-align: center;
}
.fa-bulle i{line-height: 44px;}
.fa-bulle:hover{font-size: 24px}
#howtoplay{left: 30%}
#didyouknow{left: 38%}
.splash #viewlesson{left:57%}
.splash #viewcheatsheet{left: 65%}
.final #viewlesson{left:89%}
.final #playgames{left: 80%}
.failure #viewlesson{left:46.5%}
.failure #viewcheatsheet{left: 57%}
.failure #replay{left: 36%}
#help{bottom: 5%;left: 3%; cursor: pointer;transform:scale(0.8,0.8); z-index: 30}

.SON-btn{
	width: 64px;
	height: 55px;
	background-color: #eb376e;
	border-radius: 31px;
	line-height: 56px;
	font-size: 33px;
	color: white;
	-webkit-box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
	-moz-box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
	box-shadow: 0.6px 2px 0px 3px rgba(96,56,21,1);
	position: absolute;
	cursor: pointer;
	font-family: 'Kavoon', cursive;
}
.SON-btn:hover{font-size: 33px}
#start{bottom: 5.4%; left: 46.1%}
#next {bottom: 6%; left: 84%}

.splash-panel{
	display:none;
	background-color: #FFF;
	border: 5px solid #603815;
	padding:12px;
	-webkit-box-shadow: 10px 40px 0px 100px #f8710fc9;
	-moz-box-shadow: 10px 40px 0px 100px #f8710fc9;
	box-shadow: 10px 40px 0px 100px #f8710fc9;
	position: absolute;
	left: 90px;
	bottom: 86px;
	width:490px;  
	height:275px;
}
.splash-panel b{font-family: 'Kavoon', cursive; font-size: 28px}
.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');
}
#basil{
	font-family: 'Yellowtail', cursive;
	font-size: 32px;
	width: 460px;
	color: #1751c1;
	top: 1%;
	left: 11%;
	-ms-transform: rotate(-2deg); /* IE 9 */
	transform: rotate(-2deg);
	padding: 35px;
}
.intermediaire p{
	font-family: 'Kalam', cursive;
	font-size: 18px;
	text-align: left;
	width: 590px;
	color: #5b5b5b;
	top: 0%;
	left: 3%;
	position: absolute;	
	z-index: 30;
	padding: 30px;
	background-color: white;
	-ms-transform: rotate(-1deg); /* IE 9 */
	transform: rotate(-1deg);
}
.intermediaire small{padding-left: 150px}
.intermediaire div {position: absolute; display: none;}
.intermediaire em{color: #e23494; font-family: 'Kavoon', cursive; font-style: normal; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8); padding: 3px;}
.intermediaire > div img{vertical-align: middle}
.pink{color: #CE058E; font-weight: bold;}
.purple{color: #B123FA; font-weight: bold;}
#goto{cursor: pointer}
#lieu-Alexandria{top: 13%; left: 82%; width: 120px}
#lieu-Port-Said{top: 80%; left: 66%; width: 150px}
#lieu-Serabit-el-Khadim{top: 83%; left: 38%; width: 210px}
#lieu-Cairo{top: 63%; left: 62%; width: 150px}
#lieu-El-Faiyum{top: 25%; left: 56%; width: 110px}
#lieu-Ras-Zaafarana{top: 69%; left: 45%; width: 140px}
#lieu-Beni-Hasan{top: 52%; left: 28%; width: 180px}
#lieu-Abydos{top: 33%; left: 38%; width: 90px}
#lieu-Dendera{top: 43%; left: 26%; width: 180px}
#lieu-Luxor{top: 63%; left: 20%; width: 180px}
#lieu-Aswan{top: 47%; left: -4%; width: 180px}
#lieu-Philae{top: 34%; left: 0%; width: 90px}
#lieu-Abu-Simbel{top: 5%; left: 2%; width: 140px}

/*GAMEPLAY ==========*/
.gameplay{
	background: url('img/gameplay.png');
	overflow: auto;
 }
.gameplay em{color: #e23494; font-family: 'Kavoon', cursive; font-style: normal; font-size: 35px}
#level-mark{position: absolute; top: 7%; left: 4%; width: 150px}
#lieu-mark {position: absolute; top: 9%; left: 39%; width: 370px}
#gameboard {width: 349px; height: 227px; background-image:url("img/sushis/1.gif"); background-repeat:space; position: absolute; top: 31%; left: 40%}
.gameplay-answer{
	padding:3px;
	cursor:pointer;
	/*opacity: 0;*/
	transition: .5s ease;
}
#t1, #t2, #t3, #t4, #t5, #t6, #t7, #t8, #t9, #t10, #t11, #t12, #s1, #s2, #s3, #s4,#s5, #s6, #s7, #s8, #s9, #s10, #s11, #s12 {
	position: absolute; 
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
}
#t1, #s2, #t3, #s4, #t5, #s6 {top: 30.3%}
#s7, #t8, #s9, #t10, #s11, #t12 {top: 44.6%}
#s1, #t2, #s3, #t4, #s5, #t6 {top: 58.9%}
#t7, #s8, #t9, #s10, #t11, #s12 {top: 73.1%}
#t1, #t7, #s1, #s7 {left: 39.5%}
#t2, #t8, #s2, #s8 {left: 48.2%}
#t3, #t9, #s3, #s9 {left: 56.9%}
#t4, #t10, #s4, #s10 {left: 65.7%}
#t5, #t11, #s5, #s11 {left: 74.2%}
#t6, #t12, #s6, #s12 {left: 83%}

#tofind{
	width: 120px;
	color: #fbe8af;
	position: absolute;
	top: 21%;
	left: 5.5%;
	line-height: 100%;
}
#tofind em{
	color: #fff;
}
.mini-characters {margin-bottom: 30px}
.mini-characters img{width: 30px; padding: 0 3px 1px 0}
.mini-characters img:nth-child(n+4){visibility: hidden;}

/*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: 256px;
 	height:24px;
 	right: 16%;
 	top: 20%;
 }
 .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: 250px;
	display: block;
	font-size: 14px;
	text-shadow: 0px 0px 2px #414141;
}

.failure{	
	background:url('img/failure-final.png');
}
.failure p{	
	font-family: 'Kavoon', cursive;
	font-size: 32px;
	width: 370px;
	position: absolute;
	top: 26%;
	left: 24%;
}