nav { position:fixed; top:50px; left:-400px; width:400px; height:calc(100vh - 50px); background:#767676; z-index:3000; box-sizing: content-box; padding-bottom: 50%; scrollbar-width: none; overflow-y: scroll } 
nav .wrapper { position:relative; width: 100%; margin:0; padding:0; font-size:18px; text-align:left; list-style-type:none;  }

/* BASIK */
nav .wrapper li {
	float:left; width:100%; padding:2px 5% 0 10%; box-sizing:border-box; list-style-type: none; position: relative;
}
/* PREMIER RANG */
nav .wrapper li a, nav .wrapper ul li a:visited { font-family: 'Abel', sans-serif; margin: 0; display:block; text-decoration:none; color: #FFF; text-align:left; font-size: 18px; font-weight:300;  }
nav .wrapper li a.title { font-size:25px; margin:20px 0 0 0; cursor:pointer; }
nav .wrapper li a.title2 { font-size:25px; margin:20px 0 0 0; cursor:pointer; }
nav .wrapper li ul { display:none; list-style-type: none }
/* rollover */
nav .wrapper li:hover a, nav .wrapper ul li a.on { font-weight:500; }																							
/* SECOND RANG */
nav .wrapper li:hover ul li:hover a.hide { color: #fff; }