@charset "utf-8";

.sidenav { position:relative; display:none; z-index:1000000000; }

@media (min-width:768px) and (max-width:1024px){
	/* The side navigation menu */
	.sidenav {
		height: 100%; /* 100% Full-height */
		width: 0; /* 0 width - change this with JavaScript */
		position: fixed; /* Stay in place */
		z-index: 1000000; /* Stay on top */
		top: 0;
		left:-20px;
		background-color: #303847; /* Black*/
		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 */
		display:block;
	}
	
	/* The navigation menu links */
	.sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #818181;
		display: block;
		transition: 0.3s
	}
	
	/* When you mouse over the navigation links, change their color */
	.sidenav a:hover, .offcanvas a:focus{
		color: #f1f1f1;
	}
	
	/* Position and style the close button (top right corner) */
	.sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 36px;
	   
	}
	
	/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
	#main {
		transition: margin-left .5s;
		padding: 20px;
	}
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}


@media (min-width:768px) and (max-width:1024px){
	.sidenav h1 { height:70px; padding:15px 0 0 20px; box-sizing:border-box; }
	
	
	.sideAllmenu { width:100%; padding:0 15px; padding-bottom:100px; }
	
	.sideAllmenu ul.mdepth1 { width:100%; border-top:2px solid #00578e; }
	.sideAllmenu ul.mdepth1 li { position:relative; width:100%; display:block; border-bottom:1px solid #3e4656;  }
	.sideAllmenu ul.mdepth1 li a:link,
	.sideAllmenu ul.mdepth1 li a:visited { padding:12px 0 12px 15px; background:url(/images/common/sidemenu_depth1_bltoff.gif) no-repeat right 50%; text-decoration:none; color:#ccc; font-weight:bold; font-size:16px; display:block; transition:0.3s; }
	.sideAllmenu ul.mdepth1 li a:active,
	.sideAllmenu ul.mdepth1 li a:focus,
	.sideAllmenu ul.mdepth1 li a:hover,
	.sideAllmenu ul.mdepth1 li a.select { background:url(/images/common/sidemenu_depth1_blton.gif) no-repeat right 50%; color:#fff; }
	
	.sideAllmenu ul.mdepth1 li ul.mdepth2 { width:100%; border-top:none; background:#159ef0;  display:none;}
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li { width:100%; border-bottom:none; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a:link,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a:visited { padding:10px 25px 10px 25px; text-decoration:none; background:none; color:#053450; font-weight:normal; font-size:14px; display:block; transition:0.3s;  border-top:1px solid #138bd4; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a:active,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a:focus,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a:hover,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.select { background:none; color:#fff; font-weight:bold; }
	

	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.bltDepth:link,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.bltDepth:visited { background:url(/images/common/sidemenu_depth2_bltoff.gif) no-repeat right 50%; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.bltDepth:active,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.bltDepth:focus,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.bltDepth:hover { background:url(/images/common/sidemenu_depth2_blton.gif) no-repeat right 50%; }



	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 { width:100%; border-top:none; background:#0c78b8; display:none; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li { width:100%; border-bottom:none; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li a:link,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li a:visited { padding:10px 0 10px 39px; background:url(/images/common/sidemenu_depth3_bltoff.gif) no-repeat 25px 50%; text-decoration:none; color:#add5f7; font-weight:normal; font-size:14px; display:block; transition:0.3s;  border-top:1px solid #1a80bc; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li a:active,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li a:focus,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li a:hover { background:url(/images/common/sidemenu_depth3_blton.gif) no-repeat 25px 50%; color:#fff;  }


	.sideAllmenu ul.mdepth1 li .icon { position:absolute; right:10px; top:10px; }
}

@media (max-width:767px){
	/* The side navigation menu */
	.sidenav {
		position:relative;
		height: 100%; /* 100% Full-height */
		width: 0; /* 0 width - change this with JavaScript */
		position: fixed; /* Stay in place */
		z-index:10000000; /* Stay on top */
		top: 0;
		left: 0;
		background-color: #303847; /* Black*/
		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 */
		display:block;
	}
	
	/* The navigation menu links */
	.sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #818181;
		display: block;
		transition: 0.3s
	}
	
	/* When you mouse over the navigation links, change their color */
	.sidenav a:hover, .offcanvas a:focus{
		color: #f1f1f1;
	}
	
	/* Position and style the close button (top right corner) */
	.sidenav .closebtn {
		position: absolute;
		top: 7px;
		right: 10px;
		font-size: 36px;
	   
	}
	
	/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
	#main {
		transition: margin-left .5s;
		padding: 20px;
	}
	
	
	.sidenav h1 { height:70px; padding:15px 0 0 20px; box-sizing:border-box; }	
	
	.sideAllmenu { width:100%; padding:0 15px; padding-bottom:100px; }
	
	.sideAllmenu ul.mdepth1 { width:100%; border-top:2px solid #00578e; }
	.sideAllmenu ul.mdepth1 li { position:relative; width:100%; display:block; border-bottom:1px solid #3e4656;  }
	.sideAllmenu ul.mdepth1 li a:link,
	.sideAllmenu ul.mdepth1 li a:visited { padding:12px 0 12px 15px; background:url(/images/common/sidemenu_depth1_bltoff.gif) no-repeat right 50%; text-decoration:none; color:#ccc; font-weight:bold; font-size:16px; display:block; transition:0.3s; }
	.sideAllmenu ul.mdepth1 li a:active,
	.sideAllmenu ul.mdepth1 li a:focus,
	.sideAllmenu ul.mdepth1 li a:hover,
	.sideAllmenu ul.mdepth1 li a.select { background:url(/images/common/sidemenu_depth1_blton.gif) no-repeat right 50%; color:#fff; }
	
	.sideAllmenu ul.mdepth1 li ul.mdepth2 { width:100%; border-top:none; background:#159ef0;  display:none;}
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li { width:100%; border-bottom:none; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a:link,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a:visited { padding:10px 25px 10px 25px; text-decoration:none; background:none; color:#053450; font-weight:normal; font-size:14px; display:block; transition:0.3s;  border-top:1px solid #138bd4; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a:active,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a:focus,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a:hover,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.select { background:none; color:#fff; font-weight:bold; }

	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.bltDepth:link,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.bltDepth:visited { background:url(/images/common/sidemenu_depth2_bltoff.gif) no-repeat right 50%; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.bltDepth:active,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.bltDepth:focus,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li a.bltDepth:hover { background:url(/images/common/sidemenu_depth2_blton.gif) no-repeat right 50%; }
	
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 { width:100%; border-top:none; background:#0c78b8; display:none; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li { width:100%; border-bottom:none; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li a:link,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li a:visited { padding:10px 0 10px 39px; background:url(/images/common/sidemenu_depth3_bltoff.gif) no-repeat 25px 50%; text-decoration:none; color:#add5f7; font-weight:normal; font-size:14px; display:block; transition:0.3s;  border-top:1px solid #1a80bc; }
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li a:active,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li a:focus,
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li a:hover
	.sideAllmenu ul.mdepth1 li ul.mdepth2 li ul.mdepth3 li a.select {background:url(/images/common/sidemenu_depth3_blton.gif) no-repeat 25px 50%; color:#fff;  }


	.sideAllmenu ul.mdepth1 li .icon { position:absolute; right:10px; top:10px; }
}