/* 

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

Section Background: #262626 --- 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;
	padding-left: 15px;
	font-size: 0.9em;
	display: block; 
	cursor: pointer;
	background-color: #DE1219;
    border-top: 1px solid #cd181f;
    border-bottom: 1px solid #cd181f;
	height:40px;
	padding-top:0px;
	padding-bottom:10px;
	line-height:12px;
	text-align: left;
}

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

.menu-trigger-label {
	position: absolute;
	top: 22%;
	left: 100px;
	display: inline-block;
	line-height: 28px;
	text-decoration: none;
	color: #FFF;
	font-size: 17px;
	padding-top:0px;
	/*padding: 14px 14px 0px;*/
	font-family: 'Open Sans', sans-serif;
	font-weight:normal;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	letter-spacing:1px;
}

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

/* This applies to the 1st section level display */
.parent {
	background-color: #DE1219;
	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: 16px;
	padding: 8px 30px 8px 20px;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 0.05em;
	vertical-align: middle;			
	border-bottom: 1px solid #cd181f;
	text-align: left;
	color: #FFF;
}

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

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

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

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

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

/* 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.2em solid #EFEFEF;
  border-top: 0.2em solid #EFEFEF;
  -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 {
  padding: 1.0rem 1rem 1.5rem 1rem;
  transition: .2s;
  cursor: pointer;
  user-select: none;
  border-radius: 0.57143rem;
  display: inline-block;
}

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


/* main line */
.menu-lines {
  display: inline-block;
  width: 3rem;
  height: 0.25rem;
  background: #FFF;
  border-radius: 0.28571rem;
  transition: 0.2s;
  position: relative;
  /*box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);*/
}

/* joined styles for top and bottom lines */
.menu-lines:before, .menu-lines:after {
  display: inline-block;
  width: 3rem;
  height: 0.25rem;
  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.8rem;
}
.menu-lines:after {
  top: -0.85rem;
}

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