/*================================================================
                 SUPERFISH MENU ESSENTIAL STYLES
================================================================*/

/* Make sure to use specificity below rather than changing these styles*/

.sf-menu, .sf-menu * {margin:0; padding:0; list-style:none;}
.sf-menu {line-height:1.0;}
.sf-menu ul { position:absolute; top:-999em; width:14em; /* left offset of submenus need to match (see below) */ }
.sf-menu ul li {width:100%;}
.sf-menu li {float:left; position:relative;}
.sf-menu li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ }

.sf-menu a { display:block; position:relative; }

.sf-menu li:hover ul,
.sf-menu li.sfHover ul { left:0; top:33px; /* match top ul list item height */ z-index:99; }

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul { top:-999em; }

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul { left:14em; /* match ul width */ top:0; }

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul { top:-999em; }

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul { left:14em; /* match ul width */ top:0; }

/*** shadows for all but IE6 ***/
.sf-shadow ul { background: url(/cms/images/layout/menu/shadow.png) no-repeat bottom right; padding:0 9px 9px 0; }
.sf-shadow ul.sf-shadow-off { background: transparent; }

/*** 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:.75em;
	top:.8em;
	width:10px;
	height:10px;
	text-indent:-999em;
	overflow:hidden;
	background: url(/cms/images/arrows-ffffff.png) no-repeat 0px -100px;
}

a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator { background-position:-10px -100px; }

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator {background-position: -10px 0;}
.sf-menu ul a > .sf-sub-indicator {background-position: 0 0;}

/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}


/*================================================================
                      MAIN MENU SKIN
================================================================*/

.main-nav {z-index:1001;}

.main-nav ul { margin:0; padding:0; text-transform:uppercase;}

/* Temporary clearfix since we don't actually have a clearfix on sf-menu */
.main-nav .sf-menu:before, .main-nav .sf-menu:after { content: ""; display: table; }
.main-nav .sf-menu:after { clear: both; }
.main-nav .sf-menu { zoom: 1; }

/* Main Tier */
.main-nav .sf-menu { display:table; width:100%; }
.main-nav .sf-menu li { float:none; }
.main-nav .sf-menu > li { display:table-cell; vertical-align:middle; text-align:center; }
.main-nav .sf-menu > li:last-child {border-right:none;}
.main-nav .sf-menu > li .subMenu > a {
	position: relative;
    display: table;
    width: 100%;
    padding: 0;
    line-height: 1;
    font-weight: bold;
    text-transform: uppercase;
}
.main-nav .sf-menu > li .subMenu > a .menuText { display:table-cell; padding:10px; height:40px; vertical-align:middle; }
@media (min-width: 48em) {
	.main-nav .sf-menu > li .subMenu > a .menuText {text-align:center;}
	.main-nav .sf-menu > li .subMenu > a {
	    text-shadow: 1px 1px #fff;
		color: #0178c1;
		box-shadow: 2px 2px 2px rgba(0,0,0,.2);
		background: #d2d4d6;
		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background-image: -webkit-linear-gradient(top, #fff, #d2d4d6);
		background-image: linear-gradient(to bottom, #fff, #d2d4d6);
	}
}
@media (min-width: 960px) {
	.main-nav .sf-menu > li {width: 17%;}	
	.es-mx .main-nav .sf-menu > li {width: auto;}	
}
@media (max-width: 47.999em) {
	.main-nav .sf-menu a {
		text-align:left;
		font-weight: bold;
		padding: 10px 20px;
	}
	.main-nav .sf-menu > li .subMenu > a {
		padding: 10px 20px;
		font-size: 18px;
	}
}

.main-nav .sf-menu li.sfHover .subMenu > a,
.main-nav .sf-menu a.on,
.main-nav .sf-menu a:hover,
.main-nav .sf-menu a:focus,
.main-nav .sf-menu a:active {
 }

/* Sub Tier */
.main-nav .sf-menu li .subMenu { position:relative; }
.main-nav .sf-menu li:hover .subMenu > ul,
.main-nav .sf-menu li.sfHover .subMenu > ul { top:40px; }
.main-nav .sf-menu li ul { min-width:100%; background-color:#fff; padding:0;}
.main-nav .sf-menu li ul li { min-width:100%; background-color:#fff; }

.main-nav .sf-menu li li {}
.main-nav .sf-menu li li:first-child {}
.main-nav .sf-menu li li a { position: relative; background: #fff; text-align:left; font-size: 14px;}
@media (min-width: 48em) {
	.main-nav .sf-menu li ul {
		max-width: 180px;
	}
	.main-nav .sf-menu li li a {
		padding: 10px 15px;
		background: #fff;
	}
	.main-nav .sf-menu li li a:hover {
		color: #fff;
		background: #339933;
	}
}

/* Sub Sub Tier */
.js .main-nav .sf-menu li li ul { display:none; visibility:hidden; }
.main-nav .sf-menu li li:hover > ul,
.main-nav .sf-menu li li.sfHover > ul { top:0; left:100%; }

.main-nav .sf-menu li li.sfHover > a,
.main-nav .sf-menu li li a:hover,
.main-nav .sf-menu li li a:focus,
.main-nav .sf-menu li li a:active { }


/* last Nav Item Adjustments */
.main-nav .sf-menu .lastnavitemli .subMenu > ul { left:auto; right:0; }
.main-nav .sf-menu .lastnavitemli li:hover > ul,
.main-nav .sf-menu .lastnavitemli li.sfHover > ul { left:auto; right:100%; }

.menuLink {display:none; font-size:2em; padding:0px 10px 10px; text-align:right; position:relative; }
.menuLink:hover, .menuLink:focus {text-decoration:none; }

/* Showing expand buttons - didn't want to include in base */

.main-nav .sf-menu li .expandMenu,
.main-nav .sf-menu li .subMenu .expandMenu { display:none; position:absolute; top:18px; right:0; z-index:99; border: 0; width:auto; padding: 10px; }
.main-nav .sf-menu li li .expandMenu,
.main-nav .sf-menu li .subMenu li .expandMenu {  }

.no-js .main-nav {display:block;}

@media only screen and (max-width: 767px) {

	.main-nav {
		position:absolute;
		top:-40px;
		right:0px;
		width:100%;
		margin:0px;}

	.main-nav .sf-menu > li > a .menuText,
	.main-nav .sf-menu > li .subMenu > a .menuText { height:60px; }
	.main-nav .sf-menu li:hover .subMenu > ul,
	.main-nav .sf-menu li.sfHover .subMenu > ul,
	.main-nav .sf-menu li:hover .subNav,
	.main-nav .sf-menu li.sfHover .subNav { top:80px; }

	.main-nav .sf-menu li.sfHover .subMenu > a,
	.main-nav .sf-menu a.on,
	.main-nav .sf-menu a:hover,
	.main-nav .sf-menu a:focus,
	.main-nav .sf-menu a:active {background: none;}


	.main-nav .sf-menu li li.sfHover > a,
	.main-nav .sf-menu li li a:hover,
	.main-nav .sf-menu li li a:focus,
	.main-nav .sf-menu li li a:active { }

	.main-nav .sf-menu,
	.main-nav .sf-menu li,
	.main-nav .sf-menu li a,
	.main-nav .sf-menu li a .menuText,
	.main-nav .sf-menu li ul { width:100%; display:block; }

	.main-nav .sf-menu li li a { width:96%; }

	.main-nav .sf-menu li { }

	.main-nav .sf-menu li a .menuText,
	.main-nav .sf-menu > li .subMenu > a .menuText { height:auto; padding:0; }

	.main-nav .sf-menu li .expandMenu,
	.main-nav .sf-menu li .subMenu .expandMenu { display:block; color: transparent; height: 34px;}
	.main-nav .sf-menu li .expandMenu:after,
	.main-nav .sf-menu li .subMenu .expandMenu:after { content: "+"; color:#0077c3; font-size:20px; }
	.main-nav .sf-menu li .expandMenu.open-triger:after,
	.main-nav .sf-menu li .subMenu .expandMenu.open-triger:after { content: "-"; font-size:20px; }

	.main-nav .sf-menu li .subNav,
	.main-nav .sf-menu li ul,
	.main-nav .sf-menu li ul ul {
		position: static!important;
		top: auto!important;
		left: auto!important;
		width: auto!important;
		height: auto!important;
		display: none!important;}

	.main-nav .sf-menu li .subNav.open,
	.main-nav .sf-menu li .open	{
		display:block!important;
		padding:0;
		visibility:visible!important;}

	.main-nav .sf-menu li .subNav > ul { display: block!important; }

	.main-nav .sf-menu li li { border:0; background:#eddfb3; }
	.main-nav .sf-menu li li:first-child a { }
	.main-nav .sf-menu li li li a {padding: 10px 5%; width: 90%;}
}


@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	.main-nav {margin:10px 0 0 0;}
	.main-nav .sf-menu > li .subMenu > a {font-size:1em; }
	
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.menuLink {display:block;}
	.main-nav ul {display: none !important;}
	.active ul  {display: block !important;}
}

@media only screen and (min-width: 180px) and (max-width: 479px) {
	.menuLink {display:block;}
	.main-nav ul {display: none !important;}
	.active ul  {display: block !important;}
}



/* Additional changes for drawer */
.site-wrap {
    position:relative; z-index:2000;
    right:0;
    width:100%;
    -wekbit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
body > .main-nav {
    position:absolute; z-index:1000;
    top:0; right:100%;
    width:100%; height:100%;
    background:#dfe0e1;
    -wekbit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
body > .main-nav .toggle-menu { display:none; }

.main-header .main-nav { display:none; }

.new-toggle { width: 108px;  position: relative; display: block; float: right; }
.new-toggle > span { color:#fff; text-align:right; display:block; position:relative; width:28px; height:20px; float: right; margin-top: 13px; margin-right: 10px; }
.new-toggle > span:before, .new-toggle > span:after, .new-toggle > span > span:before {
    content:" ";
    position:absolute;
    left:0;
    border-radius:2px;
    width:100%; height:3px;
    background:#fff;
}

.new-toggle > span:before { top:1px; }
.new-toggle > span:after { top:9px; }
.new-toggle > span > span:before { top:17px; }

.new-toggle > strong { color:#fff; margin-top: 14px; display: inline-block; font-size: 19px; }

.menu-active .new-toggle > span:before { display:inline-block; top:9px; 
-webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
}
.menu-active .new-toggle > span:after { display:inline-block; top:9px; 
-webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
}
.menu-active .new-toggle > span > span:before { display:none;}

@media (min-width:48em) {
    .new-toggle { display:none; }
    body > .main-nav { display:none; }
    .main-header .main-nav { display:block;  padding-left: 120px; }
    .es-mx .main-header .main-nav { display:block;  padding-left: 125px; }

    .menu-active .site-wrap { left:0; }
	.main-nav .sf-menu > li { padding: 10px 0 10px 15px; }
	.main-nav .sf-menu > li .subMenu > a .menuText {
		display: table-cell;
		padding: 0 10px;
		height: 40px;
		vertical-align: middle;
		text-align: center;
	}
	.main-nav .sf-menu > li .subMenu > a:hover {
		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background-image: -webkit-linear-gradient(top, #d2d4d6, #fff);
		background-image: linear-gradient(to bottom, #d2d4d6, #fff);
	}
}
@media (min-width:960px) {
    .main-header .main-nav { display:block;  padding-left: 172px; }	
}
@media (max-width:47.99em) {
	.main-nav-hold {min-height:46px; box-sizing:border-box;}
	.menu-active .main-nav { padding-right:17%; left:17%; }
	.menu-active .site-wrap { right:83%; }
}