/* Media Query
--------------------*/
@media screen {
    /* .ce_multicolumnStart.bg-white {
        background: #fff;
    }

    This is old way: where multicolumn has class starting with .bg
    Newer way is to use same class *-box for regular CE and Multi-Col CE
    [class^=""].ce_multicolumnStart, [class*=" bg-"].ce_multicolumnStart {
        padding: 1rem 1rem 1px;
        padding-left: calc(var(--block-padding) * 1rem);
        padding-right: calc(var(--block-padding) * 1rem);
    }

    But you should not define any other class with -box in name
    */

    [class*="-box"].ce_multicolumnStart {
        margin-left: calc(var(--block-padding) * 1rem);
        margin-right: calc(var(--block-padding) * 1rem);
    }

    [class^="flex-"] > [class*="-box"] .inside_ce, [class*=" flex-"] >  [class*="-box"] .inside_ce {
        display: flex;
        height: 100%;
        box-sizing: border-box;
    }

    [class*=" flex-"] > [class*="-box"] .content-div {
        display: flex;
        flex-flow: column;
        flex-grow: 1;
        /* flex-direction: column;
        justify-content: flex-start;
        height: 100%; */
    }


    [class*="-box"].ce_multicolumnStart,
    [class*="-box"] .inside_ce {
        /* you should not add padding or margin here */
        /* border-radius: calc(var(--block-padding) * 1.25rem); */
    }

    [class*="-box"].ce_multicolumnStart .block {
        /* remove bottom margin from .block inside colored-box but add bottom margin to colored-box */
        margin-bottom: 0 !important;
    }

    [class*="-box"].ce_multicolumnStart {
        /* add bottom margin to colored-box */        
        margin-bottom: 1.5rem;
    }

    [class*="-box"] .inside_ce {
        padding: 1rem;
    }

    [class*="-box"] .float_below {
        margin-top: auto
    }

    [class*="-box"] {
		color: #fff;
    }

    [class*="-box"] p:last-child {
        margin-top: auto;
        margin-bottom: 0;
    }

}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {

}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
    [class*="-box"].ce_multicolumnStart .inside_ce {
        padding: 1.5rem  0.5rem
    }

    .konsumenten [class*="-box"].ce_multicolumnStart .inside_ce {
        padding: 2rem;
    }

    [class*="-box"] .inside_ce {
        padding: 4rem 6rem;
    }

    .konsumenten [class*="-box"] .inside_ce {
        padding: 2rem;
    }
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {


}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {
}
/* Media ends
--------------------*/

/* White Box
--------------------*/
@media screen {
    .ce_multicolumnStart.white-box,
    .white-box .inside_ce {
        background: var(--mut-white);
        color: var(--mut-black);
        --btn_bg: var(--mut-lightgreen);
        --btn_color: #fff;
        --btn_hover_color: #fff;
        --btn_hover_bg: var(--mut-green);
    }
}
/* White Box ends
--------------------*/


/* Lime Box Query
--------------------*/
@media screen {
    .ce_multicolumnStart.lime-box,
    .lime-box .inside_ce {
        background: var(--mut-lime);
        color: var(--mut-black);
    }
}
/* Lime Box ends
--------------------*/

/* Lightgrey Box Query
--------------------*/
@media screen {
    .ce_multicolumnStart.lightgrey-box,
    .lightgrey-box .inside_ce {
        background: var(--mut-lightgrey);
        color: var(--mut-black);
    }


    .lightgrey-box table tr:hover td {
        background-color: var(--mut-grey);
    }
}
/* Lightgrey ends
--------------------*/

/* Red Box
--------------------*/
@media screen {
    .ce_multicolumnStart.red-box,
    .red-box .inside_ce {
        background: var(--mut-red);
    }

    .ce_multicolumnStart.red-box *,
    .red-box .inside_ce * {
        color: #fff;
    }

    .ce_multicolumnStart.red-box li:before,
    .red-box .inside_ce li:before {
        filter: saturate(100%);
    }
}
/* Red Box ends
--------------------*/


/* Green Box
--------------------*/
@media screen {
    .ce_multicolumnStart.green-box,
    .green-box .inside_ce {
        background: var(--mut-green);
        --btn_bg: transparent;
        --btn_color: #fff;
        --btn_hover_color: #fff;
        --btn_hover_bg: var(--mut-red);
    }

    .ce_multicolumnStart.green-box *,
    .green-box .inside_ce * {
        color: #fff;
    }

    .ce_multicolumnStart.green-box li:before,
    .green-box .inside_ce li:before {
        filter: saturate(100%);
    }
}
/* Green Box ends
--------------------*/