/**
 * Container styles
 */
.is-container {
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;

    z-index: 1;
    position: relative;
    box-sizing: border-box;
    transition: none !important;

    @media (min-width: 576px) {
        max-width: 540px;
    }
    @media (min-width: 768px) {
        max-width: 720px;
    }
    @media (min-width: 992px) {
        max-width: 960px;
    }
    @media (min-width: 1200px) {
        max-width: 1140px;
    }
    @media (min-width: 1400px) {
        max-width: 1320px;
    }

    // Full width override
    &.is-stretch-w {
        max-width: 100%;
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;

        > div { // Row
            padding-left: 0 !important;
            padding-right: 0 !important;

            > div { // Column
                padding-left: 0 !important;
                padding-right: 0 !important
            }
        }
    }
    &.is-content-full.is-stretch-w {
        margin-left: 0 !important;
        margin-right: 0 !important;

        > div { // Row
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }

    // Full height override
    &.is-stretch-h {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        > div { // row
            padding-top: 0 !important;
            padding-bottom: 0 !important
        }
    }
    &.is-fullheight {
        height: 100%
    }
}

// If the container is in a box
.is-box {
    .is-container:not(.is-custom) {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

// If boxed-layout
.is-boxed-layout {
    .is-container:not(.is-custom) {
        padding-top: 30px;
        padding-bottom: 30px;
        @media all and (min-width: 1200px) {
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .is-overlay {
            display: none !important;
        }
    }
}

/* Unlike .is-overlay (absolute positioned), this section is relative positioned. With this,
flowing content is safe, and stretched content can be made absolute with class .flexi-position */
.is-stretch > div:not(.is-arrow-down) {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

/*
.flexi-position is set relative by default, but will set absolute
 (stretched) if placed within section .is-stretch
*/
.flexi-position {
    position: relative;
}
.is-stretch .flexi-position {
    position: absolute;
}