@charset "utf-8";

.fixed { position: fixed; top: 0; }
#navMenu { display: none; }
#mobileMenu { display: none; }
nav ul { width: 100%; }
nav ul::after { content:""; display: block; clear: both; }
nav ul li { position: relative; float: left; width: 20%; text-align: center; box-sizing: border-box; }
nav ul li a { display: block; padding: 26px 0; color: #fff; font-size: 16px; line-height: 1; transition: .6s; }
nav ul li ul { position: absolute; z-index: 100; top: 100%; left: 0; width: 100%; }
nav ul li ul li { overflow: hidden; width: 100%; height: 0; color: #fff; transition: .2s; }
nav ul li ul li a { padding: 16px 15px 14px; text-align: left; font-size: 15px; background: #666; transition: .6s; }
nav ul > li:hover > a { color: #f00; }
nav ul > li:hover > ul > li { overflow: visible; height: 45px; }
nav ul li a span { display: none; }

@media all and (max-width: 1024px) {
	#mobileMenu { display: block; }
	div#btn { text-align:left; position:fixed; top:15px; right:14px; z-index:999;}
	.menu-trigger, .menu-trigger span { display:inline-block; transition:all .4s; box-sizing:border-box; }
	.menu-trigger { position:relative; width:36px; height:30px; cursor:pointer; }
	.menu-trigger span { position:absolute; left:0; width:100%; height:4px; background-color:#aaa; border-radius:4px; }
	.menu-trigger span:nth-of-type(1) { top:0; }
	.menu-trigger span:nth-of-type(2) { top:13px; }
	.menu-trigger span:nth-of-type(3) { bottom:0; }
	.menu-trigger.active span:nth-of-type(1) { -webkit-transform:translateY(13px) rotate(-45deg); transform:translateY(13px) rotate(-45deg); }
	.menu-trigger.active span:nth-of-type(2) { opacity:0; }
	.menu-trigger.active span:nth-of-type(3) { -webkit-transform:translateY(-13px) rotate(45deg); transform:translateY(-13px) rotate(45deg); }
	#overlay { position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); height:100%; width:100%; margin-left:-100%; z-index:9999; }
	nav { overflow: scroll; position: fixed; top: 0; left: 0; width: 260px; margin-left: -280px; height: 100%; background: #f0f0f0; z-index: 9999; }
	nav ul:first-child::before { content: "MENU"; display: block; color: #fff; font-size: 1.5em; text-align: center; letter-spacing: 6px; width: 260px; padding: 20px 0; background: #666; }
	nav ul { width: 260px; }
	nav ul li { position: static; float: none; text-align: left; width: 260px; padding: 0; }
	nav ul li a { color: #000; padding-left: 1em; background: #f0f0f0; transition: none; }
	nav ul li ul { position: static; top: 100%; left: 0; width: 100%; }
	nav ul li ul {display: none;}
	nav ul li ul li ul {display: none;}
	nav ul li ul li { overflow: visible; width: 100%; height: 100%; transition: none; }
	nav ul > li:hover > a { background: #f0f0f0; }
	nav ul > li:hover li:hover > a {  background: #6a6a6a; }
	nav ul > li:hover > ul > li { overflow: visible; height: 100%; }
	nav ul li ul li:hover > ul > li { overflow: visible; height: 100%; }
	nav ul li ul li ul li a {  background: #363636; }
	nav ul li:hover ul li ul li a:hover {  background: #8a8a8a; }
	nav ul li ul li a { color: #fff; padding-left: 1em; background: #6a6a6a; transition: none; }
	nav ul li ul li ul li a { color: #fff; padding-left: 2em; background: #8a8a8a; }
	nav > ul > li > ul > li > a { border-top: 1px solid rgba(255,255,255,0.2); margin-top: -2px; }
    nav > ul > li > ul > li > ul > li > a { border-top: 1px solid rgba(255,255,255,0.2); margin-top: -2px; }
	nav > ul > li  { border-bottom: 1px solid #b3b3b3; }
	nav > ul > li > ul > li { border-bottom: 1px solid #3d3d3d; }
	nav > ul > li > ul > li > ul > li { border-bottom: 1px solid #4d4d4d; }
	nav > ul > li > ul > li > ul > li:last-child { border-bottom: none; }
	.toggle_menu, .toggle_child { position: relative; }
	.toggle_menu span { position: absolute; display: inline-block; top: 26px; right: 1em; }
	.toggle_child span { position: absolute; display: inline-block; top: 26px; right: 2em; }
	nav > ul > li { border-left: none; }
	nav > ul > li > a { border-left: none; }
	nav > ul > li:last-child { border-right: none; }
	nav > ul > li:last-child > a { border-right: none; }
}