#map{

width: 80%;
height: 400px;
border: solid 1px transparent;
margin: 100px auto 80px; 
opacity: 0.6;
    filter: alpha(opacity=60);

}


#map:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);

}



#coordo{

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

}





.box-contact{ 

width: 300px; 
height: 575px; 
margin: 20px 20px;
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 */	
			
}




.signature{ 
font-size: 1.3em;
color:#a4a4a4;
font-weight:bold;
text-align: center;
padding: 0px 0px 5px 0px;		
}

.box-contact p{ 
font-size: 1.1em;
color:#a4a4a4;
text-align: center;
padding: 2px 0px;		
}

.box-contact a{
text-decoration: none;
color:#01DFD7;
}


.box-contact a:hover{
font-weight: bold;
}



.tel{ 
font-size: 1.2em;
color:#01DFD7;
font-weight:bold;
text-align: center;
padding: 5px 0px;		
}






.box-service-photo{ 

width: 50px; 
height: 75px; 
margin: 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-service-texte{ 

width: 200px; 
height: 75px; 
margin: 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-service-texte p{ 
font-size: 0.9em;
color:#a4a4a4;
text-align: left;
padding: 1px 0px;		
}











/* ------------------ Formulaire de contact --------------------- */



#form-contact {
font-family: 'Lato', sans-serif;
width:300px;
margin: 0px auto 0px;
border: 1px solid transparent;
padding:5px;

}



#coordo  h3{
text-align:center;
font-weight:bold;
font-size:2em;
color:#01DFD7;
}



.error{
border: 1px solid transparent;
padding: 5px 0px;
color: #a4a4a4;
font-style: italic;
}

.success{
border: 1px solid transparent;
padding: 5px 0px;
color: #a4a4a4;
font-style: italic;
background-color: transparent;
text-align: center;
}

.info{
font-family: 'Lato', sans-serif;
font-size:.8em;
color: #FF0000;
letter-spacing:2px;
padding-left:5px;
}


.btnAction{
background-color:#FFFFFF;
margin: 10px 0px 0px 0px;
padding:10px 0px 10px 0px;
color:#01DFD7;
border: 1px solid #01DFD7; 
border-radius:4px;
width: 100%;
font-size:1em;
font-weight:bold;
}


button:hover{
background-color:#01DFD7;
color:#FFFFFF;
cursor: pointer;

}




textarea{
font-family: 'Lato', sans-serif;
font-size:1em;
width:100%;
height: 120px;
margin-top:5px;
border-radius:4px;
padding:5px;
resize:none;
border:1px solid #d8d8d8;
}


input{
font-family: 'Lato', sans-serif;
width:100%;
height:35px;
margin-top:5px;
border:1px solid #d8d8d8;
border-radius:4px;
padding:5px;
font-size:1em;
}


input:focus, textarea:focus {

outline: none;
}





#note-formulaire{

width:75%;
margin:0px auto 0px; 
text-align: center;
}













@media all and (max-width: 600px) {

#map{


margin: 100px auto 40px; 


}

.box-contact{ 
margin: 20px 0px 40px 0px;	
height:auto;
}


#coordo  h3{
font-size:1.6em;
}


.signature{ 
font-size: 1.1em;
color:#a4a4a4;
font-weight:bold;
text-align: center;
padding: 0px 0px 5px 0px;		
}

.box-contact p{ 
font-size: 1em;
color:#a4a4a4;
text-align: center;
padding: 4px 0px;		
}

.box-service-texte p{ 
font-size: 0.9em;
color:#a4a4a4;
text-align: left;
padding: 1px 0px;		
}






}