@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');



@pink: #D357FE;
@green: #02FA00;
@cyan: #02FDFF;
@geel: #F6FF0D;

@white: #ffffff;
@black: #31353A;

@grey: #31353A;
@lightgrey: #EFEFEF;

#headers, #montserrat {
    font-family: 'DM Mono', monospace;
    font-style: normal;
}

#normaltext, #pn {
    font-family: 'DM Mono', monospace;
    font-weight: 400;
    font-style: normal;
}

#fontawesome,
#fa {
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-style: normal;
}

.alignnone {
    margin: 0 1em 1em 0;
}
img.alignright {
    float: right;
    margin: 0 0 1em 1em;
}

img.alignleft {
    float: left;
    margin: 0 1em 1em 0;
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
    img {
        border: 0 none;
        height: auto;
        margin: 0;
        max-width: 98.5%;
        padding: 0;
        width: auto;
    }
}

.wp-caption.alignnone {
    margin: 0 1em 1em 0;
}

.wp-caption.alignleft {
    float: left;
    margin: 0 1em 1em 0;
}

.wp-caption.alignright {
    float: right;
    margin: 0 0 1em 1em;
}

html {
    min-height: 100vh;
    height: auto;
}
body {
    position: relative;
    #normaltext;
    color: @black;
    font-size: 17px;
    min-height: 100vh;
    height: auto;
    -webkit-font-smoothing: antialiased;
    a {
        #normaltext;
    }
    strong a{
        font-weight: 700;
    }

    a.error-link {
        color: @green;
        border-bottom: 1px solid transparent;
        text-decoration: none;
    }
}
#wpadminbar {
    opacity: 0.3;
    transition: 0.2s opacity linear;
    -webkit-transform: translateZ(0);

    &:hover {
        opacity: 1;
    }

    &:focus {
        opacity: 1;
    }
}

/* Note: defaults */
embed {
    max-width: 100%;
}

iframe {
    max-width: 100%;
}

object {
    max-width: 100%;
}
input[type=number] {
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

input[type=button] {
    -webkit-appearance: none;
    -moz-appearance: none;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"] {
    padding: 10px 10px 8px 10px;
    height: 46px;
    line-height: 24px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 14px;
    background-color: @lightgrey;
    color: @grey;
    border: none;
    width: 100%;
    margin: 0;

    &:focus& + button {}
}
textarea {
    padding: 10px 30px 0 17px;
    height: 24px;
    line-height: 24px;
    color: @green;
    border: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 12px;
    background-color: @green;
    width: 100%;
    margin: 0;
    &:-moz-placeholder {
        color: @green;
        font-style: italic;
    }

    &::-moz-placeholder {
        color: @green;
        font-style: italic;
    }

    &:-ms-input-placeholder {
        color: @green;
        font-style: italic;
    }

    &::-webkit-input-placeholder {
        color: @green;
        font-style: italic;
    }
}
textarea[rows] {
    height: 75px;
    resize: none;
    transition: all 300ms;
}
address {
    font-style: normal;
}

/* Note: -- elements */
a{
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    color: inherit;

    &:hover,
    &:focus {
        color: @green;
        outline: none;
    }
}
p{
    line-height: 1.65;
    color: inherit;

    &:empty {
        display: none;
    }
}

h1 {
    #headers;
    color: inherit;
    font-weight: 400;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: -1px;
    margin: 0 0 25px 0;
    text-transform: none;
    stong, b{
        font-weight: 500;
    }
}
h2 {
    #headers;
    color: inherit;
    font-weight: 400;
    font-size: 45px;
    line-height: 45px;
    letter-spacing: -1px;
    margin: 0 0 25px 0;
    text-transform: none;
    stong, b{
        font-weight: 500;
    }
}

h3 {
    #headers;
    color: inherit;
    font-weight: 400;
    font-size: 25px;
    line-height: 35px;
    letter-spacing: 0px;
    margin: 0 0 25px 0;
    text-transform: none;
}

h4 {
    #headers;
    color: inherit;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0px;
    margin: 0 0 25px 0;
    text-transform: none;
}

h5 {
    #headers;
    color: inherit;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0px;
    margin: 0 0 25px 0;
    text-transform: none;
}

h6 {
    #headers;
    color: inherit;
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 0px;
    margin: 0 0 25px 0;
    text-transform: none;
}





/*Note: -- page */
.clearfix {
    zoom: 1;
    &:before {
        content: "";
        display: table;
        height: 0;
        overflow: hidden;
    }

    &:after {
        content: "";
        display: table;
        height: 0;
        overflow: hidden;
        clear: both;
    }
}
#container {
    position: relative;
    z-index: 1;
    overflow-x: hidden;
    margin: 0 auto;
    min-height: 100vh;
}
.row,
.boxed {
    max-width: 72em;
    margin-left: auto;
    margin-right: auto;
    &.fullwidth,
    &.full-width {
        max-width: 100%;
    }
}
.fullwidth > .row{
    max-width: 100%;
}
[class*="column"] + [class*="column"]:last-child {
    float: left;
}
.content_wrapper {
    display: table;
    .content_wrapper--center {
        display: table-cell;
        vertical-align: middle;
    }
}
.button,
.content-page .button,
.button-group input[type="checkbox"],
.button-group input[type="radio"],
.button-group input[type="checkbox"] + label,
.button-group input[type="radio"] + label {
    #montserrat;
    font-weight: 400;
    letter-spacing: 0px;
    display: inline-block;
    font-size: 24px;
    font-weight: 500;
    font-style: 400;
    padding: 6px 0 8px 0;
    margin: 0;
    text-decoration: none;
    transition: all 0.4s ease;
    line-height: 100%;
    border-radius: 0;
    border-bottom: 3px solid @black;
    background-color: transparent;
    color: @black;
    
    &:hover,
    &:focus {
        border-color: @geel;
        color: @white;
    }
    &.kleur1 {
        border-color: @geel;
        color: @white;

        &:hover,
        &:focus {
            border-color: @geel;
            color: @white;
        }
    }
    &.kleur1 {
        border-color: @pink;
        color: @pink;

        &:hover,
        &:focus {
            border-color: @pink;
            color: @pink;
        }
    }
    &.dark {
        border-color: @black;
        color: @black;

        &:hover,
        &:focus {
            border-color: @black;
            color: @black;
        }
    }
    &.light {
        border-color: @white;
        color: @white;

        &:hover,
        &:focus {
            border-color: @white;
            color: @white;
        }
    }
}




/* Header message */
.header-top {
    z-index: 2;
    position: relative;
    background-color: @geel;
    padding: 0.75em 0;

    h1, h2, h3, h4, h5, h6, a, p, strong, li, span, i, .fa, .fas, .fab .columns, .column{
        color: @white;
    }
    p {
        margin-bottom: 0.15em;
    }

    .close-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 1em;
        cursor: pointer;

        .fas {
            transition: all 300ms;
        }

        &:hover,
        &:focus {
            .fas {
                transform: scale(1.15) rotate(90deg);
            }
        }
    }
}
/* Note: -- slick */
.slick-slide{
    outline: 0;
}
.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 40px;
    height: 40px;
    margin: 0;
    cursor: pointer;
    color: transparent;
    background-color: @lightgrey;
    border-radius: 0;
    border: none;
    outline: none;
    z-index: 999;
    transform: translateY(0);
    &:before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        #fontawesome;
        color: fade(@black,100%);
        font-weight: 900;
        content: '\f054';
        font-size: 20px;
    }
    &:hover, &:focus {
        &:before {
            color: fade(@black,50%);
        }
        background-color: @white;
    }
}
.slick-prev {
    transform: translate(50%, -120%);
    &:before {
        content: '\f30a';
    }
}
.slick-next {
    transform: translate(50%, 20%);
    &:before {
        content: '\f30b';
        transform: translate(-40%, -50%);
    }
}
.medium-push-6{
    .slick-prev, .slick-next{
        right: auto;
        left: 0;
    }
    .slick-prev {
        transform: translate(-50%, -120%);
    }
    .slick-next {
        transform: translate(-50%, 20%);
    }
}
.bglightgrey,.tpspecial1,.tpspecial2{
    .slick-prev,.slick-next {
        background-color: @white;
    }
}


/* Note: Preloader */
div.preloader {
    position: fixed;
    z-index: 99999999999;
    background-color: @white;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    .holder{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        img{
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
}


// Note: nav overlay
.navoverlay{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: @white;
    z-index: -1;
    opacity: 0;
    transform: translate(0, -100%);
    transition: all 300ms;
    &.is-active{
        opacity: 1;
        z-index: 10000;
        transform: translate(0, 0);
    }
    .bg{
        position: absolute;
        bottom: 0;
        right: 0;
        //transform: translate(20%, 40%);
        opacity: 0.15;
        width: 490px;
        height: 280px;
        overflow: hidden;
        img{
            width: 200%;
            height: 200%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            object-position: top left;
        }
    }
    div.top{
        .hamburgericonholder{
            position: relative;
            padding-right: 63px;
            padding-top: 23px;
            float: right;
            opacity: 0;
        }
    }
    div.middle{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: ~"calc( 100% - 150px )";
        text-align: center;
        .content_wrapper {
            width: 100%;
            height: 100%;
        }
        .navholder{
            transform: translateY(-75px);
        }
        .inner{
            overflow: scroll;
            
            .accordion-menu li{
                a{
                    position: relative;
                    #montserrat;
                    display: inline-block;
                    color: @black;
                    text-transform: lowercase;
                    font-size: 25px;
                    font-weight: 700;
                    padding-left: 5px;
                    padding-right: 5px;
                    &:before{
                        content: '';
                        position: absolute;
                        z-index: -1;
                        left: 50%;
                        top: 50%;
                        width: 0px;
                        height: 6px;
                        background-color: @geel;
                        transform: translate(-50%, -25%);
                        transition: all 300ms;
                    }
                    &:hover, &:focus{
                        &:before{
                            width: 100%;
                        }
                    }
                }
                &.is-accordion-submenu-parent a{
                    padding-right: 35px;
                }
                &.current-menu-item{
                    a:before{
                        width: 100%;
                    }
                }
            }
            .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle)>a::after {
                border-color: @white transparent transparent;
                border-width: 4px;
                margin-top: -1px;
                transition: all 150ms;
                transform-origin: center 30%;
            }
            .submenu.menu{
                background-color: fade(@black,10%);
                li a{
                    font-size: 18px;
                }
            }
            .quickcontact{
                padding: 50px 0 5px 0;
                text-align: center;
                a{
                    color: @white;
                    font-size: 1.2em;
                    padding: 0 5px;
                }
            }
        }
    }
}
/* Note: header */
header{
    position: fixed;
    z-index: 10001;
    width: 100%;
    padding: 20px 0;
    letter-spacing: 2.8px;
    background-color: transparent;
    transition: all 300ms;
    .wrapper{
        max-width: ~"calc( 100% - 126px )";
        margin: 0 auto;
    }
    .navwrapper{
        position: relative;
        z-index: 200;
    }
    .col1{
        padding-top: 12px;
        font-size: 20px;
        .social a{
            margin-right: 5px;
            
        }
    }
    .col2{
        position: relative;
        .logo{
            transition: all 300ms;
            position: absolute;
            bottom: 0;
            left: 50%;
            opacity: 1;
            transform: translate(-50%,107%);
            background-color: @lightgrey;
            padding: 28px;
            border-radius: 50%;
            img{
                width: 120px;
                height: 120px;
                object-fit: contain;
            }
        }
    }
    .col3{
        .hamburgericonholder{
            float: right;
        }
    }
}
body.navoverlay-active, body.home.navoverlay-active{
    header {
        .col1{
            height: auto;
            opacity: 1;
            overflow: visible;
            font-size: 20px;
        }
        .logo{
            opacity: 0;
        }
    }
}
.quickcontact{
    position: absolute;
    left: 0;
    bottom: 115px;
    z-index: 250;
    text-align: left;
    a.button{
        padding-left: 15px;
        padding-right: 15px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        transform: translateX( ~"calc( -100% + 40px )" );
        i{
            padding-left: 7px;
        }
        &:hover, &:focus{
            transform: translateX( 0 );
            background-color: @white;
            color: @black;
        }
    }
}

/* Note: Mobile nav */
#container{
    transition: all 300ms;
    &.is-active{
        transform: scale(0.95);
        transform-origin: center center;
    }
}
.languagemenu{
    float: right;
    margin-top: 17px;
    margin-right: 15px;
    font-weight: 700;
    &.dropdown.menu{
        background-color: transparent;
    }
    &.dropdown.menu > li > a, &.dropdown .is-dropdown-submenu a{
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0;
    }
    .is-dropdown-submenu {
        min-width: 50px;
    }
    &.dropdown.menu>li.is-dropdown-submenu-parent>a::after {
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        right: 7px;
        content: '';
        border-bottom-width: 0;
        border-top-style: solid;
        border-color: @black transparent transparent;
    }
}
.mobilenavoverlay{
    ul.dropdown.menu.languagemenu{
        float: none;
        justify-content: center;
    }
}
.hamburgericonholder {
    .site-menu-toggle {
        border-radius: 0;
        display: block;
        -webkit-transform: none;
        transform: none;
        position: relative;
        width: 50px;
        height: 50px;
        margin-bottom: 0;
        padding: 10px;
        background-color: transparent;
        .hamburger-line {
            display: block;
            width: 60%;
            height: 3px;
            border-radius: 2px;
            background-color: @black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-orign: 50% 50%;
            transition: all 300ms ease-in-out;
            &--top {
                transform: translate(-50%, -10px);
            }
            &--middle {
                transform: translate(-50%, 0%);
            }
            &--bottom {
                transform: translate(-50%, 10px);
            }
        }
        &.is-active{
            background-color: transparent;
            .hamburger-line {
                width: 90%;
                background-color: @black;
                &--top {
                    transform: translate(-50%, -50%) rotate(45deg);
                }
                &--middle {
                    transform: translate(-100%, 0%) rotate(20deg);
                    opacity: 0;
                }
                &--bottom {
                    transform: translate(-50%, -50%) rotate(-45deg);
                }
            }
        }
    }
}
.mobilenavoverlay{
    position: fixed;
    top: 0;
    left: 0;
    background-color: @white;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 400ms;
    overflow: hidden;
    
    &.is-active{
        display: block;
        height: 100%;
        opacity: 1;
        z-index: 10;
    }
    
    div.top{
        height: 100px;
        .logo{
            text-align: center;
            padding-top: 20px;
            img{
                max-width: 200px;
            }
        }
    }
    div.middle{
        height: ~"calc( 100% - 150px )";
        overflow: scroll;
        .content_wrapper {
            width: 100%;
            height: 100%;
        }
        .inner{
            .accordion-menu li{
                text-align: center;
                a{
                    display: inline-block;
                    color: @black;
                    text-transform: lowercase;
                    font-size: 25px;
                }
                &.is-accordion-submenu-parent a{
                    padding-right: 35px;
                }
            }
            .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle)>a::after {
                border-color: @black transparent transparent;
                border-width: 4px;
                margin-top: -1px;
                transition: all 150ms;
                transform-origin: center 30%;
            }
            .submenu.menu{
                background-color: fade(@black,10%);
                li a{
                    font-size: 18px;
                }
            }
            .bottom .quickcontact{
                text-align: center;
                padding: 40px 0 5px 0;
                a{
                    color: @black;
                    font-size: 1.2em;
                    padding: 0 5px;
                }
            }
        }
    }
    .bottom{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: @white;
        height: 50px;
        .quickcontact{
            position: relative;
            left: 0;
            bottom: 0;
            padding: 10px 0 5px 0;
            text-align: center;
            a{
                color: @black;
                font-size: 1.2em;
                padding: 0 5px;
            }
        }
    }
     
}



/* Note: Override nav */
.top-bar{
    padding-top: 58px;
}
.top-bar, .top-bar ul{
    background-color: transparent;
}
ul.dropdown.menu{
    justify-content: flex-end;
    background-color: @white;
    padding: 0;
    >li{
        padding: 0 0.85em;
        text-align: left;
        &:last-child{
            padding-right: 0;
        }
        &.is-active{
            >a{
                color:@green;
                background-color: transparent;
            }
        }
        &.current-menu-item{
            >a{
                color: @geel;
                //font-weight: 700;
                //border-bottom: 2px solid @green;
            }
        }
        >a{
            #normaltext;
            font-size: 1.15em;
            text-transform: lowercase;
            font-weight: 500;
            padding: 0 0 4px 0;
            transition: all 0ms;
            &:hover, &:focus {
                color: @green;
            }
        }
    }
    .submenu.menu{
        background-color: @white;
    }
}
.menu .is-active>a{
    color:@green;
    background-color: transparent;
}
.dropdown.menu.medium-horizontal>li.is-dropdown-submenu-parent>a::after {
    border-color: @green transparent transparent;
}
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a::after {
    border-color: transparent transparent transparent @green;
}
.is-dropdown-submenu{
    border: 0;
}
.top-bar .top-bar-right{
    >ul.menu.dropdown{
        float: left;
    }
    form#searchform{
        float: right;
        margin-left: 25px;
        button {
            position: absolute;
            right: 0;
            top: 2px;
            padding: 0;
            background-color: transparent;
            width: 30px;
            height: 24px;
            margin: 0;
            line-height: 0;
            border: none;
            color: @green;
            &:before {
                #fa;
                content: "\f002";
                font-weight: 900;
            }
            pointer-events:none;
        }
        input[type="text"]{
            border-radius: 0;
            padding: 2px 5px;
            height: auto;
            background-color: transparent;
            width: 30px;
            opacity: 0;
            transition: all 300ms;
        }
        &.active{
            input[type="text"]{
                width: 140px;
                opacity: 1;
                background-color: @lightgrey;
            }
        }
    }
}

/* Note: Hero */
@keyframes rgb {
    1% {
        background-color: fade(@pink, 80%);
    }

    25% {
        background-color: fade(@pink, 65%);
    }

    50% {
        background-color: fade(@pink, 80%);
    }

    75% {
        background-color: fade(@pink, 65%);
    }

    100% {
        background-color: fade(@pink, 80%);
    }
}


.heropages{
    position: relative;
    z-index: 1;
    height: 164px;
    &:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: fade(@pink,80%);
        background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
        animation: rgb 10s infinite alternate;
        transition: all 200ms;
    }
    img{
        position: relative;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center center;
    }
    .hero-caption{
        position: absolute;
        top: 54%;
        left: 0;
        z-index: 20;
        width: 100%;
        color: @green;
        transform: translate(0,-50%);
        .logo img{
            max-width: 240px;
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            animation: reveal-ltr 1000ms cubic-bezier(.77, .13, .19, .87) 200ms forwards;
        }
        .titleholder{
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            animation: reveal-ltr 1000ms cubic-bezier(.77, .13, .19, .87) 300ms forwards;
            padding-top: 130px;
            padding-bottom: 160px;
            h1{
                display: inline-block;
                border-bottom: 4px solid @green;
            }
        }
        .textholder{
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            animation: reveal-ltr 1000ms cubic-bezier(.77, .13, .19, .87) 400ms forwards;
            font-style: italic;
            font-weight: 500;
            color: @geel;
        }
    }
    .wereldbol{
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        animation: reveal-ltr 1000ms cubic-bezier(.77, .13, .19, .87) 0ms forwards;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        transform: translate(-50%, -50%);
        img{
            max-width: 460px;
        }
    }
    &.forhome{
        height: 100vh;
    }
}



/* Note: Section Google maps */
section.googlemaps{
    height: auto;
    line-height: 0;
    iframe {
        filter: grayscale(100%);
        &:hover{
            filter: grayscale(0%);
        }
    }
    .wrap {
        overflow: hidden;
        .iframeholder {
            position: relative;
            height: 400px;
            width: 100%;
            height: 400px;
            iframe {
                filter: grayscale(100%);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
    }
}







/* Note: Socials */
.socials {
    padding: 15px 0 0 0;

    a {
        display: inline-block;
        border-radius: 50%;
        margin: 0 4px;

        i {
            color: @grey;
            width: 100%;
            text-align: center;
            line-height: 30px;
        }

        &:hover,
        &:focus {
            i {
                color: @green;
            }
        }
    }
}


/* Note: Openingsuren */
table.openingsuren {
    width: 100%;
    margin: 15px 0;
    overflow: hidden;
    width: 100%;

    tr {
        &.today {
            font-weight: 900;
        }

        td:first-child {
            font-weight: 800;
        }
    }

    .today {
        background-color: fade(@green, 25%);
        font-weight: 800;
    }
}

p.openingsuren.notable {
    margin: 1em 0;
    line-height: 1.8em;

    .day {}

    .today,
    .today span {
        font-weight: 900;
        color: @green;
    }
}

.singlelineopeningsuren{
    a{  
        position: relative;
        i{
            position: absolute;
            top: 5px;
            left: 3px;
        }
        color: @green;
        &:hover{
            color: @black;
        }
    }
}
.openingsurensingleshow{
    display: none;
}
.openingsuren.notable_doublecol{
    position: relative;
    display: block;
    width: 100%;
    span.rij{
        display: inline-block;
        width: 50%;
        .dag{
            text-transform: lowercase;
        }
    }
}

//one line
.thehoursinoneline{
    text-align: center;
    .day{
        position: relative;
        display: inline-block;
        width: 14.2857%;
        overflow: hidden;
        border-right: 1px solid @grey;
        padding: 13px 0 7px 0;
        h2{
            margin-bottom: 15px;
            position: relative;
        }
        &:last-child{
            border-right: 0;
        }
        &.today{
            h2:before{
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 20px;
                height: 3px;
                background-color: @green;
            }
        }
    }
    
}



/* Note: instagramfeed */
.instagramvierkant{
    div{
        padding: 10px;
        img{
            height: auto;
            width: auto;

        }
    }
    p{
        //padding-top:10px;
        a{
        color:@green;
            i{
                font-size: 0.9em;
            }
        &:hover{
            color: @black;
        }
        }
    }
}


/* Note: pagination */
ul.pagination {
    li {
        a {
            padding: 0 7px;
            border-radius: 0;
        }
    }
}

.pagination.current {
    color: @white;
    background: @green;
    padding: 1px 7px 2px 7px;
}



/* Note: formulier */
form p {
    margin: 0;
}

form {
    position: relative;
    z-index: 10;
    &:before {
        content: "";
        display: table;
        height: 0;
        overflow: hidden;
    }

    &:after {
        content: "";
        display: table;
        height: 0;
        overflow: hidden;
        clear: both;
    }
}

div.wpcf7 form .ajax-loader {
    display: none;

    &.is-active {
        display: inline-block;
    }
}

form {
    .infocaptcha{
        padding-top: 22px;
        small{
            opacity:0.5; 
            display:inline-block;
            font-size:10px;
            color: @pink;
        }
    }
    label {
        position: relative;
        transition: all 300ms;
        color: @pink;
        span.title {
            #montserrat;
            position: absolute;
            top: 32px;
            left: 15px;
            z-index: 2;
            font-size: 20px;
            -webkit-transition: all 300ms;
            -moz-transition: -moz-all 0.3s ease;
            -o-transition: -o-all 0.3s ease;
            -webkit-transition: -webkit-all 0.3s ease;
            transition: all 0.3s ease;
            z-index: 2;
            color: @pink;
            text-transform: uppercase;
            font-style: italic;
            font-size: 18px;
        }
        span input[type="text"],
        span input[type="email"],
        span textarea {
            position: relative;
            z-index: 1;
            padding: 10px;
            transition: all 300ms;
            margin: 0;
            border: none;
            border: 3px solid @pink;
            background-color: fade(@grey, 3%);
            color: @black;
            font-size: 15px;
            border-radius: 0;
            &:focus {
                border: 1px solid fade(@grey, 0%);
                background-color: fade(@grey, 3%);
                box-shadow: none;
            }
        }

        &.selected {
            margin-top: 10px;
            span.title {
                color: @pink;
            }
            span input[type="text"],
            span input[type="email"],
            span textarea {
                border: 3px solid @pink;
                background-color: fade(@grey, 3%);
                box-shadow: none;
                color: @black;
            }
            span textarea {
                height: 150px;
            }
        }

        &.float {
            float: left;
            width: 50%;

            &.floatleft {
                padding: 0 22px 0 0;
            }

            &.float25:first-child {
                width: 25%;
                padding-right: 15px;
            }

            &.float25:last-child {
                width: 25%;
            }
        }

        &:not(.float) {
            clear: both;
        }
    }

    input[type="submit"] {
        margin-top: 22px;
        line-height: 100%;
        padding-top: 15px;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        -moz-appearance: none;
        -webkit-appearance: none;
    }
    
    .button{
        font-size: 18px;
        font-style: italic;
        letter-spacing: 0.4px;
        font-weight: 400;
    }

    .wpcf7-response-output {
        color: @white;
    }
}


form label.selected span.title {
    top: 0px;
    left: 0px;
    transform: scale(0.8);
    transform-origin: left top;
}

form input[type="submit"] {
    transition: all 300ms;
}

/* Validation errors */
span.wpcf7-not-valid-tip {
    color: @green;
    font-style: italic;
}

div.wpcf7-validation-errors {
    border: 2px solid @green;
    color: @black;
}

div.wpcf7-response-output {
    margin: 2em 0 1em 0;
}

button {
    #normaltext;
    background-color: @green;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    padding: 10px 20px;

    &:hover {
        background-color: @green;
        outline: none;
    }

    &:focus {
        background-color: @green;
        outline: none;
    }
}
.inputemailnieuwsbrief{
    width: ~"calc( 100% - 170px )";
    float: left;
}
.knopnieuwsbrief{
    width: 160px;
    float: right;
}


/* Note: bigthreeninelayout */
section.bigthreeninelayout{
    position: relative;
    .row.background{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        .col1{
            margin-left: -330px;
            margin-right: 330px;
            height: 100%;
            background-size: cover;
            .bgimgholder{
                background-position: 150px center;
            }
        }
        .col2{
            margin-left: -330px;
            margin-right: 330px;
            height: 100%;
            height: 200px;
            background-size: cover;
            background-position: center center;
        }
    }
    .row.foreground{
        position: relative;
        z-index: 100;
        .col1{
            background-color: @green;
            .inner{
                position: relative;
                a:hover, a:focus{
                    color: fade(@white,75%);
                }
            }
        }
        .col2{
            min-height: 200px;
            .inner{
                position: relative;
            }
        }
    }
}

/* Note: footer */
.footer {
    position: relative;
    z-index: -1;
    padding-top: 0;
    .bg{
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        &:before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: fade(@pink,80%);
        }
        img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
        }
        
    }
    &.sticky-footer{
        position: absolute;
        bottom: 0;
        left: 0;
    }
    section.firstrow{
        position: relative;
        z-index: 10;
        padding: 40px 0 0px 0;
        .bg{
            position: absolute;
            bottom: 0;
            right: 0;
            //transform: translate(20%, 40%);
            opacity: 0.15;
            width: 400px;
            height: 232px;
            overflow: hidden;
            img{
                width: 200%;
                height: 200%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
                object-position: top left;
            }
        }
        .medium-8{
            padding: 16px 0 0 0;
        }
        h3, a, p, strong, li, span, i, .fa, .fas, .fab .columns, .column {
            color: @white;
        }
        .socials{
            font-size: 40px;
            a{
                margin: 0 7px;
                i{
                    transition: all 300ms;
                }
                &:hover,
                &:focus {
                    i{
                        color: @green;
                    }
                }
            }
        }
        a {
            color: @white;
            &:hover,
            &:focus {
                color: @green;
            }
        }
    }
    section.secondrow{
        position: relative;
        z-index: 10;
        .textwrapper{
            padding: 0 0 0 0;
            font-size: 13px;
            letter-spacing: 0px;
            text-transform: lowercase;
            position: relative;
            color: @white;
            strong, b{
                font-weight: 900;
            }
            *{
                font-weight: 500;
            }
            .contentcms, .copy{
                display: inline-block;
            }
            .copy a{
                padding-left: 5px;
                text-transform: lowercase;
                .handje {
                    font-size: 0.6em;
                    transform: translateY(4px);
                    padding-left: 3px;

                    .st0 {
                        transition: all 300ms;
                        fill: @white !important;
                    }
                }

                &:hover {
                    .handje {
                        .st0 {
                            fill: @green !important;
                        }
                    }
                }
            }
        }
    }
}


/* Note: Page not found */
.not-found-logo {
    svg {
        max-width: 200px;
    }

    .st0 {
        fill: @green;
    }
}

.pnf-titel1,
.pnf-titel2 {
    position: relative;
}


/* Note: FIXES */
// note: -- ani
/*Note: -- animations*/
@keyframes reveal-ltr {
    0% {clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);}
    99% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    100% {clip-path: none;}
}
@keyframes reveal-rtl {
    0% {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
    99% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    100% {clip-path: none;}
}
@keyframes reveal-ttb {
    0% {clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
    99% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    100% {clip-path: none;}
}
@keyframes reveal-btt {
    0% {clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);}
    99% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    100% {clip-path: none;}
}
@keyframes reveal-tltbr {
    0% {clip-path: polygon(0 0, 0 0, 0 0, 0 0);}
    99% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    100% {clip-path: none;}
}
.ani{
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
.ani-ltr{
    animation: reveal-ltr 1000ms cubic-bezier(.77, .13, .19, .87) 0ms forwards;
}
.ani-rtl{
    animation: reveal-rtl 1000ms cubic-bezier(.77, .13, .19, .87) 0ms forwards;
}
.ani-ttb{
    animation: reveal-ttb 1000ms cubic-bezier(.77, .13, .19, .87) 0ms forwards;
}
.ani-btt{
    animation: reveal-btt 1000ms cubic-bezier(.77, .13, .19, .87) 0ms forwards;
}
.ani-tltbr{
    animation: reveal-tltbr 1000ms cubic-bezier(.77, .13, .19, .87) 0ms forwards;
}


// Note: -- Homepage
.quicknav{
    position: fixed;
    z-index: 50;
    top: 50%;
    right: 73px;
    transform: translate(0, -50%);
    li{
        list-style: none;
        margin-bottom: 5px;
        a{
            position: relative;
            display: block;
            background-color: @black;
            border: 2px solid @white;
            border-radius: 50%;
            width: 11px;
            height: 11px;
            transition: all 100ms;
            &.current{
                background-color: @black;
                border: 2px solid @black;
                width: 11px;
                height: 11px;
            }
        }
    }
}

section.homecontent{
    >.row>.columns{
        position: relative;
        height: 100vh;
        min-height: 600px;
    }
}
@media(max-width:640px)
{
  section.homecontent{
    >.row>.columns{
        position: relative;
        height: 100%;
        min-height: 600px;
    }
}
}
section#home2deel0{
>.row{
  background-color: @geel;
       height: 70vh;
        min-height: 600px;
        padding-top: 50px;
        padding-bottom: 50px;
     
        .large-6{
          position: relative;
          height: 100%;
        }
        .textwrapper{
          height: 100%;
          width: 100%;
          top: 0%;
          left: 0;
          padding-right: 50px;
          position: absolute;
        }
        .slick-prev{left: 0;
        right: initial;}
        .slick-next{
          transform: translate(-50%,-50%);
        }
        .slick-list{
          
          height: 100%;
          .slick-track{
            height: 100%;
            .slick-slide{
                padding: 0;
                height: 70vh;
                min-height: 600px;
            }
          }
        }
        .foto{
          img{
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
}
}

section#home2deel1{
  >.row{
        background-color: @green;
        &:hover, &:focus{
            background-color: @pink;
        }
       position: relative;
        height: 100vh;
        min-height: 600px;
         display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
        .wrapper{
          max-width: 72em;
          width: 100%;
          margin-left: auto;
          margin-right: auto;
         
         
          >.small-12>.textwrapper >.small-12{
            padding-left: 0;
            padding-right: 0;
            margin-bottom: 10px;
          }
          h2{
            text-transform: uppercase;
          }
          a{
            color: @white;
          }

          .middenkolom{
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;

            .line{
                
                  flex: 1;
                  margin: auto .5em;
                  height: 0;
                  border-top: 1px solid;
              // &::after{
              //   content: '';
              //   position: absolute;
              //   width: 90%;
              //   left: 5%;
              //   top: 50%;
              //   border-bottom: 1px solid @black;
              // }
            }
          }
        }
       
  }
}
@media(max-width:640px)
{
  section#home2deel1 .row .wrapper .middenkolom .line{
    display: none;
  }
  section#home2deel1 .row{
    height: 100%;
  }
  section#home2deel0 .row{
    height: 100%;
   .large-6{
     height: 500px;
     padding: 0;
     .textwrapper{
       padding-right: 0;
     }
   }
  }
}
section.homecontent2{
    >.row>.columns{
        .imgwrapper{
            position: absolute;
            top:0;
            left: 0;
            height: 100%;
            width: 100%;
            >img{
                position: absolute;
                top:0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
                &:hover{
                    filter: invert(1);
                }
            }
            &.withslider{
                height: ~"calc( 100% - 80px )";
                padding: 30px 0 0 0;
                width: 150%;
                left: -50%;
                .slick-slide {
                    margin: 0 6px;
                }
                .slick-list {
                    margin: 0 -6px;
                }
                .slick-prev, .slick-next{
                    right: 0;
                }
                .slick-prev {
                    right: 44%;
                    top: auto;
                    bottom: 0;
                    transform: translate(100%, 50%);
                }
                .slick-next {
                    right: 5%;
                    top: auto;
                    bottom: 0;
                    transform: translate(0, 50%);
                }
                .slider-count{
                    width: 50%;
                    float: right;
                    padding: 6px;
                    font-size: 12px;
                    .current{
                        font-weight: 700;
                    }
                }
            }
        }
        .textwrapper{
            max-width: 36em;
            padding: 0 110px 0 0;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
            .smaller{
                font-size: 10px;
                line-height: 100%;
            }
        }
    }
    
}
section.homecontent3{
    background-color: @cyan;
    &:hover, &:focus{
        background-color: @pink;
    }
    >.row>.columns{
        .textwrapper.textleft{
            max-width: 36em;
            padding: 0 110px 0 0;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
            .button{
                margin-top: 25px;
            }
            h1, h2{
                margin-bottom: 45px;
            }
        }
        .textwrapper.textright{
            max-width: 36em;
            padding: 0 0 0 0;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            .button{
                margin-top: 25px;
            }
            h1, h2{
                margin-bottom: 45px;
            }
        }
    }
}
section.homecontent4{
    >.row>.columns{
        position: relative;
        height: 50vh;
        min-height: 600px;
        .textwrapper{
            position: absolute;
            top: 50%;
            left:0;
            width: 100%;
            transform: translate(0, -50%);
        }
    }
}
// Note: -- Builder
.bglightgrey{
    background-color: @lightgrey;
}
.tpspecial1{
    padding-top: 0;
    padding-bottom: 0;
    .row{
        position: relative;
        padding: 80px;
        .columns .textwrapper{
            padding-top: 0;
            padding-bottom: 0;
        }
        .bg{
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background-color: @lightgrey;
        }
    }
}
.tpspecial2{
    padding-top: 0;
    padding-bottom: 0;
    .row{
        position: relative;
        padding: 80px;
        .textwrapper{
            padding-top: 0;
            padding-bottom: 0;
        }
        .bg{
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background-color: @lightgrey;
        }
        .columns .textwrapper{
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .columns .imgwrapper {
            width: calc(100% +  160px);
            left: auto;
            right: 0;
        }
    }
}
.blackandwhite{
    filter: grayscale(1);
    &:hover, &:focus{
        filter: grayscale(0);
    }
}

/* Note: -- nieuwsitems */
.nieuwsitems{
    margin-bottom: 100px;
    article{
        &:nth-child(3n+1) {
            clear: both;
        }
        h3{
            margin-top: 7px;
            font-size: 16px;
        }
        .imgwrapper{
            height: 400px;
            background-color: @black;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
                transition: all 300ms;
            }
            &:hover, &:focus{
                img{
                    opacity: 0.5;
                    transform: scale(1.1);
                }
            }
        }
    }
}

//Note: -- Contactpage
section.textonly.textcontact{
    .large-6:last-child {
        padding-left: 0;
    }
    .large-6:first-child .textwrapper {
        padding: 0.3em 0 2.2em 12em;
        h2{
            position: relative;
            &:before {
                content: '';
                position: absolute;
                top: 20px;
                left: 0;
                transform: translate(-192px, 0);
                height: 1px;
                width: 135px;
                border-top: 1px solid #C99726;
            }
        }
    }
}

//Note: -- Detailpage
section.detailpage{
    margin-bottom: 110px;
}

//Note: -- Footer
section.textandimage.infooter{
    margin-bottom: 171px;
    &.textandimage .columns.large-pull-6 .textwrapper {
        padding: 0.3em 0 2.2em 12em;
        h2{
            position: relative;
            &:before{
                content: '';
                position: absolute;
                top: 20px;
                left: 0;
                transform: translate(-192px, 0);
                height: 1px;
                width: 135px;
                border-top: 1px solid @geel;
            }
        }
    }
    &.textandimage .columns.large-push-6 .imgwrapper {
        padding: 0 0 0 6em;
    }
}
section.cta.infooter{
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-bottom: 0;
    &:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: @white;
        opacity: 0.6;
    }
    .row{
        position: relative;
        z-index: 5;
        h2{
            color: @grey;
            a{
                #montserrat;
                position: relative;
                &:before{
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    width: 0%;
                    border-bottom: 2px solid @grey;
                    transition: all 300ms;
                }
                &:hover, &:focus{
                    &:before{
                        width: 100%;
                    }
                }
            }
        }
    }
}



//Note: -- Search results
.searchresults{
    .result{
        position: relative;
        background-color: @lightgrey;
        border-bottom: 1px solid @green;
        padding: 20px;
        margin-bottom: 30px;
    }
}






/* fancybox -  quick view */
.quick-view-container {
    background: rgba(10, 10, 10, .85);
}

.quick-view-content {
    bottom: 0;
    height: calc(100% - 40px);
    left: 0;
    margin: auto;
    max-height: 504px;
    max-width: 1002px;
    position: absolute;
    right: 0;
    top: 0;
    width: calc(100% - 40px);
    .fancybox-slide--image {
        overflow: hidden;
        padding: 0;
    }
    .fancybox-content{
        cursor: default;
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
    }
    .fancybox-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .fancybox-navigation .fancybox-button{
        top: auto;
        bottom: 27px;
        height: 30px;
        width: 30px;
        opacity: 1;
        &--arrow_left{
            padding: 0;
            left: 20px;
        }
        &--arrow_right{
            padding: 0;
            right: auto;
            left: 58px;
        }
    }
}
.fancybox-button {
    background-color: transparent;
    svg path {
        fill: @white;
    }
    &:hover{
        background-color: transparent;
        svg path {
            fill: fade(@white, 65%);
        }
    }
    &:focus{
        background-color: transparent;
    }
}

.quick-view-carousel {
    background: @white;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 57%;
}

.quick-view-aside {
    background: @white;
    padding: 50px 0 30px 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: 43%;
}


.quick-view-aside>div.inner {
    position: absolute;
    width: 100%;
    top: 45%;
    left: 0;
    padding: 0 61px 70px 61px;
    h2{
        margin-bottom: 10px;
        text-transform: none;
    }
    .nasub{
        height: 114px;
    }
}

.quick-view-aside>div>p {
    font-size: 90%;
}

.quick-view-close {
    background: #fff;
    border: 0;
    color: @grey;
    cursor: pointer;
    font-family: Arial;
    font-size: 20px;
    height: 44px;
    margin: 0;
    padding: 0;
    position: absolute;
    text-indent: -99999px;
    top: 30px;
    right: 30px;
    transition: all .2s;
    width: 44px;
}

.quick-view-close:hover, .quick-view-close:focus {
    background: transparent
}

.quick-view-close::before,
.quick-view-close::after {
    background-color: #222;
    content: '';
    height: 40px;
    left: 22px;
    position: absolute;
    top: 0px;
    width: 1px;
}

.quick-view-close:before {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.quick-view-close:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}









//Note: -- Margins
#home-slider, .heropages{margin-bottom: 00px;}

section.textonly.firsttitle{
    padding-top: 15px !important;
    h1, h2, h3, h4, h5, h6{
        margin-bottom: 7px;
    }
}
section.textandimage,
section.textonly,
section.voorstellingpaginas,
section.voorstellingassortiment{
    padding-top: 20px;
    padding-bottom: 40px;
}
section.cta{
    padding-top: 40px;
    padding-bottom: 0;
}


.page-template-template-contact{
    .footer{
        padding-top: 0;
        section.secondrow .textwrapper:before{
            display: none;
        }
    }
}

/* Note: media queries */
//*********************//
@media only screen and (max-width: 1300px) {
    .quicknav {
        right: 10px;
    }
    header .wrapper {
        max-width: calc( 100% - 25px );
        margin: 0 auto;
    }
}
@media only screen and (max-width: 1130px) {
    .quicknav {
        display: none;
    }
    .homecontent .columns .textwrapper {
        padding: 0 25px 0 75px;
    }
    .footer section.firstrow .bg {
        width: 200px;
        height: 132px;
    }
}

@media only screen and (max-width: 1023px) {
    .navoverlay div.top .hamburgericonholder {
        padding-right: 50px;
        padding-top: 50px;
    }
    .navoverlay div.middle {padding-left: 50px;}
    header .wrapper {max-width: calc( 100% - 40px );}
    section.textandimage .columns .textwrapper {padding: 0 0 0 4em;}
    section.textandimage.homecontent1.textandimage .columns .imgwrapper {padding: 0 4em 0 0;}
    
    section.textandimage.infooter,
    section.detailpage,
    .page-template-template-realisatiesdetail section.fotogalerij,
    .realisaties_voorstellingpaginas,
    section.textandimage.homecontent1.aanbodoverzicht,
    .home_voorstellingpaginas,
    section.textandimage.homecontent1,
    section.textandimage.homecontent1.aanbodoverzicht.last {
        margin-bottom: 70px;
    }
    #home-slider, .heropages{margin-bottom: 40px;}
    
    /* Section textonly */
    body {
        font-size: 15px;
    }
    
    .nieuwsitems{
        article{
            &:nth-child(3n+1) {
                clear: none;
            }
            &:nth-child(2n+1) {
                clear: none;
            }
        }
    }
}

@media print, screen and (max-width: 960px){
    #wpadminbar{
        display: none;
    }
	.homecontent .columns .textwrapper {
        padding: 0 35px 0 45px;
    }
    section.textandimage .columns .textwrapper {
        padding: 0 0 0 2em;
    }
    .tpspecial1 .row {
        padding: 40px 20px;
    }
    .slick-prev {
        transform: translate(0%, -120%);
    }
    .slick-next {
        transform: translate(0%, 20%);
    }
    .medium-push-6{
        .slick-prev {
            transform: translate(0%, -120%);
        }
        .slick-next {
            transform: translate(0%, 20%);
        }
    }
}
@media print, screen and (max-width: 768px){
    section.textandimage.infooter.textandimage .columns.large-pull-6 .textwrapper,
    section.textonly.textcontact .large-6:first-child .textwrapper{
        padding: 0.3em 0 2.2em 4em;
    }
    .realisaties_voorstellingpaginas .holder {
        height: 350px;
    }
    #container{
        overflow-x: hidden;
    }
    body.home #container{
        overflow-x: hidden;
        scroll-snap-points-y: unset;
        scroll-snap-type: unset;
        .homecontent {
            scroll-snap-align: unset;
        }
    }
    section.homecontent1 .columns .textwrapper,
    div.preloader .holder{
        width: 200px;
        height: 200px;
    }
    .tpspecial1 .row ,
    .tpspecial2 .row {
        padding: 80px 0;
    }
    .textandimage .columns.large-push-6 .textwrapper, .textandimage .columns.large-pull-6 .textwrapper {
        padding: 0 3em 0 0;
    }
}
@media print, screen and (max-height: 720px){
    .heropages.forhome{
        min-height: 600px;
    }
    .heropages .hero-caption .titleholder {
        padding-top: 40px;
        padding-bottom: 30px;
    }
    section.homecontent > .row > .columns{
        position: relative;
        height: auto;
        min-height: 300px;
    }
    section.homecontent.homecontent2 > .row > .columns {
        height: 100vh;
    }
    section.homecontent2 > .row > .columns .textwrapper,
    section.homecontent3 > .row > .columns .textwrapper.textleft,
    section.homecontent3 > .row > .columns .textwrapper.textright,
    section.homecontent4 > .row > .columns .textwrapper{
        padding-top: 2em;
        padding-bottom: 2em;
        position: relative;
        top: 0;
        right: 0;
        transform: translate(0, 0);
    }
    section.homecontent2 > .row > .columns .textwrapper{
        max-width: 100%;
        padding: 2em 5em 2em 2em;
    }
    section.homecontent3 > .row > .columns .textwrapper.textright{
        max-width: 100%;
        padding: 2em 2em 2em 0em;
    }
}
@media print, screen and (max-width: 640px){
    h1 {
        #headers;
        color: inherit;
        font-weight: 700;
        font-size: 30px;
        line-height: 45px;
        letter-spacing: 0px;
        margin: 0 0 25px 0;
        text-transform: none;
    }
    h2 {
        #headers;
        color: inherit;
        font-weight: 700;
        font-size: 30px;
        line-height: 45px;
        letter-spacing: 0px;
        margin: 0 0 35px 0;
        text-transform: none;
        em{
            #pn;
            font-weight: 400;
            font-size: 12px;
            line-height: 40px;
            letter-spacing: 4.8px;
            text-transform: uppercase;
            font-style: normal;
        }
    }
    h3 {
        #headers;
        color: inherit;
        font-weight: 700;
        font-size: 20px;
        line-height: 35px;
        letter-spacing: 0px;
        margin: 0 0 25px 0;
        text-transform: none;
    }


    .hamburgericonholder .site-menu-toggle .hamburger-line,
    .hamburgericonholder .site-menu-toggle.is-active .hamburger-line{
        background-color: @white;
    }
    header .col2 .logo {
        transform: translate(-50%, 99%);
    }
        
    header .col2 .logo {
        padding: 15px;
    }
    
    
    
    header {
        position: absolute;
        z-index: 5;
        width: 100%;
        padding: 0;
        background-color: transparent;
        .small-uncollapse > .columns {
            padding-left: 0;
            padding-right: 0;
        }
        .wrapper {
            max-width: calc(100% - 30px);
        }
        .logo {
            padding: 15px 0 8px 0;
            text-align: left;
            a{
                display: inline-block;
                padding: 10px;
                img{
                    width: 60px;
                    height: 100%;
                }
            }
        }
    }
    
    
    
    body>.hamburgericonholder{
        position: fixed;
        top: 76px;
        right: 0;
        z-index: 20;
        background-color: @grey;
        .hamburger-line{
            background-color: #ffffff;
        }
    }
    
    .heropages.forhome{
        min-height: 350px;
    }
    .heropages .hero-caption .titleholder {
        padding-top: 40px;
        padding-bottom: 30px;
    }
    section.homecontent > .row > .columns{
        position: relative;
        height: 100% !important;
        min-height: 300px;
    }
    
    section.homecontent2 > .row > .columns .textwrapper,
    section.homecontent3 > .row > .columns .textwrapper.textleft,
    section.homecontent3 > .row > .columns .textwrapper.textright,
    section.homecontent4 > .row > .columns .textwrapper{
        padding: 2em 0;
        position: relative;
        top: 0;
        right: 0;
        transform: translate(0, 0);
    }
    
    #container {
        max-width: calc( 100% - 0px );
    }
    body{
        font-size: 17px;
    }
    .column, .columns {
        padding-right: 1.5em;
        padding-left: 1.5em;
    }
    .small-uncollapse>.column, .small-uncollapse>.columns{
        padding-right: 1.5em;
        padding-left: 1.5em;
    }
    .mobilenavoverlay div.top .logo {
        padding-top: 1em;
        padding-bottom: 1em;
        padding-right: 1.5em;
        padding-left: 1.5em;
    }
    /* Section textonly */
    section.textonly {
        .large-6:first-child {
            padding-right: 1.5em;
        }

        .large-6:last-child {
            padding-left: 1.5em;
        }
    }
    /* Section text and image */
    .textandimage {
        padding-top: 30px;
        padding-bottom: 30px;

        .columns {
            .imgwrapper {
                padding: 0 0 0 0;
            }

            .textwrapper {
                padding: 0 0 0 0;
            }

            &.large-push-6,
            &.large-pull-6 {
                .imgwrapper {
                    padding: 0 0 0 0;
                }

                .textwrapper {
                    padding: 0 0 0 0;
                }
            }
        }
    }
    .footer {
        .large-4 {
            .textwrapper {
                padding-right: 0px;
            }
        }

        section.secondrow {
            .footertextholder {
                text-align: center;

                p {
                    float: none;
                }
            }
        }

        .copy span.algemene-voorwaarden {
            padding: 0 15px 0 0;
            display: block;
        }
    }
    
}











//kan verzet worden


/* Note: Flexible layout */
.gelijkehoogte {
    position: relative;
    min-height: 280px;
    .imgwrapper {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center center;
        }
    }
    .slick-slider {
        height: 100%;
        .slick-track,
        .slick-list {
            height: 100% !important;
        }
        .slick-slide {
            height: 100%;
            width: 100%;
            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: center center;
            }
        }
    }
}

.wrapper {
    position: relative;

    &.overlay {
        &:after {
            content: '';
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: fade(@green, 80%);
        }

        .columns {
            position: relative;
            z-index: 5;

            * {
                color: @white;
            }
        }
    }

}

/* Note: Section textonly */
section.textonly {
    .large-6:first-child {
        padding-right: 3em;
    }
    .large-6:last-child {
        padding-left: 3em;
    }
    .large-4 {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }
    .large-4:first-child {
        padding-left: 0.46em;
        padding-right: 3em;
    }
    .large-4:last-child {
        padding-left: 3em;
        padding-right: 0.46em;
    }
}

/* Note: Section text and image */
.textandimage {
    .slickslider{
        margin-bottom: 0;
    }
    .columns {
        position: relative;
        .imgwrapper {
            padding: 0 0 0 0;
        }

        .textwrapper {
            padding: 6em 0em 6em 6em;
        }

        &.large-push-6,
        &.large-pull-6 {
            .imgwrapper {
                padding: 0 0 0 0;
            }

            .textwrapper {
                padding: 6em 6em 6em 0em;
            }
        }
    }
}

/* Note: Section voorstellingpaginas */
.voorstellingpaginas {
    .slick-prev,
    .slick-next {
        top: 50%;
        bottom: auto;
        background-color: @white;

        &:before {
            color: @geel;
            transition: padding 300ms;
        }

        &:hover,
        &:focus {
            background-color: transparent;

            &:before {
                padding: 0 2px;
            }
        }
    }

    .slick-prev {
        transform: translate(-150%, -50%);
    }

    .slick-next {
        transform: translate(150%, -50%);
    }

    .slick-slide {
        margin: 0 8px;
    }

    .slick-list {
        margin: 0 -8px;
    }

    .holder {
        position: relative;
        background-color: @white;
        width: 100%;
        height: 200px;
        max-height: 300px;
        margin-bottom: 0em;

        * {
            transition: all 300ms;
        }

        .textholder {
            p {
                padding: 5px;
            }
        }

        .imgholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

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

        a.overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;

            &:hover,
            &:focus {
                cursor: pointer;
            }
        }

        .textholder {
            position: absolute;
            text-transform: lowercase;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;

            p {
                text-align: center;
                font-weight: 800;
                text-transform: lowercase;
                color: @white;
                margin-bottom: 5px;
                font-size: 1.2em;
            }
        }

        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 300ms;
            background-color: fade(@geel, 80%);
        }

        &:hover,
        &:focus {
            &:after {
                background-color: fade(@green, 80%);
            }
        }
    }
}

.slick-dots {
    margin-left: 0;
    left: 0;
    li {
        width: 10px;
        height: 17px;
    }
}




/* Note: Section producten */
section.producten {
    .product {
        border-bottom: 1px solid @lightgrey;
        padding-top: 0.5em;

        &:last-child {
            border-bottom: none;
        }
        
        .name,
        .amount {
            float: left;
            display: inline-block;
            padding: 0 10px;
        }

        .name {
            width: 35%;
            padding: 5px 0;
            font-size: 0.87em;
            letter-spacing: -0.03em;

            span.price {
                font-size: 0.8em;
            }
        }

        .amount {
            width: 15%;

            select {
                margin: 0 0 0.4rem 0;
                padding: 0 0.3rem;
                height: 26px;
                min-width: 78px;
            }
        }


        .container {
            float: left;
            width: 50%;

            .side {
                float: right;
                width: 80px;
                text-align: right;

                .orderbutton {
                    .bestelbutton {
                        padding: 3px 6px;
                    }
                }
            }

            .content {
                width: auto;
                margin-right: 80px;

                .comments {
                    width: 100%;

                    input[type="text"] {
                        margin: 0 0 0.4rem 0;
                        padding: 0 0.3rem;
                        height: 26px;
                    }
                }
            }
        }
    }
}

/* Note: Section winkelwagen */
section.winkelwagen {
    display: none;
    border-top: 1px solid @lightgrey;
    background-color: fade(@green, 10%);
    //margin-top: 40px;
    padding: 40px 0 70px 0;

    table {
        background-color: transparent;

        tr.even,
        tr.alt,
        tr:nth-of-type(even) {
            background-color: fade(@green, 7%);
        }
    }

    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="time"],
    input[type="url"],
    textarea {
        background-color: @white;
    }

    form label.selected span input[type="text"],
    form label.selected span input[type="email"],
    form label.selected span textarea {
        background-color: @white;
    }

}

section.total-winkelwagen {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 100;

    .button {
        min-width: 90px;
        padding: 10px 20px;
        font-size: 1.05em;
    }
}

table.show-cart {
    width: 100%;
}


/* Note: Section cta */
.cta {
    position: relative;
    overflow: hidden;
    h1,h2,h3,h4,h5,h6{
        color: inherit;
    }
    h1,h2,h3,h4,h5{
        //margin-bottom: 7px;
    }
    &.onecolumn .columns{
        padding-top: 85px;
        padding-bottom: 85px;
    }
    &.twocolumn {
        background: linear-gradient(to right, @green 0%, @green 50%, @lightgrey 50%, @lightgrey 100%);
        .col1 {
            padding-right: 130px;
        }
        .col2 {
            padding-left: 130px;
        }
    }
    .columns {
        &.col1 {
            color: @black;
        }

        &.col2 {
            color: @black;
        }
    }
    .inner{
        margin: 0 auto;
        max-width: 756px;
    }
}

/* Note: Section big contact */
.bigcontact {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 50px 0;
    background-color: @geel;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    span,
    a {
        color: @white;
    }

    .title {
        margin-bottom: 50px;
    }

    .holder {
        .fas {
            font-size: 20px;
            margin-bottom: 20px;
        }
    }
}

/* Note: Section realisaties */
.fotogalerij,
.referenties,
.fotoslider{
    padding-top: 0;
    padding-bottom: 0;

    .wrap {
        margin-left: -8px;
        margin-right: -8px;
    }

    .foto,
    .quote,
    .referentie {
        position: relative;
        padding-bottom: 16px;
        padding-left: 8px;
        padding-right: 8px;

        &[class*="column"] + [class*="column"]:last-child {
            float: left;
        }

        .title {
            background-color: @green;
            padding: 10px;
            color: red;
            font-weight: 800;

            * {
                color: inherit;
            }
        }

        .fotoinner {
            height: 0;
            position: relative;
            //padding-bottom: 80%;
            height: 385px;
        }

        /*&.large-6 .fotoinner{
            padding-bottom: 80%;
        }
        &.large-4 .fotoinner{
            padding-bottom: 80%;
        }
        &.large-3 .fotoinner{
            padding-bottom: 80%;
        }*/
        .textwrapper {
            position: absolute;
            margin: 0;
            bottom: 0.82em;
            left: 0.82em;
            width: ~'calc( 100% - 1.64em )';
            z-index: 99;
            overflow: hidden;
            color: white;
            pointer-events: none;

            span {
                position: relative;
                display: inline-block;
                line-height: 100%;
                width: 100%;
                padding: 8px;
                transform: translateY(100%);
                transition: all 300ms;
            }

            p {
                transition: all 800ms;
                color: white;
            }
        }
        .iconwrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 100;
            transform: translate(-50%, -50%);
            overflow: hidden;

            .fa {
                font-size: 18px;
                transform: translateY(150%) scale(0.4);
                transition-timing-function: ease-out;
                transition: all 300ms;
                transition-delay: 100ms;
                opacity: 0;
                color: @white;
            }
        }
        .imgwrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            //padding: 0.9375em;
            transition: all 300ms;

            .inner {
                position: relative;
                height: 100%;

                &:after {
                    content: '';
                    position: absolute;
                    z-index: 5;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: fade(@green, 0%);
                    transition: all 300ms;
                    pointer-events: none;
                }

                a {
                    position: relative;

                    span {
                        bottom: 20px;
                    }

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center center;
                        transition: all 300ms;
                    }

                }
            }
        }
        &:hover,
        &:focus {
            outline: 0;
            .imgwrapper {
                transform: scale(1.0) translateZ(0);

                .inner {
                    &:after {
                        background-color: fade(@green, 80%);
                    }
                }

            }

            .iconwrapper {
                .fa {
                    transform: translateY(0) scale(1);
                    opacity: 1;
                }
            }

            .textwrapper span {
                transform: translateY(0%);
            }
        }
    }
}

/*Note: -- grid*/
.grid {
    margin: 0 -15px;
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}
.grid-sizer,
.grid-item {
    width: 33.33333%;
}
.grid-item {
    float: left;
    position: relative;
    padding: 4px;
    .overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: fade(@white,0%);
    }
    .album-cover{
        position: relative;
        &.size0{height: 550px;}
        &.size1{height: 330px;}
        &.size2{height: 410px;}
        &.size3{height: 390px;}
        &.size4{height: 480px;}
        &.size5{height: 340px;}
        &.size6{height: 480px;}
        img{
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center center;
        }
    }
    .infowrapper{
        position: absolute;
        z-index: 20;
        top: 50%;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
        text-align: center;
        padding: 0 25px;
        pointer-events: none;
        h3{
            color: @white;
            transform: translate(0,-50%);
        }
    }
    .infowrapper{
        transform: scale(0);
        transition: all 300ms;
        pointer-events: none;
    }
    &:hover, &:focus{
        .infowrapper{
            transform: scale(1);
        }
        .overlay{
            background-color: fade(@geel,60%);
        }
    }
}

/* Note: Section producten */
.ui-group {
    clear: both;
    padding-bottom: 10px;

    h5 {
        float: left;
        padding-right: 20px;
    }
}

.slider-for {
    .slick-slide {
        height: 430px;
        background-color: fade(@grey, 10%);

        img {
            object-fit: contain;
            width: 100%;
            height: 100%;
        }
    }
}

.slider-nav {
    .slick-slide {
        .slickimgholder {
            margin: 0 10px;
            padding: 1em;
            height: 110px;
            border: 1px solid fade(@grey, 20%);

            img {
                object-fit: contain;
                width: 100%;
                height: 100%;
            }
        }

        &.slick-current {
            .slickimgholder {
                border: 1px solid fade(@grey, 100%);
            }
        }
    }
}



//Note: -- Margins
.mt100 {margin-top: 100px !important;}
.mt90 {margin-top: 90px !important;}
.mt80 {margin-top: 80px !important;}
.mt70 {margin-top: 70px !important;}
.mt60 {margin-top: 60px !important;}
.mt50 {margin-top: 50px !important;}
.mt40 {margin-top: 40px !important;}
.mt30 {margin-top: 30px !important;}
.mt20 {margin-top: 20px !important;}
.mt10 {margin-top: 10px !important;}
.mt0 {margin-top: 0px !important;}
.mb100 {margin-bottom: 100px !important;}
.mb90 {margin-bottom: 90px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb0 {margin-bottom: 0px !important;}
.pt100 {padding-top: 100px !important;}
.pt90 {padding-top: 90px !important;}
.pt80 {padding-top: 80px !important;}
.pt70 {padding-top: 70px !important;}
.pt60 {padding-top: 60px !important;}
.pt50 {padding-top: 50px !important;}
.pt40 {padding-top: 40px !important;}
.pt30 {padding-top: 30px !important;}
.pt20 {padding-top: 20px !important;}
.pt10 {padding-top: 10px !important;}
.pt0 {padding-top: 0px !important;}
.pb100 {padding-bottom: 100px !important;}
.pb90 {padding-bottom: 90px !important;}
.pb80 {padding-bottom: 80px !important;}
.pb70 {padding-bottom: 70px !important;}
.pb60 {padding-bottom: 60px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb0 {padding-bottom: 0px !important;}