/* Superfish reloaded
================================================
This is the default stylesheet for the store related elements. */


/*+clearfix {*/
ul.sf-menu:after { content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; }
ul.sf-menu { display:inline-block; }
ul.sf-menu {
/*\*/
	display: table;
	table-layout: auto;
	width: 100%;
/**/
	-height: 1px;
}
/*+}*/


/*reset the menu*/
ul.sf-menu, ul.sf-menu * { margin: 0; padding: 0; list-style: none; }

/*[clearfix]*/
ul.sf-menu {
	/*+placement:margin-auto 0px 0px;*/
	margin: 0 auto;
	position: relative;
	left: 0px;
	top: 0px;
}

ul.sf-menu { line-height: 1; }
ul.sf-menu li {position: relative;display: table-cell;}

/* ## first level ## */
ul.sf-menu a { 
	display: block;
	position: relative;
	padding: 0.3em 20px;
	text-decoration: none;
	color: #000;
	border: 1px solid #888888;
	line-height: 2em;
	background:#ccc;
	font-size:1em;
	text-align: center;
}
ul.sf-menu ul li a { margin-right: 0; line-height:1em; }

/* ## 2nd level ## */
ul.sf-menu li ul {
	position: absolute;
	display: none;
	padding:0;
	visibility: hidden;
	top: 54px; /*top = top nav bar height*/
	width: 12em;
	left: 0;
	background:#fff;
    -webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.15);
        box-shadow: 0 0 2px 1px rgba(0,0,0,0.15);
}
/*shows 2nd level / dropdown*/
ul.sf-menu li:hover ul,
ul.sf-menu li.sfHover ul {
	visibility: visible;
	display: inline-block;
	z-index: 99;
}

ul.sf-menu li ul li { padding:3px 0; border-bottom:1px solid #ccc; }

/* ## 3rd level ## */

/*hide 3rd level offscreen*/ 
ul.sf-menu li:hover ul ul,
ul.sf-menu li.sfHover ul ul { top: -999em; }

ul.sf-menu li ul li ul {
	left: 10em;
	display: none;
	visibility: hidden;
	top: 0em;
	left: 12em; /*left = 1st level width*/
	top: 0;
}

/*shows 3rd level*/ 
ul.sf-menu li ul li:hover > ul, ul.sf-menu li ul li.sfHover > ul { top: 0em; }

/*4th level*/
/*last level, just style, no superfish disclosure, just copy the above recipe to add more levels!*/
ul.sf-menu li ul li ul li ul { /*hide 4th level*/ top: -999em; }
ul.sf-menu li ul li ul li ul { left: 10em; }
ul.sf-menu li ul li ul li:hover ul,
ul.sf-menu li ul li ul li.sfHover ul { /*show 4th level*/ top: 0em; }

/*hover state / xpath*/
.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu a:focus, 
.sf-menu a:hover, 
.sf-menu a:active { outline: 0; }

/*arrows
.sf-menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; /*trigger ie7 haslayout so spans position accurately }
.sf-sub-indicator {
	position: absolute;
	display: block;
	right: 0.60em;
	top: 0.75em;
	width: 16px;
	height: 16px;
	overflow: hidden;
}
.sf-sub-indicator:after {
    position:absolute;
    right:0;
    top:0;
	font-family: 'icomoon';
	speak: none;
    content: "\25be";
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.sf-menu li.sfHover .sf-sub-indicator { }
*/
/*submenu arrows right*/
ul.sf-menu li.sfHover ul li .sf-sub-indicator { top:.5em; background-position: 0px 0px; }
.sf-menu li.sfHover li.sfHover .sf-sub-indicator { background-position: -10px 0px; }
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }


/* ## Main Navigation Theme ## */

	.mainNav {}
    .mainNav ul.sf-menu >  li > a {
        background:none; 
        border:0; 
        color: #9a1c20;
        font-size: 1em;
        font-weight: 700;
        line-height: 1;
        padding: 20px 30px;
        text-transform: uppercase;
		transition: all 0.3s ease-in-out;
    }
    
    ul.sf-menu li ul li {padding: 0; float: none;display: block;}

    ul.sf-menu ul li a {
        background: none;
        border: 0 none;
        color: #b11f28;
        font-size: 0.875em;
        line-height: 1.25em;
        padding: 10px 15px;
		transition: all 0.3s ease-in-out;
    }

    .mainNav ul.sf-menu li:first-child a {}
    .mainNav ul.sf-menu li:last-child a {}
    /*.mainNav ul.sf-menu li:nth-child(-n+3) a {padding: 20px 30px 20px 0px;}
    .mainNav ul.sf-menu li:nth-child(5) a,.mainNav ul.sf-menu li:nth-child(6) a,.mainNav ul.sf-menu li:nth-child(7) a {padding: 20px 0px 20px 30px;}
*/



	.mainNav .menuLink { display:none; }

    .menuLink{ display:none; position:absolute; margin:0 0 0 auto; width:40px; height:40px; cursor:pointer; z-index:1000;}
    .menuLink .activeBG {position:absolute; width:60px; height:60px; left:-13px; top:-12px; background:#333333; -webkit-border-radius: 0 4px 4px 0;border-radius: 0 4px 4px 0; display:none;}
		

@media only screen and (min-width: 53.4375em) {
	.outerContainer {min-height:100px !important;}
	.mainNav { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height:30px !important;}
    .siteHeader .upperHeader .container,
    .siteHeader .lowerHeader .container {padding: 0 15px;}
    
    .mainNav .sf-menu li a:hover,
	.mainNav .sf-menu li.sfHover > a { background-color:#9e1d26;  color: #ffffff;}
}

/* Mobile Navigation */
/* 16px baseline (Not 767px, 855px) */
@media only screen and (max-width:53.4375em) {

	.outerContainer {position:relative;}
    .siteHeader .upperHeader .container,
    .siteHeader .lowerHeader .container {padding: 0;}
	.mainNav {
        position: relative; 
        height:auto; 
        position:absolute; 
        left:-80%; 
        top:0px; 
        width:80%;
        z-index:100; 
        background: #a11d23;
        transition: all .3s out;
        -webkit-box-shadow:inset -20px 0 15px -15px rgba(0,0,0,0.5);
        box-shadow:inset -20px 0 15px -15px rgba(0,0,0,0.5);
    }
    .nav-open{
        position: fixed;
        
        left: 0;
        
    }
    .nav-container {
        position: static;
    }

    .nav-container .grid_12 {
        position: static;
    }

    .no-js .menuLink { display: none;}
    ul.sf-menu {margin-left: auto; margin-right: auto;}
    
    .menuLink {
        display:inline-block !important;
        padding:10px;
        color:#99141D;
        font-size: 2em;
        line-height: 1;
        cursor:pointer;
        z-index: 9000;
    }
    
    .activeMenu {}
    .activeMenu .activeBG {display:block;}

    .menuLink:hover,
    .menuLink:focus { color: #99141D; text-decoration: none; }

    .mainNav ul { display: block;}
    .mainNav ul ul {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        display: none !important;
    }
    .mainNav ul li.active > ul,
    .mobile-landing .mainNav > ul,
    .no-js .mainNav > ul {display: block !important; visibility: visible !important;}

    .mainNav.active > ul { display: block}

    .sf-sub-indicator { 
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 20%;
        font-weight: bold;
        line-height: 40px;
        font-weight:bold;
        text-align:center;
        color: #ffffff;
    }
    
    .sf-sub-indicator:after {
        position:absolute;
        right:15px;
        top:15px;
	    font-family: 'icomoon';
	    speak: none;
        content: "\ea0a";
	    font-style: normal;
	    font-weight: normal;
	    font-variant: normal;
	    text-transform: none;
	    line-height: 1;
	    -webkit-font-smoothing: antialiased;
    }
     .showSub .sf-sub-indicator:after { content: "\ea0b"; }
    
    .sf-sub-indicator .icon-more {font-weight:bold; font-size:1.563em; display:inline-block; padding:5px 0 0 0;}

    .mainNav ul.sf-menu li { display: block; float: none; margin:0; border:0px; padding:0px; border-bottom: 1px solid #911a1f;}

    .mainNav ul.sf-menu li.showSub {background: #911a1f;}
    .mainNav ul.sf-menu li.showSub ul {display:block !important; visibility:visible !important; background: #771216; border:0px; border-bottom: 1px solid #911a1f;  padding:0;}
    .mainNav ul.sf-menu li.showSub ul li {}
    .mainNav ul.sf-menu li.showSub ul li a {font-size: 0.875em; color: #ffffff;}
    .mainNav .sf-menu a { display: block; padding: 13px 10px; font-size: 1.125em; color:#ffffff !important;}
    .mainNav .sf-menu li.on > a {background:#a11d23; color:#ffffff;}

    .mainNav .sf-menu li a:hover,
    .mainNav .sf-menu li.sfHover > a { background:#911a1f; color:#ffffff; -webkit-box-shadow:inset -20px 0 15px -15px rgba(0,0,0,0.5); box-shadow:inset -20px 0 15px -15px rgba(0,0,0,0.5);}

    .mainNav .sf-menu ul li a { padding:13px 13px; }
    .mainNav ul ul li a:hover,
    .mainNav ul ul li a:focus { background: #4c4d4f; }

}

@media only screen and (min-width: 48em) and (max-width: 59.938em) 
{
    .mainNav ul.sf-menu > li > a {padding: 20px 10px;}
}