.box {
    border-radius: $border-radius;
    background-color: $body-bg;
    box-shadow: $box-shadow;
    position: relative;
    color: $body-color;
    padding: $card-spacer-y $card-spacer-x;
    
    &_stretch {
        height: 100%;
        
        &.box_flex {
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            > .image-block {
                width: 30%;
                padding-right: 0;
                padding-left: 0;
                img {
                    margin-left: auto;
                    margin-right: auto;
                    max-width: 100%;
                }
            }
            > div {
                max-width: 70%;
                padding-left: $spacer;
            }
        }
    }

    &_spaced {
        margin-top: $spacer * 3;
    }
    &-column {
        padding-top: $spacer;
        min-height: 100px;
    }
    &_flex {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        height: 100%;
        .box-inner {
            flex: 1 0 auto;
            &_end {
                flex: 0 0 auto;
            }
        }
        @media (min-width:$screen-sm) {
            flex-direction: row;
            align-items: center;
            > .box-inner_flex {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex: 1 0 auto;

                h3:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
    .image-block {
        max-width: 30%;
        img {
            min-width: 90px;
        }

        @media (min-width:$screen-sm) {
            max-width: none;
            &:first-child {
                padding-right: $spacer * 1.25;
            }
            img {
                min-width: 100px;
                max-width: 160px;
            }
        }
    }
    &_slider {
        z-index: 0;
        .slick-list {
            padding-top: $spacer;
            padding-bottom: $spacer * 1.5;
        }
        &-caption {
            display: flex;
            justify-content: flex-end;
            padding: 0 $spacer;
            @media (min-width: $screen-lg){
                padding: 0 $spacer * 2;
            }
            @media (min-width: 420px){
                transform: translate3d(0, -38px, 0);
            }
        }
    }
}

.image-block {
    text-align: center;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;

    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        height: auto;
    }
    .text-center > & {
        margin-left: auto;
        margin-right: auto;
        text-align: inherit;
        img {
            margin-left: auto;
            margin-right: auto;
        }
    }
    .section-feature-listing &,
    .box & {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }
}

.image-overflow {
    position: absolute;
    height: 100%;
    min-height: 100%;
    width: auto;
    top: 0;
    &-spacer {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        
    }
    &-container {
        position: relative;
        margin-top: $spacer;
        margin-bottom: $spacer * 1.5;

        @media (min-width: $screen-md){
            margin-top: 0.5 * $spacer;
            margin-bottom: 0.5 * $spacer;
        }
    }
    &_left {
        right: 0.5rem;
    }
}

.text-block {
    .numeration {
        color: $primary;
        font-size: $h5-font-size;
        font-weight: $font-weight-bold;
        line-height: $headings-line-height * $h4-font-size;
    }
    &_indented {
        padding-left: $grid-gutter-width;
        position: relative;
        @media (min-width: $screen-md){
            padding-right: $card-spacer-x;
        }
        .numeration {
            position: absolute;
            left: 0;

            img.icon {
                position: absolute;
                left: -4px;
                width: auto;
                height: auto;
                max-height: 32px;
                top: -2px;
                display: inline-block;
            }
        }
    }
    &_spaced {
        margin-top: $spacer * 2.5;
        margin-bottom: $spacer * 2.5;

        &-top {
            margin-top: $spacer * 3.25;
        }
        &-bottom {
            margin-bottom: $spacer * 3.25;
        }
    }
}
.col-text {
    order: 1;
    margin-bottom: $spacer * 2;
}
.col-img {
    order: 0;
}

@media(min-width: $screen-md){
    .col-img,
    .col-text {
        order: 0;
    }
}

p:not([class]) + .btn {
    &.btn-primary,
    &.btn-secondary {
        margin-top: $spacer * 0.5;
    }
}

.container_flex {
    display: block;

    .side-menu {
        transform: translate3d(-100%, 0, 0);
        width: 50vw;
        max-width: 240px;
        position: fixed;

        @media (max-width: ($screen-md - 1)){
            padding-left: $spacer * 1.25;
            padding-top: 0.5* $spacer;
            z-index: 1;
            transition: transform 0.3s ease-in-out;
            height: 100vh;
            top: 0;

            &:before {
                opacity: 0;
                transition: opacity 0.3s ease-in-out;
            }

            &.active {
                transform: translate3d(0, 0, 0);
                z-index: 1;
                height: 100vh;
                left: 0;
                top: 0;
                padding-top: 130px;
                background-color: $body-bg;
                box-shadow: $box-shadow;
                
                &:after,
                &:before {
                    position: fixed;
                    content: "";
                    height: 100vh;
                    width: 300vw;
                    background-color: $dark;
                    opacity: 0.2;
                    display: block;
                    top: 0;
                    z-index: -1;
                    left: 0;
                }
                &:after {
                    position: fixed;
                    background-color: $body-bg;
                    width: 50vw;
                    max-width: 240px;
                    opacity: 1;
                }
                .menu-close .btn-close {
                    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter x='-64.1%25' y='-46.7%25' width='228.3%25' height='228.3%25' filterUnits='objectBoundingBox' id='a'%3e%3cfeMorphology radius='4' in='SourceAlpha' result='shadowSpreadOuter1'/%3e%3cfeOffset dy='8' in='shadowSpreadOuter1' result='shadowOffsetOuter1'/%3e%3cfeGaussianBlur stdDeviation='12.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3e%3cfeColorMatrix values='0 0 0 0 0.235294118 0 0 0 0 0.270588235 0 0 0 0 0.325490196 0 0 0 0.538625437 0' in='shadowBlurOuter1'/%3e%3c/filter%3e%3crect id='b' width='46' height='46' rx='4'/%3e%3c/defs%3e%3cg fill='none'%3e%3cg transform='matrix(-1 0 0 1 63 9)'%3e%3cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3e%3cuse fill='%23FFF' xlink:href='%23b'/%3e%3c/g%3e%3cpath d='M37.415 40c.473 0 .881-.175 1.222-.525.341-.35.511-.798.511-1.343 0-.545-.17-.993-.511-1.343l-2.727-2.92h12.329c.492 0 .909-.185 1.25-.555.341-.37.511-.808.511-1.314s-.171-.944-.511-1.314c-.341-.37-.757-.555-1.25-.555h-12.329l2.784-2.92c.341-.35.511-.798.511-1.343 0-.545-.17-.993-.511-1.343-.341-.35-.758-.525-1.25-.525s-.909.175-1.25.525l-5.682 6.131c-.341.35-.511.798-.511 1.343 0 .506.171.934.511 1.285l5.682 6.19c.341.35.748.525 1.222.525z' fill='%23000' fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e");
                }
            }
            .menu-close {
                position: absolute;
                bottom: 0;
                margin-left: 0;
                left: 100%;
                transform: translate3d(0, 0, 0);
                width: 80px;
                height: 80px;
                cursor: pointer;
                z-index: 2;

                .btn-close {
                    width: 80px;
                    height: 80px;
                    position: static;
                    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter x='-64.1%25' y='-46.7%25' width='228.3%25' height='228.3%25' filterUnits='objectBoundingBox' id='a'%3e%3cfeMorphology radius='4' in='SourceAlpha' result='shadowSpreadOuter1'/%3e%3cfeOffset dy='8' in='shadowSpreadOuter1' result='shadowOffsetOuter1'/%3e%3cfeGaussianBlur stdDeviation='12.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3e%3cfeColorMatrix values='0 0 0 0 0.235294118 0 0 0 0 0.270588235 0 0 0 0 0.325490196 0 0 0 0.538625437 0' in='shadowBlurOuter1'/%3e%3c/filter%3e%3crect id='b' width='46' height='46' rx='4'/%3e%3c/defs%3e%3cg fill='none'%3e%3cg transform='translate(17 9)'%3e%3cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3e%3cuse fill='%23FFF' xlink:href='%23b'/%3e%3c/g%3e%3cpath d='M42.585 40c-.473 0-.881-.175-1.222-.525-.341-.35-.511-.798-.511-1.343 0-.545.17-.993.511-1.343l2.727-2.92h-12.329c-.492 0-.909-.185-1.25-.555-.341-.37-.511-.808-.511-1.314s.171-.944.511-1.314c.341-.37.757-.555 1.25-.555h12.329l-2.784-2.92c-.341-.35-.511-.798-.511-1.343 0-.545.17-.993.511-1.343.341-.35.758-.525 1.25-.525s.909.175 1.25.525l5.682 6.131c.341.35.511.798.511 1.343 0 .506-.171.934-.511 1.285l-5.682 6.19c-.341.35-.748.525-1.222.525z' fill='%23000'/%3e%3c/g%3e%3c/svg%3e");
                    &,
                    &:hover,
                    &:active,
                    &:focus {
                        outline: none;
                        box-shadow: none;
                        border: none;
                    }
                }   
            }
        }

        .nav-link {
            cursor: pointer;
            position: relative;
            font-weight: $font-weight-normal;
            color: inherit;
            text-decoration: none;

            &:before {
                top: auto;
                left: auto;
                position: absolute;
                top: $spacer * 0.5;
                bottom: $spacer * 0.5;
                border-left: 2px solid $primary-light;
                left: 0;
            }

            &:hover,
            &:focus,
            &:active,
            &.active {
                color: inherit;

                &:before { content: ""}
            }
            &:focus,
            &:active,
            &.active {
                font-weight: $font-weight-bold;
            }
        }
        
    }

    .main {
        width: 100%;
        padding-top: $spacer * 2.125;
        z-index: 0;
        position: relative;
    }
    @media (min-width: $screen-md){
         display: flex;
         padding-top: 0;

         .side-menu {
            transform: translate3d(0, 0, 0);
            width: 220px;
            position: sticky;
            max-height: 100vh;
            top: 0;
            padding-top: $spacer * 2;
            left: auto;

            .menu-toggle,
            .menu-close {
                display: none;
            }
         }
        .main {
            padding-top: $spacer * 2;
            margin-left: $grid-gutter-width;
        }
    }
}