* {
 margin: 0;
 padding: 0;
}


body,html {

  font-family: 'Oswald', sans-serif;

}


#page {
  width: 100%;
  height: 100%;
  

}



#diapo{  

z-index: 70;
width: auto;
height: auto;
border: 0px solid transparent;
margin: 0px auto 0px; 
background-position: center; 
} 








    /*---------------  logo -------------------------------------------------------*/
  
  
  #logo {
  
  border: 1px solid transparent;
    display: inline-block;
	width: 400px;
    height: 80px;

    float: left;

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


    .smaller #logo {
	border: 1px solid transparent;
	color: black;
      width: 300px;
      height: 60px;
   
	  }
	  
	  

	  
	  
	  
	  
	 @media(max-width: 800px) {
 

 
   #logo {
  
  border: 1px solid transparent;
 
	width: 200px;
    height: 40px;

    float: left;

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


    .smaller #logo {
	border: 1px solid transparent;
	color: black;
      width: 200px;
      height: 40px;
   
	  }
 
 
 
	
}
  
	  
	  
	  
	  
	  
	  

	/*-------------------------- Accueil - service ----------------------------------------*/





#accueil-service{  

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

} 



	
	
	
#titre{
text-align:center;
margin:0px auto 0px;
width: 100%;
height: auto;
padding: 30px 0px 0px 0px;
border : 1px solid transparent;
color: #585858;
font-size: 2.7em;
font-weight: 300;
}
	
	
	
#sous-titre{
text-align:center;
margin:-5px auto 0px;
width: 100%;
height: auto;

border : 0px solid transparent;
color: #848484;
font-size: 1.3em;
font-weight: 400;
}
		
	
	
#one{
text-align:center;

margin:5px auto 0px;
width: 15%;

 color: #8A0808;

    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #8A0808 , rgba(0, 0, 0, 0));

}
		
	
	
	
	

#contenu-accueil-service {
width: 90%; 
height: auto; 
text-align:center;
margin: 50px auto 50px;
border: 1px solid transparent;
}
	
	
	
	
.box{ 

width: 300px; 
height: auto; 
margin: 20px 40px;
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 h2 {
margin: 20px 0px 0px 0px;
font-size:1.9em;
text-align: center;
color: #585858; 
}

.box h2 a{
color: #585858; 
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; 
	

}

.box h2 a:hover {
  
   color: #8A0808; 
}


.box p {
margin: -3px 0px 0px 0px;
font-size:1.2em;
text-align: center;
color: #848484; 
}

	
	
.box #photo {
margin: 0px auto 10px;
width: 300px; 
height: 215px;
border: 1px solid transparent;


}	
	
	
	
	/*-------------------------- Accueil - Marques ----------------------------------------*/	
	
	
	
	
#marques{  
overflow: hidden;
position: relative;
background-color: #8A0808;
width: 100%;
text-align:center;
height: auto;
border: 1px solid transparent;
padding:20px 0px;
margin: 0px auto 0px; 

} 



.box-marques{ 

width: 250px; 
height: auto; 
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 */	
			
}


.box-marques #pic {
text-align:center;
width: auto; 
height: 42px;
margin: 10px auto 10px;
border: 1px solid transparent;

}	




	/*-------------------------- Accueil - Urgence ----------------------------------------*/	



#urgence{  



border: solid 1px transparent;
margin: 0px auto 0px; 
padding-bottom:100px;
text-align:center;

   background-image: url('images/urgence.jpg');
    background-repeat: no-repeat;
    background-position: center; 

	
	background-attachment: fixed;
background-size: cover;
	
	
} 



#bg-titre{

text-align:center;
margin:10px auto 0px;
padding: 0px 10px 5px 10px;
background-color:#000000;
border : 1px solid #FFFFFF;
opacity:0.8;
width: 20%;
}







#titre-gras{

text-align:center;
margin:0px auto 0px;
height: auto;
padding: 0px 0px 0px 0px;
border : 1px solid transparent;
color: #FFFFFF;
font-size: 2.7em;
font-weight: 400;

}
	
	
	
#sous-titre-gras{

text-align:center;
margin:-5px auto 0px;

height: auto;
border : 0px solid transparent;
color: #FFFFFF;
font-size: 1.3em;
font-weight: 300;
}





.box-urgence{ 

width: 600px; 
height: auto; 
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 */	
			
}



.box-urgence a{ 

color: #FFFFFF; 
font-weight: 400;
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; 
			
}


.box-urgence h1 {

margin: 0px 0px 0px 0px;
font-size:4em;
text-align: center;
color: #FFFFFF; 

}



.box-urgence h2 {

margin: 20px 0px 0px 0px;
font-size:2em;
text-align: left;
color: #FFFFFF; 
}



.box-urgence p {

margin: -3px 0px 0px 0px;
font-size:1.3em;
text-align: left;
color: #FFFFFF; 
}


.box-urgence #hurry {
text-align: center;
margin: 0px auto 0px;
font-size:2em;
color: #FFFFFF; 
}





	/*-------------------------- Copyright ----------------------------------------*/	



#copyright{  

background-color:#d8d8d8;
width: 100%;
height: auto;
border: solid 0px transparent;
margin: 0px auto 0px; 

} 
	
	
#copyright p {
margin: 0px 0px 0px 0px;
padding: 20px;
font-size:1.3em;
text-align: center;
color: #585858; 
}
	
	
	
#copyright a {

color: #8A0808; 
font-weight: 400;
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; 
}
	
	
#copyright a:hover {
   color: #585858; 
}
	
	
	
	/*-------------------------- Footer ----------------------------------------*/	
	
	
#footer{  

padding: 40px 0px 40px 0px;
background-color: #FFFFFF;
width: 100%;
height: auto;
border: solid 0px transparent;
margin: 0px auto 0px; 
text-align:center;

} 
	
	
	#footer b{  

font-weight:400;

} 
	
	
	
.box-footer{ 

width: 300px; 
height: 550px; 
margin: 20px 40px;
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-footer h2 {
margin: 20px 0px 10px 0px;
font-size:1.6em;
text-align: center;
color: #585858; 
}
	
	
.box-footer h1 {
margin: 5px 0px 10px 0px;
font-size:1.2em;
text-align: center;
color: #585858; 
font-weight:400;
}
	
	
	
.box-footer p {
margin: 0px 0px 0px 0px;
font-size:1.1em;
text-align: justify;
color: #585858; 
font-weight:300;
}	
	
	
.box-footer #pic-footer {

width: 150px; 
height: auto;
margin: 20px auto 0px;
border: 1px solid transparent;

}
	
	
#footer .box-footer a {

color: #8A0808; 
font-weight: 400;
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; 
}
	
	
#footer .box-footer a:hover {
   color: #585858; 
}
	
	
	
	
#titre-facebook  {
border: 1px solid transparent;
margin: 20px 0px 10px 0px;
text-align: center;
}		
	
	
#titre-facebook h4 {
font-size:1.6em;
color: #585858; 
margin: 0px 0px 0px 0px;
}	
	
#facebook{  

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

} 
	
	
#titre-facebook img {
  vertical-align:middle;
}
	
	


/*-------------------------- Autres ----------------------------------------*/


.boutonUp{
	position: fixed;
	
	right: 20px;
	bottom: 40px;
	
	height: 51px;
	width: 51px;
	

	border: 1px solid transparent;
	cursor: pointer;
	display:none;
	z-index:100;
}



@media(max-width: 1000px) {


#bg-titre{
width: 40%;
}


}




@media(max-width: 600px) {




#titre{
padding: 20px 0px 5px 0px;
font-size: 1.6em;
line-height: 1.1;
}
	
	
	
#sous-titre{
margin:-5px auto 0px;
font-size: 0.9em;
}
		
	
	
#one{
margin:5px auto 0px;
width: 40%;
}
		
	
	
#contenu-accueil-service {
width: 100%; 
height: auto; 
text-align:center;
margin: 30px auto 30px;
border: 1px solid transparent;
}
	
	
	
	
.box{ 

width: 300px; 
height: auto; 
margin: 0px 0px 10px 0px;
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 h2 {
margin: 20px 0px 0px 0px;
font-size:1.6em;
text-align: center;
color: #585858; 
}

.box h2 a{
color: #585858; 
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; 
	

}

.box h2 a:hover {
  
   color: #8A0808; 
}


.box p {
margin: -3px 0px 0px 0px;
font-size:0.9em;
text-align: center;
color: #848484; 
}

	
	
.box #photo {
margin: 0px auto 10px;
width: 200px; 
height: 143px;
border: 1px solid transparent;

}








.box-marques{ 
width: 90px; 
height: 30px;
margin: 3px;
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-marques #pic {
text-align:center;
margin: 0px auto 0px;
border: 1px solid transparent;

}	




.box-urgence{ 
width: 90%; 
height: auto; 
margin: 20px auto 20px;
border: 1px solid transparent; 
text-align:center;/* On réinitialise les élements centré a gauche */		
}




#urgence{  

padding-bottom:20px;
} 


#titre-gras{
padding: 0px 0px 0px 0px;
font-size: 2em;
}
	
	
	
#sous-titre-gras{
font-size: 1.2em;
}






#bg-titre{
width: 50%;
}




.box-urgence h1 {

margin: 0px 0px 0px 0px;
font-size:1.3em;
text-align: center;
color: #FFFFFF; 

}



.box-urgence h2 {

margin: 20px 0px 0px 0px;
font-size:1.5em;
text-align: left;
color: #FFFFFF; 
}



.box-urgence p {

margin: -3px 0px 0px 0px;
font-size:1.2em;
text-align: left;
color: #FFFFFF; 
}


.box-urgence #hurry {
text-align: center;
margin: 0px auto 0px;
font-size:1.5em;
color: #FFFFFF; 
}




#copyright p {
margin: 0px 0px 0px 0px;
padding: 20px;
font-size:1.2em;
text-align: center;
color: #585858; 
}





#footer{  

padding: 20px 0px 20px 0px;

} 
	
	
	
.box-footer{ 

width: 90%; 
height: auto; 
padding-bottom:10px;
margin: 0px 0px 20px 0px;
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-footer h2 {
margin: 20px 0px 0px 0px;
font-size:1.5em;
text-align: center;
color: #585858; 
}
	
	


.box-footer p {
margin: 0px 0px 0px 0px;
font-size:1.2em;

}	
	

	
	
	
#titre-facebook  {
border: 1px solid transparent;
margin: 20px 0px 10px 0px;
text-align: center;
}		
	
	
#titre-facebook h4 {
font-size:1.6em;
color: #585858; 
margin: 0px 0px 0px 0px;
}	
	
	
#facebook{  

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

} 
	
	
#titre-facebook img {
  vertical-align:middle;
}
	
	


	
	


.boutonUp{
	position: fixed;
	
	right: 10px;
	bottom: 10px;
	
	height: 35px;
	width: 35px;

	border: 1px solid transparent;
	cursor: pointer;
	display:none;
	z-index:100;
}











}