#nav-wrap{position:relative;background:#000;z-index:100;}
#menu-icon{display:none;}
#nav,
#nav li{margin:0;padding:0;}
#nav li{list-style:none;float:left;margin-right:0px;}
#nav a{font-size:90%;padding:4px 25px;margin-top:2px;display:block;color:#fff;background:#000;text-decoration:none;}
#nav a:hover{transition:0.3s linear;color:#999;background:#fff;}
#nav ul{background:#fff;padding:2px;position:absolute;border:solid 1px #000;display:none;width:200px;}
#nav ul li{float:none;margin:0;padding:0;}
#nav li:hover > ul{display:block;}
@media (min-width:700px) and (max-width:1024px) {
#nav-wrap{width:100%;}
#nav a{padding:4px 7px;font-size:85%;}	
}
@media screen and (max-width:700px){
#nav-wrap{position:relative;}
#menu-icon{margin-left:7%;color:#000;width:20px;height:30px;background:url(../image/menu-icon.png) no-repeat 5px center;padding:5px 10px 0 20px;cursor:pointer;background-color:#000;display:block;}
#menu-icon:hover{background-color:#666;}
#menu-icon.active{background-color:#333;}
#nav{clear:both;position:absolute;top:38px;width:160px;z-index:10000;padding:5px;background:#000;border:solid 1px #999;display:none;}
#nav li{font-size:100%;clear:both;float:none;margin:25px 0 5px 10px;}
#nav a,
#nav ul a{font:inherit;background:none;display:inline;padding:3px;color:#fff;border:none;}
#nav ul{width:auto;position:static;display:block;border:none;background:inherit;}
#nav ul li{margin:3px 0 3px 15px;}
}