/* Menu General Styles */
#meganav {
	background: #08A3DB;
	text-align: center; /* or change the value to left to align left*/
}
#meganav a {
	color: #FFF;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
}
#meganav,
#meganav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#meganav ul li {
	position: relative;
	list-style: none;
}
#meganav ul li a {
	padding: 10px 20px;
	display: block;
	text-decoration: none;

}
#meganav a:hover {
	background: #000;
}


/* Level 1 Drop Down Menu */
#meganav ul > li {
	display: inline-block;
	vertical-align: top;
	list-style: none;
	margin: 0;
	margin-left: -4px; /* solve the 4 pixels spacing between list-items */
}
#meganav ul > li:first-child {
	margin-left: 0;
}
#meganav ul > li > a {}
#meganav ul > li > a:hover {}



/* Level 2 */
#meganav ul > li > ol {
	text-align: left;
	width: auto; /* change auto value with 200px if you want a bigger menu */
	display: none;
	background: #5DBB04;
	position: absolute;
	top: 100%;
	min-width: 150px;
	left: 0;
	 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
	z-index: 9999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
#meganav ul > li:hover > ol {
	display: block;
	margin: 0;
	padding: 0;
}
#meganav ul li a {}
#meganav ul li a:hover {}



/* Level 3 */
#meganav ul > li > ol > li > ol {
	text-align: left;
	display: none;
	background: #E7B400;
	position: absolute;
	left: 100%;
	top: 0;	
	 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
	min-width: 150px;
	margin: 0;
	padding: 0;
	z-index: 9999999;
}
#meganav ul > li > ol > li:hover > ol {
	display: block;
}
#meganav ul li ol li {	margin: 0;}
#meganav ul ol li a {}
#meganav ul ol li a:hover {}