@charset "utf-8";

.sidenav { position:fixed; width:0; height:100%; display:block; z-index:1000000000;  }
.sidenav .sidenav_top { display:none; }



@media (min-width:768px) and (max-width:1024px){
	.sidenav { position:fixed; width:0; height:100%; display:block; z-index:1000000000;  }
	.sidenav .sidenav_top { display:none; }
}



@media (max-width:767px){
	.sidenav {
		position:relative;
		height: 100%; /* 100% Full-height */
		width: 0; /* 0 width - change this with JavaScript */
		position: fixed; /* Stay in place */
		z-index:10000; /* Stay on top */
		top: 0;
		left: 0;		
		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 { position:relative; width:230px; height:60px;  border-right:1px solid #2a386f; background:#35478c; display:block; }
	.sidenav .sidenav_top h1 { padding:10px 0 0 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; }
}