/* 

Top Bar Background: #212121 --- Border: #303030

Section Background: #ffffff --- Hover: #303030  --- Border: #303030

Arrow Backgroud: #333333 --- Hover: #3d3d3d 

*/

/* This is required for the CSS transitions to not cause empty whitespace on the screen */

body {
	overflow-x: hidden;
}

/* Main div container on the control for opening and closing the menu as well as navigating "back" */
.menu-trigger {
    position: relative;
    font-size: 0.9em;
    display: block;
    cursor: pointer;
    background-color: transparent;
    height: 54px;
    padding-top: 0px;
    padding: 0px 20px 0px 20px;
    line-height: 12px;
    text-align: left;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    display: flex;
}

/* This is the label class applied to divs within the main div container */

.menu-trigger-label {
	position: absolute;
	top: 22%;
	left: 80px;
	display: none !important;
	line-height: 28px;
	text-decoration: none;
	color: #000;
	font-size: 17px;
	padding-top:0px;
	/*padding: 14px 14px 0px;*/
	font-family: 'Baloo 2', cursive;
	font-weight:normal;
	letter-spacing:1px;
}

/* Hides the xcsstitle div generated by xcss */
.xcsstitle { display:none; }

/* This applies to the 1st section level display */
.parent {
	background-color: #ffffff;
	position: relative;
}

/* This applies to all links within the menu */
.parent a {
	display: block;
	/*padding: 0.7em 31% 0.7em 1.8em;*/
	text-decoration: none;
	font-weight: normal;
	font-size: 15px;
	padding: 8px 30px 8px 20px;
	font-family: 'Baloo 2', cursive;
	letter-spacing: 0.05em;
	vertical-align: middle;			
	border-top: 1px solid #efefef;
	text-align: left;
	color: #000;
}

.parent a:hover {
	background-color: #efefef;
}

/* CATEGORY LEVEL */
.dropdown ul li { 
	position: relative;
	display: block;
	text-align: left;
	background-color: #ffffff; 
}

/* PAGE LEVEL */
.dropdown ul li ul li {
	position: relative;
	text-align: left; 
	background-color: #ffffff; 
}

/* div container control for expanding into the next tier for a certain Section/Category. */
.mp-arrow {
	position: absolute;
	display: inline-block;
	width: 25%;
	background-color: #fff;
	top: 0px;
	bottom: 0px;
	right: 0px;
	cursor: pointer;
    border-top: 1px solid #efefef;
	/*box-shadow: inset 0 -1px rgba(0,0,0,0.2);*/
	/*border-left: 1px solid #FFF;*/
}

.mp-arrow:hover {
	background-color: #efefef;
}

/* div element which makes up the arrow by setting a border top/right then rotating 45degrees with css */
.mp-arrow-inner {
	display: inline-block;
  font-style: normal;
  position: absolute;
  top: 14px;
  right: 45%;
  width: 0.67em;
  height: 0.7em;
border-right: 0.1em solid #888;
border-top: 0.1em solid #888;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
  -o-transform: rotate3d(0, 0, 1, 45deg);
  -ms-transform: rotate3d(0, 0, 1, 45deg);
}



/*********************************************************************
Technical CSS for how the trigger lines to arrow looks and behaves. 
Tinkering anything beyond this point may void warranty ;)
************************************************************************/

.menu-lines-button {
    transition: .2s;
    cursor: pointer;
    user-select: none;
    border-radius: 0.57143rem;
    top: -2px;
    position: relative;
}

.menu-lines-button:hover {  opacity: 1; }
.menu-lines-button:active { transition: 0; }


/* main line */
.menu-lines {
    display: inline-block;
    width: 2rem;
    height: 0.125rem;
    background: #fff;
    border-radius: 0.28571rem;
    transition: 0.2s;
    position: relative;
}

/* joined styles for top and bottom lines */
.menu-lines:before, .menu-lines:after {
  display: inline-block;
  width: 2rem;
  height: 0.125rem;
  background: #fff;
  border-radius: 0.28571rem;
  transition: 0.2s;
  position: absolute;
  left: 0;
  content: '';
  -webkit-transform-origin: 0.28571rem center;
  transform-origin: 0.28571rem center;
  /*box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);*/
}

.menu-lines:before {
  top: 0.6rem;
}
.menu-lines:after {
  top: -0.65rem;
}

.menu-lines-button.close {
  -webkit-transform: scale3d(0.8, 0.8, 0.8);
  transform: scale3d(0.8, 0.8, 0.8);
}

.menu-lines-button.arrow.close .menu-lines:before {
  top: 0.1rem;
 	width: 1.9rem;
 	left: -0.15rem;
}
.menu-lines-button.arrow.close .menu-lines:after {
	 top: -0.1rem;
 	width: 1.9rem;
 	left: -0.15rem;
}

.menu-lines-button.arrow.close .menu-lines:before {
   -webkit-transform: rotate3d(0, 0, 1, 40deg);
   transform: rotate3d(0, 0, 1, 40deg);
   -o-transform: rotate3d(0, 0, 1, 40deg);
   -ms-transform: rotate3d(0, 0, 1, 40deg);
}
.menu-lines-button.arrow.close .menu-lines:after {
   -webkit-transform: rotate3d(0, 0, 1, -40deg);
   transform: rotate3d(0, 0, 1, -40deg);
   -o-transform: rotate3d(0, 0, 1, -40deg);
   -ms-transform: rotate3d(0, 0, 1, -40deg);
}






/*********************************************************************
Technical CSS for governing how the menu works and behaves. 
Tinkering anything beyond this point may void warranty ;)
************************************************************************/
.mp-pusher {
	position: relative;
}

.mp-menu {
	position: absolute; 
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	text-align: left;
}

.mp-level {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

/* overlays for pusher and for level that gets covered */
.mp-pusher, .mp-level {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.2s;
}

/* First level */
.mp-menu > .mp-level,
.mp-menu > .mp-level.mp-level-open,
.mp-menu.mp-overlap > .mp-level,
.mp-menu.mp-overlap > .mp-level.mp-level-open {
	box-shadow: none;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	
}

/* cover */
.mp-cover .mp-level.mp-level-open {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	
}

/* content style */
.mp-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
    border-bottom: 1px solid #efefef;
}


/******************************************************** 
 * Bottom Horizontal Menu Styles                        * 
 ********************************************************/

/* Container div, mainly used to cascade defaults so that multiple menus 
   can coexist on a single page without having to share a layout and design. */
.bnav .xcsstitle {
    display: none;
}
.bnav {
	/*position: relative;
	background: #ddeeff;
	border: 1px solid #888888;
	border-width: 1px 0;
	width: 100%;
	z-index: 20;*/
}
/* Setup appearance of the top level menu "button", including background images*/
.bnav .button {
	/*float: left;
	z-index: 0;
	border: 1px solid #888888;
	background: #90cccc;
	background-image: url(../images/flyout_indicator.png/buttonbackbottom.gif);*/
}
/* Setup the currently active button to look different. Optional, but nice */
.bnav .activebutton {
	/*float: left;
	z-index: 0;
	border: 1px solid #888888;
	background-image: url(../images/flyout_indicator.png/buttonback.gif);*/
}
.bnav a {
	color: #fff;
    text-decoration: none;
}
.bnav a:hover {
	opacity: .75;
}
/* Hide the dot on unordered lists */
.bnav ul, .bnav li {
	padding: 0;
	margin: 0;
	list-style: none;
    margin-bottom: 15px;
}
/* You'll notice that .bnav is missing a number of cascaded defaults... 
   ithis s because (in this example) the bottom nav only shows the top 
   level of items. In other words, there are no fly-outs or dropdowns to 
   style. The SiteApex code will generate all of the html for the other 
   menu items but they will not display if you do not style them to.    */