@media only screen and ( max-width : 768px ) {
.fixed { position: fixed; width: 100%; height: 100%; z-index: 1; }
#header .mask { background: rgba(22,34,42,.4); top: 60px; left: 0; z-index: 1; position: absolute; width: 100%; height: 100vh; opacity: 1; display: none; }
}

a.meanmenu-reveal{ display:none; }

.mean-container .mean-bar{ width:100%; position:fixed; background:none; min-height:60px; z-index:999998; top:0; left:0; }
.mean-container .mean-bar { width: 100%; position: fixed; background: none; min-height: 60px; z-index: 98; top: 0; left: 0; }
.meanmenu-reveal-btn { position: absolute; display: block; z-index: 99999; box-sizing: border-box; width: 60px; height: 60px; right: 0; top: 0; }
.meanmenu-reveal { width: 26px; height: 20px; margin: 13px 17px 27px 17px; display: block !important; position: relative; }
.meanmenu-reveal:after { content: "MENU"; position: absolute; bottom: -20px; color: #ddd; font-size: 10px; width: 60px; left: -17px; text-align: center; display: block; /*font-family:serif;*/ }
.meanmenu-reveal.meanclose:after { content: "CLOSE"; }
.meanmenu-reveal span { display: inline-block; transition: all .4s; box-sizing: border-box; position: absolute; left: 0; width: 100%; height: 2px; margin: 0 auto; }
.meanmenu-reveal span:nth-of-type(1) { top: 0; background: #ddd; }
.meanmenu-reveal span:nth-of-type(2) { top: 8px; background: #ddd; }
.meanmenu-reveal span:nth-of-type(3) { top: 16px; background: #ddd; }

.meanmenu-reveal span:nth-of-type(1) { animation: menu-ber01 .75s forwards; }
.meanmenu-reveal span:nth-of-type(2) { transition: all .25s .25s; opacity: 1; }
.meanmenu-reveal span:nth-of-type(3) { animation: menu-ber02 .75s forwards; }

.meanclose span:nth-of-type(1) { animation: active-menu-ber01 .75s forwards; top: -2px; }
.meanclose span:nth-of-type(2) { opacity: 0; }
.meanclose span:nth-of-type(3) { animation: active-menu-ber03 .75s forwards; }

@keyframes menu-ber01 {
0% { transform: translateY(8px) rotate(45deg); }
50% { transform: translateY(8px) rotate(0); }
100% { transform: translateY(0) rotate(0); }
}

@keyframes menu-ber02 {
0% { transform: translateY(-8px) rotate(-45deg); }
50% { transform: translateY(-8px) rotate(0); }
100% { transform: translateY(0) rotate(0); }
}

@keyframes active-menu-ber01 {
0% { transform: translateY(0) rotate(0); }
50% { transform: translateY(10px) rotate(0); }
100% { transform: translateY(10px) rotate(45deg); }
}

@keyframes active-menu-ber03 {
0% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-8px) rotate(0); }
100% { transform: translateY(-8px) rotate(-45deg); }
}

.mean-container .mean-nav{ width:100%; margin-top:60px; max-height:100vh; overflow-y:auto; }
.mean-container .mean-nav ul{ padding: 0; margin: 0; width: 100%; list-style-type: none; overflow-y: scroll; -webkit-overflow-scrolling:touch; position: relative; z-index: 99; max-height: 100vh; max-height: calc(100vh - 60px); background: #eef7f9; }
.mean-container .mean-nav ul ul{ padding-bottom:0; margin-bottom:0; }
.mean-container .mean-nav ul li{ position:relative; width:100%; box-sizing: border-box; }
.mean-container .mean-nav ul li a,.mean-container .mean-nav ul li span.pre{ display:block; width:100%; padding:1em; margin:0; text-align:left; text-decoration:none; text-transform:uppercase; color:#477684; box-sizing: border-box; }
.mean-container .mean-nav ul li li a{ width:100%; padding:1em 10%; text-shadow:none !important; visibility:visible; }
.mean-container .mean-nav ul li.mean-last a{ border-bottom:none; margin-bottom:0; }
.mean-container .mean-nav ul li li li a{ width:70%; padding:1em 15%; }
.mean-container .mean-nav ul li li li li a{ width:60%; padding:1em 20%; }
.mean-container .mean-nav ul li li li li li a{ width:50%; padding:1em 25%; }
.mean-container .mean-nav ul li a:hover{ background:#252525; background:rgba(255,255,255,0.1); }
.mean-container .mean-nav ul li a.mean-expand{ width:60px; text-align:center; position:absolute; right:0; top:0; z-index:2; padding: 0; font-size: 24px; color: #6bb5cb; line-height: 1.8em; }
.mean-container .mean-nav ul li a.mean-expand:hover { background:#a0c6d1; color: #fff; }
.mean-container .mean-push { float:left; width:100%; padding:0; margin:0; clear:both; }
.mean-nav .wrapper{ width:100%; padding:0; margin:0; }
.mean-container .mean-bar, .mean-container .mean-bar *{ box-sizing:content-box; }
.mean-remove{ display:none !important; }

