.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}
:root {
    --paars: #814997;
    --roze: #f70082;
    --licht-roze: #f8b7ea;
    --bg-roze: #e9cfe3;
    --bg-licht-roze: #fff2f9;
    --zwart: rgb(0,3,12);
    --antraciet: #3c3c3c;
    --grijs: #e6e6e6;
    --geel: #ffa200;
}

: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);
}
header, footer, section{
    width:100%;
    position:relative;

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

.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 {
    justify-content: flex-end;
    margin-left:auto !important;
}

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

.colAlignCenter {
    display: flex !important;
    justify-content: center !important;
}

.pullRight {
    margin-left: auto;
}

.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)
    }
}

.animate__fadeInUpSmall {
    -webkit-animation-name: fadeInUpSmall;
    animation-name: fadeInUpSmall
}
@keyframes fadeIn{
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;

    }
}

.animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}
@-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;
}
@font-face {
    font-family: 'AmsiPro-Ultra';
    src: url('fonts/AmsiPro-Ultra.woff2') format('woff2'), url('fonts/AmsiPro-Ultra.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "itc-avant-garde-gothic-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?2xsnj9');
    src: url('fonts/icomoon.eot?2xsnj9#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?2xsnj9') format('truetype'), url('fonts/icomoon.woff?2xsnj9') format('woff'), url('fonts/icomoon.svg?2xsnj9#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

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

[class^="icon-"], [class*=" icon-"] {
    /* 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-alcohol:before {
    content: "\e903";
    color: var(--roze);
}

.icon-ei:before {
    content: "\e904";
    color: #dd9339;
}

.icon-gluten:before {
    content: "\e905";
    color: #b19750;
}

.icon-lactose:before {
    content: "\e906";
    color: #82c2fc;
}

.icon-noten:before {
    content: "\e907";
    color: #785436;
}

.icon-pinda:before {
    content: "\e908";
    color: #b66b43;
}

.icon-soja:before {
    content: "\e909";
    color: #85a74b;
}

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

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

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

.icon-winkelmandje_3:before {
    content: "\e90d";
}

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

.icon-winkelmandje_5:before {
    content: "\e90f";
}

.icon-winkelmandje_6:before {
    content: "\e910";
}

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

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

.icon-tiktok:before {
    content: "\e902";
}
.icon-min:before {
    content: "\e911";
}

.icon-plus:before {
    content: "\e912";
}
.icon-remove:before {
    content: "\e913";
}
/*
    Light 300
    Regular 400
    Medium 500
SemiBold 600
Bold 700
ExtraBold 800*/
:root {
    --h1: 70px/70px 'AmsiPro-Ultra', serif;
    --webshop-header-h1: 60px/60px 'AmsiPro-Ultra', serif;
    --h1-kerst: 55px/55px 'AmsiPro-Ultra', serif;
    --button-tekst: 24px/24px 'AmsiPro-Ultra', serif;
    --button-small-tekst: 16px 'AmsiPro-Ultra', serif;
    --default-tekst: 21px/25px "itc-avant-garde-gothic-pro", serif;
    --h2: var(--h1);
    --h4: 40px/42px 'AmsiPro-Ultra', serif;
    --h3: 25px/26px 'AmsiPro-Ultra', serif;
    --webshop-h1: 27px/32px 'AmsiPro-Ultra', serif;
    --webshop-porties: 20px/24px 'itc-avant-garde-gothic-pro', serif;
    --webshop-detail-tekst: 15px/18px 'itc-avant-garde-gothic-pro', serif;
    --webshop-input-aantal: 30px/45px 'itc-avant-garde-gothic-pro', serif;
    --winkelwagen-kop: 700 15px/18px 'itc-avant-garde-gothic-pro', serif;
    --winkelwagen: 15px/18px 'itc-avant-garde-gothic-pro', serif;
    --input-font: 15px/18px 'itc-avant-garde-gothic-pro', serif;
    --afspraakRondjeCredits: 10px/10px 'itc-avant-garde-gothic-pro', serif;
}

@media screen and (max-width: 1400px) {
    :root {
        --h1: 60px/60px 'AmsiPro-Ultra', serif;
        --h1-kerst: 50px/50px 'AmsiPro-Ultra', serif;
        --button-tekst: 22px/22px 'AmsiPro-Ultra', serif;
        --default-tekst: 18px/22px "itc-avant-garde-gothic-pro", serif;
        --h2: var(--h1);
        --h4: 30px/32px 'AmsiPro-Ultra', serif;
        --h3: 22px/24px 'AmsiPro-Ultra', serif;
    }
}

@media screen and (max-width:1280px) {
    :root {
        --winkelwagen: 13px/15px 'itc-avant-garde-gothic-pro', serif;
        --webshop-header-h1: 30px/30px 'AmsiPro-Ultra', serif;
    }
}

@media screen and (max-width:760px) {
    :root {
        --h1-kerst: 25px/25px 'AmsiPro-Ultra', serif;
        --h1: 40px / 40px 'AmsiPro-Ultra', serif;
        --h2: 30px / 30px 'AmsiPro-Ultra', serif;
        --webshop-input-aantal: 20px/30px 'itc-avant-garde-gothic-pro', serif;
    }
}

fieldset{
    border:0;
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap;

}
label.error, .afrekenen .afrekenenBox.afwijkendAdres label.error, #pickuplocation-error {
    display: none !important;
}
/*.select-hidden, select {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}*/
form input.error, form textarea.error {
    background: #ffdbdb !important;
}/* 
.select-hidden, select {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}
.select {
    cursor: pointer;
    display: block;
    position: relative;
    font: var(--button-font);
    color: #FFF;
    height: 40px;
    width: 100%;
}

.select-styled {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--blauw);
    padding: 8px 15px;
    color: #FFF;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    height: 50px;
    box-sizing: border-box;
}

    .select-styled:after {
        content: "\e917";
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        right: 40px;
        height: 100%;
        display: flex;
        align-content: center;
        align-items: center;
        font-size: 12px;
    }

    .select-styled.selected {
        color: #FFF;
    }

    .select-styled:active, .select-styled.active {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

        .select-styled:active:after, .select-styled.active:after {
            transform: translate(20px, 0) rotate(180deg);
        }

.select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--blauw);
}

    .select-options li {
        margin: 0;
        font: var(--button-font);
        margin: 0 25px;
        padding: 0 10px;
        height: 40px;
        display: flex;
        align-items: center;
        line-height: 40px;
        color: #FFF;
        border-top: 0;
        -moz-transition: all 0.15s ease-in;
        -o-transition: all 0.15s ease-in;
        -webkit-transition: all 0.15s ease-in;
        transition: all 0.15s ease-in;
        border-bottom: 1px solid var(--bruin);
    }

        .select-options li:last-of-type {
            border: 0;
        }

        .select-options li:hover, .select-options li.is-selected {
            color: #FFF;
        }

        .select-options li[rel="hide"] {
            display: none;
        }*/
label.checkBoxContainer {
    display: block;
    position: relative;
    width: auto;
    margin: 0 20px 0 0 !important;
    height: auto !important;
    line-height: normal !important;
    padding: 0 0 0 25px;
    font: var(--button-tekst);
    align-content:center !important;
    align-items:center !important;
    width:fit-content !important;
}

    label.checkBoxContainer a {
        text-decoration: underline;
    }

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

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background: var(--box-background);
    box-sizing: border-box;
    background-color: none;
    transition: ease-in-out background-color .3s;
    bottom: 0;
    margin: auto;
}

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

.checkBoxContainer .checkbox:checked ~ .checkmark:after {
    display: flex;
    content: "x";
}

.checkBoxContainer .checkmark:after {
    left: 0;
    top: -3px;
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: var(--zwart);
    justify-content: center;
    align-content: center;
    align-items: center;
}
form .contactRow {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
}

.formulier label, .zoekContainer label {
    width: 100%;
    font: var(--default-text);
    color: #fff
}

.formulier label {
    color: var(--paars-licht);
    font: var(--small-tekst);
    width: 100%;
    height: var(--height-input);
    line-height: var(--height-input);
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
    margin: 3px 10px 0 0;
}

.formulier .box, .zoekVeldContainer .box, .afrekenContainer .box {
    position: relative;
    box-sizing: border-box;
    padding: 0 15px;
    display: block;
    color: var(--zwart);
    height: var(--height-input);
    line-height: var(--height-input);
    border: 0;
    flex: 1;
    border: 1px solid var(--grijs);
    border-radius: calc(var(--height-input) / 2);
    background: var(--box-background);
    margin: 0 0 20px;
    font: var(--input-font);
    width: calc(100% - 10px);
    box-sizing: border-box;
    margin: 0 0 20px 0;
}
.formulier input[type="radio"].box {
    height: 25px;
    width: 25px;
    padding: 0;
    width: auto;
    flex: none;
    margin: 0 10px 0 0;
}
.radioButtons, .radioButtons label {
    display: flex;
    align-content: center;
    align-items: center;
}
    .radioButtons label {
        margin:0 20px 0 0;
    }
        .formulier .box.firstInput {
    margin: 55px 0 20px;
}
    .zoekVeldContainer .box {
        background: #FFF;
        margin: 0 10px 0 0;
    }
    .search .box:hover {
    background:var(--blauw);
    color:var(--licht-grijs);
}
.formulier .box::placeholder, .search .box::placeholder {
    color: #CECECE;
}
.formulier .selectBoxContainer {
    width: calc(100% - var(--grid-gap));
}
.formulier textarea.box {
    height: 150px;
    width: 100%;
    font: var(--default-tekst);
    padding: 10px 15px;
    border: 0;
    outline: none;
    border: 1px solid var(--grijs);
    border-radius: calc(var(--height-input) / 2);
}
.formulier .btnContainer {
    
}
label.radio {
    width: fit-content;
    display: inline-flex;
    align-content: center;
    align-items: center;
    height: auto;
    line-height: normal;
}
.has-error {
    border: 1px solid red;
    padding: 5px;
}
@media screen and (max-width:1600px) {

    }
@media screen and (max-width:1250px) {
    .formulier label{
        line-height:normal;
    }
}
.hamburger--3dx .hamburger-box, .hamburger--3dx-r .hamburger-box, .hamburger--3dy .hamburger-box, .hamburger--3dy-r .hamburger-box {
    perspective: 80px
}

.hamburger {
    position: absolute;
    height: 30px;
    font: inherit;

    overflow: visible;
    margin: auto 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: var(--hamburger-width);
    height: 24px
}

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

    .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
        position: absolute;
        width: var(--hamburger-width);
        height: 2px;
        transition-timing-function: ease;
        transition-duration: .15s;
        transition-property: transform;
        border-radius: 0;
        background-color: var(--hamburger-color);
        transition:ease-in-out background-color 0.3s;
    }
.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)
    }

.btnBestelMobiel, .headerMobiel {
    display: none !important;
}
.animate {
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

a {
    text-decoration: none;
    color: #000;
}

body {
    margin: 0;
    padding: 0;
    font: var(--default-tekst);
}

.btn {
    position: relative;
    display: inline-flex;
    height: var(--button-height);
    align-content: center;
    align-items: center;
    font: var(--button-tekst) !important;
    line-height: var(--button-height);
    padding: 0 var(--button-padding-right) 0 var(--button-padding-left);
    text-decoration: none;
    width: fit-content;
    z-index: 1;
    color: #FFF;
    transition: ease-in-out all 0.3s;
    box-sizing: border-box;
}

    .btn.roze {
        border: 2px solid var(--roze);
        background: var(--roze);
        color: #FFF;
        border-radius: 10px;
        text-transform: uppercase;
    }

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

        .btn.roze.transparent {
            background: none;
            border: 2px solid var(--roze);
            color: var(--roze);
            border-radius: 10px;
            text-transform: uppercase;
        }

            .btn.roze.transparent:hover {
                border: 2px solid var(--roze);
                background: var(--roze);
                color: #FFF;
                border-radius: 10px;
                text-transform: uppercase;
            }

    .btn.grijs.transparent {
        background: none;
        border: 2px solid var(--grijs);
        color: var(--grijs);
        border-radius: 10px;
        text-transform: uppercase;
    }

        .btn.grijs.transparent:hover {
            border: 2px solid var(--grijs);
            background: var(--grijs);
            color: #FFF;
            border-radius: 10px;
            text-transform: uppercase;
        }

    .btn.geel {
        border: 2px solid var(--geel);
        background: var(--geel);
        border-radius: 10px;
        text-transform: uppercase;
        text-align: center;
        height: auto;
        padding-top: 10px;
        padding-bottom: 14px;
    }

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

    .btn.wit {
        border: 0;
        background: #FFF;
        border-radius: 10px;
        text-transform: uppercase;
        text-align: center;
        height: auto;
        padding-top: 10px;
        padding-bottom: 14px;
        color: var(--paars);
    }

        .btn.wit:hover {
            color: #FFF;
            background: var(--paars);
        }
    .btn.small {
        height: var(--button-small-height);
        font: var(--button-small-tekst) !important;
        line-height: var(--button-small-height) !important;
    }
h1 {
    margin: 20px 0 60px;
    font: var(--h1);
    color: var(--paars);
    text-transform: uppercase;
}

h2 {
    font: var(--h2);
}

h3 {
    font: var(--h3);
    margin: 0 0 20px;
    text-transform: uppercase;
}

h4 {
    font: var(--h4);
    margin: 0;
}

header, footer, section {
    position: relative;
}

header {
    width: 100%;
    height: var(--header-height);
    background-image: url('/img/bg_header.jpg');
    background-size: cover;
    overflow: hidden;
}
    header.kerst {
        background: #15274c
    }
        header.kerst .headerTekst {
            position: absolute;
            top: 60px;
            left: 100px;
            font: var(--h1-kerst);
            color: #FFF;
            -webkit-text-stroke-width: 10px;
            -webkit-text-stroke-color: #C3007A;
            text-transform:uppercase;
        }
        header.kerst .headerTekst.noOutline {
            -webkit-text-stroke-width: 0;
        }
        header .wrapper {
            height: var(--header-height);
        }
        header.kerst .btn{
            border:2px solid #FFF !important;
        }
    header.kerst .wrapper{
        align-items:flex-end;
    }
    header.kerst .taartenGroot {
        width: calc(100% - 350px);
        aspect-ratio: 2.665 / 1;
        object-fit: cover;
        margin-bottom:50px
    }
    header.kerst .taartenKlein {
        position: absolute;
        bottom: -250px;
        left:0;
        height:90px;
        width:100%;
    }
    header.kerst .btnOpeningstijden {
        bottom: -130px;
        width: 100%;
        text-align:center;
        justify-content:center;
    }
    header .logo, footer .logo {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        padding: 50px 30px 30px;
        background: #FFF;
        border-end-start-radius: 10px;
        border-end-end-radius: 10px;
        display: block;
    }

        header .logo img {
            height: var(--logo-height);
            width: var(--logo-width);
            display: block;
        }

    header .hart {
        width: 500px;
        position: absolute;
        bottom: -20px;
        z-index: 80;
    }

    header .tekst {
        position: absolute;
        width: 400px;
        left: var(--col1);
        bottom: 150px;
        z-index: 800;
    }

    header .kids {
        position: absolute;
        bottom: 0;
        left: var(--col1);
        right: 0;
        margin: 0 auto;
        z-index: 100;
        height: 100%;
        width: calc(100% - var(--col5));
        object-fit: contain;
        object-position: center bottom;
    }
    header .btnOpeningstijden{
        position:absolute;
        right:0;
        bottom:-150px;
        z-index:999;
    }
.intro {
    padding: 60px 0 0;
    background: #fbfbfa;
}

    .intro .captainCool img {
        display: block;
        width: calc(100% - 30px);
    }

    .intro .tekst {
        max-height: 23em; /* ca. 6 regels */
        overflow: hidden;
        position: relative;
        transition: max-height 0.5s ease;
    }

        .intro .tekst.expanded {
            max-height: 200em; /* genoeg om alles te tonen */
        }

    .intro .lees-meer-knop {
        display: inline-block;
        color: var(--roze);
        background: none;
        border: none;
        font: var(--default-tekst);
        cursor: pointer;
        padding: 0;
    }

    .intro .lees-meer-container {
        position: relative;
    }

    .intro .lees-meer-fade {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4em;
        width: 100%;
        pointer-events: none;
    }

    .intro .tekst.expanded + .lees-meer-fade {
        display: none;
    }

.filialen {
    background: #fbfbfa;
    padding: 100px 0 80px;
}

    .filialen h2, .ijskar h2 {
        width: 100%;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        color: #FFF;
        text-transform: uppercase;
        height: 120px;
        background: var(--roze);
        border-radius: 10px;
        margin: 0;
    }

.ijskar h2 {
    background: var(--paars);
}

.filialen .wrapper, .allergenenIntro .wrapper, .ijskar .wrapper, .contact .wrapper, footer .wrapper {
    padding: 0 80px;
    box-sizing: border-box;
}

    .filialen .wrapper .col5, .ijskar .wrapper .col5 {
        position: relative;
    }

    .filialen .wrapper .lblTitel, .ijskar .wrapper .lblTitel {
        position: relative;
        top: 0;
        left: 80px;
        border-end-start-radius: 10px;
        border-end-end-radius: 10px;
        border: 5px solid var(--roze);
        padding: 40px 20px;
        width: 120px;
        display: block;
        border-top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
    }

    .ijskar .wrapper .lblTitel {
        border-color: var(--paars);
    }

    .filialen .wrapper .col7, .ijskar .wrapper .col7 {
        padding: 40px 80px 80px 0;
        box-sizing: border-box;
    }

.filialen .filiaal {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 45px 0 0;
    border: 2px solid var(--grijs);
    border-radius: 10px;
}

    .filialen .filiaal img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .filialen .filiaal .tekst {
        padding: 40px;
        box-sizing: border-box;
        position: relative;
        line-height: 30px;
    }

        .filialen .filiaal .tekst.openingstijden {
            padding-left: 0;
        }

        .filialen .filiaal .tekst h4 {
            width: 100%;
            margin: 0 0 30px;
            text-transform: uppercase;
        }

        .filialen .filiaal .tekst .btn {
            position: absolute;
            bottom: 40px;
            left: 40px;
        }

        .filialen .filiaal .tekst .openingstijdenRow {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

            .filialen .filiaal .tekst .openingstijdenRow .dag {
                width: 150px;
            }

            .filialen .filiaal .tekst .openingstijdenRow .tijden {
                width: calc(100% - 150px);
            }

.allergenenIntro {
    margin: 90px 0 0;
}

    .allergenenIntro .container {
        position: relative;
        padding: 60px 80px 100px;
        background: linear-gradient(178deg,rgba(129, 73, 151, 1) 0%, rgba(213, 0, 127, 1) 80%, rgba(213, 0, 127, 1) 100%);
        border-radius: 10px;
        color: #FFF;
        display: flex;
        flex-wrap: wrap;
    }

        .allergenenIntro .container h2 {
            width: 100%;
            text-align: center;
            text-transform: uppercase;
            margin: 0 0 90px;
        }

        .allergenenIntro .container .lblTitel {
            border-radius: 10px;
            aspect-ratio: 1;
            width: 100%;
            background: #FFF;
            border: 5px solid var(--geel);
            padding: 40px 20px;
            box-sizing: border-box;
        }

        .allergenenIntro .container .btn {
            margin: 20px 0 0;
        }

        .allergenenIntro .container .col4px {
            padding: 0 0 0 60px;
            box-sizing: border-box;
        }

        .allergenenIntro .container .meisje {
            position: absolute;
            bottom: 0;
            right: 20px;
        }

.ijsjesBorder {
    margin: 100px 0 0;
    height: 100px;
    width: 100%;
    background: url('/img/ijs-border.svg');
    background-repeat: repeat-x;
    background-size: auto 60px; /* 100px afbeelding + 50px ruimte */
}

.ijskar {
    margin: 90px 0 0;
    color: var(--paars);
}

    .ijskar .wrapper .col7 {
        padding: 40px 0 80px 80px;
    }

    .ijskar .wrapper .lblTitel {
        border-color: var(--paars);
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .ijskar .wrapper .col3 {
        position: relative;
    }

    .ijskar .wrapper .btn {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

.kadopas {
    padding: 90px 0 130px;
    background: var(--licht-roze);
    margin: 100px 0 0;
}

    .kadopas h2 {
        width: 100%;
        text-align: center;
        justify-content: center;
        color: var(--roze);
        text-transform: uppercase;
    }

    .kadopas .container {
        width: calc(100% - 80px);
        display: flex;
        flex-wrap: wrap;
        border-radius: 10px;
        background: var(--roze);
    }

        .kadopas .container .foto img {
            width: 100%;
            border-radius: 10px;
            display: block;
        }

        .kadopas .container .tekst {
            position: relative;
            padding: 100px 20px 150px 80px;
            box-sizing: border-box;
            color: #FFF;
        }

            .kadopas .container .tekst:after {
                content: '';
                display: block;
                background: url('/img/border-hart.svg') no-repeat;
                background-size: 240px auto;
                height: 240px;
                width: 240px;
                position: absolute;
                bottom: 30px;
                right: 30px;
            }

            .kadopas .container .tekst .btn {
                position: absolute;
                bottom: 100px;
            }

.contact h2 {
    color: var(--paars);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

.contact form, .verzonden, .contact .col3px {
    border: 2px solid var(--grijs);
    border-radius: 10px;
    padding: 60px 40px 40px 60px;
    box-sizing: border-box;
}

.contact .col3px {
    padding: 60px 40px 40px 40px;
    margin-left: auto;
}

    .contact .col3px a {
        text-decoration: none;
        color: #000;
    }

.verzonden {
    display: none;
}

.contact h4 {
    margin: 0 0 30px;
    text-transform: uppercase;
    color: var(--roze);
}

#map {
    height: 520px;
    margin: 75px 0 0;
    border-radius: 10px;
}

footer {
    margin: 75px 0 0;
    background: Var(--zwart);
    color: #FFF;
    padding: 75px 0 100px;
}

    footer h3 {
        margin: 0 0 40px;
    }

    footer a {
        color: #FFF;
        text-decoration: none;
        display: block;
        margin: 0 0 20px;
        transition: ease-out all 0.5s;
    }

        footer a:hover, .contact .col3px a:hover {
            opacity: 0.8;
        }

    footer .logo {
        top: -75px;
    }

    footer .socialIcons {
        display: flex;
        font-size: 40px;
        margin: 40px 0 0;
    }

        footer .socialIcons a {
            margin: 0 15px 0 0;
        }

@media screen and (max-width:1400px) {
    header .hart {
        width: 400px;
    }
    header.kerst .taartenGroot {
        width: calc(100% - 250px);
    }
    header.kerst .headerTekst {
        top: 60px;
        left: 50px;
    }
    header .tekst {
        width: 300px;
    }

    header .kids {
        left: var(--col1);
        width: calc(100% - var(--col5));
    }
    header .btnOpeningstijden {
        position: absolute;
        right: 0;
        bottom: -150px;
        z-index: 999;
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 0;
        font: 16px / 16px 'AmsiPro-Ultra', serif !important;
        height: 35px !important;
    }
    .filialen .filiaal .tekst .openingstijdenRow .dag {
        width: 120px;
    }

    .filialen .filiaal .tekst .openingstijdenRow .tijden {
        width: calc(100% - 120px);
    }

    .filialen .filiaal .tekst.openingstijden {
        padding-left: 0;
        padding-right: 10px;
    }

    .allergenenIntro .container {
        padding: 30px 40px 100px;
    }

        .allergenenIntro .container .meisje {
            width: 300px;
        }

    .kadopas .container .tekst:after {
        background-size: 140px auto;
        height: 140px;
        width: 140px;
        bottom: 20px;
        right: 20px;
    }

    .kadopas .container .tekst {
        position: relative;
        padding: 100px 60px 150px 40px;
    }

    .filialen .wrapper, .allergenenIntro .wrapper, .ijskar .wrapper, .contact .wrapper, footer .wrapper {
        padding: 0;
    }

    .allergenenIntro .container .col4px {
        width: var(--col6px);
    }
}

@media screen and (max-width:1200px) {
    .kadopas .container .foto img {
        width: 100%;
        border-radius: 10px;
        display: block;
        object-fit: cover;
        height: 100%;
    }

    header .kids {
        right: 0;
        width: calc(100% - var(--col5));
        left: unset;
    }

    .contact .col3px {
        width: 300px;
    }

    .contact form, .verzonden {
        width: calc(100% - 300px - 30px)
    }

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

        .filiaal .col4 img {
            height: auto;
        }

    .filialen .filiaal .tekst {
        padding: 20px;
        width: var(--col4);
    }

        .filialen .filiaal .tekst.openingstijden {
            width: var(--col5);
        }

    .allergenenIntro .container .col4px {
        order: 1;
        width: 100%;
        padding: 0 60px;
    }

    .allergenenIntro .container .col3 {
        order: 2;
        padding: 60px 60px 0;
    }

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

    .kadopas .container {
        width: 100%;
    }

        .kadopas .container .tekst {
            padding-top: 40px;
            padding-right: 40px;
        }

            .kadopas .container .tekst .btnContainer {
                margin: 20px 0 0;
            }

            .kadopas .container .tekst:after {
                background-size: 120px auto;
                height: 120px;
                width: 120px;
                bottom: 10px;
                right: 10px;
            }

    .contact form, .verzonden, .contact .col3px {
        border: 2px solid var(--grijs);
        border-radius: 10px;
        padding: 20px 20px 20px 20px;
    }

    footer .col3 {
        width: 100%;
        margin: 0 0 50px;
    }

    .filialen .filiaal .tekst .btn {
        left: 20px;
    }
}

@media screen and (max-width:760px) {
    header {
        background-size: 100% 340px;
        background-repeat: no-repeat;
        background-image: url('/img/bg_header_mobiel.png');
    }
    .btnBestelMobiel{
        justify-content:center;
        text-align:center;
        margin-top:150px;
    }
    .btnBestelMobiel, .headerMobiel {
        display: flex !important;
        width:100% !important;
    }
        .headerMobiel{
            max-height:300px;
            object-fit:contain;
        }
        .btnOpeningstijden, header.kerst .taartenKlein, header.kerst .taartenGroot {
            display: none !important
        }
    header.kerst .headerTekst {
        top: 30px;
        left: 0;
        -webkit-text-stroke-width: 5px;
        width:var(--col6)
    }
        header .logo, footer .logo {
            padding: 20px 5px 15px;
        }

        header .kids {
            right: 0;
            width: calc(100% + 40px);
            left: -20px;
            top: 0;
            height: 340px;
        }

        header .tekst, header .hart {
            width: 180px;
            left: 0;
            right: 0;
            margin: 0 auto;
            bottom: 80px;
        }

        header .hart {
            width: 200px;
            bottom: 20px;
        }

    .intro .col5 {
        width: 100%;
    }

    .intro .col7 {
        width: 100%;
        order: -1;
        margin: 0 0 30px;
    }

    .filialen h2, .ijskar h2 {
        height: 80px;
    }

    .filialen .wrapper .col5, .ijskar .wrapper .col5, .filialen .wrapper .col7, .ijskar .wrapper .col7 {
        width: 100%;
    }

    .filialen .wrapper .col7, .ijskar .wrapper .col7 {
        padding: 40px 0 0;
    }

    .filiaal .col4, .filialen .filiaal .tekst, .ijskar .wrapper .col3 {
        width: 100%;
    }

        .filialen .filiaal .tekst, .filialen .filiaal .tekst.openingstijden {
            padding: 20px;
            width: 100%;
        }

            .filialen .filiaal .tekst .btn {
                position: relative;
                left: 0;
                margin: 30px 0 0;
                top: unset;
                bottom: unset;
            }

    .allergenenIntro .wrapper {
        padding: 0;
        width: 100%;
    }

    .allergenenIntro .container {
        width: 100%;
        box-sizing: border-box;
        border-radius: 0;
    }

        .allergenenIntro .container .col4px {
            order: 1;
            width: 100%;
            padding: 0;
        }

    .allergenenIntro .container {
        padding-bottom: 0;
    }

        .allergenenIntro .container .meisje {
            position: relative;
            order: 3;
            right: 0;
        }

        .allergenenIntro .container .col3 {
            width: 100%;
            margin: 0 0 60px;
        }

    .ijskar {
        margin: 40px 0 0;
    }

        .ijskar .wrapper .col3 {
            text-align: center;
        }

        .ijskar .wrapper .btn {
            position: relative;
            bottom: unset;
            margin: 30px 0 0;
        }

    .kadopas .col6, .contact form, .verzonden, .contact .col3px {
        width: 100%;
    }

    .contact {
        margin: 40px 0 0;
    }

        .contact form, .verzonden, .contact .col3px {
            margin: 0 0 20px 0;
        }

    }

.webshopHeader {
    background: var(--roze);
    color: #FFF;
    height: var(--webshopHeader-height);
}

header.webshopHeader.paars .wrapper {
    height: 100%;
    background: none;
}

.webshopHeader.paars {
    height: 550px;
    background: var(--paars);
    overflow: visible;
}

header.webshopHeader .wrapper {
    height: var(--webshopHeader-height);
    background-image: url('/img/hart_wit_transparant.svg');
    background-repeat: no-repeat;
    background-position: left bottom -40px;
}

.webshopHeader.paars .hartWit {
    width: 200px;
}

.webshopHeader .headerTitel {
    height: 100%;
    width: 100%;
    font: var(--h1);
    text-transform: uppercase;
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
    padding: 0 0 75px;
    box-sizing: border-box;
}

.webshopHeader.paars .headerTitel {
    width: var(--col6);
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font: var(--webshop-header-h1);
}

.webshopHeader .headerTitel span {
    font: var(--webshop-porties);
    display: block;
    width: 100%;
    margin-top: 50px;
    text-transform: none;
}

.webshopHeader.paars img.ijstaart {
    position: absolute;
    right: -20px;
    bottom: -80px;
    width: 300px;
    z-index: 9999;
}

.kruimelpad {
    height: 100px;
    display: flex;
    align-content: center;
    align-items: center;
}

    .kruimelpad ul {
        padding: 0;
        margin: 0;
        display: flex;
    }

        .kruimelpad ul li {
            padding: 0 0;
            margin: 0 20px;
            color: var(--grijs);
        }

            .kruimelpad ul li:first-child {
                list-style-type: none;
                margin: 0 20px 0 0;
            }

    .kruimelpad a {
        color: var(--grijs);
    }

    .kruimelpad ul li:last-child, .kruimelpad ul li:last-child a {
        color: var(--roze);
    }

.attentieBalk .wrapper {
    background: #000;
    border-radius: 15px;
    color: #FFF;
    padding: 10px 50px;
    justify-content: center;
    text-align: center;
    color: Var(--licht-roze);
    box-sizing: border-box;
}

    .attentieBalk .wrapper h3 {
        margin: 0 0 10px;
    }

    .attentieBalk .wrapper span {
        color: #FFF;
    }

.productGridContainer {
    margin: 50px 0 0;
}

    .productGridContainer .productGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 80px;
    }

        .productGridContainer .productGrid .product {
            display: block;
        }


                .productGridContainer .productGrid .product .foto {
                position: relative;
                background: var(--licht-roze);
                aspect-ratio: 1;
                padding: 20px;
            }
            .productGridContainer .productGrid .product .allergieen {
                min-height:50px;
                width:100%;
            }
                .productGridContainer .productGrid .product .foto img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: contain;
                    object-position: center;
                }

                .productGridContainer .productGrid .product .foto .icon-alcohol {
                    position: absolute;
                    bottom: 20px;
                    right: 20px;
                    font-size: 55px;
                }

            .productGridContainer .productGrid .product .allergieen span {
                font-size: 35px;
                display: inline-block;
                margin: 10px 5px 0 0;
            }

            .productGridContainer .productGrid .product h3 {
                margin: 25px 0 15px;
                line-height: 1.2em;
                height: calc(1.2em * 2);
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .productGridContainer .productGrid .product p {
                margin: 0 0 10px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .productGridContainer .productGrid .product .productFooter {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
            }

                .productGridContainer .productGrid .product .productFooter .prijs {
                    padding-top: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    font: var(--h3);
                }

                    .productGridContainer .productGrid .product .productFooter .prijs a {
                        color: var(--roze);
                        text-transform: uppercase;
                        display: block;
                        width: 100%;
                        margin: auto 0 0;
                    }

                .productGridContainer .productGrid .product .productFooter .btnAddToShoppingCart, .productDetail.wrapper .col8 .addToShoppingBasketContainer .btnAddToShoppingCart {
                    height: 80px;
                    width: 80px;
                    border: 2px solid var(--roze);
                    color: var(--roze);
                    font-size: 60px;
                    border-radius: 10px;
                    margin-left: auto;
                    display: flex;
                    align-content: center;
                    align-items: center;
                    justify-content: center;
                }

.productDetail.wrapper {
    background: var(--bg-roze);
    padding: 60px 70px;
    box-sizing: border-box;
    border-radius: 15px;
}

    .productDetail.wrapper h1 {
        font: var(--webshop-h1);
        color: #000;
        margin: 0 0 20px;
    }

    .productDetail.wrapper .col4 img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: contain;
        object-position: center;
    }

    .productDetail.wrapper .col8 {
        padding: 0 0 0 var(--col1);
        box-sizing: border-box;
    }

        .productDetail.wrapper .col8 .grootte {
            font: var(--webshop-porties);
        }

        .productDetail.wrapper .col8 .serveerTip {
            margin: 20px 0 0;
            font: var(--webshop-detail-tekst);
        }

        .productDetail.wrapper .col8 .meerInfoContainer {
            margin: 20px 0 0;
            font: var(--webshop-detail-tekst);
        }

            .productDetail.wrapper .col8 .meerInfoContainer .leesmeer {
                color: var(--roze);
                cursor: pointer;
            }

            .productDetail.wrapper .col8 .meerInfoContainer .meerInfo {
                display: none;
            }

#toggleInfo:checked ~ .meerInfo {
    display: block;
}

#toggleInfo:checked ~ .leesmeer {
    display: none;
}

.productDetail.wrapper .col8 .prijs {
    margin: 40px 0 0;
    font: var(--h3);
}

.productDetail.wrapper .col8 .addToShoppingBasketContainer {
    margin: 50px 0 0;
    display: flex;
    flex-wrap: wrap;
}

    .productDetail.wrapper .col8 .addToShoppingBasketContainer .aantalContainer, .winkelwagen .winkelWagenRow .aantal {
        display: flex;
        align-content: center;
        align-items: center;
    }

        .productDetail.wrapper .col8 .addToShoppingBasketContainer .aantalContainer a, .winkelwagen .winkelWagenRow .aantal a {
            color: var(--roze);
            font-size: 40px;
        }

        .productDetail.wrapper .col8 .addToShoppingBasketContainer .aantalContainer .box, .winkelwagen .winkelWagenRow .aantal .box {
            height: 45px;
            border: 1px solid var(--grijs);
            color: var(--grijs);
            border-radius: 15px;
            font: var(--webshop-input-aantal);
            width: 130px;
            text-align: center;
            margin: 0 15px;
        }

    .productDetail.wrapper .col8 .addToShoppingBasketContainer .btnAddToShoppingCart {
        background: var(--roze);
        color: #FFF;
        margin-left: 40px;
        font-size: 25px;
        height: 45px;
        width: 45px;
    }

.productDetailContainer .buttonContainer {
    margin-top: 50px;
}

.winkelwagen {
    padding: 20px 0 0;
}

    .winkelwagen .winkelWagenRow {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        font: var(--winkelwagen);
        margin: 15px 0;
    }

        .winkelwagen .winkelWagenRow .kop {
            font: var(--winkelwagen-kop);
            margin: 0 0 15px;
        }

        .winkelwagen .winkelWagenRow .product {
            display: flex;
            align-content: center;
            align-items: center;
            width: var(--col5);
        }

            .winkelwagen .winkelWagenRow .product img {
                width: 100px;
                aspect-ratio: 1;
                background: var(--bg-roze);
                padding: 10px;
                box-sizing: border-box;
                margin: 0 20px 0 0;
            }

        .winkelwagen .winkelWagenRow .aantal {
            width: var(--col3);
        }

            .winkelwagen .winkelWagenRow .aantal .aantalContainerInput {
                width: 50px;
            }

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

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


        .winkelwagen .winkelWagenRow .aantal a {
            font-size: 20px;
        }

        .winkelwagen .winkelWagenRow .aantal .box {
            width: 50px;
            font-size: 20px;
            height: 25px;
            margin: 0 7px;
        }

    .winkelwagen .btn {
        margin: 200px 0 0;
    }

.winkelwagenTotalen, .afrekenenTotalen {
    font: var(--winkelwagen);
    background: var(--grijs);
    border-radius: 8px;
    padding: 20px 70px 20px 30px;
    box-sizing: border-box;
    margin: 0 0 0 30px;
    width: calc(var(--col4) - 30px);
}

.afrekenContainer .wrapper {
    align-content: flex-start;
    align-items: flex-start;
}

.afrekenenTotalen {
    position: sticky;
    top: 30px;
    background: var(--bg-licht-roze);
    padding-right: 30px
}

    .winkelwagenTotalen h3, .afrekenenTotalen h3 {
        margin: 0 0 50px;
    }

    .winkelwagenTotalen .winkelwagenTotaalRow, .afrekenenTotalen .afrekenenTotaalRow {
        display: flex;
        align-content: center;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
        margin: 15px 0;
    }

        .winkelwagenTotalen .winkelwagenTotaalRow.totaal, .afrekenenTotalen .afrekenenTotaalRow.totaal, .afrekenenTotalen .afrekenenTotaalRow.kortingscode {
            margin: 40px 0 0;
            padding: 40px 0 0;
            border-top: 1px solid #b1b1b1;
            font-weight: bold;
        }

        .afrekenenTotalen .afrekenenTotaalRow.kortingscode {
            font-weight: 400;
        }

        .winkelwagenTotalen .winkelwagenTotaalRow .label, .afrekenenTotalen .afrekenenTotaalRow .label {
            width: calc(100% - 100px);
        }

        .winkelwagenTotalen .winkelwagenTotaalRow .prijs, .afrekenenTotalen .afrekenenTotaalRow .prijs {
            width: 100px;
            text-align: right;
            padding: 0 15px 0 0;
            box-sizing: border-box;
        }

        .winkelwagenTotalen .winkelwagenTotaalRow.buttonContainer, .afrekenenTotalen .afrekenenTotaalRow.buttonContainer {
            width: 100%;
            justify-content: flex-end;
            margin: 60px 0 0;
            font-style: italic;
            font-size: 12px;
        }

            .winkelwagenTotalen .winkelwagenTotaalRow.buttonContainer, .afrekenenTotalen .afrekenenTotaalRow.buttonContainer .btn {
                margin: 30px 0;
            }

.afrekenen {
    display: flex;
    flex-wrap: wrap;
}

    .afrekenen .afrekenenBox {
        padding: 40px;
        box-sizing: border-box;
        border-radius: 15px;
        border: 1px solid #b1b1b1;
        width: 100%;
        font: var(--winkelwagen);
        margin: 0 0 40px;
    }

        .afrekenen .afrekenenBox.error {
            background: #ffdbdb !important;
        }

        .afrekenen .afrekenenBox.afwijkendAdres {
            border: 0;
            padding: 40px 0;
            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            font: var(--winkelwagen);
            flex-wrap: wrap;
        }

.afhaalOptie {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    font: var(--winkelwagen);
    display: flex;
    flex-wrap: wrap;
}

.afhaalGroep strong {
    display: block;
    width: 100%;
}

.afhaalGroep {
    margin: 0 0 30px;
}

    .afhaalGroep input {
        margin: 7px 0 0;
        appearance: none; /* verwijdert standaard browserstijl */
        width: 15px;
        height: 15px;
        border: 1px solid var(--antraciet);
        border-radius: 50%; /* rond maken */
        display: inline-block;
        position: relative;
        cursor: pointer;
        margin-right: 6px;
        vertical-align: middle;
        transition: all 0.2s ease;
    }

        .afhaalGroep input[type="radio"]:checked {
            border-color: var(--roze);
            background-color: var(--roze);
            box-shadow: inset 0 0 0 2px #fff; /* witte stip binnenin */
        }

.afrekenen .afrekenenBox.afwijkendAdres label, .afhaalOptie label {
    padding: 0 0 0 50px !important;
    display: inline-block !important;
    height: auto !important;
    width: fit-content !important;
    line-height: normal !important;
}

.afrekenen .afrekenenBox.afwijkendAdres label {
    padding: 0 0 40px 50px !important;
}

.afhaalOptie label {
    padding: 0 0 0 20px !important;
    margin: 5px !important;
}

    .afrekenen .afrekenenBox.afwijkendAdres label span, .afhaalOptie label span, .afhaalGroep span {
        color: var(--roze);
    }

.bezorgAdres {
    display: none;
}

#afwijkendBezorgAdres:checked ~ .bezorgAdres {
    display: block;
}

.kortingsCodeContainer {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0 0;
}

    .kortingsCodeContainer .box {
        background: #f9f9f8;
        border-end-end-radius: 0;
        border-start-end-radius: 0;
    }

    .kortingsCodeContainer .btn {
        padding: 0 15px;
        height: var(--height-input) !important;
        background: #666666;
        border-radius: calc(var(--height-input) / 2);
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        text-transform: uppercase;
    }

.shoppingBasketIcon {
    position: fixed;
    z-index: 999;
    bottom: var(--afspraak-button-position);
    right: var(--afspraak-button-position);
    width: var(--afspraak-button);
    height: var(--afspraak-button);
    background: #FFF;
    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(--paars);
    color: #FFF;
    bottom: 50vh;
    right: var(--shopping-button-position);
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .shoppingBasketIcon span.mandIcon {
        font-size: 40px;
        margin-left: -10px;
        margin-bottom: 10px;
    }

        .shoppingBasketIcon span.mandIcon.icon-winkelmandje_6 {
            font-size: 30px;
        }

    .shoppingBasketIcon span.count {
        position: absolute;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        bottom: 30px;
        right: 10px;
        width: 20px;
        aspect-ratio: 1;
        border-radius: 50%;
        text-align: center;
        background: #FFF;
        color: var(--paars);
        border: 2px solid var(--paars)
    }

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


    .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);
    }
}

.ijsjesBorder.small {
    width: var(--col4);
    margin-left: auto;
    margin-right: auto;
}

.fotoContainer img {
    width: 100%;
    border-radius: 15px;
}

@media screen and (max-width:1400px) {
    .productGridContainer .productGrid .product .productFooter .btnAddToShoppingCart, .productDetail.wrapper .col8 .addToShoppingBasketContainer .btnAddToShoppingCart {
        height: 50px;
        width: 50px;
        font-size: 30px;
    }

    .winkelwagen .winkelWagenRow .product img {
        width: 70px;
    }

    .winkelwagen .winkelWagenRow .product {
        width: calc(100% - 350px);
    }

    .winkelwagen .winkelWagenRow .aantal {
        width: 150px;
    }

    .winkelwagen .winkelWagenRow .prijs {
        width: 100px;
    }

    .winkelwagen .winkelWagenRow .subtotaal {
        width: 100px;
    }

    .winkelwagenTotalen, .afrekenenTotalen {
        padding: 20px 30px 20px 30px;
    }

        .afrekenenTotalen .afrekenenTotaalRow .prijs {
            display: none;
        }

        .afrekenenTotalen .afrekenenTotaalRow .label {
            width: 100%;
        }

        .afrekenenTotalen .afrekenenTotaalRow.verzendKosten .prijs,
        .afrekenenTotalen .afrekenenTotaalRow.subtotaal .prijs,
        .afrekenenTotalen .afrekenenTotaalRow.totaal .prijs {
            display:block;
        }
        .afrekenenTotalen .afrekenenTotaalRow.verzendKosten .label,
        .afrekenenTotalen .afrekenenTotaalRow.subtotaal .label,
        .afrekenenTotalen .afrekenenTotaalRow.totaal .label {
            width: calc(100% - 100px);
        }
}
@media screen and (max-width:1200px) {
    .webshopHeader .headerTitel {
        font: var(--webshop-h1);
    }
    .productGridContainer .productGrid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 40px;
    }
    .productDetail.wrapper {
        background: var(--bg-roze);
        padding: 30px 40px;
        box-sizing: border-box;
        border-radius: 15px;
    }
    .winkelwagen .winkelWagenRow.kopRow{
        display:none;
    }
    .winkelwagen .winkelWagenRow .product{
        width:100%;
    }
    .winkelwagen .winkelWagenRow .aantal {
        margin-left:90px;
        
    }
    .winkelwagen .winkelWagenRow .aantal, .winkelwagen .winkelWagenRow .prijs, .winkelwagen .winkelWagenRow .subtotaal {
        margin-top: -50px;
    }
    .winkelwagen .winkelWagenRow .product {
        align-items: flex-start;
        padding-top: 10px;
    }
    .winkelwagen.col8, .afrekenen.col8{
        width: var(--col7);
    }
    .winkelwagenTotalen, .afrekenenTotalen {
        width: calc(var(--col5) - 30px);
    }
    .winkelwagen .winkelWagenRow .prijs{
        display:none;
    }
    .kortingsCodeContainer{
        flex-wrap:wrap;
    }
        .kortingsCodeContainer .box, .kortingsCodeContainer .btn {
            width: 100%;
            margin:0;
            text-align:center;
            justify-content:center;
        }
        .kortingsCodeContainer .box {
            border-start-end-radius: calc(var(--height-input) / 2);
            border-end-start-radius: 0;
            border-end-end-radius: 0;
        }
        .kortingsCodeContainer .btn {
            border-start-end-radius: 0;
            border-end-start-radius: calc(var(--height-input) / 2);
            border-end-end-radius: calc(var(--height-input) / 2);
        }
    .winkelwagenTotalen .winkelwagenTotaalRow.buttonContainer, .afrekenenTotalen .afrekenenTotaalRow.buttonContainer .btn{
        width:100%;
    }
    .webshopHeader.paars .hartWit {
        width: 200px;
        position: absolute;
        bottom: -50px;
    }
    .webshopHeader.paars .headerTitel {
        padding: 0 50px;
    }
    .webshopHeader.paars img.ijstaart {
        right: 0;

        width: 200px;
    }
}
@media screen and (max-width:760px) {
    .productGridContainer .productGrid {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
    }
    .shoppingBasketIcon{
        bottom:30px;
    }
    .productDetail.wrapper {
        background: var(--bg-roze);
        padding: 30px 20px;
        box-sizing: border-box;
        border-radius: 15px;
    }

        .productDetail.wrapper .col4, .productDetail.wrapper .col8 {
            width: 100%;
            padding: 0 !important;
        }

        .productDetail.wrapper .col4 {
            text-align: center;
        }

            .productDetail.wrapper .col4 img {
                max-width: 200px;
                margin: 0 auto;
            }

        .productDetail.wrapper .col8 {
            margin: 20px 0 0;
        }
    .productDetail.wrapper {
        background: var(--bg-roze);
        padding: 30px 20px;
        box-sizing: border-box;
        border-radius: 15px;
    }

        .productDetail.wrapper .col4, .productDetail.wrapper .col8 {
            width: 100%;
            padding: 0 !important;
        }

        .productDetail.wrapper .col4 {
            text-align: center;
        }

            .productDetail.wrapper .col4 img {
                max-width: 200px;
                margin: 0 auto;
            }

        .productDetail.wrapper .col8 {
            margin: 20px 0 0;
        }
            .productDetail.wrapper .col8 .addToShoppingBasketContainer .aantalContainer a, .winkelwagen .winkelWagenRow .aantal a {
                color: var(--roze);
                font-size: 25px;
            }
            .productDetail.wrapper .col8 .addToShoppingBasketContainer .aantalContainer .box, .winkelwagen .winkelWagenRow .aantal .box {
                height: 30px;
                width: 60px;
            }
    .winkelwagen.col8, .afrekenen.col8{
        width:100%;
    }
    .winkelwagen .btn{
        display:none;
    }

    .winkelwagenTotalen, .afrekenenTotalen {
        width: 100%;
        margin:40px 0 0;
    }
    .afrekenen .afrekenenBox{
        padding:20px;
    }
    .webshopHeader.paars .headerTitel {
        padding: 0 50px;
        width: 100%;
    }
    .ijsjesBorder.small {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin:150px auto 0;
    }
}
:root {
    --wrapper-width: 1280px;
    --default-side-margin: calc((100% - var(--wrapper-width)) /2);
    --default-side-margin-viewport: calc((100vw - var(--wrapper-width)) /2);
    --default-padding: 50px;
    --button-height: 55px;
    --button-small-height: 45px;
    --button-padding-left: 20px;
    --button-padding-right: 20px;
    --button-span-padding-left: 20px;
    --button-radius: 20px;
    --border-radius: 20px;
    --logo-height: 197px;
    --logo-width: 192px;
    --logo-footer-height: 75px;
    --hamburger-width: 35px;
    --height-input: 40px;
    --header-height: 540px;
    --webshopHeader-height: 300px;
    --shopping-button-position: 30px;
    --afspraak-button: 90px;
}

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

@media screen and (max-width:1400px) {
    :root {
        --wrapper-width: 1000px;
        --logo-height: 157px;
        --logo-width: 152px;
    }
}

@media screen and (max-width:1200px) {
    :root {
        --wrapper-width: calc(100% - 60px);
        --logo-height: 157px;
        --logo-width: 152px;
    }
}

@media screen and (max-width:760px) {
    :root {
        --wrapper-width: calc(100% - 40px);
        --logo-height: 128px;
        --logo-width: 139px;
        --header-height: 600px;
        --shopping-button-position: 20px;
        --afspraak-button: 90px;
    }
}