#image-services {

margin-top:180px;
  height: auto;
  width: 100%;
   border: 0px solid transparent;
   
 
   
}





@media(max-width: 800px) {


#image-services {

margin-top:160px;
  height: auto;
  width: 100%;
   border: 0px solid transparent;

}







}








@media(max-width: 600px) {



#image-services {

margin-top:120px;
  height: auto;
  width: 100%;
   border: 0px solid transparent;

}



}	




@media(max-width: 450px) {



#image-services {

margin-top:80px;
  height: auto;
  width: 100%;
   border: 0px solid transparent;

}



}











/* ---------------------------------   liens  #1   --------------------------------------------*/


 #liens-services {
 
margin: 0px auto 0px;
 text-align: center;
  border: 1px solid transparent;

background-color:#0081C6;
  
}





 #liens-services h3{
 
margin: 40px auto 40px;
 text-align: center;
 
padding-top:5px;

font-size: 1.6em;
color:#FFFFFF;

}



#liens-services a {

text-decoration: none;

   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;

color: #FFFFFF;

}


#liens-services a:hover {

color: #BCBEC0;
}

#liens-services a.actif{
color:#BCBEC0;

}

/* ---------  liens  #1 mobile  ----*/



 #liens-services-m{
 
margin: 0px auto 0px;
 text-align: center;
  border: 1px solid transparent;

background-color:#0081C6;
  
  padding:10px 0px 15px 0px
}




 #liens-services-m h3{
 
margin: 0px auto 0px;
text-align: center;
font-size: 1.6em;
color:#FFFFFF;

}



#liens-services-m a {

text-decoration: none;

   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;

color: #FFFFFF;

}


#liens-services-m a:hover {

color: #BCBEC0;
}


#liens-services-m a.actif{
color:#BCBEC0;

}



@media(max-width: 1000px) {




 #liens-services h3{
 
font-size: 1.4em;


}



}	






@media(min-width: 801px) {



 #liens-services-m h3{
 
margin: 0px auto 0px;
 text-align: center;
 

font-size: 1.6em;
color:#424242;
 display:none;
}

}	




@media(max-width: 800px) {


#liens-services h3{
 

 display:none;
}



#liens-services-m {
 
margin: 0px auto 0px;
}


#liens-services-m h3{
 
margin: 8px auto 0px;
 text-align: center;
 
font-size: 1.4em;
color:#424242;

}








}	




@media(max-width: 600px) {


#liens-services-m h3{
margin: 8px auto 0px;
font-size: 1.2em;
}



}	




@media(max-width: 400px) {


#liens-services-m h3{
margin: 8px auto 0px;
font-size: 0.9em;
}



}	





/* ---------------------------------   liens  #1   --------------------------------------------*/








/* ---------------------------------  refrigeration  --------------------------------------------*/

 #refrige{
margin: 50px auto 0px;
 border: 0px solid transparent;
width: 100%;
text-align: center;

}



 #titre-refrige h1{
 
 
font-size: 3.3em;
color:#0081C6;
margin: 60px auto 0px;


 border: 1px solid transparent;
width: 95%;

text-align: center;

}





 #ref{
 
margin: 60px auto 0px;
 border: 1px solid transparent;
width: 98%;
text-align: center;

}



.box-ref{ 

width: 30%; 
height: 500px; 
margin: 5px 5px 5px 5px ;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:left;/* On réinitialise les élements centré a gauche */	
			
}


.box-ref2{ 

width: 50%; 
height: 500px; 
margin: 5px 5px 5px 5px ;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:left;/* On réinitialise les élements centré a gauche */	
			
}



 .box-ref2 h2{
 
 
font-size: 1.4em;
color:#424242;
margin: 20px auto 0px;


 border: 1px solid transparent;
width: 100%;

text-align: center;

}



 .com{
 float:left;
margin: 0px 0px 0px 20px;
width: 45%; 
height: 220px;
border: 1px solid transparent;
text-align: left;
}



.com h3{
font-size: 1.2em;
color:#424242;
margin: 0px auto 30px;
text-align: center;
}



.com p{
font-size: 1em;
color:#424242;
margin: 0px auto 0px;
text-align: left;


}


.com img{
border: 1px solid transparent;
float:left;
margin-top:-2px;
}


.list{
border: 1px solid transparent;
margin-bottom:5px;
}


/* ----------------------------------------------------------- */	


 .indu{
 float:left;
margin: 0px 0px 0px 20px;
width: 45%; 
height: 220px;
border: 1px solid transparent;
text-align: left;
}



.indu h3{
font-size: 1.2em;
color:#424242;
margin: 0px auto 30px;
text-align: center;
}



.indu p{
font-size: 1em;
color:#424242;
margin: 0px auto 0px;
text-align: left;
}


.indu img{
border: 1px solid transparent;
float:left;
margin-top:-2px;
}


.entretien{
float:right;
margin: 20px auto 30px;
border: 1px solid transparent;
}


.entretien h3{

font-size: 1.2em;
color:#424242;
margin: 0px auto 10px;
text-align: center;
}

.entretien p{

font-size: 1em;
text-align: left;
}













 #note{
 

margin: 20px auto 0px;
border: 0px solid transparent;
width: 100%;
height:auto;
text-align: center;
background-color:#E31837;
}


#texte{
border: 1px solid transparent;
margin: 0px auto 0px;
padding:30px 0px 30px 0px;
text-align: center;
width: 70%;
}


#texte p{

font-size: 1.2em;
color:#FFFFFF;
font-weight:bold;
margin: 0px auto 0px;

}








@media(max-width: 1000px) {


.box-ref{ 

width: 50%; 
height: 40%; 
margin: 5px 0px 5px 0px ;
border: 1px solid transparent; 	

text-align:center;
position: none;
}


.box-ref2{ 

width: 80%; 
height: 525px; 
margin: 5px 0px 5px 0px ;
border: 1px solid transparent; 
			
text-align:center;			

}




#texte{
padding:30px 0px 30px 0px;
width: 90%;
}

#texte p{
font-size: 1.2em;
}




}	



@media(max-width: 800px) {



 #titre-refrige h1{
font-size: 3em;
margin: 60px auto 0px;
border: 1px solid transparent;
width: 95%;
}


#texte{
padding:30px 0px 30px 0px;
width: 90%;
}

#texte p{
font-size: 1.1em;
}

}



@media(max-width: 600px) {


 #titre-refrige h1{
font-size: 2.4em;
margin: 60px auto 0px;
border: 1px solid transparent;
width: 95%;
}


.box-ref2{ 

width: 99%; 
height: 525px; 
margin: 5px 0px 5px 0px ;
border: 1px solid transparent; 
			
text-align:center;			

}


 .box-ref2 h2{
font-size: 1.2em;
margin: 20px auto 0px;
border: 1px solid transparent;
}





.com h3{
font-size: 1em;
}

.com p{
font-size: 0.9em;
}

.indu h3{
font-size: 1em;
}

.indu p{
font-size: 0.9em;
}




.entretien h3{

font-size: 1em;
color:#424242;
margin: 0px auto 10px;
text-align: center;
}

.entretien p{

font-size: 0.9em;
text-align: center;
}



#texte{
padding:30px 0px 30px 0px;
width: 95%;
}

#texte p{
font-size: 1em;
}


}



@media(max-width: 500px) {


 #refrige{
margin: 20px auto 0px;
}



 #titre-refrige h1{
font-size: 2em;
margin: 0px auto 0px;
border: 1px solid transparent;
width: 95%;
}



.box-ref2{ 

width: 99%; 
height: auto; 
margin: 5px 0px 5px 0px ;
border: 1px solid transparent; 
			
text-align:center;			

}



 .com{

margin: 0px auto 0px;
width: 95%; 
height: 220px;
border: 1px solid transparent;
text-align: center;
}



 .indu{
margin: 0px auto 0px;
width: 95%; 
height: 220px;
border: 1px solid transparent;
text-align: center;
}


.list{
border: 1px solid transparent;
margin: 0px 0px 5px 10%;



}


}





/* ------------------------- clim et chauffage ---------------------------------- */	




#encadrer{

margin: 0px auto 0px;
 border: 1px solid #bdbdbd;
width: 95%;
padding: 20px 0px 40px 0px;
background-color:#FFFFFF;
}




 #clim{
margin: 0px auto 0px;
padding-bottom:60px;
 border: 0px solid transparent;
width: 100%;
text-align: center;
background-color:#e6e6e6;

}



#chau{
margin: 0px auto 0px;
border: 1px solid transparent;
width: 99%;
text-align: center;
}




#chau a {

text-decoration: none;

   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;

color: #0081C6;

}


#chau a:hover {

color: #E31837;
}









#chau h3{

font-size: 1.4em;
color:#424242;
margin: 60px auto 80px;
text-align: center;
width: 70%;
}


#chau h2{

font-size: 1.8em;
color:#0081C6;
margin: 0px auto 0px;
text-align: center;
width: 60%;
}




.box-img{ 

width: 20%; 
height: 300px; 
margin: 0px 60px 5px 5px ;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:left;/* On réinitialise les élements centré a gauche */	
			
}




.box-text{ 

width: 40%; 
height: 350px; 
margin: 5px 5px 5px 5px ;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:left;/* On réinitialise les élements centré a gauche */	
			
}


.box-text p{ 
margin: 10px 0px 0px 0px ;	
	font-size: 1.2em;
}





#chau h4{

font-size: 1.3em;
color:#E31837;
margin: 0px auto 20px;
text-align: center;
width: 80%;
}




#accro{
margin: 0px auto 0px;
border: 1px solid transparent;
width: 80%;
text-align: center;
}




button.accordion {
font-family: 'Montserrat', sans-serif;


    background-color: #FFFFFF;
    color: #424242;
    cursor: pointer;
    padding: 20px;
    width: 100%;
    border: none;
	font-weight:bold;
    text-align: center;
    outline: none;
    font-size: 1.2em;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd; 
}





div.panel {
text-align: left;
margin:10px 0px 10px 0px;
   font-size: 1em;
    display: none;
    background-color: white;
	
	line-height: 140%
}






@media(max-width: 1200px) {

.box-img{ 

position: none;	
width: 60%; 
height: 50%; 
margin: -30px auto 0px ;
border: 1px solid transparent; 
text-align:center;

}

.box-text{ 
width: 95%; 
height: 250px; 
margin: 20px auto 0px ;
border: 1px solid transparent; 
text-align:center;		
}


#chau h4{
font-size: 1.1em;
margin: 0px auto 20px;
width: 90%;
}







}



@media(max-width: 1000px) {



#chau h3{

font-size: 1.3em;
color:#424242;
margin: 0px auto 80px;
text-align: center;
width: 90%;
}


#chau h2{

font-size: 1.6em;
color:#0081C6;
margin: 0px auto 0px;
text-align: center;
width: 60%;
}



#accro{
width: 90%;
}

button.accordion {
    font-size: 1.2em;
}



.box-text{ 
width: 95%; 
height: auto; 
margin: 20px auto 0px ;
border: 1px solid transparent; 
text-align:center;		
}


}









@media(max-width: 600px) {





#chau h3{

font-size: 1.1em;
color:#424242;
margin: 0px auto 80px;
text-align: center;
width: 90%;
}

#chau h2{

font-size: 1.4em;
color:#0081C6;
margin: 0px auto 0px;
text-align: center;
width: 90%;
}



.box-text{ 
width: 95%; 
height: auto; 
margin: 20px auto 0px ;
border: 1px solid transparent; 
text-align:center;		
}


.box-text p{ 
margin: 10px 0px 0px 0px ;	
	font-size: 1em;
}





#accro{
width: 95%;
}

button.accordion {
    font-size: 1em;
}



}






/* ------------------------- géothermie ---------------------------------- */	




 #geo{
margin: 0px auto 0px;
 border: 1px solid transparent;
width: 98%;
text-align: center;
padding-bottom:80px;
}




.box-geo{ 

width: 30%; 
height: 300px; 
margin: 5px 5px 5px 5px ;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:left;/* On réinitialise les élements centré a gauche */	
			
}


.box-geo2{ 

width: 50%; 
height: 340px; 
margin: 5px 5px 5px 5px ;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:left;/* On réinitialise les élements centré a gauche */	
			
}



 .box-geo2 h2{
font-size: 1.4em;
color:#424242;
margin: 20px auto 0px;
 border: 1px solid transparent;
width: 100%;
text-align: center;
}



 .geothermie{

margin: 0px 0px 0px 20px;
width: 90%; 
height: 200px;
border: 1px solid transparent;
text-align: left;
}


.geothermie img{
border: 1px solid transparent;
float:left;
margin-top:-2px;
}

.geothermie p{
font-size: 1em;
color:#424242;
margin: 0px auto 0px;
text-align: left;


}


.geothermie h3{
font-size: 1.2em;
color:#424242;
margin: 0px auto 30px;
text-align: center;
}








@media(max-width: 1200px) {



.box-geo{ 
width: 80%; 
height:auto; 
margin: -30px auto 30px ;
border: 1px solid transparent; 
position: none;
text-align:center;	
}


.box-geo2{ 
width: 80%; 
height: auto; 
margin: 0px auto 0px ;
border: 1px solid transparent; 
position: none;		
}


}



@media(max-width: 1000px) {



.box-geo{ 
width: 80%; 
height:auto; 
margin: -30px auto 30px ;
border: 1px solid transparent; 
position: none;
text-align:center;	
}


.box-geo2{ 
width: 80%; 
height: 340px; 
margin: 0px auto 0px ;
border: 1px solid transparent; 
position: none;		
}


 .box-geo2 h2{
font-size: 1.2em;
color:#424242;
margin: 20px auto 0px;
 border: 1px solid transparent;
width: 100%;
text-align: center;
}


.geothermie p{
font-size: 1em;
color:#424242;
margin: 0px auto 0px;
text-align: left;


}


.geothermie h3{
font-size: 1.2em;
color:#424242;
margin: 0px auto 30px;
text-align: center;
}



}





@media(max-width: 600px) {


.box-geo{ 
width: 90%; 
height:auto; 
margin: -30px auto 30px ;
border: 1px solid transparent; 
position: none;
text-align:center;	
}


.box-geo2{ 
width: 90%; 
height: auto; 
margin: 0px auto 0px ;
border: 1px solid transparent; 
position: none;	
}

 .geothermie{
margin: 0px 0px 0px 20px;
width: 90%; 
height: auto;
border: 1px solid transparent;
text-align: left;
padding-bottom:60px;
}



 .box-geo2 h2{
font-size: 1.2em;
color:#424242;
margin: 20px auto 0px;
 border: 1px solid transparent;
width: 100%;
text-align: center;
}


.geothermie p{
font-size: 1em;
color:#424242;
margin: 0px auto 0px;
text-align: left;


}


.geothermie h3{
font-size: 1.2em;
color:#424242;
margin: 0px auto 30px;
text-align: center;
}





}






/* ------------------------- AIDE FINANCIERE ---------------------------------- */





#zone-aide{
margin: 0px auto 0px;
border: 0px solid transparent;
width: 100%;
height: 450px;
background-color:#E31837;
}


 #aide-img{
float:right;
margin: 20px 5% 0px 0px;
border: 1px solid transparent;
width: 650px;
height:auto;

}


 #aide-img img{
float:left;
margin: 0px 0px 0px 0px;
border: 1px solid transparent;
width: 250px;

}


 #aide-img h2{
font-size: 2.5em;
color:#FFFFFF;
margin: 40px 0px 0px 0px;
text-align:right;
}



 #aide-text{
margin: 0px 5% 20px 0px;
float:right;
border: 1px solid transparent;
width: 60%;
}



 #aide-text p{
 
 
font-size: 1.2em;
color:#FFFFFF;
margin: 0px 0px 0px 0px;
 border: 1px solid transparent;
text-align: right;

width: 100%;

}




 #aide-text a {

text-decoration: none;

   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;

color: #FFFFFF;

font-weight:bold;

}


 #aide-text a:hover {

color: #FACC2E;
font-weight:bold;
}





@media(max-width: 1000px) {


#zone-aide{
margin: 30px auto 0px;
border: 0px solid transparent;
width: 100%;
height: auto;

padding-bottom:70px;

}


 #aide-img{
float:none;
margin: 0px auto 0px;
border: 1px solid transparent;
width: 650px;
height:auto;
padding-top:30px;
}



 #aide-text{
margin: 0px auto 0px;
border: 1px solid transparent;
width: 90%;
float:none;
}


 #aide-text p{
font-size: 1.2em;
margin: 0px 0px 0px 0px;
text-align: center;
}






}





@media(max-width: 800px) {



 #aide-img{
float:none;
margin: 0px auto 0px;
border: 1px solid transparent;
width: 500px;
height:auto;
padding-top:30px;
}


 #aide-img img{
float:left;
margin: 0px 0px 0px 0px;
border: 1px solid transparent;
width: 200px;

}


 #aide-img h2{
font-size: 2em;
color:#FFFFFF;
margin: 40px 0px 0px 0px;
text-align:right;
}

 #aide-text{
margin: 0px auto 0px;
border: 1px solid transparent;
width: 95%;
float:none;
}



}




@media(max-width: 600px) {

 #aide-img{
float:none;
margin: 0px auto 0px;
border: 1px solid transparent;
width: 95%;
height:auto;
padding-top:30px;
text-align:center;

}


 #aide-img img{
 float:none;
margin: 0px auto 0px;
border: 1px solid transparent;
width: 50%;

}

 #aide-img h2{
font-size: 2em;
color:#FFFFFF;
margin: 20px auto 0px;
text-align:center;
width: 95%;
float:none;
border: 1px solid transparent;
}



 #aide-text p{
font-size: 1.1em;
margin: 0px 0px 0px 0px;
text-align: center;
}


}






/* ------------------------- credi FINANCIERE ---------------------------------- */





#zone-credi{
margin: 0px auto 0px;
border: 0px solid transparent;
width: 100%;
height: 350px;
background-color:#6CB33F;
}




 #credi-img{
padding-top:40px;
margin: 0px 0px 0px 5%;
border: 1px solid transparent;
width: 650px;
height:100px;
}


 #credi-img h2{
font-size: 2.5em;
color:#FFFFFF;
margin: 0px 0px 0px 0px;
 border: 1px solid transparent;
text-align: left;
float:left;
}

 #credi-img img{
 border: 1px solid transparent;
 margin: -20px 0px 0px 30px;
 
  border: 1px solid transparent;
 
}



 #credi-text{

 
margin: 30px 0px 0px 5%;
border: 1px solid transparent;
width: 60%;

}







 #credi-text p{
 
 
font-size: 1.2em;
color:#FFFFFF;
margin: 0px 0px 0px 0px;
 border: 1px solid transparent;
text-align: left;

width: 100%;

}


 #credi-text a {

text-decoration: none;

   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;

color: #FFFFFF;

font-weight:bold;

}


 #credi-text a:hover {

color: #424242;
font-weight:bold;
}







@media(max-width: 1000px) {



#zone-credi{
margin: 0px auto 0px;
border: 0px solid transparent;
width: 100%;
height: auto;
padding-bottom:60px;

}



 #credi-img{
padding-top:60px;
margin: 0px auto 0px;
border: 1px solid transparent;
width: 520px;
height:100px;
}


 #credi-text{
margin: 30px auto 0px;
border: 1px solid transparent;
width: 80%;
}


 #credi-text p{
 
 
font-size: 1.2em;

margin: 0px 0px 0px 0px;

text-align: center;

width: 100%;

}


}











@media(max-width: 800px) {



 #credi-img{
padding-top:60px;
margin: 0px auto 0px;
border: 1px solid transparent;
width: 95%;
height:auto;
text-align:center;
}


 #credi-img h2{
font-size: 2em;
color:#FFFFFF;
margin: 0px 0px 0px 0px;
 border: 1px solid transparent;
text-align: center;
float:none;
width: 95%;

}

 #credi-img img{
 border: 1px solid transparent;
 margin: -30px auto 0px;
  border: 1px solid transparent;
 width: 30%;
}



 #credi-text{
margin: 30px auto 0px;
border: 1px solid transparent;
width: 95%;
}


 #credi-text p{
font-size: 1.1em;
}






}