/* (mobile, 768px and down) */
@media (max-width: 767px) { 
/* -------------------- NAVIGATIE -------------------- */
        
.navbarstoteler{
    padding: 15px;}    
    
.navbarstoteler .navbar-header{
    width: 100%;
    display: block;
    float: none;}
    
    .navbarstoteler .navbar-toggle{
        position: relative;
        float: right;
        padding: 0px;
        margin: 0px;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 4px;}
    
        .navbuttontxt, .hamburger{
            display: inline-block;}
    
    .navbarstoteler .collapse{
        text-align: center;
        width: 100%;
        margin: 0px;
        padding: 0px;}
    
    .navbarstoteler ul.nav, .navbarstoteler .navbar-nav{
        width: 100%;
        text-align: center;}
    
    .navbarstoteler .collapsing{width: 100%; padding:0px; margin:0px;}
    
    .navbar-toggle .icon-bar{}
    
    a.navbar-brand{
        width: 100%;
        height: 122px;
        display: block;}
    
        a.navbar-brand img{
            padding:0px;
            margin:0px auto;
            max-width: 100%!important;}
    
    .navbarstoteler .navbar-collapse{
        display: none!important;
        flex: none;}
    
    .navbar-nav .open .dropdown-menu{
        text-align: center;}
    
    .navbarstoteler ul.nav li a{
        text-shadow: 0px 2px 1px rgba(0, 0, 0, 0);
        padding: 20px 0px;
        color:#707173;}
        
    .navbarstoteler ul.nav li + li{
        border-top:rgba(0,0,0,0.05) 1px solid;
        padding-left: 0px;    }
    
    .navbarstoteler ul.nav li ul li + li{
        border-top:#cbd18a 0px solid;
        padding-left: 0px;    }
    
    .navbarstoteler .collapsing{
        display: block!important;}
    
    .navbarstoteler .navbar-collapse.in{
        display: block!important;}
    
.flel{
    left: 50%;
    position: relative;}
    
.hdrcontent {
    width: 100%;}    
    
    
/* -------------------- HEADER  --------------------*/    
header.hdrst{
    background: rgba(185,200,23,1);
    background: -moz-linear-gradient(180deg, rgba(245,245,245,1) 15%, rgba(185,200,23,1) 75%, rgba(138,165,0,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(245,245,245,1) 15%,rgba(185,200,23,1) 75%,rgba(138,165,0,1) 100%);
    background: linear-gradient(180deg, rgba(245,245,245,1) 15%,rgba(185,200,23,1) 75%,rgba(138,165,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#8aa500',GradientType=1 );}
    
    .vvp header.hdrst{
        background: rgba(245,245,245,1);}
    
    .hdrcontent h1{
        font-size: 3em!important;}
    
    .hdrcontent span{
        font-size: 2em;}
        
    .hdrcontent a.leesmeer{
        display: inline-block;
        padding: 8px 20px;
        font-size: 1.4em;}
    
    
/* -------------------- MAIN --------------------*/
.maincontent{
    width:calc(100%);
    padding: 30px;}
    
.homemain{
    width:calc(100%);
    padding: 30px;}
    
    main .mobielgrad{
        position: relative;
        display: block;
        height: 100%;
        width: 100%;
        -webkit-transform:skewY(-3deg);
            -ms-transform:skewY(-3deg);
                transform:skewY(-3deg);}
    
    main .gradient{
        position: absolute;
        background: -moz-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
        background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5e5e5e",endColorstr="#5e5e5e",GradientType=0);}
    
    main img.hmmnimg{
        position: relative;
        display: block;
        bottom:0%; 
        right: 0px;
        margin-bottom: -50px;
        width: 100%;
        height: auto;
        z-index: 0;
        overflow: hidden;
        -webkit-transform:translate(0px, 0px) skewY(-0deg);
            -ms-transform:translate(0px, 0px) skewY(-0deg);
                transform:translate(0px, 0px) skewY(-0deg);}
    
/* -------------------- BLOKKEN -------------------- */
.blokken{
    margin-top: -15vw;
    margin-left: 2.5vw;
    margin-right: 2.5vw;}

    a.blok{ 
        width:calc(100% / 2 - 4vw);
        height: 40vw;
        margin:2vw 2vw;}

        a.blok img{
            width: auto;
            height: 100%;}
    
    
/* -------------------- MAIN --------------------*/    
footer {
    background: #f6f6f6;
    padding: 30px;}

    footer ul li{
        display: block;}

        footer ul li + li{
            margin-top:5px;}
    
}