/*
Theme Name: Four Design
Version: 1.0
Description: Customized WordPress theme specifically developed to Four Design.
Author: Pandi Web
Author URI: https://pandiweb.dk
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

*, *::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

html, body {
    padding: 0px;
    margin: 0px;

}

html {
    scroll-behavior: smooth;
}
   
body.disabled-scroll {
    overflow-y: auto;
    position: initial;
}


body {
    color: #000000;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh);
    padding-top: 100px;
}

@media screen and (max-width: 1024px){
    .page-wrapper {
        padding-top: 76px;
    }
    
    .singular_breadcrumbs {
        margin-top: 10px;
        margin-bottom: 25px;
    }

}


img {
    max-width: 100%;
}

::placeholder {
    color: #bdbeb7;
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}

button {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    cursor: pointer;
}

a {
    outline: none;
}



/* General grid styling */

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 22px;
}

.container-full {
    padding-left: 42px;
    max-width: calc(100%);
    padding-right: 0;
    margin-right: calc(1356px - 100%);
}


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

    .container {
        max-width: calc(886px + (22px * 2));
    }

    div[class^="col-"] {
        padding: 0 5px;
    }

    .row {
        display: flex;
        margin-left: -5px;
        margin-right: -5px;
        justify-content: flex-end;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }
    .flex-wrap-reverse {
        flex-wrap: wrap-reverse;
    }
    
    .col-sm-1 {
        width: calc(100% / 4);
    }

    .col-sm-2 {
        width: calc(100% / 4 * 2);
    }

    .col-sm-3 {
        width: calc(100% / 4 * 3);
    }

    .col-sm-4 {
        width: calc(100%);
    }
}

@media screen and (min-width: 1025px) {
    div[class^="col-"] {
        padding: 0 12px;
    }

    .row {
        display: flex;
        justify-content: space-around;
        margin-left: -12px;
        margin-right: -12px;
        flex-flow: row wrap;
    }
    
    .container {
        padding: 0 42px;
        max-width: calc(1356px + 42px * 2);
    }

    .col-1 {
        width: calc(100% / 12);
    }

    .col-2 {
        width: calc();
    }

    .col-3 {
        width: calc(100% / 12 * 3);
    }

    .col-4 {
        width: calc(100% / 12 * 4);
    }

    .col-5 {
        width: calc(100% / 12 * 5);
    }

    .col-6 {
        width: calc(100% / 12 * 6);
    }

    .col-7 {
        width: calc(100% / 12 * 7);
    }

    .col-8 {
        width: calc(100% / 12 * 8);
    }

    .col-9 {
        width: calc(100% / 12 * 9);
    }

    .col-10 {
        width: calc(100% / 12 * 10);
    }

    .col-11 {
        width: calc(100% / 12 * 11);
    }

    .col-12 {
        width: 100%;
    }
}

/* Tiny slider styles - Global */
.tns-outer{padding:0 !important}.tns-outer [hidden]{display:none !important}.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.tns-slider{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}.tns-slider>.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0;min-height:1px}.tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-gallery>.tns-slide-active{position:relative;left:auto !important}.tns-gallery>.tns-moving{-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s}.tns-autowidth{display:inline-block}.tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}.tns-vpfix{white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li{display:inline-block}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct:after{content:'';display:table;clear:both}.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left}


.flex-end {
    display: flex;
    justify-content: flex-end;
}
.align-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

/* General font styling */

a {
    text-decoration: none;
    color: inherit;
}

a.read-more {
    padding-bottom: 2px;
    border-bottom: 1px solid #bdbeb7;
    font-size: 13px;
    font-weight: 500;
}

h1, .h1 {
    font-size: 42px;
    line-height: 1.14;
    color: #000000;
    font-weight: 400;
}

h1.white-center {
    color: #fff;
    text-align: center;
    font-weight: 300;
}

h2.footer-title {
    font-weight: 300;
    font-size: 54px;
    line-height: 1.52;
    word-spacing: 100vw;
    
}

h2, .h2 {
  font-size: 28px;
  line-height: 1.29;
  color: #000000;
  font-weight: normal;
  text-align: center;
}

h3, .h3 {
    font-size: 24px;
    font-weight: normal;
    line-height: 1.29;
    color: #000000;
}

h4, .h4 {
    font-size: 17px;
    font-weight: normal;
    line-height: 1.41;
    color: #333333;
}

p {
    color: #333333;
    font-size: 14px;
    line-height: 1.5;
}
p:first-child {
    margin-top: 0px;
}
p:last-child {
    margin-bottom: 0px;
}

p + ul, ol {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.64;
    padding-inline-start: 25px;
}

.text-manchet ul {
    font-size: 21px;
    font-weight: normal;
    line-height: 1.52;
    color: #333333;
}

p + ul li, ol li {
    padding-left: 8px;
    font-weight: 400;
}

::marker {
    font-size: 9px;
}

p img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

hr {
    border: 0;
    border-bottom: 1px solid #d9d9d6;
}

p > a {
    padding-bottom: 2px;
    border-bottom: 1px solid #bdbeb7;
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
}

p > a[target=_blank]:after {
    display: inline-block;
    content: '';
    position: absolute;
    background: url(../../images/icon_link_arrow.svg) no-repeat;
    background-size: contain;
    width: 19px;
    height: 22px;
    right: -19px;
    background-position: center;
}

.text-manchet p {
   font-size: 21px;
   line-height: 1.52;
}


.link-container a {
    transition: all .3s ease-in;
}

.link-container a:hover {
    border-color: #333333 !important;
    transition: all .3s ease-in;
}


/* Header - general styling for header */


.header-container {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 102;
    background: white;
    border-bottom: 0px solid rgb(217 217 214 / 0%);
    transition: all .3s ease-in-out;
}

.header-container.scroll-border {
    border-bottom: 1px solid rgb(217 217 214 / 30%);
    transition: all .3s ease-in-out;
}


.navigation-wrapper div[class^="col-"] {
    margin: auto 0;
}


header .menu > .menu-item-has-children {
    cursor: pointer;
    display: flex;
    align-items: center;
}

header .menu > .menu-item-has-children::after {
    content: '';
    background: url('assets/images/arrow-dropdown.svg') no-repeat;
    display: block;
    background-size: contain;
}

header .mobile-navigation .menu > .menu-item-has-children > a {
    display: flex;
    align-items: center;
}

header .sub-menu-outer.active > .sub-menu-wrapper ul.sub-menu ul.sub-menu > li {
    pointer-events: auto;
}
header .sub-menu-wrapper ul.sub-menu ul.sub-menu > li {
    font-size: 17px;
    line-height: 1.41;
    color: #333333;
    text-transform: none;
}

header ul.menu ul.sub-menu > li.menu-item-has-children {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.54;
    text-transform: uppercase;
    color: #999999;
}


a.logo {
    display: flex;
    align-items: center;
    max-width: 156px;
    margin: 28px 0;
}

form {
    width: 100%;
}

.search-content {
    opacity: 0;
    z-index: 102;
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    background: #fff;
    -webkit-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
    transition: .3s ease-in-out;   
}

.search-content.active {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    transition: .3s ease-in-out;
}

.search-open {
    appearance: none;
    background: none;
    cursor: pointer;
    border: none;
    padding: 0;
    display: block;
    outline: none;
    margin-left: 22px;
}

button.search-enter {
    appearance: none;
    background: none;
    cursor: pointer;
    border: none;
    padding: 0;
    display: inline-block;
    outline: none;
    height: 30px;
    width: 30px
}

.search-enter svg {
    width: 100%;
    height: auto;
}


.search-open svg {
    width: 20px;
    height: 20px;
}

.search-open.active .search-icon, .search-open .search-close  {
    display: none;
}
.search-open .search-icon, .search-open.active .search-close  {
    display: block;
}

.search-inner-container {
    margin-top: 45px;
    margin-bottom: 70px;
    display: flex;
    align-items: center;
}

.search-input {
    font-size: 24px;
    border: none;
    width: 60%;
    outline: none;
}

@media screen and (max-width: 1024px) {
    .search-content {
        display: none;
    }

    .search-input {
        width: 45%;
        padding: 0;
    }

    .search-inner-container form {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
}

/* Archive pages */

.post-overview-title {
    margin-top: 65px;
}

.product-list-header {
    margin-top: 45px;
}

/* Footer - general styling for the footer */

footer h3 {
    font-size: 14px;
    line-height: 1.29;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 29px;
    color: #333333;
}

footer .menu {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    display: flex;
    list-style: none;
    padding: inherit;
    flex-direction: column;
    color: #333333;
}

footer .footer-menu-bottom .menu {
    flex-direction: row;
    font-size: 14px;
}
footer .footer-menu-bottom .menu li {
    margin-right: 25px;
}

footer a[href^="mailto:"] {
    padding-bottom: 2px;
    border-bottom: 1px solid;
} 


footer .menu li {
    margin: calc(9px / 2) 0;
}

.block:last-child {
    margin-bottom: 0 !important;
}

.archive footer {
    margin-top: calc(100px - 49px);
}

footer {
    margin-top: 100px;
    padding-top:18px;
}

footer .row {
    padding-bottom: 15px;
    flex-flow: row wrap;
}

footer .social-buttons {
    display: flex;
    margin-top: 35px;
}
footer .social-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 11px;
    width: 31px;
    height: 31px;
}

.desktop-hide {
    display: none;
}

.product-list-nav {
    margin-top: 75px;
    margin-bottom: 56px;
}
.product-list-nav .product-list-nav-container {
    display: flex;
    flex-flow: row wrap;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.product-list-nav .product-list-nav-container .product-list-nav-item {
    margin-right: 20px;
}
.product-list-nav .product-list-nav-container .product-list-nav-item:last-child {
    margin-right: 0px;
}
.product-list-nav .product-list-nav-container .product-list-nav-item {
    opacity: 0.5;
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    transition: all .2s ease-in;
    cursor: pointer;
}

.product-list-nav .product-list-nav-container .product-list-nav-item:hover {
    opacity: 1;
    transition: all .2s ease-in;
}


.product-list .product-list-featured-image {
    position: relative;
    height: 336px;
    background: #eeedea;
}
.product-list .product-list-featured-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 50%;
}
.product-list .product-list-featured-image img.hover-image {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -ms-transition: opacity 0.4s ease-out;
    -o-transition: opacity 0.4s ease-out;
    transition: opacity 0.4s ease-out;
}
.product-list .product-list-featured-image img.hover-image:hover {
    opacity: 1;
    -webkit-transition: opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -ms-transition: opacity 0.4s ease-out;
    -o-transition: opacity 0.4s ease-out;
    transition: opacity 0.4s ease-out;
}

.product-list div.product {
    margin-bottom: 49px;
}

.product-list .product .woocommerce-loop-product__title {
    margin-top: 19px;
    margin-bottom: 0px;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.41;
    color: #333333;
    text-align: center;
}

@media screen and (max-width: 789px) {
    .product-list-nav {
        margin-top: 25px;
        margin-bottom: 35px;
    }

    .product-list .product-list-featured-image {
        position: relative;
        height: 186px;
        background: #eeedea;
    }
}


/* Breadcrumbs */

.singular_breadcrumbs {
    margin-top: 25px;
}

.breadcrumbs {
    display: flex;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.breadcrumbs li {
    margin-right: 8px;
}
.breadcrumbs li::after {
    content: '/';
    font-size: 11px;
    margin-left: 8px;
}
.breadcrumbs li:last-child {
    margin-right: 0px;
}
.breadcrumbs li:last-child::after {
    display: none;
}
.breadcrumbs li a {
    font-size: 11px;
    color: #000000;
}

.breadcrumbs li a.current-page {
    color: #999999;
}

/* Page with breadcrumbs */

.page-with-breadcrumbs { 
    margin-bottom: 65px;
}

.page-with-breadcrumbs .singular_breadcrumbs {
    margin-bottom: 75px;

}
.page-with-breadcrumbs h1:first-child {
    margin-top: 0px;
}

@media screen and (max-width:1024px) {
    
    .page-with-breadcrumbs .singular_breadcrumbs {
        margin-bottom: 45px;
    }
}


/* Product page */
.block.block-product {
    padding-bottom: 100px;
    background-color: #eeedea;
}

.block.block-product .product-breadcrumbs {
    margin-top: 25px;
    margin-bottom: 78px;
}


.block.block-product .product-label {
    margin-bottom: 50px;
}
.block.block-product .product-label h3 {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.54;
    color: #333333;
}
.block.block-product .product-title {
    margin-bottom: 13px;
}
.block.block-product .product-title h1 {
    font-size: 28px;
    font-weight: normal;
    line-height: 1.29;
}
.block.block-product .product-desc {
    margin-bottom: 58px;
}
.block.block-product .product-desc p {
    font-size: 14px;
    line-height: 1.64;
    color: #3a3a3a;
}
.block.block-product .product-variants {
    margin-bottom: 0px;
}
.block.block-product .product-variants .woocommerce-product-details__short-description {
    display: none;
}

.block.block-product .product-variants .variants_form {
    margin-bottom: 0px;
}
.block.block-product .product-variants .variations {
    margin-bottom: 0px;
}
.block.block-product .product-variants .variations tr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.block.block-product .product-variants .variations tr:last-child {
    margin-bottom: 0px;
}
.block.block-product .product-variants .variations tr .label {
    width: 100%;
    margin-bottom: 10px;
    padding: 0px;
    line-height: normal;
}
.block.block-product .product-variants .variations tr .value {
    width: 100%;
    margin-bottom: 0px;
    padding: 0px;
}
.block.block-product .product-variants .variations tr .value li {
    padding: 0px;
    border: 0px;
    margin: 0px 8px 8px 0px;
    box-shadow: unset;
}
.block.block-product .product-variants .variations tr .value li:hover {
    box-shadow: unset;
}
.block.block-product .product-variants .variations tr .value li::before,
.block.block-product .product-variants .variations tr .value li::after {
    display: none;
}



.block.block-product .product-image-info {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.block.block-product .product-image-desc {
    max-width: 321px;
    
}
.block.block-product .product-image-desc p {
    font-size: 14px;
    line-height: 1.64;
    color: #333333;
}
.block.block-product .contact-sales-link {
    margin-bottom: 21px;
}
.block.block-product .resource-link {
    margin-bottom: 12px;
}

.block.block-product .contact-sales-link a, .block.block-product .resource-link a {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    padding-bottom: 2px;
    border-bottom: 1px solid #000000;
    margin-bottom: auto;
}

.woocommerce div.product form.cart .variations label {
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
}

.woocommerce.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item .variable-item-span-color::after {
    box-shadow: none;
}

.block.block-product .product-label {
    text-transform: uppercase;
}

@media screen and (min-width: 1025px) {
    .block.block-product .desktop-hide {
        display: none;
    }

    .block.block-product .product-short-content {
        max-width: 436px;
    }

    .block.block-product .product-image {
        position: absolute;
        top: 0;
        right: 0;
        width: calc(50% - 12px);
        margin-left: 0;
        padding-top: calc((70vw - 12px) * 0.59);
    }
    .block.block-product .product-image img {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .block.block-product .product-image-info {
        padding-top: calc((70vw - 12px) * 0.59);
    }
}

@media screen and (max-width: 1024px) {
    .block.block-product .mobile-hide {
        display: none;
    }

    .block.block-product .product-title h1 {
        font-size: 22px;
        line-height: 1.67;
    }

    .block.block-product .product-image-desc {
        max-width: calc(66%);
    }
    .block.block-product {
        padding-bottom: 44px;
    }
    
    .block.block-product .product-image {
        width: 100%;
        max-height: 361px;
        overflow: hidden;
    }

    .block.block-product .product-image-info {
        margin-top: 21px;
        margin-bottom: 33px;
    }
    
    .block.block-product .product-image-desc {
        margin-bottom: 21px;
    }

    .block.block-product .product-breadcrumbs {
        margin-top: 21px;
        margin-bottom: 54px;
    }

    .block.block-product .product-label {
        margin-bottom: 17px;
    }

    .block.block-product .product-desc {
        margin-bottom: 44px;
    }
    
    .block.block-product .product-variants .variations tr {
        margin-bottom: 24px;
    }

    .block.block-product .product-variants .variations_form {
        margin-bottom: 0px;
    }
    
}



/* Product page - Accordion / Resources */

.block.block-product .accordion-element .accordion-title {
    position: relative;
    text-transform: uppercase;
    font-weight: 500;
    padding: 14px 0;
    display: flex;
    align-items: center;
}

.block.block-product .accordion-element .accordion-title[data-resources-toggle] {
    cursor: pointer;
}

.block.block-product .accordion-element .accordion-title h4 {
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    padding-right: 40px;
}

.block.block-product .accordion-element.active .accordion-title h4 {
    font-weight: 600;
}

.block.block-product .accordion-element:not(:last-child) {
    border-bottom: 1px solid #bdbeb7;
}


.block.block-product .plus-minus {
    position: absolute;
    right: 15px;
}

.block.block-product .accordion-element.active .accordion-title .plus-minus::before {
    transform: rotate(270deg);
    opacity: 0;
    transition: .15s ease-in;
}

.block.block-product .accordion-element.active .accordion-title .plus-minus::after {
    transform: rotate(180deg);
    transition: .15s ease-in;
}



.block.block-product .plus-minus:after {
    display: block;
    position: absolute;
    content: '';
    height: 1px;
    width: 13px;
    background: #333;
    transform: rotate(0deg);
    transition: .25s ease-in;
}


.block.block-product .plus-minus:before {
    content: '';
    position: absolute;
    width: 13px;
    height: 1px;
    background: #333;
    transform: rotate(90deg);
    transition: .25s ease-in;
    opacity: 1;
}


/* .block.block-product  .accordion-element.active .accordion-content {
    max-height: 2000px;
    opacity: 1;
    transition: all .25s ease-in-out;
    margin: 17px 0;
    display: block;
} */

.block.block-product .accordion-element .accordion-content {
    /* max-height: 0;
    opacity: 0;
    transition: all .25s ease-in-out; */
    margin-bottom: 17px;
    display: none;
    padding-right: 40px;
}

.block.block-product .accordion-element .accordion-content p {
    margin: 0;
}

.h2.page-title {
    margin-bottom: 35px;
}


/* Resources template */

.page-resources .resources-element {
    margin-bottom: 6px;
}
.page-resources button.resources-title {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.23;
    color: #333333;
    padding-bottom: 2px;
    border-bottom: 1px solid #eaeae8;
    transition: all .3s ease-in;
}

.page-resources button.resources-title.resource-imagebank p a {
    font-weight: normal;
    border: none;
    padding-bottom: 0;
}

.page-resources button.resources-title:hover {
    border-bottom: 1px solid #333333;
    transition: all .3s ease-in;
}

.page-resources .product-list { 
    overflow: hidden;
}

.page-resources .link-container .load-more {
    padding-bottom: 2px;
    border-bottom: 1px solid #bdbeb7;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 25px;
    transition: all .2s ease-in;
}

.page-resources .link-container .load-more:hover {
    transition: all .2s ease-in;
    border-color: #333333;
}

.page-template-resources .page-wrapper {
    min-height: calc(100vh - 330px);
}

body.modal-open {
    overflow: hidden;
}
body.modal-open .modal-container {
    overflow-x: hidden;
    overflow-y: auto;;
}

.modal-wrapper {
    visibility: hidden;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 103;
    align-items: center;
    opacity: 0;
    transition: all .2s ease-in;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(51, 51, 51, 0.88);
}

.modal-wrapper.active {
    visibility: visible;
    opacity: 1;
    transition: all .2s ease-in;
}


.modal-wrapper .modal-container {
    opacity: 0;
    transform: translateY(-30px);
    transition: all .3s ease-in;
}
.modal-wrapper.active .modal-container {
    opacity: 1;
    transform: translateY(0px);
    transition: all .3s ease-in;
}

.modal-container {
    max-width: 100%;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 80vh;
    background: #ffffff;
}

.modal-header {
    position: relative;
    width: 100%;
    background: #eeedea;
    height: auto;
    padding-top: 25px;
    padding-bottom: 45px;
}

.modal-header .modal-close-btn {
    width: 27px;
    height: 27px;
    transition: all .2s ease-in;
    border: 1px solid #000000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 15px;
    transition: all .2s ease-in;
}

.modal-header .modal-close-btn span {
    height: 1px;
    width: 14px;
    background: #000000;
    position: absolute;
}

.modal-header .modal-close-btn span:first-child {
    transform: rotate(45deg);
}
.modal-header .modal-close-btn span:last-child {
    transform: rotate(-45deg);
}

.modal-header .modal-close-btn:hover {
    background: #000000;
    transition: all .2s ease-in;
}

.modal-header .modal-close-btn:hover span {
    background: #ffffff;
}

.modal-header .image-container {
    height: 100%;
}

.modal-header .image-container img {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.modal-header .resource-type-label {
    display: block;
    margin-bottom: 32px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.54;
    color: #333333;
    text-transform: uppercase;
}

.modal-header .modal-product-title {
    margin-top: 0;
    margin-bottom: 8px;
}

.modal-header .modal-product-desc {
    font-size: 14px;
    line-height: 1.64;
    color: #333333;
}



.modal-body {
    width: 100%;
    min-height: auto;
    padding-top: 35px;
    padding-bottom: 65px;
    background: #ffffff;
}

.modal-resource-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 19px 0;
}

.modal-resource-container:not(:last-child) {
    border-bottom: 1px solid #eaeae8;
}

.modal-download-resource {
    display: block;
}

.modal-download-resource .download-resource-btn {
    width: 27px;
    height: 27px;
    transition: all .2s ease-in;
    border: 1px solid #000000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-download-resource .download-resource-btn svg {
    transform: rotate(90deg);
    margin-top: 1px;

}

.modal-download-resource:hover > .download-resource-btn {
    transition: all .2s ease-in;
    background: #000000;
}

.modal-download-resource:hover > .download-resource-btn svg {
    filter: invert();
}


.col-modal-8, .col-modal-6, .col-modal-2 {
    width: calc(100% - 65px);
}

@media screen and (max-width: 1024px) {
    .modal-header .resource-type-label {
        margin-bottom: 25px;
    }


    .modal-header .image-container {
        max-width: 350px;
        padding-bottom: 25px;
    }
}
@media screen and (min-width: 1025px) {

    .modal-container .col-modal-2 {
        width: calc(100% / 10 * 2);
    }
    .modal-container .col-modal-6 {
        width: calc(100% / 10 * 6);
    }
    .modal-container .col-modal-8 {
        width: calc(100% / 10 * 8);
    }
}




/* Careers - single page */

.single-careers .post-careers {
    margin: 65px 0;
}

.single-careers .post-careers .job-info h4 {
    margin-bottom: 0;
}
.single-careers .post-careers .image-container {
    height: 564px;
    margin: 50px 0;
}

.single-careers .post-careers .image-container img {
    object-fit: cover;
    min-width: 100%;
    height: 100%;
}

.single-careers .post-careers hr.hr {
    margin: 19px 0;
}

@media screen and (max-width: 1024px) {
                        
    .single-careers .post-careers .image-container {
        height: 400px;
        margin: 25px 0;
    }
}

/* 
.single-careers .image-container {
    height: 100%;
}

.single-careers .image-container img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
} */


@media screen and (min-width: 1025px) {
    h1, .h1 {
        margin-bottom: 40px;
    }

}
@media screen and (max-width: 1024px) {
    h1, .h1 {
        font-size: 28px;
    }
    h2, .h2 {
        font-size: 22px;
    }
    
    h3, .h3 {
        font-size: 19px;
        line-height: 1.63;
    }
    
    .text-manchet p {
        font-size: 20px;
    }


    .desktop-hide {
        display: block;
    }
    footer .flex-reverse {
        flex-direction: column-reverse;
    }

    footer .row {
        padding-bottom: 46px;
    }

    footer .footer-menu-bottom .menu {
        margin-top: 0;
    }
    footer h3 {
        margin-bottom: 14px;
        margin-top: 31px;
    }

   /*  .main {
        margin-top: 70px;
    } */

    .search-field {
        display: none;
    }

    .menu-open svg {
        height: 20px;
        width: 20px;
    }

    a.logo {
        margin: 23px 0;
    }

    a.logo > img {
        height: 30px;
    }

    .mobile-hide .main-navigation {
        display: none;
    }
    .mobile-menu {
        margin-left: 25px;
    }

    .menu-open {
        padding: 0;
        display: flex;
        align-items: center;
        background: none;
        border: none;
        outline: none;
        cursor: pointer;
    }

    .menu-open > span {
        font-size: 15px;
        margin-right: 11px;
    }

    .menu-open.active .menu-icon, .menu-open .menu-close {
        display: none;
    }
 
    .menu-open .menu-icon, .menu-open.active .menu-close {
        display: block;
    }

    .menu-content {
        overflow-y: auto;
        overflow-x: hidden;
        opacity: 0;
        z-index: 101;
        position: fixed;
        top: 0px;
        height: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        -webkit-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        transform: translateY(-200%);
        transition: .3s ease-in-out;
    }

    
    .menu-content.active {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        transition: .3s ease-in-out;
    }
    .menu-content .menu-container {
        margin-top: 82px;
        /*padding-top: 130px;*/
        border-top: 1px solid #eeedea;
    }


    .mobile-navigation > .menu {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 26px;
        position: relative;
    }
    .mobile-navigation > .menu > .menu-item-has-children > .sub-menu-outer { 
        position: fixed;
        padding: 0 21px;
        margin: 0;
        top: 92px;
        left: 0;
        width: 100%;
        overflow-y: auto;
        height: calc(100% - 160px);
        background: white;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        transition: all .25s ease-in;
        opacity: 0.5;
    }
    
    .mobile-navigation > .menu > li {
        padding: 8px 0;
    }

    .mobile-navigation > .menu > .menu-item-has-children > .sub-menu-outer.active { 
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        transition: all .25s ease-in;
        opacity: 1;
    }

    .mobile-navigation > .menu > .menu-item-has-children > .sub-menu-outer ul { 
        list-style: none;
        padding: 0;
    }

    .menu-return { 
        display: none;
    }

    .menu > .menu-item-has-children > .sub-menu-outer > .menu-return {
        display: flex;
        align-items: center;
        padding-top: 16px;
        padding-bottom: 16px;
        margin-bottom: 30px;
        font-size: 14px;
        font-weight: 500;
    }
    .menu > .menu-item-has-children > .sub-menu-outer > .menu-return span {
        margin-left: 6px;
    }
    
    .menu > .menu-item-has-children > .sub-menu-outer > .menu-return:before {
        content: '';
        background: url('assets/images/arrow-dropdown.svg') no-repeat;
        height: 8px;
        width: 11px;
        display: inline-block;
        background-size: contain;
        transform: rotate(270deg);
    }

    header ul.menu ul.sub-menu ul.sub-menu {
        margin: 13px 0 42px 0;
    }


    header .menu > .menu-item-has-children > a:after {
        content: '';
        background: url(assets/images/arrow-dropdown.svg) no-repeat;
        display: block;
        background-size: contain;
        width: 17px;
        height: 25px;
        transform: rotate(90deg);
    }
    
    body.disabled-scroll {
        overflow-y: hidden;
        position: fixed;
    }

    .disabled-scroll .search-content {
        height: 100vh;
        top: 81px;
    }
    .search-input {
        width: calc(100% - 35px);
    }

    .mobile-bottom-navigation ul {
        list-style: none;
        padding: 0;
        position: absolute;
        bottom: 25px;
        display: flex;
        margin: 0;
        font-size: 15px;
        color: #999999;
        font-weight: 500;
    }
    .mobile-bottom-navigation ul li {
        margin-right: 21px;
    }
}

@media screen and (min-width: 1025px) {
    /* .main {
        margin-top: 100px;
    } */

    .menu-content {
        display: none;
    }

    .mobile-menu {
        display: none;
    }

    header .menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        text-align: center;
        font-size: 15px;
    }

    header .menu-wrapper-primary .menu > li {
        padding: 0 16px;
    }

    header .menu-wrapper-secondary {
        display: flex;
        align-items: center;
        color:#999999;
    }

    header .menu-wrapper-secondary .menu > li {
        padding: 0 8px;
        white-space: nowrap;
    }

    header .menu > .menu-item-has-children {
        display: flex;
        align-items: center;
    }

    header .menu > .menu-item-has-children::after {
        content: '';
        margin-left: 6px;
        display: inline-flex;
        height: 6px;
        width: 11px;  
        transform: rotate(180deg);
        transition: all .3s ease;
    }

    header .menu > .menu-item-has-children:hover::after {
        transform: rotate(0deg);
    }

    header .sub-menu::after {
        content: '';
        width: 100%;
        max-width: 177px;
    }

    header .menu > .menu-item-has-children > .sub-menu-outer {
        overflow:hidden;
        position: fixed;
        width: 100%;
        height: 500px;
        left: 0;
        top: 100px;
    }
    

    header .menu > .menu-item-has-children > .sub-menu-outer  { 
        width: 100%;
        position: absolute;
        left: 0;
        top: 100px;
        max-height: 0;
        transition: all 0.25s ease-out;
        transition-delay: .5s;
        overflow: hidden;
        background: #fff;
    }
    
    header .menu > .menu-item-has-children > .sub-menu-outer.active .sub-menu-wrapper, header .menu > .menu-item-has-children:hover .sub-menu-outer, header .menu > .menu-item-has-children .sub-menu:hover  {
        max-height: 600px;
        transition: all 0.25s ease-in;
    }

    header .menu > .menu-item-has-children > .sub-menu-outer > .sub-menu-wrapper > ul.sub-menu {    
        display: flex;
        justify-content: flex-end;
        padding: 47px 0 93px 0;
        margin: 0 auto;
        width: calc(100% - (15px * 2));
        position: relative;
    }
    
    .menu ul.sub-menu {  
        list-style: none;
    }

    header .menu > .menu-item-has-children > .sub-menu-outer > .sub-menu-wrapper > ul.sub-menu:before {
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        position: absolute;
        top: 0;
        background: #eeedea;
    }    
    
    header .menu > .menu-item-has-children > .sub-menu-outer > .sub-menu-wrapper.active > ul {
        transition: all 0.3s ease-out;
    }

    header .sub-menu-wrapper ul.sub-menu > li {
        width: 18%;
        max-width: 280px;
        padding-right: 42px;
        text-align: left;
    }

    header .sub-menu-wrapper > ul {    
        max-width: calc(1356px);
        width: calc(100% - (42px * 2));
    }

    header a.logo > img {
        max-width: 100%;
        height: 44px;
    }   
    
    header ul.menu ul.sub-menu ul.sub-menu {
        display: flex;
        flex-direction: column;
        margin: 36px 0 0 0;
        padding: 0;
        width: 100%;
    }
    header ul.menu ul.sub-menu ul.sub-menu::before {
        display: none;   
    }
    
    header .sub-menu-wrapper ul.sub-menu ul.sub-menu > li {
        width: 100%;
        max-width: 230px;
        padding: 3px 0;
    }

    header .sub-menu-outer a:hover {
        opacity: .4;
        transition: all .3s ease-in;
    }
    
    header .sub-menu-outer a {
        transition: all .3s ease-in;
    }
}


/* Search Page  */

.search-container .page-header  {
    margin-bottom: 75px;
}

.search-container.page-content  {
    margin: 65px 0 45px 0;
}

.search-container .image-container {
    overflow: hidden;
    height: 336px;
    position: relative;
}

.search-container .placeholder {
    height: 336px;
    background: #a1b2ba;
    position: relative;
}
.search-container .link-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.search-container .image-container img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
}

.search-container .search-title {
    display: block;
    text-align: center;
    margin: 19px 0 49px 0;
}

@media screen and (max-width: 1024px) {
    .search-container.page-content {
        margin-top: 125px;
    }
    
    .search-container.page-content {
        margin: 125px 0 45px 0;
    }
    .search-container .page-header {
        margin-bottom: 25px;
    }
    .search-container .search-title {
        margin: 12px 0 25px 0;
    }
    
    .search-container .image-container {
        height: 200px;
    }
    
    .search-container .placeholder {
        height: 200px;
    }
}

/* Blocks - General styling for all blocks.
** To add style to a specefic block add that here /assets/css/block/{blockname}.css
**/


.wp-block-columns {
    max-width: calc(1356px + 42px * 2);
    width: 100%;
    margin: 0 auto;
    padding: 0 42px;
}

@media screen and (max-width: 1024px) {
    .wp-block-columns {
        max-width: calc(886px + (22px * 2));
        padding: 0 22px;
    }
}



.wp-block-column:not(:first-child) {
    margin-left: 24px;
}


.block {
    overflow: hidden;
}

.wp-block-separator {
max-width: calc(1356px);
width: 100%;
}

span {
    color: #000 !important;
}

.no-underline {
    text-decoration: none;
    color: #000 !important;
}