*{box-sizing: border-box}
:root {
    --red: #e90029;
    --gray: #535659;
    --lightgray: #ededed;
}
body, html {scroll-behavior: smooth; margin:0; background-color:rgb(255, 255, 255); font-family: 'Raleway', sans-serif; font-size:0px; color:var(--gray); overflow-x: hidden;}
h1,h2,h3,h4,h5,h6{outline:none;font-weight:inherit;font-size:inherit;color:inherit;margin:0;padding:0;display:inline}
a {text-decoration: none; color: inherit;}
.wrapper {margin:0px auto; max-width: 1400px; width: 90%;}
.padding {padding:1% 0}
.text-wrapper {max-width: 800px; padding: 40px 0;}
.raleway {font-family: "Raleway", sans-serif;}
.title {font-size: min(6vw, 45px); line-height: min(7vw, 50px);}
h1.title {font-size:32px;}
.subtitle {font-size: min(3.5vw, 22px); line-height: min(4.5vw, 28px);}
.text {font-size: min(4vw, 14px); line-height: min(5.5vw, 22px);}
.red {color:var(--red)}
.bg-red {background-color:var(--red)}
.white {color:#FFF}
.bg-white {background-color:#FFF}
.gray {color: var(--gray);}
.bg-lightgray {background-color: var(--lightgray);}
.lightgray {color: var(--lightgray);}
.bg-gray {background-color: var(--gray);}
.red {color: var(--red);}
.bg-red {background-color: var(--red);}
.black {color:black}
.bg-black {background-color:#000}
.caps {text-transform:uppercase}
.bold {font-weight:700}
.light-bold {font-weight: 600;}
.semi-bold {font-weight: 500;}
.light {font-weight:300}
.rtl {direction:rtl}
.ltr {direction:ltr}
.left {text-align:left}
.right {text-align:right}
.center {text-align:center}
.hidden {display: none !important; opacity: 0;}
.loader {margin: -10px 20px; display: inline-block; border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid var(--red); width: 30px;  height: 30px; -webkit-animation: spin 1s linear infinite; /* Safari */ animation: spin 1s linear infinite;}
.noinput {position:absolute; left:-200%; opacity:0}
.left-transition {transform: translateX(100px);}
.right-transition {transform: translateX(-100px);}
.motionEase {transition: ease-in .3s;}
.opacity0 {opacity: 0.01;}
.absolute {position: absolute;}

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

.rotateDeg {transform: rotate(180deg);}

/* Slidin Css */

.slidin-left {transform: translate(-60px); opacity: 0.0001; pointer-events: none;}
.slidin-right {transform: translate(60px); opacity: 0.0001; pointer-events: none;}
.slidin-up {transform: translate(0, -60px); opacity: 0.0001; pointer-events: none;}
.slidin-down {transform: translate(0, 60px); opacity: 0.0001; pointer-events: none;}
.delay-0 {transition: ease .4s;}
.delay-1 {transition: ease .6s;}
.delay-2 {transition: ease .8s;}
.delay-3 {transition: ease 1s;}
.delay-4 {transition: ease 1.2s;}
.delay-5 {transition: ease 1.4s;}
.delay-6 {transition: ease 1.6s;}
.delay-7 {transition: ease 1.8s;}
.slidin {}

/*Call to action*/

.cta {font-size:14px; border: 1px solid #535659; padding: 10px 20px;  transition: ease-in-out .2s;}
.cta:hover {cursor: pointer; filter: brightness(1.5);}
.cta-gray {border: 1px solid var(--gray); color: var(--gray);}
.cta-gray:hover {color: white; background-color: var(--gray);}
.cta-white {border: 1px solid white; color: white; display: inline-block;}
.cta-white:hover {background-color: white; color: black;}
.cta-red {border: 1px solid var(--red); background-color: var(--red); display: inline-block;}
.cta-red-white {background-color: var(--red); color: white; border: 1px solid var(--red);}
.link-red:hover {color: var(--red); transition: ease-in-out .3s;}

/*Compenents*/

hr {width: 50px; border: 2px solid var(--red); background-color: var(--red); margin-top: 20px; margin-bottom: 20px;}
.full-gray {width: 100%; border: 0.5px solid #53565959; margin: 20px 0; background-color: transparent;}
.full-red {width: 100%; border: 0.5px solid #e90029; margin: 20px 0;}

/*Header*/

.link {cursor: pointer;}

#header {position: fixed; width: 100%; z-index: 10000;}
#header .logo {display: inline-block; width: 30%;}
#header .logo img {min-width: 210px;}
#header .navigation {display: inline-block; width: 70%; vertical-align:top;}
#header .wrapper .navigation-reduced {display: table-cell; vertical-align: middle;}
#header .tabs {display: inline-block; padding: 20px 0 20px 40px;}
#header .menu {padding: 2px 0;}
#header .menu .tabs {padding: 10px 0 10px 35px; margin: 2px 0; position: relative;}
#header .menu .tabs .dropdown {padding: 10px 20px; pointer-events: none; height: fit-content; width: auto; position: absolute; background-color: var(--red); transition: ease-in-out .2s; opacity: 0;}
#header .menu .tabs .dropdown .drop-link {margin: 5px 0; display: inline-block; opacity: 0.8;}
#header .menu .tabs .dropdown .drop-link:hover {opacity: 1;}
#header .menu .tabs .dropdown:hover {opacity: 1;  pointer-events: initial;}
#header .menu .tabs .link:hover ~ .dropdown {opacity: 1;  pointer-events: initial;}
#header .menu .link:hover {border-top: 2px var(--red) solid; border-bottom: 2px solid var(--red); padding: 5px 0;}
#header .btn-contact {display: none; position: fixed; padding: 10px; right: 100px; margin-top:1px}
#header .btn-contact-move {display: none; position: absolute; top: 7px; right: 39vw;}

/*Burger menu*/

.burger-menu-container {display: none;}
.burger-menu-container .tabs {vertical-align: middle; margin-right: 20px;}
.burger-menu-container .burger-menu-wrapper {display: inline-block; vertical-align: middle; margin-right: 2px;}

.btn {position: sticky; width: 30px; cursor: pointer;}
.bg-span {display: block; width: 100%; box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3); border-radius: 2px; height: 2px; background: #fff; transition: all .3s; position: relative;}
/*span + span {margin-top: 6px}*/
.active span:nth-child(1) {animation: ease .7s top forwards;}
.not-active span:nth-child(1) {animation: ease .7s top-2 forwards;}
.active span:nth-child(2) {animation: ease .7s scaled forwards;}
.not-active span:nth-child(2) {animation: ease .7s scaled-2 forwards;}
.active span:nth-child(3) {animation: ease .7s bottom forwards;}
.not-active span:nth-child(3) {animation: ease .7s bottom-2 forwards;}

@keyframes top {0% {top: 0; transform: rotate(0);} 50% {top: 8px; transform: rotate(0);} 100% {top: 8px; transform: rotate(45deg);}}
@keyframes top-2 {0% {top: 8px; transform: rotate(45deg);} 50% {top: 8px; transform: rotate(0deg);} 100% {top: 0; transform: rotate(0deg);}}
@keyframes bottom {0% {bottom: 0; transform: rotate(0);} 50% {bottom: 8px; transform: rotate(0);} 100% {bottom: 8px; transform: rotate(135deg);}}
@keyframes bottom-2 {0% {bottom: 8px; transform: rotate(135deg);} 50% {bottom: 8px; transform: rotate(0);} 100% {bottom: 0; transform: rotate(0);}}
@keyframes scaled { 50% {transform: scale(0);} 100% {transform: scale(0);}}
@keyframes scaled-2 {0% {transform: scale(0);} 50% {transform: scale(0);} 100% {transform: scale(1);}}

.bg-menu {position: fixed; top:0; bottom:0; right:0; background-color:var(--red); transition: left .6s; z-index: 5000; overflow-x: hidden;}
.bg-menu-closed {left: 3000px;}
.bg-menu-opened {left: 3000px;}
.bg-menu .menu {padding: 0 40px 100px 40px; border-top: 80px solid #535659;}
.bg-menu .menu .tabs {padding: 20px 0;}
.bg-menu .menu .tabs .arrow {transition: 0.3s ease-out;}
.bg-menu .menu .tabs .dropdown {transition: 0.3s ease-out; margin-left: 20px; font-size: 16px;}
.bg-menu .menu .tabs .closedDrop {max-height: 0px; opacity: 0; pointer-events: none; z-index: 0;}
.bg-menu .menu .tabs .openedDrop {max-height: 500px; opacity: 1; pointer-events: initial; z-index: 10000;}
.bg-menu .menu .tabs a {border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 5px 0;}
.bg-menu .menu .tabs a:hover {border-top: 2px solid white; border-bottom: 2px solid white;}

#pi-header {position: fixed; width: 100%; z-index: 10000;}
#pi-header .sub-menu {border-bottom: 1px solid white;}
#pi-header .sub-menu .tabs {padding: 10px 0 10px 20px; transition: ease .3s;}
#pi-header .sub-menu .tabs:hover {color: #e90029;}
#pi-header .logo {display: inline-block; width: 30%; vertical-align: middle;}
#pi-header .logo img {min-width: 210px; max-width: 300px;}
#pi-header .navigation {display: inline-block; width: 70%; vertical-align: middle;}
#pi-header .wrapper .navigation-reduced {display: inline-block; vertical-align: middle;}
#pi-header .tabs {display: inline-block; padding: 20px 0 20px 40px;}
#pi-header .menu {padding: 2px 0;}
#pi-header .menu .tabs {padding: 10px 0 10px 35px; margin: 2px 0; position: relative;}
#pi-header .menu .tabs .dropdown {padding: 10px 20px; pointer-events: none; height: fit-content; width: auto; position: absolute; background-color: var(--red); transition: ease-in-out .2s; opacity: 0;}
#pi-header .menu .tabs .dropdown .drop-link {margin: 5px 0; display: inline-block; opacity: 0.8;}
#pi-header .menu .tabs .dropdown .drop-link:hover {opacity: 1;}
#pi-header .menu .tabs .dropdown:hover {opacity: 1;  pointer-events: initial;}
#pi-header .menu .tabs .link:hover ~ .dropdown {opacity: 1;  pointer-events: initial;}
#pi-header .menu .link:hover {border-bottom: 2px solid var(--red); padding: 5px 0; font-weight: bold;}
#pi-header .btn-contact {display: none; position: fixed; padding: 10px; right: 100px; margin-top:1px}
#pi-header .btn-contact-move {display: none; position: absolute; top: 7px; right: 39vw;}

#intro {position:relative; height:45vw; min-height: 500px;}
#intro .intro-content {height: 700px; background-position: center; background-repeat:no-repeat; background-size:cover;}
#pi-intro {height: 45vw; min-height: 500px; max-height: 800px;}
#pi-intro .fixed-hero {height: 45vw; min-height: 500px; max-height: 800px;}
#pi-intro .fixed-hero .gradient {padding-bottom: 60px; padding-top: 120px;}
#pi-intro .gradient {height:100%; width: 100%; align-items: flex-end; display: flex; background-color: rgba(0,0,0,0.6);}
#pi-intro .gradient .subtitle {margin: 0;}
#pi-intro .gradient .title {max-width: 700px; margin: 0;}
#pi-intro .gradient .text {max-width: 800px; margin: 20px 0;}
#pi-intro .gradient hr {display: inline-block; border: 1.5px solid var(--red);}
#pi-intro .gradient .square-wrapper {position: initial; text-align: right; margin: 40px 0 20px;}
#pi-intro .gradient .square-wrapper .red-square {margin: 3px;}
#pi-intro .gradient .square-wrapper .white-square {margin: 3px;}

/*Intro*/

#intro {position:relative; height:45vw; min-height: 500px;}
#intro .intro-content {height: 700px; background-position: center; background-repeat:no-repeat; background-size:cover;}
.gradient {height:100%; width: 100%; align-items:center;display: flex; background-image: linear-gradient(to left, rgba(0,0,0,0), 100%,rgb(0, 0, 0)); background-color: rgba(0,0,0,0.3);}

/*Slideshow*/

.awf_slideshow-collection .square-wrapper {position: absolute; bottom: 0; left: 50%; margin-left: -52.5px;}
.awf_slideshow-collection .red-square {width: 15px; height: 15px; background: var(--red); display: inline-block; margin: 10px; border-radius: 0;}
.awf_slideshow-collection .white-square {width: 15px; height: 15px; background: white; display: inline-block; margin: 10px; border-radius: 0;}

/*Content block*/

#content-block {padding: 0;}
#content-block .header-content {display: inline-block;}
#content-block .footer-content .two-block-content {display: inline-block; width: 49%; vertical-align: top;}
#content-block .footer-content .two-block-content ul {padding: 15px;}
#content-block .footer-content .two-block-content li {padding: 5px 0;}
#content-block .footer-content .two-block-content .text-content {padding: 30px 30px 40px;}
#content-block .footer-content .two-block-content .text-content .flex-container {display: flex; justify-content: flex-start; flex-wrap: wrap;}
#content-block .footer-content .two-block-content .text-content .flex-container .color-container {padding: 10px 23.8px; width: min-content;}
#content-block .footer-content .two-block-content .text-content .flex-container .color-circle {width: 100px; height: 100px; border-radius: 100px; box-shadow: 0px 0px 10px 0.5px lightgrey;}
#content-block .footer-content .two-block-content .text-content .flex-container .text {padding-top: 10px;}
#content-block .footer-content .two-block-content img {object-fit: cover; height:500px;}
#content-block .footer-content .tree-block-content {display: inline-block; width: 33%; vertical-align: top; padding: 0 0 40px 0;}
#content-block .footer-content .tree-block-content .text {padding: 0 40px 40px 40px;}
#content-block .footer-content .tree-block-content .centent-wrapper {margin: 30px;}

#content-container {padding: 60px 0;}
#content-container .content-wrapper {display: flex; justify-content: space-between; align-items: center; padding: 10px 0;}
#content-container .content-wrapper:hover .arrowhead-container {background-color: #e90029;}
#content-container .content-wrapper:hover .arrowhead-container img {filter: brightness(0) invert(1)}
#content-container .content-wrapper .content-container {padding-right: 60px;}
#content-container .content-wrapper .content-container .title {margin-bottom: 5px;}
#content-container .content-wrapper .arrowhead-container {border-radius: 100px; transition: ease .3s; border: 1px solid #e90029; padding: 10px 16px;}
#content-container .content-wrapper .arrowhead-container img {transition: ease .2s;}
#content-container .content-wrapper .arrowhead-container:hover {background-color: #e90029;}
#content-container .content-wrapper .arrowhead-container:hover img {filter: brightness(0) invert(1);}

#career-widget {padding: 50px 0;}
#career-widget .two-block-container {display: flex; justify-content: space-between; align-items: center;}

#collections-block {}
#collections-block .collection-wrapper {padding: 60px 0; border-bottom: 1px solid #53565959;}
#collections-block .collection-wrapper:last-of-type {border-bottom: none;}
#collections-block .collection-wrapper .collection-header {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 60px; flex-wrap: wrap;}
#collections-block .collection-wrapper .collection-header hr {display: inline-block;}
#collections-block .collection-wrapper .collection-header .subtitle {font-size: 26px;}
#collections-block .collection-wrapper .collection-header .text {width: 50%;}
#collections-block .collection-wrapper .collection-content {display: flex; justify-content: space-around; align-items: flex-end; flex-wrap: wrap;}
#collections-block .collection-wrapper .collection-content .product-card {width: 25%; padding: 30px; min-width: 250px;}
#collections-block .collection-wrapper .collection-content .product-card img {transition: ease .2s; width: 100%; margin-bottom: 20px;}
#collections-block .collection-wrapper .collection-content .product-card .subtitle {transition: ease .2s; border-bottom: 2px solid transparent; display: inline-block;}
#collections-block .collection-wrapper .collection-content .product-card a:hover img {transform: scale(1.05);}
#collections-block .collection-wrapper .collection-content .product-card a:hover .subtitle {border-bottom: 2px solid #e90029;}

/*Full width content*/

#full-width-content {padding: 30px 0 80px 0; /* height: 36vw */}
#full-width-content .content-wrapper {width:100%; display:table; height:32vw; min-height:450px}
#full-width-content .block-content {display: table-cell; width: 50%; vertical-align: top; /* height: 30vw; min-height: 325px; */ position: relative;}
#full-width-content .text-content {vertical-align: middle; padding: 0px 80px;}
#full-width-content .text-content .white {display: inline-block;}
#full-width-content .block-content img {width: 100%; max-height: 660px; height: 100%; object-fit: cover;}

/*Section*/

#section {padding: 127px 0;}
#section .content-cell {display: inline-block; width: 50%; vertical-align: top; padding:1%}
#section .content-cell .header-content {height: 70vw; max-height: 550px; background-position: center; background-size: cover;}
#section .content-cell .footer-content {padding: 30px;}
#section .content-cell .footer-content .subtitle {margin: 20px 0 0;}
#section .content-cell .footer-content .img-produit {height: 10vw; min-height: 100px; width: 100%;}
#section .content-cell .footer-content .img-icon {width: 4vw; margin-top: -3vw; min-width: 40px;}
#section .margin-cell {display: inline-block; width: 4%;}

#projects-slideshow {padding: 80px 0 0; background-image: url(/wp-content/themes/pubinteractive/img/Logo_A.svg); background-repeat: no-repeat; background-position: 8vw 40px; background-size: 320px;}
#projects-slideshow .text-content {width: 70%; padding-right: 80px; display: inline-block;}
#projects-slideshow .title {font-size: min(9vw, 90px); line-height: min(10vw, 120px);}
#projects-slideshow .text-content .text {line-height: 30px; font-size: 16px;}
#projects-slideshow .text-content .cta {margin-top: 20px; margin-top: 40px;}
#projects-slideshow .caroussel-container {background: linear-gradient(180deg,rgba(83, 86, 89, 1) 0%, rgba(83, 86, 89, 1) 35%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 100%); padding-bottom: 40px;}

/*Manual slides*/

#manual-slides {padding-top: 100px;}
#manual-slides .arrow-left {position: absolute; left: 40px; top: 50%; transform: rotate(90deg);}
#manual-slides .arrow-right {position: absolute; right: 40px; top: 50%; transform: rotate(-90deg);}
#manual-slides .arrow-left .small-arrow {display: none;}
#manual-slides .arrow-right .small-arrow {display: none;}
#manual-slides .content-container {width: 100%; overflow-x: scroll; white-space: nowrap; height: 550px; pointer-events: none; display: inline-block;}
#manual-slides .content-container .content-cell {border: 12px solid white; height: 400px; width: 33.33%; display: inline-block; background-color: rgb(235, 235, 235); white-space: normal; vertical-align: top;}
#manual-slides .content-container .content-cell .header-content {width: 100%; height: 95%; background-size: cover; background-position: center;}
#manual-slides .content-container .content-cell .footer-content {padding: 20px; height: 110px; overflow: hidden;}

.pi-carrousel-img-container {position: relative;}
.pi-carrousel-img-container::after {content: ''; position: absolute; bottom: -0.5vw; left: -2vw; border: 1px solid #e90029; width: 100px; height: 30vw; max-height: 200px;}
.pi-carrousel-img-container .pi-carrousel-img-wrapper {z-index: 1; white-space: nowrap; overflow: scroll; scroll-behavior: smooth; pointer-events: none; -ms-overflow-style: none; scrollbar-width: none; position: relative;}
.pi-carrousel-img-container .pi-carrousel-img-wrapper::-webkit-scrollbar {display: none;}
.pi-carrousel-img-container .pi-carrousel-img-wrapper .pi-carrousel-img {display: inline-block; vertical-align: middle; box-sizing: border-box;}
.pi-carrousel-img-container .pi-carrousel-img-wrapper .pi-carrousel-img1 {width: 100%; height: 50vw; max-height: 600px; min-height: 300px; padding: 20px 10px 10px;}
.pi-carrousel-img-container .pi-carrousel-img-wrapper .pi-carrousel-img img {width: 100%; height: 100%; object-fit: cover;}

.pi-carrousel-img-container .pi-carrousel-text-wrapper {white-space: nowrap; overflow: scroll; scroll-behavior: smooth; pointer-events: none; -ms-overflow-style: none; scrollbar-width: none;}
.pi-carrousel-img-container .pi-carrousel-text-wrapper .pi-carrousel-text {display: inline-block; vertical-align: middle; box-sizing: content-box; white-space: normal; transition: ease .3s;}
.pi-carrousel-img-container .pi-carrousel-text-wrapper .pi-carrousel-text .pi-carrousel-text-content {height: 100%; width: 100%; padding: 40px; background-image: url(/wp-content/themes/pubinteractive/img/magnus-bg.jpg); background-position: center; background-size: cover; display: flex; align-items: center;}
.pi-carrousel-img-container .pi-carrousel-text-wrapper .pi-carrousel-img1 {width: 100%; padding: 10px;}

.pi-carrousel-img-container .pi-carrousel-arrow-container {pointer-events: none; position: absolute; display: flex; align-items: flex-end; justify-content: flex-end; top: 0; bottom: 0; width: 100%; padding: 60px 25px; z-index: 2;}
.pi-carrousel-img-container .pi-carrousel-arrow-container img {transition: ease .2s; cursor: pointer; pointer-events: initial; padding: 10px 15px; border-radius: 100px; border: 1px solid white; margin: 0 10px; filter: brightness(0) invert(1); width: 45px;}
.pi-carrousel-img-container .pi-carrousel-arrow-container img:hover {background-color: white; filter: brightness(1);}
.pi-carrousel-img-container .tracking-square-wrapper {padding: 0 5px;}
.pi-carrousel-img-container .tracking-square-wrapper .tracking-square {display: inline-block; vertical-align: middle; background-color: var(--lightgray); width: 20px; height: 20px; margin: 5px;}

/*a-propos*/

#a-propos {padding: 170px 0 60px 0; min-height: 60vh;}
#a-propos .wrapper-img {margin: 0px auto; max-width: 1270px; width: 95%;}
#a-propos .img-btn-form {width: 130px; /*box-shadow: gray 3px 3px;*/ margin: 20px 20px 0; cursor: pointer;/* border: 1px solid gray;*/}
#a-propos .img-btn-form:hover ~ .link-red {color: var(--red); transition: ease-in-out .3s;}
/*#a-propos .img-btn-form:active {box-shadow: gray 0px 0px; transform: translate(3px, 3px);}*/

/*Realisation*/

#realisations {padding: 0 0 60px 0;}
#realisations .img-real-container {width: 33.33%; height: 22vw; display: inline-block; position: relative; overflow: hidden; padding: 1%;}
#realisations .img-real-container img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
#realisations .close-btn {cursor: pointer; width: 30px; height: 30px; background-color: black; position: fixed; right: 160px; pointer-events: auto; border-radius: 100px; color: white; font-size: 14px; padding: 7.5px 0 0 11px;cursor: pointer; width: 30px; height: 30px; background-color: black; position: fixed; right: 160px; pointer-events: auto; border-radius: 100px; color: white; font-size: 14px; padding: 7.5px 0 0 11px;}
#realisations .img-display {z-index: 100; position: fixed; height: 70%; width: 50%; left: 25%; pointer-events: none;}

#slideshow {width:100%; position:fixed; width:100%; display:table; z-index:10000; top:0; right:0}
#slideshow .slideshow-container {display:table-cell; width:100%; height:100vh; background:rgba(0,0,0,0.7); text-align:center; vertical-align:middle; position:relative;}
#slideshow .slideshow-container .slideshow-slider {z-index: 1000; left: 0; right: 0; top: 50px; margin-left: auto; margin-right: auto; position:absolute; height:80vh; vertical-align:middle; overflow:hidden;}
#slider {display:table; table-layout:fixed}
#slider .slide {display:table-cell; width:100%; height:80vh; position:relative;}
#slider .slide img {object-fit:scale-down; object-position:center; height:80vh; width:95%}

#slideshow-controls {display: flex; align-items: flex-end; justify-content: center; left: 0; right: 0; top: 135px; margin-left: auto; margin-right: auto; position:absolute; height:80vh; overflow:hidden}
#slideshow-controls .wrapper {display: flex; align-items: center; justify-content: space-evenly; min-width: 200px; z-index: 1000; height:70px; width: 20%; border-radius: 35px; background-color: var(--gray);}
#slideshow-controls .wrapper .arrow-left {padding: 7px 5px; transform: rotate(90deg); cursor:pointer; user-select:none; vertical-align:top; z-index: 10; background:#FFF; width:50px; height:50px; line-height:45px; font-size:30px; border-radius:100px; display:inline-block; text-align:center}
#slideshow-controls .wrapper .arrow-right {padding: 7px 5px; transform: rotate(270deg); cursor:pointer; user-select:none; vertical-align:top; z-index: 10; background:#FFF; width:50px; height:50px; line-height:45px; font-size:30px; border-radius:100px; display:inline-block; text-align:center}

#filtres {padding: 200px 0 40px 0;}
#filtres .checkmark:after{ content: ""; position: absolute; display: none;}
#filtres .filters-container {background-color: #eee; border-top: 2px var(--red) solid;}
#filtres .filters-container .filter-cell {display: inline-block; width: 25%; padding: 20px;}
#filtres .filters-container .filter-cell .checkbox {display: inline-block; position: relative; padding-left: 28px; padding-right: 15px; margin-bottom: 4px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#filtres .filters-container .filter-cell .checkbox input {opacity: 0; position: absolute;}
#filtres .filters-container .filter-cell .checkbox input:checked ~ .checkmark::after {display: block;}
#filtres .filters-container .filter-cell .checkbox input:checked ~ .checkmark {background-color: var(--red); box-shadow: inset 0px 0px 0px 0px #fff; border: 2px solid var(--red);}
#filtres .filters-container .filter-cell .checkbox .checkmark {position: absolute; top: -1px; left: 0; height: 20px; width: 20px; background-color: transparent; border: 2px solid var(--red);}
#filtres .filters-container .filter-cell .checkbox .checkmark::after {left: 5px; top: 0px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
#filtres .filters-container .border-filter {position: relative;}
#filtres .filters-container .border-filter::after {content: ''; height: 70%; background-color: #ccc; position: absolute; right: 0; top: 15%; width: 1px;}

/*Nouvelles*/

#news {padding: 200px 0 40px 0;}
#news .news-container {display: inline-block; vertical-align: top; padding: 20px; width: 33.33%;}
/* #news .news-container .news-content {background-size: cover; background-repeat: no-repeat; position: relative; height: 160px;} */
/* #news .news-container .news-content::after {width: 100%; position: absolute; top: 0; display: block; height: 160px; content: ''; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%)} */
#news .news-container .news-content {position: relative;}
#news .news-container .news-content .border-red {position: absolute; width: 7px; background-color: #e90029; height: 100%; top: 0; right: 0; transition: ease-in-out .3s;}
#news .news-container .news-content:hover .border-red {width: 30px;}
#news .news-container .news-content .news-img {height: 300px;}
#news .news-container .news-content .news-img img {object-fit: cover; height: 100%;}
#news .news-container .news-content .news-text {padding: 20px 40px 20px 20px; background-color: #535659;}

#single-news {padding: 150px 0 40px 0;}

/*Foire aux questions*/

#faq {padding: 180px 0 40px 0;}
#faq .question-container {padding: 20px; border: 2px solid #535659; width: 100%; margin: 30px 0;}
#faq .question-container .question-content {display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.answer-content {max-height: 1px; overflow: hidden;}
#faq .question-container .opened {max-height: 600px; overflow: hidden;}
#faq .question-container .flipped {transform: rotate(180deg);}

/*Form*/

#form {padding: 0 0 60px 0;}
#form .form-cell {width: 50%; display: inline-block; vertical-align: top;}
#form .subtitle {margin: 40px 0 10px;}
#form .box-label {display: inline-block; padding: 5px; margin-bottom: 0;}
#form .form-box {border: 1px solid; padding: 10px;}
#form .form-wrapper {max-width: 1000px; display: inline-block;}
#form .form-wrapper .btn-wrapper {width: 98%; margin: 1%;}
input[type="submit"] {background-color: transparent; font-family: 'Raleway', sans-serif; font-weight: 700; padding: 8px 45px; margin: 1%;}
.custom-input {width: 48%; margin: 1%; padding: 10px; display: inline-block; vertical-align: top;}
input[type="button"] {background-color: transparent; font-family: 'Raleway', sans-serif; font-weight: 700; padding: 8px 45px; margin: 1%;}
.custom-input {width: 48%; margin: 1%; padding: 10px; display: inline-block; vertical-align: top;}
input[type="text"] {border: 1px var(--gray) solid; width: 48%; margin: 1%; padding: 10px;}
input[type="password"] {border: 1px var(--gray) solid; width: 48%; margin: 1%; padding: 10px;}
#form .textbox-wrapper {margin: 1%; padding: 7px 15px; border-left: 1px solid; display: inline-block; width: 48%;}
#contactform select {-webkit-appearance: none; border: 1px var(--gray) solid; width: 48%; margin: 1%; padding: 10px; background-image: url(../img/down_arrowhead.png); background-size: 10px; background-repeat: no-repeat; background-position: 97% center;}
input[type="email"] {border: 1px var(--gray) solid; width: 48%; margin: 1%; padding: 10px;}
input[type="tel"] {border: 1px var(--gray) solid; width: 48%; margin: 1%; padding: 10px;}
textarea {border: 1px var(--gray) solid; width: 98%; margin: 1%; padding: 10px; margin-top: 20px;}
.checkmark:after{ content: ""; position: absolute; display: none;}
.checkbox {margin: 10px 0; display: inline-block; position: relative; padding-left: 28px; padding-right: 15px; margin-bottom: 4px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.checkbox input {opacity: 0; position: absolute;}
.checkbox input:checked ~ .checkmark::after {display: block;}
.checkbox input:checked ~ .checkmark {background-color: var(--red); box-shadow: inset 0px 0px 0px 0px #fff; border: 2px solid var(--red);}
.checkbox .checkmark {position: absolute; top: -1px; left: 0; height: 20px; width: 20px; background-color: transparent; border: 2px solid var(--red);}
.checkbox .checkmark::after {left: 5px; top: 0px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
select {border: 1px solid var(--gray); color: var(--gray); padding: 10px;}
option:hover {background-color: var(--red);}
.input-radio {display: none;}
.input-radio:checked ~ .radio-box {background-color: var(--red); border: 1px solid var(--red);}
.radio-box {border: 1px solid black; width: 15px; height: 15px; border-radius: 20px; background-color: #FFF; position: absolute; left: 0; top: 1px;}
.custom-radio {position: relative; padding-left: 20px;}
#form .add-container {display: inline-block; text-align: center; width: 30px; font-size: 25px; font-weight: bolder; color: #002b3c; border: 1px solid #535659; margin: 0 1.5% 0 2%; cursor: pointer;}
#form .add-container-label {font-size: 14px; margin-left: 20px;}

.custom-radio-negative {}
.custom-radio-negative ~ .extra-content-pi {transition: ease .3s; display: none;}
.custom-radio-negative:checked ~ .extra-content-pi {max-height: 200px; display: initial;}

/*
input[value="Temporaire"]::after {background-color: white; display: block; position: absolute; content: ""; height: 15px; width: 15px; border-radius: 15px; left: -2px; font-size: 18px; text-align: center; line-height: 15px; visibility: visible; border: 1px solid black;}
input[value="Temporaire"]:checked:after {background-color: var(--red); border: 1px solid var(--red);}
input[value="Permanent"]::after {background-color: white; display: block; position: absolute; content: ""; height: 15px; width: 15px; border-radius: 15px; left: -2px; font-size: 18px; text-align: center; line-height: 15px; visibility: visible; border: 1px solid black;}
input[value="Permanent"]:checked:after {background-color: var(--red); border: 1px solid var(--red);}
input[value="Étudiant"]::after {background-color: white; display: block; position: absolute; content: ""; height: 15px; width: 15px; border-radius: 15px; left: -2px; font-size: 18px; text-align: center; line-height: 15px; visibility: visible; border: 1px solid black;}
input[value="Étudiant"]:checked:after {background-color: var(--red); border: 1px solid var(--red);}

input[value="Jour"]::after {background-color: white; display: block; position: absolute; content: "\2713"; height: 20px; width: 20px; left: 0; color: transparent; font-size: 18px; text-align: center; line-height: 20px; visibility: visible; border: 2px solid var(--red);}
input[value="Jour"]:checked:after {background-color: var(--red); color: white;}
input[value="Soir"]::after {background-color: white; display: block; position: absolute; content: "\2713"; height: 20px; width: 20px; left: 0; color: transparent; font-size: 18px; text-align: center; line-height: 20px; visibility: visible; border: 2px solid var(--red);}
input[value="Soir"]:checked:after {background-color: var(--red); color: white;}
input[value="Nuit"]::after {background-color: white; display: block; position: absolute; content: "\2713"; height: 20px; width: 20px; left: 0; color: transparent; font-size: 18px; text-align: center; line-height: 20px; visibility: visible; border: 2px solid var(--red);}
input[value="Nuit"]:checked:after {background-color: var(--red); color: white;}
input[value="Fin de semaine"]::after {background-color: white; display: block; position: absolute; content: "\2713"; height: 20px; width: 20px; left: 0; color: transparent; font-size: 18px; text-align: center; line-height: 20px; visibility: visible; border: 2px solid var(--red);}
input[value="Fin de semaine"]:checked:after {background-color: var(--red); color: white;}

input[type="radio"] {position: absolute; left: 0;}

.wpcf7-list-item {margin: 5px 0 5px 35px; width: 80%;}
.wpcf7-list-item input[type="checkbox"] {position: absolute; left: 0;}*/

/*Footer*/

#footer {}
#footer hr {display: inline-block; width: 20px; height: 2.5px; margin-top: 15px;}
#footer .footer-content {padding: 60px 0 100px; display: flex;}
#footer .footer-content .footer-block {padding-right: 60px;}
#footer .footer-content .footer-block:last-of-type {padding-right: 0px;}
#footer .footer-content .logo {display: inline-block; width: 22%; vertical-align: middle;}
#footer .footer-content .icons img {width: 30px; margin-right: 10px;}
#footer .footer-content .tabs {}
#footer .footer-content .nav-footer {display: inline-block; vertical-align: top; padding-right: 60px;}
#footer .footer-content .nav-footer:last-of-type {padding-right: 0;}
#footer .footer-content .nav-footer .text {margin: 10px 0;}
#footer .footer-content .nav-footer .text a {transition: ease .3s;}
#footer .footer-content .nav-footer .text a:hover {color: #e90029;}
#footer .copyright-div {padding: 10px 0;}

/*Medias querries*/

@media (max-width:1450px) {

    #projects-slideshow {background-position: 4vw 50px;}

    #manual-slides .content-container {width: 75%;}
    #manual-slides .content-container .content-cell {width: 50%;}

}

@media (max-width:1200px) {
    #projects-slideshow {background-position: 0 50px;}
}

@media (max-width:1100px) {

    #header .menu .tabs {padding: 10px 0 10px 14px;}
    #pi-header .menu .tabs {padding: 10px 0 10px 14px;}

    #content-block .footer-content .tree-block-content .text {padding: 0 0 40px 0;}

    .padding {padding:1% 15px}

    #manual-slides .arrow-left {left: 5px;}
    #manual-slides .arrow-right {right: 5px;}

    #realisations .wrapper {width: 100%;}
}

@media (max-width:1000px) {

    #content-block .footer-content .two-block-content img {height:400px;}
    #content-block .footer-content .tree-block-content {width: 50%;}

    #content-container {padding: 0 0 20px 0;}
    #content-container .content-wrapper .content-container {padding-right: 20px;}

    #manual-slides .content-container {width: 425px;}
    #manual-slides .arrow-left {left: 50px;}
    #manual-slides .arrow-right {right: 50px;}

    #projects-slideshow {padding: 40px 0 0; background-image: none;}
    #projects-slideshow .text-content {width: 100%; padding-right: 0px;}

    #realisations .grid-container {display: block;}
    #realisations .grid-container .grid-cell {display: inline-block; width: 50%;}

    #news .news-container {width: 50%; padding: 10px;}
}

@media (max-width:950px) {

    #section .content-cell {width: 100%; padding:0px}
}

@media (max-width:900px) {

    #header .menu .tabs {display: none;}
    #header .sub-menu {display: none;}
    #header .btn-contact {display: block;}
    #header .btn-contact-move {display: block;}
    
    #pi-header .menu .tabs {display: none;}
    #pi-header .sub-menu {display: none;}
    #pi-header .btn-contact {display: block;}
    #pi-header .btn-contact-move {display: block;}

    #a-propos {padding: 120px 0 60px 0;}

    #full-width-content {height: calc(45vw + 550px);}
    #full-width-content .content-wrapper {height:auto; display:block}
    #full-width-content .block-content {display: block; width: 100%}
    #full-width-content .img-content {min-height:450px; height:60vw}
    #full-width-content .text-content {display:block; padding: 45px 80px}

    #form .form-cell {width: 100%;}

    .burger-menu-container {display: block;}
    .bg-menu-opened {left: 0;}

    #realisations .close-btn {right: 20px;}
    #realisations .img-display {width: 70%; left: 15%;}
}

@media (max-width:800px) {

    #content-block .wrapper {width: 100%;}
    #content-block .footer-content .two-block-content {width: 100%;}
    #content-block .footer-content .two-block-content .text-content .flex-container {justify-content: center;}

    #collections-block .collection-wrapper .collection-header .text {width: 100%;}
    
    #full-width-content {padding: 0;}

    #section .content-cell .footer-content .img-icon {margin-top: -30px;}

    .text-wrapper {padding: 40px 10px;}

    #footer .footer-content {justify-content: center; padding: 40px 0;}
    #footer .footer-content .footer-block {display: none;}
    #footer .footer-content .footer-block:first-of-type {display: flex; align-items: center; padding-right: 0;}
    #footer .footer-content .footer-block:first-of-type .text {display: none;}
    #footer .footer-content .footer-block:first-of-type .footer-logo {border-right: 1px solid #535659; padding-right: 20px; vertical-align: middle; width: 150px;}
    #footer .footer-content .footer-block:first-of-type .icons {display: inline-block; padding-left: 10px; vertical-align: middle;}
}

@media (max-width:750px) {

    #form .textbox-wrapper {width: 100%;}

    #footer .footer-content .tabs {display: none;}
    #footer .footer-content .logo {width: 50%;}
    #footer .footer-content .icons {width: 50%;}
}

@media (max-width:700px) {

    #pi-intro {height: auto; min-height: unset;}
    #pi-intro .fixed-hero {height: auto; min-height: unset;}

    #content-block .header-content .text {width: auto;}

    #manual-slides .arrow-left {left: 5px;}
    #manual-slides .arrow-right {right: 5px;}

    #realisations .grid-container .grid-cell {width: 100%;}
    #realisations .img-display {height: 50%;}
    #filtres {padding: 130px 0 40px 0;}
    #filtres .filters-container .filter-cell {width: 50%;}
    #filtres .filters-container .border-sec::after {height: 0;}
}

@media (max-width:600px) {

    #content-block .footer-content .tree-block-content {width: 100%;}
    #content-block .footer-content .tree-block-content img {height: auto;}

    #manual-slides .arrow-left {left: -5px; top: 55%;}
    #manual-slides .arrow-right {right: -5px; top: 55%;}
    #manual-slides .arrow-left .small-arrow {display: block;}
    #manual-slides .arrow-right .small-arrow {display: block;}
    #manual-slides .arrow-left .big-arrow {display: none;}
    #manual-slides .arrow-right .big-arrow {display: none;}
    #manual-slides .content-container .content-cell {width: 100%;}
    #manual-slides .content-container {width: 90%;}

    #a-propos {padding: 70px 0 0 0;}
    #a-propos .wrapper-img {width: 100%;}

    #form .wrapper .subtitle {text-align: left;}
    #form .wrapper hr {display: inline-block;}
    #form .wrapper {text-align: left;}
    textarea {width: 100%; margin: 20px 0;}
    input[type="text"] {width: 98%; margin: 1%;}
    .left .input50 {width: 48%;}
    #contactform select {width: 98%;}

    #realisations .img-display {height: 30%;}

    #slider .slide img {height:70vh;}
    #slideshow-controls {top: 50px;}

    #news .news-container {width: 100%; padding: 10px 0;}
}

@media (max-width:500px) {

    #career-widget {padding: 30px 0;}
    #career-widget .two-block-container {display: block;}
    #career-widget .two-block-container .cta {margin-top: 30px;}

    #full-width-content .text-content {padding: 30px 30px 50px 30px;}
}