.mm-menu.mm-offcanvas.mm-right {
    left: auto;
    top: 150px;
}

html.mm-right.mm-opening .mm-slideout {
    -webkit-transform: translate(calc(-100% + 60px), 0);
    -ms-transform: translate(calc(-100% + 60px), 0);
    transform: translate(calc(-100% + 60px), 0);
    -webkit-transform: translate3d(calc(-100% + 60px), 0, 0);
    transform: translate3d(calc(-100% + 60px), 0, 0)
}

@media all and (max-width: 175px) {
    html.mm-right.mm-opening .mm-slideout {
        -webkit-transform: translate(-140px, 0);
        -ms-transform: translate(-140px, 0);
        transform: translate(-140px, 0);
        -webkit-transform: translate3d(-140px, 0, 0);
        transform: translate3d(-140px, 0, 0)
    }
}

html.mm-front .mm-slideout {
    -webkit-transform: none !important;
    -ms-transform: none !important;
    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 {
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
}

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

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

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

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

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