#mmenu.nav-wrapper{position: fixed;width: 300px;transition: transform .3s;transform: translateX(-100%);top: 0;left: 0; z-index: 999;bottom: 0;}
#mmenu.nav-wrapper.show-menu{transform:none}
#mmenu .js-nav-toggle{position:absolute;top:0;right:-60px;width:43px;height:40px;margin:15px 0 0 15px;display:block;float:left;padding:0;color:#345;border:2px solid #345;z-index:2}
#mmenu .js-nav-toggle span{position:relative;background-color:#345;height:2px;display:block;width:22px;margin:17px auto 0;transition:all .4s;transition-delay:.3s}
#mmenu .js-nav-toggle span:before,.js-nav-toggle span:after{content:'';position:absolute;display:block;width:20px;height:0;left:1px;top:50%;margin-top:-7px;transition:all .3s .3s}
#mmenu .js-nav-toggle span:before{box-shadow:0 14px 0 1px #345}
#mmenu .js-nav-toggle span:after{box-shadow:0 0 0 1px #345}
#mmenu .show-menu .js-nav-toggle span{background-color:transparent}
#mmenu .show-menu .js-nav-toggle span:before{transform:rotate(-45deg)}
#mmenu .show-menu .js-nav-toggle span:after{transform:rotate(45deg)}
#mmenu .show-menu .js-nav-toggle span:before,.show-menu .js-nav-toggle span:after{margin-top:0;box-shadow:0 0 0 1px #345}
.nav-wrapper.show-menu nav{box-shadow:0 0 5px 1px #ddd;}
#mmenu nav{position:absolute;left:0;top:0;height:100%;width:100%;overflow-x:hidden;overflow-y:auto;background-color:#fafafa}
#mmenu nav .nav-toggle{position:absolute;top:0;left:0;width:100%;padding:.45em .6em;background:linear-gradient(62deg, #FED602 0%, #D41C52 100%);color:#fff;z-index:100;cursor:pointer;transition:backgroun-color .2s; min-height: 56px;}
#mmenu nav .nav-toggle:hover{background-color:var(--main_color)}
#mmenu nav .nav-toggle.back-visible .nav-back{opacity:1}
#mmenu nav .nav-toggle.back-visible .nav-title{transform:translateX(40px)}
#mmenu nav .nav-title{position: absolute;left: 0;top: 1rem;padding-left: 0.7em;transition: transform .3s;font-size: 1.5rem;    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
width: 85%;}
#mmenu nav .nav-back{margin-top: 5px;display:inline-block;position:relative;width:30px;height:30px;vertical-align:middle;z-index:1;opacity:0;transition:opacity .2s}
#mmenu nav .nav-back:before,nav .nav-back:after{content:'';position:absolute;top:50%}
#mmenu nav .nav-back:before{left:50%;width:10px;height:10px;border:1px solid currentcolor;border-right-color:transparent;border-bottom-color:transparent;transform:translate(-50%,-50%) rotateZ(-45deg)}
#mmenu nav .nav-back:after{left:28%;width:15px;height:2px;background-color:currentcolor;margin-top:-1px;display: none;}
#mmenu nav a{display:block;position:relative;padding:.7em;border-bottom:1px solid #eee;color:#000000;text-decoration:none;transition:color 0.15s,background-color .15s; font-size: 1rem;}
#mmenu nav a:hover{color:#333;background-color:#efefef}
#mmenu nav ul.submenu{list-style:none;padding:56px 0 0;transition:transform .3s;background-color:#fafafa;position:absolute;left:0;top:0;height:100%;width:100%}
#mmenu nav ul ul.submenu{display:none;left:100%}
#mmenu nav li.has-dropdown>a .caret{position: absolute;width: 38px;display: block;height: 100%;top: 0;right: 0;z-index: 9;}
#mmenu nav li.has-dropdown>a .caret::after{content:'';position:absolute;top:50%;right:1em;width:9px;height:9px;border:1px solid currentcolor;border-left-color:transparent;border-top-color:transparent;transform:translateY(-90%) rotateZ(-45deg);transition:transform .3s;transform-origin:100%}
#mmenu nav li.nav-dropdown-open > ul{display:block}

#my-page.open-slideout{transform: translate3d(300px,0,0);}
#my-page.open-slideout #hamburger:before{transform: rotate(45deg);top: 10px;}
#my-page.open-slideout #hamburger:after {transform: rotate(-45deg);top: 10px;}
#my-page.open-slideout #hamburger span {left: -50px;opacity: 0;}
#my-page{transition: transform .4s ease,-webkit-transform .4s ease;}
.wrapper-blocker{background: rgba(3,2,1,0);overflow: hidden;display: none;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 2;transition: transform .4s ease,-webkit-transform .4s ease;}

@media (max-width: 768px) {
    .wrapper-blocker.open-slideout{transform: translate3d(calc(78vw - 300px),0,0);display: block;}    
}
@media (max-width: 630px) {
    .wrapper-blocker.open-slideout{transform: translate3d(calc(70vw),0,0);display: block;}    
}