/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/

/*
body:not(.mfn-ui-bebuilder-page) .tweeblokken .mcb-wrap-inner { gap:50px; display:flex;
    align-items:center;}


body:not(.mfn-ui-bebuilder-page) .tweeblokken {
    display:flex;
    gap:30px;
}

body:not(.mfn-ui-bebuilder-page) .tweeblokken-col{
    flex:1;
    transition:all .45s ease;
    position:relative;
    overflow:hidden;
}

body:not(.mfn-ui-bebuilder-page) .tweeblokken-col .column_image{
    opacity:0;
    transition:opacity .3s ease;
}

body:not(.mfn-ui-bebuilder-page) .tweeblokken-col.active{
    flex:2;
}

body:not(.mfn-ui-bebuilder-page) .tweeblokken-col.active .column_image{
    opacity:1;
}

body:not(.mfn-ui-bebuilder-page) .dashboard-text{
    flex:1;
}

body:not(.mfn-ui-bebuilder-page) .mcb-wrap-inner-h4p59a3l .column_image{
    flex:1;
}
*/


/* container */
body:not(.mfn-ui-bebuilder-page) .tweeblokken{
    display:flex;
    align-items:stretch;
    gap:40px;
}

/* kolommen */
body:not(.mfn-ui-bebuilder-page) .tweeblokken .tweeblokken-col{
    flex:0 0 30%;
    max-width:30%;
    transition:all .45s ease;
    display:flex;
}

/* actieve kolom */
body:not(.mfn-ui-bebuilder-page) .tweeblokken .tweeblokken-col.active{
    flex:0 0 60%;
    max-width:60%;
}

/* inner layout */
body:not(.mfn-ui-bebuilder-page) .tweeblokken .mcb-wrap-inner{
    display:flex;
    flex:1;
    align-items:center;
    gap:40px;
    flex-wrap: nowrap;
    padding: 45px !important;
}

/* kaart styling */
body:not(.mfn-ui-bebuilder-page) .tweeblokken-col .mcb-wrap-inner{
    background:#1c8aa6;
    border-radius:30px;
    padding:60px;
}

/* tekst blok */
body:not(.mfn-ui-bebuilder-page) .dashboard-text{
    flex:1;
}

/* afbeelding */
body:not(.mfn-ui-bebuilder-page) .column_image{
    flex:1;
}

/* afbeelding alleen bij actieve */
body:not(.mfn-ui-bebuilder-page) .tweeblokken-col:not(.active) .column_image{
    opacity:0;
}



@media only screen and (max-width: 1200px) {
    body:not(.mfn-ui-bebuilder-page) .tweeblokken { margin-top: -60px; display: block; gap: 0; }
    body:not(.mfn-ui-bebuilder-page) .tweeblokken .mcb-wrap-inner { padding: 30px !important; display: block; margin-left: -22px; margin-right: -22px; width: calc(100% + 44px); margin-top: 30px; }
    body:not(.mfn-ui-bebuilder-page) .tweeblokken .tweeblokken-col { width: 100%; max-width: 100% !important; display: block; }
    body:not(.mfn-ui-bebuilder-page) .tweeblokken-col:not(.active) .column_image { opacity: 1; }
    
}




