@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: 'Source Sans Pro', sans-serif;font-weight:400;color:#000;}

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

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


img{max-width:100%;}

a[href^=tel]{color:inherit;text-decoration:none;}	
a{text-decoration:none;color:inherit;cursor:pointer;font-weight:900}
a:focus{outline:0;}

hr{border:0;border-bottom:1px dotted #ccc;margin:40px 0}

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

/* TEXT ALIGN */
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}
.justify{text-align:justify;}
.uppercase{text-transform:uppercase;font-weight:900;margin-top:0}

.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;}
.gris{color:#666666;}
.noir{color:#000}
.bleu{color:#46c1d1}

.bckpale{background:#f1f1f1;}
.bckNoir{background:#000;}
.bckNoir h2, .bckNoir h4{color:#aaa}


/* TEXTE */
h1, h2, h3, h4, h5, h6{margin:0;line-height:1.1;text-transform:uppercase;letter-spacing:8px}
h1{font-size:34px;font-weight:300;margin:15px 0}h1 span{font-weight:900;display:block;}
h2{font-size:22px;font-weight:300;color:#666;} h2::after{content:"";background:#46c1d1;width:40px;height:6px;display:block;margin:10px 0 30px 0}h2 span{font-weight:900}
h3{font-size:18px;font-weight:900;letter-spacing:6px}
h4{font-size:17px;font-weight:900;color:#666;letter-spacing:6px}
h5{font-size:16px;font-weight:300;letter-spacing:4px}
h6{font-size:15px;font-weight:900;letter-spacing:3px}

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

p, li{font-size:15px;line-height:1.6;margin:15px 0;letter-spacing:0.5px}

ul, li{margin:0}
ul{margin-left:15px;list-style-type:square}
ol{margin-left:15px;}


.titleRight{float:right;}.titleLeft{float:left;}
.titleLeft, .titleRight{display:block;width:calc(auto - 100px);height:auto;border-width:2px;border-style:solid;padding: 20px 0;width:350px;position:relative}
.titleLeft h1, .titleLeft p, .titleLeft h3{display:block; width:calc(100% + 150px);margin-left:60px;}
.titleRight h1, .titleRight p, .titleRight h3{display:block; width:calc(100% + 150px);margin-left:-200px;text-align:right;}
.titleLeft p, .titleRight p, .titleLeft h3, .titleRight h3{font-size:34px;font-weight:300;text-transform:uppercase;letter-spacing:8px;line-height:1.1;margin-top:15px;margin-bottom:15px}
.titleLeft p span, .titleRight p span, .titleLeft h3 span, .titleRight h3 span{display:block;font-weight:900;}
.blanc .titleRight, .blanc .titleLeft{border-color:#fff;color:#fff}

.titleLeft.sml , .titleRight.sml{width:250px}

.bt {margin-top:40px}
.bt a{padding:10px 15px;text-transform:uppercase;letter-spacing:2px;background:#000;color:#fff;-webkit-transition: all 0.4s ease;transition: all 0.4s ease}
.bt a:hover{background:#46c1d1;}
.bt a::after{content:"+";font-size:20px;margin-left:10px;display:inline-block;}
.blanc .bt a{background:#fff;color:#000;}


/* HOME DESIGN */
.design{background:#f9f9f9}
.design img{width:100%;max-width:none;display:block;margin:-180px auto 0}


/* HOME COORDINATION */
.translate .titleLeft{margin-bottom:60px;transform:translateX(-100px)}
.translate .titleLeft h1{margin-left:90px}
.coord img{margin-top:45px}

.contVideo{max-width:1200px;position:relative;width:100%;display:block;margin:0 auto}
.vid video{width:100%;max-width:1000px;height:100%;display:block;margin:0 auto;}
.vid {margin:15px 0 ;overflow:hidden;position:relative}
.vid video{border:10px solid #f2f2f2;}
iframe{max-width:85%;display:block;margin:0 auto}


.parallax{padding:30px 0}
.homeEspace{background:url(../img/fond/fond-acceuil-02.jpg) no-repeat center center / cover fixed;}
.designPage{background:url(../img/fond/fond-parallax-design.jpg) no-repeat center center / cover fixed;}
.coordPage{background:url(../img/fond/fond-parallax-coord.jpg) no-repeat center center / cover fixed;}
.apropos{background:url(../img/fond/fond-parallax-apropos.jpg) no-repeat center center / cover fixed;}
.nsJoindre{background:url(../img/fond/head-nsjoindre.jpg) no-repeat center center / cover fixed;}


/* STATISTIQUE */
.stat {background:url(../img/fond/fond-statistique.jpg) no-repeat center center / cover fixed;}
.stat h2{color:#fff;}.stat h2::after{background:none;margin:0}
.stat .row{margin-top:30px}
.stat p{font-weight:900;text-transform:uppercase;text-align:left;line-height:1}
.stat .number{font-size:60px;margin-bottom:0}
.stat .number::after{content:"+";margin-left:15px;font-weight:300}
.stat .tag{color:#000;margin:5px 0 0;font-szie:18px}
.stat p.tag::after{content:"";background:#fff;margin-top:5px;width:20px;height:6px;display:block;}


/* HEAD */
.head{padding:100px 0;height:500px;background-position:center bottom;background-size:cover;background-attachment:fixed;backround-repeat:none}
.head .Bigpad{padding-top:120px}
.fondesign{background-image:url(../img/fond/head-design.jpg)}
.fondCoord{background-image:url(../img/fond/head-coordination.jpg)}
.fondApropos{background-image:url(../img/fond/head-apropos.jpg)}
.fondNsjoindre{background-image:url(../img/fond/fond-parallax-nsJoindre.jpg )}

.coordListe{margin-top:50px}
.coordListe .bloc{padding-left:50px;margin-bottom:30px}
.coordListe .bloc.planif{background:url(../img/picto/rencontre.svg) no-repeat left top / 42px}
.coordListe .bloc.finition{background:url(../img/picto/finition.svg) no-repeat left top / 38px}
.coordListe .bloc.planTech{background:url(../img/picto/plan-technique.svg) no-repeat left top / 38px}
.coordListe .bloc.planPose{background:url(../img/picto/plan-pose.svg) no-repeat left top / 38px}
.coordListe .bloc.livraison{background:url(../img/picto/livraison.svg) no-repeat left top / 38px}
.coordListe .bloc.soutien{background:url(../img/picto/soutien.svg) no-repeat left top / 38px}

.team h4, .team h6{text-transform:none;letter-spacing:2px}
.team h4{font-weight:400}
.team h6{margin:5px 0 30px;}


.fb img{vertical-align:middle;margin:0 10px 0 0}
.fb{color:#46c1d1;}.fb:hover{color:#000}
.contact h6 + p{margin-top:0}


.realisation .container.first,
.pageReal .container.first{margin-top:120px}
.yt img{display:inline-block;margin:0 10px 0 0;vertical-align:middle}
.yt a:hover{color:#46c1d1;}

/* FOOTER */

footer{background:#000;width:100%;padding:20px 60px;color:#fff}
footer .share img{margin-right:10px}
#credits p{text-align:center;margin:0;font-size:12px;color:#aaa;background:#fff;padding:7px 0}



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


.container, .contDemi{padding-left:50px;padding-right:50px}
.head{padding:50px 0;height:400px;}

h1, h2, h3, h4, h5, h6{letter-spacing:6px}
h1{font-size:30px;}
h2{font-size:20px;} h2::after{width:35px;height:5px;}
h3{font-size:17px;letter-spacing:4px}
h4{font-size:16px;letter-spacing:4px}
h5{font-size:15px;letter-spacing:3px}
h6{font-size:14px;letter-spacing:2px}
p,li{font-size:14px}

.titleLeft p, .titleRight p, .titleLeft h3, .titleRight h3{font-size:30px;letter-spacing:6px}
.titleLeft, .titleRight{width:250px}
.titleLeft h1, .titleLeft p{margin-left:50px}
.titleRight h1, .titleRight p{margin-left:-180px}

.titleLeft.sml , .titleRight.smlt{width:200px}

.realisation .container.first,
.pageReal .container.first{margin-top:80px}

iframe{max-height:425px}

}



@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}

.head{padding:0px 0;height:300px;}

h1, .titleLeft p, .titleRight p{font-size:26px;}
h2{font-size:18px;}h2::after{width:28px;height:4px;}
h3{font-size:16px;}
h4{font-size:14px;}
h5{font-size:13px;}
h6{font-size:13px;}

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

.bt a{padding:7px 10px}
.bt a::after{font-size:16px;padding-top:2px}


.titleLeft p, .titleRight p,  .titleLeft h3, .titleRight h3{font-size:26px}
.titleLeft, .titleRight{width:200px}
.titleLeft.sml , .titleRight.sml{width:150px}
.titleLeft h1, .titleLeft p, .translate .titleLeft h1{margin-left:40px}
.titleRight h1, .titleRight p{margin-left:-170px}

.translate .titleLeft{margin-bottom:30px;transform:translateX(0px)}
.coord img{margin-top:0px}

.stat .center{text-align:left}
.stat .number{font-size:40px;}
.stat .tag{font-szie:16px}


.realisation .container.first,
.pageReal .container.first{margin-top:60px}

iframe{max-height:300px}
}

@media only screen and (max-width: 550px) {iframe{max-height:260px}}

@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}

.head{height:250px;}

h1, h2, h3, h4, h5, h6{letter-spacing:4px}
h1{font-size:18px;}
h2{font-size:15px;letter-spacing:2px}h2::after{width:20px;height:3px;}
h3{font-size:14px;letter-spacing:3px}
h4{font-size:13px;letter-spacing:3px}
h5{font-size:12px;letter-spacing:2px}
h6{font-size:11px;letter-spacing:1px}

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


.titleLeft p, .titleRight p,  .titleLeft h3, .titleRight h3{font-size:18px;letter-spacing:4px}
.titleLeft, .titleRight{width:130px;padding:0}
.titleLeft.sml , .titleRight.sml{width:100px}
.titleLeft h1, .titleLeft p, .translate .titleLeft h1{margin-left:30px}
.titleRight h1, .titleRight p{margin-left:-160px}


iframe{max-height:175px;max-width:77%}
	
}