@font-face {font-family: "ARIALTTF"; src: url('../inclure/arial.ttf');}
@font-face {font-family: "ARIALEOT"; src: url('../inclure/arial.eot');}
@font-face {font-family: "G"; src: url('../inclure/Ruluko-Regular.ttf');}
@font-face {font-family: "Satisfy"; src: url('../SiteFonts/Satisfy/Satisfy-Regular.ttf');}

/* global au site */
h1.titre       { position:relative; text-align: center; background-color: green; color: white; padding: 10px 3px 10px 3px;   margin: 0px; font-size: 40px; letter-spacing: 3px; }
h2.s1 { position:relative; text-align: center; background-color: black; color: white; padding: 10px 3px 10px 30px; margin: 0px; font-size: 30px; letter-spacing: 3px; }

nav#navigation {   }				
nav#navigation input[type="button"] { display: inline-block; margin: 30px 20px 20px 20px; border: none; width: 250px; height: 50px; background-image: linear-gradient( #51785c, #283c2d); color: #ffffff; font-weight: bold; font-size: 1.3em; border-radius: 10px; box-shadow:  2px 4px 6px 1px #999999; }
nav#navigation input[type="button"]:hover { color: red; }
nav#navigation a { text-decoration: none; }


/* accueil */
body#accueil { background-color:white; padding: 0px;  margin: 0px; position: relative; text-align: center; font-family:G, ARIALTTF, ARIALEOT, arial;} 
body#accueil div#bandeau { position: relative; width: auto; height: 650px; text-align: center;  padding: 0px; margin: 0px; text-align: center; }
body#accueil div#Sbandeau { text-align: center; padding: 0px; margin: 0px;  }
body#accueil img#img1{ position: absolute; left:0px; right: 0px;  display: block; z-index :1; max-width:100%; height: auto; padding: 0px; margin: 0px;}
body#accueil img#img2{ position: absolute; left:0px; right: 0px; display: block; z-index :2; max-width:100%; height: auto; padding: 0px; margin: 0px;}
body#accueil img#img3{ position: absolute; left:0px; right: 0px; display: block; z-index :3; max-width:100%; height: auto; padding: 0px; margin: 0px;}
body#accueil img#img4{ position: absolute; left:0px; right: 0px; display: block; z-index :4; max-width:100%; height: auto; padding: 0px; margin: 0px; }
body#accueil img.logo { position : absolute; left:0px; right: 0px; display:block;  z-index:1000; } 

body#accueil div#content { position: relative;}
body#accueil img.decor { position:absolute; left: 0px; top:0px;  max-width:100%; z-index: -1; }
body#accueil ul#ListeTravaux{ display: inline-block; margin: 70px 5px 2px 5px;  padding:0px;}

body#accueil img.imgBas { display: inline-block; margin: 30px;}
body#accueil p.RubConception { color: green; font-size: 16px; border-top: 1px solid green; border-bottom: 1px solid green; margin: 50px 3px 30px 3px; padding: 3px;}
body#accueil p.RubConception a{ color: green; text-decoration: none;}					
					
body#accueil ul#ListeTravaux li { display: block; line-height: 60px; margin: 0px auto 40px auto; border: none; width: 300px; height: 60px; background-image: linear-gradient( #51ad29, #154300); color: #ffffff; font-weight: bold; font-size: 1.4em; border-radius: 20px 0px 20px 0px; box-shadow:  5px 5px 10px #003505, -5px -5px 10px #ffffff;}					

body#accueil p.texte { font-family:  Satisfy; font-size: 30px; font-weight: bold; color: #073d16; margin: 40px 5px 10px 5px; } 						
				
					
/* deplacement */
body#interventions { padding: 0px;  margin: 0px; text-align: center; font-family:G, ARIALTTF, ARIALEOT, arial;  }
body#interventions img#ImgIntervention{ display:block; max-width:100%; height: auto; }
body#interventions img#RetourAccueil { margin: 30px 3px 30px 3px; display: inline-block;}
body#interventions p#RubInterventions  {border-top:1px solid green; border-bottom: 1px solid green; text-align:center; color: green; font-size:30px; letter-spacing:4px;}
body#interventions ul.ListeCommunes  {display: inline-block; list-style: square; vertical-align: top; margin: 10px; width: auto;}
body#interventions ul.milieu  {margin: 10px 40px 10px 40px  }
body#interventions ul.bord     {margin: 10px 0px 10px 0px; }
body#interventions ul.ListeCommunes li {color: green; font-size:25px; font-family :CooperBlackeot,CooperBlackttf; text-align: left; }
body#interventions img#LogoInterventions  {position: relative; display: inline-block;  max-width: 98%; height: auto; margin-top: 50px; margin-bottom: 50px; }
body#interventions p.RubConception { color: green; font-size: 16px; border-top: 1px solid green; border-bottom: 1px solid green; margin: 0px 3px 30px 3px; padding: 3px;}
body#interventions p.RubConception a{ color: green; text-decoration: none;}

/* contact */
body#contact { padding: 0px;  margin: 0px; text-align: center; font-family:G, ARIALTTF, ARIALEOT, arial;  }
body#contact img#ImgIntervention{ display:block; max-width:100%; height: auto; }
body#contact a.tel	{ text-decoration : none; display: block; font-family:G, ARIALTTF, ARIALEOT, arial; font-size: 30px; font-weight: bold; margin: 20px 5px 20px 5px; color: #000000; }
body#contact a.mail	{ text-decoration : none; display: block; font-family:G, ARIALTTF, ARIALEOT, arial; font-size: 30px; font-weight: bold; margin: 10px; color: #000000; }
body#contact h2.form-contact { margin: 30px auto 30px auto; width: 90%; border-top: 2px solid grey; border-bottom: 2px solid grey; }



/* ADAPTATIONS */ 
@media only screen and (min-device-width: 500px) and (max-device-width: 3000px) AND (max-width:479px)
{
	body#interventions ul.milieu  {margin: 10px 0px 10px 0px; width:250px;}
	body#interventions ul.bord     {margin: 10px 0px 10px 0px; width:250px;}
	h2.s2	{ display: block; }
	h2.s2tel1 {display: block;}
	a.s2tel2 {display: none;}
}





@media only screen and (min-device-width:500px) and (max-device-width: 3000px) and (min-width : 479px) and (max-width:800px)
{
	body#interventions ul.milieu  {margin: 10px 0px 10px 0px; width:250px; }
	body#interventions ul.bord     {margin: 10px 0px 10px 0px; width:250px; }

}



@media only screen and (min-device-width:500px) and (max-device-width: 3000px) AND (min-width : 800px) and (max-width:1024px)
{
	body#interventions ul.milieu  {margin: 10px 0px 10px 0px; width:250px; }
	body#interventions ul.bord     {margin: 10px 0px 10px 0px; width:250px; }

}


@media only screen and  (min-device-width:500px) and (max-device-width:2000px) AND (min-width : 1024px) and (max-width:2000px)
{
	body#interventions ul.milieu  {margin: 10px 0px 10px 0px; width:250px; }
	body#interventions ul.bord     {margin: 10px 0px 10px 0px; width:250px; }

}






/* POUR LES PORTABLES ECRANS DE TABLETTES */ 
@media all and  (max-device-width:1024px) and (orientation : portrait)
{
	body#interventions ul.milieu  {margin: 10px 0px 10px 0px; width:250px; }
	body#interventions ul.bord     {margin: 10px 0px 10px 0px; width:250px; }

}

/*ecran entre 1025 et 1200 */
@media all and  (max-device-width:1024px) and (orientation : landscape)
{


}








/* POUR LES PORTABLES ECRANS DE TELEPHONE */ 
@media all and  (max-device-width:480px) and (orientation : portrait)
{
	h1.titre { font-size: 25px; letter-spacing: 0px;}
	h2.s1	{ display: block; font-size: 25px; letter-spacing: 0px;}
	body#accueil p.texte { font-family:  Satisfy; font-size: 25px; font-weight: bold; color: #073d16; margin: 40px 5px 10px 5px; } 	

}

/*ecran entre 1025 et 1200 */
@media all and  (max-device-width:480px) and (orientation : landscape)
{
	h1.titre { font-size: 25px;}
	h2.s2	{ display: block; font-size: 20px; letter-spacing: 0px;}
	
}