html, body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #FFFFFF;
    height:100%;
    padding:0px;
    margin:0px;}

body{
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;}

    .wrapper{
        background-image:url(../images/marmer-licht.jpg);
        background-repeat: repeat;
        background-position: center;
        background-size:  auto;
        width: calc(100% - 54px);
        height: auto;
        padding: 0px;
        -webkit-flex-grow: 1;
        -webkit-flex-shrink: 0;
        -webkit-flex-basis: auto;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
        position: relative;}


header{
    position: relative;}

.btn-primary {
    color: #fff;
    background-color: #6a6f58;
    border-color: #6a6f58;}

.leesmeer{
    border: 2px solid #6A6F58;
    background:#6A6F58;
    color: #FFF;
    border-radius: 100px;
    text-decoration: none;
    display: table;
    font-size: 1.2em;
    margin-bottom: 10px;
    padding: 15px 30px;}

        .leesmeer.invert{
            border: 2px solid #6A6F58;
            background:#FFF;
            color: #000;}

    .leesmeer:hover{
        border: 2px solid #000;
        background:#000;
        color: #FFF;}

    .leesmeer span.material-icons{
        margin-right: 10px;
        font-family: 'Material Icons';
        vertical-align: middle;
        text-transform: none;
        font-size: 1.2em;}

img.cover{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%!important;
    margin-bottom: 30px;
    object-fit: cover;}

img.contain{
    position: relative;
    top:0;
    left: 0;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    object-position: top;
    object-fit: contain;}

/* -------------------- NAVIGATIE -------------------- */
nav{
    position: fixed;
    height: 100%;
    right: 0;
    z-index: 40;}

    .kmnav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 20;
        top: 0;
        left: auto;
        right: 0;
        background: #000;
        overflow-x: hidden;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;}

        .navwrapper{
            padding: 55px;}

        .kmnav a {
            padding: 5px 0;
            text-decoration: none;
            font-size: 25px;
            color: #FFF;
            display: block;
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;}

            .kmnav a:hover{
                color: #6A6F58;}

        .kmnav ul{
            list-style: none;
            padding: 0;
            margin: 0 0 30px 0;}

           .kmnav ul li::before {
                display: none; }


            .nav-selected, .nav-path-selected{
                color: #FFF;
                font-weight: 600;}

        .kmnav .closebtn {
            position: absolute;
            top: 0;
            left: 0;
            text-align: right;
            width: 100%;
            padding: 0.5vw 2.5vw;
            font-size: 36px;}

.kmnav fieldset{
    display: table;
    padding: 0vw;}

    .navsearchwrapper{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;}

        .kmnav fieldset input{
            width: 100%;
            padding: 15px 20px;
            border: 0px;}

            .kmnav fieldset button{
                background:#FFF;
                border: 0px;}

            .kmnav fieldset button i{
                vertical-align: middle;}


    #navOverlay{
        pointer-events: none;
        background: #000;
        left: 0;
        top: 0;
        display: block;
        position: fixed;
        z-index: 0;
        opacity: 0;
        width: 100%;
        height: 100vh;}

    .navheader{
        background: -moz-linear-gradient(90deg, rgba(0,0,0,0) 66%, rgba(0,0,0,1) 66%, rgba(0,0,0,1) 100%);
        background: -webkit-linear-gradient(90deg, rgba(0,0,0,0) 66%, rgba(0,0,0,1) 66%, rgba(0,0,0,1) 100%);
        background: linear-gradient(90deg, rgba(0,0,0,0) 66%, rgba(0,0,0,1) 66%, rgba(0,0,0,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        z-index: 0;}


.navcontainer{
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content:flex-end;}

        .navheader .logo{
            -webkit-box-flex:1;
                -ms-flex:1;
                    flex:1;}

            .navheader .logo img{
                opacity: 1;
                width: 250px;
                height: auto;}

.navheader{
    z-index: 100;
    width: 100px;
    right: -0px;
    left: auto;
    position: absolute;
    display: block;
    border-right: 30px solid #000;}

    .navheader.collapsed{
        margin-right: 0vw;}

    .navheader.navbar-toggle{
        pointer-events: none;}

        .navbel{
            -ms-flex-item-align: center;
                align-self: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            color: #FFF;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
            margin-right: 5vw;
            font-weight: 400;
            font-size: 1.2em;}

            .navbel i{
                margin-right: 10px;}

                .navbel a{
                    font-size: 1em;
                    text-decoration:none;
                    color: #FFF;
                    -webkit-box-pack: center;
                        -ms-flex-pack: center;
                            justify-content: center;}

                   .navbel a *{
                       vertical-align:text-bottom;}

                   .navbel a + a{
                       margin-left:15px;}

        .hamburgerwrapper{
            position: relative;
                align-self:flex-start;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            color: #FFF;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-pack:end;
                -ms-flex-pack:end;
                    justify-content:flex-end;
            margin-top: 10vh;
            font-weight: 700;
            font-size: 1.2em;}

            .hamburgerwrapper:before{
                background: url(../images/hbt.svg);
                width: 28px;
                height: 52px;
                top: 6px;
                right: 21px;
                background-size: cover;
                transform: translateY(-100%);
                display: block;
                position: absolute;
                content: '';}

            .hamburgerwrapper:after{
                background: url(../images/hbb.svg);
                width: 28px;
                height: 52px;
                bottom: 6px;
                right: 21px;
                background-size: cover;
                transform: translateY(100%);
                display: block;
                position: absolute;
                content: '';}

                .hamburgerwrapper a *{
                    vertical-align: middle;}

            .hamburger{
                background: #000;
                border-radius: 100px 0 0 100px;
                padding: 23px 20px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                margin:0;}

                .hamburger .hline{
                    display: block;
                    width: 28px;
                    height: 2px;
                    border-radius: 10px;
                    background: #FFF;}

                    .hamburger .hline:nth-last-child(2){
                        margin: 5px 0px;}

.hamburger:after{
    z-index: 100;
    content: 'Navigatie';
    font-size: 0.64em;
    color: #6a6f58;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    display: block;
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);}


/* -------------------- NAVSCROLLED -------------------- */
.navscrolled .navcontainer{}

.navheader.navscrolled{}


/* -------------------- NAV HAMBURGER ICON ANIMATION -------------------- */
#navbtn{
    -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;}

.navbar-toggle{
    border: 0;
    margin: 0;
    padding: 0;}

.navbar-toggle:focus,
.navbar-toggle:hover{
    background-color: transparent;}

    .navbar-toggle .hamburger {
        border: none;}

        .hamburgerwrapper .hamburger span{
            background: #FFF;
            display: block;
            width: 22px;
            height: 2px;
            border-radius: 1px;
            -webkit-transition: all .6s!important;
            -o-transition: all .6s!important;
            transition: all .6s!important;}

            .navbar-toggle .hamburgerwrapper .hamburger span:nth-child(1) {
                -webkit-transform: rotate(45deg);
                    -ms-transform: rotate(45deg);
                        transform: rotate(45deg);
                -webkit-transform-origin: 22% 10%;
                    -ms-transform-origin: 22% 10%;
                        transform-origin: 22% 10%;}

            .navbar-toggle .hamburgerwrapper .hamburger span:nth-child(2) {
                margin: 0;
                opacity: 0;}

            .navbar-toggle .hamburgerwrapper .hamburger span:nth-child(3) {
                -webkit-transform: rotate(-45deg);
                    -ms-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                -webkit-transform-origin: 22% 90%;
                    -ms-transform-origin: 22% 90%;
                        transform-origin: 22% 90%;}

            .collapsed .hamburgerwrapper .hamburger span:nth-child(1),
            .collapsed .hamburgerwrapper .hamburger span:nth-child(3) {
                -webkit-transform: rotate(0);
                    -ms-transform: rotate(0);
                        transform: rotate(0);}

            .hamburgerwrapper span:nth-child(2) {
                margin: 5px 0;
                opacity: 1;}

#jsNav{
    position:fixed;
    width: 0;}

   .collapsed{
        width: 0;}

    .navbar-toggle{
        width: auto!important;
        display: block;}

    .navbar-toggle .kmnav{
        width: 40vw;}

    .navbar-toggle .navheader{
        pointer-events: none;
        margin-right: 40vw;}


/* -------------------- NAV PUSH -------------------- */
#main{
    margin-left: 0px;
    -webkit-transition: margin-left .5s;
    -o-transition: margin-left .5s;
    transition: margin-left .5s;}

#footer{
    -webkit-transition: margin-left .5s;
    -o-transition: margin-left .5s;
    transition: margin-left .5s;}



/* -------------------- HEADER -------------------- */
/*
.home header{
    background: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100vh;}
*/

    .home main .jarallax-img{
        opacity:0.85;}


/* -------------------- MODAL HELP SIDEBAR -------------------- */
.modal.help .modal-body {
    padding: 30px;}

    .modal-dialog {
        width: auto;
        display: table;}

   .modal.help .modal-content{
        border: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
        border-radius: 15px;
        -webkit-box-shadow: rgba(0,0,0,0);
                box-shadow: rgba(0,0,0,0);
        overflow: hidden;}

    .modal.help .modal-body{
        padding:0px;}

        .modal.help .modal-header{
            border: 0;
            background: #000;}

            .modal.help .modal-header .close {
                color: #FFF;
                opacity: 1;
                text-shadow: none;
                margin-top: 15px!important;}

            .modal.help .modal-title{
                color:#FFF;
                padding: 15px;}

            .btn-help{
                background:#FFF!important;
                position: fixed;
                bottom:90px;
                right:0px;
                height:50px;
                margin-top: -25px;
                border-radius: 10px 0 0 10px;
                z-index:30;
                width: 45px;
                -webkit-transition: width 0.3s; /* Safari */
                -o-transition: width 0.3s;
                transition: width 0.3s;
                outline: none;}

                    .btn-help:hover {
                        width: 250px;}

                .btn-help p{
                    margin: 0px;}

                    .btn-help p *{vertical-align: middle}

                    .btn-help i{
                        color: #000;
                        margin-right: 5px;}

            .modal.help .modal-open{
                overflow-y: visible;}

                .modal-backdrop{
                    background: #000;
                    opacity: 0;
                    opacity: 0.8;
                    z-index: 20;
                    pointer-events: none;
                    overflow: visible;}

                .modal-backdrop.in{
                    opacity: 0.8;}

            .modal.help .content{
                padding: 30px;}

                .modal.help .content > *:last-child{
                    margin-bottom: 0px;}

            .modal.help form{
                background: #000;
                padding: 30px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-line-pack: start;
                    align-content: flex-start;
                -webkit-box-align: start;
                    -ms-flex-align: start;
                        align-items: flex-start;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;}

            .modal.help form h3{
                margin: 0 0 5px 0;
                font-weight: 900;
                font-size: 1.2em;}

                .modal.help form .formrow{
                    width: 100%;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                            flex-direction: column;}

                    .modal.help form .formrow span.title{
                        font-weight: 700;}

                    .modal.help form .formrow input{
                        padding: 15px;
                        width: 100%;
                        border: 0;
                        background: #FFF;}

                .formrow + .formrow{
                    margin-top: 15px;}

                .modal.help form button.leesmeer{
                    margin-top: 15px;}


/* -------------------- MAIN HOME -------------------- */
.home main{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-bottom: 10vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;}

        .home main div[id*="jarallax-container"] {
            background: #000000;}

        .filter.jarallax-img{
            opacity:0.25;
            mix-blend-mode: luminosity;}

    .mc-wrapper{
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        z-index: 20;
        margin-bottom: 5vw;
        width: 80vw;}

        .mc-container{
            border-radius: 15px;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            background: #FFF;
            width: 80%;}

        .maincontent{
            z-index: 10;
            position: relative;
            padding: 5vw;
            width: 40vw;}

            .maincontent h1{
                font-weight: 900;
                font-size: 2em;
                margin-bottom: 15px;
                text-transform: uppercase;
                color: #FFF;}

                .maincontent > *:last-child{
                    margin-bottom: 0;}

    .mainimg{
        width: 100%;
        display: block;
        position: relative;
        border-radius: 0 0 15px 15px;
        overflow: hidden;
        height: 25vw;}

        .mainimg img{
            position: absolute;
            top: 0px;
            left: 0px;
            background-position: center;
            background-size: cover;
            width: 100%;
            height: 100%;}


/* -------------------- SLIDER -------------------- */
#slider{
    background: #000;
    position: relative;
    width: 100%;
    min-height: calc(100vh + 5vw);
    z-index: 0;
    display: flex;}

    .vvp #slider{
        min-height:300px;
        border-bottom:6px solid #6a6f58;
        z-index: 0;
        justify-content: center;
        align-items: center;}

    .ccm-image-slider-container{
        overflow: hidden;
        display: flex;
        height: 100%;
        width: 100%;
        z-index: -1;
        position: absolute;}

        .ccm-image-slider, .ccm-image-slider-inner, .rslides, .rslides > li{
            width: 100%;
            display: flex!important;
            justify-content: flex-start;
            height: auto;}

    ul.rslides{
        overflow: hidden;
        margin:0px;
        padding: 0px;
        list-style: none;}


        ul.rslides > li > img{
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: absolute;
            object-fit: cover;
            opacity: 0.85;}

            ul.rslides > li:after{
                content: '';
                background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
                background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
                background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
                width: 100%;
                height: 25%;
                bottom: 0;
                left: 0;
                position: absolute;
                opacity: 0.9;}

    .slidercontent{
        display: flex;
        max-width: 720px;
        text-align: center;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        width: 50%;
        height: auto;
        padding: 30px;
        align-self: flex-end;
        margin-bottom: 10vw;
        z-index: 20;}

        .slidercontent .title{
            position: relative;
            font-size: 2.7em;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            line-height: 1em;
            color:#FFF;
            text-shadow: none;
            padding: 0px;
            z-index: 5;}

        .slidercontent p{
            position: relative;
            font-size: 1em;
            color: #FFF;
            line-height: 1.6em;
            font-weight: 400;}

            .slider-text p, a.slider-button{
                margin:0;
                font-weight:300;
                padding:0px 0px;}

                    .slider-text p{
                        color: #FFF;}

            .slidercontent .leesmeer{
                border-color: #FFF;
                color: #000;
                background: #FFF;}

                .slidercontent .leesmeer:hover{
                    color: #fff;
                    background: none;}

        .slidercontrol{}

        .slidercontrol a{
            color:#FFF;
            text-shadow: none;}


/* -------------------- SLIDER OVERLAY -------------------- */
.slideroverlay{
    z-index: 10;
    max-width: 1280px;
    margin: 0 auto 5vw;
    position: relative;
    top: 0;
    width: 100%;
    padding: 45px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 60px;
    grid-template-rows: auto;
    grid-template-areas:
    "logo openingstijden"
    "cta openingstijden";
    align-items: flex-end;}

    .logo{
        order: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        z-index: 100;
        justify-content: center;
        align-content: center;
        align-items: center;
        grid-area: logo;}

        .logo a{
            width: 50%;
            justify-content: center;
            display: flex;}

             .vvp .logo a {
                width: 100%;}

            .logo img{
                margin: 10px;
                width: 100%;
                filter: drop-shadow(0 2px 3px rgba(0,0,0,0.9));
                height: auto;
                max-width: 250px;}

        .slogan{
            text-align: center;
            width: 100%;
            color: #FFF;
            margin-top: 15px;
            font-weight: 400;
            text-transform: uppercase;
            font-size: 1.5em;
            transform: rotate(-7deg);
            text-shadow: 0 1px 3px rgba(0,0,0,0.8);}

.cta{
    order: 2;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;}

    .cta-cont{
        grid-area: cta;
        display: flex;
        height: 100%;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        align-items: center;}

        .cta h1{
            font-weight: 800;
            text-align: center;
            margin-bottom: 30px;
            text-shadow:0 2px 3px rgba(0,0,0,0.9);
            text-transform: uppercase;
            font-size: calc(2em + 1.2vw);
            color: #FFF;}

        .cta .leesmeer{
            background: #6A6F58;
            border: #6A6F58;
            color: #FFF;}

    .openingstijden{
        order: 3;
        grid-area: openingstijden;
        display: flex;
        height: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
        flex-direction: column;}

        .otcont{
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            border-radius: 3px;
            border:6px solid #6a6f58;
            padding: 45px;
            background:url('../images/marmer-licht.jpg');
            background-size: cover; }

            .otcont h3{
                text-transform: uppercase;
                margin-bottom: 15px;
                font-size: 1.6em;}

            .otcont ul{
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                list-style: none;}

                .otcont ul li {
                    position: relative;
                    display: flex;}

                    .otcont > ul > li + li{
                        border-top: 1px solid rgba(0,0,0,0.1);
                        padding-top: 5px;
                        margin-top:5px;}

                       .otcont ul li::before {
                            display: none; }

                .otcont ul li span{
                    min-width: 150px;
                    font-weight: 600;
                    display: flex;}

                    .otcont > ul > li > ul{
                        justify-content: flex-end;
                        display: flex;
                        flex-direction: row;
                        flex: 1;}

                        .otcont ul li ul li{
                            font-size: 1em;
                            flex-direction: column;}

                        .otcont ul li ul li + li{
                            padding-left: 30px;
                            margin-left: 30px;}

                        .otcont ul li ul li + li:after{
                            position: absolute;
                            transform: translateY(-50%);
                            top:50%;
                            left: 0;
                            content:'-';}


/* -------------------- BLOKKEN -------------------- */
.blokken{
    max-width: 1280px;
    padding: 0 45px 90px;
    margin: -5vw auto 0;
    display: grid;
    flex-direction: row;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 45px;
    grid-template-rows: auto;
    position: relative;}

    .blok{
        box-shadow: 0 5px 25px rgba(0,0,0,0.4);
        text-decoration: none;
        border-radius: 3px;
        background: #000;
        color: #FFF;
        padding: 60px;
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;}

        .blok img{
            opacity: 0.7;
            object-fit: cover;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;}

            .blok span{
                color: #FFF;
                border:2px solid #6a6f58;
                border-radius: 100px;
                padding: 10px;
                margin-bottom:45px;
                text-align:center;
                position: relative;}

            .blok:hover span{
                background: #FFF;
                border:2px solid #FFF;
                color: #000;}


            .blok h2{
                color: #FFF;
                text-align: center;
                position: relative;}



/* -------------------- MAIN -------------------- */
.wrapper main{
}

    .main-cont{
        width: 100%;
        padding: 0 45px 90px;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        max-width: 1280px;
        margin: 0 auto;}

        .main-cont .kolom1{
            position: relative;
            width: 30%;}

        .main-cont .kolom2{
            position: relative;
            width: 65.5%;}

.vvp .mainwrapper .leesmeer{
    margin-bottom: 15px;
    align-self: flex-start;
}

    .vvp .mainwrapper{
        width: 100%;
        padding: 60px 45px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content:space-between;
        max-width: 1280px;
        margin: 0 auto;}

.vvp .kolom1{
    margin-bottom: 45px;}

.kolommen{
    width: auto;
    display: flex;
    flex-wrap: wrap;
    margin: -30px -30px 45px -30px;
    position: relative;}

    .kolommen > div{
        margin: 30px;
        display: flex;
        position: relative;
        flex-direction: column;
        min-width: 320px;
        flex:1 1 0;}

        .kolommen > div img{
            height: auto;
            max-width: 100%;}

.prijslijst{
    background: rgba(255,255,255,1);
    border:4px solid #6a6f58;
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 3px;}

.prijslijst h2{
    font-size: 1.5em;
    margin-bottom: 15px;}

    .prijslijst ul{
        width: 100%;
        padding: 0;
        margin: 0;
        flex:1 1 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        list-style: none;
        font-size: 1em;}

        .prijslijst ul li{
            width: 100%;
            font-weight: 700;
            display: flex;}

            .prijslijst ul li ul{
                align-items: flex-start;
                justify-content: flex-end;
                display: flex;}

                .prijslijst ul li ul li{
                    text-align: right;
                    font-weight: 400;
                    width: auto;
                    word-break: keep-all;
                    white-space: nowrap;
                    font-size: 1em;}

                    .prijslijst ul li:before{
                        display: none;}

        .prijslijst p{
            font-size: 1em;}

.pl-item + .pl-item{
    margin-top: 10px;
    padding-top: 10px;
    border-top:1px dotted rgba(0,0,0,0.1);}

.rondeafbeelding{
    margin: 0 auto 15px;}

    .rondeafbeelding img{
        width: 80%;
        height: auto;
        max-width:200px!important;
        border-radius: 500px;}



/* -------------------- PARALLAX -------------------- */
.jarallax {
    min-height: 300px;
    position: relative;
    z-index: 0;}

    .jarallax > .jarallax-img {
        position: absolute;
        -o-object-fit: cover;
           object-fit: cover;
        font-family: 'object-fit: cover;';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;}

        .jarablok{
            position: relative;
            height: 50vh;
            width: 50%;
            float: right;
            margin: 0 0 5vw 5vw;}

            .jarablok img{
                background-repeat: no-repeat;
                background-size: cover;}



.modal.modalfp {
  text-align: center;
  padding: 0!important;}

.modal.modalfp .modal-content{
    max-width: 600px;
    border-radius: 5px;
    overflow: hidden;
    flex-direction: column;
    padding: 0;
    border: 0;}

.modal.modalfp .modal-header{
    text-transform: uppercase;
    display: flex;
    justify-content:space-between;}


.modal.modalfp .modal-content > div{
    width: 100%;}

    .modal.modalfp .modal-body .close{
        position: absolute;
        right: 15px;
        top:15px;
        filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.2));
        opacity: 1;
        font-weight: 300;
        font-size: 2.5em;
        line-height:15px;
        color: #FFF;}

    .modal.modalfp .modal-body{
        padding: 0;}

    .modal.modalfp .modal-body > *:last-child{
        margin-bottom: 0;}

        .modal.modalfp .modal-body img{
            max-width: 600px;
            width: 100%;
            height: auto;
            margin: 0;}

        .modal.modalfp .modal-body img.logo{
            position: absolute;
            left: 50%;
            top:50%;
            width: 40%;
            height: auto;
            transform: translate(-50%,-50%);}

.modal-footer{
    padding: 30px;
    text-align: center;}

.modal-footer .leesmeer{
    background: #6a6f58;
    color: #FFF;
    display: inline-block;}

.modal-footer .leesmeer.invert{
    background: rgba(0,0,0,0);
    color: #6a6f58;}

.modal-footer h4{
    color: #6a6f58;
    font-size: 2em;}

.modal-footer h4 span{
    color: #000;
    font-weight: 900;}

.modal-footer p:last-of-type{
    margin-bottom: 15px;}

    .modal.modalfp:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -4px;}

        .modal.modalfp .modal-dialog {
          display: inline-block;
          text-align: left;
          vertical-align: middle;}


/* -------------------- FOOTER -------------------- */
footer{
    background:rgba(0,0,0,0.9);
    position: relative;
    padding: 30px;
    width: calc(100% - 54px);}

    .ftr-cont{
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        max-width: 1280px;
        margin: 0 auto;}

    .ftr-logo{
        margin:0 30px;}

        footer ul{
            margin: 0;
            color: #FFF;
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            padding: 0;}

            footer ul li{
                margin: 15px;
                padding: 0;}

footer a{
    color: #FFF;}


/* -------------------- BACK TO TOP -------------------- */
#back-top{
    background:rgba(0,0,0,0);
    display: block;
    position: fixed;
    right:6px;
    padding: 5px;
    bottom: 4px;
    border-radius: 4px;
    z-index: 50;}

#back-top a, #back-top button{
    display:block;
    padding:6px;
    border: 0px;
    border-radius: 4px;
    text-align: center;}

    #back-top a{
        color: #FFF;}

    #back-top button{
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;}

    #back-top button .material-icons{
        color: #FFF;
        border-radius: 4px;
        padding:6px;
        vertical-align: middle;}

#back-top i.material-icons{
    font-size:20px;}

#back-top img{
    width: 15px;
    height: auto;}

*>*:last-child{
    margin-bottom: 0;}

#jsNav *, a, .blok span{
    -webkit-transition: all 0.45s ease-in-out!important; -o-transition: all 0.45s ease-in-out!important; transition:all 0.45s ease-in-out!important;}

.vf{ position: absolute; bottom:-40px; left: 0px; right: 0px; margin:0px auto; text-align: center;}
.vf a{height:20px; width:100%; text-align:left; font-size:10px; color:#000000!important; text-decoration:none; text-align: center; display:inline-block; zoom: 1; filter: alpha(opacity=2); opacity: 0.1;}
.vf a:hover {filter: alpha(opacity=100); opacity: 1;}
.vf img{height:8px; width:80px;}

.clearfix:after{content:""; visibility:hidden; display:block; height:0; clear:both;}
.vcenter{display: -webkit-box; display: flex; display: -ms-flexbox; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}