/* Custom classes */
.wpcf7-response-output {font-size:12px}
.bg-bois {position: relative; overflow: visible;}
.bg-bois::before {content: ''; position: fixed; z-index: -1; opacity: 0.3; top: 0; bottom: -500px; right: 0; left: 0; filter: grayscale(1); background-image: url(/wp-content/themes/pubinteractive/img/bois-rond.jpg); background-size: cover; background-position: center;}

.padding {padding: min(1.5vw,15px) 0}
.pi-video-container {margin-top:-110px}

#gammes {margin-top:-10vw}

@media (max-width:1250px) {
  #gammes {margin-top:5vw}
}
@media (max-width:1024px) {
.pi-video-container {height:60vh}
.pi-video-container .pi-video-wrapper .pi-video {height:60vh}
.pi-video-container .pi-video-wrapper {height:60vh; transform:scale(1.5)}
}

@media (max-width:600px) {
.pi-video-container .pi-video-wrapper {height:60vh; transform:scale(1.5) translateX(-35vw);}
}

/* -------------- */
.video-header {width:100%; height:170px; top:0; left:0; z-index:1; position:absolute; background:#181818; overflow:hidden}

#navigation {padding: 40px 0; /*background-color: #181818*/ position:relative; z-index:1000; border-bottom:1px solid #757575; top:0}
#navigation::after {content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; /*background-color: black; opacity: 0.2;*/}
#navigation header {position: relative; z-index: 1;}
#navigation .top-nav-mobile {display: none; background-color: #212121; padding: 10px 0; position: relative; z-index: 10000;}
#navigation .top-nav-mobile .pi-wrapper {display: flex; justify-content: end; align-items: center;}
#navigation .navigation-wrapper {display: flex; justify-content: space-between; align-items: center;}
#navigation .navigation-wrapper .header-logo {width: 200px;}
#navigation .navigation-wrapper .nav-container {}
#navigation .navigation-wrapper .nav-container .top-nav {display: flex; align-items: center; justify-content: flex-end; margin-bottom: 25px;}
#navigation .navigation-wrapper .nav-container .main-nav {display: flex; align-items: center; justify-content: flex-end; position: relative;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs {margin-right: 30px;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs-link:hover {color: #ffc671;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs-link span {color: #ffc671;}
#navigation .navigation-wrapper .nav-container .main-nav .sub-menu-tabs {cursor: pointer;}
#navigation .navigation-wrapper .nav-container .main-nav .sub-menu-tabs:hover {color: #ffc671;}
#navigation .navigation-wrapper .nav-container .main-nav .sub-menu-tabs:focus {color: #ffc671;}
#navigation .navigation-wrapper .nav-container .main-nav .sub-menu-tabs:focus ~ .sub-menu-wrapper {pointer-events: initial; max-height: 500px; opacity: 1;}
#navigation .navigation-wrapper .nav-container .main-nav .sub-menu-tabs:focus ~ .sub-menu-wrapper .sub-menu-link {transform: translate(0); opacity: 1;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs .sub-menu-wrapper {pointer-events: none; max-height: 0; opacity: 0.001; transition: ease 1s; position: absolute; background-color: #000000db; line-height: 30px;padding: 20px 40px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; right: 0; top: 79px; width: auto; z-index: 1; border-bottom: 1px solid #757575; border-left: 1px solid #757575; border-right: 1px solid #757575;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs .sub-menu-wrapper .burger-close-btn {position: absolute; top: 20px; right: 20px; width: 15px; cursor: pointer;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs .sub-menu-wrapper:hover {pointer-events: initial;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs .sub-menu-wrapper:hover .sub-menu-link {transform: translate(0); opacity: 1;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs .sub-menu-wrapper .sub-menu-link {opacity: 0.0001; transform: translate(60px); transition: ease 0.8s; width: 49%; margin: 10px 0; display: inline-block; vertical-align: top;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs .sub-menu-wrapper .sub-menu-link:first-of-type {transition: ease 0.6s;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs .sub-menu-wrapper .sub-menu-link:last-of-type {transition: ease 1s;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs .sub-menu-wrapper .sub-menu-link a {transition: .3s;}
#navigation .navigation-wrapper .nav-container .main-nav .tabs .sub-menu-wrapper .sub-menu-link:hover a {color: #ffc671;}
#navigation .navigation-wrapper .nav-container .main-nav .bg-menu-cta {cursor: pointer;}

#navigation .navigation-wrapper .nav-container .main-nav .plus-menu-wrapper {position: relative; cursor: pointer; margin-left: 30px; display: none; align-items: center;}
#navigation .navigation-wrapper .nav-container .main-nav .plus-submenu {width: auto; display: inline-block; padding-right: 20px;}
#navigation .navigation-wrapper .nav-container .main-nav .plus-submenu .tabs {transition: ease .8s; width: 50%; margin: 10px 0; display: inline-block; vertical-align: top;}
#navigation .navigation-wrapper .nav-container .main-nav .plus-submenu .tabs:first-of-type {transition: ease .6s;}
#navigation .navigation-wrapper .nav-container .main-nav .plus-submenu .tabs:last-of-type {transition: ease 1s;}
#navigation .navigation-wrapper .nav-container .main-nav .plus-submenu .tabs a:hover {color: #ffc671;}
#navigation .navigation-wrapper .nav-container .main-nav .plus-submenu img {transition: ease .3s;}
#navigation .navigation-wrapper .nav-container .main-nav .plus-menu-wrapper ~ .plus-submenu {position: absolute; padding: 20px 40px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; right: 0; top: 79px; max-height: 0.01px; pointer-events: none; opacity: 0.001; transition: ease .5s; background-color: #000000db; z-index: 10;}
#navigation .navigation-wrapper .nav-container .main-nav .not-active ~ .plus-submenu .tabs {transform: translate(60px);}
#navigation .navigation-wrapper .nav-container .main-nav .active ~ .plus-submenu .tabs {transform: translate(0px);}
#navigation .navigation-wrapper .nav-container .main-nav .active ~ .plus-submenu {max-height: 500px; opacity: 1; pointer-events: initial; border-bottom: 1px solid #757575; border-left: 1px solid #757575; border-right: 1px solid #757575;;}
#navigation .navigation-wrapper .nav-container .main-nav .plus-menu-wrapper ~ .plus-submenu .burger-close-btn {position: absolute; top: 20px; right: 20px; width: 15px; cursor: pointer;}

.menu-option .pi-wrapper {width: 70%;}
.menu-option .cta {text-align: center; width: 100%; padding: 10px 30px;}
.menu-option .socials-wrapper {margin: 30px 0;}
.menu-option .socials-wrapper .socials {width: 25px; margin: 0 10px 0 0; vertical-align: middle;}
.menu-option .pi-wrapper .burger-close-btn {position: absolute; top: 120px; right: 40px; width: 20px; cursor: pointer;}
.menu-option .pi-wrapper .tabs {}
.menu-option .pi-wrapper .tabs .tabs-link {transition: ease .3s; cursor: pointer;}
.menu-option .pi-wrapper .tabs .tabs-link span {color: #ffc671; cursor: pointer; display: inline-block; vertical-align: middle; width: 25px; padding-bottom: 2px; text-align: center;}
.menu-option .pi-wrapper .tabs .tabs-link:hover {color: #ffc671;}
.menu-option .pi-wrapper .tabs .tabs-link a:hover {color: #ffc671;}
.menu-option .pi-wrapper .tabs .sub-menu-tabs {cursor: pointer;}
.menu-option .pi-wrapper .tabs .sub-menu-wrapper {max-height: 500px; transition: ease .3s;}
.menu-option .pi-wrapper .tabs .submenu-closed {max-height: 0.01px; overflow: hidden; transition: ease .3s;}
.menu-option .pi-wrapper .tabs .sub-menu-wrapper .sub-menu-wrapper-link {color: #ffc671; margin-left: 20px; font-size: 14px; padding: 5px 0; transform: translate(40px); opacity: 0.001;}
.menu-option .pi-wrapper .tabs .sub-menu-wrapper .link-show {transform: translate(0); opacity: 1; transition: ease .8s;}
.menu-option .pi-wrapper .tabs .sub-menu-wrapper .link-show:first-of-type {transition: ease .6s;}
.menu-option .pi-wrapper .tabs .sub-menu-wrapper .link-show:last-of-type {transition: ease 1s;}
.menu-option .pi-wrapper .tabs .sub-menu-wrapper .sub-menu-wrapper-link a {transition: ease .3s;}
.menu-option .pi-wrapper .tabs .sub-menu-wrapper .sub-menu-wrapper-link:hover a {color: white;}

#gammes {}
#gammes .two-block-wrapper {direction: rtl;}
#gammes .two-block-wrapper .two-block {direction: ltr; display: inline-block; vertical-align: bottom; width: 55%; position: relative;}
#gammes .two-block-wrapper .two-block:last-of-type {margin-bottom: 80px;}
#gammes .two-block-wrapper .two-block .content-container {transition: ease .3s; position: absolute; width: 110%; bottom: 0; opacity: 0; z-index: 10; border-top-left-radius: 30px; border-bottom-left-radius: 30px; padding: 20px 130px 20px 60px; background-color: #ffc671;}
#gammes .two-block-wrapper .two-block .content-container:first-of-type {position: relative; bottom: 0; opacity: 1; z-index: 20;}
#gammes .two-block-wrapper .two-block .content-container:last-of-type {position: absolute; bottom: 0; opacity: 0; z-index: 10;}
#gammes .two-block-wrapper .two-block .content-container .title {margin: 0 0 10px 0;}
#gammes .two-block-wrapper .two-block .content-container .cta-container {display: flex; align-items: center; margin: 30px 0;}
#gammes .two-block-wrapper .two-block .content-container .cta-container .cta {padding: 5px 40px; margin-right: 15px; vertical-align: middle; font-size: 16px; cursor: pointer; color: #ffc671; display: inline-block; background-color: #333333; border: 1px solid #333333; transition: ease-in-out .2s; border-radius: 100px;}
#gammes .two-block-wrapper .two-block .content-container .cta-container .cta:hover {background-color: #ffc671; color: black;}
#gammes .two-block-wrapper .two-block .content-container .arrow-container {display: flex; align-items: center; margin: 40px 0 10px 0;}
#gammes .two-block-wrapper .two-block .content-container .arrow-container img {opacity: 0.8; cursor: pointer;}
#gammes .two-block-wrapper .two-block .content-container .arrow-container img:first-of-type {margin-right: 10px;}
#gammes .two-block-wrapper .two-block .content-container .arrow-container img:last-of-type {margin-left: 10px;}
#gammes .two-block-wrapper .two-block .content-container .arrow-container .tracker {margin: 0 5px; width: 10px; height: 10px; border-radius: 10px;}
#gammes .two-block-wrapper .two-block:first-of-type {height: 40vw; width: 45%; z-index: 100; transform: translate(-50px);}
#gammes .two-block-wrapper .two-block:first-of-type .img-container {transition: ease .1s; position: absolute; bottom: 0; height: 50vw; width: 40vw; max-height: 750px; max-width: 550px; transform: translate(50px) scale(0.92); z-index: 15;}
#gammes .two-block-wrapper .two-block:first-of-type .img-container:first-of-type {z-index: 20; transform: none;}
#gammes .two-block-wrapper .two-block:first-of-type .img-container:last-of-type {transform: translate(100px) scale(0.84); z-index: 10;}
#gammes .two-block-wrapper .two-block:first-of-type .img-container img {transition: ease .3s; object-fit: cover; width: 100%; height: 100%; border-radius: 30px;}
#gammes .two-block-wrapper .two-block:first-of-type .swiped-left img {opacity: 0.001; transform: translate(100px, 0);}
#gammes .two-block-wrapper .two-block:first-of-type .swiped-right img {opacity: 0.001; transform: translate(-100px, 0);}

.pi-container-img-text .pi-img-text .arrow-container {display: flex; align-items: center; margin: 20px 0 10px 0; justify-content: center;}
.pi-container-img-text .pi-img-text .arrow-container img {opacity: 0.8; cursor: pointer; width: 10px;}
.pi-container-img-text .pi-img-text .arrow-container img:first-of-type {margin-right: 10px;}
.pi-container-img-text .pi-img-text .arrow-container img:last-of-type {margin-left: 10px;}
.pi-container-img-text .pi-img-text .arrow-container .tracker {margin: 0 5px; width: 10px; height: 10px; border-radius: 10px; opacity: 0.4; background-color: #ffc671;}
.pi-container-img-text .pi-img-text .arrow-container .bg-black {opacity: 1;}
.pi-container-img-text .pi-img-text:last-of-type .img-container {transition: ease .1s; position: absolute; top: 0; height: 25vw; width: 40vw; max-height: 400px; max-width: 550px; transform: translate(50px) scale(0.92); z-index: 15;}
.pi-container-img-text .pi-img-text:last-of-type .img-container:first-of-type {z-index: 20; transform: none; position: relative; pointer-events: all;}
.pi-container-img-text .pi-img-text:last-of-type .img-container:last-of-type {transform: translate(100px) scale(0.84); z-index: 10;}
.pi-container-img-text .pi-img-text:last-of-type .img-container img {transition: ease .3s; object-fit: cover; width: 100%; height: 100%; border-radius: 30px;}
.pi-container-img-text .pi-img-text:last-of-type .swiped-left img {opacity: 0.001; transform: translate(100px, 0);}
.pi-container-img-text .pi-img-text:last-of-type .swiped-right img {opacity: 0.001; transform: translate(-100px, 0);}

.bubble-text {max-width: 1600px; width: 95%; margin: 0 auto; padding: 60px; border-radius: 20px; background-color: #212121; margin-top: -80px; margin-bottom: 40px; position: relative; z-index: 100;}
.title {margin-bottom: 20px; font-weight: bold;}
/*.bubble-text .pi-container-img-text {max-width: 1000px;}*/
.subtitle {margin-bottom: 30px;}
.pi-question-container .subtitle {margin-bottom: 0px;}

.full-width-hero {position: relative; padding: 120px 0; background-size: cover; background-position: center;}
.full-width-hero::after {content: ''; position: relative; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.full-width-hero  .pi-wrapper {position: relative; z-index: 5;}

.real-cta-wrapper {padding: 40px 0;}
.real-cta-wrapper .pi-wrapper {}
.real-cta-wrapper .cta-container {display: flex; flex-wrap: wrap; align-items: center; width: 100%;}
.real-cta-wrapper .cta-real {cursor: pointer; flex-grow: 1; height: 100%; padding: 20px; text-align: center; color: #ffc671; background-color: #212121; transition: ease .3s;}
.real-cta-wrapper .cta-real:hover {background-color: #ffc671; color: #212121;}
.real-cta-wrapper .selected {color: #212121; background-color: #ffc671;}
.real-wrapper {display: none;}

#article {padding: 60px 0;}
#article .main-content {display: inline-block; width: 72%; vertical-align: top;}
#article .main-content .content-container .img-wrapper {position: relative; width: 100%; height: 40vw; min-height: 300px; max-height: 600px; margin-bottom: 40px;}
#article .main-content .content-container .img-wrapper img {object-fit: cover; height: 100%; width: 100%; position: relative;}
#article .main-content .content-container hr {border: 0.5px solid #707070; margin: 20px 0;}
#article .main-content .content-container .title {margin: 0 20px; position: relative;}
#article .main-content .content-container .text {margin: 20px;}
#article .main-content .commands {display: flex; justify-content: space-between; align-items: center;}
#article .main-content .commands .command-wrapper {display: flex; align-items: center; transition: ease .2s;}
#article .main-content .commands .command-wrapper .text {transition: ease .2s;}
#article .main-content .commands .command-wrapper:hover .text {color: #ffc671;}
#article .main-content .commands .command-wrapper img {margin-right: 20px;}

#article .side-content {display: inline-block; width: 23%; vertical-align: top; margin-left: 5%;}
#article .side-content .side-content-blogue-container {width: 100%; margin: 0 0 40px; color: #a0a0a0; border: 1px solid #a0a0a0;}
#article .side-content .side-content-blogue-container .img-container {height: 15vw; margin-bottom: 20px; width: 100%; min-height: 200px;}
#article .side-content .side-content-blogue-container .img-container img {width: 100%; height: 100%; object-fit: cover;}
#article .side-content .side-content-blogue-container .content-container {padding: 20px;}
#article .side-content .side-content-blogue-container .content-container .subtitle {position: relative; margin-bottom: 10px; color: white; font-weight: normal;}
#article .side-content .side-content-blogue-container .content-container .article-title {font-size: 22px; color: #a0a0a0; font-weight: 200;}
#article .side-content .side-content-blogue-container .content-container .text {margin-bottom: 20px;}
#article .side-content .side-content-blogue-container .content-container .cta {margin-top: 40px; padding: 8px 40px; text-transform: uppercase; border: 1px solid #a0a0a0; vertical-align: middle; font-size: 14px; cursor: pointer; font-weight: bold; color: #232220; display: inline-block; background-color: #a0a0a0; transition: ease-in-out .2s;}
#article .side-content .side-content-blogue-container .content-container .cta:hover {background-color: #ffc671; border: 1px solid #ffc671;}

.services {position: relative; z-index: 100;}
.services .tree-bloc-wrapper {display: flex; overflow: hidden; border-radius: 30px;}
.services .tree-bloc-wrapper .tree-bloc {position: relative; width: 33.33%; background-color: transparent; padding: 40px;}
.services .tree-bloc-wrapper .tree-bloc::before {transition: ease .3s; content: ''; position: absolute; z-index: 21; top: 50%; right: -5%; transform: translateY(-50%); width: 2500px; height: 2500px; border-radius: 10000px; background-color: #272727;}
.services .tree-bloc-wrapper .tree-bloc:first-of-type::before {background-color: #212121; z-index: 22;}
.services .tree-bloc-wrapper .tree-bloc:last-of-type::before {background-color: #353535; z-index: 20; right: -200px;}
.services .tree-bloc-wrapper .tree-bloc:first-of-type {}
.services .tree-bloc-wrapper .tree-bloc:last-of-type {}
.services .tree-bloc-wrapper .tree-bloc .tree-bloc-container {height: 100%; position: relative; z-index: 30; display: flex; flex-direction: column; justify-content: space-between; width: 100%;}
.services .tree-bloc-wrapper .tree-bloc .title {margin-bottom: 20px;}
.services .tree-bloc-wrapper .tree-bloc .subtitle {}
.services .tree-bloc-wrapper .tree-bloc .text {margin: 10px 0;}
.services .tree-bloc-wrapper .tree-bloc .img-wrapper {border: 1px solid #ffc671; width: 100%; height: 15vw; max-height: 325px; margin-top: 30px;}
.services .tree-bloc-wrapper .tree-bloc .img-wrapper img {object-fit: cover; width: 100%; height: 100%;}

.prevoir {padding-bottom: 80px;}
.prevoir .tree-bloc-wrapper {display: flex; overflow: hidden; border-radius: 30px;}
.prevoir .tree-bloc-wrapper .tree-bloc {position: relative; width: 33.33%; background-color: transparent; padding: 40px;}
.prevoir .tree-bloc-wrapper .tree-bloc::before {content: ''; position: absolute; z-index: 21; top: 50%; right: -5%; transform: translateY(-50%); width: 2500px; height: 2500px; border-radius: 10000px; background-color: #272727;}
.prevoir .tree-bloc-wrapper .tree-bloc:first-of-type::before {background-color: #212121; z-index: 22;}
.prevoir .tree-bloc-wrapper .tree-bloc:last-of-type::before {background-color: #353535; z-index: 20; right: -200px;}
.prevoir .tree-bloc-wrapper .tree-bloc:first-of-type {}
.prevoir .tree-bloc-wrapper .tree-bloc:last-of-type {}
.prevoir .tree-bloc-wrapper .tree-bloc .tree-bloc-container {height: 100%; position: relative; z-index: 30; display: flex; flex-direction: column; justify-content: space-between; width: 100%;}
.prevoir .tree-bloc-wrapper .tree-bloc .title {margin-bottom: 20px;}
.prevoir .tree-bloc-wrapper .tree-bloc .subtitle {}
.prevoir .tree-bloc-wrapper .tree-bloc .text {margin: 10px 0;}
.prevoir .tree-bloc-wrapper .tree-bloc .a {transition: ease .3s;}
.prevoir .tree-bloc-wrapper .tree-bloc .a:hover {opacity: 0.4;}
.prevoir .tree-bloc-wrapper .tree-bloc .img-wrapper {border: 1px solid #ffc671; width: 100%; height: 15vw; margin-top: 30px;}
.prevoir .tree-bloc-wrapper .tree-bloc .img-wrapper img {object-fit: cover; width: 100%; height: 100%;}

.pi-cpf-section-wrapper .img-text-merge {overflow: hidden;}
.pi-cpf-section-wrapper .img-text-merge .pi-container-img-text {position: relative;}
.pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text {width: 100%; padding: 0;}
.pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text:first-of-type {position: absolute; height: 100%; display: flex; align-items: center;}
.pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text .title {position: relative; color: #e3dacb; max-width: 1400px; width: 90%; margin: 0 auto; font-size: 42px;}
.pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text .title::before {content: ''; position: absolute; z-index: 19; top: 50%; right: 45%; transform: translateY(-50%); width: 2500px; height: 2500px; border-radius: 10000px; background-color: #00000065;}
.pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text .title div {position: relative; z-index: 30; max-width: 52%;}
.pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text .subtitle div {max-width: 52%;}
.pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text .text div {max-width: 52%;}

#pi-form {background-color: #232220; border-top: 1px solid #ffc671;}
#pi-form .form-wrapper {width: 100%; padding: 100px 0;}
#pi-form .form-wrapper .two-bloc {display: inline-block; width: 50%; vertical-align: top;}
#pi-form .form-wrapper .two-bloc:first-of-type {padding: 0 40px 0 0;}
#pi-form .form-wrapper .two-bloc:last-of-type {padding: 0 0 0 40px;}
#pi-form .form-wrapper .two-bloc p {margin: 0;}
#pi-form .form-wrapper .two-bloc .margin-top {margin-top: 30px;}
.pi-input {background-color: transparent; padding: 15px; border: 1px solid #a0a0a0; color: #a0a0a0; width: 98%; margin: 1%; font-family: "Readex Pro", sans-serif;}
.pi-input-50 {display: inline-block; width: 48%; margin: 1%; background-color: transparent; padding: 15px; border: 1px solid #a0a0a0; color: #a0a0a0; font-family: "Readex Pro", sans-serif;}
.pi-input:focus {border: 1px solid #ffc671; outline: solid 1px #ffc671;}
.pi-textarea {background-color: transparent; padding: 10px; border: 1px solid #a0a0a0; color: #a0a0a0; width: 100%; margin: 40px 0; font-family: "Readex Pro", sans-serif;}
.pi-textarea:focus {border: 1px solid #ffc671; outline: solid 1px #ffc671;}
.wpcf7-list-item {margin: 15px 0; display: block;}
#article .wpcf7-list-item {margin: 0; display: inline-block;}
.custom-wrapper-100 {padding: 20px 0; margin: 0 1%; display: block;}
.form-wrapper .small-text {border-top: 1px solid #a0a0a0;}
.wpcf7-not-valid-tip {display: none;}
.form-wrapper .cta {margin: 20px 1%;}
#pi-form .form-wrapper .two-bloc label {font-size: 14px; color: white; font-weight: 200; vertical-align: middle; cursor: pointer;}
#pi-form .form-wrapper .two-bloc input[type="checkbox"] {appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 15px; height: 15px; border: 1px solid #ffc671; background-color: transparent; position: relative; cursor: pointer; vertical-align: middle;}
#pi-form .form-wrapper .two-bloc input[type="checkbox"]:checked::after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #ffc671;}
#pi-form .form-wrapper .cta {margin: 0; padding: 10px 100px;}
.wpcf7 form.invalid .wpcf7-response-output {border-color: #ffc671; margin: 40px 0; display: inline-block; font-size: 14px; padding: 20px; color: #a0a0a0;}

#main-cta {position: relative; z-index: 1000;}
#main-cta .two-bloc-wrapper {display: flex; overflow: hidden; border-radius: 30px;}
#main-cta .two-bloc-wrapper .two-bloc {position: relative; width: 50%; background-color: transparent; padding: 40px;}
#main-cta .two-bloc-wrapper .two-bloc::before {content: ''; position: absolute; z-index: 21; top: 50%; right: 0; transform: translateY(-50%); width: 1000px; height: 1000px; border-radius: 10000px; background-color: #272727;}
#main-cta .two-bloc-wrapper .two-bloc:last-of-type::before {background-color: #ffc671; z-index: 20; right: -100px;}
#main-cta .two-bloc-wrapper .two-bloc .two-bloc-container {height: 100%; position: relative; z-index: 30; display: flex; justify-content: space-between; width: 100%; align-items: center;}
#main-cta .two-bloc-wrapper .two-bloc .two-bloc-container img {opacity: 0.3; transition: ease .3s; border: 1px solid #898785; border-radius: 50px; padding: 7px; width: 40px; height: 40px;}
#main-cta .two-bloc-wrapper .two-bloc .two-bloc-container:hover img {opacity: 1;}
#main-cta .two-bloc-wrapper .two-bloc .two-bloc-container .title {margin-bottom: 30px;}
#main-cta .two-bloc-wrapper .two-bloc .two-bloc-container .text {transition: ease .3s; display: flex; align-items: center; justify-content: space-between;}

#footer {background-color: #212121; position: relative;}
#footer .footer-menu-wrapper {padding: 60px 0;}
#footer .footer-menu-wrapper .sub-menu-container {display: inline-block; width: 20%; padding-right: 20px; vertical-align: top;}
#footer .footer-menu-wrapper .sub-menu-container .tabs {font-size: 20px;}
#footer .footer-menu-wrapper .sub-menu-container .sub-menu-wrapper {margin-top: 30px;}
#footer .footer-menu-wrapper .sub-menu-container .sub-menu-wrapper .sub-menu-wrapper-link {margin: 10px 0;}
#footer .footer-menu-wrapper .sub-menu-container .sub-menu-wrapper .sub-menu-wrapper-link:hover {color: #ffc671;}
#footer .copyright {color: #6f6d6c; padding: 20px 0; border-top: 1px solid #6f6d6c; display: flex; justify-content: space-between; align-items: center;}
#footer .copyright .socials {}
#footer .copyright .socials img {width: 25px; margin-left: 10px;}

/* Realisation */
#popup {position:fixed; top:0; bottom:0; left: 0; width:100%; height:100vh; display:table; background:rgba(0,0,0,0.9); z-index:2000}
#popup .cell-wrapper{display:table-cell; vertical-align:middle; text-align:center}
#popup .cell-wrapper .container {display:inline-table}
#popup .cell-wrapper .container .img-wrapper {display:block; background:#FFF; vertical-align:top; padding:15px; position:relative; overflow:hidden}
#popup .cell-wrapper .container .img-wrapper img {max-width:100%; max-height:80vh}
#popup .cell-wrapper .container .content-wrapper {background:#FFF; display:block; vertical-align:top; padding:15px; text-align:right}
#popup .cell-wrapper .container .content-wrapper .btn-wrapper {display:inline-block; width:40px; height:40px; border:1px solid #000; text-align:center; margin-left:3px; cursor:pointer}
#popup .cell-wrapper .container .content-wrapper .btn-wrapper img {width:10px; vertical-align:-32px}

@media(max-width:1250px) {
  #navigation .navigation-wrapper .header-logo {width: 150px; margin-top:15px}
  #navigation .navigation-wrapper .nav-container .main-nav .tabs {margin-right: 20px;}
}
@media (max-width:1000px) {
    #navigation .navigation-wrapper .header-logo {margin-top:0px}
    #popup .cell-wrapper .container {width:95%;}
    #popup .cell-wrapper .container .content-wrapper {padding:10px}
    #popup .cell-wrapper .container .img-wrapper {padding:10px}
    #popup .cell-wrapper .container .img-wrapper img {max-width:100%; max-height:70vh}

    .video-header {height:160px}
    #navigation {border-bottom:0px solid transparent}
    .parallax-logo {display:none}
}
/* --- */

@media (max-width:1100px) {
    #navigation .navigation-wrapper .nav-container .main-nav .tabs {margin-right: 10px;}
    #navigation .navigation-wrapper .nav-container .main-nav .plus-menu-wrapper {margin-left: 20px;}

    #gammes .pi-wrapper {width: auto;}
    #gammes .two-block-wrapper .two-block {width: 100%;}
    #gammes .two-block-wrapper .two-block:first-of-type {transform: translate(-60px);}
    #gammes .two-block-wrapper .two-block .content-container {width: 100%;}
    #gammes .two-block-wrapper .two-block:last-of-type {background-color: #ffc671; padding-top: 80px; margin-top: -80px; margin-bottom: 0px;}
    #gammes .two-block-wrapper .two-block:first-of-type {width:100%; height:40vw}
    #gammes .two-block-wrapper .two-block:first-of-type .img-container {width: 90%; left: 10%; max-width:none}
}

@media (max-width:1000px) {
    #navigation .navigation-wrapper .nav-container .main-nav .plus-menu-wrapper {display:flex}
    #navigation {padding: 0px;}
    #navigation .top-nav-mobile {display: block;}
    #navigation .navigation-wrapper {padding: 20px 0;}
    #navigation .navigation-wrapper .nav-container .top-nav {display: none;}
    #navigation .navigation-wrapper .nav-container .main-nav .tabs {display: none;}
    #navigation .navigation-wrapper .nav-container .main-nav .plus-submenu {display: none;}
    #navigation .navigation-wrapper .nav-container .main-nav .bg-menu-cta {display: none;}

    #article .main-content {width: 100%;}
    #article .side-content {width: 100%; margin: 80px 0 60px;}
    #article .side-content {width: 100%; margin: 80px 0 60px;}
    #article .main-content .content-container .img-wrapper {margin-top: 80px;}
    #article .side-content .side-content-blogue-container {width: 46%; margin: 10px 1%; display: inline-block; vertical-align: top;}
}

@media (max-width:900px) {
    .services .tree-bloc-wrapper {display: block;}
    .services .tree-bloc-wrapper .tree-bloc {width: 100%;}
    .services .tree-bloc-wrapper .tree-bloc::before {bottom: -30px; top: unset; width: 3000px; height: 3000px; left: 50%; transform: translateX(-50%);}
    .services .tree-bloc-wrapper .tree-bloc:last-of-type::before {bottom: -60%;}
    .services .tree-bloc-wrapper .tree-bloc .img-wrapper {height: 45vw;}

    .prevoir .tree-bloc-wrapper {display: block;}
    .prevoir .tree-bloc-wrapper .tree-bloc {width: 100%;}
    .prevoir .tree-bloc-wrapper .tree-bloc::before {bottom: -30px; top: unset; left: 50%; transform: translateX(-50%); width: 3000px; height: 3000px;}
    .prevoir .tree-bloc-wrapper .tree-bloc:last-of-type::before {bottom: -60%;}
    .prevoir .tree-bloc-wrapper .tree-bloc .img-wrapper {height: 45vw;}
}

@media (max-width:800px) {
    .bg-bois {overflow: hidden;}

    #navigation .parallax-logo {top: 0; right: -10%; width: 450px;}

    .services .tree-bloc-wrapper .tree-bloc::before {right: -1200px;}

    /* .prevoir {display: none;} */
    .prevoir .tree-bloc-wrapper .tree-bloc {padding: 30px;}

    .pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text .title::before {right: -10%;}

    .pi-container-img-text .pi-img-text:last-of-type .img-container {width: 95%; max-width: none; max-height: none; height: 45vw; transform: translate(7%) scale(0.92);}
    .pi-container-img-text .pi-img-text:last-of-type .img-container:last-of-type {transform: translate(14%) scale(0.84);}
    .pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text .title div {max-width: 100%;}
    .pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text .subtitle div {max-width: 100%;}
    .pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text .text div {max-width: 100%;}

    .bubble-text {width: 100%; border-radius: 0; padding: 60px 60px 0 60px;}
    .pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text .title {font-size: 36px;}

    #pi-form .form-wrapper .two-bloc {width: 100%;}
    #pi-form .form-wrapper .two-bloc:first-of-type {padding: 0;}
    #pi-form .form-wrapper .two-bloc:last-of-type {padding: 0 0 20px 0;}

    #footer .footer-menu-wrapper {display: none;}
    #footer .copyright {border-top: none;}

    #gammes {margin-top: 20vw;}
    #gammes .two-block-wrapper .two-block .content-container {padding: 20px;}
    #gammes .two-block-wrapper .two-block:first-of-type {width: 90%; height: 55vw;}
    #gammes .two-block-wrapper .two-block:first-of-type .img-container {width: 81%; left: 10%; height: 85vw;}
}

@media (max-width:600px) {
    .video-header {height:140px}
    #navigation .navigation-wrapper .header-logo {width: 130px;}
    #navigation .navigation-wrapper .nav-container .main-nav .cta-white {padding: 5px 20px;}

    .menu-option .pi-wrapper {width: 85%;}

    .services .pi-wrapper {width: auto;}
    .services .tree-bloc-wrapper {border-radius: 0;}
    .services .tree-bloc-wrapper .tree-bloc {padding: 40px 20px;}
    .services .tree-bloc-wrapper .tree-bloc::before {right: -1250px;}

    .pi-cpf-section-wrapper .img-text-merge .pi-container-img-text .pi-img-text .title {font-size: 28px;}

    #article .side-content .side-content-blogue-container {width: 100%; margin: 0 0 40px;}

    #main-cta .two-bloc-wrapper {display: block;}
    #main-cta .two-bloc-wrapper .two-bloc {width: 100%;}
    #main-cta .two-bloc-wrapper .two-bloc::before {bottom: 0; top: unset; left: 50%; transform: translateX(-50%); width: 2500px; height: 2500px;}
    #main-cta .two-bloc-wrapper .two-bloc:last-of-type::before {bottom: -200px;}

    .bubble-text {padding: 30px; margin-top: 0; margin-bottom: 0;}

    #footer .copyright {justify-content: center;}
    #footer .copyright .socials {display: none;}
}

@media (max-width:500px) {
    .services .tree-bloc-wrapper .tree-bloc::before {right: -1300px;}
}