body {
    min-width: 20em; /* 320px */
}

.v2__homepage .off-screen-nav__container {
    background-color: #f2f2f2;
}

.off-screen-nav__container {
    display: flex;
    overflow-x: hidden;
    position: relative;
    max-width: 60em; /* 960px */
    margin: 0 auto;

    cursor: default;

    background-color: #fff;
}

.off-screen-nav__navigation {
    position: relative;
    z-index: -1;

    display: flex;
    flex-direction: column;

    width: 16.001em;
    margin: 0 .25em 0 -16.25em;

    flex-grow: 0;
    flex-shrink: 0;
}

.main-menu-fixed {
    position: fixed;

    overflow-y: auto;
}

.off-screen-nav__navigation.open {
    margin-left: -16.001em;
}

.off-screen-nav__navigation * {
    color: #fff;
}

.off-screen-nav__site-wrap {
    width: 100%;
    max-width: 60em;
    min-height: 100%;
    flex-grow: 1;
    flex-shrink: 0;
}

.v2__homepage .off-screen-nav__site-wrap {
    background-color: #f2f2f2;
}

.off-screen-nav__navigation,
.off-screen-nav__site-wrap {
    transition: margin .2s;
}

/* show nav */
#off-screen-nav__trigger:checked ~ .off-screen-nav__navigation {
    margin-left: 0;
}

#off-screen-nav__trigger:not(:checked) ~ .off-screen-nav__navigation .v2__left-aside__menu {
    position: absolute;
}

/* shift contet */
#off-screen-nav__trigger:checked ~ .off-screen-nav__site-wrap {
    margin-right: 16.001em;
}


/* always visible menu on large screes */
@media (min-width: 76em) { /*~1216px*/
    .off-screen-nav__container.active {
        max-width: 76em !important;
    }

    .off-screen-nav__container.active .off-screen-nav__navigation {
        margin-left: 0 !important;
    }

    .off-screen-nav__container.active .off-screen-nav__site-wrap {
        margin-right: 0 !important;

        flex-shrink: 1 !important;
    }
}