@charset "UTF-8";
/*
Theme Name: pivo
Theme URI: https://pivoix.com/
Author: pivolab
Author URI: https://pivoix.com/
Description: pivopix : agence de production digitale
Text Domain: pivo
*/


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, .half-content{position:relative;display:block;margin:0 auto;padding:0 100px;width:100%}
.container{max-width:1260px;}
.half-content{max-width:630px;}

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

.big-title-light{
	font-size: 64px;
    color: #ffffff;
    font-weight: 100;
    line-height: 1;
    padding: 90px;
    padding-left: 0px;
    padding-bottom: 50px;
}


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 background-image: linear-gradient(111deg, #cddc39, #a9b532);*/

.blanc{color:#fff;}
.black{color:#000 !important;}
.yellow{color:#FFDB00}
.bggreen{background: #cddc39;}
.charcoal{color:#333;}
.grey{color:#777;}
.dry{color: #1A237E;}
.bgpale{background:#f1f1f1;}
.bgGrey{background:#333;}
.bgyellow{background:#FFDB00;}
.bgyellowlite{background:rgba(255,219,0,0.9)}
.colorone{color:#c3d339;}
.colortwo{color:#009688;}
.colorthree{color:#FF5722;}
.colorfoor{color:#4CAF50;}

.txtcenter{text-align: center;}

/* TEXTE */
h1, h2, h3, h4, h5, h6{margin:0;line-height:1.2;text-transform:uppercase;letter-spacing:3px}
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;color:#fff;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:70px 0;text-align:center}

.btn{margin-bottom:0}
.btn a{border-with:2px;border-style:solid;display:inline-block;padding:7px 15px;text-transform:uppercase;letter-spacing:3px;font-weight:700;font-size:13px;color:#444;-webkit-transition: all 0.35s;}
.btn.jaune.blanc a{color:#fff;border-color:#FFDB00;}
.btn.jaune a{border-color:#FFDB00;}.btn.jaune a:hover{border-color:#444;opacity:0.8}
.btn.blanc a{color:#333;border-color:#fff;}.btn.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:18px;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: #FFEB3B;
	height: 4px;
	width: 130px;
	margin-top: 15px;
}
.border.black: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}*/

.menu-mob {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}
.menu-mob .nav-icon {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;}
.menu-mob .nav-icon::before, .menu-mob .nav-icon: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;}
.menu-mob .nav-icon::before {-webkit-transform: translateY(-10px) rotate(0deg);-moz-transform: translateY(-10px) rotate(0deg);transform: translateY(-10px) rotate(0deg);}
.menu-mob .nav-icon::after {-webkit-transform: translateY(10px) rotate(0deg);-moz-transform: translateY(10px) rotate(0deg);transform: translateY(10px) rotate(0deg);}
.menu-mob.close-nav .nav-icon {background-color: rgba(255, 255, 255, 0);}
.menu-mob.close-nav .nav-icon::before, .menu-mob.close-nav .nav-icon::after {background-color: white;}
.menu-mob.close-nav .nav-icon::before {-webkit-transform: translateY(0) rotate(45deg);-moz-transform: translateY(0) rotate(45deg);transform: translateY(0) rotate(45deg);}
.menu-mob.close-nav .nav-icon::after {-webkit-transform: translateY(0) rotate(-45deg);-moz-transform: translateY(0) rotate(-45deg);transform: translateY(0) rotate(-45deg);}

.main-nav {position:fixed;left:0;top:0;height:100%;width:100%;margin:0;padding:0px;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;}
.main-nav li{margin:0;line-height:1.4;text-align: center;color:#666;cursor:pointer}
.main-nav li.first a{margin:10px 0 0;font-weight:400;font-size:14px;color:#666;display:block}
.main-nav 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;}
.main-nav a.list li:hover{color:#FFDB00;-moz-transition:all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.main-nav .sociaux {text-align:center}
.main-nav .sociaux a{display:inline-block;text-align:center}

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


.nav-overlay, .content-overlay {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);}
.nav-overlay span, .content-overlay 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);}
.nav-overlay.is-hidden, .content-overlay.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;}
.nav-overlay {  z-index: 2;}
.nav-overlay span {background-color: #fff;}
.content-overlay {z-index: 4;}
.content-overlay span {background-color: #FFDB00;}


.main-content{overflow:hidden}

/* HOME ACCUEIL */
.home-head{background:url(img/slider/home-hero.webp) no-repeat right 25% center / cover;}
.home-head .logo{position:fixed;/*width:100%;*/top:30px;z-index:3;left:15px}
.home-head .logo img{display:block;margin:0 auto;}
.slide-content{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*/}

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


.home-head .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}

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

p.big-title{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.big-title.blanc{mix-blend-mode: soft-light;color:#fff}
.plus{margin-bottom:40px}


.home-service 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 .big-pad{padding-bottom:100px}
.diagonale .big-btn-pad{padding-bottom:100px}
/* HOME RÉALISATION */
figure.hover-effct {position: relative;overflow: hidden;margin:0;background: #333;text-align: center;cursor: pointer;}
figure.hover-effct figcaption {padding: 20px;color: #fff;text-transform: uppercase;}
figure.hover-effct figcaption {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.hover-effct figcaption::before {position: absolute;top: 20px;right: 20px;bottom: 20px;left: 20px;border: 2px solid #fff;box-shadow: 0 0 0 30px rgba(255,255,255,0.2);content:'';opacity: 0;-webkit-transition: opacity 0.35s; -webkit-transform: 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale3d(1.4,1.4,1);transform: scale3d(1.4,1.4,1);}
.hover-effct h2 {margin:15% 0 10px 0;padding:0 20px;color:#fff;font-size:14px;opacity:0;text-transform:uppercase;font-weight:100;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale(0.5);transform: scale(0.5);}
.hover-effct h2 span{font-weight:800}
.hover-effct p {padding:0 20px;margin:10px 0;line-height:1.2;opacity: 0;font-sie:12px-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale(1.5);transform: scale(1.5);}
.hover-effct img{position: relative;display: block;width: 100%;opacity: 0.9;-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}

.hover-effct:hover h2 {-webkit-transform: scale(1);transform: scale(1);opacity:1}
.hover-effct:hover figcaption::before,.hover-effct:hover p, .hover-effct:hover h2 {opacity: 1;-webkit-transform: scale3d(1,1,1);transform: scale3d(1,1,1);}
.hover-effct:hover figcaption {background-color: rgba(58,52,42,0);}
.hover-effct:hover img {opacity: 0.4;}


/* 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;
	padding-left: 20px;}
p.mail:before{content:"";width:32px;height:30px;background:url(img/picto/email.svg) no-repeat left center / 25px auto;padding-left:40px}
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:150px 25px 0;text-align:center;height:450px !important;position:relative}
.logo{position: fixed;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;}
.service-list{
	    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    gap: 10px;
    width: 50%;
    gap: 7px;
    align-items: start;
    margin: auto;
    flex-direction: row;
    flex-wrap: wrap;
}
.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}
.head.page-404{background:url(img/fond/404.jpeg) no-repeat center bottom / cover fixed}
.bgweb{background:url(img/fond/conception-site-web.jpg) no-repeat center center / cover fixed}
.bgprint{background:url(img/fond/design-graphisme.jpg) no-repeat center center / cover fixed}
.bgcontact{background:url(img/meublage/fond-projet.jpg) no-repeat center center / cover fixed;}

/* delete */
.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}
/* end */
.contact p{margin-bottom:5px}
/* .contact a.fb{background:url("img/picto/facebook-black.svg") no-repeat top center / 32px auto;} */
/* .contact a.lki{background:url("img/picto/linkedin-black.svg") no-repeat top center / 32px auto;} */
/* .contact a.inst{background:url("img/picto/instagram-black.svg") no-repeat top center / 32px auto;} */
/* .contact a.pin{background:url("img/picto/pinterest-black.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.back-btn{line-height:1;text-align:right;font-weight:800;font-size:13px;color:#777;text-transform:uppercase}
p.back-btn{margin-top:10px;float:right}
.back-btn: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%);}
.we-serve{
	background-image: none;
    padding-top: 180px;
}

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

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

	.slide-content .slide .container{padding-top:20%;max-width:70%;padding-left:10%}
	.slide-content .slide h2{font-size:36px;}
	.slide-content .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, .half-content{padding:0 40px;}
	.pad{padding-top:30px;padding-bottom:30px}
	.big-pad{padding-top:60px;padding-bottom:60px}
	.pad-bottom{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;}

	.btn a{border-with:3px;padding:5px 10px;font-size:12px;}
	img.plus {width:50px}

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

	.home-head .sociaux{bottom:40%;}
	.slide-content{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}
	.slide-content .slide .container{padding-top:22%;padding-left:7%;text-align:left}
	.slide-content .slide h2{font-size:26px;text-align:left}
	.slide-content .slide h3{font-size:16px;text-align:left}
	.slide-content .slide .container .btn{text-align:left}

	.home-head .logo{left:0}
	.logo{left:20px}

	.home-head .sociaux{right:10px;bottom:35%}
	.home-head .logo{top:20px}
	.home-head .logo img {width:180px;}

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

	.slide-serv h4{font-size:11px}

	.home-service h3, .home-service h4{text-align:left}
	.home-service img{max-width:50px}
	.home-service .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;}
	.back-btn + img.plus{margin:20px 0!important}

	.head.propos, .head.service, .head.projet, .head.nsjoindre, .bgweb, .bgprint, .bgcontact,
	.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, .half-content{padding:0 30px;}
	.pad{padding-top:25px;padding-bottom:25px}
	.big-pad{padding-top:50px;padding-bottom:50px}
	.pad-bottom{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:15px;}
	h5{font-size:12px;}
	h6{font-size:11px;}

	p.big-title-light{
	font-size: 30px;
    color: #ffffff;
    font-weight: 100;
    line-height: 1;
    padding: 45px;
    padding-left: 0px;
    padding-bottom: 25px;
}
.up-services {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.up-services > div {
	background: #f1f1f1;
    padding: 10px;
}
.up-services  ul {
	list-style: none;
}
.up-services  ul li {
	text-align: left;
}
#particlesjs{
	height: auto;
}
.service-list{
	display: flex
;
    justify-content: center;
    align-items: center;
    color: white;
    gap: 5px;
    flex-wrap: wrap;
	width: 100%;
        padding: 10px;
}

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

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


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

	.slide-content{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}
	.slide-content .slide .container{padding-top:120px;}
	.slide-content .slide h2{font-size:15px;letter-spacing:2px}
	.slide-content .slide h3{font-size:16px;letter-spacing:2px}

	.home-head .sociaux{right:5px;bottom:25%}
	.home-head .logo img {width:120px;}
	.menu-mob{right:5px;font-size:10px;width:77px;padding-top:16px;text-indent:100%}
	.menu-mob .nav-icon{left:56px}

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

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

	/* .diagonale > .container {left:-25px;padding: 40px;} */
	    .diagonale > .container {
        left: 25px;
        padding: 40px;
    }
	.tecks{
		    display: flex;
    margin: auto;
    width: 100%;
    gap: 10px;
    justify-content: space-around;
    align-items: center;
	}
	.tecks .col {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.diago-strategy > .container {
        left: -22px;
        padding: 40px;
    }
	.diago-growth > .container {
        left: -22px;
        padding: 40px;
    }
	.diago-product > .container {
        left: -22px;
        padding: 40px;
    }
	    .what-we-do.diagonale > .container {
        left: -8px;
        padding: 40px;
    }
	.skills > div > p {
    font-size: 22px !important;
}

	figure.hover-effct{min-width:100%}

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



.tools .row {
	display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
}
.partner::before, .partner::after{
	content: none;
}
.partner img{
	width: 100px;
}
/* .diagonale > .container {
	left: 0px;
	padding: 40px;
} */
.sociaux-footer {
    justify-content: center;
}
.projets{
	display: flex;
    flex-direction: column;
}
.projet{
	width: 100% !important;
	max-width: 100% !important;
}
#projet-1 div.projet-paral-wraper {
    transform: none !important;
}

.expertice-page .head .menu ul>li {
    width: 50% !important;
}
.expertice-sub-page .head {
    padding-top: 80px !important;
}
#particlesjs{
	/* height: auto !important; */
}
.we-serve{
	    padding-top: 75px;
}
.motion-skill {
    height: 50px !important;
}
.expertice-page .head .menu{
	width: 100% !important;
}
.services-menu{
	display: flex !important;
	height: auto !important;
}
.main-menu li a {
    font-size: 20px !important;
}
.main-menu .row {
	display: flex !important;
    flex-direction: column-reverse !important;
}
.main-menu .row > .span_8_of_12 {
    height: 50% !important;
}
#menu-main-menu {
	display: flex;
	flex-direction: column;
}




}
.ltrspace_01{
	letter-spacing: 1px;
}
.ltrspace_00 {
	letter-spacing: 0;
}
.contact-block {
	background: #ffffff;
	background-image: url("img/footer_slide.jpg");
	background-position: right bottom; /*Positioning*/
	background-repeat: no-repeat; /*Prevent showing multiple background images*/
	background-size: 50%;
}
.widget-contact{
	top: 100%;
	transform: translateY(-100%);
	position: absolute;

}
.cnt{
	background: #000000;
	color: #ffffff;
}
.plaquette{
	background: #CDDC39;
	font-weight: 700;
	font-size: 20px;
}
.bar-separator{
	position: absolute;
	left: -60px;
	top: 12px;
	display: inline-block;
	margin-right: 0;
	width: 40px;
	height: 1px;
	background: #FFDB00;
}


.block-separator{
	position: relative;
	margin-left: 60px;
}
.projet{

	position: relative;
	display: inline-block;
	vertical-align: top;
	/*pointer-events: none;*/
	max-width: 40%;

}
.projet:hover .projet-img-wraper
{
	box-shadow: 0 20px 30px 0 rgba(36, 36, 36, 0.04);
}
.projet:hover .projet-img-cliper {
	/* transform: scale(1.041666);
	transition-duration: 800ms, 330ms;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.19, 1, 0.22, 1); */
}
.projet.clicked .projet-img-cliper {
	/* transform: scale(1.02) !important;
	transition-duration: 800ms, 167ms;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.19, 1, 0.22, 1); */
}
.projet:hover .projet-img-cliper img{
	/* opacity: 0;
	transform: opacity scale(1.02) !important;
	transition-duration: 800ms, 167ms;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.19, 1, 0.22, 1); */

}
.projet:hover  > .projet-paral-wraper .projet-inner-wrapper .projet-img-wraper .projet-img-cliper .projet-video-wrapper,
.projet-paral-wraper .projet-inner-wrapper .projet-img-wraper .projet-img-cliper .projet-video-wrapper .projet-video{
	/* opacity: 1;
	transform: opacity scale(1.02) !important;
	transition-duration: 800ms, 167ms;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.19, 1, 0.22, 1); */

}

.projet-shadow-wraper{
	position: absolute;
	left: -20%;
	top: -20%;
	right: -20%;
	bottom: -20%;
	display: none;
	z-index: 1;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.projet-img-wraper{

	position: relative;
	width: 100%;
	transition: 500ms transform cubic-bezier(0.19, 1, 0.22, 1), 350ms box-shadow linear;
	box-shadow: 0 6px 16px 0 #cccccc;
	height: 350px;

}
.projet-img-wraper .projet-video-wrapper{
	opacity: 0;
}


.projet[data-shape="rect"] > .projet-img-wrapper {
	height: 437px !important;
}
.projet[data-shape="rect"].projet-paral-wraper{
	margin-right: 120px;

	height: 350px;
	overflow: hidden;
}
.projet[data-shape="rectx"].projet-paral-wraper{
	margin-right: 120px;

	height: 450px;
	overflow: hidden;
}

.projet-inner-wrapper{
	height: 100%;
	padding-bottom: 30px;
}

.projet[data-order="0"].projet-inner-wrapper {
	transition: opacity 800ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.projet.show .projet-inner-wrapper {
	opacity: 1;
	transform: translateY(0%);
}
.projet .projet-img-cliper img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	pointer-events: none;
	transition: opacity 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.projet-video-wraper{
	position: absolute;
	left: 1px;
	top: 1px;
	right: 1px;
	bottom: 1px;
	overflow: hidden;
}
.projet[data-shape="rect"]{
	margin-right: 10%;
}

.projet-title{
	font-size: 28px;
	font-weight: 900;
	line-height: 1.25;
	color: #242424;
	letter-spacing: -0.02083333em;
	margin-top: 0.75em;
	will-change: opacity;
	opacity: 1;
	transition: opacity 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.service-icon{
	width: 70px;
}

.projet[data-order="0"] .projet-inner-wrapper {
	transition: opacity 800ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 800ms cubic-bezier(0.165, 0.84, 0.44, 1);

}
.projet-img-cliper{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.projet[data-order = "3"] .projet-paral-wraper .projet-inner-wrapper .projet-img-wraper{
	height: 450px;
}
.projet[data-order = "0"] .projet-paral-wraper .projet-inner-wrapper .projet-img-wraper{
	height: 450px;
}
.projet-video{
	position: absolute;
	left: -1px;
	top: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0s cubic-bezier(0.165, 0.84, 0.44, 1) 350ms;
	z-index: 2;
}
.cube{
	height: 150px;
	background: #ffffff;
	padding: 2px;
}
.diagonale{
	/* background: url('img/picto/pattern-fade.jpg');*/

}
.diagonal-nav ul li{
	float: left;
	font-size: 14px;
	color: #000;
	font-weight: bold;
	letter-spacing: normal;
	padding: 2px;
	margin: 5px;
}
.diagonale-p{
	color: #000000;
	padding: 2px;
	margin: 2px;
	text-align: center;
}
.founders-story{

}
.container-fluid{
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
}
.team-family{
	position: relative;
	height: auto;
	width: 100%;
	transform: none;
	clip-path: url(#imageClip);
	z-index: 99;
	padding: 0!important;
}
.big-word{
	font-weight: bold;
	font-size: 51px;
}
.meduim-word{
	font-weight: bold;
	font-size: 22px;
	color: #ffdb00;
	text-transform: uppercase;
}

.diagonale-about{
	background-image: url(img/bg_2.png);
}
.process h2{
	font-size: 15px;
	font-weight: bold;
	color: #1a3049;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.culture h2{
	font-size: 15px;
	display: inline;
	font-weight: bold;
	color: #1a3049;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.culture h2{
	font-size: 15px;
	display: inline;
	font-weight: bold;
	color: #1a3049;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.h1-size{
	font-size: 24px;
}

/*
font-size: 15px;
    display: inline;
    font-weight: bold;
    color: #6a7310;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: #ffffff;
 */
.title{
	color: #b5a507;
	text-shadow: 1px 1px #271717;
}
.tools{
	background: #fff;
	border-bottom: 1px solid #e0d6d6;
}
/* FFF270 D9C500 FFF7A4 A79800*/




/* ---- stats.js ---- */

.count-particles{
	background: #000022;
	position: absolute;
	top: 48px;
	left: 0;
	width: 80px;
	color: #13E8E9;
	font-size: .8em;
	text-align: left;
	text-indent: 4px;
	line-height: 14px;
	padding-bottom: 2px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
}

.js-count-particles{
	font-size: 1.1em;
}

#stats,
.count-particles{
	-webkit-user-select: none;
	margin-top: 5px;
	margin-left: 5px;
}

#stats{
	border-radius: 3px 3px 0 0;
	overflow: hidden;
}

.count-particles{
	border-radius: 0 0 3px 3px;
}


/* ---- particles.js container ---- */

#particlesjs{
	width: 100%;
	height: 100%;
	background-color: #37474F;
	/*background-image: url('');*/
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
/* end f state */
.particles-js-canvas-el{
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
/* expertices */
.expertice-page .head{
	overflow: hidden;
}
.skills > div > p{
	font-size: 44px;
}
.skills > div > p > a{
	border-bottom: 1px solid;;
}
.skills > div > h1{
	font-size: 44px;
	color: #FDD835;
	text-shadow: 1px 1px #9E9E9E;
}
.motion-skill{
	width: 108px;
	height: 108px;
	margin: 0 auto;
	background-position: 0 0;
	background-repeat: no-repeat;

}
.expertice-page .head .menu ul>li {list-style: none; float: left; width: 25%; max-width: 250px;}

.expertice-page .head .menu ul>li>a {
	position: relative;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #2e2e2e;
	height: 200px;

}
.expertice-page .head .menu {
	width: 90%;
	margin: auto;
	z-index: 3;
	position: relative;

}
.link-title{
	font-size: 12px;
	letter-spacing: 0.5px;
	color: #cddc39;
}
.link-attr-title{
	color: #ffffff;
	font-weight: normal;
}
.expertice-page .head .menu ul > li > a:hover .btn-primary{
	border-top: 1px solid #ffff00 !important;
}
.btn-primary {padding-top: 2px;
	padding-bottom: 2px;
	color: #fff;
	border-top: 1px solid #f1f1f1;}

.sub .sub-title h1{
	color: #ccdb38;
}
.sub .sub-title h2{
	color: #699e2b;
	font-size: 15px;
}

.what-we-do{

}
.footer-menu li{
	float: left;
	padding: 2px;
	margin-right: 2px;
	list-style: none;
}
.contact-block-left{
	border-right: 1px solid #f1f1f1;
	margin-right: 10px !important;
}
.contact-block-left > form{
	padding: 10px;
}
.map{
	background: #f1f1f1;
	color: #000000;
}
.map img{
	padding: 3px;
}
.map p{
	padding: 5px;
	text-align: center;
	color: #444444;
	font-weight: bold;
}

.menu{
	height: 281px;
}
.particlesjs{
	padding: 100px 25px 0px;
}
.particlesjs .fleche{
	bottom: 18px;
}
.main-menu li a{
	font-size: 60px;
	text-transform: uppercase;
	color: #fff;
	text-align: left;
}
.main-menu .row {
	height: 100%;
}
.main-menu .row > .col{
	padding: 80px;
}
.main-menu .row > .span_8_of_12{
	/*background: red;*/
	background: #FFDB00;
	margin: 0;
	height: 100%;
}
.main-menu .row > .span_4_of_12{
	background: #222;
	margin: 0;
	height: 100%;

}
.main-menu .row > .infos ul li a:hover{
	color: #222;

}
/* expertice strategy page*/
/* .expertice-sub-page  .head{
	padding: 50px;
	height: 200px;
} */
.expertice-sub-page .head h1, .expertice-sub-page .head p{
	/*display: none ;*/
}
.expertice-sub-page .head .menu{
	height: 106px;
	margin-top: 30px;
	/*overflow: hidden;*/
}
.expertice-sub-page .head .menu ul li a .motion-skill{
	margin-top: -20px;
}
.expertice-sub-page .head .fleche{
	display: none;
}

/* Big Triangle */
svg#bigTriangleColor {
	pointer-events: none;
}

#bigTriangleColor path {
	fill: #fff;
	stroke: #fff;
	stroke-width: 2;
}

#bigTriangleColor2{
	background: #cddc39;
}
#bigTriangleColor2 path {
	fill:#fff;
	stroke: #fff;
	stroke-width: 2;
}
.ofline{
	margin-top: 45px;
}
.online{
	margin-top: 65px;
}
.design-step{
	width: 100px;
	height: 100px;
	background: red;
	border-radius: 50%;
}
.tools .container .row {
	text-align: center;
}
.tools .container .row > .col  {
	margin: 1% 1% 1% 1%;
	text-align: center !important;
}

#projet-1 div.projet-paral-wraper{transform: translateY(54px);}
#projet-3 div.projet-paral-wraper{transform: translateY(54px);}

.histoire, #histoire, #equipe , .team{
	display: none;
}
.service-active{
	height: auto;
	position: absolute;
	top: -50px;

}
.service-active-design{
	left: 630px;
}
.service-active-marketing{
	left: 920px;
}
.service-active-devlopment{
	left: 390px;
}
.service-active-strategy{
	left: 120px;
}
/* END CSS */


.sociaux-footer {
	display: flex;
	gap: 5px;
}
.sociaux-footer > a {
	background-color: #333;
	border-radius: 25px;
}
.btn-act{
	text-align: center;
    padding: 15px 20px 14px;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    color: #333;
    font-weight: 700;
    line-height: 1;
    transition: all .15s;
    display: inline-block;
    position: relative;
    background: gold;
    margin-top: 10px;
}
.sociaux-footer > a.fb{background-image:url("img/picto/facebook.svg") no-repeat bottom center / 32px auto;}
.sociaux-footer > a.lki{background-image:url("img/picto/linkedin.svg") no-repeat bottom center / 32px auto;}
.sociaux-footer > a.inst{background-image:url("img/picto/instagram.svg") no-repeat bottom center / 32px auto;}
.sociaux-footer > a.pin{background-image:url("img/picto/pinterest.svg") no-repeat bottom center / 32px auto;}
.sociaux-footer > a.fb:hover,  .sociaux-footer > a.lki:hover,  .sociaux-footer > a.inst:hover, .sociaux-footer > a.pin:hover{background-position:bottom center; transition:ease-in 0.2s}

.main-navigation .footer-menu {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;

}
.main-navigation .menu {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}
 .main-navigation .footer-menu  li a{
	font-size: 40px;
 }
  .main-navigation .menu  li a{
	font-size: 40px;
 }