sidenav-begin{
	display:block;
	overflow:hidden;
	width:260px;
} 
sidenav-begin,
sidenav-begin nav1 a,
sidenav-begin nav2 a,
sidenav-begin nav3 a,
sidenav-begin nav4 a{
	font-size: 12px;
	white-space:nowrap;
	overflow:hidden;
}
/**Global Variable********************************************************/
sidenav-begin a{
	display:block;
	text-decoration: none;
	color:#384f5a; 
}
sidenav-begin a.current{
	color:#0089d3; 
	font-weight:bold; 
	}
/**Dropdown Wrapper********************************************************/
wrapper{ 
	display:block;
	} 
wrapper wrapper{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #0089d3;
	}
wrapper wrapper wrapper{
	margin-left:10px;
	}

/**Arrow********************************************************/
sidenav-begin arw{
	float:right;
	}
sidenav-begin arw:after{
	font-family: FontAwesome; 
	content:'\f107';
	}
sidenav-begin arw.xclose:after{
	font-family: FontAwesome;
	content:'\f00d';
	}
/**Sub Level 1********************************************************/
nav1 {
	cursor:pointer;
	display:block;
	padding: 5px 20px;
	outline:none;
	margin-bottom:3px;
	text-decoration: none;
	background-color: #CCC;
	color: #333;
	min-width:250px;
}
nav1:hover{
	color:#fff;
	background-color: #0089d3;
}
nav1:hover a{
	color:#fff;
	}
/**Sub Level 2********************************************************/
nav2{
	cursor:pointer;
	display:block;
	padding: 5px 20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	}
nav2:hover a,
nav2:hover{
	color:#0089d3;
	}
/**Sub Level 3********************************************************/
nav3 a{
	cursor:pointer;
	display:block;
	padding: 5px 20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;	
	}
nav3 a:hover{
	color:#0089d3;
	}
nav3 a:before{
	content:'- ';}
/**Sub Level 4********************************************************/
nav4 a{
	cursor:pointer;
	display:block;
	padding: 5px 20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;	
	}
nav4 a:hover{
	color:#0089d3;
	}
nav4 a:before{
	content:'- ';}

	
/*Burger temporary act as title first****************************************/
burger{
	display:block;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
	padding:10px 0px;
	font-size: 16px;
}
burger:before{
	content:'Select Category';
	text-transform: uppercase;
	}	
@media only screen and (max-width: 620px) {
/**Mobile Burger Menu********************************************************/
burger{
	padding:10px 20px;
	background-color:#333333;
	color:#fff;
}
burger:after{
	float:right;
	font-family: FontAwesome;
	content:'\f0c9';
}
sidenav-begin{
	width:auto;
}

}