@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
treemenu{
	font-family: 'Roboto', sans-serif;
	line-height:2em;
	text-transform: uppercase;
	}
treemenu-begin{
	display:block;
	overflow:hidden;
	width:auto;
	max-width:360px;
} 
treemenu-begin,
treemenu-begin nav1 a,
treemenu-begin nav2 a,
treemenu-begin nav3 a,
treemenu-begin nav4 a{
	overflow:hidden;
	font-size: 12px; 
}

/**Global Variable********************************************************/
treemenu-begin a{
	display:block;
	text-decoration: none;
	color:#384f5a; 
}
treemenu-begin a.current{
	color:#C00; 
	font-weight:bold; 
	}
/**Dropdown Wrapper********************************************************/
wrapper{ 
	display:block;
	padding-left:10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #C00; 
	}


/**Arrow********************************************************/
treemenu-begin arw{
	float:right;
	}
treemenu-begin arw:after{
	font-family: FontAwesome; 
	content:'\f107'; 
	}
treemenu-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: #C00;
}
nav1:hover a{
	color:#fff;
	}
/**Sub Level 2********************************************************/
nav2{
	cursor:pointer;
	display:block;
	padding: 5px 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	}
nav2:hover a,
nav2:hover{
	color:#C00;
	}
/**Sub Level 3********************************************************/
nav3 a{
	cursor:pointer;
	display:block;
	padding: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;	
	font-size: 10px !important; 
	}
nav3 a:hover{
	color:#C00;
	}
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:#C00;
	}
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';
}
treemenu-begin{
	width:auto;
}

}