/*========== MIN ==========*/
@media (min-width:576px) {
    
    .visible-mobile-sm { display: none !important;}

    /* GENERAL */
    .container.sm {
        max-width: calc(520px + var(--spacing-md)*2);
    }
    .container.xs {
        max-width: calc(498px + var(--spacing-md)*2);
    }

} 

@media (min-width:768px) {
    
    .visible-mobile { display: none !important;}

    /* GENERAL */
    .container {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
    .container.xxl {
        max-width: calc(1225px + var(--spacing-lg)*2);
    }
    .container.xl {
        max-width: calc(1140px + var(--spacing-lg)*2);
    }
    .container.lg {
        max-width: calc(1045px + var(--spacing-lg)*2);
    }
    .container.md {
        max-width: calc(935px + var(--spacing-lg)*2);
    }
    .container.sm {
        max-width: calc(520px + var(--spacing-lg)*2);
    }
    .container.xs {
        max-width: calc(498px + var(--spacing-lg)*2);
    }

    /* HAMBURGER */
    .ctrl.active > .hamburger {
        transform: translateX(4px);
    }
    .ctrl.active > .hamburger .bars {
        transform: translateY(-50%) rotate(45deg);
        transition-delay: 0s, .10s;
    }
    .ctrl.active > .hamburger .bars:before {
        top: 0;
        opacity: 0;
    }
    .ctrl.active > .hamburger .bars:after {
        bottom: 0;
        transform: rotate(-90deg);
        transition-delay: 0s, 0s, .10s;
    }

    /* HEADER */
    .header-panel {
        width: 370px;
        max-width: 50vw;
        transform: translateX(100%);
        color: #fff;
        background-color: rgba(0,0,0,0.8);
    }
    .header-panel.active {
        transform: none;
    }
    .header-panel .scene-logo,
    .header-panel .tools {
        display: none !important;
    }
    .header-panel .menu-dropdown {
        background: var(--color-theme);
        color: #fff;
    }
    .header-panel .menu-dropdown ul > li > ul {
        color: var(--color-gray);
    }
    html.header-panel-enabled .header-panel-ctrl {
        -webkit-filter: var(--filter-white);
        filter: var(--filter-white);
    }
    html.header-panel-enabled .header-menu {
        opacity: 0;
    }
    html:not(.page-scrolling) {
        --header-height: 105px;
    }
    html:not(.page-scrolling) .header-brand {
        padding-top: calc(var(--spacing-lg) - 7px);
        align-self: start;
    }
    html:not(.page-scrolling) #page.header-float-white .header-nav {
        color: #fff;
    }
    html:not(.page-scrolling) #page.header-float-white .header-brand,
    html:not(.page-scrolling) #page.header-float-white .header-panel-ctrl {
        -webkit-filter: var(--filter-white);
        filter: var(--filter-white);
    }

    /* FILTER */
    .filter-display {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        grid-gap: var(--spacing-xs) var(--spacing-md);
        align-items: baseline;
    }
    .filter-display .filter-ctrl {
        grid-row: 1;
        grid-column: 1;
        justify-self: start;
    }
    .filter-display .filter-wrapper {
        grid-row: 1;
        grid-column: 2;
        justify-self: center;
    }
    
    /* MODULES */
    .card-alignment .card {
        display: flex;
        justify-content: space-between;
    }
    .card-alignment .card .cover {
        width: 43.0622009569%;
    }
    .card-alignment .card .caption {
        width: calc(100% - 43.0622009569%);
        padding-top: var(--spacing-md);
        padding-left: var(--spacing-md);
    }
    .card-alignment .card .entry-title:not(:first-child),
    .card-alignment .card .entry-explore:not(:first-child) {
        margin-top: var(--spacing-sm);
    }
    .card-container.type-alignment > *:not(:first-child) {
        margin-top: var(--spacing-md);
    }

    .product-segment .card .cover .object-fit:before {
        padding-bottom: 145.8333333333%;
    }

    *[data-section="product-segment"] {
        z-index: 1;
        transition: var(--transition);
    }
    html:not(.page-scrolling) *[data-section="product-segment"] {
        padding-top: calc(var(--spacing-2xl) + 5px);
    }
    *[data-section="product-segment"] .product-segment .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    *[data-section="product-segment"] .product-segment .card {
        width: calc(50% - var(--spacing-lg)/2);
        height: -webkit-max-content;
        height: -moz-max-content;
        height: max-content;
    }
    *[data-section="product-segment"] .product-segment .card:nth-child(odd) {
        margin-top: var(--spacing-2xl-minus);
    }
    *[data-section="product-segment"] .product-segment .card:nth-child(even) {
        margin-top: 170px;
        margin-bottom: var(--spacing-2xl-minus);
    }

    .story-wrapper {
        position: relative;
    }
    .story-content > *,
    *[data-section="about-story"] *[data-story-id="1"] .story-title,
    *[data-section="about-story"] *[data-story-id="1"] .story-desc {
        width: 100%;
        max-width: 475px;
        margin-left: auto;
        margin-right: auto;
    }
    *[data-story-id="1"] {
        display: grid;
        grid-template-columns: repeat(2, calc(50% - var(--spacing-lg)/2));
        grid-auto-flow: dense;
        justify-content: space-between;
        padding: calc(var(--spacing-2xl) + var(--spacing-lg)) 0 var(--spacing-2xl);
    }
    *[data-story-id="1"] .story-title {
        grid-row: 1;
        grid-column: 1 / span 2;
    }
    *[data-story-id="1"] .story-desc {
        grid-row: 2;
        grid-column: 1 / span 2;
        margin-top: var(--spacing-xs);
    }
    *[data-story-id="1"] .story-desc > * {
        width: 100%;
        max-width: calc(50% + var(--spacing-xl)*2);
    }
    *[data-story-id="1"] .story-cover {
        grid-row: 3;
        grid-column: 1;
        margin-top: var(--spacing-lg);
    }
    *[data-story-id="1"] .story-content {
        grid-row: 3;
        grid-column: 2;
        align-self: center;
    }
    *[data-story-id="2"] {
        min-height: 100vh;
    }
    *[data-story-id="2"] .story-desc {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        color: #fff !important;
    }
    *[data-story-id="2"] .story-desc > * {
        width: 100%;
        height: 100vh;
        max-width: 475px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    *[data-story-id="2"] .story-cover[data-cover-id="2"],
    *[data-story-id="2"] .story-cover[data-cover-id="3"] {
        width: calc(50% - var(--spacing-2xl)/2);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: auto;
    }
    *[data-story-id="2"] .story-cover[data-cover-id="2"] {
        padding-top: 100vh;
    }
    *[data-story-id="2"] .story-cover[data-cover-id="2"] > *,
    *[data-section="about-story"] *[data-story-id="3"] .story-cover[data-cover-id="5"] > * {
        width: 62.3076923077%;
        margin-left: auto;
        margin-right: auto;
    }
    *[data-story-id="2"] .story-cover[data-cover-id="3"] > * {
        width: 38.8461538462%;
        margin-left: auto;
        margin-right: auto;
    }
    *[data-story-id="2"] .story-cover[data-cover-id="4"] {
        height: 100%;
        width: 100vw;
        max-width: 100vw;
        margin: 0 calc(50% - 50vw);
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: none;
    }
    *[data-story-id="2"] .story-cover[data-cover-id="4"] .object {
        width: 100%;
        height: 100vh;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    *[data-story-id="2"] .story-cover[data-cover-id="4"] .object > * {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
    }
    *[data-story-id="3"] {
        display: grid;
        grid-template-columns: repeat(2, calc(50% - var(--spacing-lg)/2));
        grid-auto-flow: dense;
        justify-content: space-between;
        margin-top: var(--spacing-lg-minus);
    }
    *[data-story-id="3"] .story-cover[data-cover-id="5"] {
        grid-row: 1;
        grid-column: 2;
    }
    *[data-story-id="3"] .story-content {
        grid-row: 1;
        grid-column: 1;
        align-self: center;
        padding-top: var(--spacing-2xl);
        padding-bottom: var(--spacing-2xl);
    }
    
    *[data-section="story"] {
        background-image: url(../img/common/story-scene1.svg), url(../img/common/story-scene2.svg);
        background-repeat: no-repeat;
        background-position: right top, left bottom;
        background-size: 30vw auto, 29vw auto;
    }
    
    *[data-section="about-story"] *[data-story-id="1"] {
        grid-template-rows: 1fr repeat(3,auto) 1fr;
    }
    *[data-section="about-story"] *[data-story-id="1"] .story-cover {
        grid-row: 1 / span 5;
        margin-top: 0;
        align-self: center;
    }
    *[data-section="about-story"] *[data-story-id="1"] .story-title {
        grid-column: 2;
        grid-row: 2;
    }
    *[data-section="about-story"] *[data-story-id="1"] .story-desc {
        grid-column: 2;
        grid-row: 3;
    }
    *[data-section="about-story"] *[data-story-id="1"] .story-desc > * {
        max-width: 100%;
    }
    *[data-section="about-story"] *[data-story-id="1"] .story-content {
        grid-row: 4;
        margin-top: var(--spacing-lg);
    }
    *[data-section="about-story"] *[data-story-id="3"] .story-scene {
        width: 100vw;
        margin: 0 calc(50% - 50vw);
        position: absolute;
        left: 0;
        right: 0;
        top: var(--spacing-md);
        pointer-events: none;
    }
    *[data-section="about-story"] *[data-story-id="3"] .story-scene > * {
        width: 47.0138888889vw;
        max-width: 678px;
        -webkit-mask-box-image: -webkit-linear-gradient(white 90%, transparent 100%);
    }
    *[data-section="about-story"] *[data-story-id="3"] .story-content {
        grid-row: 2;
        grid-column: 2;
    }
    
    *[data-section="about-intro"] .sc-inner {
        padding-bottom: 0;
    }
    *[data-section="about-intro"] .sc-headline:not(:last-child) {
        margin-bottom: var(--spacing-2xl);
    }
    *[data-section="about-intro"] .sc-content {
        position: relative;
    }
    *[data-section="about-intro"] .sc-content > *:not(:last-child) {
        margin-bottom: 0;
    }
    .about-intro {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
    }
    .about-intro > * {
        width: 410px;
        max-width: 50%;
    }
    .about-intro-cover {
        width: 60.9722222222vw;
        margin-left: auto;
        padding-top: 3vw;
    }

    .blog-layout {
        display: grid;
        grid-template-columns: repeat(2, calc(50% - var(--spacing-lg)/2));
        grid-template-rows: auto 1fr;
        justify-content: space-between;
    }
    .blog-gallery {
        grid-row: 1;
        grid-column: 2;
    }
    .blog-content {
        grid-row: 1;
        grid-column: 1;
    }
    .blog-content .entry {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--header-height) + var(--spacing-md));
    }
    .blog-content .entry > *:not(:last-child) {
        margin-bottom: var(--spacing-md);
    }

    .segment-story {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, calc(50% - var(--spacing-lg)/2));
        grid-auto-rows: -webkit-max-content;
        grid-auto-rows: max-content;
        grid-auto-flow: dense;
        justify-content: space-between;
    }
    .segment-story .story-expand {
        display: none;
    }
    .segment-story .story-content > *,
    .segment-story .story-desc > * {
        width: 100%;
        max-width: 475px;
        margin-left: auto;
        margin-right: auto;
    }
    .segment-story .story-content {
        grid-row: 1;
        grid-column: 1;
        padding-top: var(--spacing-md);
    }
    .segment-story .story-desc[data-desc-id="1"] {
        grid-row: 2;
        grid-column: 1;
        padding: var(--spacing-lg) 0;
    }
    .segment-story .story-desc[data-desc-id="2"] {
        grid-row: 4;
        grid-column: 1;
        align-self: center;
        text-align: center;
        color: #fff;
        padding: 0 var(--spacing-md);
    }
    .segment-story .story-desc[data-desc-id="2"] * {
        color: inherit;
    }
    .segment-story .story-cover[data-cover-id="1"] {
        grid-row: 1 / span 3;
        grid-column: 2;
        align-self: flex-end;
        margin-bottom: var(--spacing-2xl-minus);
    }
    .segment-story .story-cover[data-cover-id="2"] {
        grid-row: 4;
        grid-column: 2;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: var(--spacing-2xl);
    }
    .segment-story .story-cover[data-cover-id="2"] > * {
        width: 62.3076923077%;
        margin-left: auto;
        margin-right: auto;
    }
    .segment-story .story-cover[data-cover-id="3"] {
        height: 100vh;
        width: 100vw;
        max-width: 100vw;
        margin: 0 calc(50% - 50vw);
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: none;
    }
    .segment-story .story-cover[data-cover-id="3"] .object {
        width: 100%;
        height: 100vh;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    .segment-story .story-cover[data-cover-id="3"] .object > * {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
    }
    *[data-section="segment-story"] {
        background-image: url(../img/common/story-scene1.svg);
        background-repeat: no-repeat;
        background-position: right top;
        background-size: 30vw auto;
    }
    *[data-section="segment-story"] .sc-inner {
        padding-bottom: 0;
    }

    *[data-section="segment-product"] .sc-nav {
        display: none !important;
    }

    .segment-doc-container {
        position: relative;
        display: flex;
    }
    .segment-doc-container > .segment-doc {
        width: 50%;
    }
    .segment-doc-container > .segment-doc:nth-child(2) {
        padding: var(--spacing-xl);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: auto 100%;
    }
    *[data-segment="home-solution"] .segment-doc-container > .segment-doc:nth-child(2) {
        background-image: url(../img/common/home-solution-scene.svg);
    }
    *[data-segment="teak-furniture"] .segment-doc-container > .segment-doc:nth-child(2) {
        background-image: url(../img/common/teak-furniture-scene.svg);
    }

    *[data-card="product"].type-grid.all .card-grid:nth-child(10n+1),
    *[data-card="product"].type-grid.all .card-grid:nth-child(10n+2) {
        grid-row: span 2;
    }
    *[data-card="product"].type-grid.all .card-grid:nth-child(10n+1) .card,
    *[data-card="product"].type-grid.all .card-grid:nth-child(10n+2) .card {
        position: -webkit-sticky;
        position: sticky;
        top: var(--spacing-md);
    }

    .product-gallery.type-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: var(--spacing-2xl-minus);
    } 
    .product-gallery.type-flex .item {
        width: calc(50% - var(--spacing-lg)/2);
        margin-top: var(--spacing-2xl);
    }
    .product-gallery.type-flex .item:nth-child(4n+3),
    .product-gallery.type-flex .item:nth-child(4n+4) {
        width: 100%;
    }
    .product-gallery.type-flex .item:nth-child(4n+3) > *,
    .product-gallery.type-flex .item:nth-child(4n+4) > * {
        width: 57.0175438596%;
        margin: 0 auto;
    }
    .product-gallery.type-flex .item:nth-child(4n+2) {
        position: relative;
    }
    .product-gallery.type-flex .item:nth-child(4n+2):before {
        content: "";
        display: block;
        width: 38vw;
        height: 34vw;
        top: var(--spacing-xl);
        left: 100%;
        transform: translateX(-55%);
        position: absolute;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
        background-image: url(../img/common/scene2.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
    }
    .product-gallery.type-flex .item:nth-child(4n+2) > * {
        margin-top: 50%;
        z-index: 2;
    }

}

@media (min-width:992px) {
    
    .visible-device-sm { display: none !important;}
    .alignwide-on-device { width: 100% !important;}

    /* FOOTER */
    .footer-nav {
        padding-top: calc(var(--spacing-2xl) + var(--spacing-lg));
        padding-bottom: var(--spacing-lg);
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        grid-gap: calc(var(--spacing-2xl) + var(--spacing-lg)) var(--spacing-lg);
        justify-content: space-between;
        align-items: baseline;
    }
    .footer-nav .copyright {
        grid-column: span 2;
    }
    .footer-nav .directory {
        grid-row: 1;
        grid-column: 2;
    }
    .footer-nav .directory,
    .footer-nav .directory > .d-product {
        display: flex;
    }
    .footer-nav .directory > *,
    .footer-nav .directory > .d-product > * {
        flex: 1;
    }
    .footer-nav .directory > .d-product {
        flex: 2;
    }
    .footer-nav .directory > *:last-child {
        flex: none;
    }
    .footer-nav .directory > *:not(:last-child),
    .footer-nav .directory > .d-product > *:not(:last-child) {
        padding-right: var(--spacing-sm);
    }
    .footer-nav .directory li > ul:not(:first-child),
    .footer-nav .directory li:not(.break):not(:first-child) {
        margin-top: var(--spacing-2xs);
    }
    .footer-nav .directory > .d-product ul > li > ul {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
    }
    .footer-nav .directory > .d-product ul > li > ul:not(:first-child) {
        margin-top: var(--spacing-2xs) !important;
    }

    /* MAIN */
    .scene-bg.style1 {
        background-image: url(../img/common/scene-bg1.svg);
        background-position: center top 200px;
    }
    .scene-bg.style2 {
        background-image: url(../img/common/scene-bg1.svg);
        background-position: center top -100px;
    }
    .scene-bg.style3 {
        background-image: url(../img/common/scene-bg2.svg);
        background-position: right 30px top 160px;
    }
    .scene-bg.style4 {
        background-image: url(../img/common/scene-bg3.svg);
        background-position: left top;
        background-size: auto 100%;
    }

    /* FILTER */
    .fn .select2-dropdown,
    .fn .fn-panel {
        max-width: calc(50vw - var(--spacing-lg)) !important;
    }

    /* MODULES */
    .card-alignment .card .caption {
        padding-left: var(--spacing-lg);
    }

    *[data-section="contact-detail"] {
        z-index: 1;
    }
    *[data-section="contact-detail"] .sc-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    *[data-section="contact-detail"] .sc-container > * {
        width: calc(50% - var(--spacing-2xl)/2);
    }
    .contact-detail {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    .contact-detail .scene {
        width: 306px;
        bottom: var(--spacing-lg-minus);
        transform: translateX(50%);
    }
    .contact-map {
        height: -webkit-max-content;
        height: -moz-max-content;
        height: max-content;
        align-self: flex-end;
        margin-bottom: var(--spacing-lg-minus) !important;
    }

    *[data-story-id="1"],
    *[data-story-id="3"],
    .segment-story,
    .blog-layout {
        grid-template-columns: repeat(2, calc(50% - var(--spacing-2xl)/2));
    }

    *[data-section="product-segment"] .product-segment .card {
        width: calc(50% - var(--spacing-2xl)/2);
    }

    *[data-section="project-ref"].style-boxes {
        background: #fff;
    }
    *[data-section="project-ref"].style-boxes .sc-inner {
        width: 50%;
        margin-left: auto;
    }
    *[data-section="project-ref"].style-boxes .sc-container {
        display: flex;
        flex-direction: column;
        min-height: calc(50vw - var(--spacing-2xl)*2);
    }
    *[data-section="project-ref"].style-boxes .sc-headline {
        flex: 1;
    }
    *[data-section="project-ref"].style-boxes .project-ref-cover {
        margin: 0 !important;
        width: 50%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    *[data-section="project-ref"].style-boxes .project-ref-cover .swiper-container,
    *[data-section="project-ref"].style-boxes .project-ref-cover .swiper-wrapper,
    *[data-section="project-ref"].style-boxes .project-ref-cover .swiper-slide,
    *[data-section="project-ref"].style-boxes .project-ref-cover .swiper-slide .object-fit,
    *[data-section="project-ref"].style-boxes .project-ref-cover .swiper-slide .object-fit:before {
        height: 100%;
    }
    *[data-section="project-ref"].style-boxes .project-ref-cover .ref-cover > *[class*="object"]:not(:nth-child(1)) {
        display: none;
    }

    .segment-doc-container > .segment-doc:nth-child(2) {
        padding: calc(var(--spacing-lg)*2);
    }

    .product-gallery.type-flex .item {
        width: calc(50% - var(--spacing-2xl)/2);
    }
    
}

@media (min-width:1025px) {
    
    .visible-device { display: none !important;}
    
    /* MODULES */
    .about-intro .entry-title > strong + span {
        padding-left: 110px;
    }
    .about-intro-cover {
        padding-top: 0;
    }
    
}

@media (min-width:1200px) {
    
    .visible-device-lg { display: none !important;}

    /* FOOTER */
    .footer-nav {
        grid-template-columns: 450px 46.3888888889vw;
    }

    /* MODULES */
    .segment-doc-container > .segment-doc:nth-child(2) {
        padding: calc(var(--spacing-xl)*2);
    }

}

/*========== MAX ==========*/
@media (max-width:1199px) {
    
    .hidden-device-lg { display: none !important;}

    /* MODULES */
    .card-container.type-slider {
        margin-left: var(--spacing-md-minus);
        margin-right: var(--spacing-md-minus);
    }
    .card-container.type-slider,
    .card-container.type-slider .swiper-slide {
        padding-left: calc(var(--spacing-md)/2);
        padding-right: calc(var(--spacing-md)/2);
    }
    .card-container.type-slider [class*="swiper-button-"] {
        width: var(--spacing-md);
    }

    *[data-card="catalogue"].type-grid {
        grid-column-gap: var(--spacing-lg);
    }
    
}

@media (max-width:1024px) {
    
    .hidden-device { display: none !important;}
    
}

@media (max-width:991px) {
    
    .hidden-device-sm { display: none !important;}
    .padding-0-device-sm { padding: 0 !important;}
    .padding-top-0-device-sm { padding-top: 0 !important;}
    .padding-bottom-0-device-sm { padding-bottom: 0 !important;}
    .alignfull-device-sm { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;}
    
    /* GENERAL */
    .map-container:before {
        padding-bottom: 167.5%;
    }

    /* POPUP */
    .popup-style-gallery .mfp-arrow-left {
        left: var(--spacing-sm) !important;
    }
    .popup-style-gallery .mfp-arrow-right {
        right: var(--spacing-sm) !important;
    }
    .popup-style-gallery .mfp-custom-media-wrapper > * {
        width: 100% !important;
    }
    .popup-style-gallery .mfp-custom-ctrl {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
    }

    /* SLIDER */
    .swiper-button-prev {
        padding-left: var(--spacing-xs);
    }
    .swiper-button-next {
        padding-right: var(--spacing-xs);
    }
    
    /* FOOTER */
    .footer-nav {
        padding-top: var(--spacing-2xl);
        padding-bottom: var(--spacing-xs);
    }
    .footer-nav > *:not(:first-child) {
        margin-top: var(--spacing-xl);
    }
    .footer-nav .directory {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
        grid-gap: var(--spacing-md);
    }
    .footer-nav .directory > * {
        grid-column: 2;
    }
    .footer-nav .directory > .d-product {
        grid-column: 1;
        grid-row: span 2;
    }
    .footer-nav .directory > .d-product > *:not(:first-child) {
        margin-top: var(--spacing-md);
    }
    .footer-nav .directory li > ul:not(:first-child),
    .footer-nav .directory li:not(.break):not(:first-child) {
        margin-top: var(--spacing-2xs);
    }
    .footer-nav .directory > .d-product > ul > li > ul {
        display: none;
    }
    .footer-nav .directory > .d-product > ul > li > a {
        display: flex;
    }
    .footer-nav .directory > .d-product > ul > li > a:after {
        font-family: 'iconfont';
        content: "\e904";
        font-size: 6px;
        align-self: center;
        padding-left: var(--spacing-3xs);
    }
    .footer-nav .directory > .d-product > ul > li.active > a:after {
        content: "\e903";
    }

    #addon {
        right: calc(var(--spacing-md)/2);
    }
    #backtotop {
        right: calc(var(--spacing-md)/2);
        top: calc(-62px/2);
    }

    /* MAIN */
    .scene-bg.style1 {
        background-image: url(../img/common/scene-bg1-m.svg);
        background-position: center top 470px;
    }
    .scene-bg.style2 {
        background-image: url(../img/common/scene-bg1-m.svg);
        background-position: center top 350px;
    }
    .scene-bg.style3 {
        background-image: url(../img/common/scene-bg2-m.svg);
        background-position: center top 700px;
    }
    .scene-bg.style4 {
        background-image: url(../img/common/scene-bg3-m.svg);
        background-position: left top;
        background-size: 50vw auto;
    }

    /* SECTION */
    .sc-inner.pull {
        padding-top: var(--spacing-sm);
    }

    .sc-billboard .sc-cover .object-fit:before {
        padding-bottom: 186.6666666667%;
    }
    .sc-billboard.h-full-device-m .sc-cover .object-fit:before {
        padding-bottom: 0 !important;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }
    @supports (-webkit-touch-callout:none) {
        .instagram-browser .sc-billboard.h-full-device-m .sc-cover .object-fit:before {
            height: 100vh;
        }
    }

    .sc-menu:not(.destroy-device-sm) {
        width: 100vw !important; 
        max-width: 100vw !important; 
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    .sc-menu.destroy-device-sm .swiper-wrapper,
    .sc-menu.destroy-device-sm .swiper-slide {
        transform: none !important;
        width: 100% !important;
        flex-direction: column;
    }
    .sc-menu.destroy-device-sm .swiper-slide {
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .sc-menu.destroy-device-sm .swiper-slide:not(:last-child) {
        padding-right: 0;
    }
    
    /* MODULES */
    .card-container.type-grid {
        grid-gap: var(--spacing-lg);
    }
    
    .card-container.type-slider .swiper-slide {
        width: calc(100%/2) !important;
    }

    *[data-card="catalogue"].type-grid,
    *[data-card="product"].type-grid.all {
        grid-column-gap: var(--spacing-md);
    }
    
    .contact-detail {
        position: relative;
        z-index: 1;
        padding-bottom: calc(53.3333333333vw/1.5);
    }
    .contact-detail .scene {
        width: 53.3333333333vw;
        max-width: 306px;
        right: var(--spacing-md-minus);
        bottom: var(--spacing-md-minus);
    }
    .contact-map {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    *[data-section="story"] + *[data-section="project-ref"] .sc-inner {
        padding-top: 0;
    }
    
    *[data-section="project-ref"].style-boxes .project-ref-cover  {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    *[data-section="project-ref"].style-boxes .project-ref-cover .ref-cover {
        display: flex;
    }
    *[data-section="project-ref"].style-boxes .project-ref-cover .ref-cover > * {
        width: 50%;
    }
    *[data-section="project-ref"].style-boxes .project-ref-cover .ref-cover > *:not(:last-child) {
        margin-right: 1px;
    }
    *[data-section="project-ref"].style-boxes .sc-explore {
        text-align: center;
    }

    .about-timeline {
        width: 100vw;
        max-width: 100vw;
        margin: 0 calc(50% - 50vw);
    }
    .timeline-ctrls .sc-menu-wrapper .swiper-slide:first-child {
        padding-left: var(--spacing-md);
    }
    .timeline-ctrls .sc-menu-wrapper .swiper-slide:last-child {
        padding-right: var(--spacing-md);
    }

    /* SCENE */
    #footer .scene-logo {
        width: 86.6666666667vw;
        max-width: 530px;
        transform: translateY(-80px);
        max-height: calc(100% + 80px);
    }
    #footer .scene-logo > * {
        transform: translateX(80px);
    }

}

@media (max-width:767px) {
    
    .hidden-mobile { display: none !important;}
    .padding-top-header { padding-top: calc(var(--header-height) + var(--spacing-lg) + var(--spacing-md)) !important;}

    :root {
        --font-size-h3: 26px;
        --font-size-h2: 30px;
        --font-size-h1: 30px;
        --spacing-2xl: 80px;
        --spacing-2xl-minus: -80px;
        --spacing-xl: 60px;
        --spacing-xl-minus: -60px;
        --spacing-lg: 40px;
        --spacing-lg-minus: -40px;
    }

    /* GENERAL */
    .container,
    .header-panel .inner,
    .header-panel .menu-dropdown {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    /* CTAs */
    .button.fixwidth {
        width: 100%;
    }
    
    /* HAMBURGER */
    .ctrl.active > .hamburger .bars:before,
    .ctrl.active > .hamburger .bars:after {
        background-color: transparent;
    }

    /* HEADER */
    .header-nav {
        padding-left: var(--spacing-xs);
        padding-right: var(--spacing-xs);
    }
    .header-brand {
        position: relative;
        z-index: 101;
    }
    .header-brand .brand .logo {
        height: 40px;
    }
    .header-panel {
        opacity: 0;
        color: var(--color-theme);
        background: #fff;
    }
    .header-panel.active {
        opacity: 1;
    }
    .header-panel .inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: calc(var(--spacing-lg) - var(--spacing-sm));
        padding-bottom: var(--spacing-md);
    }
    .header-panel .inner > *:not(:last-child) {
        margin-bottom: var(--spacing-lg);
    }
    .header-panel .menu li {
        justify-content: center;
        text-align: center;
    }
    .header-panel .menu.m-highlight {
        color: var(--color-theme-wood);
    }
    .header-panel .menu-dropdown {
        background-color: var(--color-gray-bright);
        color: var(--color-theme-darkwood);
        width: calc(100% + var(--spacing-md)*2);
        margin-left: var(--spacing-md-minus);
        margin-right: var(--spacing-md-minus);
    }
    .header-panel .menu-dropdown ul > li > ul {
        color: var(--color-theme-wood);
    }
    .header-panel .tools {
        padding: 0 var(--spacing-md) var(--spacing-md);
        display: grid;
        grid-template-columns: 1fr auto;
        grid-auto-flow: dense;
        grid-gap: var(--spacing-md);
        align-items: end;
    }
    .header-panel .tools .t-appointment {
        width: 100%;
        grid-row: 1;
        grid-column: span 2;
    }
    .header-panel .tools .t-contact {
        grid-row: 2;
        font-size: var(--font-size-xs);
        color: var(--color-theme-wood);
        line-height: 1;
    }
    .header-panel .tools .t-contact > *:not(:last-child) {
        margin-bottom: var(--spacing-2xs);
    }
    .header-panel .tools .t-social {
        grid-row: 2;
        font-size: var(--font-size-xs);
        color: var(--color-theme-wood);
    }
    .header-brand {
        transition: var(--transition-x2);
    }
    .header-menu {
        grid-row: auto;
        grid-column: auto;
        min-height: 20px;
        display: flex;
        align-items: center;
        position: absolute;
        z-index: 101;
        left: var(--spacing-sm);
        top: var(--spacing-sm);
        opacity: 0;
        pointer-events: none;
    }

    
    html.header-panel-enabled .header-brand {
        transform: translateY(18px);
    }
    html:not(.page-scrolling):not(.header-panel-enabled) .header-brand {
        transform: translateY( calc(100% + (var(--header-height) - var(--logo-height))*2 ) );
    }
    html:not(.page-scrolling):not(.header-panel-enabled) .header-menu {
        opacity: 1;
        pointer-events: auto;
    }
    html:not(.page-scrolling):not(.header-panel-enabled) #page.header-float-white .header-nav {
        color: #fff;
    }
    html:not(.page-scrolling):not(.header-panel-enabled) #page.header-float-white .header-brand,
    html:not(.page-scrolling):not(.header-panel-enabled) #page.header-float-white .header-panel-ctrl {
        -webkit-filter: var(--filter-white);
        filter: var(--filter-white);
    }

    /* POST */
    .entry-content .wp-block-gallery .blocks-gallery-grid {
        grid-template-columns: repeat(2,1fr) !important;
    }
    .entry-content .wp-block-gallery .blocks-gallery-grid:nth-child(odd):last-child {
        grid-column: span 2 !important;
    }
    .entry-content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
    }
    .entry-content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {
        margin-top: var(--spacing-lg) !important;
    }

    /* FILTER */
    .filter-display > *:not(:first-child) {
        margin-top: var(--spacing-xs);
    }

    /* MODULES */
    .card-alignment .card .entry-explore {
        display: none;
    }

    .card-container.type-grid {
        grid-template-columns: 100%;
        grid-gap: var(--spacing-md) 0;
    }

    .card-container.type-slider .swiper-slide {
        width: 100% !important;
    }
    .card-container.type-slider .swiper-container {
        overflow: visible;
    }

    *[data-card="catalogue"] .card .cover {
        width: 60.2666666667vw;
        margin-left: auto;
        margin-right: auto;
    }
    *[data-card="catalogue"] .card .caption {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }
    *[data-card="catalogue"] .card .caption > *:not(:first-child) {
        margin-top: 0;
        margin-left: var(--spacing-xs);
    }
    *[data-card="catalogue"].type-grid .card-grid {
        max-width: 100%;
    }

    *[data-card="product"].type-grid {
        grid-template-columns: repeat(2,1fr);
        grid-gap: var(--spacing-lg) var(--spacing-md);
    }

    *[data-section="404"] .sc-inner {
        padding-top: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
    }

    #highlight .sc-billboard .sc-inner:before {
        content: "";
        display: block;
        width: 100%;
        height: 48vw;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
        opacity: 0.8;
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        pointer-events: none;
    }
    #highlight.c-white .sc-billboard .sc-inner:before {
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    }
    #highlight .sc-billboard .sc-headline[data-pos-m="bottom"] {
        grid-row: 3;
        align-self: end;
    }
    #highlight [class*="swiper-button-"] {
        top: auto;
        bottom: var(--spacing-2xl);
        transform: none;
    }

    .product-segment .card .cover .object-fit:before {
        padding-bottom: 80%;
    }
    *[data-section="product-segment"] .product-segment {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    
    .story-container > *:not(:first-child) {
        margin-top: var(--spacing-xl);
    }
    .story-wrapper > *:not(:first-child) {
        margin-top: var(--spacing-xl);
    }
    .story-wrapper > .story-title + .story-cover {
        margin-top: var(--spacing-md);
    }
    .story-wrapper > .story-desc + .story-content {
        margin-top: var(--spacing-xs);
    }
    *[data-story-id="2"] .story-cover[data-cover-id="2"] {
        width: 50vw;
        margin-left: var(--spacing-md-minus);
        margin-right: auto;
    }
    *[data-story-id="2"] .story-cover[data-cover-id="3"] {
        width: 36vw;
        margin-left: auto;
        margin-right: var(--spacing-md-minus);
        margin-top: -24vw;
    }
    *[data-story-id="2"] .story-cover[data-cover-id="4"] > *:not(:first-child) {
        margin-top: var(--spacing-md);
    }
    *[data-story-id="2"] .story-desc {
        width: calc(50% + var(--spacing-md));
        margin-top: var(--spacing-lg-minus);
    }
    
    *[data-section="story"] {
        background-image: url(../img/common/story-scene1-m.svg), url(../img/common/story-scene2-m.svg);
        background-repeat: no-repeat;
        background-position: right top, left bottom 53vw;
        background-size: 67vw auto, 45vw auto;
    }
    *[data-section="about-story"] {
        background-image: url(../img/common/story-scene2-m.svg);
        background-repeat: no-repeat;
        background-position: left bottom calc(54vw + var(--spacing-2xl));
        background-size: 45vw auto;
    }
    *[data-section="about-story"] *[data-story-id="2"] .story-scene {
        margin-top: 0;
        margin-left: var(--spacing-md-minus);
    }
    *[data-section="about-story"] *[data-story-id="2"] .story-scene > * {
        width: calc(100% - var(--spacing-md));
        -webkit-mask-box-image: -webkit-linear-gradient(white 90%, transparent 100%);
    }
    *[data-section="about-story"] *[data-story-id="2"] .story-desc {
        width: 100%;
        text-align: center;
        margin-top: 0;
    }

    .about-intro-scene {
        width: 96vw;
        left: auto;
        right: 0;
        transform: translateY(75%);
    }
    .about-intro-scene > * {
        margin-left: 35vw;
    }
    .about-timeline-scene {
        display: none !important;
    }

    *[data-section="project-ref"].style-screen .project-ref-ctrls {
        -webkit-mask-box-image: -webkit-linear-gradient(-90deg, transparent 155px, white 195px);
    }

    .blog-layout > *:not(:last-child) {
        margin-bottom: var(--spacing-lg);
    }
    .blog-gallery .entry-gallery > *:nth-child(even) {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .segment-story > *:not(.story-expand):not(.story-content) {
        display: none;
    }
    .segment-story .story-expand {
        text-align: center;
        padding: var(--spacing-lg) 0 var(--spacing-2xl);
        border-bottom: 1px solid;
    }
    .segment-story:not(.expand) .story-content {
        -webkit-mask-box-image: -webkit-linear-gradient(90deg, transparent 0%, white var(--spacing-2xl));
    }
    .segment-story .story-desc[data-desc-id="1"] {
        text-align: center;
    }
    .segment-story .story-desc[data-desc-id="1"],
    .segment-story .story-cover[data-cover-id="1"] {
        margin-top: var(--spacing-2xl);
    }
    .segment-story .story-cover[data-cover-id="1"] {
        width: 50vw;
        margin-left: var(--spacing-md-minus);
        margin-right: auto;
        position: relative;
    }
    .segment-story .story-cover[data-cover-id="1"]:before {
        content: "";
        display: block;
        width: 100vw;
        height: 100vw;
        top: var(--spacing-2xs);
        left: 0;
        position: absolute;
        z-index: -1;
        overflow: hidden;
        pointer-events: none;
        background-image: url(../img/common/scene2.svg);
        background-repeat: no-repeat;
        background-position: left 36vw center;
        background-size: 100% 100%;
    }
    *[data-segment="teak-furniture"] .segment-story .story-cover[data-cover-id="1"]:before {
        top: var(--spacing-lg-minus);
        background-position: right -50vw top;
        background-size: 100% 70%;
    }
    .segment-story .story-cover[data-cover-id="2"] {
        width: 36vw;
        margin-left: auto;
        margin-right: var(--spacing-md-minus);
        margin-top: -24vw;
    }
    .segment-story .story-desc[data-desc-id="2"] {
        width: calc(50% + var(--spacing-md));
        margin-top: var(--spacing-lg-minus);
        color: var(--color-theme);
    }
    .segment-story .story-desc[data-desc-id="2"] * {
        color: inherit;
    }
    .segment-story .story-cover[data-cover-id="3"] {
        width: 100vw;
        max-width: 100vw;
        margin: var(--spacing-2xl) calc(50% - 50vw) 0;
    }
    *[data-section="segment-story"] {
        overflow: hidden;
    }
    *[data-section="segment-story"] .sc-inner {
        padding-bottom: 0;
    }
    
    *[data-section="segment-product"] .sc-inner {
        padding-top: 0;
    }
    *[data-section="segment-product"] .sc-nav {
        width: 100vw;
        max-width: 100vw;
        margin: 0 calc(50% - 50vw);
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--color-gray-light);
        color: var(--color-body);
        font-family: var(--font-heading);
        font-size: var(--font-size-body);
        text-transform: uppercase;
        line-height: 1;
        overflow: hidden;
        position: -webkit-sticky;
        position: sticky;
        top: var(--header-height);
        z-index: 10;
    }
    *[data-section="segment-product"] .sc-nav a {
        opacity: 1;
        height: 64px;
        width: auto;
        min-width: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
    }
    *[data-section="segment-product"] .sc-nav a:before {
        content: "";
        display: block;
        width: 64px;
        height: 64px;
        background: url(../img/common/scene2.svg) no-repeat center center;
        background-size: 100% 100%;
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
        transition: opacity var(--transition-x2);
    }
    *[data-section="segment-product"] .sc-nav a.active {
        color: var(--color-theme);
    }
    *[data-section="segment-product"] .sc-nav a.active:before {
        opacity: 1;
    }
    *[data-section="segment-product"] .sc-nav .swiper-slide:not(:last-child) {
        padding-right: var(--spacing-lg);
    }

    .segment-doc-container {
        position: relative;
        padding: calc(var(--spacing-2xl) + var(--spacing-lg)) 0;
    }
    .segment-doc-container > .segment-doc {
        width: calc(100% - var(--spacing-md)*2);
    }
    .segment-doc-container > .segment-doc:not(:first-child) {
        margin-top: var(--spacing-lg);
    }
    .segment-doc-container > .segment-doc:nth-child(odd) {
        margin-right: auto;
    }
    .segment-doc-container > .segment-doc:nth-child(even) {
        margin-left: auto;
    }
    .segment-doc-container:before {
        content: "";
        display: block;
        width: 86vw;
        height: 86vw;
        background-image: url(../img/common/scene2.svg);
        background-repeat: no-repeat;
        background-position: right 33vw top;
        background-size: contain;
        mix-blend-mode: overlay;
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(var(--spacing-lg-minus));
    }

    .product-gallery.type-flex .item,
    .product-gallery.type-flex .item > * {
        width: 100%;
        margin: 0;
    }
    .product-gallery.type-flex .item:not(:first-child) {
        margin-top: var(--spacing-md);
    }
    .product-gallery.type-flex .item:nth-child(4n+1) > * {
        width: calc(50% + var(--spacing-md));
        margin-left: var(--spacing-md-minus);
        margin-right: auto;
    } 
    .product-gallery.type-flex .item:nth-child(4n+2) > * {
        width: 36vw;
        margin-left: auto;
        margin-right: var(--spacing-md-minus);
    }
    .product-gallery.type-flex .item:nth-child(4n+2) {
        margin-top: -24vw;
    }
    .product-gallery.type-flex .item:nth-child(4n+1):before {
        content: "";
        display: block;
        width: 100vw;
        height: 100vw;
        top: var(--spacing-2xs);
        left: 0;
        position: absolute;
        z-index: -1;
        overflow: hidden;
        pointer-events: none;
        background-image: url(../img/common/scene2.svg);
        background-repeat: no-repeat;
        background-position: left 36vw center;
        background-size: 100% 100%;
    }
    .product-gallery.type-flex .item:nth-child(4n+3) {
        margin-top: var(--spacing-2xl);
    }
    
}

@media (max-width:575px) {
    
    .hidden-mobile-sm { display: none !important;}
    
}

/*========== MIN AND MAX ==========*/
@media (min-width:992px) and (max-width:1365px) {

    /* MODULES */    
    .contact-detail {
        position: static;
    }
    .contact-detail .scene {
        transform: translateX(-7px);
        max-width: 25.5212677231vw;
    }
    
}

@media (min-width:768px) and (max-width:1240px) {

    .blog-gallery .entry-gallery .object > * {
        max-height: 47.1774193548vw;
    }

}