/**
 * Theme Name:     Mercuurs
 * Author:         Flirt Creativity
 * Text Domain:    Mercuurs
 * Theme URI:      https://www.mercuurs.nl
 * Author URI:     https://flirtcreativity.com
 * Version:        1.0.1
 */


/* =============================================================================
   CSS VARIABELEN
   ============================================================================= */

:root {
    --yellow-bg: url('./assets/images/linnen.webp');
    --blue-bg: radial-gradient( circle at 20% 70%,  #2D455A 0%,  #181919 25%,  #0D1D2C 60%);
    --blue-text-color:      #0d1d2c;
    --yellow-text-color:    #ffdd93;
    --white-text-color:     #ffffff;
    --grey-current-color:   #adb7bc;
    --form-bg:              #faf3e3;
    --form-border:          #e5d7b8;
}


/* =============================================================================
   ANIMATIES
   ============================================================================= */

@keyframes footer {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

@keyframes footerReverse {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0%); }
}


/* =============================================================================
   RESET & BASE
   ============================================================================= */

html,
body {
    margin: 0 !important;
    padding: 0;
    top: 0;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    font-family: "Nuckle";
    font-weight: 500;
    font-size: 16px;
    scroll-behavior: smooth !important;
    overflow-x: hidden;
}

header {
    position: fixed !important;
    z-index: 100;
}

p {
    margin-top: 0;
    line-height: 28px;
}

h1,
h2,
h3 {
    font-family: "Wimberley";
    font-weight: 100;
    text-transform: uppercase;
    /* white-space: nowrap; */
    filter: brightness(100%) !important;
}

h1 { font-size: 90px; }

h2 {
    font-size: 60px;
    color: var(--white-text-color);
    padding: 0;
    margin-top: 0;
}

h3 {
    font-size: 48px;
    color: var(--black-text-color);
    margin-top: 0;
}

small {
    font-size: 10px;
    line-height: 12px;
}

ul { padding-left: 0; }

li {
    list-style: none;
    transition: 0.25s;
    font-size: 14px;
    opacity: 0.5;
    z-index: -1;
    color: var(--grey-current-color);
    cursor: pointer;
}

li a {
    font-size: 14px;
    z-index: -1;
    color: var(--grey-current-color);
    text-decoration: none;
}

button:focus { outline: 0; }


/* =============================================================================
   MENU TRIGGER BUTTON
   ============================================================================= */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    box-sizing: border-box;
    transition: background-color .3s ease, backdrop-filter .3s ease;
}

.topbar.is-scrolled {
    background-color: rgba(13, 29, 44, .45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.top-logo img {
    width: 118px;
    height: auto;
    display: block;
}

.menu-trigger {
    position: static;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--white-text-color);
    text-transform: uppercase;    
    font-family: "Wimberley";
    font-weight: 100;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    padding: 0;
}
.menu-trigger i {
    margin-left: 5px;
}

/* =============================================================================
   MENU OVERLAY
   ============================================================================= */

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.menu-overlay__link  { font-size: 90px; }
.menu-overlay__submenu-container .menu-overlay__submenu {
    display: block;
    max-height: none;
    opacity: 1;
    overflow: visible;
    transform: none;
    animation: submenuFadeIn 0.3s ease;
}

@keyframes submenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-overlay__submenu-container .menu-overlay__submenu li {
    opacity: 1;
}

.menu-overlay__submenu-container .menu-overlay__sublink {
    color: var(--blue-text-color);
    font-size: 16px;
    line-height: 28px;
}
.menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.menu-overlay__inner {
    display: grid;
    grid-template-columns: 310px 1fr 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
    width: 100vw;
    position: relative;
}

/* Logo kolom */
.menu-overlay__logo {
    background: #0D1D2C;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    overflow: hidden;
}

.menu-overlay__logo .logo-homepage {
    width: 100vw;
    max-width: 710px;
    padding: 0;
    margin-left: 0 !important;
    transform: rotate(-90deg);
    transform-origin: center center;
}

/* Nav kolom */
.menu-overlay__nav {
    background:  radial-gradient( circle,  #2D455A 0%,  #0D1D2C 25%,  #0D1D2C 60%);

    display: flex;
    justify-content: center;
    align-items: baseline;
    padding: 15% 48px;

    position: relative;
    overflow: hidden;
  
}
.menu-overlay__nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;
}
.menu-overlay__list {
    list-style: none;
    margin: 0;
    padding: 0;
        position: relative;
    z-index: 2;
}

.menu-overlay__item {
    margin-bottom: 8px;
    opacity: 1 !important;
}

.menu-overlay__link {
    font-family: "Wimberley";
    font-size: 48px;
    font-weight: 100;
    text-transform: uppercase;
    color: var(--white-text-color);

    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
    display: block;
    line-height: 1.5em;
    opacity: 1 !important;
}
@media only screen and (min-width: 1440px) {
    .menu-overlay__link {
        font-size: 70px;
    }
}

.menu-overlay__item.is-active .menu-overlay__link,
.menu-overlay__link:hover {
    color: var(--yellow-text-color);
}

.menu-overlay__submenu {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    transition:
        max-height 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}
/* =====================================
   Achtergrondafbeelding menu
   ===================================== */

.menu-overlay__nav {
    position: relative;
    overflow: hidden;
}

.menu-overlay__list {
    position: relative;
    z-index: 3;
}

/* =====================================
   Afbeelding rechterkolom
   ===================================== */

.menu-overlay__contact {
    background: var(--yellow-bg);
    display: flex;
    flex-direction: column;
    padding: 64px;
    overflow-y: auto;
    position: relative;
}

.menu-overlay__contact:not(.has-submenu-active) .menu-overlay__submenu-container,
.menu-overlay__contact:not(.has-submenu-active) .menu-overlay__image-wrap {
    display: none;
}

.menu-overlay__contact:not(.has-submenu-active) .menu-overlay__contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    margin-top: 0;
    height: 100%;
}

.menu-overlay__contact.has-submenu-active .menu-overlay__submenu-container {
    position: absolute;
    top: 30%;
    left: 48px;
    right: 48px;
    z-index: 20;
    transform: translateY(-30%);
    height : 50vh;    
}

.menu-overlay__contact.has-submenu-active .menu-overlay__contact-info {
    display: none;
}

.menu-overlay__contact.has-submenu-active .menu-overlay__image-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 50%;
    z-index: 10;
}

.menu-overlay__contact.has-submenu-active .menu-overlay__image-wrap img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;    
    bottom: 0px;

}
.menu-overlay__contact.has-submenu-active .menu-overlay__image-wrap.is-visible img {
    position: relative;
    opacity: 1;
    /* bottom: 0px;
    animation-name: menuimage;
    animation-duration: .3s; */
}

@keyframes menuimage {
  0%   {bottom: -200px;}

  100% {bottom: 0px;}
}

.menu-overlay__submenu-container,
.menu-overlay__contact-info {
    position: relative;
    z-index: 20;
}
/* Content boven de afbeelding */
.menu-overlay__submenu-container,
.menu-overlay__contact-info {
    position: relative;
    z-index: 2;
}
/* Contact kolom */
.menu-overlay__contact {
    background-color: var(--yellow-bg);
    display: flex;
    flex-direction: column;
    padding: 64px 48px;
    overflow-y: auto;
}

.menu-overlay__submenu-container {
    flex: 1;
    display: flex;
    position: absolute;
    top: 30%;
    left: 48px;
    right: 48px;

    z-index: 20;
}

.menu-overlay__contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 40px;
}
.menu-overlay__submenu-container .menu-overlay__submenu {
    display: block;
    max-height: none;
    opacity: 1;
    overflow: visible;
    transform: none;
    margin: 0;
    padding: 0;
    animation: submenuFadeIn 0.3s ease;
}

.menu-overlay__submenu-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-overlay__submenu-container li {
    margin-bottom: 24px;
    opacity: 1;
    color: var(--blue-text-color);
}

.menu-overlay__submenu-container .menu-overlay__sublink {
    display: block;
    color: var(--blue-text-color);
    font-size: 24px;
    line-height: 1.4;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s ease;
    opacity: 1 !important;
}

.menu-overlay__submenu-container .menu-overlay__sublink:hover {
    font-weight: bold;
}

.menu-overlay__contact-info {
    margin-top: auto;
}
@media screen and (min-width: 815px) {
    p.p-section {
        margin-bottom: 66px;
    }
}
.menu-overlay__contact-info p {
    font-size: 18px;
    color: var(--blue-text-color);
    line-height: 2;
    margin-top: 0;
}
@media screen and (min-width: 815px) {
    .menu-overlay__contact-info p {
        font-size: 28px;
    }
}
.menu-overlay__contact-info a {
    color: var(--blue-text-color);
    text-decoration: none;
}

.menu-overlay__socials {

    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}
@media screen and (min-width: 815px) {
    .menu-overlay__socials {
        margin-top: -66px;
    }
}
.menu-overlay__socials img {
    width: 20px;
    height: 20px;
    filter: invert(1) sepia(1) saturate(0) brightness(0);
}

.menu-overlay__allergenen { margin-bottom: 24px; }

.menu-overlay__allergenen p {
    font-size: 16px;
    /* line-height: 18px; */
}

.menu-overlay__partners .partners-svg {
    width: 100%;
    max-width: 300px;
    filter: invert(1) sepia(1) saturate(0) brightness(0);
}
.menu-overlay__partners .partner{
    height: 26px;
    width: auto;
}
@media screen and (min-width: 815px) {

    .menu-overlay__partners {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 24px;
    }

    .menu-overlay__partners p {
        margin: 0;
        flex-shrink: 0;
    }
    .menu-overlay__partners img {
        width: 100%;
        height: auto;
        max-width: 615px;
    }
    .menu-overlay__partners .partners-svg {
        flex: 1;
        height: auto;
    }

}
/* Sluit knop */
.menu-overlay__close {
    position: absolute;
    top: 30px;
    right: 50px;
    background: transparent;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    color: white;
    background-color: #dc0000;
    font-family: "Nuckle";
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10;
}
.menu-overlay__close span {
    display: none;
}
@media screen and (min-width: 815px) {
    .menu-overlay__close span {
        display: inline-block;
    }
}

/* =============================================================================
   SITE LAYOUT
   ============================================================================= */

.site-content { margin: 0; padding: 0; }

section {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    left: 0;
    min-height: 850px;
}

section:not(.no-stick) {
    position: -webkit-sticky;
    position: sticky;
    overflow: hidden;
}

section:not(.no-top) { top: 0; }

.sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--yellow-bg);
    background-repeat: no-repeat, repeat;
    background-size: cover, auto;
    background-position: center center, center center;
}

.not-sticky {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: var(--yellow-bg);
    background-repeat: no-repeat, repeat;
    background-size: cover, auto;
    background-position: center center, center center;
}

.height {
    height: auto;
    max-height: max-content;
}

.scroller { height: 100vh; width: 100vw; }

/* .wrapper{
    position: relative;
    min-height : 100vh;
    width: 1540px;
    margin: 0 auto;
} */
.yellow-bg {
    background: var(--yellow-bg);
    background-repeat: no-repeat, repeat;
    background-size: cover, auto;
    background-position: center center, center center;
    max-height: 100vh;
}
.blue-bg   { background: var(--blue-bg); }
.blue      { color: var(--blue-text-color); }
.yellow    { color: var(--yellow-text-color); }

.row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    color: var(--white-text-color);
}

.row p { margin-bottom: 8px; }

.bullet-point {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgb(157, 157, 157);
    margin-top: 4px;
    opacity: 0.5;
}

.bullet-point .yellow { background-color: var(--yellow-text-color); }
.bullet-point .blue   { background-color: var(--blue-text-color); }

.current-section {
    position: fixed;
    top: 50%;
    left: 32px;
    transform: translate(-32px, -50%);
    z-index: 5;
}

.opacity          { opacity: 0.2; transition: opacity 0.5s; }
.opacity-sidebar  { opacity: 0 !important; visibility: hidden; }
.only-tab         { display: none; }
.only-mobile      { display: none; }
.only-desktop     { display: block; }


/* =============================================================================
   HOMEPAGE
   ============================================================================= */

.intro-bg {
    z-index: auto;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.home-intro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 44vw;
    text-align: center;
    color: var(--white-text-color);
    z-index: 2;
}

.home-intro h1  { margin: 0; }
.home-intro a   { color: var(--white-text-color); text-transform: uppercase; border: 1px solid white; background-color: rgba(0,0,0,0.25);}
.home-intro p,
.home-intro a   { font-weight: 600; }

.home-intro .logo-homepage {
    width: 30vw;
    margin-left: 50%;
    transform: translate(-50%) !important;
}

.logo-homepage  { z-index: 1; }
.intro-p        { z-index: 1; margin-top: 69px; }

.intro-black {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0.35;
    z-index: 0;
}

video { width: 100%; height: 100%; }

.bg-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    pointer-events: none;
    filter: brightness(0.5);
    top: 0;
    left: 0;
    position: fixed;
}

video::-webkit-media-controls-panel {
    box-shadow: none;
    text-shadow: none;
    width: 40px;
}

.mobile-live  { display: none; }
.desktop-live { display: block; }


/* =============================================================================
   HOMEPAGE - SECTIES
   ============================================================================= */

.images-div,
h2,
.text,
.clip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: 0.5s;
}
.yellow-bg .images-div {
    width: 40vw;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.15);
    filter: drop-shadow(0 3px 20px rgba(0, 0, 0, 0.15));
}
.blue-bg .images-div {
    width: 40vw;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.67);
    filter: drop-shadow(0 3px 20px rgba(0, 0, 0, 0.67));
}

.images-div img {
    filter: brightness(0.5);
    transition: 0.5s;
    z-index: 60 !important;
    display:   block;
}

.brightness { filter: brightness(1) !important; }

.image {
    width: 100%;
    height: 480px;
    object-fit: cover;
    z-index: 10 !important;
}

.text {
    width: 495px;
    max-width: 40vw;
    z-index: 1;
    white-space: no-wrap;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: none;
}

.text .text-yellow { color: var(--yellow-text-color); }
.text .text-white  { color: var(--white-text-color); }

.text a {
    text-transform: uppercase;
    font-size: 15px;
    color: var(--blue-text-color);
    font-weight: 600;
}

.text p {
    color: var(--black-text-color);
    margin-bottom: 68px;
    /* font-size: 18px; */
}

.text a:not(:last-child),
footer a:not(:last-child) { margin-right: 20px; }

.onze-text { width: 768px; }

.clip {
    overflow: hidden;
    width: 350px;
    height: 160px;
    z-index: 4;
}

.clip-events  { width: 900px !important; }
.clip-text    { left: -100%; transform: translate(-100%, -50%); transition: 0.5s; }

.moving {
    left: calc(70vw + 46px);
    padding-left: 200px;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-left: -200px;
    margin-top: auto;
    margin-bottom: auto;
}

.triggerMove {
    top: 50%;
    left: calc(40% - 98px);
    z-index: 2;
    transform: translate(calc(-25% + 162px, -50%));
}

.mobile-links a { 
    transition: all 0.3s ease;
    display: inline-block;
    line-height: 32px; 
    padding: 3px 30px;    
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    text-transform: capitalize;    
    text-decoration: none;
    margin-bottom: 15px;
}
.mobile-links a:hover{
    transition: all 0.3s ease;
    background-color: #FFDD93 !important;
    transform: scale(0.96);
}
.yellow-bg .mobile-links a {
    background-color: white;
    color: var(--blue-text-color);
}
.blue-bg .mobile-links a {
    background-color: #FFDD93;
    color: var(--blue-text-color);
}
.blue-bg .mobile-links a:hover{
    transition: all 0.3s ease;
    background-color: #ffffff !important;
    transform: scale(0.96);
}

/* =============================================================================
   REEL
   ============================================================================= */

.reel_icons {
    display: flex;
    flex-direction: row;
    height: 18px;
    align-items: center;
    justify-content: center;
    text-decoration: underline;
    text-transform: uppercase;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -80%);
    z-index: 100 !important;
    cursor: pointer;
    pointer-events: all;
}

.reel_icons button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    pointer-events: all;
}

.play-reel img { margin-right: 16px; cursor: pointer; }
#icon-pause    { display: none; }
.play-reel-mobile { display: none; }
.style-svg { margin: 0; padding: 0; height: 20px; }


/* =============================================================================
   ASSORTIMENT PAGINA'S
   ============================================================================= */

.assortiment-wrapper {
    width: 70vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
}

.assortiment-wrapper h2 {
    position: static;
    color: var(--blue-text-color);
    transform: none;
    margin-bottom: 32px;
}

.assortiment-wrapper p        { font-size: 16px; }
.assortiment-wrapper h3       { font-size: 24px; margin-bottom: 12px; }
.assortiment-wrapper .underline { text-decoration: underline; }

.assortiment-wrapper ul {
    padding-left: 12px;
    margin-top: 0;
}

.assortiment-wrapper li {
    list-style-type: inherit;
    color: var(--blue-text-color);
    font-size: 16px;
    line-height: 1.5em;
    opacity: 1;
    cursor: text;
}

.bottom { display: flex; flex-direction: column; margin-top: 48px; }

.sticky.blue-bg .assortiment-wrapper h2 { color: var(--yellow-text-color); }

.sticky.blue-bg .assortiment-wrapper p,
.sticky.blue-bg .assortiment-wrapper li,
.sticky.blue-bg .assortiment-wrapper li a,
.sticky.blue-bg .assortiment-wrapper small { color: var(--white-text-color); }


/* =============================================================================
   HERO AFBEELDINGEN
   ============================================================================= */

.zakelijk-intro,
.particulier-intro,
.bruiloft-intro,
.assortiment-intro,
.evenementen-organisatie-intro,
.over-mercuurs-intro,
.contact-intro,
.locaties-intro,
.rollende-keukens-intro,
.high-tea-intro,
.walking-dinner-intro,
.bbq-intro,
.buffet-intro {
    background-repeat: no-repeat;
    background-size: cover;
}

/* Afwijkende background-position */
.bruiloft-intro                { background-position: 20%; }
.evenementen-organisatie-intro { background-position: 40%; }
.over-mercuurs-intro           { background-position: 10%; }
.contact-intro                 { background-position: 70%; }
.rollende-keukens-intro        { background-position: 55%; }
.walking-dinner-intro          { background-position: 70%; }


/* =============================================================================
   FOOTER
   ============================================================================= */

footer {    
    position: fixed;
    z-index: 2;
    bottom: 24px;
    right: 32px;
    left: 32px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    overflow: hidden;
    height: 138px;
}


footer #partners-images svg{
    height: 26px;
}
.footer-images svg path {
    fill: #FFDD93;
    transition: fill 0.3s ease;
}
.footer-images svg {
    color: #FFDD93;
    fill: #FFDD93;
}
footer .footer-images svg,
footer .footer-images svg * {
    fill: currentColor !important;
}
footer a { 
    color:#FFDD93; 
    text-decoration: none; 
}

footer button {
    font-family: "Nuckle";
    color:#FFDD93;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 32px;
    background-color: transparent;
    border: none;
    padding-left: 0;
    font-size: 15px;
    cursor: pointer;
}

footer .side-link { margin-left: auto; font-size: 16px; }
footer .side-link a { margin-right: 0; }

footer .column {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    line-height: 21px;
}

footer .cls-1 { fill: var(--white-text-color); }
footer .blue  { color: var(--blue-text-color); fill: var(--blue-text-color); }
footer .yellow { color: var(--yellow-text-color); fill: var(--yellow-text-color); }

.footer-links,
.footer-images {
    position: absolute;
    left: 112px;
    margin-top: 0;
}

#contact,
#allergenen { position: absolute; left: 0; }

.footer-links { display: flex; flex-direction: column; }
.footer-links a { font-size: 14px; }
.footer-images { left: 236px; display: inline-flex; }

#contact p,
#allergenen p { font-size: 14px; line-height: 20px; }
#allergenen p {
    width: 70%;
}

.display-contact    { display: inherit !important; }
.display-volg-ons   { display: flex !important; flex-direction: column; }
.contact-div        { animation: footer 0.5s linear; }
.contact-div-reverse { animation: footerReverse 0.5s linear; }

#pon-dealer       { width: 150px; margin-right: 16px; }
#talpa            { width: 13px;  margin-right: 16px; }
#xebia            { width: 73px;  margin-right: 16px; }
#audi             { width: 65px;  margin-right: 16px; }
#american-express { width: 84px;  margin-right: 16px; }
#ordina           { width: 69px;  margin-right: 16px; }
#porshe           { width: 46px; }


/* =============================================================================
   CONTACTFORMULIER
   ============================================================================= */

input,
textarea {
    background-color: var(--form-bg);
    height: 45px;
    width: 400px;
    border: 1px transparent solid;
    font-family: "Nuckle";
    font-size: 14px;
    padding-left: 16px;
    margin-bottom: 8px !important;
}

input:focus,
input:active,
textarea:focus,
textarea:active { border: 1px var(--form-border) solid !important; }

.wpcf7-text:focus,
.wpcf7-textarea:focus { outline: none; }

textarea { height: 242px; padding-top: 16px; margin-bottom: 0; }

.Submit {
    background-color: transparent;
    border: none;
    text-transform: uppercase;
    color: var(--blue-text-color);
    text-decoration: underline;
    margin-top: 3px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.Submit:focus,
.Submit:active { border: none !important; }

.form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
}

.form h3,
.form h4 { text-align: center; margin: 0; }

.form h4 {
    font-family: "Wimberley";
    text-transform: uppercase;
    font-size: 24px;
    margin-top: 16px;
    margin-bottom: 44px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 864px;
    height: 502px;
    padding-top: 0;
}

.form-row iframe { width: 100%; }

.underlined {
    font-weight: 600;
    width: 400px;
    border-bottom: 1px var(--blue-text-color) solid;
    color: var(--blue-text-color);
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    margin-top: 52px;
}

.address-part a { color: var(--blue-text-color); text-decoration: none; }
.social         { width: 20px; height: 20px; }
.flex-end       { text-align: right; }
.first          { margin-top: 0; }
.first-social   { margin-right: 16px; }

.map {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.map p { margin-bottom: 0; }

.wpcf7-not-valid-tip {
    font-size: 10px;
    color: var(--form-border);
    margin: 0;
    padding: 0;
    height: 10px;
}


/* =============================================================================
   GALLERY / IMPRESSIE
   ============================================================================= */

.cards--gallery { width: 600px; height: 400px; }

.gallery_follow { margin-top: 60px; text-align: center; }

.gallery_follow a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    text-transform: uppercase;
    text-decoration: none;
}

.gallery_follow a img { margin-right: 16px; }

.gallery_follow a span { position: relative; }

.gallery_follow a span::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 1px;
    height: 1px;
    background-color: #000;
}

.gallery img { width: 746px !important; height: 499px !important; margin: 0; object-fit: cover; }

.categories-list {
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    width: auto;
    z-index: 50;
    white-space: nowrap;
 
    margin-bottom: 40px;
}
@media screen and (max-width: 1000px) {
    .categories-list {
        overflow-x: scroll !important;
    }
}

.categories-list button {
    border: 0.7px var(--blue-text-color) solid;
    border-radius: 15px;
    color: var(--blue-text-color);
    text-transform: uppercase;
    padding: 8px 11px 5px 11px;
    text-decoration: none;
    margin-right: 8px;
    background-color: transparent;
    cursor: pointer;
}

.categories-list .current-button { background: var(--blue-bg); color: var(--yellow-text-color); }

.gallery-all {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    width: 891px;
    transform: translate(-50%, -50%);
}

.gallery-all h3 { text-align: center; margin-bottom: 24px; }

.impressie-blue {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
    color: var(--yellow-text-color);
}

.impressie-blue a {
    text-decoration: none;
    color: var(--yellow-text-color);
    text-transform: uppercase;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center !important;
}

.font { font-family: "Wimberley"; font-size: 24px !important; }
.instagram { margin-top: 46px; margin-bottom: 52px; }


/* =============================================================================
   GALLERY LIGHTBOX
   ============================================================================= */

.gallery-lightbox {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 999;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(255, 221, 147, 0.17);
    backdrop-filter: blur(50px);
}

.gallery-lightbox.visible { opacity: 1; visibility: visible; }

.gallery-lightbox > button {
    position: absolute;
    right: 30px; top: 20px;
    z-index: 999;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
}

.gallery-lightbox > .counter {
    position: absolute;
    right: 32px; bottom: 24px;
    pointer-events: none;
}

.gallery-lightbox .swiper          { width: 100%; height: 100%; }
.gallery-lightbox .lightbox-image  { width: 80%; height: 100%; object-fit: cover; }
.gallery img.hidden                 { display: none; }
.gallery .swiper                    { width: 100%; height: 100%; }
.gallery-lightbox img               { cursor: pointer; }


/* =============================================================================
   SWIPER
   ============================================================================= */

.swiper-wrapper { display: flex; cursor: pointer; }

.small .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 891px !important;
    margin-right: 0;
    user-select: none;
}

.open .swiper-slide {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0;
    user-select: none;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    margin-bottom: 24px;
    object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    color: #000;
}

.swiper-button-next { right: 30px; }
.swiper-button-prev { left: 30px; }
.next-button        { right: 0; }
.prev-button        { left: 0; }

.swiper-button-next::after {
    content: "";
    /* background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); */
    width: 40px; height: 40px;
    background-size: cover;
    background-position: center center;
    color: black
}

.swiper-button-prev::after {
    content: "";
    /* background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E"); */
    width: 40px; height: 40px;
    background-size: cover;
    background-position: center center;
    color: black;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction { bottom: 0; }

.swiper-pagination { text-align: center; }

.swiper-pagination-bullet {
    width: 5px; height: 5px;
    display: inline-block;
    border-radius: 50%;
}

.swiper-pagination-bullet-active { background: var(--blue-bg); }


/* =============================================================================
   PRIVACY POLICY
   ============================================================================= */

.privacy-policy,
.parent-pageid-3 { --white-text-color: #000; color: #000; }

.privacy-policy-section > div {
    max-height: calc(100vh - 160px);
    overflow: scroll;
    margin: auto;
    margin-top: 80px;
    padding: 0 32px;
}

.privacy-policy-section .title {
    font-size: 48px;
    text-transform: uppercase;
    font-family: "Wimberley";
    margin-top: 100px;
    display: block;
}

.privacy-policy-section strong:not(.title) {
    font-size: 28px;
    text-transform: uppercase;
    font-family: "Wimberley";
}


/* =============================================================================
   MEDIA QUERIES
   ============================================================================= */

@media screen and (min-width: 1816px) {
    .moving      { left: calc(70vw + 46px); }
    .triggerMove { top: 50%; left: 30%; }
}

@media screen and (max-width: 1898px) { .moving { margin-left: -80px; } }

@media screen and (max-width: 1642px) {
    .triggerMove { top: 50%; left: calc(10vw + 64px); transform: translate(calc(-10vw + 64px), -50%); }
    .image { width: 800px; }
}

@media screen and (max-width: 1598px) { .moving { margin-left: -130px; } }

@media screen and (max-width: 1575px) {
    .image { width: 736px; }
    .triggerMove { top: 50%; left: calc(0% + 98px + 64px); z-index: 2; transform: translate(calc(-98px + 64px), -50%); }
}

@media screen and (max-width: 1446px) {
    .image { width: 600px; }
    .triggerMove { left: calc(0% - 162px + 64px + 64px + 32px); z-index: 2; transform: translate(calc(-0% + 162px + 64px - 64px - 32px), -50%); }
    .moving { left: calc(80% - 130px + 96px - 32px); }
}

@media screen and (max-width: 1313px) {
    .triggerMove { left: calc(0% 64px); z-index: 2; transform: translate(calc(-0% + 64px), -50%); }
    .moving { left: calc(80% - 130px + 96px - 32px); }
}

@media screen and (max-width: 1256px) {
    .assortiment-wrapper     { width: 65vw; }
    .assortiment-wrapper h2  { font-size: 44px; text-align: left; width: 100%; }
}

@media screen and (max-width: 1244px) {
    .image { width: 513px; height: 458px; }
    .text  { width: 480px; }
    .onze-text { width: 768px; }
    .triggerMove { left: calc(0% - 98px + 64px + 96px); z-index: 2; transform: translate(calc(-0% + 162px - 64px - 96px), -50%); }
    .moving { left: calc(80% - 130px + 96px - 16px); }
    .tablet { display: inherit; }
    .clip { overflow: hidden; width: 356px; height: 160px; z-index: 4; }
    .text h2 { text-align: center; }
    h2 { font-size: 28px; width: 324px; white-space: normal; text-align: center; }
    .clip-events { width: 324px !important; }
}

@media screen and (max-width: 1146px) { .hiddn { visibility: hidden; } }

@media screen and (max-width: 1119px) { .image { width: 481px; height: 458px; } }

@media screen and (max-width: 1107px) {
    .desktop-live { display: none; }
    .mobile-live  { display: block; }
    .home-intro h1 { white-space: normal; }
    .home-intro { width: 60vw; }
    .text { opacity: 0; }
    .onze-text { opacity: 1; width: 80vw; }
    .assortiment-wrapper { width: 70vw; }
    .menu-overlay__link{ font-size: 48px;}
}

@media screen and (max-width: 1046px) { .home-intro { width: 55vw; } }

@media screen and (max-width: 1024px) {
    .image { width: 356px; height: 398px; }
    .triggerMove { left: calc(0% - 98px + 64px + 96px + 77px); z-index: 2; transform: translate(calc(-0% + 162px - 64px - 96px - 77px), -50%); }
    .moving { left: calc(80% - 130px + 96px - 46px); }
}

@media screen and (max-width: 976px) {
    .onze-text { width: 70vw; }
    .partners-svg { width: 500px; }
    .only-tab { display: inherit; }
    .menu-overlay__link{ font-size: 48px;}
}

@media screen and (max-width: 965px) {
    .text { width: 360px; transition: 0.5s; }
    .onze-text { width: 80vw; opacity: 1; }
    .triggerMove { left: calc(0% + 64px + 64px); z-index: 2; transform: translate(calc(0% - 64px), -50%); }
    .moving { left: calc(50% + 32px + 180px); }
    .mobile-links a { line-height: 32px; }
}

@media screen and (max-width: 898px) {
    .current-section { visibility: hidden; }
    .assortiment-wrapper { width: 80vw; left: 50%; }
}

@media screen and (max-width: 897px) { .home-intro { width: 80vw; } }

@media screen and (max-width: 885px) {
    .form-row { display: block; width: 800px; }
    input, textarea { width: 360px; }
    .gallery-all { width: 691px !important; }
    .small .swiper-slide { width: 691px !important; }
    .gallery img { width: 578px !important; height: 386px !important; }
    .gallery-lightbox .lightbox-image { width: 100%; height: 60%; }
    .gallery-lightbox > button { right: 16px; top: 24px; padding: 0; }
    .gallery-lightbox > .counter { left: 50%; transform: translate(-10%, 0) !important; bottom: 59px; }
}

@media screen and (max-width: 814px) {
    .menu-overlay__link {
        font-size: 48px;
    }
    section { min-height: 100%; }

    .gallery_follow { margin-top: 30px; }
    .gallery-all { top: calc(35vh + 48px); transform: translate(-50%, 0); }

    .not-sticky { position: sticky; position: -webkit-sticky; top: 0; }
    .bottom { margin-top: 44px; margin-bottom: 64px; }
    .home-intro h1 { font-size: 56px; }

    .impr-two {
        display: inherit;
        z-index: 10 !important;
        opacity: 1 !important;
        transform: translate(0, 0) !important;
        width: 100vw;
        height: 35vh !important;
        object-fit: cover;
    }

    .home-intro { position: fixed; }
    .abs { position: absolute; }

    .mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 18px;
    }

    ul { padding-left: 0; }
    li { opacity: 1; }
    li:not(:last-child) { margin-bottom: 12px; }
    li a { text-decoration: underline; }

    section { position: sticky; }

    .text {
        width: calc(100vw - 96px);
        max-width: 100%;
        z-index: 1;
        height: calc(100% - 48px);
        padding-left: 48px;
        padding-right: 48px;
        display: flex;
        flex-direction: column;
        opacity: 1;        
    }

    .text h3 { margin-bottom: 32px; padding-bottom: 0; }
    .text p  { margin-top: 0; padding-top: 0; }
    .number  { margin-bottom: 16px !important; }

    .images-div img,
    .images-div video { display: none; }

    .images-mobile {
        position: fixed;
        overflow: hidden;
        width: 100vw;
        height: 35vh;
        display: block !important;
    }

    .images-mobile img {
        display: block !important;
        width: 100vw !important;
        height: 35vh;
        object-fit: cover;
        filter: drop-shadow(inset 8px 8px 2px #000);
    }

    .shadow {
        box-shadow: inset 25vw 20vh 100px -5vh rgba(0, 0, 0, 0.55);
        width: 100vw;
        height: 35vh;
        z-index: 10;
        position: absolute;
    }

    .section-for-mobile {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        height: 100vh;
        width: 100vw;
        align-items: center;
    }

    .wrapper-section {
        display: block !important;
        position: relative !important;
        overflow: hidden;
        width: 100vw;
        height: 65vh;
        top: 35vh !important;
    }

    .panel-images-no-scroll,
    .panel-images {
        filter: brightness(1);
        object-fit: cover;
        position: absolute;
        left: 0%; top: 0%; right: 0%; bottom: 0%;
        z-index: 1;
        width: 100%; height: 100%;
    }

    .panel._2, .panel-images._2 { z-index: 1; }
    .index { z-index: auto; }
    .clip  { display: none; }

    .panel {
        display: block;
        position: absolute;
        left: 0%; top: 0%; right: 0%; bottom: 0%;
        z-index: 1;
        width: 100%; height: 100%;
    }

    .mobile-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        bottom: 15px;
        width: 100%;
        padding-top: 30px;        
    }

    .margin { bottom: 24px; }

    .text a { font-weight: 600; text-align: center; }

    .mobile { display: flex !important; flex-direction: column; }

    .mobile button {
        font-weight: 600;
        text-align: center;
        text-decoration: underline;
        background-color: transparent;
        border: none;
        color: white;
        margin: 0 0 12px 0;
        padding: 0;
        text-transform: uppercase;
    }

    .text a:not(:last-child) { margin-right: 0; margin-bottom: 10px; }

    h1 { font-size: 56px; text-align: center; white-space: inherit; }
    h2 { font-size: 35px; }
    h3 { white-space: normal; }

    .home-intro { width: 90vw; font-size: 14px; height: 100vh; }

    .home-intro .logo-homepage {
        width: 80vw !important;
        margin-left: 50%;
        transform: translate(-50%) !important;
    }

    .intro-p { margin-top: 40px; }

    footer { display: none !important; }
    .current-section { display: none; }

    .form-row { flex-direction: column; height: max-content; }

    .form {
        position: relative;
        height: 100% !important;
        top: 0 !important;
        left: 16px;
        transform: translate(0, 0);
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100vw;
        padding-bottom: 64px;
    }

    .form-text { width: calc(100vw - 32px); }

    input,
    textarea {
        height: 45px;
        width: calc(100vw - 32px - 16px);
        padding-left: 16px;
        margin-bottom: 8px !important;
        margin-left: 0;
    }

    textarea { height: 242px; }
    .underlined { width: calc(100vw - 32px); }

    .form h3, .form h4 { width: calc(100vw - 32px); text-align: center; white-space: normal; margin: 0; }
    .form h3 { font-size: 35px; }
    .form h4 { margin-top: 22px; margin-bottom: 48px; }

    .only-mobile  { display: inherit; }
    .only-desktop { display: none; }

    .address-part { height: max-content; margin-top: 0; }
    .address-part .flex-end { text-align: left; }

    .categories-list { margin-bottom: 32px; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; }
    .categories-list::-webkit-scrollbar { display: none; }

    .play-reel { top: calc(35vh / 2); color: var(--white-text-color); }
    .play-reel img { filter: invert(1); }
    .desktop { display: none; }

    .current-section-mobile {
        display: inherit;
        position: fixed;
        bottom: 22px;
        left: 12px;
        z-index: 6;
    }

    .current-section-mobile .yellow { background-color: var(--yellow-text-color); }
    .current-section-mobile .blue   { background-color: var(--blue-text-color); }

    .menu-overlay {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .menu-overlay__inner {
        height: auto;
        min-height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .menu-overlay__logo .logo-homepage {
        width: 300px;
        padding: 20px;
        margin-left: 0 !important;
        transform: none !important;
    }
    .menu-overlay__nav {
        padding: 0;
        align-items: flex-start;
        background: var(--blue-bg);
    }
    .menu-overlay__submenu-container { display: none; }
    .menu-overlay__contact { padding: 32px 24px; }
    .menu-overlay__item .menu-overlay__submenu{
        width : calc(100vw - 80px);
    }
    .menu-overlay__item.is-active .menu-overlay__submenu {
        max-height: 500px;
        opacity: 1;
        padding-left: 0;
        margin-top: 8px;
        margin-bottom: 8px;
        transform: translateY(0);
        width: 100%;
        padding: 20px 40px;

    }
    .menu-overlay__list{
        width: 100vw;
    }
    .menu-overlay__list .menu-overlay__link{
        padding: 0 40px;
    }
    .menu-overlay__item .menu-overlay__submenu {
        background: var(--yellow-bg);
    }

    .menu-overlay__item.is-active .menu-overlay__submenu li { opacity: 1; }

    .menu-overlay__item.is-active .menu-overlay__submenu .menu-overlay__sublink {
        color: var(--blue-text-color);
        font-size: 16px;
        line-height: 28px;
        text-decoration: none;
    }

    .onze-text-mobile {
        margin-top: calc(17.5vh + 24px);
        height: calc(65vh - 48px);
        overflow-y: scroll;
        display: flex;
        padding-bottom: 64px;
    }

    .onze-text-mobile h3 { font-size: 35px; }
    .bottom h3           { font-size: 24px; }

    .onze-text-mobile li {
        font-size: 15px;
        list-style-type: inherit;
        color: var(--blue-text-color);
        margin-bottom: 6px;
        cursor: text;
    }

    .stars-blue { width: 112px; align-self: flex-end; margin-top: 64px; margin-bottom: 26px; }
    .flex-end   { align-self: flex-end; font-weight: 600; padding-bottom: 64px; }
    .line       { height: 3px; width: auto; border-bottom: 1px var(--blue-bg) solid; margin-bottom: 64px; }

    .inst-section { margin-top: 35vh; }
    .inst-ttl     { padding-top: 0; margin-top: 64px !important; font-size: 33px; }

}

@media screen and (max-width: 690px) {
    .gallery-all { width: 528px !important; }
    .small .swiper-slide { width: 528px !important; }
    .gallery img { width: 428px !important; height: 285px !important; }
    .gallery-lightbox .lightbox-image { width: 100%; height: 60%; }
    .inst-section { margin-top: 0; padding: 20px; text-align: center; }
}

@media screen and (max-width: 515px) {
    .gallery-all { width: 380px !important; }
    .small .swiper-slide { width: 380px !important; }
    .gallery img { width: 290px !important; height: 194px !important; }
    .gallery-lightbox .lightbox-image { width: 100%; height: 60%; }
    .gallery_follow { display: none; }
    .swiper-button-next::after, .swiper-button-prev::after { width: 25px; height: 25px; }
    .categories-list { justify-content: flex-start; margin-left: 32px; }
    .privacy-policy-section .title { margin-top: 160px; }
    .privacy-policy-section > div { max-height: calc(100vh - 80px); }
}

@media screen and (max-width: 428px) {
    .text { width: calc(100vw - 48px); padding-left: 16px; padding-right: 16px; }
    .underlined { width: calc(100vw - 32px); }
    .form-text, .address-part { margin-left: 0; }
}

@media screen and (max-width: 428px) and (max-height: 740px) {
    p { font-size: 12px; line-height: 16px; }
    .home-intro h1 { font-size: 39px; }
    .mobile button { font-weight: 500; margin: 0 0 6px 0; }
    .mobile-links { bottom: 32px; }
    .text a { font-size: 12px; }
    .text a:not(:last-child) { margin-bottom: 6px; }
    .mobile-links a { line-height: normal; }
    .mobile { margin-bottom: 0; }
    .rollende-keukens-intro .mobile-links { bottom: calc(16px + 5% + 18px); }
    .rollende-keukens-intro .home-intro { top: 50%; transform: translate(-50%, -45%) !important; }
    .text h3 { font-size: 28px; margin-bottom: 28px; }
}

@media screen and (max-width: 320px) {
    p { font-size: 11px; line-height: 16px; }
    .home-intro h1 { font-size: 39px; }
    .mobile button { font-weight: 500; margin: 0 0 6px 0; }
    .mobile-links { bottom: 32px; }
    .text a { font-size: 11px; }
    .text a:not(:last-child) { margin-bottom: 6px; }
    .mobile-links a { line-height: normal; }
    .mobile { margin-bottom: 0; }
    .rollende-keukens-intro .mobile-links { bottom: calc(16px + 5% + 18px); }
    .rollende-keukens-intro .home-intro { top: 50%; transform: translate(-50%, -45%) !important; }
    .text h3 { font-size: 28px; margin-bottom: 18px; }
}

.menu-overlay__list {
    position: relative;
    z-index: 3;
}
@media screen and (max-width: 814px) {

    .mobile,
    .current-section-mobile {
        display: none !important;
    }

    .section-for-mobile {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: block !important;
    }

    .wrapper-section {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .panel {
        position: relative !important;
        height: auto !important;
        min-height: 100vh;
        opacity: 1 !important;
        transform: none !important;
    }

    .panel-images,
    .panel-images-no-scroll {
        position: relative !important;
        height: 35vh !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
@media screen and (min-width: 815px) {
    .section-for-mobile {
        display: none !important;
    }
    .home-intro .mobile {
        display: none !important;
    }
}
@media screen and (max-width: 814px) {

    .section-for-mobile {
        height: auto !important;
        overflow: visible !important;
    }

    .section-for-mobile section {
        height: auto !important;
        min-height: auto !important;
    }

    .images-mobile {
        position: relative !important;
        width: 100% !important;
        height: 300px !important;
        overflow: hidden;
    }

    .images-mobile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .text-mobile,
    .onze-text-mobile,
    .text.onze-text-mobile {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        padding-bottom: 60px;
    }

    .text-mobile ul,
    .onze-text-mobile ul {
        height: auto !important;
    }
}
@media screen and (max-width: 814px) {

    .section-for-mobile section {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .section-for-mobile .images-mobile {
        position: relative !important;
        height: 55vh !important;
        width: 100% !important;
    }

    .section-for-mobile .images-mobile img {
        display: block !important;
        width: 100% !important;
        height: 55vh !important;
        object-fit: cover !important;
    }

    .section-for-mobile .text {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;

        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 32px 24px 64px !important;
        overflow: visible !important;
        display: block !important;
        
    }
   
    .section-for-mobile .text h1,
    .section-for-mobile .text h2,
    .section-for-mobile .text h3,
    .section-for-mobile .text p,
    .section-for-mobile .text ul,
    .section-for-mobile .text li {
        /* position: static !important; */
        transform: none !important;
        /* color: var(--blue-text-color); */
    }

    .section-for-mobile .text ul {
        padding-left: 20px !important;
    }

    .section-for-mobile .text li {
        list-style: disc !important;
        opacity: 1 !important;
        margin-bottom: 8px !important;
    }
    .section-for-mobile .wrapper-section,
    .section-for-mobile .panel,
    .section-for-mobile .current-mob,
    .section-for-mobile .index,
    .section-for-mobile .last {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    .section-for-mobile .text {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

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

    /* Impressie pagina */
    .section-for-mobile .gallery-all,
    .section-for-mobile .gallery,
    .section-for-mobile .swiper,
    .section-for-mobile .swiper-wrapper,
    .section-for-mobile .swiper-slide {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .section-for-mobile .gallery-all {
        width: auto !important;
        padding: 32px 24px 64px !important;
        background-color: var(--yellow-bg) !important;
    }

    .section-for-mobile .gallery img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    .section-for-mobile .inst-section {
        position: relative !important;
        margin-top: 0 !important;
        padding: 64px 24px !important;
    }

    .section-for-mobile .impr-two {
        position: relative !important;
        width: 100% !important;
        height: 55vh !important;
        object-fit: cover !important;
    }


    /* Assortiment pagina / witte vlakken */
    .section-for-mobile .yellow-bg .text,
    .section-for-mobile .yellow-bg .text > div,
    .section-for-mobile .yellow-bg .text ul,
    .section-for-mobile .yellow-bg .text li,
    .section-for-mobile .yellow-bg .assortiment-wrapper,
    .section-for-mobile .yellow-bg .bottom {
        background: var(--yellow-bg) !important;
    }

    .section-for-mobile .blue-bg .text,
    .section-for-mobile .blue-bg .text > div,
    .section-for-mobile .blue-bg .text ul,
    .section-for-mobile .blue-bg .text li,
    .section-for-mobile .blue-bg .assortiment-wrapper,
    .section-for-mobile .blue-bg .bottom,
     {
        background: var(--blue-bg) !important;
    }
    /* .section-for-mobile .blue-bg .text .mobile-links{
        background: transparent !important;
    } */
}
@media screen and (max-width: 814px) {

    .impressie-blue {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .inst-section {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        height: auto !important;
        min-height: 300px !important;

        padding: 80px 24px !important;
    }

    .impr-two {
        position: relative !important;
        display: block !important;

        width: 100% !important;
        height: 50vh !important;
        object-fit: cover !important;
    }

}

.menu-overlay__nav .menu-overlay__link.blue {
    color: #ffffff !important;
}
.menu-overlay__nav .menu-overlay__item.is-active .menu-overlay__link,
.menu-overlay__nav .menu-overlay__link:hover {
    color: var(--yellow-text-color) !important;
}
@media screen and (max-width: 814px) {

    .assortiment-mobile {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .assortiment-mobile__section {
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
        padding: 64px 24px !important;
        overflow: visible !important;
    }

    .assortiment-mobile .assortiment-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        padding: 0 !important;
    }

    .assortiment-mobile .assortiment-wrapper h3 {
        font-size: 35px;
        margin-bottom: 32px;
    }

    .assortiment-mobile .assortiment-wrapper ul {
        padding-left: 20px !important;
    }

    .assortiment-mobile .assortiment-wrapper li {
        list-style: disc !important;
        opacity: 1 !important;
        margin-bottom: 8px !important;
    }

    .assortiment-mobile__section.blue-bg,
    .assortiment-mobile__section.blue-bg .assortiment-wrapper,
    .assortiment-mobile__section.blue-bg .assortiment-wrapper > div,
    .assortiment-mobile__section.blue-bg ul,
    .assortiment-mobile__section.blue-bg li {
        background: var(--blue-bg) !important;
        color: var(--white-text-color) !important;
    }

    .assortiment-mobile__section.blue-bg h3,
    .assortiment-mobile__section.blue-bg p,
    .assortiment-mobile__section.blue-bg li,
    .assortiment-mobile__section.blue-bg a,
    .assortiment-mobile__section.blue-bg small {
        color: var(--white-text-color) !important;
    }

    .assortiment-mobile__section.yellow-bg,
    .assortiment-mobile__section.yellow-bg .assortiment-wrapper,
    .assortiment-mobile__section.yellow-bg .assortiment-wrapper > div,
    .assortiment-mobile__section.yellow-bg ul,
    .assortiment-mobile__section.yellow-bg li {
        background-color: var(--yellow-bg) !important;
        color: var(--blue-text-color) !important;
    }

    .assortiment-mobile__section.yellow-bg h3,
    .assortiment-mobile__section.yellow-bg p,
    .assortiment-mobile__section.yellow-bg li,
    .assortiment-mobile__section.yellow-bg a,
    .assortiment-mobile__section.yellow-bg small {
        color: var(--blue-text-color) !important;
    }
    .assortiment-mobile__hero,
    .assortiment-mobile .images-mobile {
        width: calc(100% - 48px) !important;
        margin-left: 24px !important;
        margin-right: 24px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .assortiment-mobile__hero img,
    .assortiment-mobile .images-mobile img {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    .assortiment-mobile__section {
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }
}