/**************
GENERAL 
**************/
*{
	user-select: none;
	-khtml-user-select : none;
	-webkit-user-select : none;
	-moz-user-select : -moz-none;
	-ms-user-select : none;
}


body.page-jeu{
	background-color:#0071BC !important;
}

.page-jeu #main{
	padding:0;
	background-color:#0071BC !important;
}


#jeu-04 #liens a{
	color:#83b782;
}
/**************
AIDE 
**************/

#aide{

}

#liens{
	
}
/**************
ENTETE 
**************/

#entete{

}
#infos{
	z-index: 1000000000;
}

/**************
JEU 
**************/

#outils{
	position :absolute;
	bottom:20px;
	z-index:2000;
	width: 270px;
	text-align: right;
	right: 0px;
	  
}


#outils .nav-link{
	background-color:#83b782;
	color:white;
	border-radius: 100%;
	padding: 0.3em 0.5em 0.08em;
	font-size: 3em;
	margin-right:0.4em;
	
}


#navigation_especes{
	display:none;
}
#lejeu{
	
	width:100vw;
	height:100vh;
	display:flex;
	background-color:#0071BC;
	overflow:hidden;
}
#carte{
	
	width:100%;
	height:100%;
	text-align:center;
	transition: transform 1s;
}


#fond_carte{
	
	position: absolute;
	z-index:50;
	top:0;
	left:0;

	/*width:100%;
	height:100%;*/

}
#carte_pf{
	height: 100%;
	width: 100%;
}

#spots{
	display:block;
	z-index:100;
	width:100%;
	height:100%;
	position: absolute;
}
.spot{
	background-color:red;
	position:absolute;
	color:white;
	width:70px;
	height:70px;
	display:flex;
	flex-direction: column;
	align-content: center;
	justify-content:center; 
	border-radius: 100%;
	font-size:10px;
	line-height: 10px;
	overflow:hidden;
	text-align:center;
	opacity:0.6;
}

.spot i{
	font-size:16px;
	margin-bottom:5px;
}

.spot[data-id="1"]{
	top:300px;
	left:300px;
}
.spot[data-id="2"]{
	top:200px;
	left:1200px;
}
.spot[data-id="3"]{
	top:800px;
	left:1000px;
}
.spot a{
	color:white;
}


/**************
FICHE 
**************/
#fiche{
	padding:0px 20px 20px 20px;
	text-align:left;
	transition: left 0.6s, box-shadow 0.6s;
	color:white;
	
}
#fiche.cache{
	left:-600px;
	transition: left 0.6s, box-shadow 0.6s;
	box-shadow: rgba(0,0,0,0) 0px 0px 0px;
}


.repondre, #suivant{
	background-color: #aab100 !important;
}

#fiche .fermer{
	text-align:right;
}
#fiche .fermer a{
	color:white;
}
#fiche img{
	width:100%;
	
}
#fiche .legende {
     color: black;
    padding: 8px 5px 0px 5px;
    border-left: 4px solid #b1b031;
    padding-top: 30px;
    padding-bottom: 0px;
    z-index: 100000000000000;
    position: relative;
    top: -20px;
}
#fiche .legende h5{
	width: max-content;
    padding-left: 20px;
    margin: 0px;
}

/*#fiche>table tr{
	border:0px !important;
	padding: 10px 0px;
}
#fiche .informations tr:not(:last-child) {
	border-bottom:1px solid rgba(255,255,255,0.06) !important;
}

#fiche table tr > td:first-child{
	vertical-align:top;
	padding-right:15px;
}
#fiche table tr > td:last-child{
	font-weight: bold;
	
}
#fiche table td{
	padding: 10px 0px;
}*/
#fiche h1.nom{
	    line-height: 0.9em;
	    color:#b1b031
}

#fiche h3{
	margin-top:10px;
}
#fiche h4{
	margin-top:30px;
}

#fiche .lat{
	font-style: italic;
}


.titre_espece{
	display: flex;
	justify-content:space-between;
	padding-top: 40px;
    	padding-bottom: 40px;
}
#photos_especes{
	width:50%;
	float:right;
	margin-left: 20px;
}

#fiche .informations .info_cle{
	background-color: #d9dde0;
	border-radius: 10px;
	padding: 10px 10px 6px 10px;
	float: left;
	font-size: 16px;
	font-weight: bold;
	width:250px;
	margin-right:20px;

}
p.infos1, p.infos2{
	color:black;
}
.info_val{
	font-size:18px;
	position: relative;
   	top: 10px;
}
#fiche .informations .lat{
	font-style: italic;
}
/**************
ALERTE 
**************/

#alerte{
	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.montre{
	transform: scale(1);
	opacity:1;
}



#alerte .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:60%;
}

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


/*****************
NAVIGATION ESPECES
******************/

#navigation_especes{
	width:100vw;
	height: 100vh;
	position:absolute;
	z-index:5000000000000;
	background-color:white;
	top:0px;
	left:0px;
	color:black;
	
}
#navigation_especes .fermer{
	color:#333436;
	font-size: 2.5em;
	margin-left:20px;
	
}

#navigation_especes h2{

}

#navigation_especes .esp-ile{
	text-transform: capitalize;
	font-weight: bolder !important;
}


#catalogue{
	display:flex;
	align-items: stretch;
	justify-content: space-between;
	height: inherit;
}
#types{
	overflow-y: scroll;
	flex-grow:1;
	overflow-x: hidden;
	background-color: #333436;
	color:white;
	padding:20px 0px 10px 0px;
}
#types > ul{
	padding: 0px;
}
#types h5{
	font-weight: bolder;
	padding-right:10px;
	color:#b1b031;
	text-transform: uppercase;
}
#types > ul > li{
	list-style-type: none;
	padding: 35px 0px 25px 20px;
}

#types > ul >li:not(:last-child){
	border-bottom: 1px solid rgba(255,255,255,0.2);
	
}	

#types .icon-angle-right{
	float:right;
	transform:rotate(90deg);
}
#types > ul >li .nb{
	background-color:#b1b031;
	color:white;
	border-radius: 5px;
	margin-right:0px;
	float:right;
	padding:3px;
	font-size:16px;
	position: relative;
    	bottom: 3px;
}
#types .sstype{
	    padding-top: 20px;
	    padding-left:0px;
}

#types .sstype li{
	padding:20px 0px 20px 5px;
	list-style-type: none;
	font-size:20px;
}
#types .sstype .nb{
	background-color:white;
	color:#333436;
	border-radius: 5px;
	margin-right:10px;
	float:right;
	padding:3px;
	font-size:16px;
	font-weight: bold;
	position: relative;
    	bottom: 3px;

}
.sstype li.envue, .toutes.envue{
	background: linear-gradient(to right, transparent, #b1b031);
	transition: background-color 0.8s;
}


.toutes{
	padding-top: 10px;
	padding-bottom: 20px;
	font-size: 40px;
}

#liste{
	padding:20px 0px 20px 20px;
	position:relative;
	width:25%;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: #b1b031;
	color:white;
}


#liste ul{
	padding:0px;
}

.media-body{
	padding-right:10px;
}

#espece{
	padding:20px 10px;
	overflow-y: scroll;
	width:60%;	
}
.informations p{
	margin-bottom:30px;
}
.media{
	overflow:hidden;
	padding-top:10px;
	padding-bottom:10px;
	transition: background-color 0.8s;
}

.media:not(:last-child){
	border-bottom: 1px solid rgba(255,255,255,0.2);
	
}	
.media.envue{
	background: linear-gradient(to right, transparent, rgba(255,255,255,0.1) 50%);
}

.media img, .carousel{
	
	background-color: white;
}

.media h5{
	font-weight: bolder;
}




/*****************
QUESTION
*****************/
#question{
	pointer-events:none;
	z-index:2100;
	padding:15px 20px 0px 20px;
	margin-right:75px;
	border-radius: 100px;
	position:absolute;
	top:75px;
	left:25px;
	display:flex;

}

.question{
	color:black;
	font-size:3em;
	line-height:1em;
	color:white;
	text-shadow: black 2px 2px 11px;	
}




/********* SPOTS ********/

.ile_selection{
	opacity:1 !important;
}


/*** Tuamotu 
.ahe{top:450px;left:300px;}
.ahunui{top:300px;left:100px;}
.akiaki{top:500px;left:300px;}
.amanu{top:600px;left:160px;}
.anaa{top:700px;left:600px;}
.anuanuraro{top:0000px;left:0000px;}
.anuanurunga{top:0000px;left:0000px;}
.apataki{top:0000px;left:0000px;}
.aratika{top:0000px;left:0000px;}
.arutua{top:0000px;left:0000px;}
.faaite{top:0000px;left:0000px;}
.fakahina{top:0000px;left:0000px;}
.fakarava{top:0000px;left:0000px;}
.fangatau{top:0000px;left:0000px;}
.fangataufa{top:0000px;left:0000px;}
.hao{top:0000px;left:0000px;}
.haraiki{top:0000px;left:0000px;}
.hereheretue{top:0000px;left:0000px;}
.hikueru{top:0000px;left:0000px;}
.hiti{top:0000px;left:0000px;}
.katiu{top:0000px;left:0000px;}
.kauehi{top:0000px;left:0000px;}
.kaukura{top:0000px;left:0000px;}
.makatea{top:0000px;left:0000px;}
.makemo{top:0000px;left:0000px;}
.manihi{top:0000px;left:0000px;}
.manuhangi{top:0000px;left:0000px;}
.marokau{top:0000px;left:0000px;}
.marutea-nord{top:0000px;left:0000px;}
.mataiva{top:0000px;left:0000px;}
.moruroa{top:0000px;left:0000px;}
.motutunga{top:0000px;left:0000px;}
.napuka{top:0000px;left:0000px;}
.nengonengo{top:0000px;left:0000px;}
.niau{top:0000px;left:0000px;}
.nihiru{top:0000px;left:0000px;}
.nukutavake{top:0000px;left:0000px;}
.nukutepipi{top:0000px;left:0000px;}
.paraoa{top:0000px;left:0000px;}
.pinaki{top:0000px;left:0000px;}
.pukapuka{top:0000px;left:0000px;}
.pukarua{top:0000px;left:0000px;}
.rangiroa{top:0000px;left:0000px;}
.raraka{top:0000px;left:0000px;}
.raroia{top:0000px;left:0000px;}
.ravahere{top:0000px;left:0000px;}
.reao{top:0000px;left:0000px;}
.reitoru{top:0000px;left:0000px;}
.rekareka{top:0000px;left:0000px;}
.taenga{top:0000px;left:0000px;}
.tahanea{top:0000px;left:0000px;}
.taiaro{top:0000px;left:0000px;}
.takapoto{top:0000px;left:0000px;}
.takaroa{top:0000px;left:0000px;}
.takume{top:0000px;left:0000px;}
.tatakoto{top:0000px;left:0000px;}
.tauere{top:0000px;left:0000px;}
.tekokota{top:0000px;left:0000px;}
.tematangi{top:0000px;left:0000px;}
.tepoto-nord{top:0000px;left:0000px;}
.tepoto-sud{top:0000px;left:0000px;}
.tikehau{top:0000px;left:0000px;}
.tikei{top:0000px;left:0000px;}
.toau{top:0000px;left:0000px;}
.tuanake{top:0000px;left:0000px;}
.tureia{top:0000px;left:0000px;}
.vahitahi{top:0000px;left:0000px;}
.vairaatea{top:0000px;left:0000px;}
.vanavana{top:0000px;left:0000px;}
***/
/*** Gambier 
.akamaru{top:0000px;left:0000px;}
.angakauitai{top:0000px;left:0000px;}
.aukena{top:0000px;left:0000px;}
.kamaka{top:0000px;left:0000px;}
.makaroa{top:0000px;left:0000px;}
.mangareva{top:0000px;left:0000px;}
.manui{top:0000px;left:0000px;}
.maria-est{top:0000px;left:0000px;}
.marutea-sud{top:0000px;left:0000px;}
.maturei-vavao{top:0000px;left:0000px;}
.morane{top:0000px;left:0000px;}
.taravai{top:0000px;left:0000px;}
.temoe{top:0000px;left:0000px;}
.tenararo{top:0000px;left:0000px;}
.tenarunga{top:0000px;left:0000px;}
.vahanga{top:0000px;left:0000px;}
.totegegie{top:0000px;left:0000px;}
***/
/*** Australes 

.maria{top:0000px;left:0000px;}
.marotiri{top:0000px;left:0000px;}
.raivavae{top:0000px;left:0000px;}
.rapa{top:0000px;left:0000px;}
.rimatara{top:0000px;left:0000px;}
.rurutu{top:0000px;left:0000px;}
.tubuai{top:0000px;left:0000px;}
***/
/*** Iles du vent 

.maiao{top:0000px;left:0000px;}
.mehetia{top:0000px;left:0000px;}
.moorea{top:0000px;left:0000px;}
.tahiti{top:200px;left:200px;}
.tetiaroa{top:0000px;left:0000px;}
***/
/*** Iles sous le vent 

.bora-bora{top:0000px;left:0000px;}
.huahine{top:0000px;left:0000px;}
.manuae{top:0000px;left:0000px;}
.maupihaa{top:700px;left:500px;}
.maupiti{top:0000px;left:0000px;}
.bellinghausen{top:0000px;left:0000px;}
.tahaa{top:0000px;left:0000px;}
.tupai{top:0000px;left:0000px;}
***/
/*** Marquises 

.eiao{top:0000px;left:0000px;}
.fatu-hiva{top:0000px;left:0000px;}
.fatu-huku{top:0000px;left:0000px;}
.hatu-iti{top:0000px;left:0000px;}
.hiva-oa{top:0000px;left:0000px;}
.mohotani{top:0000px;left:0000px;}
.motu-one{top:0000px;left:0000px;}
.nuku-hiva{top:0000px;left:0000px;}
.tahuata{top:0000px;left:0000px;}
.ua-huka{top:0000px;left:0000px;}
.ua-pou{top:0000px;left:0000px;}

***/