/* Boxed Layout */

body.boxed {
    padding: 25px 0;

    @media #{$screen-medium} {
        padding: 0;
    }

    #header {
        border-top-width: 0;
    }

    .banner-container {
        overflow: hidden;
    }

    .page-wrapper {
        background: if-light(#fff, $color-dark);
        border-top: 5px solid #CCC;
        border-bottom: 5px solid $color-dark;
        margin: 0 auto;
        box-shadow: $wrapper-shadow;
        border-radius: $border-normal;

        @media #{$screen-medium} {
            width: 100% !important;
            border-width: 0;
            border-radius: 0;
            overflow: hidden;
        }
    }
}

body.boxed,
#main.main-boxed {
    .porto-container.container {
        margin-left: -($grid-gutter-width / 2);
        margin-right: -($grid-gutter-width / 2);
    }

    .vc_row[data-vc-stretch-content],
    .ult-vc-hide-row {
        margin-left: 0;
        margin-right: 0;
    }

    .ult-vc-hide-row {
        @media (min-width: 768px) {
            left: auto !important;
            max-width: 720px + $grid-gutter-width;
            overflow: hidden;

            &.section {
                padding-left: ($grid-gutter-width / 2);
                padding-right: ($grid-gutter-width / 2);
            }

            &.vc_row-no-padding {
                padding-left: 0;
                padding-right: 0;
            }
        }
        @media (min-width: 992px) {
            max-width: 960px + $grid-gutter-width;
        }
    }

    .vc_row[data-vc-stretch-content] {
        &.section {
            padding-left: ($grid-gutter-width / 2);
            padding-right: ($grid-gutter-width / 2);
        }
        @media (min-width: 768px) {
            left: auto !important;
            margin-left: -$grid-gutter-width !important;
            margin-right: -$grid-gutter-width !important;
            max-width: 720px + $grid-gutter-width;
        }
        @media (min-width: 992px) {
            max-width: 960px + $grid-gutter-width;
        }
        @media #{$screen-medium} {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }
}

#main.main-boxed {
    .container .container {
        width: 100%;
    }
}

#main.main-boxed.wide {
    .porto-container.container {
        margin-left: 0;
        margin-right: 0;
    }
    .vc_row[data-vc-stretch-content] {
        @media (min-width: 768px) {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
}

body.boxed {
    #main.wide {
        .vc_row[data-vc-stretch-content] {
            @media (min-width: 768px) {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            .porto-wrap-container {
                padding-left: $grid-gutter-width;
                padding-right: $grid-gutter-width;

                @media #{$screen-medium} {
                    padding-left: ($grid-gutter-width / 2);
                    padding-right: ($grid-gutter-width / 2);
                }
            }
        }
        .ult-vc-hide-row {
            @media (min-width: 768px) {
                overflow: visible;
            }
        }

        .container .vc_row {
            margin-left: -$grid-gutter-width;//-($grid-gutter-width / 2);
            margin-right: -$grid-gutter-width;//-($grid-gutter-width / 2);
            padding-left: $grid-gutter-width;
            padding-right: $grid-gutter-width;

            @media #{$screen-medium} {
                margin-left: -($grid-gutter-width / 2);
                margin-right: -($grid-gutter-width / 2);
                padding-left: ($grid-gutter-width / 2);
                padding-right: ($grid-gutter-width / 2);
            }

            .vc_row {
                margin-left: -($grid-gutter-width / 2);
                margin-right: -($grid-gutter-width / 2);
                padding-left: 0;
                padding-right: 0;
            }
        }

        > .container {
            > .row {
                margin-left: 0;
                margin-right: 0;
            }
        }

        .porto-wrap-container {
            width: auto;
            margin: 0;
            padding: 0;
        }
    }

    #header {
        &.sticky-header {
            .header-main.sticky {
                margin-left: auto;
                margin-right: auto;
                @media (min-width: 768px) {
                    max-width: 720px + $grid-gutter-width;
                }
                @media (min-width: 992px) {
                    max-width: 960px + $grid-gutter-width;
                }
            }

            .main-menu-wrap {
                margin-left: auto;
                margin-right: auto;
                @media (min-width: 992px) {
                    max-width: 960px + $grid-gutter-width;
                }
            }
        }
    }

    .fixed-header {
        #header {
            position: absolute;
        }
    }

    .footer-wrapper {
        &.fixed {
            position: absolute;
        }
    }
}