@import url(//fonts.googleapis.com/css?family=Philosopher);

#level_1 {
	list-style: none;
	padding: 0px;
	margin: 0px;   
}
#level_1 li {
	float: left;
	display: block;
	background: none;
	position: relative;
	z-index: 999;
	margin: 0 0px;
}

#level_1 li a {
	display: block;
	padding: 0;
	text-decoration: none;
	color: #fff!important;
	zoom: 1;
	padding: 25px 8px;
	text-transform: capitalize;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	cursor:pointer
}
#level_1 li a.donate {
	background:#8c2e00!important;
	color:#fff!important
}
#level_1 li a.donate:hover {
	background:#0c8400!important;
	color:#fff!important
}
#level_1 li a:hover, #level_1 li a.hov {
	background:#ffe523;
	color:#000!important
}

/**********************************************************/
 
#level_1 #level_2 {
	position: absolute;
	opacity: 0;
	padding: 0px;
	margin: 0px;
	left:-15px;
	border-top: 2px #8c2e00 solid;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
#level_1 #level_2 li {
	width: 200px;
	float: left;
	text-align: left;
	display:none ;
	position:relative
}
#level_1 #level_2 a {
 	color:#fff!important;
	border-bottom: 1px #fb9f0f solid;
	background:#f09300;
	padding:10px 10px!important;
}
#level_1 #level_2 li:last-child a {
	border: none;
}

#level_1 #level_2  li a:hover {
	background:#ffe523;
	color:#000!important
}

/**********************************************************/

#level_1 #level_2 #level_3 {
	position: absolute;
	opacity: 0;
	padding: 0px;
	margin: 0px;
	top:-2px;
 	left:90%; 
	border-top: 2px #8c2e00 solid;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
#level_1 #level_2 #level_3 li {
	width: 310px; 
	float: left;
	text-align: left;
	display:none;
	position:relative
}

#level_1 #level_2 #level_3 a {
 	color:#fff!important;
	border-bottom: 1px #fb9f0f solid!important;
	background:#f09300;
	padding:10px 10px!important;
}
 
#level_1 #level_2 #level_3 li:last-child a {
	border: none!important;
}

#level_1 #level_2 #level_3   li a:hover {
	background:#ffe523;
	color:#000!important
}

/**********************************************************/

#level_1 #level_2 #level_3 #level_4 {
	position: absolute;
	opacity: 0;
	padding: 0px;
	margin: 0px;
	top:-2px;
 	left:90%; 
	border-top: 2px #8c2e00 solid;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
#level_1 #level_2 #level_3 #level_4 li {
	width: 120px; 
	float: left;
	text-align: left;
	display:none;
	position:relative
}

#level_1 #level_2 #level_3 #level_4 a {
 	color:#fff!important;
	border-bottom: 1px #fb9f0f solid!important;
	background:#f09300;
	padding:10px 10px!important;
}

#level_1 #level_2 #level_3 #level_4   li a:hover {
	background:#ffe523;
	color:#000!important
}
 
#level_1 #level_2 #level_3 #level_4 li:last-child a {
	border: none!important;
}
 
/**********************************************************/
 
#level_1 li:hover #level_2 {
	left:0px;
	opacity: 1;
}
#level_1 li:hover #level_2 li {
	display:block
} 

#level_1 #level_2 li:hover #level_3 {
	left:100%;
	opacity: 1;
}

#level_1 #level_2 li:hover #level_3 li {
	display:block
}

#level_1 #level_2 #level_3 li:hover #level_4 {
	left:100%;
	opacity: 1;
}

#level_1 #level_2 #level_3 li:hover #level_4 li {
	display:block
}
/**********************************************************/

#level_1 li:nth-child(3) #level_2  li {
	width: 150px; 
}

#level_1 li:nth-child(3) #level_2 li:nth-child(2) #level_3 li {
	width: 200px; 
}

#level_1 li:nth-child(3) #level_2 li:nth-child(3) #level_3 li {
	width: 160px; 
}

#level_1 li:nth-child(5) #level_2 li:nth-child(4) #level_3 li {
	width: 160px; 
}

 
/**********************************************************/

 @media only screen and (min-width:320px) and (max-width:767px) {
#level_1 {
display:none
}
}
 @media only screen and (min-width:768px) and (max-width:991px) {
 #level_1 li a {
 padding: 11px 10px;
}
}
 @media only screen and (min-width:992px) and (max-width:1199px) {
 #level_1 li a {
 padding: 25px 6px;
}
}