@charset "UTF-8";
/* CSS Document */

html {overflow-y: scroll;}

body{ background: url(../img/losanges.png); margin:0;padding: 0;}

div {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

audio {
height:0px!important;
width:0px!important;
display:none;
}

#musique1 {
height:0px!important;
width:0px!important;
display:none;
}
#musique2 {
height:0px!important;
width:0px!important;
display:none;
}
#musique3 {
height:0px!important;
width:0px!important;
display:none;
}
#musique4 {
height:0px!important;
width:0px!important;
display:none;
}

@media screen and (max-width: 1025px) {
  #contenu{ 
	  width:1024px;
	  height:670px; 
	  overflow:hidden;
	  min-width: 1024px;
	  min-height: 670px;
  }
  
 body{ background: url(); margin:0;padding: 0;min-width: 1024px;min-height: 670px;}
 
 #container_scene{ 
 	 width:1024px;
	 height:670px;
	 position:absolute;
	  min-width: 1024px;
	  min-height: 670px;
  
  }
}

@media screen and (min-width: 1026px) {
#contenu{ 

  position:absolute;
  margin-top:-384px;
  top: 50%;
  margin-left:-512px;
  left: 50%;

  width:1024px;
  height:670px; 
  overflow:hidden;


  -webkit-box-shadow: 0px 3px 13px rgba(50, 50, 50, 0.94);
  -moz-box-shadow:    0px 3px 13px rgba(50, 50, 50, 0.94);
  box-shadow:         0px 3px 13px rgba(50, 50, 50, 0.94);

  }
}


#bouton_map{ 

	  width:76px;
	  height:77px;
	  position:absolute;
	  z-index: 99;
	  left: 474px;
	  top: 584px;
	  bottom:0;
	  background-image:url(../img/b_map.png);

}

#bouton_temp{ 

	  width:70px;
	  height:70px;
	  position:absolute;
	  z-index: 99;
	  left: 574px;
	  top: 620px;
	  bottom:0;
	  background-color:#000000;

}

#container_map{ 
	 width:1024px;
	 height:670px;
	 position:absolute;
	 z-index: 2;
	 opacity:0;
	 top : -5000px;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
  }
  

#container_scene{ 
 	 position:relative;
	 overflow:hidden;
  
  }
 
 #fade{
	 	 width:1024px;
	 height:670px;
	 position:absolute;
	 z-index: 2;
	 opacity:0;
	 top : 0px;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	background-color:#000000;

	 }
 
 #container_intro{
  background: url("../img/bd.jpg");
   	 position:relative;
	 overflow:hidden;
	 	 width:1024px;
	 height:670px;
	 background-position: 0px 0px;
	 	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	background-repeat: no-repeat;
background-color: #e4d7c6;
	 
}

#bout_skip{

	  width: 200px;
	  height: 20px;
	  position: absolute;
	  z-index: 999;
	  left: 433px;
	  top: 651px;
	
	}
	
	#bout_skip a{
	font-family: arial;
	font-size: 18px;
	color:#000;
	
	}

#container_tablette{
	position:absolute;
	z-index:99;
	overflow:hidden;
	top: 610px;
	left: 666px;
	width: 350px;
	height: 60px;
}

#container_tabletteEcus{
	position:absolute;
	z-index:99;
	overflow:hidden;
	top: 620px;
	left: 10px;
	width: 180px;
	height: 38px;
}

#cadre{
	background-image:url(../img/cadre.png);
	width:1024px;
	height:670px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 98;
	pointer-events: none;
	}
	
	#clock{
	 position: absolute;
	top: 37px;
	left: 75px;
	z-index: 99;
	font-family: arial;
	font-size: 18px;
		}

canvas {
     position:absolute;
     pointer-events: none;
	 overflow:hidden;
	 z-index:99;
}

#imgTransition{
	position:absolute;
	margin-left: auto;
	margin-right: auto;
	margin-top: 124px;
	display: block;
	clip: rect(1024px, 0, 0, 644px);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	pointer-events: none; 
	z-index:999;
	transform: translate3d(0,0,0);
	background-color:#000000;
	width:1024px;
	height:644px;
	
}



#load_back{
	position: absolute; 
	left: 50%;
	z-index:999; 
	margin-top:-384px;
	top: 50%;
   	width:1024px;
  	height:670px; 
	margin-left: -511px;

	}
	
	
#load_anim{
position: absolute;
 left: 50%;
 z-index:999; 
  margin-top:-384px;
  top: 50%;
	}



#ballon{
	-webkit-transition: all 100s linear;
	-moz-transition: all 100s linear;
	-ms-transition: all 100s linear;
	-o-transition: all 100s linear;
	transition: all 100s linear;
	}

#fog1{
	-webkit-transition: all 40s linear;
	-moz-transition: all 40s linear;
	-ms-transition: all 40s linear;
	-o-transition: all 40s linear;
	transition: all 40s linear;
	}


.picCasseUp{
	-moz-transform:rotate(-45deg);  
					-webkit-transform:rotate(-45deg);  
					-o-transform:rotate(-45deg);  
					-ms-transform:rotate(-45deg);  
  
}

.picCasseDown{
	-moz-transform:rotate(0deg);  
					-webkit-transform:rotate(0deg);  
					-o-transform:rotate(0deg);  
					-ms-transform:rotate(0deg);  
  
}



#imageLongueVue{
	width: 470px;
	height: 470px;
	border-radius: 50%;
	margin-left: 160px;
	margin-top: -50px;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	opacity: 0;
	transform: scale(0);
	-webkit-backface-visibility: hidden;
	
}

.imageLongueVue9Ouvert{
	width: 470px;
	height: 470px;
	border-radius: 50%;
	margin-left: 160px;
	margin-top: -50px;
	opacity: 1;
	transform: scale(1);
}



.chiffreScore{
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	color:#FFFFFF;
	font-weight:bold;
}

.scoreFinal{
	font-family:Arial, Helvetica, sans-serif;
	font-size:36px;
	color:#FFFFFF;
	font-weight:bold;
}


#boutonRejouer{
	cursor: pointer;
}

#boutonFacebook{
	cursor: pointer;
}

#boiteFeedFace{
	border-top:solid;
	border-top-width:30px;
	border-top-color:#6d84b4;
	
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
margin-left: 40px;
margin-top: 100px;
}

.txtBoiteFeedFace{
		font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#000;
	font-weight:bold;
	font-weight: bold;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
text-align: center;
	}



#boutonFermeFace {
	cursor: pointer;
}


#boutonUqtr{
	cursor: pointer;
}