*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-height: 100vh;
    background: c("main-bg");
    color: c("body-text");
}




.container {
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}




.content {
    @include clearfix;
    position: relative;
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 0;

    @include mq(tablet) {
        flex-direction: row;
    }
}



.sidebar {
    @include fixed(top 0 left 0);
    @include size($w-Sidebar 100%);
    @include transform( translateX(-100%) );
    @include transition($anim-Sidebar);
    height: 100vh;
    background-color: c("sidebar");
    // border-right: 1px solid c("sidebar__border");
    flex-order: -1;
    z-index: z("sidebar");
    padding: s("navbar", $heights) 0 1em;

    @include mq(tablet) {
        @include transform( translateX(0) );
    }

   .nav--open & {
        @include transform( translateX(0) );
    }
}




.main {
    @include transition($anim-Sidebar);
    flex: 1;
    width: 100%;
    padding: .5em 1.5em 3em;
    margin-top: 0;

    @include mq(tablet) {
        margin-left: $w-Sidebar;
        padding-bottom: 1em;
    }

    .nav--open & {
        @include transform( $offCanvasMenu );
    }

    .close {
        @include absolute(top s("navbar", $heights) left 0 right 0);
        @include size(100%);
        @include transition($anim-Ribbon);
        display: block;
        z-index: -1;
        background: rgba(black, .35);
        opacity: 0;
        visibility: hidden;
        box-shadow: inset 0 0 10px rgba(black, .5);

        .nav--open & {
            opacity: 1;
            visibility: visible;
            z-index: z("sidebar__close");
        }
    }

    
}
.page {
    @include trans();
    position: relative;
    z-index: z("page__content");
    margin-top: 0;

    .nav--open & {
        filter: blur(3px);
    }
}