/**************
GENERAL 
**************/
*{

}
#jeu-07{
	
	background-color:#78cdf4;
	transform: translateZ(0);

}
#jeu-07.page-jeu{
	background:#78cdf4 url(../img/bg-ile.svg) bottom center no-repeat !important;
	background-size: 100% 100% !important;
	transform: translateZ(0);
}
#jeu-07 #liens a{
	color:#a0bf37;
}
/**************
AIDE 
**************/
#aide{
	transform: translateZ(0);
	
}
#jeu-07.page-jeu #aide{
	transform: translateZ(0);
	z-index:10000000000;
}


.help{
	text-align:center;
}
.help img{
	width:800px;
	height:auto;	
}
.help h3{
	    padding: 40px 20% 40px 20%;

}
/**************
ALERTE 
**************/

#alerte_nouvelle_espece{
	display:flex;
	width:100%;
	height:100vh;
	align-items: center;
	justify-content: center;
	background-color:rgba(0,0,0,0.4);
	position:fixed;
	z-index:10000000000;
	padding:100px;
	transform: scale(1.2);
	opacity: 0;
	transition: opacity 0.4s, transform 0.3s;
}


#alerte_nouvelle_espece.montre{
	transform: scale(1);
	opacity:1;
}



#alerte_nouvelle_espece .contenu{
	-webkit-box-shadow: 0px 0px 160px 20px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 160px 20px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 160px 20px rgba(0,0,0,0.6);
	background-color: white;
	padding:50px;
	border-radius: 50px;
	display:flex;
	flex-direction: column;
	text-align:center;
	width:100%;
}

#alerte_nouvelle_espece .contenu h2{
	color:#aab100;
	font-family:DIN Bold;
	font-size:50px;
}
#alerte_nouvelle_espece .contenu h4{
	width:85%;
	margin:auto;
}


/**************
PRESENTATION 
**************/

#presentation{
	
}


#visuel{
	
}

#especes{
	
	height:85vh;
	position:relative;
	overflow: hidden;
}

.espece{
	list-style-type: none;
	width:60px;
	height:60px;
	position:absolute;
	left:-100px;
	top:-100px;
	z-index:2000000;
	-khtml-user-select : none !important;
	-webkit-user-select : none !important;
	-moz-user-select : -moz-none !important;
	-ms-user-select : none !important;
	user-select : none !important;
	transform: translateZ(0);
}

.espece img{
	width:100%;
	-khtml-user-select : none !important;
	  -webkit-user-select : none !important;
	  -moz-user-select : -moz-none !important;
	  -ms-user-select : none !important;
	  user-select : none !important;
}

.original{
	opacity:0;
}
.disparait{
	animation-name: disparition;
	animation-duration: 0.2s;
	opacity:1;
	animation-fill-mode: forwards;
}

.apparait{
	animation-name: apparition;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}


@keyframes disparition{

	from {
		opacity:1;
		transform:scale(1);
	}

	to {
		opacity:0;
		transform:scale(1.3);
		
	}

}
@keyframes apparition{

	0% {
		opacity:0;
		transform:scale(0);

	}
	80%{
		opacity:1;
		transform:scale(1.2);
	}
	100% {
		opacity:1;
		transform:scale(1);
	}
	

}

/********* MOBILES *********************/
/* Large screens (1405px upwards) */
@media only screen and ( min-width: 1405px ) { 

}

/* Laptops and desktops (1100-1405px) */
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) { 

}

/* Tablets in landscape mode (981-1100px) */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) { 
	
	#alerte_nouvelle_espece{
		padding:10px !important;
	}
	#alerte_nouvelle_espece .contenu{
		width:90% !important;
	}
}

/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {

}

/* Smartphones in landscape mode (480-768px) */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {

}

/* Smartphones in portrait mode (0-479px) */
@media only screen and ( max-width: 479px ) {

}