html, body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Open Sans', sans-serif;
    background: #F5F5F5;
    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;
    background-size: cover;                                                                                     
    -o-background-size: cover;}

.wrapper{   
    display: flex;
    -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;
    flex-wrap: wrap;
    overflow: hidden;}

    .flex{
        display: -webkit-box;   
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;}

.leesmeer{
    border-radius: 5px;
    display: block;
    color: #fff;
    text-transform: uppercase;
    align-self: flex-start;
    padding: 15px 25px;
    background: #264C59;}

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


    .leesmeer:hover{
        background: #f58220;
        text-decoration: none;
        color: #264c59;}

    .leesmeer i, .leesmeer span{
        font-size: 1.2em;
        margin-left: 2.5vw;
        vertical-align: middle;
        color:#f58220;}

    .leesmeer:hover i, .leesmeer:hover span{
        color: #264c59;}

/* -------------------- NAVIGATIE -------------------- */
nav.navbarreus{
    z-index: 20;
    width: 100%;
    position: absolute;
    padding: 2.5vw 2.5vw;
    display: flex;
    justify-content: space-between;
    height: auto;}

        nav.navbarreus.navscroll .lw{}

        nav.navbarreus.navscroll .lz{
            display: none;}

        nav.navbarreus.navscrolled .lw{
            display: none;}

        nav.navbarreus.navscrolled .lz{
            filter: none;}

    nav.navbarreus.navscrolled{
        padding: 15px;
        top:0;
        box-shadow: 0 0 30px rgba(0,0,0,0.3);
        position: fixed;
        animation-name: fadeIn;
        -webkit-animation-name: fadeIn;
        animation-duration: .5s;
        -webkit-animation-duration: .5s;
        animation-timing-function: ease;
        -webkit-animation-timing-function: ease;
         animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        background: #FFF;}

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

        @-webkit-keyframes fadeIn {
               0%   { transform: translateY(-100%);}
          100% { transform: translateY(0%); }
        }

nav.navbarreus ul{
    height: auto;}

    nav.navbarreus a{
        font-weight:600;
        text-transform: uppercase;
        padding: 1.5vw 1.5vw;
        color:#264C59;}

    nav.navbarreus li.nav-selected > a{
        color:#F58220;}

    nav.navbarreus .navbar-nav{
        float: right;
        display: inline-block;
        vertical-align: top;
        width: auto;
        margin: 0px auto;}

    nav.navbarreus .navbar-collapse {
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;}

    nav.navbarreus .navbar-brand{
        padding: 0px;
        position: absolute;}

        nav.navbarreus .navbar-brand img{
            width: auto;
            -webkit-filter: drop-shadow( 0px 2px 6px rgba(0, 0, 0, .5));
            filter: drop-shadow( 0px 2px 6px rgba(0, 0, 0, .5));
            padding: 0px;
            margin: 0px;
            height: 50px;}

nav.navbarreus .navbar-header{
    display: flex;
    flex: 1;
    align-items: center;}

.navbarreus li a:focus, .navbarreus li a:hover {
    text-decoration: none;
    color:#F58220;
    background-color: rgba(0,0,0,0)!important;}

/**/

.navbarreus li a:focus, .navbarreus li a:hover {
    text-decoration: none;
    color:#F58220;
    background-color: rgba(0,0,0,0)!important;}

div.subnavbarreus{
    text-align: center;
    background: #F58220}

    div.subnavbarreus ul{
        height: auto;}

    div.subnavbarreus a{
        font-weight: 400;
        padding:20px 1.9vw;
        color: #FFF}

    div.subnavbarreus .navbar-nav{
        float: none;
        display: inline-block;
        vertical-align: top;
        width: auto;
        margin: 0px auto;}

.subnavbarreus li a:focus, .subnavbarreus li a:hover {
    text-decoration: none;
    color:#fff;
    background-color:#FFF!important}

/**/

.navbar-right .dropdown-menu{
    right: 50%;
    left: auto;
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);}

.navbarreus .dropdown-menu{
    text-align: center;}

    .navbarreus ul.dropdown-menu {
        height: auto;}

    .navbarreus .open .dropdown-menu > li > a{
        font-size:1em;
        padding: 10px;}

        .navbarreus .open .dropdown-menu > li > a:hover{
            color:#000;}

        .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{
            background: none;}

.navbar-nav>li>.dropdown-menu{
    margin-top:0px;
    border-radius: 5px}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: rgba(0,0,0,0);}

nav.navbarreus .navbar-nav .dropdown > a:after {
    display: block;
    position: absolute;
    text-transform: none;
    font-family: 'Material Icons';
    top: 50%;
    transform: translateY(-50%);
    right:0px;
    font-size: 1.2em;
    content: 'keyboard_arrow_down';}

nav.navbarreus a.dropdown-toggle{
    margin-right: 2.5vw;
    padding-right: 20px!important;}

ul.dropdown-menu li.open ul.dropdown-menu{
    position: relative;
    width: 100%;
    display: block;}

    ul.dropdown-menu li.open ul.dropdown-menu li{
        width: 100%;}

        ul.dropdown-menu li.open ul.dropdown-menu li a{
            background: #4b5c68;
            color: #FFF;
            width: 100%;}

.dropdown-menu{
    background: none;
    -webkit-box-shadow: 0px 0px rgba(0,0,0,0);
            box-shadow: 0px 0px rgba(0,0,0,0);
    padding:0px 0px;
    margin:0px 0px;
    border-radius: 5px;    
    font-size: 1em;
    min-width:100px!important;
    border:0px;}

    .navbar-nav .open .dropdown-menu{
        box-shadow: 0 0 30px rgba(0,0,0,0.1);
        background: #FFF;}
    
        .navbar-nav .open .dropdown-menu > li > a{
            text-align: center;
            padding:10px 15px;
            color:#264c59;}

            .navbar-nav .open .dropdown-menu > li > a:hover{
                color:#F58220;}

ul > li > ul > li.dropdown-menu{
    background: red;
    position: relative;
    display: block;}


/* -------------------- NAV HAMBURGER ICON ANIMATION -------------------- */
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover{
    background-color: transparent;}

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

        .navbar-toggle div.hamburger span.icon-bar {
            background: #FFF;
            box-shadow: 0 0 2px rgba(0,0,0,0.9);
            -webkit-transition: all 0.15s;
            -o-transition: all 0.15s;
            transition: all 0.15s;}

            .navscrolled .navbar-toggle div.hamburger span.icon-bar {
                background: #000;
                box-shadow: 0 0 0 rgba(0,0,0,0);}

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

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

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

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

        .navbar-toggle.collapsed span:nth-child(2) {
            opacity: 1;}


/* -------------------- HEADER -------------------- */
.home header{
    display: flex;
    position: relative;
    z-index: 15;
    flex-direction: column;
    width: calc(50% - 2.5vw);
    min-height: 100vh;}

.vvp header{
    display: flex;
    position: relative;
    z-index: 15;
    margin-bottom: 5vw;
    flex-direction: column;
    width: calc(50%);}

.headerbtns{
    margin: 5vw 10vw 0 5vw;;
    display: flex;
    flex-direction: column;}


/* -------------------- SLIDER -------------------- */
#slider{
    background: #264C59;
    position: relative;
    width: 100%;
    z-index: 0;
    display: block;}

    .home #slider{
        flex:1;
        width: 100%;}

    .vvp #slider{
        flex:1;
        width: 100%;}


    .ccm-image-slider-container{
        overflow: visible;
        display: block;
        position: relative;
        height: 100%;}

        .ccm-image-slider, .ccm-image-slider-inner, .rslides, .rslides > li{
            position: relative;
            display: flex!important;
            width: 100.2%;
            height: 100.2%;
            margin: -0.1%;}

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

        
        ul.rslides > li > img{
            left: 50% !important;
            margin-right: -50% !important;
            position: absolute;
            top: 50% !important;
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%)!important;
            transform: translate(-50%, -50%) !important;
            width: 100%;
            opacity: 0.85;
            height: 100%;
            z-index: 0;
            background-size: cover;
            background-position: center;}

    .slidercontent{
        border-radius: 15px 0 0 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* background: rgba(38,76,89,0.9); */
        background: rgba(245,130,32,0.9);
        text-align: left;
        /* transform: translateY(0%); */
        padding: 2.5vw;
        margin-left: auto;
        margin-top: auto;
        width: 60%;
        height: auto;
        z-index: 20;}

            .vvp .slidercontent {
                margin-left: 10vw;
                border-radius: 5px;
                background: rgba(245,130,32,0.9);
                transform: translateY(calc(-100% + 5vw));
                width: 50%;}

        .slidercontent span.title{
            position: relative;
            font-size: 2em;
            text-transform: uppercase;
            font-weight: 700;
            line-height: 1.1em;
            color:#FFF;
            text-shadow: none;
            padding: 0px;
            z-index: 5;}

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

        .slidercontent span{
            position: relative;
            font-size: calc(11px - 1.65vw);
            text-shadow: 1px 1px rgba(0,0,0,0.75);
            font-weight: 400;
            padding: 12px 25px;
            border-radius:5px;
            color: #FFF;
            z-index:-1;}

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

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

                        a.slider-button{
                            font-size: 1.1em;
                            padding: 10px 50px 10px 20px;
                            color:#FFF;
                            position: relative;
                            display: inline-block;
                            border-radius: 5px;
                            background:#264c59;}

                            a.slider-button:hover{
                                background: #264c59;
                                color: #FFF;
                                text-decoration: none;}

                            a.slider-button:before{
                                position: absolute;
                                right: 15px;
                                font-size: 16px;
                                font-family: 'Material Icons';
                                content: 'arrow_forward';}

                        .slider-button .material-icons{
                            vertical-align: middle; font-size: 1.2em;}

        .slidercontrol{}

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


/* -------------------- SLIDERNAV -------------------- */
.ccm-image-slider-inner .prev, .ccm-image-slider-inner .next, .rslides_nav{
        background: none;}
    
    .rslides_nav{
        top:50%!important;
        margin-top: 0px!important;
        transform: translateY(-50%);
        opacity: 1!important;}

    .ccm-image-slider-inner .next:after, .ccm-image-slider-inner .prev:after{
        font-family: 'Material Icons';
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        display: block;
        font-size: 3em;
        opacity: 1;
        background: none;
        color: #FFF;
        text-decoration: none;}
    
        .ccm-image-slider-inner .next:after{
            right:10px;
            opacity: 1;
            content:'\e315';}

        .ccm-image-slider-inner .prev:after{
            left:10px;
            opacity: 1;
            content:'\e314';}

            .ccm-image-slider-inner .next:hover:after{
                opacity: 1;
                color: #000;}

            .ccm-image-slider-inner .prev:hover:after{
                opacity: 1;
                color: #000;}



/* -------------------- MAIN -------------------- */
.main{
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: auto;
    width: calc(50% - 2.5vw);}

        .main:before{
            content: '';
            position: absolute;
            left: -10vw;
            top: 20vw;
            background: #264c59;
            height: calc(100% - 20vw);
            width: calc(100% + 10vw);
/*            background:linear-gradient(180deg, rgba(91,35,14,0.7) 0%, rgba(0,0,0,0) 30%), url(../images/papier.jpg);*/
            background-size:cover}

           .vvp .main:before{
                left: -45vw;
                width: calc(100% + 40vw);}

        .vvp .main:before{
            height: calc(100% - 15vw);}

    .mhintro{
        background: #FFF;
        padding: 5vw;
        position: relative;
        margin: 10vw 5vw 0vw 5vw;}

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

        .vvp .mhintro {
            display: flex;
            flex-direction: column;
            margin: 10vw 10vw 0vw -5vw;
            padding: 5vw 5vw 5vw 10vw;}

.mhquote{
    width: 70%;
    margin: 0 10vw 0 0vw;
    padding: 5vw;
    flex: 1;
    display: flex;
    align-self: flex-end;
    align-items: center;
    text-align: center;
    position: relative;}

    .mhquote h3{
        position: relative;
        color: #FFF;
        font-weight: 900;
        line-height: 1em;
        text-transform: uppercase;}


    .mhquote h3:before, .mhquote h3:after{
        position: absolute;
        width: 25px;
        height: 35px;
        content: '';
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;}

        .mhquote h3:before{
            top:-10px;
            left: -30px;
            background-image: url('../images/quote-sluit.svg');}

        .mhquote h3:after{
            bottom:-10px;
            right: -30px;        
            background-image: url('../images/quote-sluit.svg');}


/* -------------------- EXTRA INFO -------------------- */
.extrainfo{
    margin: 5vw;
    width: 100%;
    background: #FFF;
    padding: 5vw;}

.eicontainer{
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    margin: 0px auto;}

    .eiimg{
        order: 1;
        align-content: center;
        align-items: center;
        justify-content: center;
        display: flex;
        position: relative;
        width: 35%;}

        .eiimg img{
            max-width: 100%;
            height: auto;}

        .vvp .eiimg{
            margin-left: 5vw;}

            .vvp .eiimg img{
                position: absolute;
                top:0;
                left: 0;
                width: 100%;
                height: 100%;
                max-height: 50vh;
                background-size: cover;
                background-position: center;}

    .eicnt{
        order: 2;
        width: 60%;}

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

    .vvp .eicnt{
        order: 1;
        flex: 1;
/*        width: 60%;*/}

.eimain{
    order: 3;}

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

    .eiimg + .eimain{
        margin-top:30px;}


/* -------------------- BLOKKEN -------------------- */

* + .blokken{
    margin-top: 30px;}

.blokken{
    flex-direction:row;
    flex-wrap: wrap;
    margin: 0 -3vw;
    display: flex;}

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

    .blok{
        position: relative;
        margin: 3vw;
        display: flex;
        flex-direction: column;
        width:calc(100% / 3 - 6vw);}

        .blok h2{
            text-transform: none;
            font-weight: 700;
            font-size: 1.2em;
            color: #f58220;}    

        .blok img{
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            opacity: 1;
            height: 100%;
            z-index: 0;
            background-size: cover;
            background-position: center;}    

        .blok a.leesmeer{
            align-self: flex-start;}

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


/* -------------------- NIEUWSBLOKKEN -------------------- */
.nieuws .blok{
    display: flex;
    flex-direction: column;
    background: #FFF;
    box-shadow: 0 0 30px rgba(0,0,0,0.2);}

    .nieuws .blok img{
        object-fit: cover;
        position: relative;
        height: 120px;}

    .nieuwscontent{
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 30px;}


    .nieuwscontent p{
        flex: 1;}

       .blokken.nieuws > *:last-child{
            margin-bottom: 3vw;}


/* -------------------- BREADCRUMBS -------------------- */
.breadcrumb{
    font-weight: 300;
    font-size: 12px;
    margin-left: 0px;
    padding-left: 0px;
    text-transform: uppercase;
    background: none;}


/* -------------------- FOOTER -------------------- */
footer{
    display: flex;
    padding: 5vw;
    color: #FFF;
    align-content: center;
    justify-content: center;
    background: #264c59;}

    footer ul{
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        list-style: none;}

    footer ul li{
        color: #FFF;
        padding: 10px 15px;
        font-weight: 400;}

        footer ul li i.material-icons{
            color: #f58220;
            margin-right: 10px;
            vertical-align: sub;
            font-size: 1.2em;}

        footer ul li a{
            color: #FFFFFF;}

            footer ul li a:hover{
                color: #f58220;}

        footer ul li img{
            height: 20px;
            margin: 0 10px;
            width: auto;}

.ccm-block-express-form{
    width: 100%!important;}

/* -------------------- BACK TO TOP -------------------- */
#back-top{
    background:rgba(255,255,255,0.9);
    display: block;
    position: fixed;
    right:15px;
    padding: 5px;
    bottom: 15px;
    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{}

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

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

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

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

.row-eq-height {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;}


.oranje{color: #f58220;}
.blauw{color: #264c59;}
.wit{color: #FFF;}
.zwart{color: #000;}

/* -------------------- ANIMATIE -------------------- */
.leesmeer, .leesmeer i, .leesmeer span, .btn, .slider-button{
    -webkit-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition:all 0.25s ease-in-out;}


/* -------------------- VORMFACTOR -------------------- */
.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;}


/* -------------------- OVERIG -------------------- */
.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;}