/* 

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 allows the menu lines to be beside the logo with overlapping - allowing the logo to be clickable still */
.menu-trigger {
    position: relative;
    font-size: 0.9em;
    display: block;
    cursor: pointer;
    height: 52px;
    padding-top: 0px;
    padding: 0px 20px;
    line-height: 12px;
    text-align: left;
    justify-content: flex-end;
    display: flex;
    align-content: center;
    align-items: center;
    width: 40px;
    margin-left: auto;
}
    
/* 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-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: #fff;
	position: relative;
    border-bottom: 1px solid #ddd;
}

/* 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;
	letter-spacing: 0.05em;
	vertical-align: middle;			
	text-align: left;
	color: #000;
    text-transform: uppercase;
}

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

/* CATEGORY LEVEL */
.dropdown ul li { 
	position: relative;
	display: block;
	text-align: left;
	background-color: #fff;
    border-bottom: 1px solid #ddd;
}

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

/* 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: #ddd;
	top: 0px;
	bottom: 0px;
	right: 0px;
	cursor: pointer;
	/*box-shadow: inset 0 -1px rgba(0,0,0,0.2);*/
	/*border-left: 1px solid #FFF;*/
}

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

/* 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 #000;
    border-top: 0.1em solid #000;
  -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;
}


/******************************************************** 
 * 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.    */