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

html{font-size: 62.5%;}
body{margin: 0 auto;padding: 0;overflow-x:hidden;position: relative;width:100%;background:#fff;font-family: 'Montserrat', sans-serif;font-weight:200;color:#222;}

.container, .contDemi{position:relative;display:block;margin:0 auto;padding:0 80px;width:100%;}
.container{max-width:1200px;}.container.sml{max-width:900px}
.contDemi{max-width:600px;}

.pad{padding-top:40px;padding-bottom:40px}
.Bigpad{padding-top:120px;padding-bottom:120px}


a[href^=tel]{color:inherit;text-decoration:none;} a{text-decoration:none;color:inherit;cursor:pointer}a:focus{outline:0;}
img{max-width:100%;}
hr{border:0;border-bottom:1px solid #555;margin:40px 0}

.ancre{padding-top:50px;margin-top:-50px;}/* hauteur du header*/

.center{text-align:center;} .left{text-align:left;} .right{text-align:right;} .justify{text-align:justify;} .uppercase{text-transform:uppercase;}
.none{display:none;} .block{display:block;}
.down{margin-bottom:30px;}.up{margin-top:30px;}
.flt-left{float:left}.flt-right{float:right}.clear{clear:both;}


/* COULEUR */

.blanc{color:#fff;}
.charcoal{color:#222;}
.bckpale{background:#f1f1f1;}
.bckBlanc{background:#fff;}


/* TEXTE */
h1, h2, h3, h4, h5, h6{margin:0;line-height:1.2;letter-spacing:3px;}
h1{font-size:36px;font-weight:700;font-family: 'Playfair Display', serif;letter-spacing:1px}
h2{font-size:26px;font-weight:200;color:#777;}.blanc h2{color:#fff;}
h3{font-size:20px;font-weight:700;text-transform:uppercase;}
h4{font-size:18px;font-weight:700;font-family: 'Playfair Display', serif;color:#777;letter-spacing:0}
h5{font-size:16px;font-weight:700;}
h6{font-size:14px;font-weight:700;text-transform:uppercase;margin-top:25px}

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul{margin-top:20px}

p, li{font-size:13.5px;line-height:1.6;margin:0 0 20px;letter-spacing:0.5px}
ul{list-style-type:square} ul li{margin:0 0 0 15px}

.bt{line-height:1;z-index:99;position:relative;margin:0-auto;display:block;text-align:center}
.bt a {padding:10px 15px 12px;color:#000;font-size:15px;display:inline-block;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out; border:3px solid #000;font-weight:700;font-family: 'Playfair Display', serif;}
.bt a:hover{color:#a8a7a7;border-color:#a8a7a7;}


header{width:100%;height:80px;z-index:999;background:rgba(0, 0, 0, 0); position: fixed;top: 0;-moz-transition:all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
header.nav-up {top: -100px;}

#navMenu {position:absolute;top:0;right:0;height:70px;background:#000;padding:12px 40px;}
#navMenu ul li{display:inline-block;font-size:11px;line-height:1;margin:0;padding:0 20px 0 0;background:none;letter-spacing:2px;text-transform:uppercase;font-weight:700}
#navMenu ul li:last-child{padding:0}
#navMenu ul li a{color:#fff;} #navMenu ul li a:hover{color:#888;}

#navMenu li.fb{vertical-align:bottom}
#navMenu li.fb a{height:20px;width:20px;background:url(../img/picto/facebook.svg) no-repeat center center / auto 20px;vertical-align:top;display:block}
#navMenu li.fb a:after, .navTop li.fb a a:before{content:"";padding:0}

span#menuMob, .closebtn {display:none}

/* SLIDER */
#headhome {padding:45px;position:relative;width:100%;margin:0 auto;z-index:0;height:100%; }
#headhome .logo{background:#000;padding:30px 30px 30px 45px ;position:absolute;left:0;top:20%;width:auto}
#headhome .fond{background:url(../img/slider/fond-slide1.jpg) no-repeat center top / cover fixed ;height:100%}

#headhome .container{height:100%;padding-top:20%;text-align:left;z-index:1;max-width:100%}
#headhome h2{color:#fff;text-align:right}
#headhome h2 span{font-size:70px;font-family: 'Playfair Display', serif;display:block;}


/* CONTENT */

.lineTop:before{content:"";display:block;width:1px;height:150px;background:#a8a7a7;margin:-50px auto }
.lineBottom:after{content:"";display:block;width:1px;height:150px;background:#a8a7a7;margin:0 auto  }
.lineBottom + .container.Bigpad{padding-top:0}

.bckBlanc.pad.lf{padding:50px 0 50px 50px;transform:translate(-60px,200px);margin-bottom:200px}
.bckBlanc.pad.rg{padding:50px 50px 50px 0px;transform:translate(60px,200px);margin-bottom:200px}


.avantage{background:url(../img/fond/fond-avantage.jpg) no-repeat center top / cover fixed ;}

.parallax .span_4_of_12{background:url(../img/fond/fond-sallebain-beton.jpg) no-repeat center center / cover  ;} 
.parallax .span_8_of_12{background:url(../img/fond/fond-cuisine-beton.jpg) no-repeat center center / cover ;} 
.parallax h2 {color:#fff;text-align:right;line-height:1}
.parallax h2 span{font-size:50px;font-family: 'Playfair Display', serif;display:block;}


.imgFond{position:relative;margin-bottom:20px}
.imgFond .title{position:absolute;top:25%;left:0;width:100%;display:block;margin:0 auto;color:#fff;text-align:center}
.imgFond h3{background:rgba(0,0,0,0.8);display:inline-block;text-align:center;padding:25px;}
.imgFond h3 span{display:block;color:#a0a2a5;font-weight:700;font-family: 'Playfair Display', serif;text-transform:none;letter-spacing:0}

.picto{display:block;margin:0 auto 30px;}
.mobilier .up{margin:60px 0}

.real{margin:60px 0 }
.real .fond{background:url(../img/fond/fond-realisation.jpg) no-repeat center top / cover fixed ;padding:200px 0}.real .fond .container{max-width:800px}
.real .lineTop:before{height:200px;margin:-100px auto}.real .lineTop{z-index:9}




.grid-container {display: grid;grid-gap: 10px;margin-top:100px}
.grid-container > div{overflow:hidden;position:relative;grid-template-rows: auto auto auto;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.grid-container > div img{display:block;margin:0 auto;opacity:0}
.grid-container > div:hover{opacity:0.6;}

.item1 {grid-column: 1 /  span 2; grid-row: 1 / span 2;background:url(../img/real/real-01R.jpg) center center / cover;}
.item2 {grid-column: 3 /  span 1;grid-row: 1 / span 2;background:url(../img/real/real-02R.jpg) center center / cover;}
.item3 {background:url(../img/real/real-03R.jpg) center center / cover;}
.item4 {background:url(../img/real/real-04R.jpg) center center / cover;}
.item5 {grid-column: 1 /  span 1; grid-row: 3 / span 1;background:url(../img/real/real-05R.jpg) center center / cover;}
.item6 {grid-column: 2 /  span 1; grid-row: 3 / span 1;background:url(../img/real/real-06R.jpg) center center / cover;}
.item7 {grid-column: 1 /  span 2;grid-row: 4 / span 1;background:url(../img/real/real-07R.jpg) center center / cover;}
.item8 {grid-column: 3 /  span 2; grid-row: 3 / span 2;background:url(../img/real/real-08R.jpg) center center / cover;}


/* FOOTER */

footer .fond{width:100%;background:url(../img/fond/fond-beton-dark.jpg) no-repeat center center / cover fixed ;}

#credits{background:#000;padding:5px 0}
#credits p, #credits a{margin:0;font-size:11px;color:#aaa}
#credits a{font-size:10px;text-transform:uppercase;letter-spacing:1px;padding-top:2px;display:block}
#credits a img{margin:-2px 0 0 5px;display:inline-block;vertical-align:middle;}


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

.container, .contDemi{padding-left:50px;padding-right:50px}

/* SLIDER */
.logo img{width:280px}

#headhome {padding:30px; }
#headhome .logo{padding:20px 20px 20px 30px}
#headhome .container{padding-top:25%;}
#headhome h2 span{font-size:60px;}

#navMenu{height:60px;padding:5px 30px;}
#navMenu ul li{font-size:10px;padding:0 15px 0 0;letter-spacing:1.5px;}


#credits .container{padding:10px}


}





@media only screen and (max-width: 768px) {	

.container, .contDemi{padding:0 40px;}
.pad{padding-top:30px;padding-bottom:30px}
.Bigpad{padding-top:60px;padding-bottom:60px}


h1, h2, h3, h4, h5, h6{line-height:1.1;letter-spacing:2px;}
h1{font-size:30px;letter-spacing:0}
h2{font-size:22px;}
h3{font-size:18px;}
h4{font-size:16px;letter-spacing:0}
h5{font-size:14px;}
h6{font-size:13px;}

p, li{font-size:12px;margin:15px 0;}
li{margin:5px 0}



span#menuMob {position:absolute;right:15px;top:15px;width:40px;height:40px;display:block!important;background: url("../img/menu-mobile.svg") no-repeat center center / 30px;cursor:pointer;z-index:1}
.open .overlay{width:100%} 
.overlay{height:100%;width:0;position:fixed;z-index:1;top:0;left:0;background: rgba(35,31,32, 0.9);overflow-x: hidden;transition: 0.3s;}
.overlay .closebtn {display:block;position: absolute;top:0;right:20px;font-size: 60px;color:#fff;} 
.overlay-content {position: relative;top: 20%;width: 100%;text-align: center;}

#navMenu {position:relative;width:70px;height:70px;padding:0 0 0;top:0;float:right;}
#navMenu ul li:first-child{padding-top:200px}
#navMenu ul li{display:block;text-align:center;padding:10px 0;transition: 0.3s;font-size:16px;font-weight:200}
#navMenu li.fb a{width:auto;margin-top:20px}

#headhome {padding:25px;}
#headhome .logo{top:15%}
#headhome .logo img{width:200px}
#headhome .container{padding-top:35%;}
#headhome h2 span{font-size:45px;}


.lineTop::before{height:100px;margin-top:-30px}.lineBottom::after{height:100px}

.bckBlanc.pad.lf , .bckBlanc.pad.rg {padding: 30px;transform: translate(30px,-15%);margin-bottom: 0;max-width: 80%;}
.right{text-align:left;}

.parallax h2 span{font-size:30px;letter-spacing:0px}.parallax h2 {letter-spacing:3px;padding:60px 0}


#credits p, #credits .flt-right{float:none;display:block;width:100%;text-align:center;font-size:9px}
#credits p{margin-bottom:2px}#credits a img{width:80px}


}


@media only screen and (max-width: 480px) {

.container, .contDemi{padding:0 25px;}
.pad{padding-top:25px;padding-bottom:25px}
.Bigpad{padding-top:50px;padding-bottom:50px}


h1{font-size:26px;}
h2{font-size:18px;}
h3{font-size:16px;}
h4{font-size:14px;}
h5{font-size:12px;}
h6{font-size:10px;}

p, li{font-size:10px;}

#navMenu {width:50px;height:50px;}
span#menuMob{right:8px;top:8px;width:30px;height:30px;background: url("../img/menu-mobile.svg") no-repeat center center / 20px;}
#navMenu ul li:first-child{padding-top:100px}


#headhome {padding:15px}
#headhome .logo{top:10%;padding:15px}
#headhome .logo img{width:150px}
#headhome h2 span{font-size:32px;}
#headhome h2 {padding-top:30%}


.bckBlanc.pad.lf , .bckBlanc.pad.rg {padding:25px;transform: translate(5%,-10%);margin-bottom: 0;max-width: 90%;text-align:}
.imgFond h3{padding:15px;}



	
}