body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
  
font-family: 'Montserrat', sans-serif;
}




a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }





/* ------------------------------------------
  DEMO STYLES
--------------------------------------------- */

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;

}


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










/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */




#top {
  background: #000000;
  width: 100%;
  height: 30px;
  left: 0;
  top: 0;
}



#tel {

float:right;
width: 370px;
border: 1px solid transparent;
margin-top:4px;
margin-right:5%;
color:#FFFFFF;
}

#tel p{


font-size: 0.8em;

}



#tel a {

text-decoration:none;
color:#FFFFFF;

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








@media(max-width: 800px) {

#tel {
float:none;
text-align:center;
width: auto;
border: 1px solid transparent;
margin:0px auto 0px;
padding-top:4px;
}

#tel p{
text-align:center;
font-size: 0.8em;
}

}



@media(max-width: 400px) {

#tel {
float:none;
width: auto;
border: 1px solid transparent;
margin:0px auto 0px;
padding-top:6px;
}

#tel p{
text-align:center;
font-size: 0.65em;
}

}





 h1{
  padding-top:80px;
font-size: 2.5em;
color:#088A08;
}


@media(max-width: 800px) {

 h1{
  padding-top:60px;
font-size: 2em;
}



}	

@media(max-width: 600px) {

 h1{
  padding-top:60px;
font-size: 1.8em;
}



}


@media(max-width: 400px) {

 h1{
  padding-top:60px;
font-size: 1.6em;
}



}




/* ---------------------------------   accueil     --------------------------------------------*/



#accueil{

  text-align: center;
  margin-top: 0px;
  height: auto;
  width: 100%;
  
}



#diapo {

border: 0px solid #000000;
margin-top:16%;
  text-align: center;
  height: 450px;
  width: 100%;


}




#visite{
  margin: 60px auto 0px;
    height: 30px;
  width: 56px;
}



@media(max-width: 1250px) {

#visite{
  margin: -5% auto 0px;
}

}	


@media(max-width: 1150px) {

#visite{
  margin: -10% auto 0px;
}

}


@media(max-width: 1050px) {

#visite{
  margin: -15% auto 0px;
  
 height: 25px;
  width: 47px;
  
}

}





@media(max-width: 950px) {

#visite{
  margin: -20% auto 0px;
  
 height: 25px;
  width: 47px;
  
}

}


@media(max-width: 850px) {

#visite{
  margin: -25% auto 0px;
  
}

}


@media(max-width: 750px) {

#visite{
  margin: -30% auto 0px;
}

}



@media(max-width: 650px) {

#diapo {
margin-top:18%;
}

#visite{
  margin: -35% auto 0px;
}


}	


@media(max-width: 550px) {

#diapo {
margin-top:20%;
}

#visite{
  margin: -50% auto 0px;
  
  height: 20px;
  width: 37px;
  
  
}

}	


@media(max-width: 450px) {

#diapo {
margin-top:25%;
}

#visite{
  margin: -65% auto 0px;
}

}	



@media(max-width: 400px) {


#visite{
  margin: -80% auto 0px;
}

}	

















#visite a {
	   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; 
}

#visite a:hover {

opacity: 0.7;
}



/* ---------------------------------   services     --------------------------------------------*/



#services{

margin-top: 100px;


  text-align: center;
  
  height: auto;
  width: 100%;
  
  padding-bottom: 200px;
}


#z-services{
 border: 1px solid transparent;
width: 10%;
margin:60px auto 0px;
}



#text-service{ 

width: 70%; 
height: auto; 
margin: 60px auto 0px ;
border: 1px solid transparent; 
color: 2e2e2e;
font-size: 1.6em;
	
}





.box{ 

width: auto; 
height: auto; 
margin: 80px 10px 0px 10px ;
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 */	
			
}








.box2{ 

width: 45%; 
height: auto; 
margin: 80px 10px 0px 10px ;
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 */	
			
}




.box2 p{ 

font-size: 1.4em;
text-align:justify;
font-size:100;
			
}





#services a{

text-decoration: none;
color: #FF8000;
 
 
   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; 

}



#services a:hover {
  
opacity:0.8;
    
}






@media(max-width: 800px) {


#text-service{ 

width: 80%; 
margin: 40px auto 0px ;
font-size: 1.4em;
	
}


.box2{ 
margin: 40px 10px 0px 10px ;
}

.box2 p{ 

font-size: 1.2em;			
}

.box{ 
margin: 40px 10px 0px 10px ;	
}


}	





@media(max-width: 635px) {


#text-service{ 

width: 90%; 
margin: 20px auto 0px ;
font-size: 1.2em;
	
}

.box2{ 

width: 90%; 
margin: 20px 10px 0px 10px ;
			
}


.box2 p{ 

font-size: 1em;			
}


.box{ 
margin: 20px 10px 0px 10px ;	
}


}	



@media(max-width: 400px) {


#text-service{ 

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

.box2{ 

width: 90%; 
margin: 10px 10px 0px 10px ;
			
}


.box2 p{ 

font-size: 1em;			
}


.box{ 
margin: 10px 10px 0px 10px ;	
}


}








/* ---------------------------------   location     --------------------------------------------*/



 #location{
border-top: 1px solid transparent;
  text-align: center;
  height: auto;
  width: 100%;
  background-color: #FF8000;
  padding-bottom:20%;
}

#z-location{
 border: 1px solid transparent;
width: 10%;
margin:60px auto 0px;
}


#location h1{
font-size: 2.5em;
color:#FFFFFF;
}



 .box-loco{ 

width: 200px; 
height: 200px; 
border: 2px solid #FFFFFF;
border-radius:20px;
margin: 100px 30px 0px 30px ;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
overflow: hidden; 
position: relative;
text-align:center;/* On réinitialise les élements centré a gauche */	
	
line-height:1.1;
	
}



 #text-loco{
border-top: 1px solid transparent;
  text-align: center;
  height: auto;
  width: 70%;
margin: 50px auto 0px;
}




#location p{ 

font-size: 1.4em;
color:#FFFFFF;
			
}




@media(max-width: 800px) {


#location h1{
font-size: 2em;
color:#FFFFFF;
}

#location p{ 

font-size: 1.2em;
color:#FFFFFF;
			
}


}



@media(max-width: 600px) {


#location h1{
font-size: 1.8em;
color:#FFFFFF;
}

#location p{ 

font-size: 1em;
color:#FFFFFF;
			
}


}


@media(max-width: 400px) {


#location h1{
font-size: 1.6em;
color:#FFFFFF;
}

}






/* ---------------------------------   ramassage     --------------------------------------------*/



#ramassage{

 border-top: 1px solid transparent;
 
background-image: url('../images/dechet.jpg');
 background-attachment: fixed;
 background-position: 50% 50%; 
background-repeat: no-repeat;
background-size: cover;
 
  text-align: center;

  height: auto;
  width: 100%;
padding-bottom:20%;
}



#z-ramassage{
 border: 1px solid transparent;
width: 10%;
margin:60px auto 0px;
}





 #text-ram{
border-top: 1px solid transparent;
  text-align: center;
  height: auto;
  width: 80%;
margin: 150px auto 0px;

}

 #text-ram p{

font-size: 1.4em;
text-align:center;
font-weight:100;

}





 #lien{
border: 3px solid #FF8000; 
padding:10px 0px 10px 0px; 
width:70%; 
margin: 40px auto 0px;
font-size: 1.4em;
font-weight:bold;
}




#ramassage a{

text-decoration: none;
color: #FF8000;
 
 
   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; 

}



#ramassage a:hover {
  
opacity:0.8;
    
}




@media(max-width: 800px) {


 #text-ram{

margin: 80px auto 0px;

}

 #text-ram p{
font-size: 1.2em;
}


 #lien{
width:80%; 
margin: 30px auto 0px;
font-size: 1.2em;
}





}


@media(max-width: 600px) {


 #text-ram{

margin: 60px auto 0px;

}

 #text-ram p{
font-size: 1em;
}


 #lien{
width:90%; 
margin: 20px auto 0px;
font-size: 1em;
}

}






/* ---------------------------------   contact     --------------------------------------------*/








#contact{

background-image: url('../images/bgqc.png');
 background-attachment: fixed;
 background-position: 50% 40%; 
 background-repeat: no-repeat;
 background-size: cover;
 
border-top: 1px solid transparent;
 text-align: center;
width: 100%;
background-color: #424242;
height: auto;
 
 padding-bottom:8%;
}


#z-contact{
 border: 1px solid transparent;
width: 10%;
margin:60px auto 0px;
}



#contact h1{
font-size: 2.5em;
color:#FFFFFF;
}




.box4{ 

width: 300px; 
height: 300px; 
margin: 100px 30px 0px 30px ;
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 */	
			 
}



.box4 h2{ 

font-size: 1.6em;
text-align:center;
font-size:100;
color: #FF8000;
margin: 0px auto 20px; 
}



.box4 p{ 

font-size: 1.2em;
font-size:lighter;
color:#FFFFFF;
text-align: center;

}




#fb{ 
text-align:center;
width: 300px; 
height: 200px; 
margin: 0px auto 0px; 
border: 1px solid transparent;

}





#contact a{

text-decoration: none;
color: #BDBDBD;
 
 
   -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; 

}



#contact a:hover {
  
opacity:0.7;
    
}





@media(max-width: 800px) {


#contact h1{
font-size: 2em;
}


.box4 p{ 
font-size: 1.2em;
}


.box4 h2{ 

font-size: 1.4em;
margin: 0px auto 20px; 
}

}



@media(max-width: 600px) {


#contact h1{
font-size: 1.8em;
}


.box4 p{ 
font-size: 1em;
}


.box4 h2{ 

font-size: 1.2em;
margin: 0px auto 20px; 
}


.box4{ 
margin: 20px 0px 0px 0px ;
}



}




@media(max-width: 400px) {


#contact h1{
font-size: 1.6em;
}

.box4{ 
margin: 10px 0px 0px 0px ;
}

}




/* ---------------------------------   COPYRIGHT     --------------------------------------------*/





#copyright{ 

font-size: 1em;
color:#000000;
text-align:center;
width: 100%; 
height: auto; 
margin: 80px auto 0px; 
border: 0px solid transparent;

}



#copyright a{

text-decoration: none;
color: #000000;
 
 
   -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: #FF8000;
    
}



@media(max-width: 600px) {

#copyright{ 

font-size: 0.9em;

}

}



@media(max-width: 400px) {

#copyright{ 

font-size: 0.8em;

}

}






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

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



 @media(max-width: 600px) {



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

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


}