html { 
  margin:0;
  padding:0;
  background: url(../img/fond_site.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  height: 100%
}

body{ 
	 margin:0;
  padding:0;
	font: normal 13px/20px Arial, Helvetica, sans-serif; word-wrap:break-word;
	color: #eee;
	font-family: 'Rajdhani', sans-serif;
}

header{
 margin:0;
  padding:0;
  background: url(../img/header_bckg.jpg) repeat-x bottom ; 
height: 207px;
width: 100%;
}
footer{
	position: fixed;
	bottom: 0;
 margin:0;
  padding:0;
  background: url(../img/footer_bckg.png) repeat-x bottom ; 
height: 207px;
width: 100%;
}
#echaffaudage{
	position: fixed;
	top: 0;
	left:0;
 margin:0;
  padding:0;
  background: url(../img/echaffaudage.png) no-repeat top ; 
height: 207px;
width: 489px;
}
#grue_hype_container{
	position: fixed;
	top: -15px;
	right:0px;
 margin:0;
  padding:0;
   
height: 207px;

}
#cone{
	position: fixed;
	top: 110px;
	left:250px;
 margin:0;
  padding:0;
  background: url(../img/cone.png) repeat-x left ; 
height: 84px;
width: 100%;
}

#chantier_hype_container{
position: fixed;
	top: 90px;
	left:0px;
 margin:0;
  padding:0;
height: 100px;
width: 200px;
}
#marchecaisse_hype_container{
position: fixed !important;
    bottom: 100px;
    left:0px;

}
#marchecaissepetit_hype_container{
position: fixed ;
    bottom: 100px;
    left:0px;
	display:none;
}

#cable2{
right:100px;

	position:fixed;
}

#marceechelle_hype_container{
position: fixed !important;
    bottom: 100px;
    left:0px;
}

#marcheechellepetit_hype_container{
position: fixed ;
    bottom: 100px;
    left:0px;
	display:none;
}

#button_hype_container{
	
position: fixed;
border:none;
 margin:auto;
  padding:0;
  margin-top: 10vh; /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
height: 100px;
width: 100px;
left: 50%;
margin-left:-50px;
z-index:20;
  background: url(../img/push.png) no-repeat center center ; 
}
#button_hype_container:hover{
	
position: fixed;
 margin:auto;
  padding:0;
  margin-top: 10vh; /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
height: 100px;
width: 100px;
left: 50%;
margin-left:-50px;
z-index:20;
  background: url(../img/push_hover.png) no-repeat center center ; 
}



#fond_vert{
	left:0px;
	position:fixed;
	background: #94c11f;
	height: 1000px;
	width:100%;
	opacity: 0.7;
}

#countdown{
	width: 465px;
	height: 112px;
	text-align: center;
	margin: auto;
	    margin-top: 450px;
	position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}


#countdown #tiles{
	position: relative;
	
}

#countdown #tiles > span{
	width: 92px;
	max-width: 92px;
	font: bold 48px 'Rajdhani', Arial, sans-serif;
	text-align: center;
	color: #111;
	margin: 0 7px;
	padding: 18px 0;
	display: inline-block;
	position: relative;
	opacity: 0.5;
}


#countdown .labels{
	width: 100%;
	height: 25px;
	text-align: center;
	position: absolute;
	bottom: 8px;
	opacity: 1;
}

#countdown .labels li{
	width: 102px;
	font: bold 15px 'Rajdhani', Arial, sans-serif;
	color: #f47321;
	text-align: center;
	text-transform: uppercase;
	display: inline-block;
}
#bonhomme1_hype_container{
position: fixed !important;
    bottom: 100px;
    right:500px;
    z-index: 1;
}

#persofini_hype_container{
position: fixed !important;
    bottom: 100px;
    left:50%;
    margin-left:-100px;
    z-index: 15;

}


#bonhommelave_hype_container{position: fixed !important;
    bottom: 100px;
    right:500px;
    z-index: 1;}

#peintre_hype_container{
position: fixed !important;
    bottom: 120px;
    left:625px;
    z-index: 1;
}




#potpeinture_hype_container{
position: fixed !important;
    bottom: 100px;
   left:800px;
  
    z-index: 5;
}

#caisseoutils_hype_container{
position: fixed !important;
    bottom: 100px;
   left:550px;
  
    z-index: 1;
}

#lampe_hype_container{
	right:-250px;
	position:fixed;
	z-index: 3;
}
#lampe2_hype_container{
	left:-250px;
	position:fixed;
	z-index: 3;
}

#ampoulefixe_hype_container{
	left:0;

	position:fixed;
	z-index: 4;
}
#echelle{width:100px; right:500px; bottom:50px; position:fixed;}

@media only screen and (max-width: 640px) { 
#echelle{width:100px; left:100px; bottom:50px;position:fixed;}

#ampoulefixe_hype_container{
	right:-100px;}
  	#echaffaudage{
  		display: none;
}

#lampe_hype_container{
	right:-320px;
	position:fixed;	
}
#button_hype_container{display:none;}
#cable_hype_container{display: none;}



#countdown #tiles > span{}

#countdown .labels li{}

#marchecaisse_hype_container{
display:none;

}
#marchecaissepetit_hype_container{
position: fixed !important;
    bottom: 100px;
    left:0px;
	display:block;
}
#marceechelle_hype_container{display:none;}

#marcheechellepetit_hype_container{
position: fixed !important;
    bottom: 100px;
    left:0px;
	display:block;
}

#caisseoutils_hype_container{display: none;}

#lampe_hype_container{
	display: none;
}
#lampe2_hype_container{
	left:-350px;
	position:fixed;
	z-index: 3;
}


#peintre_hype_container{
position: fixed !important;
    bottom: 120px;
    left:125px;
    z-index: 1;
}
#potpeinture_hype_container{
position: fixed !important;
    bottom: 100px;
   left:300px;
  
    z-index: 5;
}

#bonhomme1_hype_container{
position: fixed !important;
    bottom: 100px;
    left:150px;
    z-index: 1;
}

#bonhommelave_hype_container{position: fixed !important;
    bottom: 100px;
    left:100px;
    z-index: 1;}


}



@media only screen and (max-height: 800px) { 
	#countdown{
	margin-top: 220px;
}
header{display: none;}
}