:root {
    --roze: rgb(233,214,219);
    --donkerRoze: rgba(172, 74, 119, 1);
    --felRoze: rgb(255,128,169);
    /*--blauw: rgb(56,135,228);*/ /*aangepast ivm leesbaarheid*/
    --blauw: rgb(15,110,219);
    --donkerBlauw: rgb(0,32,57);
    --geel: rgb(251,188,4);
    --grijs: rgb(244,245,246);
    --donkerGrijs: rgb(164,175,184);
    --grijsHover: rgb(249,249,249);
    --buttonGrijs: rgb(237,238,239);
    --buttonBorderGrijs: rgb(222,226,230);

}

[data-red-color] {
    --kleur1: rgb(235,180,168); /*roze*/
    --kleur2: rgb(118,47,43); /*rood*/
    --kleur2-hover: rgb(55, 9, 7); /*rood hover*/
    --kleur2-hover-btn: rgb(217, 167, 156); /*rood hover*/
    --kleur3: rgb(249, 232, 229); /*licht-roze*/
    --kleur4: rgb(237, 234, 214); /*creme*/
    --kleur5: rgb(26,142,147); /*blauw*/
    --kleur5-hover: rgb(3, 79, 85); /*blauw hover*/
    --hamburger-color: var(--kleur1);
    --hamburger-color-sticky: var(--kleur1);
    --hamburger-color-hover: var(--kleur1);
    --hamburger-color--hover-sticky: var(--kleur1);
    --hoofdmenu-menu-hover: var(--kleur2-hover);
}

    [data-red-color] .hamburger.is-active {
        --hamburger-color: var(--kleur2);
        --hamburger-color-sticky: var(--kleur2);
        --hamburger-color-hover: var(--kleur2);
        --hamburger-color--hover-sticky: var(--kleur2);
    }

[data-blue-color] {
    --kleur1: rgb(208,178,120); /*goud*/
    --kleur2: rgb(0,33,57); /*blauw*/
    --kleur2-hover: rgb(0, 4, 13); /*blauw hover*/
    --kleur2-hover-btn: rgb(197, 169, 114); /*rood hover*/
    --kleur3: rgb(241, 232, 215); /*licht-goud*/
    --kleur4: rgb(237, 234, 214); /*creme*/
    --kleur5: rgb(26,142,147); /*blauw*/
    --kleur5-hover: rgb(3, 79, 85); /*blauw hover*/
    --hamburger-color: var(--kleur1);
    --hamburger-color-sticky: var(--kleur1);
    --hamburger-color-hover: var(--kleur1);
    --hamburger-color--hover-sticky: var(--kleur1);
    --hoofdmenu-menu-hover: #112e53;
}

    [data-blue-color] .hamburger.is-active {
        --hamburger-color: var(--kleur2);
        --hamburger-color-sticky: var(--kleur2);
        --hamburger-color-hover: var(--kleur2);
        --hamburger-color--hover-sticky: var(--kleur2);
    }

[data-green-color] {
    --kleur1: rgb(0,33,57); /*goud*/
    --kleur2: rgb(186, 219, 221); /*blauw*/
    --kleur3: rgb(186, 219, 221); /*licht-goud*/
    --kleur4: rgb(237, 234, 214); /*creme*/
    --kleur5: rgb(26,142,147); /*blauw*/
    --hamburger-color: var(--kleur1);
    --hamburger-color-sticky: var(--kleur1);
    --hamburger-color-hover: var(--kleur1);
    --hamburger-color--hover-sticky: var(--kleur1);
}

[data-blue-color] .hamburger.is-active {
    --hamburger-color: var(--kleur2);
    --hamburger-color-sticky: var(--kleur2);
    --hamburger-color-hover: var(--kleur2);
    --hamburger-color--hover-sticky: var(--kleur2);
}

[data-green-color] header .headerContentButtonContainer .btn.wit {
    color: #FFF;
}

[data-green-color] .btnAfspraakButton {
    color: #FFF;
}
[data-green-color] .btn.blauw{
    color:#FFF;
}
[data-green-color] .persoonlijkAdvies.oogZorg {
    background: var(--kleur5);
}
    [data-green-color] .persoonlijkAdvies.oogZorg .btn.blauw {
        background-color: #FFF;
    }
[data-green-color] .fotoBlok .fotoBlokTekstContainer h3 span, [data-green-color] .fotoBlok .fotoBlokTekstContainer h2 span {
    background: var(--kleur2);
    color: var(--kleur1);
}
[data-green-color] .persoonlijkAdvies {
    background: rgb(26, 142, 147);
    color:#FFF;
}
    [data-green-color] .persoonlijkAdvies h3 {
        color: #FFF;
    }
    [data-green-color] .persoonlijkAdvies .btn.blauw {
        background: #FFF;
    }
[data-green-color] footer a {
    color: rgb(26, 142, 147);
}
[data-green-color] nav {
    background: #FFF;
}
    [data-green-color] nav .logoContainer {
        border-color: var(--kleur1)
    }
.animate__animated {
    opacity: 0
}

    .animate__animated.flip {
        opacity: 1 !important;
    }

.animate__delay-02s, .delay1 {
    animation-delay: .5s !important
}

.animate__delay-03s, .delay2 {
    animation-delay: .7s !important
}

.delay3 {
    animation-delay: .9s !important
}

.delay4 {
    animation-delay: 1.1s !important
}

.delay5 {
    animation-delay: 1.3s !important
}

.delay6 {
    animation-delay: 1.5s !important
}

.delay7 {
    animation-delay: 1.7s !important
}

.delay8 {
    animation-delay: 1.9s !important
}

.delayMenu1 {
    animation-delay: .1s !important
}

.delayMenu2 {
    animation-delay: .2s !important
}

.delayMenu3 {
    animation-delay: .3s !important
}

.delayMenu4 {
    animation-delay: .4s !important
}

.delayMenu5 {
    animation-delay: .5s !important
}

.delayMenu6 {
    animation-delay: .6s !important
}

.delayMenu7 {
    animation-delay: .7s !important
}

.delayMenu8 {
    animation-delay: .8s !important
}

.animate__delay-1s {
    animation-delay: 1.5s !important
}

.duration2 {
    animation-duration: 2s !important
}
@keyframes animate__fadeInRightSmall {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(40px,0,0);
        transform: translate3d(40px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__fadeInRightSmall {
    -webkit-animation-name: animate__fadeInRightSmall;
    animation-name: animate__fadeInRightSmall
}
@keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,40px,0);
        transform: translate3d(0,40px,0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInUpSmallRotate {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) translate3d(0,40px,0);
        transform: rotate(0deg) translate3d(0,40px,0);
    }

    to {
        opacity: 1;
        -webkit-transform: rotate(-3deg) translateZ(0);
        transform: rotate(-3deg) translateZ(0)
    }
}
@keyframes fadeInUpSmallRotateNeg {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) translate3d(0,40px,0);
        transform: rotate(0deg) translate3d(0,40px,0);
    }

    to {
        opacity: 1;
        -webkit-transform: rotate(3deg) translateZ(0);
        transform: rotate(3deg) translateZ(0)
    }
}
.rotate.animate__fadeInUpSmall {
    -webkit-animation-name: fadeInUpSmallRotate;
    animation-name: fadeInUpSmallRotate;
}
.rotateNeg.animate__fadeInUpSmall {
    -webkit-animation-name: fadeInUpSmallRotateNeg;
    animation-name: fadeInUpSmallRotateNeg;
}
.animate__fadeInUpSmall {
    -webkit-animation-name: fadeInUpSmall;
    animation-name: fadeInUpSmall
}
@-webkit-keyframes fadeInBottomLeftSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50px, -50px, 0);
        transform: translate3d(-50px, -50px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInBottomLeftSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50px, -50px, 0);
        transform: translate3d(50px, -50px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.animate__fadeInBottomLeftSmall {
    -webkit-animation-name: fadeInBottomLeftSmall;
    animation-name: fadeInBottomLeftSmall;
}
:root {
    --col1: calc((100% / 12) * 1);
    --col2: calc((100% / 12) * 2);
    --col3: calc((100% / 12) * 3);
    --col4: calc((100% / 12) * 4);
    --col5: calc((100% / 12) * 5);
    --col6: calc((100% / 12) * 6);
    --col7: calc((100% / 12) * 7);
    --col8: calc((100% / 12) * 8);
    --col9: calc((100% / 12) * 9);
    --col10: calc((100% / 12) * 10);
    --col11: calc((100% / 12) * 11);
    --col12: calc((100% / 12) * 12);
    --col1px: calc((var(--wrapper-width) / 12) * 1);
    --col2px: calc((var(--wrapper-width) / 12) * 2);
    --col3px: calc((var(--wrapper-width) / 12) * 3);
    --col4px: calc((var(--wrapper-width) / 12) * 4);
    --col5px: calc((var(--wrapper-width) / 12) * 5);
    --col6px: calc((var(--wrapper-width) / 12) * 6);
    --col7px: calc((var(--wrapper-width) / 12) * 7);
    --col8px: calc((var(--wrapper-width) / 12) * 8);
    --col9px: calc((var(--wrapper-width) / 12) * 9);
    --col10px: calc((var(--wrapper-width) / 12) * 10);
    --col11px: calc((var(--wrapper-width) / 12) * 11);
    --col12px: calc((var(--wrapper-width) / 12) * 12);
}

.col1 {
    width: var(--col1);
}

.col2 {
    width: var(--col2);
}

.col3 {
    width: var(--col3);
}

.col4 {
    width: var(--col4);
}

.col5 {
    width: var(--col5);
}

.col6 {
    width: var(--col6);
}

.col7 {
    width: var(--col7);
}

.col8 {
    width: var(--col8);
}

.col9 {
    width: var(--col9);
}

.col10 {
    width: var(--col10);
}

.col11 {
    width: var(--col11);
}

.col12 {
    width: var(--col12);
}

.col1px {
    width: var(--col1px);
}

.col2px {
    width: var(--col2px);
}

.col3px {
    width: var(--col3px);
}

.col4px {
    width: var(--col4px);
}

.col5px {
    width: var(--col5px);
}

.col6px {
    width: var(--col6px);
}

.col7px {
    width: var(--col7px);
}

.col8px {
    width: var(--col8px);
}

.col9px {
    width: var(--col9px);
}

.col10px {
    width: var(--col10px);
}

.col11px {
    width: var(--col11px);
}

.col12px {
    width: var(--col12px);
}

.alignRight {
    text-align: right;
    justify-content: flex-end;
}

.colAlignRight {
    margin-left: auto;
}

.alignCenter {
    text-align: center;
    justify-content: center;
}

.colAlignCenter {
    display: flex !important;
    justify-content: center !important;
}
.pullRight{
    margin-left:auto;
}

@font-face {
    font-family: 'CodecWarm-ExtraBold';
    src: url('fonts/CodecWarm-ExtraBold.eot');
    src: url('fonts/CodecWarm-ExtraBold.eot?#iefix') format('embedded-opentype'), url('fonts/CodecWarm-ExtraBold.woff2') format('woff2'), url('fonts/CodecWarm-ExtraBold.woff') format('woff'), url('fonts/CodecWarm-ExtraBold.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

/*
 * The Typekit service used to deliver this font or fonts for use on websites
 * is provided by Adobe and is subject to these Terms of Use
 * http://www.adobe.com/products/eulas/tou_typekit. For font license
 * information, see the list below.
 *
 * proxima-nova:
 *   - http://typekit.com/eulas/00000000000000007735e609
 *
 * © 2009-2023 Adobe Systems Incorporated. All Rights Reserved.
 */
/*{"last_published":"2023-11-10 11:15:49 UTC"}*/

@import url("https://p.typekit.net/p.css?s=1&k=vxf0vwd&ht=tk&f=139.175.176&a=10433942&app=typekit&e=css");

@font-face {
    font-family: 'ProximaNova-Regular';
    src: url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?dbnw7y');
    src: url('fonts/icomoon.eot?dbnw7y#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?dbnw7y') format('truetype'), url('fonts/icomoon.woff?dbnw7y') format('woff'), url('fonts/icomoon.svg?dbnw7y#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"],
.persoonlijkAdvies .persoonlijkAdviesTekst ul li:before,
nav ul.hoofdMenu li a:after,
.select-selected:after,
.persoonlijkAdvies ol li:before {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-min:before {
    content: "\e914";
}

.icon-remove:before {
    content: "\e915";
}

.icon-plus:before {
    content: "\e916";

}
.icon-shopping:before {
    content: "\e911";
}
.icon-pijl_links:before {
    content: "\e904";
}

.icon-pijl_rechts:before {
    content: "\e905";
}

.icon-ster:before {
    content: "\e906";
}

.icon-ster-half .path1:before {
    content: "\e907";
}

.icon-ster-half .path2:before {
    content: "\e908";
    margin-left: -1.0498046875em;
    color: rgb(218, 242, 242);
}

.icon-vink:before {
    content: "\e909";
}

.icon-facebook:before {
    content: "\e90a";
}

.icon-instagram:before {
    content: "\e90b";
}

.icon-kalender:before {
    content: "\e90c";
}

.icon-linkedin .path1:before {
    content: "\e90e";
}

.icon-linkedin .path2:before {
    content: "\e90f";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.icon-linkedin .path3:before {
    content: "\e910";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.icon-twitter .path1:before {
    content: "\e900";
}

.icon-twitter .path2:before {
    content: "\e901";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.icon-whattsapp .path1:before {
    content: "\e902";
}

.icon-whattsapp .path2:before {
    content: "\e903";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.icon-whattsapp .path3:before {
    content: "\e90d";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}
.icon-download:before {
    content: "\e913";
}
:root {
    --hoofdnav: 88px/95px 'CodecWarm-ExtraBold', serif;
    --koppen: 26px/32px 'CodecWarm-ExtraBold', serif;
    --kleineKoppen: 17px/19px 'CodecWarm-ExtraBold', serif;
    --koppenGroot: 42px/42px 'CodecWarm-ExtraBold', serif;
    --defaultTekst: 20px/32px 'ProximaNova-Regular', sans-serif;
    --defaultTekstSmall: 17px/27px 'ProximaNova-Regular', sans-serif;
    --koppenNavigatie: 17px/27px 'ProximaNova-Regular', serif;
    --streamer: 110px/110px 'CodecWarm-ExtraBold', serif;
    --kopRegel: 95px/75px 'CodecWarm-ExtraBold', serif;
    --merkTitelSlider: 22px/32px 'ProximaNova-Regular', sans-serif;
    --afspraakRondjeCredits: 10px/10px 'CodecWarm-ExtraBold', serif;
    --navLink: 17px/27px 'ProximaNova-Regular', sans-serif;
    --werkenbij-quote: 76px/76px 'ProximaNova-Regular', sans-serif;
    --gun-je-zelf: 400 30px "Playfair Display", serif;
    --visionair: 400 30px/55px "Playfair Display", serif;
    --bericht-label: 12px 'ProximaNova-Regular', serif;
    --terug-button: 16px 'ProximaNova-Regular', serif;
}
@media only screen and (min-width: 767px) and (max-width: 1600px) {

}
@media screen and (max-width:1500px) {
    :root {
        --hoofdnav: 33px/36px 'CodecWarm-ExtraBold', serif;
        --koppen: 22px/26px 'CodecWarm-ExtraBold', serif;
        --kleineKoppen: 14px/16px 'CodecWarm-ExtraBold', serif;
        --koppenGroot: 28px/28px 'CodecWarm-ExtraBold', serif;
        --defaultTekst: 17px/27px 'ProximaNova-Regular', sans-serif;
        --defaultTekstSmall: 15px/23px 'ProximaNova-Regular', sans-serif;
        --koppenNavigatie: 15px/23px 'ProximaNova-Regular', serif;
        --streamer: 40px/40px 'CodecWarm-ExtraBold', serif;
        --kopRegel: 63px/50px 'CodecWarm-ExtraBold', serif;
        --merkTitelSlider: 14px/16px 'ProximaNova-Regular', sans-serif;
        --afspraakRondjeCredits: 10px/10px 'CodecWarm-ExtraBold';
        --navLink: 15px/23px 'ProximaNova-Regular', sans-serif;
        --werkenbij-quote: 33px/36px 'ProximaNova-Regular', sans-serif;
    }
}

.hamburger--3dx .hamburger-box, .hamburger--3dx-r .hamburger-box, .hamburger--3dy .hamburger-box, .hamburger--3dy-r .hamburger-box {
    perspective: 80px
}

.hamburger {
    position: absolute;
    right: 50px;
    top: 40px;
    font: inherit;
    display: inline-block;
    overflow: visible;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition-timing-function: linear;
    transition-duration: .15s;
    transition-property: opacity,filter;
    text-transform: none;
    color: inherit;
    border: 0;
    background-color: transparent
}

.hamburger--emphatic, .hamburger--emphatic-r {
    overflow: hidden
}

.hamburger:hover .hamburger-inner, .hamburger:hover .hamburger-inner:after, .hamburger:hover .hamburger-inner:before {
    background-color: var(--hamburger-color-hover);
}

.sticky .hamburger:hover .sticky .hamburger-inner, .sticky .hamburger:hover .sticky .hamburger-inner:after, .sticky .hamburger:hover .hamburger-inner:before,
.is-active .hamburger:hover .is-active .hamburger-inner, .is-active .hamburger:hover .is-active .hamburger-inner:after, .is-active .hamburger:hover .hamburger-inner:before {
    background-color: var(--hamburger-color--hover-sticky);
}

.hamburger-box {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 24px
}

.hamburger-inner {
    top: 50%;
    display: block;
    margin-top: -2px
}

    .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
        position: absolute;
        width: 30px;
        height: 2px;
        transition-timing-function: ease;
        transition-duration: .15s;
        transition-property: transform;
        border-radius: 0;
        background-color: var(--hamburger-color);
    }
.sticky .hamburger-inner, .sticky .hamburger-inner:after, .sticky .hamburger-inner:before,
.is-active .hamburger-inner, .is-active .hamburger-inner:after, .is-active .hamburger-inner:before {
    background-color: var(--hamburger-color-sticky);
}

        .hamburger-inner:after, .hamburger-inner:before {
            display: block;
            content: ""
        }

        .hamburger-inner:before {
            top: -10px
        }

        .hamburger-inner:after {
            bottom: -10px
        }

.hamburger--3dx .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dx .hamburger-inner:after, .hamburger--3dx .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dx.is-active .hamburger-inner {
    transform: rotateY(180deg);
    background-color: transparent
}

    .hamburger--3dx.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dx.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--3dx-r .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dx-r .hamburger-inner:after, .hamburger--3dx-r .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dx-r.is-active .hamburger-inner {
    transform: rotateY(-180deg);
    background-color: transparent
}

    .hamburger--3dx-r.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dx-r.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--3dy .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dy .hamburger-inner:after, .hamburger--3dy .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dy.is-active .hamburger-inner {
    transform: rotateX(-180deg);
    background-color: transparent
}

    .hamburger--3dy.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dy.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--3dy-r .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dy-r .hamburger-inner:after, .hamburger--3dy-r .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dy-r.is-active .hamburger-inner {
    transform: rotateX(180deg);
    background-color: transparent
}

    .hamburger--3dy-r.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dy-r.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--arrow.is-active .hamburger-inner:before {
    transform: translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)
}

.hamburger--arrow.is-active .hamburger-inner:after {
    transform: translate3d(-8px,0,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrow-r.is-active .hamburger-inner:before {
    transform: translate3d(8px,0,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrow-r.is-active .hamburger-inner:after {
    transform: translate3d(8px,0,0) rotate(-45deg) scaleX(.7)
}

.hamburger--arrowalt .hamburger-inner:before {
    transition: top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt .hamburger-inner:after {
    transition: bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt.is-active .hamburger-inner:before {
    top: 0;
    transition: top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(-8px,-10px,0) rotate(-45deg) scaleX(.7)
}

.hamburger--arrowalt.is-active .hamburger-inner:after {
    bottom: 0;
    transition: bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(-8px,10px,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrowalt-r .hamburger-inner:before {
    transition: top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt-r .hamburger-inner:after {
    transition: bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt-r.is-active .hamburger-inner:before {
    top: 0;
    transition: top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(8px,-10px,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrowalt-r.is-active .hamburger-inner:after {
    bottom: 0;
    transition: bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(8px,10px,0) rotate(-45deg) scaleX(.7)
}

.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner:after, .hamburger--boring .hamburger-inner:before {
    transition-property: none
}

.hamburger--boring.is-active .hamburger-inner {
    transform: rotate(45deg)
}

    .hamburger--boring.is-active .hamburger-inner:before {
        top: 0;
        opacity: 0
    }

    .hamburger--boring.is-active .hamburger-inner:after {
        bottom: 0;
        transform: rotate(-90deg)
    }

.hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-delay: .13s;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .13s
}

    .hamburger--collapse .hamburger-inner:after {
        top: -20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear
    }

    .hamburger--collapse .hamburger-inner:before {
        transition: top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--collapse.is-active .hamburger-inner {
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translate3d(0,-10px,0) rotate(-45deg)
}

    .hamburger--collapse.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;
        opacity: 0
    }

    .hamburger--collapse.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;
        transform: rotate(-90deg)
    }

.hamburger--collapse-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-delay: .13s;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .13s
}

    .hamburger--collapse-r .hamburger-inner:after {
        top: -20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear
    }

    .hamburger--collapse-r .hamburger-inner:before {
        transition: top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--collapse-r.is-active .hamburger-inner {
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translate3d(0,-10px,0) rotate(45deg)
}

    .hamburger--collapse-r.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;
        opacity: 0
    }

    .hamburger--collapse-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;
        transform: rotate(90deg)
    }

.hamburger--elastic .hamburger-inner {
    top: 2px;
    transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);
    transition-duration: .275s
}

    .hamburger--elastic .hamburger-inner:before {
        top: 10px;
        transition: opacity .125s ease .275s
    }

    .hamburger--elastic .hamburger-inner:after {
        top: 20px;
        transition: transform .275s cubic-bezier(.68,-.55,.265,1.55)
    }

.hamburger--elastic.is-active .hamburger-inner {
    transition-delay: 75ms;
    transform: translate3d(0,10px,0) rotate(135deg)
}

    .hamburger--elastic.is-active .hamburger-inner:before {
        transition-delay: 0;
        opacity: 0
    }

    .hamburger--elastic.is-active .hamburger-inner:after {
        transition-delay: 75ms;
        transform: translate3d(0,-20px,0) rotate(-270deg)
    }

.hamburger--elastic-r .hamburger-inner {
    top: 2px;
    transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);
    transition-duration: .275s
}

    .hamburger--elastic-r .hamburger-inner:before {
        top: 10px;
        transition: opacity .125s ease .275s
    }

    .hamburger--elastic-r .hamburger-inner:after {
        top: 20px;
        transition: transform .275s cubic-bezier(.68,-.55,.265,1.55)
    }

.hamburger--elastic-r.is-active .hamburger-inner {
    transition-delay: 75ms;
    transform: translate3d(0,10px,0) rotate(-135deg)
}

    .hamburger--elastic-r.is-active .hamburger-inner:before {
        transition-delay: 0;
        opacity: 0
    }

    .hamburger--elastic-r.is-active .hamburger-inner:after {
        transition-delay: 75ms;
        transform: translate3d(0,-20px,0) rotate(270deg)
    }

.hamburger--emphatic .hamburger-inner {
    transition: background-color .125s ease-in .175s
}

    .hamburger--emphatic .hamburger-inner:before {
        left: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s
    }

    .hamburger--emphatic .hamburger-inner:after {
        top: 10px;
        right: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s
    }

.hamburger--emphatic.is-active .hamburger-inner {
    transition-delay: 0;
    transition-timing-function: ease-out;
    background-color: transparent
}

    .hamburger--emphatic.is-active .hamburger-inner:before {
        top: -80px;
        left: -80px;
        transition: left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(80px,80px,0) rotate(45deg)
    }

    .hamburger--emphatic.is-active .hamburger-inner:after {
        top: -80px;
        right: -80px;
        transition: right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(-80px,80px,0) rotate(-45deg)
    }

.hamburger--emphatic-r .hamburger-inner {
    transition: background-color .125s ease-in .175s
}

    .hamburger--emphatic-r .hamburger-inner:before {
        left: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s
    }

    .hamburger--emphatic-r .hamburger-inner:after {
        top: 10px;
        right: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s
    }

.hamburger--emphatic-r.is-active .hamburger-inner {
    transition-delay: 0;
    transition-timing-function: ease-out;
    background-color: transparent
}

    .hamburger--emphatic-r.is-active .hamburger-inner:before {
        top: 80px;
        left: -80px;
        transition: left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(80px,-80px,0) rotate(-45deg)
    }

    .hamburger--emphatic-r.is-active .hamburger-inner:after {
        top: 80px;
        right: -80px;
        transition: right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(-80px,-80px,0) rotate(45deg)
    }

.hamburger--slider .hamburger-inner:before, .hamburger--slider-r .hamburger-inner:before {
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: transform,opacity
}

.hamburger--slider .hamburger-inner {
    top: 2px
}

    .hamburger--slider .hamburger-inner:before {
        top: 10px
    }

    .hamburger--slider .hamburger-inner:after {
        top: 20px
    }

.hamburger--slider.is-active .hamburger-inner {
    transform: translate3d(0,10px,0) rotate(45deg)
}

    .hamburger--slider.is-active .hamburger-inner:before {
        transform: rotate(-45deg) translate3d(-5.71px,-6px,0);
        opacity: 0
    }

    .hamburger--slider.is-active .hamburger-inner:after {
        transform: translate3d(0,-20px,0) rotate(-90deg)
    }

.hamburger--slider-r .hamburger-inner {
    top: 2px
}

    .hamburger--slider-r .hamburger-inner:before {
        top: 10px
    }

    .hamburger--slider-r .hamburger-inner:after {
        top: 20px
    }

.hamburger--slider-r.is-active .hamburger-inner {
    transform: translate3d(0,10px,0) rotate(-45deg)
}

    .hamburger--slider-r.is-active .hamburger-inner:before {
        transform: rotate(45deg) translate3d(5.71px,-6px,0);
        opacity: 0
    }

    .hamburger--slider-r.is-active .hamburger-inner:after {
        transform: translate3d(0,-20px,0) rotate(90deg)
    }

.hamburger--spring .hamburger-inner {
    top: 2px;
    transition: background-color 0 linear .13s
}

    .hamburger--spring .hamburger-inner:before {
        top: 10px;
        transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

    .hamburger--spring .hamburger-inner:after {
        top: 20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spring.is-active .hamburger-inner {
    transition-delay: .22s;
    background-color: transparent
}

    .hamburger--spring.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--spring.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;
        transform: translate3d(0,10px,0) rotate(-45deg)
    }

.hamburger--spring-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-delay: 0;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .13s
}

    .hamburger--spring-r .hamburger-inner:after {
        top: -20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0 linear
    }

    .hamburger--spring-r .hamburger-inner:before {
        transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spring-r.is-active .hamburger-inner {
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translate3d(0,-10px,0) rotate(-45deg)
}

    .hamburger--spring-r.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0 linear .22s;
        opacity: 0
    }

    .hamburger--spring-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
        transform: rotate(90deg)
    }

.hamburger--stand .hamburger-inner {
    transition: transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0 linear 75ms
}

    .hamburger--stand .hamburger-inner:before {
        transition: top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

    .hamburger--stand .hamburger-inner:after {
        transition: bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

.hamburger--stand.is-active .hamburger-inner {
    transition: transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0 linear .15s;
    transform: rotate(90deg);
    background-color: transparent
}

    .hamburger--stand.is-active .hamburger-inner:before {
        top: 0;
        transition: top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(-45deg)
    }

    .hamburger--stand.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(45deg)
    }

.hamburger--stand-r .hamburger-inner {
    transition: transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0 linear 75ms
}

    .hamburger--stand-r .hamburger-inner:before {
        transition: top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

    .hamburger--stand-r .hamburger-inner:after {
        transition: bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

.hamburger--stand-r.is-active .hamburger-inner {
    transition: transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0 linear .15s;
    transform: rotate(-90deg);
    background-color: transparent
}

    .hamburger--stand-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(-45deg)
    }

    .hamburger--stand-r.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(45deg)
    }

.hamburger--spin .hamburger-inner {
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .22s
}

    .hamburger--spin .hamburger-inner:before {
        transition: top .1s ease-in .25s,opacity .1s ease-in
    }

    .hamburger--spin .hamburger-inner:after {
        transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spin.is-active .hamburger-inner {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: rotate(225deg)
}

    .hamburger--spin.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s ease-out,opacity .1s ease-out .12s;
        opacity: 0
    }

    .hamburger--spin.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
        transform: rotate(-90deg)
    }

.hamburger--spin-r .hamburger-inner {
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .22s
}

    .hamburger--spin-r .hamburger-inner:before {
        transition: top .1s ease-in .25s,opacity .1s ease-in
    }

    .hamburger--spin-r .hamburger-inner:after {
        transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spin-r.is-active .hamburger-inner {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: rotate(-225deg)
}

    .hamburger--spin-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s ease-out,opacity .1s ease-out .12s;
        opacity: 0
    }

    .hamburger--spin-r.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
        transform: rotate(90deg)
    }

.hamburger--squeeze .hamburger-inner {
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: 75ms
}

    .hamburger--squeeze .hamburger-inner:before {
        transition: top 75ms ease .12s,opacity 75ms ease
    }

    .hamburger--squeeze .hamburger-inner:after {
        transition: bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--squeeze.is-active .hamburger-inner {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: rotate(45deg)
}

    .hamburger--squeeze.is-active .hamburger-inner:before {
        top: 0;
        transition: top 75ms ease,opacity 75ms ease .12s;
        opacity: 0
    }

    .hamburger--squeeze.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;
        transform: rotate(-90deg)
    }

.hamburger--vortex .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transition-duration: .2s
}

    .hamburger--vortex .hamburger-inner:after, .hamburger--vortex .hamburger-inner:before {
        transition-delay: .1s;
        transition-timing-function: linear;
        transition-duration: 0
    }

    .hamburger--vortex .hamburger-inner:before {
        transition-property: top,opacity
    }

    .hamburger--vortex .hamburger-inner:after {
        transition-property: bottom,transform
    }

.hamburger--vortex.is-active .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transform: rotate(765deg)
}

    .hamburger--vortex.is-active .hamburger-inner:after, .hamburger--vortex.is-active .hamburger-inner:before {
        transition-delay: 0
    }

    .hamburger--vortex.is-active .hamburger-inner:before {
        top: 0;
        opacity: 0
    }

    .hamburger--vortex.is-active .hamburger-inner:after {
        bottom: 0;
        transform: rotate(90deg)
    }

.hamburger--vortex-r .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transition-duration: .2s
}

    .hamburger--vortex-r .hamburger-inner:after, .hamburger--vortex-r .hamburger-inner:before {
        transition-delay: .1s;
        transition-timing-function: linear;
        transition-duration: 0
    }

    .hamburger--vortex-r .hamburger-inner:before {
        transition-property: top,opacity
    }

    .hamburger--vortex-r .hamburger-inner:after {
        transition-property: bottom,transform
    }

.hamburger--vortex-r.is-active .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transform: rotate(-765deg)
}

    .hamburger--vortex-r.is-active .hamburger-inner:after, .hamburger--vortex-r.is-active .hamburger-inner:before {
        transition-delay: 0
    }

    .hamburger--vortex-r.is-active .hamburger-inner:before {
        top: 0;
        opacity: 0
    }

    .hamburger--vortex-r.is-active .hamburger-inner:after {
        bottom: 0;
        transform: rotate(-90deg)
    }

ol li[data-list="ordered"] {
    list-style-type: decimal;
}

/* Bulletlijsten (ook als Quill ze per ongeluk in een <ol> zet) */
ol li[data-list="bullet"] {
    list-style-type: disc;
}

ol .ql-indent-1 {
    list-style-type: lower-alpha !important;
}

.swal2-container {
    z-index: 9999 !important;
}

label.error, .displayMobileOnly {
    display: none !important;
}

form .box.error {
    background: #F2DEDE;
}

.headerFotoMobiel, .mobileDotsSlider {
    display: none !important;
}

.productContainer .producten .productItem .productItemTekst .prijs.tablet {
    display: none;
}

body {
    margin: 0;
    padding: 0;
    font: var(--defaultTekst);
    color: #000;
}

p {
    margin: 0;
    padding: 0;
}

.wrapper {
    position: relative;
    margin: 0 auto;
    width: var(--wrapper-width);
    display: flex;
    flex-wrap: wrap;
}

h1, h2 {
    font: var(--koppen);
    color: var(--donkerBlauw);
    letter-spacing: -1.3px;
}
h7 {
    font: var(--bericht-label);
    text-transform:uppercase;
    margin:0 0 15px;
}
.introContainer h1, .magazineWrapper h2 {
    font: var(--koppenGroot);
}

.nieuwsTekstContainer h1, .winkelwagenContainer h1, .winkelwagenContainer h2 {
    margin: 0;
    font: var(--koppenGroot);
}

.bestelFormulierContainer h2 {
    margin: 0 0 50px;
    color: var(--donkerBlauw);
}

.bestelFormulierContainer h4 {
    margin: 0 0 20px;
    color: var(--donkerBlauw);
}

h3, .sliderContainer h2 {
    font: var(--koppenGroot);
    color: var(--donkerBlauw);
    letter-spacing: -1.3px;
    margin: 0 0 20px;
}

.persoonlijkAdvies h3 {
    color: var(--donkerBlauw);
    letter-spacing: -2.1px;
}

.persoonlijkAdvies.oogZorg h3 {
    color: #FFF;
}

h4, .fotoBlok h3, .fotoBlok h2 {
    margin: 0;
    font: var(--koppen);
    letter-spacing: normal;
    color: inherit;
    letter-spacing: -1.3px;
}

.faqContainer h4, .downloadContainer h4 {
    color: var(--donkerBlauw);
}

.downloadContainer h4 {
    margin: 0 0 30px;
}

img {
    display: block;
}

a {
    text-decoration: underline;
    color: #000;
    transition: ease-in-out color 0.3s;
}

    a:hover, nav a:hover {
        color: var(--blauw);
    }

.btn, .swal2-confirm {
    display: inline-flex;
    height: var(--button-height);
    align-content: center;
    align-items: center;
    font: var(--kleineKoppen) !important;
    padding: 0 var(--button-padding);
    transition: ease all 0.3s;
    text-decoration: none;
    width: fit-content;
}

    .btn.actionButton {
        width: 30px;
        height: 30px;
        padding: 0;
        justify-content: center;
        margin: 0 2px;
    }

        .btn.actionButton.icon-min {
            font-size: 2px !important;
        }

    .btn.blauw {
        color: var(--donkerBlauw);
        background: var(--kleur1);
    }

    .btn.felRoze {
        color: #000;
        background: var(--felRoze);
    }

        .btn.felRoze:hover {
            color: #FFF;
            background: var(--donkerBlauw);
        }

.swal2-confirm {
    color: #FFF !important;
    background: var(--blauw) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.btn.blauw:hover {
    background: var(--kleur2-hover-btn);
}

.btn.blauw.hoverOmgekeerd:hover {
    background: #FFF;
    color: var(--donkerBlauw);
}

.btn.wit {
    background: #FFF;
    color: var(--donkerBlauw);
}

    .btn.wit:hover {
        background: var(--donkerBlauw);
        color: #FFF;
    }

.btn.grijs {
    background: var(--kleur4);
    color: var(--donkerGrijs);
}

.locatieContainer .col6px .btn, .merkPromo .col6px .btn {
    display: flex;
    width: fit-content;
    margin-top: 40px;
}

.btnAfspraakButton, .shoppingBasketIcon {
    position: fixed;
    z-index: 999;
    bottom: var(--afspraak-button-position);
    right: var(--afspraak-button-position-right);
    width: var(--afspraak-button);
    height: var(--afspraak-button);
    background: var(--kleur1);
    color: var(--donkerBlauw);
    -webkit-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
    box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
    text-decoration: none;
    border-radius: 100%;
    font: var(--afspraakRondjeCredits);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    letter-spacing: -0.5px;
    transition: ease-in-out all 0.3s;
    cursor: pointer;
}

.shoppingBasketIcon {
    display: flex;
    background: var(--donkerBlauw);
    color: #FFF;
    bottom: 50vh;
    right: var(--shopping-button-position);
    opacity: 0;
}

    .shoppingBasketIcon span.icon-shopping {
        font-size: 40px;
        margin-left: -2px;
    }

    .shoppingBasketIcon span.count {
        position: absolute;
        top: 31px;
        width: 100%;
        text-align: center;
    }

    .shoppingBasketIcon:hover {
        background: #FFF;
        color: var(--donkerBlauw);
    }


    .shoppingBasketIcon.is-active {
        -webkit-animation: shockwaveJump 1s ease-out infinite;
        animation: shockwaveJump 1s ease-out infinite;
    }

        .shoppingBasketIcon.is-active:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            border-radius: 50%;
            -webkit-animation: shockwave 1s .65s ease-out infinite;
            animation: shockwave 1s .65s ease-out infinite;
        }

        .shoppingBasketIcon.is-active:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            border-radius: 50%;
            -webkit-animation: shockwave 1s .5s ease-out infinite;
            animation: shockwave 1s .5s ease-out infinite;
        }

@-webkit-keyframes shockwaveJump {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    40% {
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
    }

    50% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
    }

    55% {
        -webkit-transform: scale(1.02);
        transform: scale(1.02);
    }

    60% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes shockwaveJump {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    40% {
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
    }

    50% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
    }

    55% {
        -webkit-transform: scale(1.02);
        transform: scale(1.02);
    }

    60% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes shockwave {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.15);
    }

    95% {
        box-shadow: 0 0 50px transparent, inset 0 0 30px transparent;
    }

    100% {
        -webkit-transform: scale(2.25);
        transform: scale(2.25);
    }
}

@keyframes shockwave {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.15);
    }

    95% {
        box-shadow: 0 0 50px transparent, inset 0 0 30px transparent;
    }

    100% {
        -webkit-transform: scale(2.25);
        transform: scale(2.25);
    }
}

.shoppingBasketIcon.is-active {
    -webkit-animation: .4s jump ease infinite alternate;
    animation: .4s jump ease infinite alternate;
}

@-webkit-keyframes jump {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    100% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
}

@keyframes jump {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    100% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
}

.btnAfspraakButton.headerActieActief {
    bottom: calc(var(--afspraak-button-position) + var(--header-actie-height));
}

.btnAfspraakButton span {
    display: block;
    font-size: 35px;
    margin: 0 0 3px;
    letter-spacing: normal;
}

.btnAfspraakButton:hover {
    background: var(--kleur3);
    color: var(--donkerBlauw);
}

nav {
    position: absolute;
    max-height: 0;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 9999;
    transition: max-height 0.5s ease-in-out;
    background: var(--kleur4);
}

    nav .logoContainer {
        height: calc(100% - 35px) !important;
    }

        nav .logoContainer svg .cls-1 {
            fill: var(--kleur2);
        }

    nav.is-active {
        max-height: 100vh; /* groter dan de werkelijke inhoud */
    }

.hamburger {
    padding: 10px 9px;
    height: 22px;
    right: calc(var(--header-border-padding) + 35px);
    top: calc(var(--header-border-padding) + 25px);
    z-index: 99999;
}

nav ul.hoofdMenu, nav ul.subMenu, nav ul.subSubMenu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}

nav ul.hoofdMenu {
    position: relative;
    padding: 180px 0 120px;
    z-index: 99999;
}

    nav ul.hoofdMenu li {
        /*min-width: var(--col3px);*/
        padding-right: 70px;
    }

        nav ul.hoofdMenu li.last {
            /*min-width: var(--col3px);*/
            padding-right: 0;
            padding-left: 90px;
            border-left: 2px solid var(--kleur5);
        }

            nav ul.hoofdMenu li.last a {
                color: var(--kleur5);
            }

        nav ul.hoofdMenu li a {
            color: var(--kleur2);
            font: var(--koppenGroot);
            text-decoration: none;
            text-wrap: nowrap;
        }
            nav ul.hoofdMenu li a:hover {
                color: var(--hoofdmenu-menu-hover) !important;
            }
            nav ul.subMenu, nav ul.subSubMenu {
                display: block;
            }

    nav ul.subMenu li a, nav ul.subSubMenu li a {
        color: var(--kleur2);
        font: var(--koppenNavigatie);
        text-decoration: none;
    }

    nav ul.subSubMenu li {
        margin: 0;
        padding: 0;
    }

        nav ul.subSubMenu li a {
            font: var(--navLink);
        }

            nav ul.subMenu li a:hover, nav ul.subSubMenu li a:hover {
                color: var(--kleur2-hover) !important;
            }

            nav ul.hoofdMenu li.last a:hover{
                color: var(--kleur5-hover) !important;
            }


nav .btn {
    width: var(--button-widht-nav);
    margin: 0 0 10px;
}

header {
    position: relative;
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center center;
    color: #FFF;
    background: var(--kleur2);
}

    header .logoContainer, nav .logoContainer {
        position: absolute;
        top: var(--header-border-padding);
        left: var(--header-border-padding);
        border: 3px solid var(--kleur1);
        animation: growToFull 1s ease-out forwards;
        z-index: 11;
    }

nav .logoContainer {
    height: 100%;
    width: calc(100% - var(--header-border-padding) - var(--header-border-padding));
    border-bottom: 0;
    border-color: var(--kleur2)
}

@keyframes growToFull {
    /* Start */
    0% {
        width: 250px;
        height: 70px;
    }
    /* Eerst hoogte naar volledig scherm */
    50% {
        width: 250px;
        height: calc(100% - var(--header-border-padding) - var(--header-border-padding));
    }
    /* Daarna breedte naar volledig scherm */
    100% {
        width: calc(100% - var(--header-border-padding) - var(--header-border-padding));
        height: calc(100% - var(--header-border-padding) - var(--header-border-padding));
    }
}
@keyframes growToFullVolgHeader {
    /* Start */
    0% {
        height: 70px;
    }
    /* Daarna breedte naar volledig scherm */
    100% {
        height: 150px;
    }
}

header .logoContainer svg, nav .logoContainer svg {
    width: 225px;
    height: 55px;
    margin: 0 0 0 15px;
}
header.volgHeader .logoContainer, header.small .logoContainer, header.xs .logoContainer {
    border-bottom: 0;
    width: calc(100% - var(--header-border-padding) - var(--header-border-padding)) !important;
    animation: growToFullVolgHeader 0.5s ease-out forwards;
}
header.volgHeader, header.small, header.xs {
    background-size: cover;
    background-repeat: no-repeat;
}
    header.volgHeader:before, header.small:before, header.xs:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 540px;
        max-height: 50%;
        content: '';
        background: linear-gradient(180deg,rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    }
    header.small:before, header.xs:before {
        background: linear-gradient(180deg, rgb(0 0 0 / 35%) 0%, rgba(0, 0, 0, 0) 100%);
        max-height: 100%;
    }
    header.small.groeneGradient:before{
        background:none;
    }
header .fotoContainer {
    position: absolute;
    top: var(--fotoContainer-top-margin);
    right: calc(var(--col3px) + var(--default-side-margin) - 6px);
    height: calc(100vh - var(--fotoContainer-top-margin));
    overflow: hidden;
    width: 0;
    z-index: 10;
    animation: growToFullFoto 1s ease-out forwards;
    animation-delay: 1s;
}

@keyframes growToFullFoto {
    0% {
        width: 0;
    }

    100% {
        width: calc(var(--default-side-margin-viewport) + var(--col9px) - var(--fotoContainer-left-margin));
    }
}

header .fotoContainer img {
    object-fit: cover;
    object-position: right center;
    width: calc(var(--default-side-margin-viewport) + var(--col9px) - var(--fotoContainer-left-margin));
    height: 100%;
    position: absolute;
    right: 0;
}

.headerContentKlein,
.headerContentButtonContainer,
hr {
    opacity: 0;
    animation: fadeInDownHr 0.8s ease-out forwards;
}

hr {
    animation: fadeInDownHr 0.8s ease-out forwards;
}

.headerContent a {
    display: inline-block;
    opacity: 0;
    animation: fadeInDownHr 0.8s ease-out forwards;
}

.headerContentKlein {
    animation-delay: 1s;
}

hr:nth-of-type(1) {
    animation-delay: 1.4s;
}

.headerContent a:nth-child(1) {
    animation-delay: 1.6s;
}

.headerContent a:nth-child(3) {
    animation-delay: 1.8s;
}

.headerContent a:nth-child(5) {
    animation-delay: 2.0s;
}

hr:nth-of-type(2) {
    animation-delay: 2.2s;
}

.headerContentButtonContainer {
    animation-delay: 2.4s;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDownHr {
    0% {
        opacity: 0;
        transform: translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

header .blauw {
    color: var(--donkerBlauw);
}

header.small {
    height: var(--smallHeaderHeight);
}

header.xs {
    height: var(--xsHeaderHeight);
}

header:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 50%;
    height: 100%;
    background: -moz-linear-gradient(99.87% 50% -180deg,rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 1) 100%);
    background: -webkit-linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient(linear,99.87% 50%,0.5% 50%,color-stop(0,rgba(0, 0, 0, 0) ),color-stop(1,rgba(0, 0, 0, 1) ));
    background: -o-linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -ms-linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    opacity: 0.1;
    pointer-events: none;
}

header.groeneGradient:after {
    display: none;
}

header.groeneGradient {
    background: var(--kleur4);
}

header .headerVideo {
    overflow: hidden;
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -998;
}

.vjs-tech {
    object-fit: cover;
}

header .headerContentContainer {
    position: absolute;
    flex-wrap: wrap;
    top: 50%;
    transform: translateY(-50%);
    right: var(--fotoContainer-left-margin);
    width: calc(100% - calc(var(--default-side-margin-viewport) + var(--default-side-margin-viewport) + var(--col9px) - var(--fotoContainer-left-margin)));
    color: var(--kleur1);
    z-index: 999;
}
header.volgHeader .headerContentContainer, header.small .headerContentContainer, header.xs .headerContentContainer {
    right: auto;
    left: var(--fotoContainer-left-margin);
    color: var(--kleur4);
}
header.volgHeader .headerContent.tekstBlauw {
    color: var(--kleur4);
}
header.volgHeader .headerContentButtonContainer .btn.wit, header .headerContentButtonContainer.tekstBlauw .btn.wit {
    background: var(--kleur4) !important;
    color: var(--donkerBlauw) !important;
}
    header .headerContent a {
    color: var(--kleur1) !important;
}

header .headerContentButtonContainer .btn.wit {
    background: var(--kleur1) !important;
}

header .headerContent a:hover {
    color: var(--kleur3) !important;
}

header .headerContentButtonContainer .btn.wit:hover {
    background: var(--kleur3) !important;
    color: var(--donkerBlauw) !important;
}

header.small .headerContentContainer, header.xs .headerContentContainer {
    bottom: 0;
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
}

header .headerContentKlein, header .headerContentButtonContainer {
    width: 100%;
    font: var(--gun-je-zelf);
}
header.small .headerContentKlein, header.xs .headerContentKlein {
    width: 100%;
    font: var(--koppenGroot);
}
.btnTerugNaarNieuwsOverzicht {
    font: var(--terug-button);
}
header .headerContentButtonContainer {
    margin: 50px 0 0;
}

header hr {
    border: none;
    border-top: 3px solid var(--kleur1);
}

header .headerContentKlein.tekstBlauw {
    color: var(--donkerBlauw);
}

header .headerContentButtonContainer.tekstBlauw .btn.wit {
    color: #FFF;
    background: var(--donkerBlauw);
}

    header .headerContentButtonContainer.tekstBlauw .btn.wit:hover {
        background: #FFF;
        color: var(--donkerBlauw);
    }

header a.headerContentKlein, .btnTerugNaarNieuwsOverzicht {
    color: #FFF;
    text-decoration: none;
    line-height: 20px;
}

.btnTerugNaarNieuwsOverzicht {
    color: var(--donkerBlauw);
    margin: 0 0 70px;
    display: block;
}

    header a.headerContentKlein:hover, .btnTerugNaarNieuwsOverzicht:hover {
        color: var(--blauw);
    }

    header a.headerContentKlein span, .btnTerugNaarNieuwsOverzicht span {
        display: inline-block;
        margin: 0 10px 0 0;
        font-size: 12px;
    }

header .headerContent {
    border-top: 2px solid rgba(255,255,255,0);
    border-bottom: 2px solid rgba(255,255,255,0);
    width: fit-content;
    font: var(--hoofdnav);
    letter-spacing: -4.4px;
    margin: 0;
    padding: 0;
}

header.small .headerContent {
    padding: 0;
    margin: 0;
}

header .headerContent.borders {
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
}

header .headerContent.tekstBlauw {
    color: var(--donkerBlauw);
}

    header .headerContent.tekstBlauw.borders {
        border-color: var(--donkerBlauw);
    }

header .headerContent a {
    text-decoration: none;
    color: #FFF;
    transition: ease-in-out color 0.3s;
}

header .headerContent.tekstBlauw a {
    color: var(--donkerBlauw);
}

    header .headerContent.tekstBlauw a:hover {
        color: #FFF;
    }

header .videoContainer .headerContent a, header.videoContainer {
    color: var(--donkerBlauw);
}

    header.videoContainer .btn {
        background: var(--donkerBlauw);
        color: #FFF;
    }

    header.videoContainer .headerContent.borders {
        border-color: var(--donkerBlauw);
    }

header .headerContent a:hover {
    color: var(--donkerBlauw);
}

header .headerActie {
    position: absolute;
    bottom: 0;
    background: var(--felRoze);
    width: 100%;
    height: var(--header-actie-height);
    display: flex;
    align-items: center;
    cursor: pointer;
}

    header .headerActie.lindberg {
        background: var(--donkerBlauw);
    }

    header .headerActie.blauw {
        background: var(--donkerBlauw);
    }

    header .headerActie.lichtBlauw {
        background: rgb(0,32,57);
    }

    header .headerActie.roze {
        background: var(--felRoze);
    }

    header .headerActie.lindberg .dataContainer {
        display: flex;
        flex-wrap: wrap;
    }

        header .headerActie.lindberg .dataContainer .col6 {
            width: fit-content;
            padding: 0 25px;
            box-sizing: border-box;
            font-size: 22px;
            line-height: 33px;
        }

    header .headerActie .wrapper {
        align-items: center;
    }

    header .headerActie .col7 h4 {
        letter-spacing: -0.5px;
    }

    header .headerActie .col1 span {
        font-size: 45px;
    }

.locatieContainer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-top: 130px;
    justify-content: flex-end;
}

    .locatieContainer.bgGrijs {
        margin-top: 150px;
        padding: 90px 0;
        background: var(--kleur4);
    }

    .locatieContainer .col6px {
        box-sizing: border-box;
        padding-right: var(--col1px);
    }



    .locatieContainer .locaties {
        display: flex;
        flex-wrap: wrap;
    }

        .locatieContainer .locaties .locatie {
            cursor: pointer;
            padding: 0 30px 0 0;
            box-sizing: border-box;
            font: var(--kleineKoppen);
            color: var(--donkerBlauw);
        }

            .locatieContainer .locaties .locatie img {
                width: 100%;
                margin: 0 0 15px;
            }

            .locatieContainer .locaties .locatie a {
                color: var(--donkerBlauw);
                text-decoration: none;
                display: inline-flex;
                align-content: center;
                align-items: center;
            }

            .locatieContainer .locaties .locatie span {
                font-size: 14px;
                margin: 0 0 0 15px;
            }

            .locatieContainer .locaties .locatie .imageContainer {
                position: relative;
            }

                .locatieContainer .locaties .locatie .imageContainer:after {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 0;
                    content: "";
                    display: block;
                    background: var(--donkerBlauw);
                    opacity: 0.5;
                    transition: ease-in-out all 0.5s;
                }

            .locatieContainer .locaties .locatie:hover .imageContainer:after {
                height: 100%;
            }

.merkPromo {
    position: relative;
    margin: 100px 0 0;
    display: flex;
    flex-wrap: wrap;
}

    .merkPromo .brilContainer {
        position: relative;
        overflow: hidden;
        text-align: right;
        display: flex;
        justify-content: flex-end;
    }

        .merkPromo .brilContainer img {
            position: relative;
            margin: 150px 70px 0 0;
        }

    .merkPromo .kleurVlak {
        position: absolute;
        top: 0;
        left: calc(50% - var(--col4px) + 90px);
        width: var(--col4px);
        height: var(--col4px);
        background: var(--kleur3);
    }

    .merkPromo .tekstContainer {
        position: relative;
        margin: 100px 0 0;
    }

        .merkPromo .tekstContainer .streamer {
            font: var(--streamer);
            letter-spacing: -6px;
            color: var(--kleur1);
            margin: 0 0 80px;
            display: block;
        }

.sliderContainer {
    position: relative;
    margin: 220px 0 0;
    height: var(--fotoBlok-Height-Groot);
    width: 100%;
    overflow: hidden;
}

    .sliderContainer.bgGrijs {
        background: var(--kleur4);
        margin: 140px 0 0;
        padding: 90px 0 100px;
    }

    .sliderContainer.geenMarge {
        margin: 0;
    }

    .sliderContainer .tekstContainer {
        z-index: 100;
    }

        .sliderContainer .tekstContainer .col8 {
            box-sizing: border-box;
            padding: 0 0 0 var(--fotoBlok-margin);
        }

        .sliderContainer .tekstContainer .buttonContainer {
            width: 100%;
            display: flex;
            margin: 40px 0 0;
        }

            .sliderContainer .tekstContainer .buttonContainer a {
                text-decoration: none;
                font: var(--kleineKoppen);
                color: var(--donkerBlauw);
                display: flex;
                align-items: center;
                transition: ease-in-out color 0.3s;
                cursor: pointer;
            }

                .sliderContainer .tekstContainer .buttonContainer a:hover {
                    color: var(--blauw);
                }

                .sliderContainer .tekstContainer .buttonContainer a span {
                    font-size: 12px;
                    margin: 0 10px 0 0;
                }

            .sliderContainer .tekstContainer .buttonContainer .btnNext {
                margin-left: auto;
            }

                .sliderContainer .tekstContainer .buttonContainer .btnNext span {
                    margin: 0 0 0 10px;
                }

    .sliderContainer .slider {
        position: absolute;
        bottom: 0;
        left: var(--default-side-margin);
        height: var(--fotoBlok-Height-Groot);
    }

    .sliderContainer.bgGrijs .slider {
        bottom: 100px;
    }

    .sliderContainer .slider .slick-track {
        display: flex;
        align-items: flex-end;
    }

.fotoBlok, .slick-slide.fotoBlok {
    position: relative;
    width: var(--col4px);
    margin: 0 var(--fotoBlok-margin) 0 0;
    height: var(--fotoBlok-Height-Klein);
    transition: none;
}

.fotoBlok {
    margin: 0 var(--fotoBlok-margin) var(--fotoBlok-margin) 0;
    width: calc(var(--col4) - var(--fotoBlok-margin));
    margin-bottom: var(--fotoBlok-margin);
    cursor: pointer;
}

    .fotoBlok:after {
        pointer-events: none;
        z-index: 1;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--fotoBlok-Height-Klein);
        content: '';
        display: block;
        background: -moz-linear-gradient(50% 44.58% -90deg,rgba(0, 32, 57, 0) 0%,rgba(0, 32, 57, 1) 100%);
        background: -webkit-linear-gradient(-90deg, rgba(0, 32, 57, 0) 0%, rgba(0, 32, 57, 1) 100%);
        background: -webkit-gradient(linear,50% 44.58%,50% 86.75%,color-stop(0,rgba(0, 32, 57, 0) ),color-stop(1,rgba(0, 32, 57, 1) ));
        background: -o-linear-gradient(-90deg, rgba(0, 32, 57, 0) 0%, rgba(0, 32, 57, 1) 100%);
        background: -ms-linear-gradient(-90deg, rgba(0, 32, 57, 0) 0%, rgba(0, 32, 57, 1) 100%);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#002039', endColorstr='#002039' ,GradientType=0)";
        background: linear-gradient(180deg, rgba(0, 32, 57, 0) 0%, rgba(0, 32, 57, 1) 100%);
        opacity: 0.5;
        filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#002039',endColorstr='#002039', GradientType=0);
    }

    .fotoBlok.groot, .fotoBlok.slick-current {
        height: var(--fotoBlok-Height-Groot);
        transition: ease-in-out all 0.5s;
    }

        .fotoBlok.slick-current:after, .fotoBlok.groot:after {
            opacity: 1;
            background: rgba(0, 32, 57, 0.5);
            height: calc(var(--fotoBlok-Height-Klein) - 60px);
            transition: ease-in-out height 0.5s;
        }

        .fotoBlok.slick-current:hover:after, .fotoBlok.groot:hover:after {
            transition: ease-in-out height 0.5s;
            height: 100%;
        }

    .fotoBlok img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .fotoBlok .fotoBlokTekstContainer {
        position: absolute;
        bottom: 0;
        color: #FFF;
        z-index: 10;
        font: var(--defaultTekstSmall);
        padding: 0 20px 20px 35px;
        box-sizing: border-box;
    }

    .fotoBlok:before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        content: '';
        display: block;
        background: rgba(0, 32, 57, 0.5);
        z-index: 2;
        transition: ease-in-out height 0.5s;
    }

    .fotoBlok:hover:before {
        height: 100%;
    }

    .fotoBlok.slick-current:before, .fotoBlok.groot:before {
        display: none;
    }

.slick-slide.fotoBlok .fotoBlokTekstContainer {
    padding: 35px;
}

.fotoBlok .fotoBlokTekstContainer h3, .fotoBlok .fotoBlokTekstContainer h2 {
    position: relative;
    box-sizing: border-box;
    padding-right: 60px;
    display: flex;
    align-content: center;
    align-items: center;
    width: 100%;
    line-height: 40px;
}

    .fotoBlok .fotoBlokTekstContainer h3 span, .fotoBlok .fotoBlokTekstContainer h2 span {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto 0;
        display: inline-flex;
        height: 40px;
        width: 40px;
        background: var(--kleur1);
        color: var(--donkerBlauw);
        align-content: center;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-left: auto;
        transition: ease-in-out background 0.3s;
    }

.fotoBlok:hover .fotoBlokTekstContainer h3 span {
    background: var(--kleur2-hover-btn);
}

.slick-slide.fotoBlok .fotoBlokTekstContainer h3 span {
    margin-right: -20px;
}

.fotoBlok .fotoBlokTekstContainer .fotoBlokTekst {
    height: 0;
    overflow: hidden;
}


.fotoBlok.groot .fotoBlokTekstContainer .fotoBlokTekst, .fotoBlok.slick-current .fotoBlokTekstContainer .fotoBlokTekst {
    height: auto;
    overflow: hidden;
}

.fotoImpressieSliderContainer {
    position: relative;
    margin: 160px 0 0;
    width: 100%;
    overflow: hidden;
}
    .fotoImpressieSliderContainer.noMargin{margin:0 !important;}
    .fotoImpressieSliderContainer .fotoImpressieSlider {
        width: 100%;
    }

        .fotoImpressieSliderContainer .fotoImpressieSlider:after {
            content: '';
            width: 100%;
            height: 200px;
            z-index: 900;
            background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
            position: absolute;
            bottom: 0;
        }

    .fotoImpressieSliderContainer .slick-dots {
        display: flex;
        list-style: none;
        position: absolute;
        bottom: 20px;
        width: 100%;
        justify-content: center;
        z-index: 1000;
    }

        .fotoImpressieSliderContainer .slick-dots li, .fotoImpressieSliderContainer .mobileDotsSlider li {
            position: relative;
            padding: 0 10px;
            margin: 0 1px;
        }

            .fotoImpressieSliderContainer .slick-dots li:after, .fotoImpressieSliderContainer .slick-dots li:before,
            .fotoImpressieSliderContainer .mobileDotsSlider li:after, .fotoImpressieSliderContainer .mobileDotsSlider li:before {
                position: absolute;
                left: 0;
                content: '';
                display: block;
                bottom: -5px;
                width: 100%;
                height: 5px;
                background: rgba(255,255,255,0.3);
            }

            .fotoImpressieSliderContainer .slick-dots li:after,
            .fotoImpressieSliderContainer .mobileDotsSlider li:after {
                background: #FFF;
                width: 0;
            }

            .fotoImpressieSliderContainer .slick-dots li.activeSlide:after,
            .fotoImpressieSliderContainer .mobileDotsSlider li.slick-active:after {
                width: 100%;
                transition: linear width 4s;
            }

            .fotoImpressieSliderContainer .slick-dots li a,
            .fotoImpressieSliderContainer .mobileDotsSlider li a {
                text-decoration: none;
                font: var(--merkTitelSlider);
                color: #FFF;
            }
                .fotoImpressieSliderContainer .slick-dots li a:hover,
                .fotoImpressieSliderContainer .mobileDotsSlider li a:hover {
                    color: var(--kleur4);
                }
                .reviewContainer {
    position: relative;
    margin: 130px 0 0;
    font: var(--defaultTekstSmall);
}

    .reviewContainer .icon-ster.vol {
        color: rgb(251, 188, 4);
    }

    .reviewContainer .icon-ster.leeg {
        color: rgb(218,242,242);
    }

    .reviewContainer .col12 h4 {
        margin: 0 0 30px;
        color: var(--donkerBlauw);
    }

    .reviewContainer .col12, .nieuwsContainer .col12.nieuwsBerichten, .productContainer .col12.producten {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--default--item-margin);
        justify-content: space-between;
        min-height: 0; /* NEW */
        min-width: 0; /* NEW; needed for Firefox */
    }

.nieuwsContainer .col12 {
    display: flex;
}


.reviewContainer .col12 .reviewItem, .nieuwsContainer .nieuwsBerichten .nieuwsItem, .nieuwsContainer .nieuwsBerichten .nieuwsItem .nieuwsItemTekst, .productContainer .producten .productItem {
    /*width: calc(var(--col3) - (var(--default--item-margin) * 1));*/
    -webkit-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
    box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
    box-sizing: border-box;
    padding: 20px 20px 45px;
}

.productContainer .producten .productItem {
    box-shadow: none;
}


.magazienContainer {
    position: relative;
    margin: 220px 0 0;
    background: var(--kleur4);
}

    .magazienContainer .col6 {
        position: relative;
    }

        .magazienContainer .col6 img {
            position: relative;
            top: -50px;
            right: -20px;
            width: 100%;
            border-bottom: 1px solid var(--donkerRoze);
        }

        .magazienContainer .col6.magazienTekst {
            display: flex;
            justify-content: center;
            flex-direction: column;
            box-sizing: border-box;
            font: var(--kopRegel);
            letter-spacing: -4.7px;
            padding: 0 0 0 75px;
            color: var(--donkerRoze);
        }

            .magazienContainer .col6.magazienTekst a {
                font: var(--koppen);
                letter-spacing: -1.3px;
                text-decoration: none;
                color: var(--donkerRoze);
                display: flex;
                align-content: center;
                align-items: center;
                line-height: normal;
                margin: 50px 0 0;
            }

                .magazienContainer .col6.magazienTekst a span {
                    font-size: 22px;
                    display: inline-block;
                    margin-left: 10px;
                }

                .magazienContainer .col6.magazienTekst a:hover {
                    color: var(--donkerBlauw)
                }

.persoonlijkAdvies {
    position: relative;
    margin: 0;
    background: var(--kleur1);
    color: var(--donkerBlauw);
    display: flex;
}

    .persoonlijkAdvies.oogZorg {
        background: var(--donkerBlauw);
        color: #FFF;
    }

    .persoonlijkAdvies .btn.blauw {
        background: var(--donkerBlauw);
        color: var(--kleur1);
    }

    .persoonlijkAdvies.oogZorg .btn.blauw {
        background: var(--kleur1);
        color: var(--donkerBlauw);
    }
        .persoonlijkAdvies.oogZorg .btn.blauw:hover {
            background: #FFF;
        }
        .persoonlijkAdvies img {
            width: 100%;
        }
    .persoonlijkAdvies ol {
        list-style: none !important;
        padding-left: 0;
    }
ol li[data-list="bullet"] {
    list-style-type: none;
}
.persoonlijkAdvies ol li::before {
    content: "\e909";
    font-family: 'YourIconFont'; /* bijv. 'icomoon', 'FontAwesome', etc. */
    margin-right: 8px;
}
    .persoonlijkAdvies .persoonlijkAdviesTekst {
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: 100px var(--col3px) 100px var(--default-side-margin-viewport);
        box-sizing:border-box;
    }

        .persoonlijkAdvies .persoonlijkAdviesTekst ul {
            list-style: none;
            margin: 0 0 50px;
            padding: 0;
        }

            .persoonlijkAdvies .persoonlijkAdviesTekst ul li:before {
                content: "\e909";
                margin-right: 10px;
            }

.nieuwsContainer, .productContainer {
    position: relative;
    margin: 160px 0 0;
    padding: 0 0 40px;
}

    .nieuwsContainer.nieuwsOverzichtPagina {
        margin: 110px 0 0;
    }

    .nieuwsContainer .nieuwsBerichten, .productContainer .producten {
        margin: 40px 0 0;
    }

        .nieuwsContainer .col12 a, .nieuwsContainer .col12 h4, .productContainer .producten h4, .winkelwagen h4, .swal2-html-container h4 {
            color: var(--donkerBlauw);
        }

    .nieuwsContainer .col12 a {
        margin-left: auto;
        text-decoration: none;
        font: var(--kleineKoppen);
        line-height: normal;
    }

        .nieuwsContainer .col12 a span {
            font-size: 13px;
        }

        .nieuwsContainer .col12 a:hover {
            color: var(--blauw);
        }

    .nieuwsContainer .nieuwsBerichten .nieuwsItem, .productContainer .producten .productItem {
        padding: 0;
        color: var(--donkerBlauw);
        font: var(--defaultTekstSmall);
        cursor: pointer;
        margin: 0 0 40px;
        min-width: 0;
    }

        .nieuwsContainer .nieuwsBerichten .nieuwsItem img, .productContainer .producten .productItem img {
            display: block;
            width: 100%;
        }

        .productContainer .producten .productItem img {
            -webkit-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
            -moz-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
            box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
        }

        .nieuwsContainer .nieuwsBerichten .nieuwsItem .nieuwsItemTekst, .productContainer .producten .productItem .productItemTekst {
            width: 100%;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            padding: 20px 20px 45px;
        }

        .productContainer .producten .productItem .productItemTekst {
            padding: 45px 20px 45px 0;
            box-sizing: border-box;
        }

            .productContainer .producten .productItem .productItemTekst .productItemHeader, .swal2-html-container .productPopUpTitel {
                display: flex;
                width: 100%;
                margin: 0 0 35px;
            }

                .productContainer .producten .productItem .productItemTekst .productItemHeader .prijs, .swal2-html-container .productPopUpTitel .prijs {
                    display: flex;
                    align-content: flex-start;
                    align-items: flex-start;
                    margin-left: auto;
                    font: var(--koppen);
                    letter-spacing: -0.9px;
                    padding: 0;
                    white-space: nowrap;
                }

                    .productContainer .producten .productItem .productItemTekst .productItemHeader .prijs span, .swal2-html-container .productPopUpTitel .prijs span {
                        font: var(--kleineKoppen);
                    }

                .productContainer .producten .productItem .productItemTekst .productItemHeader .titel, .winkelwagen .titel, .swal2-html-container .productPopUpTitel .titel {
                    color: var(--donkerGrijs);
                    font: var(--defaultTekstSmall);
                    padding: 0 10px 0 0;
                }

            .productContainer .producten .productItem .productItemTekst a {
                font: var(--kleineKoppen);
                text-decoration: none;
                letter-spacing: -0.85px;
            }

footer {
    position: relative;
    margin: 0;
    padding: 70px 0 60px 0;
    background: var(--kleur2);
    color: var(--kleur1);
    font: var(--defaultTekstSmall);
}

.productContainer .producten .productItem .productItemTekst .btn {
    margin: 35px 0 0;
}

footer .logo {
    width: 250px;
    margin: 0 0 100px;
}

footer h4 {
    letter-spacing: -0.5px;
}

footer a {
    color: #FFF;
    text-decoration: none;
}

form .box, footer .box, .kortingsCodeContainer .box {
    position: relative;
    width: calc(100% - 160px);
    box-sizing: border-box;
    padding: 0 var(--padding-input);
    display: block;
    background-color: #FFF;
    font: var(--kleineKoppen);
    color: var(--donkerBlauw);
    height: var(--height-input);
    line-height: var(--height-input);
    border: 0;
    margin: 0 0 10px;
}

form label {
    width: var(--col2px);
    height: var(--height-input);
    line-height: var(--height-input);
}

form .box {
    width: var(--col5px);
    background: var(--kleur4);
}

.kortingsCodeContainer .box {
    background: var(--kleur4);
}

form .contactRow, .kortingsCodeContainer .contactRow {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.kortingsCodeContainer .contactRow {
    margin-top: 10px;
}

form .contactRow.kop {
    margin-top: 50px;
    margin-bottom: 10px;
}

form .contactRow.btnContainer {
    margin-top: 50px;
    justify-content: flex-end;
}

#restartPayment {
    margin: 50px 0 0;
}

input::placeholder {
    font: var(--navLink);
    color: var(--donkerBlauw);
}

label.checkBoxContainer {
    display: flex;
    position: relative;
    width: auto;
    margin: 5px 40px 0 0;
    height: auto;
    line-height: normal;
    padding: 0 0 0 30px;
    font: var(--text);
}

.checkBoxContainer .checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.checkmark {
    position: absolute;
    top: 7px;
    left: 0;
    height: 16px;
    width: 16px;
    border: 0;
    background-color: var(--grijs);
    transition: ease-in-out background-color .3s
}

    .checkmark:after {
        content: "";
        position: absolute;
        display: none
    }

.checkBoxContainer .checkbox:checked ~ .checkmark:after {
    display: block
}

.checkBoxContainer .checkmark:after {
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: var(--blauw)
}
/* The container must be positioned relative: */
.selectBoxContainer {
    position: relative;
    width: var(--col3px);
    color: var(--donkerBlauw);
    font: var(--navLink);
    height: var(--height-input);
    box-sizing: border-box;
}

    .selectBoxContainer select {
        display: none; /*hide original SELECT element: */
    }

.select-selected {
    background-color: var(--grijs);
}

    /* Style the arrow inside the select element: */
    .select-selected:after {
        position: absolute;
        content: "\e905";
        font-size: 16px;
        top: 0;
        right: 10px;
        width: 0;
        height: var(--height-input);
        transform: rotate(90deg);
        transform-origin: center;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        width: 20px;
    }

    /* Point the arrow upwards when the select box is open (active): */
    .select-selected.select-arrow-active:after {
        transform: rotate(-90deg);
    }

/* style the items (options), including the selected item: */
.select-items div, .select-selected {
    padding: 0 16px;
    background: var(--grijs);
    /*    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;*/
    cursor: pointer;
    height: var(--height-input);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    align-content: center;
}

/* Style items (options): */
.select-items {
    position: absolute;
    font: var(--kleineKoppen);
    height: 200px;
    overflow-x: scroll;
    overflow: hidden;
    overflow-y: scroll;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    color: var(--blauw);
}

footer .box {
    width: 100%;
    background: #FFF;
    margin: 40px 0 10px;
}

footer .nieuwsbrief {
    padding-right: var(--col1);
    box-sizing: border-box;
}

footer .routeLink, .mapsContainer .routeLink {
    letter-spacing: -0.5px;
    font: var(--kleineKoppen);
    color:#FFF;
}

    footer .routeLink span, .mapsContainer .routeLink span {
        font-size: 12px;
        margin: 0 0 0 10px;
    }

    footer .routeLink:hover {
        color: #FFF;
    }

    .mapsContainer .routeLink:hover {
        color: var(--donkerBlauw);
    }

footer .socialLink {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 30px;
}

    footer .socialLink span {
        font-size: 45px;
        margin: 0 13px 0 0;
    }

    footer .socialLink .tekst {
        font: var(--koppen);
        display: block;
        margin: 0;
    }

    footer .socialLink .volgOns {
        display: block;
        font: var(--defaultTekstSmall);
        margin: 0;
    }

footer .voorwaarden {
    margin: 120px 0 0;
    text-align: center;
}

    footer .voorwaarden .sep {
        display: inline-block;
        margin: 0 10px;
    }

.payOff {
    position: relative;
    height: 40px;
    font: 10px/40px 'ProximaNova-Regular';
    text-align: right;
    padding: 0 30px 0 0;
}

    .payOff a {
        text-decoration: none;
    }

    .payOff .sep {
        display: inline-block;
        margin: 0 10px;
    }

.introContainer {
    position: relative;
    margin: 120px 0 0;
}

    .introContainer.videoContainer .tekst {
        padding: 0 50px 0 0;
        box-sizing: border-box;
    }

.nieuwsTekstContainer {
    position: relative;
    margin: -350px 0 0;
}

    .nieuwsTekstContainer img {
        width: 100%;
        height: auto;
        margin: 50px 0;
    }

        .nieuwsTekstContainer img.nieuwsKop {
            margin: 30px 0 50px;
        }

    .nieuwsTekstContainer .socialLinkContainer {
        display: flex;
        justify-content: flex-end;
        font: var(--kleineKoppen);
        color: var(--donkerBlauw);
        align-items: center;
        line-height: 40px;
        margin: 60px 0 0;
    }

        .nieuwsTekstContainer .socialLinkContainer a {
            font-size: 35px;
            margin: 0 5px;
            text-decoration: none;
            color: var(--donkerBlauw);
        }

            .nieuwsTekstContainer .socialLinkContainer a:first-of-type {
                margin-left: 20px;
            }

            .nieuwsTekstContainer .socialLinkContainer a:hover {
                color: var(--blauw);
            }

.volgTekstContainer {
    position: relative;
    margin: 90px 0 0;
}

.itemContainer {
    position: relative;
    margin: 60px 0 0;
}

    .itemContainer .wrapper {
        justify-content: flex-start;
    }

.c2aContainer {
    position: relative;
    margin: 150px 0 0;
    padding: 110px 0 120px;
    color: #FFF;
    background: var(--donkerBlauw);
    font: var(--koppenGroot);
}

    .c2aContainer.geenMarge {
        margin: 0;
    }

    .c2aContainer .buttonContainer {
        margin: 30px 0 0;
        display: block;
        width: 100%;
    }

.productContainer {
    position: relative;
    margin: 120px 0 0;
}

    .productContainer .productLijst {
        /*        display: flex;
        flex-wrap: wrap;
        margin-left: calc(0px - var(--fotoBlok-margin));*/
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--fotoBlok-margin);
        grid-auto-rows: 1fr;
    }

        .productContainer .productLijst .product {
            position: relative;
            --aspect-ratio: 1/1;
            /*    width: calc(var(--col3) - var(--fotoBlok-margin));
            height: var(--product-height);*/
            /*            margin: 0 0 var(--fotoBlok-margin) var(--fotoBlok-margin);*/
            -webkit-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
            -moz-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
            box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
        }

            .productContainer .productLijst .product img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }

            .productContainer .productLijst .product img {
                display: block;
                width: 100%;
                transition: opacity 0.4s ease-in-out;
            }

                .productContainer .productLijst .product img.hover {
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                }

            .productContainer .productLijst .product:hover img.hover {
                opacity: 1;
            }

            .productContainer .productLijst .product.g1Bril .btn {
                position: absolute;
                bottom: 20px;
                left: 0;
                right: 0;
                margin: 0 auto;
                opacity: 0;
                transition: ease-in-out opacity 0.5s;
            }

            .productContainer .productLijst .product:hover .btn {
                opacity: 1;
            }

            .productContainer .productLijst .product.c2a {
                background: var(--donkerBlauw);
                color: #FFF;
                padding: 0 70px;
                box-sizing: border-box;
                font: var(--kleineKoppen);
                letter-spacing: -0.5px;
                display: flex;
                justify-content: center;
                flex-direction: column;
            }

.tekstFotoBlok {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 0 60px;
    background: #FFF;
    border-bottom: 5px solid #FFF;
}

    .tekstFotoBlok.eersteItem {
        margin: 120px 0 0;
    }

    .tekstFotoBlok .tekstCol {
        padding: 175px 70px 160px 90px;
        box-sizing: border-box;
        background: var(--kleur4);
    }

        .tekstFotoBlok .tekstCol .buttonContainer {
            margin-top: 40px;
        }

    .tekstFotoBlok .fotoCol {
    }

        .tekstFotoBlok .fotoCol img, .tekstFotoBlok .fotoCol iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
        }

        .tekstFotoBlok .fotoCol iframe {
            aspect-ratio: 16 / 9;
        }

    .tekstFotoBlok.rechts .tekstCol {
        order: 1;
    }

    .tekstFotoBlok.rechts .fotoCol {
        order: 0;
    }

    .tekstFotoBlok .googleMaps {
        width: 100%;
        height: 100%;
    }

.faqContainer {
    position: relative;
    margin: 120px 0 0;
}

.tabs {
    position: relative;
    margin: 25px 0 0;
}

    .tabs input {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

.tab {
    position: relative;
    width: 100%;
    margin: 0 0 5px;
}


.tab-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    cursor: pointer;
    padding: 0 15px 0 25px;
    /* Icon */
}

    .tab-label::after {
        font-weight: bold;
        font-size: 35px;
        line-height: 40px;
        content: "+";
        height: 40px;
        width: 40px;
        background: Var(--blauw);
        color: #FFF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.tab-content {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 100px 0 25px;
    transition: all 0.35s;
    overflow: hidden;
    font-style: italic;
}
/* Wanneer <details> open is, stel een grote max-height in */
details[open] .tab-content {
    max-height: 500px; /* of een waarde die ruim genoeg is */
    padding-bottom: 25px;
}

input:checked + .tab-label {
}

details[open] .tab-label::after {
    content: "-";
}

input:checked ~ .tab-content {
    height: auto;
    padding: 30px 100px 40px 25px;
}

    input:checked ~ .tab-content:before {
        content: "";
        position: absolute;
        top: 0;
        left: 25px;
        right: 15px;
        height: 1px;
        width: calc(100% - 15px - 25px);
        background: var(--grijs);
    }

.tab:before {
    box-shadow: 0 0 18px 0 var(--donkerBlauw);
    opacity: 0.2;
    mix-blend-mode: multiply;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.downloadContainer {
    position: relative;
    margin: 120px 0 0;
}

    .downloadContainer .col3 {
        padding-right: 30px;
        box-sizing: border-box;
    }

    .downloadContainer .downloadLink {
        display: flex;
        margin: 0 0 10px;
        text-decoration: none;
        color: var(--donkerBlauw);
    }

        .downloadContainer .downloadLink:hover {
            color: var(--blauw);
        }

        .downloadContainer .downloadLink span {
            font-size: 20px;
            margin: 0 13px 0 0;
        }

        .downloadContainer .downloadLink .tekst {
            font: var(--kleineKoppen);
            display: block;
            margin: 0;
        }

        .downloadContainer .downloadLink .volgOns {
            display: block;
            font: var(--defaultTekstSmall);
            margin: 0;
            color: var(--donkerGrijs);
        }

    .downloadContainer .downloadLink {
        text-decoration: none;
        margin: 0 0 20px;
    }

.linkNaarContactPagina {
    font: var(--kleineKoppen);
    text-decoration: none;
    color: var(--donkerBlauw);
}

    .linkNaarContactPagina span {
        font-size: 14px;
        display: inline-block;
        margin: 0 0 0 10px;
    }

.mapsContainer a {
    text-decoration: none;
}

.afspraakContainer {
    position: fixed;
    right: 30px;
    bottom: 30px;
    border-radius: 30px;
    padding: 55px;
    box-sizing: border-box;
    width: var(--wrapper-width);
    -webkit-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
    box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
    background: #FFF;
    z-index: 9999;
    display: none;
}

    .afspraakContainer h4 {
        margin: 0 0 30px 0;
    }

    .afspraakContainer .btnContainer {
        display: flex;
        flex-wrap: wrap;
    }

        .afspraakContainer .btnContainer h4 {
            width: 100%;
        }

        .afspraakContainer .btnContainer .btn {
            margin: 0 20px 20px 0;
        }

    .afspraakContainer .btnCloseAfspraak {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 50px;
        width: 50px;
    }

/*        .afspraakContainer .btnCloseAfspraak .sticky .hamburger-inner, .afspraakContainer .btnCloseAfspraak .sticky .hamburger-inner:after, .afspraakContainer .btnCloseAfspraak .sticky .hamburger-inner:before, .afspraakContainer .btnCloseAfspraak .is-active .hamburger-inner, .is-active .hamburger-inner:after, .is-active .hamburger-inner:before, .afspraakContainer .btnCloseAfspraak .sticky .hamburger-inner, .afspraakContainer .btnCloseAfspraak .sticky .hamburger-inner:after, .afspraakContainer .btnCloseAfspraak .sticky .hamburger-inner:before, .afspraakContainer .btnCloseAfspraak .is-active .hamburger-inner, .afspraakContainer .btnCloseAfspraak .is-active .hamburger-inner:after, .afspraakContainer .btnCloseAfspraak .is-active .hamburger-inner:before {
            background-color: rgb(164,175,184);
        }*/

.winkelwagenContainer {
    display: flex;
    flex-wrap: wrap;
    margin: 120px 0 0;
}

    .winkelwagenContainer .winkelwagen {
        position: relative;
        width: 100%;
        margin: 100px 0;
    }

        .winkelwagenContainer .winkelwagen .winkelwagenRow.kop {
            font: var(--defaultTekst);
            margin: 0 0 50px;
        }

        .winkelwagenContainer .winkelwagen .winkelwagenRow {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            margin: 0 0 50px;
        }

            .winkelwagenContainer .winkelwagen .winkelwagenRow img {
                width: 100%;
                -webkit-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
                -moz-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
                box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
            }

.productInfo {
    padding: 40px 70px;
    box-sizing: border-box;
}

.prijs {
    padding: 40px 0;
    box-sizing: border-box;
    text-align: right;
    font: var(--koppen);
}

.aantalContainer {
    padding: 40px 0;
    box-sizing: border-box;
    font: var(--koppen);
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

    .aantalContainer span {
        margin-right: 25px;
    }

.winkelwagenContainer .winkelwagen .winkelwagenTotaalRow {
    border-top: 1px solid var(--donkerGrijs);
    width: 100%;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    height: 80px;
    align-content: center;
    align-items: center;
}

.winkelwagenContainer .winkelwagen .totalRowContainer, .winkelwagenContainer .winkelwagen .col12 {
    display: flex;
    flex-wrap: wrap;
}

.winkelwagenContainer .winkelwagen .totalRowContainer {
    margin-left: auto;
}

.winkelwagenContainer .winkelwagen .winkelwagenTotaalRow .prijs {
    padding: 0;
}

.swal2-html-container .wrapper .col12 {
    display: flex;
    flex-wrap: wrap;
}

.swal2-html-container .wrapper .col6.productInfoPopupImg {
    box-sizing: border-box;
    padding-right: 40px;
}

.swal2-html-container .wrapper .col6 img {
    width: 100%;
}

.swal2-html-container .wrapper {
    width: 100% !important;
    text-align: left;
    padding: 80px 0;
    box-sizing: border-box;
}

.swal2-html-container .btnContainer {
    margin: 30px 0 0;
    width: 100%;
}

.swal2-html-container .productPopUpTitel, .swal2-html-container .productPopUpTekst {
    box-sizing: border-box;
    padding-right: 100px;
    color: var(--donkerBlauw) !important;
}

.popupContainer {
    display: none;
}

.swal2-html-container .productPopUpTitel .prijs {
    justify-content: flex-end;
    color: var(--donkerBlauw);
}

.swal2-close {
    box-shadow: none !important;
    transition: ease-in-out color 0.3s;
}

    .swal2-close:hover {
        color: var(--donkerBlauw) !important;
    }

.magazineWrapper .btn {
    margin: 0 70px 100px auto;
}

.magazineWrapper h2, .magazineWrapper h4 {
    color: var(--donkerRoze);
}

.magazineWrapper h2 {
    margin: 0 0 20px;
}

.magazineWrapper h4 {
    margin-top: 60px;
    margin-bottom: 20px;
}

.betalingMislukt .wrapper {
    flex-direction: column;
}

.youtubeEmbed {
    aspect-ratio: 1;
    width: 100%;
}

.configuratorContainer {
    display: flex;
}

    .configuratorContainer h1 {
        font: var(--koppenGroot);
        margin: 0;
    }

    .configuratorContainer .col6 {
        padding: 250px 240px 600px;
        box-sizing: border-box;
    }

        .configuratorContainer .col6.configurator {
            background: RGBA(167, 193, 162, 0.32);
            background: linear-gradient(153deg,rgba(167, 193, 162, 0.32) 0%, rgba(255, 255, 255, 0.32) 70%);
            font: var(--navLink);
        }

        .configuratorContainer .col6.fixed {
            position: sticky;
            top: 0px;
            height: 400px;
            /*z-index: 1000;*/
        }

        .configuratorContainer .col6 h2 {
            width: 100%;
            margin: 50px 0 0;
            display: flex;
        }

            .configuratorContainer .col6 h2 span {
                margin-left: auto;
                font: var(--navLink);
                letter-spacing: normal;
            }

.g1ResultaatPrijs {
    margin: 80px 0 0;
}

    .g1ResultaatPrijs .prijsRow {
        display: flex;
        font: var(--navLink);
        width: 100%;
        border-top: 1px solid var(--buttonBorderGrijs);
        height: 40px;
        align-content: center;
        align-items: center;
        color: var(--donkerBlauw);
    }

        .g1ResultaatPrijs .prijsRow .prijs {
            font: var(--navLink);
            margin-left: auto;
            padding: 0;
        }

        .g1ResultaatPrijs .prijsRow.totaal, .g1ResultaatPrijs .prijsRow.totaal .prijs {
            font: var(--koppen);
        }

        .g1ResultaatPrijs .prijsRow:first-of-type {
            border: 0;
        }

        .g1ResultaatPrijs .prijsRow.totaal {
            margin-top: 40px;
        }

.configuratie .btnContainer {
    margin: 50px 0 0;
}

.button-selector {
    display: flex;
    border-collapse: collapse;
    margin: 10px 0 0;
    width: 450px;
}

.g1Resultaat {
    position: relative;
    width: 100%; /* pas aan naar jouw gewenste breedte */
    aspect-ratio: 2/1;
}

    .g1Resultaat img {
        position: absolute;
        top: 0;
        width: 100%; /* pas aan naar jouw gewenste breedte */
        aspect-ratio: 2/1;
        object-fit: cover;
        object-position: center;
    }

#fade-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1s ease-in-out;
    opacity: 1;
}

.selector-btn {
    flex: 1;
    height: 56px;
    box-sizing: border-box;
    font: var(--navLink);
    border: 1px solid var(--buttonBorderGrijs);
    background-color: #FFF;
    color: var(--donkerBlauw);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: -1px;
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

    .selector-btn img {
        height: 16px;
        display: inline-block;
        margin: 0 0 0 10px;
    }

    .selector-btn .kleurVlak {
        border-radius: 100%;
        height: 20px;
        aspect-ratio: 1;
        border: 1px solid #FFF;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
        mix-blend-mode: multiply;
        margin: 0 0 0 15px;
    }

        .selector-btn .kleurVlak.brown {
            background: rgb(135, 80, 55);
        }

        .selector-btn .kleurVlak.green {
            background: rgb(100, 120, 70)
        }

        .selector-btn .kleurVlak.grey {
            background: rgb(50, 50, 50);
        }

    .selector-btn:first-child {
        margin-left: 0;
    }

    .selector-btn:hover {
        background-color: var(--grijsHover);
    }

    .selector-btn.selected {
        background-color: var(--buttonGrijs);
    }

.visionair {
    margin: 250px 0 0;
    padding: 200px 0;
    background: var(--kleur2);
    color: var(--kleur1);
}
    .visionair h3 {
        color: var(--kleur1);
    }
    .visionair .col4 {
        margin: 10px 0 0 var(--col5);
        font: var(--visionair);
    }

@media screen and (max-width:1500px) {
    nav ul.hoofdMenu {
        padding-top: 40px;
        width: 100%;
        margin: 0;
        padding-top: 40px;
    }

        nav ul.hoofdMenu li {
            /*min-width: var(--col3px);*/
            padding-right: 20px;
            box-sizing: border-box;
        }

    .fotoBlok.slick-current:after, .fotoBlok.groot:after {
        height: calc(var(--fotoBlok-Height-Klein) + 100px);
    }

    .productContainer .productLijst .product.c2a {
        padding: 0 20px;
    }
}

@media screen and (max-width:1400px) {
    nav img {
        height: 50px;
    }

    nav .hamburger {
        top: 25px;
        right: 30px;
    }

    header .headerContentKlein, .btnTerugNaarNieuwsOverzicht, header .headerContentButtonContainer {
        font-size: 15px;
    }

    header .headerContent {
        font: var(--streamer);
        margin: 15px 0 35px;
        padding: 15px 0;
        letter-spacing: -2px;
    }

    .btnAfspraakButton span {
        font-size: 30px;
    }

    .locatieContainer {
        margin-top: 80px;
    }

    .merkPromo {
        margin-top: 150px;
    }

        .merkPromo .tekstContainer .streamer {
            font-size: 75px;
            line-height: 75px;
        }

        .merkPromo .kleurVlak {
            left: calc(50% - var(--col4px) + 30px)
        }

    .sliderContainer {
        margin: 180px 0 0;
    }

    .fotoBlok .fotoBlokTekstContainer h3, .fotoBlok .fotoBlokTekstContainer h2 {
        line-height: 26px;
    }

    .fotoImpressieSliderContainer {
        margin-top: 150px;
    }

    .fotoImpressieSlider img {
        height: 440px;
        object-fit: cover;
        object-position: center;
    }

    .reviewContainer {
        margin: 100px 0 0;
    }

    .magazienContainer {
        margin: 170px 0 0;
    }

    footer {
        padding: 50px 0 20px;
    }

        footer .logo {
            width: 190px;
            margin: 0 0 70px;
        }

        footer .socialLink span {
            font-size: 30px;
            margin: 0 10px 0 0;
        }

    .introContainer {
        margin: 90px 0 0;
    }

    .tekstFotoBlok .tekstCol {
        padding: 40px 50px 50px 50px;
    }

    .c2aContainer {
        padding: 50px 0 60px;
    }

    .nieuwsTekstContainer {
        margin: -220px 0 0;
    }

    .btnTerugNaarNieuwsOverzicht {
        margin: 0 0 50px;
    }

    .configuratorContainer .col6 {
        padding: 250px 40px 600px;
    }
}

@media screen and (max-width:1280px) {
    header {
        height: 600px;
    }

        header .headerContentContainer {
            bottom: 150px;
            left: var(--side-padding);
        }

    nav ul.hoofdMenu {
        display: block;
        -moz-column-gap: 1.5em;
        -webkit-column-gap: 1.5em;
        column-gap: 1.5em;
        column-count: 2;
        padding: 40px var(--col1) 0;
    }

        nav ul.hoofdMenu li {
            margin-bottom: 40px;
            width: 50%;
            break-inside: avoid-column;
        }

            nav ul.hoofdMenu li ul.subMenu li {
                width: 100%;
                margin-bottom: 0;
            }

    .locatieContainer {
        margin-top: 60px;
        padding: 0 var(--side-padding);
        box-sizing: border-box;
    }

        .locatieContainer .col6px {
            width: var(--col6);
            padding-right: var(--col1);
        }

        .locatieContainer h1 {
            margin-top: 0;
        }

        .locatieContainer .locaties .locatie {
            padding: 0 4px 0 0;
        }

            .locatieContainer .locaties .locatie:last-of-type {
                padding: 0 0 0 4px;
            }

    .merkPromo {
        margin: 130px 0 0;
    }

        .merkPromo .kleurVlak {
            width: 190px;
            height: 190px;
            left: calc(50% - 190px + 30px);
        }

        .merkPromo .brilContainer img {
            position: relative;
            margin: 60px 30px 0 0;
            width: 100%;
            height: auto;
            object-fit: contain;
            object-position: top right;
        }

        .merkPromo .tekstContainer .streamer {
            font-size: 40px;
            line-height: 40px;
            letter-spacing: -1px;
        }

        .merkPromo .tekstContainer {
            margin: 40px 0 0;
        }

    .fotoBlok, .slick-slide.fotoBlok {
        width: 240px;
    }

    .reviewContainer .col12, .nieuwsContainer .col12.nieuwsBerichten, .productContainer .col12.producten {
        grid-template-columns: repeat(3, 1fr);
    }

        .reviewContainer .col12 .reviewItem:last-of-type {
            display: none;
        }

    .magazienContainer {
        padding: 0 0 40px;
    }

        .magazienContainer .col6 img {
            top: -50px;
            right: auto;
            margin-right: -70px;
            width: calc(100% + 70px);
        }

        .magazienContainer .col6.magazienTekst {
            letter-spacing: -2.7px;
            padding: 0 0 0 var(--col2);
        }

    .persoonlijkAdvies .persoonlijkAdviesTekst {
        padding: 60px var(--side-padding);
        box-sizing: border-box;
    }

    .persoonlijkAdvies img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .nieuwsContainer, .productContainer {
        margin-top: 100px;
    }

    footer .col3, footer .col2 {
        width: var(--col4);
    }

    footer .voorwaarden {
        margin: 80px 0 0;
    }

    .itemContainer .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--fotoBlok-margin-itemContainer);
    }

        .itemContainer .wrapper .fotoBlok {
            margin: 0;
            width: auto;
        }

    .tekstFotoBlok {
        padding: 0;
    }

        .tekstFotoBlok .tekstCol {
            padding: 40px var(--side-padding) 50px var(--side-padding);
        }

            .tekstFotoBlok .tekstCol.col4 {
                width: calc(var(--col6) - 35px);
            }

        .tekstFotoBlok .fotoCol.col8 {
            width: calc(var(--col6) + 35px);
        }

    .nieuwsTekstContainer {
        margin: -200px 0 0;
    }

    .downloadContainer .col3 {
        width: var(--col4);
    }

    .shoppingBasketIcon span.count {
        top: 25px;
    }

    .winkelwagen .productInfo {
        width: var(--col5);
        padding: 0 30px 0 15px;
    }

    .winkelwagen .prijs {
        width: var(--col2);
    }

    .btn.actionButton.icon-min {
        font-size: 1px !important;
    }

    .totalRowContainer.col3 {
        width: var(--col5)
    }

        .totalRowContainer.col3 .col2px {
            width: var(--col8);
        }

        .totalRowContainer.col3 .col1px {
            width: var(--col4);
        }

    .bestelFormulierContainer {
        width: 100%
    }

    form .box, form label {
        width: 100%;
    }

    .selectBoxContainer {
        width: 50%;
    }

    .fotoImpressieSliderContainer .slick-dots {
        padding: 0;
    }

    .productContainer .productLijst .product.c2a {
        padding: 0 20px;
    }

    .fotoBlok.slick-current:after, .fotoBlok.groot:after {
        height: 50%;
    }

    .slick-slide.fotoBlok .fotoBlokTekstContainer h3 span {
        margin-right: -5px;
    }

    .fotoBlok .fotoBlokTekstContainer h3, .fotoBlok .fotoBlokTekstContainer h2 {
        margin-bottom: 10px;
    }

    .fotoBlok.slick-current:after, .fotoBlok.groot:after {
        height: 50%;
    }

    .slick-slide.fotoBlok .fotoBlokTekstContainer {
        padding: 15px;
    }

    .sliderContainer .slider {
        z-index: 100;
    }

    .webshop.productContainer .col12.producten {
        grid-template-columns: repeat(3, 1fr);
    }

    .productContainer .producten .productItem .productItemTekst .productItemHeader .prijs {
        display: none;
    }

    .productContainer .producten .productItem .productItemTekst .prijs.tablet {
        display: flex;
        padding-bottom: 0;
    }

    .productContainer .producten .productItem .productItemTekst {
        padding-right: 0;
    }

    .productContainer .producten .productItem .intro {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4; /* number of lines to show */
        line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    .productContainer .producten .productItem .productItemTekst {
        padding-bottom: 0;
    }

    .swal2-html-container .wrapper .col12 {
        padding-right: 0;
    }

    .magazineWrapper .productInfoPopupImg {
        display: none;
    }

    .magazineWrapper .col8 {
        width: calc(100% - 20px);
    }

    .magazineWrapper .btn {
        margin-right: 0;
    }

    .button-selector {
        width: 100%;
    }
}

@media screen and (max-width:760px) {
    nav ul.hoofdMenu li a.hoofdMenuItem {
        width: 100%;
        display: flex;
        align-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

        nav ul.hoofdMenu li a.hoofdMenuItem:after {
            content: "\e905";
            margin-left: auto;
            margin-right: 25px;
            transform: rotate(90deg);
            font-size: 20px;
        }

    nav ul.hoofdMenu li.last {
        padding-right: 20px;
    }

    nav ul.hoofdMenu li ul.subMenu {
        display: none;
    }

        nav ul.hoofdMenu li ul.subMenu.is-active {
            display: block;
        }

    .displayMobileOnly {
        display: block !important;
    }

    nav ul.hoofdMenu {
        moz-column-gap: 0;
        -webkit-column-gap: 0;
        column-gap: 0;
        column-count: 1;
        width: 100%;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
        max-height: calc(100vh - 130px);
        overflow: auto;
    }

        nav ul.hoofdMenu li {
            width: 100%;
            margin-bottom: 20px;
        }

            nav ul.hoofdMenu li a {
                width: 100%;
            }

            nav ul.hoofdMenu li ul.subMenu li {
                margin-bottom: 0;
            }

    header.webshop {
        height: 220px;
    }

        header.webshop .headerContentContainer {
            background: none;
            height: 100%;
            bottom: 0;
        }

    nav img {
        height: 40px;
        margin-left: var(--side-padding);
    }

    nav .hamburger {
        top: 20px;
        right: 15px;
    }

    header {
        height: auto;
        background: none;
    }

        header .headerFotoMobiel {
            position: relative;
            height: 320px;
            width: 100%;
            background-size: cover;
            display: block !important;
            background-position: center;
        }

        header .headerVideo {
            height: 320px;
        }

        header:after {
            display: none;
        }

        header .headerContentContainer {
            position: relative;
            bottom: auto;
            background: var(--grijs);
            color: var(--donkerBlauw);
            width: 100%;
            left: auto;
            padding: var(--side-padding) var(--side-padding) 35px;
            box-sizing: border-box;
        }

        header .headerContent.borders {
            border-color: var(--donkerBlauw);
        }

        header .headerContent a {
            color: var(--donker-blauw)
        }

    .headerContentButtonContainer .btn.wit {
        color: #FFF;
        background: var(--blauw);
    }

        .headerContentButtonContainer .btn.wit:hover {
            background: var(--donkerBlauw);
        }

    .locatieContainer .col6px {
        width: 100%;
        margin: 0 0 85px;
    }

    .locatieContainer .locaties .col6, .locatieContainer .locaties.col6 {
        width: 100%;
        margin: 0 0 35px;
    }

    .merkPromo {
        margin: 30px 0 0;
    }

        .merkPromo .brilContainer {
            width: 100%;
        }

        .merkPromo .tekstContainer {
            width: var(--wrapper-width);
            margin: 0 auto;
        }

        .merkPromo .kleurVlak {
            width: 210px;
            height: 210px;
            right: 40px;
            left: auto;
            top: 100px;
        }

        .merkPromo .brilContainer img {
            margin: 0 90px 0 0;
        }

        .merkPromo .tekstContainer .streamer {
            width: 75%;
        }

        .locatieContainer .col6px .btn, .merkPromo .col6px .btn {
            margin-top: 15px;
        }

    .sliderContainer {
        overflow: visible;
    }

        .sliderContainer .tekstContainer {
            z-index: 100;
            height: calc(100% + 100px);
        }

            .sliderContainer .tekstContainer .col8 {
                padding: 0;
                width: 100%;
            }

                .sliderContainer .tekstContainer .col8 p {
                    display: none;
                }

                .sliderContainer .tekstContainer .col8 .buttonContainer {
                    position: absolute;
                    bottom: 0;
                }

        .sliderContainer .slider {
            position: absolute;
            bottom: -70px;
            left: auto;
            width: 100%;
            height: var(--fotoBlok-Height-Groot);
        }

    .fotoBlok, .slick-slide.fotoBlok {
        width: calc(100vw - 50px);
        height: var(--fotoBlok-Height-Groot) !important;
    }

    .mobileDotsSlider {
        position: absolute;
        bottom: 100px;
        display: block !important;
        z-index: 9999;
        padding: 0 0 50px;
        margin: 0;
    }

        .mobileDotsSlider li {
            position: relative;
            height: 30px;
        }

    .fotoImpressieSliderContainer .mobileDotsSlider li:after, .fotoImpressieSliderContainer .mobileDotsSlider li:before {
        bottom: 0;
    }

    .reviewContainer .col12, .nieuwsContainer .col12.nieuwsBerichten, .productContainer .col12.producten {
        grid-template-columns: repeat(1, 1fr);
    }

    .magazienContainer .col6 img {
        top: auto;
        margin: 0;
        width: 100%;
    }

    .magazienContainer .col6, .persoonlijkAdvies .col6 {
        width: 100%;
    }

        .magazienContainer .col6.magazienTekst {
            padding: 50px 0 0;
        }

    .persoonlijkAdvies {
        flex-wrap: wrap
    }

        .persoonlijkAdvies .col6.persoonlijkAdviesFoto {
            order: -1;
        }

    footer .nieuwsbrief, footer .col3, footer .col2 {
        margin: 40px 0 0;
        width: 100%;
    }

    footer .logo {
        margin: 0;
    }

    header .headerActie {
        height: auto;
    }

        header .headerActie .wrapper {
            padding: 20px;
        }

            header .headerActie .wrapper .col7 {
                width: calc(100% - 40px);
            }

        header .headerActie .col1 {
            width: 40px;
        }

            header .headerActie .col1 span {
                font-size: 20px;
            }

    .introContainer .col8 {
        width: 100%;
    }

    .itemContainer .wrapper {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--fotoBlok-margin-itemContainer);
    }

    .locatieContainer.bgGrijs {
        padding: 90px var(--side-padding);
    }

    .locatieContainer .col6px {
        margin: 0;
        width: 100%;
        padding: 0;
    }

    .locatieContainer .locaties.col6 {
        margin: 90px 0 35px;
    }

    .locatieContainer .locaties .locatie {
        padding: 0;
    }

    .productContainer .productLijst {
        grid-template-columns: repeat(2, 1fr);
    }

        .productContainer .productLijst .product.c2a {
            padding: 10px;
        }

    .tekstFotoBlok .fotoCol.col8 {
        width: 100%;
        order: -1;
    }

    .tekstFotoBlok .tekstCol.col4 {
        width: 100%;
        order: +1;
        padding: 40px var(--side-padding) 90px var(--side-padding);
    }

    .c2aContainer {
        font-size: 22px;
        line-height: 26px;
    }

    .sliderContainer.bgGrijs {
        padding: 90px 0 180px;
    }

        .sliderContainer.bgGrijs .tekstContainer .col8 .buttonContainer {
            bottom: -20px;
        }

    .nieuwsTekstContainer .col8 {
        width: 100%;
    }

    .nieuwsTekstContainer {
        margin: -250px 0 0;
    }

        .nieuwsTekstContainer img.nieuwsKop {
            margin-left: calc(1px - 1px - var(--side-padding));
            width: calc(100% + var(--side-padding) + var(--side-padding))
        }

        .nieuwsTekstContainer .socialLinkContainer {
            justify-content: flex-start;
        }

    .webshop.productContainer .col12.producten {
        grid-template-columns: repeat(2, 1fr);
    }

    .webshop.productContainer .producten h4 {
        font-size: 14px;
    }

    .swal2-html-container .wrapper .col6.productInfoPopupImg, .swal2-html-container .wrapper .col6.productInfoPopup {
        width: 100%;
    }

    .winkelwagenContainer .winkelwagen .winkelwagenRow.kop {
        display: none;
    }

    .winkelwagenRow {
        border-bottom: 2px solid var(--grijs);
    }

        .winkelwagenRow .col3 {
            order: 1;
            width: 100px;
        }

        .winkelwagenRow .col6 {
            order: 0;
            width: calc(100% - 100px);
            padding-left: 0;
        }

            .winkelwagenRow .col6 .intro {
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 3; /* number of lines to show */
                line-clamp: 3;
                -webkit-box-orient: vertical;
            }

        .winkelwagenRow .col2 {
            order: 3;
            width: 50%;
        }

        .winkelwagenRow .col1 {
            order: 4;
            width: 50%;
        }

    .totalRowContainer.col3, .kortingsCodeContainer.col5 {
        width: 100%;
    }

    .kortingsCodeContainer.col5 {
        margin-bottom: 40px;
    }

    label.checkBoxContainer {
        width: 100%;
    }

    .selectBoxContainer {
        width: 100%;
    }

    .afspraakContainer {
        padding: 25px;
    }

    .landingspage .col8 {
        width: 100%;
    }

    .afspraakContainer iframe {
        height: calc(100vh - 100px) !important;
    }

    .tekstFotoBlok .col6, .downloadContainer .col3 {
        width: 100%;
    }

        .tekstFotoBlok .col6.fotoCol {
            order: -1;
        }

    .downloadContainer .col3 {
        margin-bottom: 30px;
    }

    header .headerActie.lindberg {
        position: absolute;
        bottom: -90px;
    }

    .introContainer.videoContainer .col4 {
        padding: 0;
        width: 100%;
        margin: 0 0 50px 0;
    }

    .configuratorContainer {
        flex-wrap: wrap;
        height: auto;
    }

        .configuratorContainer .col6 {
            width: 100%;
            padding: 100px 25px 0;
        }

            .configuratorContainer .col6.fixed {
                position: relative;
                height: auto;
            }
}

:root {
    --wrapper-width: 1400px;
    --default-side-margin: calc((100% - var(--wrapper-width)) /2);
    --default-side-margin-viewport: calc((100vw - var(--wrapper-width)) /2);
    --height-navBar: 110px;
    --logo-height: 70px;
    --smallHeaderHeight: 660px;
    --xsHeaderHeight: 360px;
    --afspraak-button: 90px;
    --afspraak-button-position: calc(var(--header-border-padding) + 50px);
    --afspraak-button-position-right: calc(var(--header-border-padding) + 15px);
    --shopping-button-position: calc(var(--header-border-padding) + 15px);
    --button-height: 50px;
    --button-widht-nav: 165px;
    --button-padding: 15px;
    --fotoBlok-Height-Groot: 565px;
    --fotoBlok-Height-Klein: 280px;
    --fotoBlok-margin: 20px;
    --fotoBlok-margin-itemContainer: 15px;
    --default-margin: 15px;
    --default--item-margin: 20px;
    --padding-input: 15px;
    --height-input: 50px;
    --header-actie-height: 120px;
    --product-height: 340px;
    --header-border-padding: 35px;
    --fotoContainer-top-margin: 120px;
    --fotoContainer-left-margin: 125px;
}

@media screen and (max-width:1600px) {
    :root {
        --wrapper-width: 1200px;
    }
}

@media screen and (max-width:1400px) {
    :root {
        --wrapper-width: 960px;
        --height-navBar: 90px;
        --afspraak-button: 75px;
        --fotoBlok-Height-Groot: 416px;
        --fotoBlok-Height-Klein: 170px;
        --header-actie-height: 100px;
        --smallHeaderHeight: 440px;
    }
}

@media screen and (max-width:1280px) {
    :root {
        --side-padding: 30px;
        --wrapper-width: calc(100% - var(--side-padding) - var(--side-padding));
        --fotoBlok-Height-Groot: 465px;
        --default--item-margin: 15px;
        --fotoBlok-margin: 12px;
        --fotoBlok-Height-Klein: 140px;
        --smallHeaderHeight: 370px;

    }
}

@media screen and (max-width:760px) {
    :root {
        --side-padding: 20px;
        --fotoBlok-Height-Groot: 415px;
        --height-navBar: 80px;
    }
}

.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
.werkenBijHeader {
    display: flex;
    flex-wrap: wrap;
    background: var(--roze);
    padding: 230px 140px 200px;
}

    .werkenBijHeader h1 {
        font: var(--hoofdnav);
        margin: 0 0 40px;
    }

    .werkenBijHeader h4, .werkenBijPersoon h4 {
        margin: 0 0 40px;
        color: var(--donkerBlauw);
    }

    .werkenBijHeader .col6.tekst {
        padding: 0 var(--col1px) 0 0;
        box-sizing: border-box;
    }

    .werkenBijHeader .col6 img {
        width: calc(100% + 50px);
        margin: 70px 0 0 -50px;
    }

    .werkenBijHeader .btnContainer, .werkenBijPersoon .btnContainer {
        margin-top: 50px;
    }

.werkenBijPersoon {
    padding: 100px 0 120px;
}

    .werkenBijPersoon.roze {
        background: var(--roze);
    }

    .werkenBijPersoon h2 {
        font: var(--werkenbij-quote);
        margin: 0 0 40px;
    }

    .werkenBijPersoon .imageContainer {
        position: relative;
        width: calc(100% - var(--col1px));
        aspect-ratio: 0.8;
        z-index: 1;
    }

        .werkenBijPersoon .imageContainer .naam {
            position: absolute;
            top: 0;
            right: -45px;
            padding: 0 35px;
            height: 65px;
            background: var(--donkerBlauw);
            color: #FFF;
            font: var(--koppenGroot);
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: center;
        }

    .werkenBijPersoon.roze .imageContainer .naam {
        left: -45px;
        right: auto;
    }

    .werkenBijPersoon.roze .imageContainer {
        margin-left: auto;
    }

    .werkenBijPersoon .imageContainer:before {
        position: absolute;
        left: -35px;
        top: -35px;
        content: '';
        width: 100%;
        height: 100%;
        background: var(--blauw);
        z-index: -1;
    }

    .werkenBijPersoon.roze .imageContainer:before {
        left: auto;
        right: -35px;
        background: var(--felRoze);
    }

    .werkenBijPersoon .imageContainer img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

.c2aContainer.werkenBij {
    margin-top: 0;
}

    .c2aContainer.werkenBij .buttonContainer .btn {
        margin: 0 15px 15px 0;
    }

@media screen and (max-width:1280px) {
    .werkenBijHeader {
        padding: 230px 50px 200px;
    }

    .werkenBijPersoon .col6 .imageContainer {
        width: calc(calc(100% - var(--col2px)) - var(--side-padding));
        margin-left: var(--side-padding);
    }

    .werkenBijPersoon.roze .col6 .imageContainer {
        width: calc(calc(100% - var(--col2px)) - var(--side-padding));
        margin-right: var(--side-padding);
        margin-left: auto;
    }

    .werkenBijHeader .col6 img {
        width: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width:1000px) {
    .werkenBijHeader {
        padding: 80px var(--side-padding) 100px;
    }

        .werkenBijHeader .col6.tekst {
            padding: 0;
            box-sizing: border-box;
        }

        .werkenBijHeader .col6, .werkenBijPersoon .col6 {
            width: 100%;
        }

            .werkenBijHeader .col6.tekst {
                order: +1;
                margin: 40px 0 0;
            }

    .werkenBijPersoon.roze .col6.tekst {
        order: +1;
        margin: 40px 0 0;
    }

    .werkenBijPersoon .col6 .imageContainer {
        max-width: 300px;
        margin: 0 auto 40px !important;
    }
}