@charset "utf-8";
/* CSS Document */

@keyframes slide-right {
  from {
    margin-left: -200%;
    width: 100%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }

  }

body { margin: 0; padding: 0;     font-family: 'Roboto', sans-serif; }

p { font-size: 20px; color:#585858; line-height: 28px; font-family: 'Roboto', sans-serif;}
.liste { font-size: 18px; color:#585858; line-height: 28px; font-family: 'Roboto', sans-serif;}
.listeplan { font-size: 18px; color:#585858; line-height: 28px; font-family: 'Roboto', sans-serif;}
.listeplan a { font-size: 18px; color:#585858; line-height: 28px; font-family: 'Roboto', sans-serif;}
.listeplan li { list-style-type:none;}

.blocservice a {color:#585858;}

img {max-width:100%; }

h1 { color: #333333; font-size: 23px;     font-family: 'Roboto', sans-serif;}
h2 { color: #333333; font-size: 20px;     font-family: 'Roboto', sans-serif;}

.gris {color:#a1a1a1;}

#coteneur { float: left; width:100%; }
.centre { width:90%; margin-right: auto; margin-left: auto; }
.centreba { width:90%; margin-right: auto; margin-left:auto;  }

.centresoumission { width:80%; margin-right: auto; margin-left: auto; text-align:left; }

.centreb { width:90%; margin-right: auto; margin-left: auto; }

.centrel { width:80%; margin-right: auto; margin-left: auto; border-top:#333333 1px solid; border-bottom:#333333 1px solid;  padding: 50px 0px 50px 0px;}

#lignejaune { float: left; width:100%; background:#ffcc00; height:40px;  }
#moitieah { float: left; width:50%; text-align:left; display:none; }
#moitiebh { float: left; width:100%; text-align:center;}
.affaire { line-height: 40px; font-size: 14px; color: #996633; font-weight: bold;}
.numero a { line-height: 40px; font-size: 18px; font-weight: bold; text-decoration: none; color: #996633;}


#haut { float: left; width: 100%; background-color: #151515; }
#logo { float: left; width:100%; text-align:center; }
#menu { float: left; width:100%; padding-top:0px; padding-bottom: 30px; }

.lien{overflow:hidden;float:none; }
.lien a{float:left;display:block;font-size:16px;text-align:center;color:#9d9d9d;margin:0px 0px 0px 0px;text-decoration:none; font-weight: bold; text-transform:uppercase; }
.lien a:hover{	border-bottom: none;
color: #ffcc00;
	transition: all 0.2s ease-in;
	-webkit-transition-duration: 0.4s;
}
.lien .icon{display:none;}


#image { float: left; width:100%; background-image: url(images/pavage.jpg); background-size: cover; height:568px; background-position:center; display:none; }


#imageb { float: left; width:100%; background-image: url(images/pavage-asphalte-2.jpg); background-size: cover; height:193px; background-position:center; }
.soumissionhaut {margin-top: 80px; float: none; text-align: center;}
.soumissionhaut a {  border:1px solid #967800; padding: 18px 50px 18px 50px; text-align: center; text-decoration: none; border-radius: 16px; color: #ececec; font-size: 16px; }


.headertxt {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 48%;
    left: 0%;
    width: 100%;
}


.headtxt1 {
 font-family: 'Roboto', sans-serif;
	font-size: 22px;
	color: #ffffff;
	animation: 1s slide-right ease;
	margin:0;
	padding: 0;
	 text-align:center;

}


.headtxt2 {
 font-family: 'Roboto', sans-serif;
	font-size: 80px;
	color: #ffffff;
	animation: 1.2s slide-right ease;
 text-align:center;
 margin: 20px 0px 20px 0px;
 line-height:60px;
 font-style: oblique;
 
}
.btnb {
padding-top: 40px;
animation: 1.4s slide-right ease;
text-align:center;
	}

.btnb a {
	padding: 16px 64px;
	font-size: 22px;
	font-weight: bold;
	color: #cdcdcd;
	text-decoration: none;
	background-color: none;
	border: 1px solid #c79f00;
	-webkit-border-radius: 16px;

}

#milieu { float: left; width:100%;}
#milieua { float: left; width:100%; padding-top: 10px; padding-bottom: 10px; }
#milieub { float: left; width:100%; padding-top: 50px; padding-bottom: 50px;     background: #fdfdfd; }

.cotea { width:100%; margin-right: 0%; float: left; }
.coteb { width:100%; float: left; text-align:center; }

.bloca { width:100%; float: left; background:#000; margin-bottom:30px; text-align:center;  }
.blocb { width:100%; margin-right: 0%; margin-left: 0%; float:left; background:#000; margin-bottom:30px; text-align:center;  }
.bloca p {  margin:20px 40px 20px 40px; }
.blocb p {   margin:20px 40px 20px 40px;  }

.cent { width: 100%; float: left; background-color: #151515; }
.centg { width: 100%; float: left; background-color: #151515; }


.centok { width: 100%; float: left;  }

.centun { width: 100%; float: left; background:url(images/asphalte-residentiel.jpg); background-size: 100%; max-height:145px;}
.centdeux { width: 100%; float: left;  background:url(images/asphalte-commercial.jpg);background-size: 100%; max-height:145px;}
.centtrois { width: 100%; float: left;  background:url(images/reparation-asphalte.jpg); background-size: 100%; max-height:145px; }
.lignetrois { height:5px; width:10%; background: #fcd302; margin-right: auto; margin-left: auto; text-align:center; padding:0; margin-bottom:130px;}
.titretrois { color:#FFF; text-align: center; font-style: italic; margin-top:40px; font-size: 30px;}

.centb { width: 100%; float: left;  }
.centba { width: 100%; float: left; margin-bottom: 50px;  }

.boutona { margin: 20px auto 50px auto; text-align: center; background-color: #151515; }
.boutona a { margin: 20px auto 20px auto; text-decoration: none; font-size: 25px;  border-radius:8px; border: 1px solid #ffcc00;line-height:40px; color:#FFF; background:#151515;  padding: 10px 20px 10px 20px; }
.boutona a:hover { background:#141414;}



#milieuc { float: left; width:100%;     background: #141414; text-align:center; padding-top: 80px; padding-bottom:80px; background-size:100%; background-position:center; }

.garantie {color:#009966; font-size: 25px; font-weight: bold;}
.mbrossard { color: #ffffff; font-size: 30px; font-weight: bold;}
.qualite { color: #ffcc00; }
.garantieb a { font-size: 18px; margin-right: auto; margin-left: auto; width:30%;	text-decoration: none;
	background-color: none;
	border: 1px solid #acacac;
	-webkit-border-radius: 14px; padding: 16px 42px 16px 42px;
 text-decoration:none;
 color:#F7F7F7;

 }
.grist {color:#999999; margin-right: 0px; margin-left: 0px;}

.gristb {color:#999999; margin-right: 0px; margin-left: 0px; text-align:center; font-size: 23px; }

#milieud { float: left; width:100%; margin-top: 80px; margin-bottom: 80px; text-align:center;}


#bas { float: left; width:100%; padding-top: 50px; padding-bottom: 50px; background: #151515; }
#basa p { color: #a1a1a1; line-height:26px;}
#basa { float: left; width:100%; margin-right: 0%; text-align:center; }
#basb { float: left; width:100%; margin-right: 0%; margin-left: 0%; text-align:center; }
#basb a { color:#a1a1a1; text-decoration: none; line-height: 18px; margin:0; text-align:center;}
#basb a:hover { color:#009966; }

ul.listebas {
    list-style-type: none;
    line-height: 28px;
    font-size:20px;
    margin:0;
    padding:0;
}
.tbas { font-size: 23px; color:#a1a1a1; margin-bottom:60px; margin-top:66px; text-align: center; }
.numerob  a { color:#ffcc00; font-size: 26px; text-decoration: none; }
.courriel a {color:#999999; text-decoration: none; }
.estimation a { line-height:30px; padding: 16px 50px 16px 50px;  border-radius : 10px; border:1px solid #ffcc00; color:#ffffff; text-decoration: none;}

#basc { float: left; width:100%; text-align:center; }


.garantie { text-align:center;}


#villes { float: left; width: 100%; background-color: #151515; }

#villes a {
    color: #a1a1a1;
    font-size: 18px;
    text-decoration: none;
}


.villebt { margin: 40px 100px 40px 100px; color:#a1a1a1; text-align:center;}
#createur { float: left; width: 100%; background-color: #151515; }
.createurta {text-align:center; color: #999999;}
.createurtb {text-align: center; color: #999999;}

.createurtb a { text-decoration: none; color: #999999;}


.servtexte {font-size: 24px; color: #757575; font-weight: 100; text-align:center;}
.titreaservice {text-align:center;}
.blocservice { float: left; width:100%; border-top: 1px solid #F3F3F3; padding: 0px 0px 0px 0px;}

.formulairecentre  { margin-right: auto; margin-left: auto; width:100%;}

.blocsa{ float: left; width:100%; margin-right: 0%; margin-bottom:20px;}
.blocsb { float: left; width:100%; }
.titreservice { margin: 0; padding:0;}
.texteservicea{ margin-right: 0px; margin-left: 0px; text-align:left; }

.numeroville a {color:#ffcc00; font-size: 30px; text-decoration: none; text-align:center; }

.cotevillea { float: left; width:100%;  margin-top:10px; margin-bottom: 10px;}
.cotevilleb { float: left; width:100%; margin-left: 0; margin-top:10px; margin-bottom: 10px; }

.photo { width:48%; text-align:center; float: left; padding:1%; }

img.imgresp{ float: none; padding:0 20px 0 0 ; margin-bottom: 40px;}
.photot { float: left; width:100%; margin-right:0%;}
.textet {float: left; width:100%;}
.textet h2 {margin:0; padding:0; font-size: 24px;}
.textecentre { text-align:center; margin-right: 0px; margin-left: 0px;}
.textecentre a { color:#FFD302;}


.liensb a { line-height:18px; font-size: 14px; }

@media only screen and (min-width:481px){.centreba { width:74%;  }}
@media only screen and (min-width:769px){
 #logo { width:100%; text-align:center; }
#menu { width:100%; padding-top:0px;     float: none;
    text-align: center;
    display: inline-block; }
.centresoumission { text-align:center;}
 .soumissionhaut {
    float: none;
}

#basb { width:45%; margin-right: 0%; margin-left: 0%; }
#basc {  width:50%; }
.centreb { width:90%; }
.centreba { width:54%;  }
.photo { width:31%; float: left; padding:1%; }
img.imgresp{ float: none; padding:0 20px 0 0 ; }

}
@media screen and (max-width:1024px){
 .lien a:not(:first-child){display:none;}
.lien a.icon{display:block;width:100%;}
.lien a{display:none;padding:0px 0px;}
.lien.responsive{position:relative;}
.lien.responsive a.icon{right:0;top:0;display:none;}
.lien.responsive a{float:left;display:block;width:100%;text-align:center; line-height:30px;}
}
@media only screen and (width:1024px){
  .lien{overflow:hidden;float:none; display:none; text-align:center; }
.lien a{float:left;display:none;font-size:16px;text-align:center;color:#9d9d9d;margin:0px 16px 0 16px;text-decoration:none; line-height: 50px;}

}
@media only screen and (min-width:1024px){

#basa { text-align:left;  }
#basb {  text-align:left; }
#image { display:block; }

.bloca { width:30%; margin-bottom:30px; text-align:left;  }
.blocb { width:30%; margin-right: 5%; margin-left: 5%;  margin-bottom:30px;  text-align:left; }
.blocsa{  width:45%; margin-right: 5%; margin-bottom:0;}
.blocsb {  width:50%; }

.blocservice {  padding: 60px 0px 16px 0px;}
.formulairecentre  { margin-right: auto; margin-left: auto; width:90%;}
#moitieah { float: left; width:50%; text-align:left; display:block; }
#moitiebh { float: left; width:50%; text-align:right;}
.texteservicea{ margin-right: 100px; margin-left: 100px; text-align:center; }
.cotevillea {width:30%; margin-bottom: 100px; margin-top: 100px; }
.cotevilleb { width:60%; margin-left: 10%; margin-top:100px; margin-bottom: 100px;}
#basc {  text-align:left; }
#milieua {  padding-top: 50px; padding-bottom: 0px; }
h1 {  font-size: 28px; }
h2 { font-size: 28px; }

#milieud {  text-align: center; margin-top: 110px; margin-bottom: 110px;}
.tbas { text-align: left; }
.texteservicea{  text-align:center; }

.centg { height:350px; }

.centreba { width:90%;}

.centreb { width:90%;}

.photo { width:18%; float: left; padding:1%; }
.titreaservice {text-align:center;}


img.imgresp{ float: left; }
.photot { float: left; width:30%; margin-right:10%; margin-bottom:40px;}

.textet {float: left; width:60%;}
.textecentre { text-align: center; margin-right: 50px; margin-left:50px; }


.centun { max-height:119px;}
.centdeux {max-height:119px;}
.centtrois { max-height:119px; }
#bas {padding-top: 50px; padding-bottom: 50px;}
.headertxt {
 top:400px;
}
 .lien{overflow:hidden;float:none; display:inline-block; text-align:center; }
.lien a{float:left;font-size:16px;text-align:center;color:#9d9d9d;margin:0px 16px 0 16px;text-decoration:none; line-height: 50px;}
#milieub { padding-top: 50px; padding-bottom: 130px; }

}
@media only screen and (min-width:1200px){
 
 .lien{overflow:hidden;float:right; display:inline-block; text-align:center; }
.lien a{float:left;display:block;font-size:16px;text-align:center;color:#9d9d9d;margin:0px 16px 0 16px;text-decoration:none; line-height: 50px;}

 
 .centresoumission { text-align:left;}
 .soumissionhaut {
    float: left;
    text-align:left;
}
.blocsa{  width:45%; margin-right: 5%; margin-bottom:0;}
.blocsb {  width:50%; }

#basa {  width:30%; margin-right: 5%; text-align:left;  }
#basb { width:25%; margin-right: 5%; margin-left: 5%; text-align:left; }
#basc {  width:30%; }
.cotea { width:55%; margin-right: 5%; float: left; }
.coteb { width:40%; float: left; text-align: right; }

.createurta {text-align:left; color: #999999;}
.createurtb {text-align: right; color: #999999;}
.centre { width:80%;  }
.centreba { width:80%; margin-right: auto; margin-left:auto;  }

.tbas { text-align: left; }

#basb a { text-align:left; }
#logo { width:30%; text-align:left; }
#menu { width:70%; padding-top:50px;     padding-bottom: 0px;  text-align: right;}
 .lien a{margin:0px 10px 0 10px;}
.headertxt {
    top: 340px;
}

.bloca { margin-bottom:0px; }
.blocb { margin-bottom:0px; }

.grist {margin-right: 180px; margin-left: 180px;}
.gristb {color:#999999; margin-right: 0px; margin-left: 20px; text-align:left; font-size: 23px; }

#milieuc {background:url(images/pavage-asphalte.jpg); }

#milieud {  text-align: left;}

.centg { height:350px; }

.photo { width:18%; float: left; padding:1%; }
.textecentre { margin-right: 100px; margin-left: 100px; }
.centreb { width:70%; margin-right: auto; margin-left: auto; }
.cotevilleb { margin-top:120px; margin-bottom: 120px;}
.cotevillea {margin-bottom: 120px; margin-top: 120px; }
#milieua {  padding-top: 50px; padding-bottom: 0px; }
.centun { max-height:120px;}
.centdeux {max-height:120px;}
.centtrois { max-height:120px; }
#bas {padding-top: 120px; padding-bottom: 120px;}
}

@media only screen and (min-width:1340px){
 .lien a{margin:0px 16px 0 16px;     color: #9d9d9d;}
.centun { max-height:145px;}
.centdeux {max-height:145px;}
.centtrois { max-height:145px; }
}
@media only screen and (min-width:1400px){
.centg { height:230px; }
.textecentre { margin-right: 200px; margin-left: 200px; }
.centun { max-height:145px;}
.centdeux {max-height:145px;}
.centtrois { max-height:145px; }
}
@media only screen and (min-width:1232px){}
@media only screen and (min-width:1890px){
.titretrois {  margin-top:65px;}

.centun { max-height:200px;}
.centdeux {max-height:200px;}
.centtrois { max-height:200px; }
}