/* (mobile, 768px and down) */
@media (max-width: 767px) { 
.wrapper{
    padding: 0;}    
    
 .textkolom-2 p{
    column-count: 1;
    column-gap: 0px;}   
    
.kolommen2{
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;}

    .kolommen2 > div{
        width: calc(100%);}

        .kolommen2 > div + div{
            margin-top: 30px;}

    
    
/* -------------------- NAV --------------------*/
nav.navbarvf .navbar-collapse{
    border-radius: 3px;
    box-shadow: 0px 15px 45px rgba(0,0,0,0.2);
    margin: 0 30px}    
    
nav.navbarvf .navbar-header{
    }
    
nav.navbarvf a.dropdown-toggle {
    padding-right: 15px!important;}  
    
    nav.navbarvf .navbar-brand{
        padding: 0px;
        left: 0px;
        top: 0px;
        width: 100%;
        z-index: 0;
        position: absolute;}

        nav.navbarvf .navbar-brand img{
        display: block;
        margin: 0px 0px 0px 15px;}

        nav.navbarvf button{z-index: 10;}

    nav.navbarvf ul{
        height:auto;}

        nav.navbarvf a{
            padding:15px;
            color:#000;}

            .navbarvf li a:focus, .navbarvf li a:hover {
                text-decoration: none;
                font-weight: 700;
                color: #000;}
    
    nav.navbarvf .navbar-nav{
        background: #FFF;
        margin: 0;
        width: 100%;}
    
     .navbar-toggle {
        padding: 15px 25px 15px 25p;
        margin: 30px;}

    .navbar-nav .open .dropdown-menu {
        background: rgba(0,0,0,0.045);
        left: 0%;
        transform: translateX(0%);}
    
        .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-nav .open .dropdown-menu > li > a:hover {
            color: #000;}

    
/* -------------------- NAVBLOK  --------------------*/
.brand-nav{
    flex-direction: column;}
    
.navblokken {
    margin: -60px 25px 30px;}
    
    .navblok{
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        margin: 5px;
        width: calc(100% / 2 - 10px);}

        .navblok a {
            padding: 15px;}        
    
        .navblok p {
            font-size: 1em;}
    
    .navblok h2{
        font-size: 1em;}
    
    .leesmeer + .leesmeer {
        margin:15px;}
    
    
/* -------------------- NIEUWS PROFIEL -------------------- */
.nieuwsprofiel{
    margin: 0 auto;
    padding: 0}    
    
    .profiel{
        margin-bottom: 30px;
        width: calc(100%);}

    .nieuws{
        width: calc(100%);}

    .nieuws article {
        width: calc(100%);}
    
    .nieuws article + article{
        margin-top:30px;}

    
/* SLIDER 2 */
#slider2 .slidercontent {
    text-align: center;
    width: 100%;
    padding: 30px;
    margin: 40vh 0 30px;
    align-self: center;}

    #slider2 .leesmeer{
        margin: 0 auto;}  
    
    
/* -------------------- MAINCONTENT -------------------- */
.mc-wrapper{
    flex-wrap: wrap;}
    
    .mc{
        width: calc(100%);
        column-count: 1;}

.carouselwrapper {
    margin-top: 30px;
    width: calc(100%);}
    
    
/* -------------------- VERVOLGPAGINA -------------------- */
/* -------------------- HEADER -------------------- */
.wrapper.vvp header{
    height: calc(200px);}

.wrapper.vvp .brand-nav {
    margin:0 auto;
    max-width: 1280px;}

    .wrapper.vvp .brand img{
        width: 80%;
        margin: 0;}
   
        .wrapper.vvp .navbar-toggle {
            margin-top:75px;}

    .vvp-sb .vvpc-wrapper{
        flex-wrap: wrap;}   
    
    .vvp-sb aside {
        margin: 0 0 0 0;
        width: 100%;
        max-width: none;}
    
    aside .navbar-header{
        display: flex;}
    
    .vvp-sb aside nav.navbarvf .navbar-header {
        justify-content:space-between;
        display: flex;}
    
    .sidebar h5{
        align-self: center;
        text-align: left;
        margin: 0;
        flex:1;}
    
    .pageicon{
        flex-direction: row;
        height: auto;
        max-height: none;}
    
        .pageicon img {
            margin-bottom: 0;
            margin-right: 10px;
            height: auto;
            width: 50px;}
    
    .pageicon span {
        text-align: left;
        font-size: 1.2em;}
    
    
/* -------------------- FOOTER -------------------- */
.ftr-kolommen{
    width: 100%;
    text-align: center;
    flex-direction: column;}    

    .ftr-kolommen > div + div {
        margin-left: 0;
        margin-top: 30px;}
    
    .ftr-logos{
        width: 100%;
        margin-top: 30px;}
    
    
        .sociallist, .merklist{
            text-align: center;
            justify-content: center;}
    
    aside nav.navbarvf .navbar-collapse{
        margin: 0!important;}
    
    
    
    .sidebar{
        padding:15px 30px;}
    
     aside .navbar-toggle{
        margin: 0!important;}

    
    
/* -------------------- BACK TO TOP -------------------- */
#back-top{
    padding: 10px;}

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

#back-top a.social-fb{
    width:40px;
    height:40px;}

}