h2, .active a{
	color: #ba2227;
}
footer h3{

}
.flex-box {
	min-height: 75vh !important;
}
.flex-box .slide img{
	min-height: 80vh !important;
	width: auto !important;
}
.wrap-form{
	text-align: center;
	width: 100%;
		background-image:url("../images/content/plombier.html");
	padding-bottom: 50px;
	font-size: 1.3em;
}
.wrap-texte{

}
.class5 .texte{
background-color: #f2f3eb !important;
}
.wrap-form > div{
	text-align: left;
	width: 100%;
	max-width: 600px;
	margin: auto;
	background-color: rgba(255,255,255,0.95);
	padding: 20px;
	border-radius: 10px;
}
.wrap-videos{
	padding-top: 80px;
	text-align: center;
	background-image: url("../images/content/vieux-plombier.html");
}
.wrap-videos iframe{
	width: calc(30vw * 16 / 9);
	height: 30vw;
	margin-bottom: 2vw;
}
.wrap-form  h1{
	text-align: center;
	width: 100%;
	background-color: rgba(255,255,255,0.95);
	padding-top: 150px;
	font-size: 1.2em;
}
.wrap-form label, .wrap-form input, .wrap-form textarea{
		font-size: 0.8em;
	text-align: center;
	width: 100%;
	display: block
}
.wrap-form label
{color: #000;
font-weight: bold;
			font-size: 0.9em;
}
#bt-contact-envoyer{
	background-color:  #000;
	color: #fff;
	font-size: 1.3em;
	padding: 0.3em;
	border-radius: 10px;
}
.wrap-form select{
		font-size: 0.8em;
	text-align: center;
	width: 100%;
	display: block;
	margin-bottom: 10px;
}
.flexbox {
    display: flex;
}
.flexbox > div {
	width: 46%;
	margin: 2%;
}
.icones {
    line-height: 40px;
}
.icones img {
    margin-bottom: -10px;
    margin-right: 10px;
}
.offre {
	margin-left: 0px !important;
	padding-left: 2%;
	border-left: 1px solid #000;
}
.infosContact a {
	text-decoration: none;
}
.map{
	position: relative;
	z-index: 0;
}
p{
	margin-top:1vw;
}
.img-ban img{
	max-height: 100% !important;
	width: auto !important;
	right:auto !important;
	left: auto !important;
}
.banL img{
	left: 0px !important;
}
.banR img{
	right: 0px !important;
}
.baniere{
	display: flex;
}
.texte-ban{
	display: flex;
	text-align: center;
	width: 100%;
}
.texte-ban >div{
	margin: auto;
}
.but{
	color: #fff;
	background-color: #000;
	padding: 0.5%;
	border-radius: 10%;
	text-shadow: none;
}
.etape{
	background-color: #000;
	color: #fff;
	font-size: 2em;
	display: inline-block;
	line-height: 50px;
	width: 80px;
	border-radius: 25px;
	font-weight: bold;
}
.map{
	order: 2;
	min-width: 40%;
}
.map img{
	max-width: 100%;
}
.titre-construction{
	text-align: center;
	width: 100%;
	background-image: url("../images/content/titre-construction.html");
	min-height: 400px;
	background-size: cover;
	background-position: center center;
	display: flex;
}
.titre-construction h1{
	margin: auto;
	text-shadow: 3px 5px 2px #000,1px 1px 1px #000,2px 2px 2px #000;
	text-transform: uppercase;
	font-size: 2.5em;
	color: #000;

}
.bulle{
	max-width: 80%;
	margin: auto;
	text-align: center;
	margin-top: 2.5%;
	margin-bottom: 2.5%;
	padding: 2.5%;
	background-color: #F0F0F1;
}
.lesbulles{
	margin-top: 0px;
}
.map {
	display: flex;
	flex-direction: column;
	padding-right: 1.25%;
}
.serv{
		background-color: aqua;
	width: 100%;
	display: block;
	text-align: center;
	height: 100%;
	background-size: cover;
	display: flex;
	margin: auto;
	background-position: center center;
	background-image: url("../images/content/residential2.html");
  filter:brightness(85%);
	min-height: 200px;
	margin-bottom: 2.5%;
}
.serv:hover{
  filter:brightness(100%);
}
.comm{
	background-image: url("../images/content/residential.html")
}
.map div{
	margin: auto;
}
.serv p{
	margin: auto;
	  filter:brightness(200%);
}
.map a{
	color: #fff;
	text-decoration: none;
	text-shadow: 3px 2px 2px #000;
	font-weight: bold;
	font-size: 2em;
}
.texte-slide{
	z-index: 999999;
	width: 100%;
	text-align: center;
	text-shadow: 3px 5px 2px #000;
	color: #f0f2e6;
	font-weight: bold;
	position: absolute;
	bottom: 0px;
}
.wrap-texte img{
	max-width: 100%;
	height: auto;
}
.texte-slide svg{
	fill:#f0f2e6;
		filter: drop-shadow( 3px 5px 2px #000 );
	width: 40px;
	height: auto;
	margin-top: 5px;
		transition: all 0.2s ease-in-out;
}
.texte-slide svg:hover{
	fill:#ba2227;
		filter: drop-shadow( 1px 1px 1px #000 );
	cursor: pointer;
	

}
.page-accueil .texte-slide{
	text-shadow: 3px 5px 2px #000;
	color: #FFFFFF;
	bottom: 0px;

}
header img{
	width: 100%;
	height: auto;
	margin: auto !important;
	z-index: 1;
	position: absolute;
	top:0px;
	left: 0px;
}
.black{
	position: relative;
	z-index: 999999;
	height: 58vw;
}
.contarrow {
	position: absolute;
	bottom: 0px;
	z-index: 9999999;
	width: 200px;
	left: calc(50% - 100px);
	cursor: pointer;
	color: #f9f9f9;
	font-weight: bold;
	font-size: 1em;
	text-align: center;
	text-shadow: 0px 2px 2px rgba(0, 0, 0, 1);
}
.contarrow svg {
	bottom: 0px;
	z-index: 999;
	width: 100px;
	fill: #000;
	filter: drop-shadow( 3px 3px 3px #000 );
	transition: all 0.5s ease-in-out;
}
.il_arrive{
	color: #000;
	font-size: 4.5vw;
	margin-top: 0;
	text-shadow: 1px 1px #fff, -1px 1px #fff, -1px -1px #fff, 1px -1px #fff;
}
main a{
	color: #000;
}
.accueil{
	display: flex;
	justify-content: space-between;
}
.accueil .accueil-plombier{
	position: relative;
}
.accueil .accueil-plombier > img{
	height: 100%;
	width: auto;
	position: absolute;
}
.accueil .accueil-texte{
	width:70%;
	padding: 0 1em 2em;
	vertical-align:top;
	margin-top:2vw;
	text-align:justify;
	position: relative;
	background-color: #fff;
}
.wrap-lesblog {
	text-align: center;
	background-color: #000;
	color: #fff;
	padding-bottom: 40px;
	padding-top: 20px;
}
.wrap-lesblog div{
	width: 100%;
}
.wrap-lesblog h2, .wrap-lesblog a{
	text-decoration: none;
	margin-top:10px;
	display: block;
	text-align: center;
	color: #fff;
}
.accueil{
	position: relative;
}
#coin{
	width: 100%;
	bottom: 0px;
	fill:#F26624;
}
.st0{
	fill:#F26624 !important;
	bottom: 0px;
	z-index: 999999;
}
.wrap-lesblog h2{
	margin-top: 0px;
	width: 100%;
	padding: 20px;
}
.liste-bris{
	padding: 2.5%;
	margin: auto;
}
.saviz{
	display: flex;
	text-align: left;
	padding: 2.5%;
}
.imgh{
	text-align: right;
}
.saviz img, .image-bris img{
	width: 100%;
	height: auto;
	max-width: 30vw;
	margin-right: 0px;
	margin-left: auto;
}
.saviz div, .image-bris{
	min-width: 33%;
	height: auto;
	margin: auto;
	text-align: center;
}
.hst{
	margin: auto;
}
.bris{
	display: flex;
	background-color: #f8f8f8;
}
.saviz h3{
	color: #F26624;
	margin-top: 2.5%;
	margin-bottom: 2.5%;
}
.lesblog{
	display: inline-flex;
	width: 90% !important;
	margin: auto;
}
main ul{
	margin: 0px;
	columns: 1;
	text-align: left;
}


main ul li {
	

}
.page-debouchage main ul li {
	list-style: none;
	margin: 0px;
	color: #fff;
	font-size: 1.5em;
	line-height: 2em;
}
.page-debouchage main .cycle-slideshow{
	background-color: #000;
	z-index: 0;
}
.page-accueil .article-date{
	font-weight: normal;
}
.type-html{
	display: flex;
	justify-content: space-between;
	min-height:600px;
}
.headerPage{
	min-height: 400px;
	background-image: url("../images/content/bg_page.html");
	padding-top: 109px;
	display: flex;
}
.headerPage h1{
	margin: auto;
	text-align: center !important;
	width: 100%;
}
.type-html .html-image{
	width:33%;
    background: url(../images/layout/plombier.html) top right;
    background-size: auto 100%;
	background-size: cover;
}
.type-html .html-image > img{
	height: 100%;
	width: auto;
	float: right;
}
.cycle-slideshow{
	margin-top: 0px;
	list-style: none;
}
.slide{
	padding: 0px;
	margin: 0px;;
	width: 100%;
	text-align: center;
	visibility: visible; background-size: cover; width: 100%; height: 100%; 
	background-position: center center;
}
.unservice{
	display: flex;
	width: 100%;
}

.type-html .html-texte{
	min-width:60%;
	padding: 0 1em;
	vertical-align:top;
	margin-top:2vw;
	text-align:justify;
}
.flex-box{
	display: flex;
	width: 100%;
	position: relative;
}
.flex-box:nth-child(odd){

}
.flex-box >div{
	width: 50%;
	display: flex;
	background-image: url("../images/content/bg_texte.jpg");
	background-size: cover;
}
.wrap-texte{
	text-align: center;
	margin: auto;
	padding: 40px;
}
.page-activites .wrap-texte{
	text-align: left;

}
.texte{
	order: 1;
}
.image{
	order: 2;
	overflow: hidden;
	display: block !important;
}
.flex-box:nth-child(odd) .texte{
	background-color: #fff;
	order: 3;
}
@media (max-width: 1050px){
	.image{
		order: 4 !important;
		min-height: 50vh;
	}
	.list-ski {
		position: relative;
		bottom: auto;
		left: auto;
		color: #fff;
		font-weight: bold;
		text-shadow: 0px 0px 0px #fff;
		max-width: auto;
		text-align: center;
	}
	.flex-box{
		flex-direction: column;
	}
	.flex-box div{
		width: 100%;
	}
	.flex-box .image img{
		width: 100% !important;
		min-height: auto !important;
		height: auto !important;
	}
	.logos > div img {
		height: 5vw;
		width: auto;
	}
	header {
		height:86vw;
	}
}
@media (max-width: 800px){
#menu-principal {
	width: calc(100% - 20px);

	left: 10px;
}	
	#lelogo {

	left: -10px;
}
header h1 {
	font-size: 24px;
}	
}
@media (max-width: 600px){
	.wrap-texte {

	padding: 10px;
}
	#lelogo {
	left: -10px;
	top: -10px;
	width: 150px;

}
	#menu-principal {
	background-color: rgba(255,255,255,0.95);
	width: calc(100% - 20px);
	top: 20px;
	left: 10px;

}
	footer .bg {
	background-image: url("../images/content/footer_bg.jpg");
	color: #fff;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: right top;
	position: relative;
	text-align: center;
	background-size: 100%;
	min-height: 22vw;
}
	.logos{
		display: block;
		position: relative;
		padding-top: 25vw;
	}
	.logos > div img {
	height: 10vw;
	width: auto;
		display: inline-block;
		margin-bottom: 20px;
}
}




.a {
  text-decoration: none;
  padding: 15px;
  background-color: white;
  border-radius: 5px;
  text-transform: uppercase;
  color: black;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}
.modal:target {
  visibility: visible;
  opacity: 1;
}
.modal_content {
  border-radius: 4px;
  position: relative;
  width: 500px;
  max-width: 90%;
  background: white;
  padding: 1.5em 2em;
}

.modal_close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: grey;
  text-decoration: none;
}