@charset "UTF-8";
@font-face {
    font-family: Ciutadella_semi_bold;
    src: url(../fonts/Ciutadella_SemiBold.WOFF);
}
@font-face {
    font-family: Ciutadella;
    src: url(../fonts/Ciutadella_Regular.WOFF);
}
@font-face {
    font-family: Viga;
    src: url(../fonts/Viga-Regular.woff);
}

html,input,
textarea{
	font-family: Ciutadella;
	font-size: 16px;
}
button{font-family: Ciutadella_semi_bold;}
body {
	margin: 0;
	padding: 0;
	font-size:0;
}
iframe,img{
	border: 0;
}
a{
	cursor: pointer;
	text-decoration:none;
}
h1{
	font-size: 39px;
	margin:20px auto;
	font-family:Viga;
	text-transform:uppercase;
	text-align: center;
}
#bloc-realisation h1{font-size:65px;}
#btn-fermer-menu,#btn-menu-mobile,#btn-appeler-mobile{display: none;}
h6{
	font-family:Viga;
	text-transform:uppercase;
	font-size:24px;
	margin:auto auto 20px;
	font-weight:normal;
}
p{
	font-size:16px;
}

.clear{
	clear: both;
}
#old-browser-dialog p{
	 text-align:center;
	 font-size:18px;
	 background-color:#FAF1AA;
	 padding:5px;
	 position:relative;
	 top:100px;
}
#old-browser-dialog a{
	cursor:pointer;
	color:#0000ff;
	text-decoration:underline;
}

/*##############*/
.bold{
	font-family:Ciutadella_semi_bold;
}
.viga{
	font-family:Viga;
}
.wrap{
	margin:auto;
	width:1240px;
	padding:20px;
}
.wrap.small{width: 680px;}
section.grise{background-color:rgba(0,0,0,0.15);padding-top:10px;}
/*##############*/
header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:75px;
	padding:20px;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	z-index: 999;
	background-color:#fff;
}
header nav{
	text-align:right;
	display:inline-block;
	width:calc(100% - 280px);
}
header #logo{
	display:inline-block;
	width:280px;
	padding:2.5px 0;
}
#btnEstim{
	background-color:#e63c2f;
	color:#fff;
	padding:13px 15px 7px;
	text-transform:uppercase;
	display:inline-block;border: 0;margin: 0;
	box-shadow:0 3px 5px 0 rgba(0,0,0,0.25)
}
#btnEstim:hover{
	box-shadow:0 3px 10px 0 rgba(0,0,0,0.25)
}
header a{
	font-size:18px;
	line-height:18px;
	transition:500ms all;
}
header nav .telephone{
	margin:10px 15px 0px;
	display:inline-block;
	color:#000;
	border-bottom:2px solid #fff;
}
header nav .telephone:hover{
	border-bottom-color:#E63C2F;
}
header div div:last-child a{
	border-bottom:2px solid #fff;
	display:inline-block;
	margin: 15px 7px 0px;
	color:#000;
}
header div div:last-child a:hover{
	border-bottom-color:#E63C2F;
}

/*#######################*/

#content{
	padding-top: 120px;
}
.wrap .demi{
	display:inline-block;
	width:calc(50% - 20px);
	margin-right:20px;
	vertical-align:top;
}
.wrap .demi:nth-child(even){
	margin-right:0;
	margin-left:20px;
}
.wrap .quart{
	display:inline-block;
	width:calc(25% - 30px);
	margin-right:20px;margin-left: 20px;
	vertical-align:top;
}
.wrap .quart:first-child{margin-left: 0;}
.wrap .quart:last-child{margin-right: 0;}
.bloc-menu{
	padding:20px;
	box-sizing: border-box;
	position:relative;
	height:260px;
	background-position:center;
	background-size:auto 100%;
	background-repeat:no-repeat;
	margin-bottom: 20px;
	margin-top: 20px;
	transition:500ms all;
}
.cadre{
	border:3px solid #fff;
	width:100%;
	height:100%;
	box-sizing:border-box;
}
.bloc-menu .titre{
	position:absolute;
	top:0;
	left:40px;
	background-color:#682f24;
	color:#fff;
	text-transform:uppercase;
	height:55px;
	font-size:24px;
	line-height:24px;
	padding:10px;
	max-width:200px;
	transition:500ms all;
}
.bloc-menu p{
	position:relative;
	top:100%;
	-webkit-transform:translateY(-100%);
	-moz-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	-o-transform:translateY(-100%);
	transform:translateY(-100%);
	margin:0;
}
.bloc-menu .btn{
	display:inline-block;
	background-color:#fff;
	color:#000;
	padding:10px 20px;
	position:absolute;
	top:50%;
	left:50%;
	font-size: 18px;
	text-transform:uppercase;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.6);
	opacity:0;
	transition:500ms all;
}
.bloc-menu .btn:hover{
	box-shadow: 3px 5px 25px 0 rgba(0,0,0,0.6);
}
.bloc-menu:hover .btn{
	opacity:1;
}
.bloc-menu:hover .titre{
	opacity:0;
}
.bloc-menu:hover{
	background-size:auto 105%;
}

#entrepreneur{background-image:url(../images/entrepreneur_general.jpg);}
#amenagement{background-image:url(../images/amenagement.jpg);}
#deneigement{background-image:url(../images/deneigement.jpg);}
#autresServices{background-image:url(../images/ensemensement-hydrolique.jpg);}

#bloc-realisation{
	background-color:#2f3334;
	color:#fff;
	text-align:center;
}
#bloc-realisation a{
	display:block;
	width:200px;
	padding:12px 0 8px;
	background-color:#E63C2F;
	box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.8);
	font-size:18px;
	margin:20px auto;
}
#bloc-realisation a:hover{
	box-shadow: 3px 5px 25px 0 rgba(0,0,0,0.8);
}
.realisation-horizontal{
	height:215px;
	width:100%;
	padding:20px;
	box-sizing:border-box;
	position:relative;
	background-position:center;
	background-size:auto 100%;
	margin-bottom:20px;
	text-align:center;
	transition:500ms all;
}
.realisation-horizontal .cadre,
.realisation-vertical .cadre{
	opacity:0;
	transition:500ms all;
}
.realisation-horizontal:hover .cadre,
.realisation-vertical:hover .cadre{
	opacity:1;
}
.realisation-horizontal:hover{
	background-size: auto 105%;
}
.realisation-vertical:hover{
	background-size: auto 105%;
}
.realisation-horizontal .btn,
.realisation-vertical .btn{
	display:inline-block;
	background-color:#fff;
	color:#000;
	padding:10px 20px;
	position:absolute;
	top:50%;
	left:50%;
	font-size: 18px;
	text-transform:uppercase;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.6);
	transition:500ms all;
}
.realisation-horizontal .btn:hover,
.realisation-vertical .btn:hover{
	box-shadow: 3px 5px 25px 0 rgba(0,0,0,0.6);
}
.realisation-vertical{
	height:445px;
	padding:20px;
	box-sizing:border-box;
	margin-bottom:20px;
	position:relative;
	background-position:center;
	background-size:auto 100%;
	transition:500ms all;
}
#apropos .fond{
	background-image:url(../images/texture.jpg);
	background-size:cover;
	background-position:center;

	text-align:center;
	color:#fff;
	padding:1px 0;
}
#apropos .fond h1{
	margin:40px auto;
}
#apropos .fond p{
	width:50%;
	margin:auto;
	line-height: 33px;
}
#apropos .fond a{
	padding:12px 0px 8px;
	width:78px;
	display:block;
	margin:40px auto;
	background-color:#E63C2F;
	box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.6);
	color:#fff;
	font-size:18px;
	transition:500ms all;
    font-family: Ciutadella_semi_bold;
    text-transform: uppercase;
}
#apropos .fond a:hover{
	box-shadow: 3px 5px 25px 0 rgba(0,0,0,0.6);
}
#map{
	width:100%;
	height:350px;
}
#footer-content{
	background-color:#2f3334;
	color:#fff;
	padding:20px 0;
	text-align:center;
}
#conception{
	color:#E63C2F;
	text-decoration:underline;
	font-size:16px;
}
#conception img{
	margin-left:5px;
	vertical-align:middle;
}
#apacha{
	margin:20px auto 30px;
	display:inline-block;
}
#fb{
	margin-bottom:60px;
	display:inline-block;
}
.contact-form input,
.contact-form textarea{
	border:2px solid #fff;border-radius: 0;
	margin-bottom:4px;
	background:transparent;
	color:#fff;
	width:100%;
	resize:none;
	box-sizing:border-box;
	padding: 4px 14px;
}
.contact-form button{
	padding:12px 15px 8px;
	display:inline-block;
	margin:40px auto;
	background-color:#E63C2F;
	box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.6);
	color:#fff;
	font-size:18px;
	border:none;
	cursor:pointer;
	transition:500ms all;
	text-transform: uppercase;
}
.contact-form button:hover{
	box-shadow: 3px 5px 25px 0 rgba(0,0,0,0.6);
}
#coords p{
	line-height: 33px;
}
#coords p a{
	color:#fff;
}
#soumission-footer p{
	line-height: 33px;
	max-width:90%;
}
#soumission-footer a{
	padding:12px 15px 8px;
	display:inline-block;text-transform: uppercase;font-family: Ciutadella_semi_bold;
	margin:40px auto;
	background-color:#E63C2F;
	box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.6);
	color:#fff;
	font-size:18px;
	border:none;
	cursor:pointer;
	transition:500ms all;
}
#soumission-footer a:hover{
	box-shadow: 3px 5px 25px 0 rgba(0,0,0,0.8);
}
#section-joindre{position: relative;}
#section-joindre .background{background-image: url(/images/bg-nous-joindre.jpg);top: 119px;}
#section-joindre .wrap{width: 680px;font-size: 16px;}
#section-joindre h2{text-transform: uppercase;font-size: 27px;margin-bottom: 6px;line-height: normal;}
#section-joindre section{z-index: 1;position: relative;line-height: 32px;}
#section-joindre .coordonnees{margin: 219px auto 0;padding: 14px 39px 28px;background: #F0F0F0;}
#section-joindre .contact-form{margin-top: 41px;padding: 6px 38px;color: #fff;text-align: center;background: #2F3334;}
#section-joindre .contact-form h3{text-transform: uppercase;font-size: 27px;margin-bottom: 10px;font-size: 28px;text-align: left;line-height: normal;}

ul {
   list-style: none;padding-left: 19px;margin: 24px 0 13px;
}
li{font-size: 18px;}
ul li:before {
   content: "•";
   font-size: 18px;
   padding-right: 3px;
}
.texte-conteneur{font-size: 16px;line-height: 32px;}
.texte-conteneur .wrap{width: 606px;}
.texte-conteneur h1{margin-top: 29px;}

.background{
top: 0;
background-image: url(/images/bg-amenagement.jpg);
position: absolute;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
left: 0;
right: 0;
height: 300px;
z-index: 0;
}
.bloc-texte{padding: 16px 38px 27px;margin: 39px 0;z-index: 1;position: relative;background: #F0F0F0;line-height: 32px;}
.bloc-texte:first-child{margin-top: 173px;}
.bloc-texte img + img{margin-left: 42px;}
.bloc-texte p{margin: 2px 0;}
h2{font-size: 23px;text-transform: uppercase;margin: 20px 0;font-family: Viga;line-height: 28px;}
h3{text-transform: none;font-size: 23px;font-family: Ciutadella_semi_bold;margin: 14px 0;}
#section-404 h2{text-align: center;}
.relative{position: relative;}
#section-realisations .wrap{padding-top: 0;}
.realisation_v{background-image:url(/images/Terrassement_Qc_2011_v.jpg);}
.realisation_h1{background-image:url(/images/Allee_pietonniere_RDL_2012.JPG);}
.realisation_h2{background-image:url(/images/Dalle_de_beton_Qc_2011.jpg);}
.realisation_h3{background-image:url(/images/muret_de_pierre_et_dalle_de_beton_RDL_2012.JPG);}
.realisation_h4{background-image:url(/images/Muret_de_pierre_naturelle_joints_cimentes_2011.JPG);}
.realisation_h5{background-image:url(/images/Muret_de_pierre_RDL_2014.jpg);}
.realisation_h6{background-image:url(/images/Realisation_dalle_de_beton_RDL_2012.JPG);}
.realisation_h7{background-image:url(/images/Realisation_produit_fini_2011.jpg);}
.realisation_h8{background-image:url(/images/Terrassemen_en_pierre_Quebec_2011.jpg);}
.realisation_h9{background-image:url(/images/Terrassement_Qc_2011.jpg);}

/*Alex*/
.lien-realisations{
	padding: 12px 15px 8px;
    display: inline-block;
    text-transform: uppercase;
    font-family: Ciutadella_semi_bold;
    margin: 0px auto;
    background-color: #E63C2F;
    box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.6);
    color: #fff;
    font-size: 18px;
    border: none;
    cursor: pointer;
    transition: 500ms all;
}
.wrap-fancybox{width:50%;margin:auto;}
.slider-realisation{background-color:#2f3334;}
.img-slider img{width: 100%;}
.prev-slider {position: absolute; left: -58px; height: 100%; top:0; }
.prev-slider img {position: relative; top: 50%; transform: translateY(-50%); width: 34px; cursor: pointer; }
.next-slider {position: absolute; right: -58px; height: 100%; top:0; }
.next-slider img {position: relative; top: 50%; transform: translateY(-50%); width: 34px; cursor: pointer; }
.texte-slider{text-align: left;margin-top: 45px;width:45%;margin:0 auto;}
.texte-slider h2,.texte-slider h3,.texte-slider h4,.texte-slider h5,.texte-slider h6{text-align:left;font-size:25px;}
.zone-slider{position: relative;}
.fancybox-close {background-image: url(/images/fermer.png); background-repeat: no-repeat; top: 11px; right: 40px; background-size: cover; }
.fancybox-skin{background:white;padding:0 !important;}
.fancybox-inner{width:100% !important;}
.zone-slider {position: relative; width: 90%; margin: auto; }
.center-slider{position: relative;}
.texte-slider h3{color:black;}
.texte-slider h4, .texte-slider h3{margin:0;padding:0;margin-top:15px;margin-bottom:10px;}
#logo-blanc img{width: 100%;}
#logo-blanc {width: 142px; display: inline-block; }