/* (mobile, 768px and down) */
@media (max-width: 767px) { 
    
    img.cover, img.contain{
        min-height: 300px;
        display: block;
        position: relative;}    
    
    
/* -------------------- NAV --------------------*/
.navwrapper{
    padding: 55px 30px;}   
    
.navbar-toggle .kmnav{
        width: 70vw;}

    .navbar-toggle .navheader{
        margin-right: 70vw;}
    
.hamburgerwrapper {
    margin-top:80px;}
    

/* -------------------- SLIDER --------------------*/  
.slideroverlay {
    padding: 30px;
    grid-template-columns: 1fr;
    grid-gap: 30px;
    grid-template-areas:
        "logo"
        "cta"
        "openingstijden";}    
    

/* -------------------- OPENINGSTIJDEN --------------------*/  
.otcont ul li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
    
    .otcont h3 {
        text-align: center;}

    .otcont ul li span {
        min-width: auto;}
    
        .otcont ul li ul li + li {
            padding-left: 15px;
            margin-left: 15px;}
    
    
/* -------------------- BLOKKEN --------------------*/  
.blokken {
    padding: 0 30px 60px;
    grid-template-columns: 1fr;
    grid-gap: 30px;}    
   
    
/* -------------------- MAIN --------------------*/  
.main-cont{
    flex-direction: column;
    padding: 0 30px 60px;}
    
    .main-cont .kolom1, .main-cont .kolom2 {
        width:100%;} 
    
    .main-cont .kolom1{
        margin-bottom: 30px;}
    
        .main-cont .kolom1 h1{
            margin-bottom: 15px;} 

    .vvp .mainwrapper{
        padding: 30px;}
    
    .kolommen > div {
        width: 100%;}

    
    
/* -------------------- FOOTER --------------------*/  
.ftr-cont {
    justify-content: center;
    align-items: center;
    flex-direction: column;}    
    
     footer ul {
         justify-content: center;
         align-content: center;
         text-align: center;
        flex-direction: column;}   
    
}