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

#fond{
  background: url('../images/fondPiscine.jpg') no-repeat center fixed, url('../images/fondPiscineLow.jpg') no-repeat center fixed;
  background-size:cover; 
}
.logosRonds{border-color:#b21b1b;}
#declencheurGauche:hover>.flecheGauche , .declencheurGauche:hover>.flecheGauche {color:#b21b1b; 
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
-ms-transition:color 0.5s ease-out;
-o-transition:color 0.5s ease-out;
transition: color 0.5s ease-out;}
#declencheurDroit:hover>.flecheDroite , .declencheurDroit:hover>.flecheDroite {color:#b21b1b; 
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
-ms-transition:color 0.5s ease-out;
-o-transition:color 0.5s ease-out;
transition: color 0.5s ease-out;}
.flecheDroite, .flecheGauche, .gris{color:#ccc;}
.gris{color:#ccc!important;}
#page3 .flecheGauche, #page3 #situation3{opacity:0.4!important;}

#page1 article ul li h2{font-size:1em;}
#page1 aside{padding:10px 44px 45px; background-color:rgba(0,0,0,0.1); margin-top:-210px;}

#page2 article ul li h2{font-size:1.1em;}
#page2 aside{margin-top:-285px; margin-left:650px; width:25%;position:absolute; z-index:24; background-color:rgba(120,120,120,0.3); padding:5px 5px 20px 15px; font-size:1.1em; color:#fff;}
#marge{width:600px; height:340px; margin:auto; background-color: rgba(0, 0, 0, 0.0); padding:0px 10px 60px 10px; overflow:visible; }
#contenant{ height:400px;}

#blocAnnexe ul{ list-style:none;}
#blocAnnexe { padding:10px 44px 45px;}
.blocAnnexe1{margin-top:-272px; width:20%; }
.verbatim2{}
.verbatim2 ul{margin-top:10px;}
.verbatim2 ul li{margin-top:10px;}
ul{list-style:none;}
.decale{margin-left:10px;}
#contenuArticle{ height: 400px; margin-top: -90px;position: absolute; width: 337px; z-index: 20;}
.reperes{letter-spacing:1.1px; font-size:1.1em; color:#fff; margin-bottom:15px; margin-top:10px;padding-bottom:10px; border-bottom:solid 1px #fff;}

a, a:link, a:visited, a:active{color:#fff;  text-decoration:none;}
a:hover{color:#b21b1b; text-decoration:none;-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
transition: all 0.4s ease-out;}

/********************************* diaporama *******************************/
#diaporama img {
	position: absolute;
	
}
#marcheArret {
    font-size: 18px;
    margin-top: 405px;
	margin-left:276px;
    position: absolute;
    text-align: center;
    width:50px;
    z-index: 1800;
	cursor:pointer;
	color:#ffffff;
}
.gros{font-size:16px;}
#machinerie{}
#imagePrecedente{text-align:left; position:absolute; z-index:801; margin-top:0px; margin-left:0px; cursor:pointer; font-weight:bold; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#ffffff; width:300px; height:400px;}
#imageSuivante{ position:absolute; z-index:802;  margin-left:300px; width:300px; height:400px; cursor:pointer; font-weight:bold;font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#ffffff; }
#boutonAvance, #boutonRecule{visibility:hidden; padding-top:150px; position:absolute; font-size:5em; font-family:'Source Sans Pro'; padding-left:10px; font-weight:lighter; opacity:0.8;}
#boutonAvance{margin-left:240px;}

#lectureStop{position:absolute; margin-top:425px; margin-left:260px; color:#555; font-size:0.8em;}

@media screen and (max-width:1010px) {
	#global{max-width:100%;}
	#page1, #page2{max-width:90%; margin:50px auto!important;}
	.reperes{border:none;}
	#page1 aside{border:solid 1px #fff;}
	#page2 aside{display:none!important;}
	#marge { background-color:rgba(0,0,0,0.7); height:auto!important; max-width:100%!important; padding:50% 0;;}
	#diaporama{width:600px!important; margin:auto!important; max-width:100%!important;}
}

@media screen and (max-width:500px) {
	#page1 article{margin-top:100px!important;}
	#page1 aside{width:70%!important;}	
	#marge{padding:70% 0;}

}
@media screen and (max-width:500px) and (orientation:landscape){
	#global .logosRonds{display:none;}
}
@media screen and (max-width:1200px) and (orientation:landscape){
		 #fond{ background: url('../images/800/fondPiscine.jpg') no-repeat ;}
}
@media screen and (max-height:550px){
			/* #fond{ background: url('../images/500/fondPiscine.jpg')no-repeat ;}*/
}