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:  'Roboto Condensed', 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%;
  background-color: #000000;
}










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




#top {
border-bottom:1px solid #2e2e2e;
  width: 100%;
  height: 30px;
  left: 0;
  top: 0;
  
  font-size: 0.8em;
  
}



#tel {

float:right;
width: auto;
border: 1px solid transparent;
margin-top:3px;
margin-right:8%;
color:#FFFFFF;
}


#rbq {

float:left;
width: auto;
border: 1px solid transparent;
margin-top:6px;
margin-left:8%;
color:#FFFFFF;
}



@media(max-width: 600px) {


#top {
  font-size: 0.7em;
}

#tel {
margin-top:4px;
margin-right:4%;
}

#rbq {
margin-left:4%;
}

}




@media(max-width: 400px) {



#top {
  font-size: 0.6em;
}

#tel {
margin-top:5px;
margin-right:2%;
}

#rbq {
margin-top:9px;
margin-left:2%;
}




}





 h1{
  padding-top:60px;
font-size: 2.5em;
color:#FFFFFF;
font-weight:100;
font-style:italic;
}

 h2{
  padding-top:5px;
font-size: 1.6em;
color:#FFFFFF;
font-weight:100;
margin:0px 10px 0px 10px;
}





#one{
text-align:center;

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


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

}
	



	
	


@media(max-width: 800px) {

 h1{

font-size: 2em;
}


 h2{
font-size: 1.5em;
}

#one{
width: 60%;
}


}	

@media(max-width: 600px) {

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

 h2{
font-size: 1.3em;
}


#one{
width: 80%;
}
	


}


@media(max-width: 400px) {

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

 h2{
font-size: 1.1em;
}

}




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



#accueil{

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



#diapo {
 border: 0px solid transparent;
margin: 0px auto 0px;
background-position: center; 
  height: auto;
  width: auto;
}



#image-accueil {

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

}





@media(min-width: 500px) {

 #diapo {
display: block;
}

  #image-accueil {

display: none;
}
 
 

}



@media(max-width: 499px) {

 #diapo {
display: none;
}

 #image-accueil {

display: block;
}
 
 

}








/* ---------------------------------   à propos     --------------------------------------------*/



#apropos{

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


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



#text-apropos{ 

width: 80%; 
height: auto; 
margin: 60px auto 60px ;
border: 1px solid transparent; 
color:#FFFFFF;
font-size: 1.4em;
	font-weight:300;
}


.box{ 

width: 250px; 
height: auto; 
margin: 60px 20px 0px 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:center;
z-index:2;	

}





@media(max-width: 1000px) {
.box{ 
width: 200px; 
height: auto; 
margin: 60px 5px 0px 5px ;
}
}



@media(max-width: 690px) {

.box{ 
width: 30%; 
height: auto; 
margin: 60px 0px 0px 0px ;
}

}


@media(max-width: 600px) {

#text-apropos{ 
width: 90%; 
margin: 60px auto 60px ;
font-size: 1.2em;
}

}





/* ---------------------------------   Annonce     --------------------------------------------*/




#annonce{

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

  
   background-image: url('../images/brique.jpg');

 background-position: 50% 40%; 


  
}






#annonce p{ 
padding-top:120px;
margin: 0px auto 40px ;
color:#000000;
font-size: 2em;
font-weight:400;
}



@media(max-width: 600px) {

#annonce p{ 
font-size: 1.5em;
}

}








 a.boutton {

width: 350px;
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;

margin: 0px 0px 0px 0px;

border: 5px solid #DF3A01;
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 */	
	
padding: 15px 15px;

color: #DF3A01;
font-weight: bold;
font-size: 2.5em;

}


a.boutton:hover {

color: #8A2908;
border: 5px solid #8A2908;

}



@media(max-width: 600px) {

#annonce p{ 
font-size: 1.5em;
margin: 0px auto 20px ;
}


 a.boutton {
width: 300px;
margin: 0px 0px 0px 0px;
border: 3px solid #DF3A01;
font-size: 2em;
}

a.boutton:hover {
border: 3px solid #8A2908;
}

}



@media(max-width: 400px) {

#annonce p{ 
font-size: 1.2em;
margin: 0px auto 20px ;
}


 a.boutton {
width: 250px;
margin: 0px 0px 0px 0px;
border: 3px solid #DF3A01;
font-size: 1.6em;
}

a.boutton:hover {
border: 3px solid #8A2908;
}

}






/* ---------------------------------   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: 80%; 
height: auto; 
margin: 60px auto 0px ;
border: 1px solid transparent; 
color:#FFFFFF;
font-size: 1.4em;
font-weight:300;

}





.box2{ 

width: 200px; 
height: auto; 
margin: 60px 20px 0px 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 */	
	
}





.box3{ 

width: 250px; 
height: auto; 
margin: 60px 20px 0px 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:center;
z-index:2;	

}



.box3 p{ 
margin: 10px auto 0px ;
color:#FFFFFF;
font-size: 1em;
font-weight:400;

}









@media(max-width: 1200px) {


.box3{ 

width: 200px; 
height: auto; 
margin: 60px 0px 0px 0px ;

}


.box2{ 
width: 150px; 
height: auto; 
margin: 50px 20px 0px 20px ;
}

}



@media(max-width: 850px) {

.box3{ 
width: 40%; 
height: auto; 
margin: 60px 20px 0px 20px ;
height: 350px; 
border: 1px solid transparent; 

}

}



@media(max-width: 750px) {

.box3{ 
width: 40%; 
height: auto; 
margin: 60px 20px 0px 20px ;
height: 325px; 
border: 1px solid transparent; 

}

}


@media(max-width: 690px) {


.box3{ 

width: 40%; 
height: auto; 
margin: 60px 10px 0px 10px ;
height: 300px; 
border: 1px solid transparent; 
}



}





@media(max-width: 600px) {


#text-service{ 

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


.box2{ 
width: 100px; 
height: auto; 
margin: 40px 1px 0px 1px ;
}


.box3{ 

width: 40%; 
height: auto; 
margin: 40px 10px 0px 10px ;
height: 280px; 
border: 1px solid transparent; 
}




}	




@media(max-width: 500px) {


.box3{ 

width: 40%; 
margin: 40px 10px 0px 10px ;

height: 230px; 
border: 1px solid transparent; 


}


.box3 p{ 
margin: 5px auto 0px ;
color:#FFFFFF;
font-size: 0.8em;
font-weight:400;

}


}	



@media(max-width: 400px) {


.box3{ 

width: 40%; 
margin: 30px 10px 0px 10px ;

height: 200px; 
border: 1px solid transparent; 
}



}	













/* ---------------------------------   Bouton     --------------------------------------------*/


 a.bouton {


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;

margin: 130px 0px 0px 0px;

border: 5px solid #DF3A01;
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 */	
	
padding: 15px 15px;

color: #DF3A01;
font-weight: bold;
font-size: 1.6em;

}


a.bouton:hover {

color: #8A2908;
border: 5px solid #8A2908;

}






@media(max-width: 600px) {




 a.bouton {
border: 3px solid #DF3A01;
font-size: 1.2em;
}

a.bouton:hover {
border: 3px solid #8A2908;
}

}



@media(max-width: 400px) {

 a.bouton {

font-size: 1em;
}


}




















/* ---------------------------------   RÉALISATIONS - accueil     --------------------------------------------*/





 #realisations{
 border-top: 0px solid transparent;
  text-align: center;
  height: auto;
  width: 100%;
   padding-bottom:10%;
 background-image: url('../images/brique.jpg');
 background-position: 50% 40%; 
 


}




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


#realisations h1{
color:#000000;
font-weight:400;
}

#realisations h2{
color:#000000;
font-weight:400;
}


 #zone-realisations{
 
border-top: 1px solid transparent;
  text-align: center;
  height: auto;
  width: 100%;
margin:0px auto 0px;
}


.example-image{
 margin: 5px;
 width: 20%;
}






@media(max-width: 800px) {


 #realisations{

  padding-bottom:100px;
}

#realisations h1{
font-size: 2em;

}

.example-image{
 margin: 20px;
 width: 30%;
}

}



@media(max-width: 600px) {

#realisations h1{
font-size: 1.8em;

}

.example-image{
 margin: 10px;
 width: 40%;
}

}


@media(max-width: 400px) {

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

}




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





#contact{
border-top: 1px solid transparent;
 text-align: center;
width: 100%;
height: auto;
 padding-bottom:30px;
}


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



.box4{ 
width: 300px; 
height: 320px; 
margin: 20px 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 h4{ 

font-size: 1.6em;
text-align:center;
font-weight:400;
color: #DF3A01;
margin: 0px auto 0px; 
}



.box4 p{ 

font-size: 1.2em;
font-weight:300;
color:#FFFFFF;
text-align: left;

}







#contact 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; 

}



#contact a:hover {
  
opacity:0.7;
    
}




@media(max-width: 1200px) {


.box4{ 
width: 28%; 
height: 320px; 
margin: 20px 5px 0px 5px ;
border: 1px solid transparent; 		 
}

}


@media(max-width: 1000px) {


.box4{ 
width: 30%; 
height: 320px; 
margin: 20px 5px 0px 5px ;
border: 1px solid transparent; 		 
}

}




@media(max-width: 800px) {



.box4{ 
width: 300px; 
height: 310px; 
margin: 20px 50px 0px 50px ;		 
}


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


.box4 h4{ 

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

}



@media(max-width: 600px) {


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



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


.box4 h4{ 
font-size: 1.2em;
margin: 0px auto 20px; 
}

}




@media(max-width: 400px) {

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

}




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





#copyright{ 

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

}



#copyright 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; 

}



#copyright a:hover {
  
color: #DF3A01;
    
}



@media(max-width: 600px) {

#copyright{ 

font-size: 0.9em;

}



#copyright{ 

width: 60%; 

}


}



@media(max-width: 400px) {

#copyright{ 

font-size: 0.8em;

}

}






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

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


 @media(max-width: 1000px) {



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

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


}



 @media(max-width: 600px) {



.boutonUp{
	position: fixed;
	
	right: 5px;
	bottom: 20px;
	
	height: 50px;
	width: 30px;

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


}











/* ---------------------------------   PAGE RÉALISATIONS     --------------------------------------------*/





#realisation{ 
text-align:center;
width: 100%; 
height: auto; 
margin: 100px auto 150px; 
border: 0px solid transparent;
}



#realisation h2{ 

  padding-top:5px;
font-size: 1.6em;
color:#FFFFFF;
font-weight:100;
margin: 0px 10px 100px 10px; 

}




#zone-titre{ 

font-size: 2em;
color:#FFFFFF;
text-align:center;
width: 100%; 
height: auto; 
margin: 100px auto 0px; 
border: 0px solid transparent;
font-weight:400;
}

#ligne{
text-align:center;
margin:5px auto 20px;
width: 70%;
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #DF3A01, rgba(0, 0, 0, 0));
}	








@media(max-width: 800px) {

#realisation{ 
margin: 80px auto 40px; 
}

#realisation h2{ 
font-size: 1.4em;
}


#zone-titre{ 

margin: 80px auto 0px; 
font-size: 1.6em;
}

}


@media(max-width: 600px) {

#realisation{ 
margin: 60px auto 40px; 
}


#realisation h2{ 
font-size: 1.2em;
}

#zone-titre{ 

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

}




@media(max-width: 400px) {


#realisation{ 
margin: 30px auto 40px; 
}

#realisation h2{ 
font-size: 1em;
}

#zone-titre{ 
margin: 40px auto 0px; 
font-size: 1.2em;
}

}





/* ---------------------------------   PAGE CONTACT     --------------------------------------------*/





#zone-contact{ 
text-align:center;
width: 100%; 
height: auto; 
margin: 100px auto 250px; 
border: 0px solid transparent;
}



#zone-contact h2{ 

  padding-top:5px;
font-size: 1.6em;
color:#FFFFFF;
font-weight:100;
margin: 0px 10px 100px 10px; 

}




@media(max-width: 800px) {


#zone-contact{  
margin: 80px auto 100px; 
}


#zone-contact h2{ 
font-size: 1.3em;
}

}



@media(max-width: 600px) {

#zone-contact h2{ 
font-size: 1.2em;
}


#zone-contact{  
margin: 60px auto 100px; 
}


}




@media(max-width: 400px) {

#zone-contact h2{ 
font-size: 1em;
}

#zone-contact{  
margin: 30px auto 100px; 
}



}








#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: 0px solid transparent;
color:#FFFFFF;
}



#coordo  h3{
text-align:center;
font-weight:300;
font-size:2em;
color:#DF3A01;
}



.box-contact{ 

width: 300px; 
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-contact p{ 
font-size: 1.1em;
color:#FFFFFF;
text-align: left;
padding: 2px 0px;
font-weight:300;	
}

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


.box-contact a:hover{
opacity:0.7;
}







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



#form-contact {
width:300px;
margin: 0px auto 0px;
border: 1px solid transparent;
padding:5px;

}



#note-formulaire{ 
font-size: 0.8em;
color:#FFFFFF;
text-align: center;
padding: 2px 0px;
font-weight:300;	
}



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

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

.info{
font-size:.8em;
color: #FF0000;
letter-spacing:2px;
padding-left:5px;
}


.btnAction{
background-color:#000000;
margin: 10px 0px 0px 0px;
padding:10px 0px 10px 0px;
color:#DF3A01;
border: 2px solid #DF3A01; 
border-radius:4px;
width: 96%;
font-size:1em;
font-weight:bold;


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

	  font-family:  'Roboto Condensed', sans-serif;
	  
}


button:hover{
background-color:#DF3A01;
color:#000000;
cursor: pointer;

}



textarea{
font-family:  'Roboto Condensed', sans-serif;
font-size:1em;
width:96%;
height: 120px;
margin:5px 0px 0px 0px;
border-radius:4px;
padding:5px;
resize:none;
border:1px solid #d8d8d8;
color:#FFFFFF;
background-color:#000000;
}


input{
width:96%;
height:35px;
margin-top:5px;
border:1px solid #d8d8d8;
border-radius:4px;
padding:5px;
font-size:1em;
background-color:#000000;

color:#FFFFFF;
}


input:focus, textarea:focus {

outline: none;
}







@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;
}



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



}