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


#cssmenu {
  font-family: 'Raleway', sans-serif;
  padding: 0;
  line-height: 1;
  display: block;
  color: #FFF;
  position: relative;
  z-index: 10000;
  font-size: 0px;
 
}

#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%; 
  display: inline-block;
  text-align: center;
 }

/*
#cssmenu ul:after {
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
*/

/*setting up the main buttons and spacing*/
#cssmenu ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  /*background-color: rgba(255,255,255,.5);*/
  width: 16.66666666%;
}

/*all <a> tags in the nav menu get this, regardless of level, unless overridden*/
#cssmenu ul li a {
  text-decoration: none;
	font-weight: bold;
	display: block;
	font-family: "Raleway", sans-serif;
	text-transform: uppercase;
	color: #f5e5c1;
	font-size: 16px;
	width: 100%;
	box-sizing: border-box;
	border-right: 1px solid #ccc;
	padding: 15px 0;
	}

#cssmenu ul li a:hover {
	  background-color: #F5E5C1;
	  color: #537559;
	  /*rgba(255,255,255, .5);*/
 }

	
/*only the first level of a tags (not sub menu)*/
#cssmenu > ul > li > a {
  z-index: 2;
  position: relative;
}

#cssmenu > ul > li:first-of-type > a {	 
	border-left: 1px solid #ccc;
}
	 
#cssmenu > ul > li:last-of-type > a {	 
	/*border-right: none;*/
}



/* ################## 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 .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
  }

/*...they show up when the parent li is hovered on*/
#cssmenu > ul > li:hover > ul {
  left: 0;
   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: #3d2b2e/*#8F8D69*/;
  font-size: 12px;
}

#cssmenu > ul > li > ul > li:last-of-type { /*round corners of bottom of last one*/
	/*-webkit-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;*/
	border-bottom: 5px solid #537559;
}

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

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

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

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



/* ################### CARET STUFF ################### */

/* the carets are added to anything with a has-sub menu via jquery in the docready */

/*default state for right caret is visible...*/
#cssmenu a .fa-caret-right {
	float: left; 
}
/*...default state for left caret is not diplayed*/
#cssmenu a .fa-caret-down,
#cssmenu ul li ul li.has-sub ul li.has-sub a .fa-caret-down {
	float: left; 
	position: relative;
	left: 10px;
	display: none;
}

/*we turn them on and off with a hover*/
#cssmenu > ul > li:hover a .fa-caret-right {
	display: none;
}

#cssmenu > ul > li:hover a .fa-caret-down {
	display: inherit;
}


/* carets for the sub-sub items */
.subCaret1 {
	display: inherit !important;
}

.has-sub.sub-sub:hover a .subCaret1 {
	display: none !important;
}

.has-sub.sub-sub:hover a .subCaret2 {
	display: inherit !important;
	float: right !important; 
}

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


#cssmenu ul li ul li:hover > ul {
  left: 100%;
  top: 0;
  display: block;

}
#cssmenu ul li ul li:hover > ul > li {
	display: block;
  position: relative;
  background-color: #952A05;
  width: auto;
}

#cssmenu ul li ul li:hover > ul > li > a {
  color: #245E4F;
  border-bottom: 1px dotted #cccccc;
}