.mmenu-topbar{
	position:fixed;top:12px;left:12px;z-index:1001;
	background:rgba(255,255,255,0.06);
	padding:8px;border-radius:10px;backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

.mmenu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer}
.mmenu-icon{width:22px;height:2px;background:#fff;position:relative;display:block}
.mmenu-icon:before,.mmenu-icon:after{content:'';position:absolute;left:0;width:22px;height:2px;background:#fff}
.mmenu-icon:before{top:-7px}
.mmenu-icon:after{top:7px}
.mmenu-icon,
.mmenu-icon:before,
.mmenu-icon:after {
  background: currentColor;
  color: #ccc;
  mix-blend-mode: difference;
}

.mmenu-overlay{
	position:fixed;inset:0;z-index:1000;
	background:rgba(0,0,0,0.7);
	transform-origin:left center;
	perspective:1200px;
	overflow:auto;
	visibility:hidden;
	opacity:0;
	transition:opacity 300ms ease;
}

.mmenu-overlay .panel{
	width:100%;height:100%;
	transform:rotateY(-85deg) translateX(-8%);
	-webkit-transform:rotateY(-85deg) translateX(-8%);
	transition:transform 0ms cubic-bezier(.2,.9,.2,1),opacity 320ms;
	opacity:0;
	display:flex;align-items:center;justify-content:center;
	padding:40px 20px;box-sizing:border-box;
}

.mmenu-overlay.open{visibility:visible;opacity:1}
.mmenu-overlay.open .panel{
	transform:rotateY(0deg) translateX(0);
	-webkit-transform:rotateY(0deg) translateX(0);
	opacity:1;
}

.mmenu-overlay .close{
	position:fixed;
	right:14px;
	top:14px;
	z-index:1002;
	width:44px;
	height:44px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

.mmenu-overlay .close:before{content:'\00d7';font-size:20px;color:#fff;line-height:1}

.mmenu-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}
.mmenu-list{list-style:none;text-align:center;padding:0;}
.mmenu-list>li{margin:14px 0}
.mmenu-list a{display:inline-block;padding:12px 18px;font-size:20px;color:#fff;text-decoration:none}

.mmenu-list li.has-sub > a{position:relative;padding-right:36px}
.mmenu-list li.has-sub > a:after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px}

.mmenu-sub-menu{list-style:none;margin-top:10px;display:none}
.mmenu-sub-menu li{margin:8px 0;text-align: left;}
.mmenu-sub-menu a{font-size:16px;opacity:0.95}

.mmenu-list li.expanded > a:after{content:'▴'}

@media (max-width:420px){
	.mmenu-list a{font-size:18px;padding:10px 14px}
	.mmenu-sub-menu a{font-size:15px}
}

body.no-scroll{overflow:hidden;height:100%}

.mmenu-list li{transform:translateY(12px);transition:transform 360ms ease,opacity 360ms}
.mmenu-overlay.open .menu-list li{opacity:1;transform:translateY(0)}
.mmenu-overlay.open .menu-list li:nth-child(1){transition-delay:50ms}
.mmenu-overlay.open .menu-list li:nth-child(2){transition-delay:100ms}
.mmenu-overlay.open .menu-list li:nth-child(3){transition-delay:150ms}
.mmenu-overlay.open .menu-list li:nth-child(4){transition-delay:200ms}
.mmenu-overlay.open .menu-list li:nth-child(5){transition-delay:250ms}