@charset "utf-8";

.sidenav { position:fixed; top:60px; width:0px; min-height:calc(100% + 60px); border-right:1px solid #ccc; background:#f4f4f4; display:block; z-index:300; margin-top:-60px; }
.sidenav .sidenav_top { width:230px; height:50px; padding-top:10px; border-right:1px solid #2a386f; background:#35478c; text-align:center; /*display:none;*/ }
.sidenav .sidenav_topBottom { display:none; }



@media (max-width:768px){
	.sidenav {
		position: fixed; /* Stay in place */
		top:60px;
		width: 0; /* 0 width - change this with JavaScript */
		overflow-x: hidden; /* Disable horizontal scroll */
		padding-top: 0px; /* Place content 60px from the top */
		transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
		background:#f4f4f4;
		display:block;		
	}
	
	.sidenav .sidenav_top {  }
	.sidenav .sidenav_top h1 { padding-right:10px;}
	.sidenav .sidenav_top a.closebtn { position:absolute; right:10px; top:5px;    transition: 0.3s; }
	.sidenav .sidenav_top a.closebtn:link,
	.sidenav .sidenav_top a.closebtn:visited { color:#888; font-size:36px; }
	.sidenav .sidenav_top a.closebtn:active,
	.sidenav .sidenav_top a.closebtn:focus,
	.sidenav .sidenav_top a.closebtn:hover { color:#fff; }
}