.mm-menu.mm-offcanvas.mm-right {
    left: auto
}


html.mm-right.mm-opening .mm-menu ~ .mm-slideout {
    transform: translate(-345px, 0);
    transform: translate3d(-345px, 0, 0)
}

@media (max-width: 560px){
    html.mm-right.mm-opening .mm-menu ~ .mm-slideout {
        transform: translate(-250px, 0);
        transform: translate3d(-250px, 0, 0)
    }
}

@media (max-width: 375px){
    html.mm-right.mm-opening .mm-menu ~ .mm-slideout {
        transform: translate(-220px, 0);
        transform: translate3d(-220px, 0, 0)
    }
}

@media (max-width: 350px){
    html.mm-right.mm-opening .mm-menu ~ .mm-slideout {
        transform: translate(-170px, 0);
        transform: translate3d(-170px, 0, 0)
    }
}

html.mm-front .mm-slideout {
    transform: none !important;
    z-index: 0
}

html.mm-front #mm-blocker {
    z-index: 1
}

html.mm-front .mm-menu.mm-offcanvas {
    z-index: 2
}

.mm-menu.mm-offcanvas.mm-front, .mm-menu.mm-offcanvas.mm-next {
    transition: transform .4s ease;
    transform: translate(-100%, 0);
    transform: translate3d(-100%, 0, 0)
}

.mm-menu.mm-offcanvas.mm-front.mm-right, .mm-menu.mm-offcanvas.mm-next.mm-right {
    transform: translate(100%, 0);
    transform: translate3d(100%, 0, 0)
}

.mm-menu.mm-offcanvas.mm-top {
    transform: translate(0, -100%);
    transform: translate3d(0, -100%, 0)
}

.mm-menu.mm-offcanvas.mm-bottom {
    transform: translate(0, 100%);
    transform: translate3d(0, 100%, 0)
}

.mm-menu.mm-offcanvas.mm-bottom, .mm-menu.mm-offcanvas.mm-top {
    width: 100%;
    min-width: 100%;
    max-width: 100%
}

.mm-menu.mm-offcanvas.mm-bottom {
    top: auto
}

html.mm-opening .mm-menu.mm-offcanvas.mm-front, html.mm-opening .mm-menu.mm-offcanvas.mm-next {
    transform: translate(0, 0);
    transform: translate3d(0, 0, 0)
}

.mm-menu.mm-offcanvas.mm-bottom, .mm-menu.mm-offcanvas.mm-top {
    height: 80%;
    min-height: 140px;
    max-height: 880px
}