/* (mobile, 768px and down) */
@media (max-width: 767px) { 
    
.wrapper{
    padding: 0;}    
    
/* -------------------- NAV --------------------*/
nav.navbarreus{
    flex-wrap: wrap;}    
    
nav.navbarreus .navbar-header{
    margin: 0 5px 10px 5px;
    height: auto;}

nav.navbarreus .navbar-collapse{
    background: #FFF;
    border-radius: 5px;
    width: 100%;}
    
nav.navbarreus .navbar-brand{
    padding: 0px;
    left: 0px;
    top: 0px;
    width: 100%;
    height: auto;
    z-index: 0;
    position: relative;}
    
    nav.navbarreus .navbar-brand img{
    display: block;
    height: 50px;
    margin:0;}
    
    nav.navbarreus button{z-index: 10;}
    
nav.navbarreus ul{
    height:auto;}
    
    nav.navbarreus a{
        padding:15px;}
    
nav.navbarreus .navbar-nav, div.subnavbarreus .navbar-nav  {
    width: 100%;}
    
div.subnavbarreus a{
    font-weight: 400;
    padding:15px;
    color: #FFF}
    
 .navbar-toggle {
    padding: 15px 25px 15px 25p;
    margin-right: 0px;}
    
.navbar-collapse.in {
    overflow-y: visible;}

    .navbar-nav .open .dropdown-menu{
        box-shadow: none;
    }
    
/* -------------------- SLIDER  --------------------*/    
.vvp .ccm-image-slider-container{
    min-height: 150px;
    height: 100%;}

    .vvp .slidercontent{  
        margin-left: 5vw;
        transform: translateY(calc(0% + 10vw));
        margin-top: auto;
        width: calc(100% - 10vw);}
    
.ccm-image-slider-container{
    }

    .gradient-grey{
        width: 100%;}

    .slidercontent{
        padding: 30px;
        width: 80%;}
    
        .slidercontent p{
            width: 100%;
            line-height: 1.4em;} 
    
    .slider-text p{
          -webkit-mask: -webkit-gradient(linear, center top, center bottom, 
              color-stop(0.3, rgba(0, 0, 0, 1)), 
              color-stop(0.6, rgba(0, 0, 0, 0.05)),
              color-stop(1, rgba(0, 0, 0, 0.02)));}
    
       .slidercontent span.title{
            display: block;
            margin-bottom: 15px;
            font-size: 1.4em;
            line-height: 1.1em;}
    
        .vvp .slidercontent span.title{
            font-size: 1.8em;
            margin-bottom: 0px;}

   
    
    
/* -------------------- MAIN HOME CONTENT -------------------- */
.home header, .vvp header{
    width: 100%;}
    
    .vvp header{
        height: 40vh;}
    
.headerbtns {
    align-items: center;
    justify-content: center;
    margin: 5vw;
    width: calc(100% - 10vw);
    flex-direction: row;}

    .headerbtns .leesmeer{
        margin: 5px;}

.main{
    width: 100%;}   
    
.vvp .main:before {
    left: 0;
    top:-5vw;
    width: calc(100%);}
    
.mhintro {
    margin: 0vw 5vw 0vw 5vw;}

.vvp .mhintro {
    padding: 10vw;
    margin: 10vw 5vw 0vw 5vw;}
    
    
.eicontainer {
    width: 100%;
    flex-wrap: wrap;}

    .eiimg {
        margin-top: 5vw;
        width: 100%;
        order: 2;}    
    
        .eiimg img {
            max-width: 50%;}
    
    .vvp .eiimg{
        margin-left: 0;
        height:50vw;}
        
        .vvp .eiimg img{
            max-width: none;}
    
    .eicnt {
        order: 1;
        width: 100%;}   
    
    .vvp .eicnt {
        order: 1;
        width: 100%;}
    
.mhquote {
    padding: 15vw 10vw;
    width: calc(100% - 20vw);
    margin: 0 10vw 0 10vw;}   
    
.extrainfo {
    padding: 10vw;}
        
.vvp .extrainfo {
    padding: 10vw;}
    
.blok{
    margin: 3vw 3vw 10vw 3vw;
    width:calc(100% - 6vw);}  
    
    .blok img{
        position: relative;
        height: 30vw;}     
    
/* -------------------- BACK TO TOP -------------------- */
#back-top{
    padding: 10px;}

    #back-top button .material-icons{
        padding:10px;}

    .leesmeer, .btn{
        font-size: 0.9em;
        padding: 15px 15px;
    }    
 
    
.leesmeer i, .leesmeer span {
    font-size: 1;
    margin-left: 5px;}
    
}