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

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

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

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


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 #fff;margin:10px 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; margin-top: 10px;}.up{margin-top:50px;}
.flt-left{float:left}.flt-right{float:right}.clear{clear:both;}


/* COULEUR */

.blanc{color:#fff;}
.charcoal{color:#333333;}
.bleu{color:#00abd9;}
.bckpale{background:#f1f1f1;}
.bckGris{background:#333333;}

.bckBleu{background:rgba(39,94,128,0.8)}

/* TEXTE */
h1, h2, h3, h4, h5, h6{margin:0;line-height:1.5;}
h1{font-size:40px;font-weight:300;font-family: 'Oswald', sans-serif;text-transform:uppercase;color:#fff;}
h2{font-size:28px;font-weight:300;font-family: 'Oswald', sans-serif;text-transform:uppercase;color:#275e80;}
h3{font-size:24px;font-weight:700;color:#00abd9;}
h4{font-size:22px;font-weight:300;text-transform:uppercase;}
h5{font-size:18px;font-weight:300; color: #fff; margin-bottom: 0.5em;}
h6{font-size:15px;font-weight:700;text-transform:uppercase;}

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:15px;line-height:1.6;margin:0 0 20px}
ul{list-style-type:square} ul li{margin:0 0 0 15px}


header{width:100%;height:120px;z-index:100;background:rgba(255,255,255,0.8); position: fixed;top: 0;-moz-transition:all 0.4s ease-in-out;transition: all 0.4s ease-in-out;padding:0px 30px;}
header.nav-up {top: -160px;height:100px}
header.sticky {background:rgba(255,255,255,0.9);}
header .logo a img{margin:20px auto;display:block;padding:0px;width:230px; padding-left: 5px;}

header .call{position:absolute;top:0px;right:20px}
header .call p{font-size:18px;color:#275e80;margin:0}
header .call p, header .call img{display:inline-block;vertical-align:middle}
header .call img{margin-left:20px}

#navMenu {position:absolute;top:40px;left:0;width:100%}
#navMenu ul li{text-align:center;display:inline-block;font-size:16px;font-weight:900;letter-spacing:1px;line-height:1;margin:0;padding:0 25px;background:none;text-transform:uppercase;color:#00abd9;font-family: 'Oswald', sans-serif;}
#navMenu ul li a:hover{color:#275e80;}
span#menuMob, .closebtn {display:none}

/* MAP */

.map_image {width:100%;}
.map_image svg{max-width:100%}
svg {width: 100%; margin-top: 4em;}

#TERRAIN a:hover polygon,  #TERRAIN a:hover rect, #TERRAIN a:hover path{fill:#8ac34c;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}

#info-box {display:none;position: absolute;top: 0px;left: 0px;z-index: 1;color:#333333;background-color:#fff;border:2px solid #8ac34c;border-radius:2px;padding:5px;font-size:10px;width:150px}
#info-box h4{margin:0}

#info-box h4.ori:before{content:"Orientation : ";font-weight:300}
#info-box h4.supM:before{content:"Superficie : ";font-weight:300}#info-box h4.supM:after{content:" m\00B2"}
#info-box h4.supP:before{content:"Superficie : ";font-weight:300}#info-box h4.supP:after{content:" p\00B2"}
#info-box h4.facM:before{content:"Façade (m) : ";font-weight:300}
#info-box h4.facP:before{content:"Façade (pi) : ";font-weight:300}
#info-box h4.proM:before{content:"Profondeur (m) : ";font-weight:300}
#info-box h4.proP:before{content:"Profondeur (pi) : ";font-weight:300}
#info-box h4.lot:before{content:"# lot : ";font-weight:300}
.section-plan {position: relative;}
.section-plan .plan {width: 100%;}
.plan {vertical-align: bottom;}



/* SLIDER */
/*#headhome {background:url(../img/slider/fond-slide1.jpg) no-repeat center top / cover;position:relative;width:100%;margin:0 auto;margin:0;padding:0;z-index:0;height:100%;}*/
#headhome .container{height:100%;padding-top:370px;text-align:left;z-index:999;}
#headhome .fondLeft{position:absolute;bottom:80px;left:0; z-index: 9999;}
#headhome .bloc{max-width:100%;padding:40px;color:#fff; margin-top: 8%; outline: 2px solid #fff; outline-offset: -25px;}
#headhome .bloc h2{font-size:45px;color:#fff}
#headhome .bloc p{font-size:36px;line-height:1.3}

#headhome .cycle-slideshow{position:relative;width:100%;margin:0 auto;margin:0;padding:0;z-index:0;height:100%;}
#headhome .cycle-slideshow .slide{width:100%;position:relative;height:100%;z-index:0}
#headhome .cycle-slideshow .slide .container{height:100%;padding-top:200px;text-align:center;z-index:999}
#headhome .cycle-slideshow .slide  h2, .headingbg{color:#fff;font-size:60px;text-align:center;vertical-align: left;padding:20px 0px 0 0;}
#headhome .cycle-slideshow .slide  img{display: block; margin: 0 auto;}

#headhome .cycle-slideshow .slide1{background:url(../img/slider/fond-slide1.jpg) no-repeat center top;-webkit-background-size: cover; /* pour Chrome et Safari */-moz-background-size: cover; /* pour Firefox */-o-background-size: cover; /* pour Opera */background-size: cover; /* version standardisée */}
#headhome .cycle-slideshow .slide2{background:url(../img/slider/fond-slide2.jpg) no-repeat center top;-webkit-background-size: cover; /* pour Chrome et Safari */-moz-background-size: cover; /* pour Firefox */-o-background-size: cover; /* pour Opera */background-size: cover; /* version standardisée */}
#headhome .cycle-slideshow .slide3{background:url(../img/slider/fond-slide3.jpg) no-repeat center top ;-webkit-background-size: cover; /* pour Chrome et Safari */-moz-background-size: cover; /* pour Firefox */-o-background-size: cover; /* pour Opera */background-size: cover; /* version standardisée */}

#headhome .cycle-pager {z-index: 999; overflow: hidden;position:relative;display:block;margin-top:-4em;margin-left:auto;margin-right:auto;width:85px;}
#headhome .cycle-pager span { width: 17px; height: 17px;background:transparent;border:2px solid #fff;border-radius:50%;margin:0 5px;display:inline-block;cursor: pointer; background-color: #fff;}
#headhome .cycle-pager span.cycle-pager-active {border:4px solid #fff; border-radius: 50%; background-color: #275e80;}
#headhome .cycle-pager > * { cursor: pointer;}

.service img, .service h2{-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.service .col:hover img, .service .col:hover h2{transform: scale(1.1);-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.service .col:hover h2{color:#275e80;}


.projet{background:url(../img/fond/fond-leprojet.jpg) no-repeat center top / cover fixed;}
.milieu{background:url(../img/fond/fond-milieu-de-vie.jpg) no-repeat center top / cover fixed;}
.proximite{background:url(../img/fond/fond-proximite.jpg) no-repeat center top / cover fixed;}
.terrain{background:url(../img/fond/fond-plan.jpg) no-repeat center top / cover fixed;}
.joindre{background:url(../img/fond/fond-joindre.jpg) no-repeat center top / cover fixed;}

.form {padding-top: 0;}


.fondRight, .fondLeft{position:relative;margin-top:40px}
.fondRight img{float:right;margin-right:-20px;}.fondLeft img{float:left;margin-left:-20px;}
.right {text-align: right;}
 video{width:100%}

img.plan{width:100%}

iframe{width:100%;border:0}
p.phone{font-size:34px;color:#00abd9;margin-bottom:0}
p.email{font-size:20px; color: #275e80; font-weight: 800; margin-bottom: 3em; margin-top: 1em;}
.tel {font-size: 16px;}

/* FOOTER */

footer{width:100%;background:#275e80;}
.coord {font-size:18px}
.coord span{font-size:22px;color:#00abd9;}
.mail{margin-bottom:0}
#credits p{background:rgba(0,0,0,0.2);padding:10px ;text-align:center;margin:0;font-size:12px;color:#fff}

.legende {position: absolute; bottom: 14px;right: 2%;background-color: rgba(39, 94, 128, 0.8); padding: 1em 2em; color: white; text-align: left;}
.legende span {font-size: 16px; margin-right: 1em;}
.legende a {display: inline-block;}
.legende a:hover {text-decoration: underline;}
.code-couleur span {display: inline-block; width: 100%;}
.separation {border-left: 1px solid #fff; padding-right: 10px;}

.coord img, .phone img, .lien {vertical-align: sub;}
.lien {margin-left: 0.5em;}
.phone {line-height: 1.2;}
.phone:nth-of-type(2) {margin-bottom: 1em;}
.bt {background:none;border:0;padding:10px 15px;border:2px solid #00abd9;color:#00abd9;margin:50px auto;font-weight:700; font-size: 14px; transition: 0.3s;}
.bt:hover, button:hover {background-color: #00abd9; color: white;}
.texte-ville {min-height: 150px; margin-bottom: 40px;}
.securite {text-align: left;}
.fb {transition: 0.3s;}
.fb:hover {transform: scale(1.1);}
.phrase-introductive {margin-top: 2em; font-size: 22px;}
.call-to-action {font-size: 24px; color: #00abd9; margin-top: 1em; font-weight: 600;}
footer img {vertical-align: sub; margin-right: 0.2em;}
footer p {margin-bottom: 0;}

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

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

header{padding:0px 20px;height:100px}
header .logo a img{width:180px}

header .call p{font-size:20px;}
header .call img{width:20px}

#navMenu {top:30px}
#navMenu ul li{font-size:14px;}

#headhome .bloc {width:100%;max-width:100%;text-align:center}

}





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

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


h1{font-size:36px;}
h2{font-size:26px;}
h3{font-size:22px;}
h4{font-size:20px;}
h5{font-size:16px;}
h6{font-size:14px;}

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


header{height:80px}
header .logo a img{width:160px}
header .call{top:5px;right:0}
header .call p{font-size:16px;}
header .call img{width:25px}

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

#navMenu nav{position:relative;width:100%;height:100%;}
#navMenu ul li{display:block;text-align:center;padding:0;transition: 0.3s;font-size:20px;margin-bottom:25px;color:#fff;}

}

@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{font-size:30px;}
h2{font-size:22px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5{font-size:15px;}
h6{font-size:13px;}
	
body{text-align:center}	
img{margin-left:auto;margin-right:auto}
.legende span img {display: inline;}	

header .call p{display:none}


#headhome .container{padding-top:25%;}
#headhome .bloc{padding:25px; margin-top: -7em; outline: 2px solid #fff; outline-offset: -10px;}
#headhome .cycle-slideshow .slide h2{font-size:30px;}
#headhome .bloc p{font-size:24px; text-align: center;}
#headhome .fondLeft{display: none;}

.fondRight img, .fondLeft img{max-width:300px}

.legende {position: static; background-color: rgba(39, 94, 128, 1);}
.separation {display: none;}

ul {list-style-type: none !important;}
ul li{margin:0 0 0 0px}

	
}




@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:30px;}
h2{font-size:30px;}
h3{font-size:20px;}
h4{font-size:14px;}
h5{font-size:12px;}
h6{font-size:11px;}

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

#headhome .bloc h2{font-size:22px;}
#headhome .bloc p{font-size:18px;}

.call-to-action {font-size: 20px;}
.right {text-align: center;}

}