/* Custom classes */

.img-bg::after {content: ''; position: absolute; background-image: url(/wp-content/themes/pubinteractive/img/view-luxurious-hotel-interior-space.jpg); background-position: center; background-size: cover; left: 0; right: 0; height: 105%; transform: translate(0px, -700px); z-index: -1; filter: brightness(0.25); transition: none;}

.img-gray .pi-img-text img{filter: grayscale(100%);}
.img-gray .pi-img-text img.materiaux-img{filter: grayscale(0%);}
/*----------------*/

#navigation {border-bottom: 1px solid #707070; background-color: #232220;}
#navigation .header-nav-wrapper {position: relative; z-index: 10000; display: flex; justify-content: space-between; align-items: center; padding: 20px 0;}
#navigation .header-nav-wrapper .logo-header {width: 300px; margin-top:20px}
#navigation .header-nav-wrapper:last-of-type {align-items: end;}
#navigation .header-nav-wrapper .header-nav-wrapper-box {}
#navigation .header-nav-wrapper .header-nav-wrapper-box .socials-wrapper {}
#navigation .header-nav-wrapper .header-nav-wrapper-box .socials {width: 25px; margin: 0 10px; vertical-align: middle;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .burger-wrapper {display: none;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .burger-wrapper .phone-img {margin-right: 20px;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .lang {margin-left: 10px; display: inline-block; vertical-align: middle;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .phone-text {margin-right: 20px; display: inline-block; vertical-align: middle;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .phone-img {display: none; margin-right: 20px; vertical-align: middle;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .tabs {display: inline-block; position: relative; transition: ease-in-out .3s; vertical-align: middle; margin-right: 40px;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .tabs-link:hover {color: #e9bd1c;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .tabs-link span {color: #e9bd1c;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .sub-menu-tabs {cursor: pointer;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .sub-menu-tabs:hover {color: #e9bd1c;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .sub-menu-tabs:focus {color: #e9bd1c;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .sub-menu-tabs:focus ~ .sub-menu-wrapper {pointer-events: initial; max-height: 200px; opacity: 1;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .sub-menu-tabs:focus ~ .sub-menu-wrapper .sub-menu-link {transform: translate(0); opacity: 1;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .tabs .sub-menu-wrapper {pointer-events: none; max-height: 0; opacity: 0.001; transition: ease 1s; font-size: 14px; position: absolute; background-color: #000000db; width: max-content; padding: 20px; left: -20px; line-height: 30px;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .tabs .sub-menu-wrapper:hover {pointer-events: initial; transform: translate(0); opacity: 1;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .tabs .sub-menu-wrapper:hover .sub-menu-link {transform: translate(0); opacity: 1;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .tabs .sub-menu-wrapper .sub-menu-link {opacity: 0.0001; transform: translate(60px); transition: ease 0.8s;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .tabs .sub-menu-wrapper .sub-menu-link:first-of-type {transition: ease 0.6s;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .tabs .sub-menu-wrapper .sub-menu-link:last-of-type {transition: ease 1s;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .tabs .sub-menu-wrapper .sub-menu-link a {transition: .3s;}
#navigation .header-nav-wrapper .header-nav-wrapper-box .tabs .sub-menu-wrapper .sub-menu-link:hover a {color: #e9bd1c;}

.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 .tabs {}
.menu-option .pi-wrapper .tabs .tabs-link {transition: ease .3s; cursor: pointer;}
.menu-option .pi-wrapper .tabs .tabs-link span {color: #e9bd1c; 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: #e9bd1c;}
.menu-option .pi-wrapper .tabs .tabs-link a:hover {color: #e9bd1c;}
.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 {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: #e9bd1c;}

#hero {padding: 60px 0; overflow-x: hidden;}
#hero .hero-wrapper {position: relative;}
#hero .hero-wrapper .hero-block {display: inline-block; vertical-align: top; width: 50%; height: 40vw; min-height: 250px; max-height: 650px; position: relative; transition: ease .5s;}
#hero .hero-wrapper .hero-block.dimmed {filter: brightness(0.5);}
#hero .hero-wrapper .hero-block:first-of-type {border-right: 2.5px solid #232220;}
#hero .hero-wrapper .hero-block:first-of-type:hover {transform: scale(1.12); z-index: 10; transform-origin: left center;}
#hero .hero-wrapper .hero-block:last-of-type {border-left: 2.5px solid #232220;}
#hero .hero-wrapper .hero-block:last-of-type:hover {transform: scale(1.12); z-index: 10; transform-origin: right center;}
#hero .hero-wrapper .hero-block img {width: 100%; object-fit: cover; height: 100%;}
#hero .hero-wrapper .hero-block .floating-text {position: absolute; padding: 40px; top: 0; left: 0; width: min-content; font-size: 2.5vw; font-weight: 200;}
#hero .hero-wrapper .hero-block:last-of-type .floating-text {bottom: 0; right: 0; top: unset; left: unset; text-align: right;}
#hero .hero-wrapper .hero-text-block-wrapper {z-index: 20; pointer-events: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center;}
#hero .hero-wrapper .hero-text-block-wrapper .hero-text-block {pointer-events: initial; border: 15px solid black; padding: 25px; background-color: black; color: white; width: 33%;}
#hero .hero-wrapper .hero-text-block-wrapper .hero-text-block .subtitle {color: #e9bd1c; margin: 20px 0;}
#hero .hero-wrapper .hero-text-block-wrapper .hero-text-block img {margin-bottom: 10px;}

.pi-container-img-text .pi-img-text .materiaux-wrapper {position: absolute; bottom: 3vw; left: 100px; width: max-content;}
.pi-container-img-text .pi-img-text .materiaux-wrapper .materiaux {position: relative; z-index: 2; margin: 0 15px; display: inline-block;}
.pi-container-img-text .pi-img-text .materiaux-wrapper .materiaux::before {content: ''; border: 1px solid #e9bd1c; top: 0; right: 0; left: 0; bottom: 0; transform: translate(10px, 5px); position: absolute; z-index: 1;}
.pi-container-img-text .pi-img-text .materiaux-wrapper .materiaux-img {min-width: 70px; min-height: 70px; width: 12vw; height: 12vw; position: relative; z-index: 5;}
.img-emphase .pi-img-text img {height: 45vw;}
.half-width .pi-img-text:only-child {width: 50%;}

#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::before {content: ''; border: 1px solid #e9bd1c; top: 0; right: 0; left: 0; bottom: 0; transform: translate(10px, 10px); position: absolute;}
#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 .title::before {content: ''; position: absolute; left: -25px; top: 15px; width: 15px; height: 15px; background-color: #e9bd1c;}
#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: #e9bd1c;}
#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: #e9bd1c; border: 1px solid #e9bd1c;}

#realisations {padding: 60px 0;}
#realisations .two-bloc-wrapper {padding: 60px 0;}
#realisations .two-bloc-wrapper-rtl {direction: rtl;}
#realisations .two-bloc-wrapper .two-bloc {display: inline-block; vertical-align: middle; direction: ltr;}
#realisations .two-bloc-wrapper .two-bloc:first-of-type {width: 60%; padding-right: 20px;}
#realisations .two-bloc-wrapper .two-bloc:last-of-type {width: 40%; padding-left: 20px;}
#realisations .two-bloc-wrapper .two-bloc .two-bloc-content {padding-left: 25px; padding-bottom: 40px;}
#realisations .two-bloc-wrapper .two-bloc .two-bloc-content .text {padding: 10px 0; font-weight: 100; font-size: 14px;}
#realisations .two-bloc-wrapper-rtl .two-bloc:first-of-type {padding-right: 0px; padding-left: 20px;}
#realisations .two-bloc-wrapper-rtl .two-bloc:last-of-type {padding-left: 0px; padding-right: 20px;}
#realisations .two-bloc-wrapper .two-bloc .subtitle {text-transform: uppercase; position: relative;}
#realisations .two-bloc-wrapper .two-bloc .subtitle::before {content: ''; position: absolute; left: -25px; top: 5px; width: 15px; height: 15px; background-color: #e9bd1c;}
#realisations .two-bloc-wrapper .two-bloc .pi-carrousel-img-container .pi-carrousel-img-wrapper .pi-carrousel-img {position: relative; z-index: 2; box-sizing: border-box; object-fit: cover; height: 99%;}
#realisations .two-bloc-wrapper .two-bloc .pi-carrousel-img-container .pi-carrousel-img-wrapper .pi-carrousel-img img {position: relative; z-index: 5; width: 96%; pointer-events: auto;}
#realisations .two-bloc-wrapper .two-bloc .pi-carrousel-img-container .pi-carrousel-img-wrapper .pi-carrousel-img::before {content: ''; border: 1px solid #e9bd1c; left: 20px; width: 91.5%; height: 96%; transform: translate(10px, 5px); position: absolute; z-index: 1;}

.tree-block-wrapper {margin-bottom: 20px;}
.tree-block-wrapper .tree-block {height: 28vw; max-height: 500px; background-position: center; background-size: cover; display: inline-block; width: calc(33.33% - 10px); vertical-align: top; position: relative;}
.tree-block-wrapper .tree-block:first-of-type {margin-right: 15px;}
.tree-block-wrapper .tree-block:last-of-type {margin-left: 15px;}
.tree-block-wrapper .tree-block .tree-block-content {transition: ease .3s; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 20px; text-align: right;}
.tree-block-wrapper .tree-block .tree-block-content:hover {background-color: #e9bd1cc3;}

#pi-form {background-color: #232220; border-top: 1px solid #e9bd1c;}
#pi-form .cta-container {text-align: center; margin-top: -50px; position: relative; z-index: 10;}
#pi-form .cta-container-mobile {display: none; text-align: center;}
#pi-form .cta-container-mobile .styled-select {font-weight: 600; padding: 15px 100px; margin: 0 5px; border: 1px solid #e9bd1c; transition: ease 0.3s; background-color: #e9bd1c; color: black; cursor: pointer; font-family: inherit; font-size: 16px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>"); background-repeat: no-repeat; background-position: right 20px center; background-size: 25px;}
#pi-form .cta-container-mobile .styled-select:focus {outline: none;box-shadow: none;}
#pi-form .cta-container .cta {padding: 15px 100px; margin: 0 5px; border: 1px solid #a0a0a0; transition: ease .3s; background-color: #a0a0a0; color: white; display: inline-block; cursor: pointer;}
#pi-form .cta-container .cta-active {background-color: #e9bd1c; color: black; border: 1px solid #e9bd1c;}
#pi-form .cta-container .cta:hover {background-color: #e9bd1c; color: black; border: 1px solid #e9bd1c;}
#pi-form .form-container {width: 90%; margin: 0 auto; padding: 60px 0; position: relative; display: flex; justify-content: center;}
#pi-form .form-container .form-wrapper {width: 100%; transition: ease .5s; opacity: 0.001; pointer-events: none; transform: translate(-1000px); position: absolute;}
#pi-form .form-container .form-wrapper:last-of-type {transform: translate(1000px);}
#pi-form .form-container .form-active:first-of-type {opacity: 1; pointer-events: initial; transform: translate(0); position: initial;}
#pi-form .form-container .form-active:last-of-type {opacity: 1; pointer-events: initial; transform: translate(0); position: initial;}
#pi-form .form-container .two-bloc {display: inline-block; width: 50%; padding: 0 40px; vertical-align: top;}
#pi-form .form-container .two-bloc .wpcf7-list-item {display: block;}
.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 #e9bd1c; outline: solid 1px #e9bd1c;}
.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 #e9bd1c; outline: solid 1px #e9bd1c;}
.wpcf7-list-item {margin: 5px 0;}
.custom-wrapper-100 {padding: 20px 0; margin: 0 1%; display: block;}
.form-container .small-text {border-top: 1px solid #a0a0a0;}
.wpcf7-not-valid-tip {display: none;}
.form-container .cta {margin: 20px 1%;}
#pi-form .form-container .two-bloc label {font-size: 14px; color: white; font-weight: 200; vertical-align: middle; cursor: pointer;}
#pi-form .form-container .two-bloc input[type="checkbox"] {appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 15px; height: 15px; border: 1px solid #e9bd1c; background-color: transparent; position: relative; cursor: pointer; vertical-align: middle;}
#pi-form .form-container .two-bloc input[type="checkbox"]:checked::after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #e9bd1c;}
#pi-form .form-container .cta {/*margin: 0 40px;*/ padding: 15px 40px}

.map-wrapper {padding: 60px 0; filter: grayscale(1);}

#footer {margin-top:100px; padding: 30px 0; border-top: 1px solid #e9bd1c; background-color: #171614; overflow-x: hidden;}
#footer .footer-nav-wrapper {display: flex; justify-content: space-between;}
#footer .footer-nav-wrapper .footer-nav-container {}
#footer .footer-nav-wrapper .footer-nav-container .footer-nav-block {display: inline-block; vertical-align: top; margin-right: 50px;}
#footer .footer-nav-wrapper .footer-nav-container .footer-nav-block:first-of-type {margin-right: 20px;}
#footer .footer-nav-wrapper .footer-nav-container .footer-nav-block:last-of-type {margin-right: 0;}
#footer .footer-nav-wrapper .footer-nav-container .footer-nav-block .tabs-link {margin-bottom: 10px; transition: ease .3s; font-size: 14px;}
#footer .footer-nav-wrapper .footer-nav-container .footer-nav-block .tabs-link:hover {color: #e9bd1c;}
#footer .footer-nav-wrapper .footer-nav-container .footer-nav-block .socials-wrapper {}
#footer .footer-nav-wrapper .footer-nav-container .footer-nav-block .socials-wrapper .socials {width: 25px; margin: 0 5px;}
#footer .footer-nav-wrapper .footer-nav-container:last-of-type .footer-nav-block {margin-left: 20px; margin-right: 0; vertical-align: middle;}
#footer .footer-nav-wrapper .footer-nav-container:last-of-type .footer-nav-block:first-of-type {margin-left: 0;}
#footer .copyright {margin-left: 75px; margin-top: 20px;}

/*david custom*/
.notext .text {display:none}
.border {border-bottom:1px solid #a0a0a0}
.nopadding .pi-colonne .pi-colonne-container {padding-top:0; margin-top:0; padding-bottom:0; margin-bottom:0}
.nopadding .pi-colonne .pi-colonne-container ul {padding-top:0; margin-top:0; padding-bottom:0; margin-bottom:0}
/*david custom*/

@media (max-width:1300px) {
    #footer .footer-nav-wrapper .footer-nav-container:last-of-type .footer-nav-block {display: block; margin: 0 0 20px;}
}

@media (max-width:1250px) {
    .pi-container-img-text .pi-img-text .materiaux-wrapper {bottom: 0;}
}

@media (max-width:1200px) {
    #navigation .header-nav-wrapper .header-nav-wrapper-box .phone-text {display: none;}
    #navigation .header-nav-wrapper .header-nav-wrapper-box .phone-img {display: initial;}

    .pi-container-img-text .pi-img-text .materiaux-wrapper {bottom: -2vw;}
}

@media (max-width:1100px) {
    .pi-container-img-text .pi-img-text .materiaux-wrapper {position: initial; width: auto;}
    .pi-container-img-text .pi-img-text .materiaux-wrapper .materiaux {margin: 20px 15px 0 0;}
    .pi-container-img-text .pi-img-text .materiaux-wrapper .materiaux-img {width: 8vw; height: 8vw;}
    .pi-container-img-text .pi-img-text .materiaux-wrapper .materiaux::before {transform: translate(5px); top: 5px;}

    #footer .footer-nav-wrapper .footer-nav-container:first-of-type .footer-nav-block:last-of-type {display: none;}
}

@media (max-width:1000px) {
    #navigation {position: fixed; width: 100%; z-index: 100; background-color: #000000cc;}
    #navigation .header-nav-wrapper:last-of-type {display: none;}
    #navigation .header-nav-wrapper .header-nav-wrapper-box .socials-wrapper {display: none;}
    #navigation .header-nav-wrapper .header-nav-wrapper-box .burger-wrapper {display: initial;}

    #hero {padding: 120px 0;}
    #hero .hero-wrapper .hero-text-block-wrapper {position: initial;}
    #hero .hero-wrapper .hero-text-block-wrapper .hero-text-block {border: none; margin-top: 30px; width: 100%;}

    #realisations {padding: 160px 0 60px;}
    #realisations .two-bloc-wrapper .two-bloc:first-of-type {width: 100%;}
    #realisations .two-bloc-wrapper .two-bloc:last-of-type {width: 100%;}
    #realisations .two-bloc-wrapper .two-bloc .pi-carrousel-img-container .pi-carrousel-img-wrapper .pi-carrousel-img::before {display: none;}
    #realisations .two-bloc-wrapper-rtl .two-bloc:first-of-type {padding-left: 0px;}
    #realisations .two-bloc-wrapper-rtl .two-bloc:last-of-type {padding-right: 0px;}
    #realisations .two-bloc-wrapper .two-bloc:first-of-type {padding-right: 0px;}
    #realisations .two-bloc-wrapper .two-bloc:last-of-type {padding-left: 0px;}
    #realisations .two-bloc-wrapper .two-bloc .two-bloc-content {padding-bottom: 0; padding-left: 35px;}

    .tree-block-wrapper .tree-block .tree-block-content .title {font-size: 26px;}

    #pi-form .form-container {width: 100%;}
    #pi-form .form-container .two-bloc {padding: 0 20px;}
    /* #pi-form .form-container .cta {margin: 0 20px;} */
    #pi-form .cta-container {display: none;}
    #pi-form .cta-container-mobile {display: block;}
    #pi-form .cta-container {margin-top: 0;}

    #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:800px) {
    .half-width .pi-img-text:only-child {width: 100%;}

    #jobs .pi-cpf-section-wrapper .pi-container-img-text .rtl {direction: ltr;}

    .tree-block-wrapper .tree-block {width: 100%; margin: 10px 0;}
    .tree-block-wrapper .tree-block:first-of-type {margin: 10px 0;}
    .tree-block-wrapper .tree-block:last-of-type {margin: 10px 0;}
}

@media (max-width:700px) {
    #footer .footer-nav-wrapper {display: flex; justify-content: space-between; align-items: center;}
    #footer .footer-nav-wrapper .footer-nav-container .footer-nav-block {display: none;}
    #footer .footer-nav-wrapper .footer-nav-container:last-of-type .footer-nav-block {display: none;}
    #footer .footer-nav-wrapper .footer-nav-container .footer-nav-block:first-of-type {display: initial;}
    #footer .copyright {margin-left: 0;}
}

@media (max-width:600px) {
    #navigation .header-nav-wrapper .logo-header {width: 200px; margin-top:0}
    #hero .hero-wrapper .hero-block {width: 100%;}
    #hero .hero-wrapper .hero-block.dimmed {filter: brightness(0.5);}
    #hero .hero-wrapper .hero-block:first-of-type {border-right: none; border-bottom: solid black 4px;}
    #hero .hero-wrapper .hero-block:first-of-type:hover {transform: none;}
    #hero .hero-wrapper .hero-block:last-of-type {border-left: none;}
    #hero .hero-wrapper .hero-block:last-of-type:hover {transform: none;}
    #hero .hero-wrapper .hero-block .floating-text {font-size: 30px; padding: 20px;}
    #hero .hero-wrapper .hero-text-block-wrapper .hero-text-block {margin-top: 10px;}

    .full-width-mobile {width: 100%;}

    #pi-form .form-container .two-bloc {width: 100%;}
    #pi-form .form-container .cta {margin-top: 40px;}

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


.df-container { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; margin:0 auto;}
.df-box { flex:1; min-width:300px; background-color:#f0f0f0; padding:20px; box-sizing:border-box}
@media (max-width:620px) {
.df-box {flex:100%; min-width:100%}
}