/* 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^="bg-"].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*="-box"].block {

    }

    [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"] .inside_ce {
        padding: 2rem;
        transition: all 0.6s cubic-bezier(.25,.1,.25,1);
        color: #fff;
        box-shadow: 0px 0.5rem 3.2rem 0px #00000026;
        border-radius: 1.5rem;
    }


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


    [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) {
    [class^="bg-"].ce_multicolumnStart, [class*=" bg-"].ce_multicolumnStart {
        margin-left: calc(var(--block-padding) * 1rem);
        margin-right: calc(var(--block-padding) * 1rem);
        padding: 2rem 1rem 1px;
    }

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


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
}

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

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

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

    [class^="bg-"].ce_multicolumnStart, [class*=" bg-"].ce_multicolumnStart {
        /* padding: 5rem 4rem 5px; */
    }

}

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

/* Green Box Query
--------------------*/
@media screen {
    .ce_multicolumnStart.green-box,
    .green-box .inside_ce {
        background: var(--wildenau-darkgreen);
        --btn_hover_bg: #fff;
        --btn_hover_color: #000;
    }

    .green-box a {
        --link-hover-color1: var(--wildenau-limegreen);
    }
}
/* Green Box ends
--------------------*/


/* Whitebox Query
--------------------*/
@media screen {
    .ce_multicolumnStart.white-box,
    .white-box .inside_ce {
        background: #FCFAF6;
        color: inherit;
        --btn_bg: var(--wildenau-blue);
        --btn_color: #fff;
        --btn_hover_color: #fff;
        --btn_hover_bg: var(--wildenau-darkblue);
    }
}
/* Whitebox ends
--------------------*/