/* (mobile, 768px and down) */
@media (max-width: 768px) { 
.wrapper{
    overflow: hidden;}
    
.hmob{ display: none!important;}
.smob{ display: block!important;}
    
    
/* -------------------- NAV --------------------*/
.navwrapper{
    padding: 55px 30px;}   
    
.navbar-toggle .kmnav{
        width: calc(100vw - 82px);}

    .navbar-toggle .navheader{
        margin-right: calc(100vw - 82px);}
    
    .hmbtxt{
        display: none;}

    .hamburger {
        padding: 30px;}
    
.logo {
    left: 45px;
    top: 45px;
    z-index: 30;
    font-size: 3em;}

 .subnavwrap{
    display: block;}   
/* -------------------- QUOTE CAROUSEL -------------------- */        
.intro {
    margin-top: calc(25vh + 118px);
    width: calc(75%);
    border-radius: 0 5vw 5vw 0;
    padding: 60px 30px;}
    
    .intro .bfat:before{
        width: 5vw;}
    
    .carouselwrapper2 .owl-item.active +  .owl-item.active{
        filter:blur(0px);}

        .carouselwrapper2 .owl-item.active{
            filter:blur(0px);}

    
/* -------------------- HOME MAIN -------------------- */        
.home main{
    padding: 30px;
    flex-wrap: wrap;}
    
    .mimg{
        margin-bottom: 30px;
        width: 100%;}
    
        .mimg:before{
            display: none;}

    .mtxt{
        padding: 0;
        margin: 0px 0;
        width: 100%;}
    
        .mtxt h2 {
            font-weight: 700;
            margin-bottom: 15px;}

.carouselwrapper {
    min-height: 25vh;}

    
/* -------------------- VVP MAIN -------------------- */   
.vvp header {
    flex-wrap: wrap;}  
    
    .vvp #slider{
        min-height: 45vh;
        margin: 30px 30px 0 30px;
        border-radius: 5vw 0 0 0;
        width: 100%;}
    
    .vvp .intro {
        width: calc(100%);
        margin: 0 30px;
        padding: 30px;}        
    
.maincontent {
    padding: 30px;
    border-radius: 0 0 0 5vw;
    margin: 0 30px -10vw;}   
        
    .kolommen-2 > div{
        width: calc(100%);}

        .kolommen-2 > div + div{
            margin-top: 15px;}
    
aside{
    display: none;}    
    
/* -------------------- QUOTE CAROUSEL -------------------- */    
.quotecarousel{
    margin: 60px 0;
    flex-wrap: wrap;}
    
        .quotecarousel:before {
            border-radius: 15vw 0 0 15vw;
            width: calc(100% / 3 * 2 + 6px);}

    .quote{
        font-size: 1.2em;
        transform: translateX(0);
        padding: 30px;
        width: 100%;}

        .quote h3 {
            font-size: 1.3em;
            font-weight: 800;
            margin-bottom: 45px;
            text-align: center;
            color: #444136;}
    
            .vvp .quote h3 {
                margin-bottom: 30px;}
    
    .vvp .quote{
        width: 100%;}
    
    .carouselwrapper2 {
        margin: 0 auto;
        transform: translateX(0);
        width: calc(100% - 60px);}
    
        .carouselwrapper2 .owl-dots {
            top: -25px;
            left: 0;
            right: 0;
            transform: translateX(0%);}
    
    
.vvp .quotecarousel {
    flex-wrap: wrap;}
    
    .vvp .carouselwrapper2{
        width: 100%;}

    
/* -------------------- MAILING OPTION -------------------- */    
.mailingopt {
    flex-wrap: wrap;
    padding: 60px 30px;}    
    
    .motxt{
        margin-bottom: 15px;
        width: 100%;}
    
    .moform{
        justify-content: flex-start;
        width: 100%;}
    
        .moform form{
            width: 100%;
            display: flex;
            flex-direction: column;}
    
            .moform input{
                width: 100%;}

                .moform input + input {
                    margin: 10px 0 0 0;}
    
            .moform button {
                margin: 15px 0 0 0;}
    
    
/* -------------------- PARALLAX -------------------- */    
.jarallax{
    padding: 20vh 30px;}
    
    .parallax h6 {
        width: calc(100%);
        font-size: 2em;
        text-align: center;}

.vvp .jarallax{
    padding: 10vw;
    min-height: 50vh;
    display: flex;
    align-items: center;}
    
/* -------------------- FOOTER -------------------- */    
footer{
    flex-wrap: wrap;
    padding:60px 0;}
    
    .ftr-col{
        text-align: center;
        padding:0 30px;
        width: calc(100%);}  
    
        .ftr-col + .ftr-col{
            margin-top:30px;} 
    
    .ftr-col h6 {
        margin-bottom: 10px;}
    
/* ------------------------------------------------------- */
/* -------------------- @MEDIA <| 420 -------------------- */
/* ------------------------------------------------------- */
@media (max-width: 420px) { 

    
}