/* This is a more simplified version of the menu that I created */


#cssmenu {
  padding: 0;
  display: block;
  color: #FFF;
  position: relative;
  z-index: 10000;
  font-size: 0; /*set at 0 to get rid of extraneous spacing */
}

#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%; 
text-align: right;
 }


/*setting up the main buttons and spacing*/
#cssmenu ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  width: auto;
}

/*all <a> tags in the nav menu get this, regardless of level, unless overridden*/
#cssmenu ul li a {
 	text-decoration: none;
	display: block;
	color: #fff;
	font-size: 18px; /* this has to be pixels, not ems, becuase of the font-size: 0 above */
	width: 100%;
	box-sizing: border-box;
		}

#cssmenu ul li:hover > a {
	color: #FED130;
	
 }




#cssmenu ul li.has-sub:hover > a {
	  background-color: rgba(255,255,255,.9);
	  color: #CA2126;
 }


	
/*only the first level of a tags (not sub menu)*/
#cssmenu > ul > li > a {
  z-index: 2;
  position: relative;
  margin-top: 13px;
  padding: 2px 10px 5px 10px;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
	 



/* ################## SUB MENU STUFF ################## */


/*the sub menus are initially out of sight, so they're "off," and... */
#cssmenu ul li ul {
  position: absolute;
  left: -9999px;
  top: auto;
  
  

   opacity: 0;
   transition: opacity .16s ease-in-out;
   -moz-transition: opacity .16s ease-in-out;
   -webkit-transition: opacity .16s ease-in-out;
 
 
}

/*...they show up when the parent li is hovered on*/
#cssmenu > ul > li:hover > ul {
  left: 0;
  border-bottom: 4px solid #FED130;
  
 

 opacity: 1;

}


/*formats (and overrides from top level formatting) for the sub menu items */
#cssmenu > ul > li > ul > li {
  width: 100%;
  display: block;
  background-color: rgba(255,255,255,.9);
  font-size: 12px;
  text-align: left;
}



#cssmenu > ul > li > ul > li a {
  border-right: none;
  padding: 5px 10px;
  color: #000;
  font-weight: normal;
  font-size: 13px;
  border-bottom: 1px dotted #fff;
}

#cssmenu > ul > li > ul > li a:hover {
  color: #CA2126;
}

#cssmenu > ul > li > ul > li:last-of-type a {
	border-bottom: none;
}

/* ################################################### */