@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:300;color:#444;font-size:14px}

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

.pad{padding-top:40px;padding-bottom:40px}
.Bigpad{padding-top:80px;padding-bottom:80px}
.padBottom{padding-top:0;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 dotted #ccc;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;}
.jaune{color:#FFDB00}
.charcoal{color:#333;}
.gris{color:#777;}
.bckpale{background:#f1f1f1;}
.bckGris{background:#333;}
.bckjaune{background:#FFDB00;}
.bckJauneOpacity{background:rgba(255,219,0,0.9)}

/* TEXTE */
h1, h2, h3, h4, h5, h6{margin:0;line-height:1.2;text-transform:uppercase;letter-spacing:3.5px}
h1{font-size:28px;font-weight:700;}
h2{font-size:24px;font-weight:300;text-transform:none;color:#FFDB00}
h3{font-size:18px;font-weight:700;}
h4{font-size:16px;font-weight:300;text-transform:none;}
h5{font-size:15px;font-weight:700;}
h6{font-size:13px;font-weight:700;}

.call{font-size:60px;line-height:1.2;mix-blend-mode: ;color:#fff;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:70px 0;text-align:center}

.bt{margin-bottom:0}
.bt a{border-with:2px;border-style:solid;display:inline-block;padding: 15px 25px;text-transform:uppercase;letter-spacing:3px;font-weight:700;font-size:13px;color:#444;-webkit-transition: all 0.35s; -webkit-transform : all 0.35s ;}
.bt.jaune.blanc a{color:#fff;border-color:#FFDB00;}
.bt.jaune a{border-color:#FFDB00;}.bt.jaune a:hover{border-color:#444;opacity:0.8}
.bt.blanc a{color:#333;border-color:#fff;}.bt.blanc a:hover{border-color:#444;opacity:0.8}

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

.border:after{content:"";display:block;background:#FFDB00; height:4px; width:35px;margin-top:15px}
.border.noir:after{background:#444; }

/*header{width:100%;height:60px;z-index:4;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;padding:15px 30px}*/

.menuMob {position: fixed;display: inline-block;top: 18px;right:20px;height: 44px;width: 88px;z-index: 5;overflow: hidden;vertical-align:middle;color:#f1f1f1;font-weight:700;text-transform:uppercase;padding-top:11px}
.menuMob .navIcon {position: absolute;left:70px;top: 50%;bottom: auto;right: auto;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);display: inline-block;width: 30px;height: 2px;background-color: #FFDB00;z-index: 10;}
.menuMob .navIcon::before, .menuMob .navIcon:after {position: absolute;top: 0;right: 0;width: 100%;height: 100%;background-color: #FFDB00;-webkit-transform: translateZ(0);-moz-transform: translateZ(0);transform: translateZ(0);
-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: -webkit-transform .3s;-moz-transition: -moz-transform .3s;transition: transform .3s;}
.menuMob .navIcon::before {-webkit-transform: translateY(-10px) rotate(0deg);-moz-transform: translateY(-10px) rotate(0deg);transform: translateY(-10px) rotate(0deg);}
.menuMob .navIcon::after {-webkit-transform: translateY(10px) rotate(0deg);-moz-transform: translateY(10px) rotate(0deg);transform: translateY(10px) rotate(0deg);}
.menuMob.close-nav .navIcon {background-color: rgba(255, 255, 255, 0);}
.menuMob.close-nav .navIcon::before, .menuMob.close-nav .navIcon::after {background-color: white;}
.menuMob.close-nav .navIcon::before {-webkit-transform: translateY(0) rotate(45deg);-moz-transform: translateY(0) rotate(45deg);transform: translateY(0) rotate(45deg);}
.menuMob.close-nav .navIcon::after {-webkit-transform: translateY(0) rotate(-45deg);-moz-transform: translateY(0) rotate(-45deg);transform: translateY(0) rotate(-45deg);}

.mainNav {position:fixed;left:0;top:0;height:100%;width:100%;margin:0;padding:80px 5%;z-index:4;background-color:#222;overflow:auto;-webkit-overflow-scrolling: touch;visibility: hidden;opacity: 0;-webkit-transition: visibility 0s, opacity 0.3s;-moz-transition: visibility 0s, opacity 0.3s;transition: visibility 0s, opacity 0.3s;}
.mainNav li{margin:0;line-height:1.4;text-align: center;color:#666;cursor:pointer}
.mainNav li.first a{margin:10px 0 0;font-weight:400;font-size:14px;color:#666;display:block}
.mainNav a.list li {font-size: 20px;color:#fff;margin:0;-moz-osx-font-smoothing: grayscale;-webkit-transition: color 0.2s;-moz-transition: color 0.2s;transition: color 0.2s;}
.mainNav a.list li:hover{color:#FFDB00;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.mainNav .sociaux {text-align:center}
.mainNav .sociaux a{display:inline-block;text-align:center}

.no-touch .mainNav a:hover {color: #FFDB00;}
.mainNav.fade-in {visibility: visible;opacity: 1;}

  
.overlayNav, .overlayContent {position: fixed;top: 18px;right: 5%;height: 4px;width: 4px;-webkit-transform: translateX(-20px) translateY(20px);-moz-transform: translateX(-20px) translateY(20px);transform: translateX(-20px) translateY(20px);}
.overlayNav span, .overlayContent span {display: inline-block;position: absolute;border-radius: 50%;-webkit-transform: translateZ(0);-moz-transform: translateZ(0);transform: translateZ(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-transform: scale(0);-moz-transform: scale(0);transform: scale(0);}
.overlayNav.is-hidden, .overlayContent.is-hidden {opacity: 0;visibility: hidden;-webkit-transition: opacity .3s 0s, visibility 0s .3s;-moz-transition: opacity .3s 0s, visibility 0s .3s;transition: opacity .3s 0s, visibility 0s .3s;}
.overlayNav {  z-index: 2;}
.overlayNav span {background-color: #fff;}
.overlayContent {z-index: 4;}
.overlayContent span {background-color: #FFDB00;}


.mainContent{overflow:hidden}

/* HOME ACCUEIL */
#headhome{background:url(../img/slider/fond-slide1.jpg) no-repeat right 25% center / cover;}
#headhome .logo{position:absolute;width:100%;top:30px;z-index:3;left:0}
#headhome .logo img{display:block;margin:0 auto;}
.contSlide{position:relative;width:100%;margin:0 auto;margin:0;padding:0;z-index:1;height:100%;
background:url("../img/picto/haut-g.svg") no-repeat left 30px top 30px / 30px, 
url("../img/picto/bas-droit.svg") no-repeat right 30px bottom 30px / 30px,  
url("../img/picto/bas-gauche.svg") no-repeat left 30px bottom 30px / 30px}

.contSlide .logo{display:block;margin:0 auto}
.contSlide .slide{width:100%;position:relative;height:100%;z-index:1;}
.contSlide .slide .container{height:100%;padding:20% 0 0 15%;text-align:left;z-index:999;float:left;color:#fff;}
.contSlide .slide h2{font-size:40px;text-transform:uppercase;font-weight:700;letter-spacing:3px}
.contSlide .slide h3{color:#fff;font-size:24px;font-weight:300;text-transform:none;letter-spacing:3px;margin-bottom:4%}


#headhome .sociaux{position:absolute;right:20px;bottom:45%;z-index:999}
 a.fb,  a.lki,  a.inst, a.pin{display:block;width:32px;height:30px;margin-bottom:10px;cursor:pointer;}
 a.fb{background:url("../img/picto/facebook.svg") no-repeat top center / 32px auto;}
 a.lki{background:url("../img/picto/linkedin.svg") no-repeat top center / 32px auto;}
 a.inst{background:url("../img/picto/instagram.svg") no-repeat top center / 32px auto;}
 a.pin{background:url("../img/picto/pinterest.svg") no-repeat top center / 32px auto;}
 a.fb:hover,  a.lki:hover,  a.inst:hover, a.pin:hover{background-position:bottom center; transition:ease-in 0.2s}

.slideServ{position:absolute;bottom:30px;width:100%;z-index:999}
.slideServ h4{text-align:center;font-size:13px;font-weight:300;color:#fff;letter-spacing:3px;text-transform:uppercase}
.slideServ h4 a:hover{color:#FFDB00;transition:ease-in all 0.2s}

 p.bigTitle{letter-spacing:10px;font-weight:100;font-size:120px;text-transform:uppercase;color:#eee;transform:translate(0,-70px);margin:0 0 -70px;mix-blend-mode: multiply;}
 p.bigTitle.blanc{mix-blend-mode: soft-light;color:#fff}
.plus{margin-bottom:40px}


.homeService img{margin-right:10px}

.diagonale{ margin-top:50px;-ms-transform: rotate(4deg); -webkit-transform: rotate(4deg);transform: rotate(4deg);width: calc(100% + 100px);transform-origin: 0 0 0;}
.diagonale > .container{ -ms-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); transform: rotate(-4deg);left:-20px;width: calc(100% - 100px);}
.diagonale .Bigpad{padding-bottom:100px}

/* HOME RÉALISATION */
figure.effectHover {position: relative;overflow: hidden;margin:0;background: #111;text-align: center;cursor: pointer!important;}
figure.effectHover figcaption {color: #fff;text-transform: uppercase;height: 100%;opacity: 0;cursor: pointer!important;}
figure.effectHover figcaption {position: absolute;top: 50%;transform:translateY(-50%);width: 100%;height: auto;}

.effectHover h2 {padding:0 20px;color:#fff;text-transform:uppercase;font-weight:100;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}
.effectHover h2 span{font-weight:800}
.effectHover p {padding:0 20px;margin:10px 0;line-height:1.2;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}
.effectHover img{position: relative;display: block;width: 100%;opacity: 0.9;-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}

.effectHover:hover figcaption {opacity: 1}
.effectHover:hover img {opacity: 0.2;}


/* FOOTER */

footer{width:100%;background:#222;}
p.mail{font-size:16px;font-weight:300;color:#ffdd02;margin-top:20px;text-transform:uppercase;letter-spacing:4px}
p.mail:before{content:"";width:32px;height:30px;background:url(../img/picto/email.svg) no-repeat left center / 25px auto;padding-left:40px}	
footer ul{list-style: none}
footer .sociaux a, .contact .sociaux a{display:inline-block}
footer .sociaux{margin-top:10px}
#credits p{background:#222;padding:10px 0 20px ;text-align:center;margin:0;font-size:12px;color:#aaa}

/* PAGE AUTRES */

.head{padding:200px 25px 0;text-align:center;height:450px;position:relative}
.logo{position:absolute;top:20px;left:40px;z-index:4}
.head h1{font-size:36px;color:#ffdd02}
.head p{font-size:24px;color:#fff;text-shadow: 2px 2px 0px rgba(80, 80, 80, 0.8);margin:0}
.head .menu {color:#fff;margin-top:35px}
.head .menu a{color:#fff;font-weight:700;}.head .menu a:hover{color:#FFDB00;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}

.head.propos{background:url(../img/fond/strategie-creative-nb.jpg) no-repeat center bottom / cover fixed}
.head.service{background:url(../img/fond/expertise.jpg) no-repeat center bottom / cover fixed}
.head.projet{background:url(../img/fond/projets.jpg) no-repeat center bottom / cover fixed}
.head.nsjoindre{background:url(../img/fond/nous-joindre.jpg) no-repeat center bottom / cover fixed}
.bckWeb{background:url(../img/fond/conception-site-web.jpg) no-repeat center center / cover fixed}
.bckPrint{background:url(../img/fond/design-graphisme.jpg) no-repeat center center / cover fixed}
.bckContact{background:url(../img/meublage/fond-projet.jpg) no-repeat center center / cover fixed;}


.head.dconcept{background:url(../img/portfolio/dconcept/head-dconcept.jpg) no-repeat center center / cover fixed}
.head.bernier{background:url(../img/portfolio/bernier/head-bernier.jpg) no-repeat center center / cover fixed}
.head.celineEtienne{background:url(../img/portfolio/celineEtienne/head-celineEtienne.jpg) no-repeat center center / cover fixed}
.head.dekhockey{background:url(../img/portfolio/dekhockey/head-dekhockey.jpg) no-repeat center center / cover fixed}
.head.renovationstc{background:url(../img/portfolio/renovationstc/head-renovationstc.jpg) no-repeat center center / cover fixed}
.head.technicautoson{background:url(../img/portfolio/technicautoson/head-technicautoson.jpg) no-repeat center center / cover fixed}
.head.aparent{background:url(../img/portfolio/aparent/head-aparent.jpg) no-repeat center center / cover fixed}
.head.caprice{background:url(../img/portfolio/capriceLili/head-capricelili.jpg) no-repeat center center / cover fixed}
.head.ccaron{background:url(../img/portfolio/ChantalCaron/head-ccaron.jpg) no-repeat center center / cover fixed}
.head.azurelle{background:url(../img/portfolio/azurelle/head-azurelle.jpg) no-repeat center center / cover fixed}
.head.msp{background:url(../img/portfolio/mspcoaching/head-mspcoaching.jpg) no-repeat center center / cover fixed}
.head.gchouinard{background:url(../img/portfolio/gchouinard/head-gchouinard.jpg) no-repeat center center / cover fixed}
.head.vision{background:url(../img/portfolio/vision/head-vision.jpg) no-repeat center center / cover fixed}

.contact p{margin-bottom:5px}
.contact a.fb{background:url("../img/picto/facebook-noir.svg") no-repeat top center / 32px auto;}
.contact a.lki{background:url("../img/picto/linkedin-noir.svg") no-repeat top center / 32px auto;}
.contact a.inst{background:url("../img/picto/instagram-noir.svg") no-repeat top center / 32px auto;}
.contact a.pin{background:url("../img/picto/pinterest-noir.svg") no-repeat top center / 32px auto;}
.contact a.fb:hover, .contact a.lki:hover,  .contact a.inst:hover,.contact a.pin:hover{background-position:bottom center; transition:ease-in 0.2s}


.service li{margin-bottom:6px}
.web{margin-bottom:-60px}
.web .col.span_3_of_12:nth-child(4n+0){margin-right:0}
.web img{margin-bottom:20px}


p.btretour{line-height:1;text-align:right;font-weight:800;font-size:13px;color:#777;text-transform:uppercase}
p.btretour{margin-top:10px;float:right}
.btretour:before{content:"\276c";padding-right:5px;font-size:14px;margin-top:3px;vertical-align:inherit;display:inline-block;color:#ffdd02}

.prev, .next{font-size:22px;text-transform:uppercase;font-weight:100}.prev span, .next span{font-weight:700}
.prev{float:left;}.next{float:right}
.prev:before{content:"\276e";padding-right:5px;font-size:22px;margin-top:3px;vertical-align:inherit;display:inline-block;color:#ffdd02}
.next:after{content:"\276F";padding-left:5px;font-size:22px;margin-top:3px;vertical-align:inherit;display:inline-block;color:#ffdd02}

.real img{margin-bottom:30px}
.real h3 +.plus{margin-bottom:20px}
.upReal{margin-top:160px}

.clients .section img{-webkit-filter: grayscale(100%); filter: grayscale(100%);-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.clients .section img:hover{-webkit-filter: grayscale(0%); filter: grayscale(0%);}


@media only screen and (max-width: 1024px) {
	
.container, .contDemi{padding-left:50px;padding-right:50px}

.contSlide .slide .container{padding-top:20%;max-width:70%;padding-left:10%}
.contSlide .slide h2{font-size:36px;}
.contSlide .slide h3{font-size:18px;}

p.mail{font-size:12px}
p.mail:before{background-size:20px auto;padding-left:30px}

}

@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}
.padBottom{padding-top:0;padding-bottom:60px}


h1,h2,h3,h4,h5,h6, p {text-align:center}
h1{font-size:24px;}
h2{font-size:20px;}
h3{font-size:16px;margin-bottom:0}
h4{font-size:15px;}
h5{font-size:14px;}
h6{font-size:13px;}

p, li{font-size:13px;margin:15px 0}
.service li{font-size:14px;margin-bottom:4px}

ul li{margin:5px 0;}
p.call{font-size:40px;}

.bt a{border-with:3px;padding:15px;font-size:12px;}
img.plus {width:50px}

.border::after{margin:15px auto 0}
.plus{display:block;margin:10px auto}
.bt {text-align:center}

#headhome .sociaux{bottom:40%;}
.contSlide{background:
url("../img/picto/haut-g.svg") no-repeat left 20px top 20px / 25px, 
url("../img/picto/bas-droit.svg") no-repeat right 20px bottom 20px  / 25px,  
url("../img/picto/bas-gauche.svg") no-repeat left 20px bottom 20px / 25px}
.contSlide .slide .container{padding-top:22%;padding-left:7%;text-align:left}
.contSlide .slide h2{font-size:26px;text-align:left}
.contSlide .slide h3{font-size:16px;text-align:left}
.contSlide .slide .container .bt{text-align:left}

#headhome .logo{left:0}
.logo{left:20px}

#headhome .sociaux{right:10px;bottom:35%}
#headhome .logo{top:20px}
#headhome .logo img {width:180px;}

.mainNav{padding-top:50px}
.mainNav a {font-size:17px;}
.mainNav li { line-height: 1.2;}
.mainNav li.first {margin: 10px 0 5px;}
.menuMob{top:10px;right:8px}

.slideServ h4{font-size:11px}

.homeService h3, .homeService h4{text-align:left}
.homeService img{max-width:50px}
.homeService .border::after{margin:15px 0 0 }
.diagonale > .container {left:-15px;padding: 80px;}
.diagonale .left, .diagonale .right{text-align:center}



.head{height:300px;padding:140px 10px 0}
.head h1{font-size:28px}
.head p{font-size:20px;}

.upReal{margin-top:0}
.real .col{margin-top:0;margin-bottom:0}
.portfolio h1, .portfolio h2, .portfolio p{text-align:left;} 
.btretour + img.plus{margin:20px 0!important}

.head.propos, .head.service, .head.projet, .head.nsjoindre, .bckWeb, .bckPrint, .bckContact,
.head.dconcept, .head.bernier, .head.celineEtienne, .head.dekhockey, .head.renovationstc, .head.technicautoson{background-attachment: scroll;}

footer .sociaux, .contact .sociaux{text-align:center;}
footer ul{list-style-type:none}

}


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

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

h1, h2, h3, h4, h5, h6{letter-spacing:2px}
h1{font-size:20px;}
h2{font-size:17px;}
h3{font-size:14px;}
h4{font-size:13px;}
h5{font-size:12px;}
h6{font-size:11px;}

p, li{font-size:11px;line-height:1.4;text-align:center}.service li{font-size:12px;margin-bottom:3px}

.bt a{font-size:10px;letter-spacing:2px}
img.plus {width:40px}


p.bigTitle {font-size: 50px;margin: 0 0 -20px;transform: translate(0px, -30px);}

.contSlide{background:
url("../img/picto/haut-g.svg") no-repeat left 15px top 15px / 15px, 
url("../img/picto/bas-droit.svg") no-repeat right 15px bottom 15px  / 15px,  
url("../img/picto/bas-gauche.svg") no-repeat left 15px bottom 15px / 15px}
.contSlide .slide .container{padding-top:120px;}
.contSlide .slide h2{font-size:15px;letter-spacing:2px}
.contSlide .slide h3{font-size:11px;letter-spacing:2px}

#headhome .sociaux{right:5px;bottom:25%}
#headhome .logo img {width:120px;}
.menuMob{right:5px;font-size:10px;width:77px;padding-top:16px;text-indent:100%}
.menuMob .navIcon{left:56px}

.mainNav a.list li{font-size:15px}
.mainNav li.first a{font-size:11px}

.slideServ{bottom:23px}
.slideServ h4{font-size:8px;letter-spacing:2px;}

.diagonale > .container {left:-25px;padding: 40px;}
figure.effectHover{min-width:100%}

.head{height:275px;padding:100px 10px 0}
.head h1{font-size:20px}
.head p{font-size:14px;}



	
}