/*================================================================
                 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-0077c0.png) no-repeat 0px -100px;
	display:none;
}

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

.mainNav ul { margin:0; padding:0; }

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

/* Main Tier */
.mainNav .sf-menu { display:table; width:100%; }
.mainNav .sf-menu li { float:none; }
.mainNav .sf-menu > li { display:table-cell; vertical-align:middle; text-align:center; width:20%;}
	.mainNav .sf-menu > li .subMenu > a {
		display: table;
		width: 100%;
		text-decoration: none;
		font-family: 'polymath-regular', sans-serif;
		color: #fff;
	}
	.mainNav .sf-menu > li .subMenu > a:hover,
	.mainNav .sf-menu > li .subMenu > a:active,
	.mainNav .sf-menu > li .subMenu > a:focus {
		font-weight:bold;
	}



	.mainNav .sf-menu > li .subMenu > a .menuText {
		display: table-cell;
		padding: 10px;
		height: 30px;
		vertical-align: middle;
		text-align: center;
	}
	X.mainNav .sf-menu > li .subMenu > a .menuText::after {
		content: '\276F';
		display:inline-block;
		color: #3EB1C8;
		padding-left: 10px;
		transform: rotate(90deg);
		position:relative;
		left:5px;
	}

.mainNav .sf-menu li.sfHover .subMenu > a,
.mainNav .sf-menu a.on,
.mainNav .sf-menu a:hover,
.mainNav .sf-menu a:focus,
.mainNav .sf-menu a:active {
	Xbackground: #563D82;
	transition: background 0.2s ease;
	color: #fff;
}

.mainNav .sf-menu li.sfHover .subMenu .expandMenu {
	xtransform: rotate(90deg);
	Xtransition: transform 0.1s ease;
	background: none;
}


/* Sub Tier */
.mainNav .sf-menu li .subMenu {
	position: relative;
}
.mainNav .sf-menu li:hover .subMenu > ul,
.mainNav .sf-menu li.sfHover .subMenu > ul { top:73px; left:0; }
.mainNav .sf-menu li ul {
	min-width: calc(100% - 20px);
	Xbackground-color: #563D82;
	padding: 0px;
}
	.mainNav .sf-menu li ul li {
		min-width: 100%;
		background-color: #3EB1C8;
	}


.mainNav .sf-menu li li {Xborder-bottom:1px solid #d1d3d4; }
.mainNav .sf-menu li li:first-child {Xborder-top:1px solid #d1d3d4;}
	.mainNav .sf-menu li li a {
		text-align: left;
		font-size: 13px;
		height: auto;
		padding: 10px;
		text-decoration: none;
		color: #1E1A34;
		font-family: 'polymath-semibold', sans-serif;
	}
 
/* Sub Sub Tier */
.js .mainNav .sf-menu li li ul { display:none; visibility:hidden; }
.mainNav .sf-menu li li:hover > ul,
.mainNav .sf-menu li li.sfHover > ul { top:0; left:100%; }

.mainNav .sf-menu li li.sfHover > a,
.mainNav .sf-menu li li a:hover,
.mainNav .sf-menu li li a:focus,
.mainNav .sf-menu li li a:active {
	background: #77C5D5;
	color: #1E1A34;
}


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

.menuLink {display:none; font-size:2em; color:#fff; margin:5px 10px; position:absolute; top:30px; right:10px; z-index:9999; text-decoration:none;}
.menuLink:after {content:"MENU"; position: absolute; top:-10px; right:0; font-family: 'Lato', sans-serif; font-size:11px; font-weight:900; z-index:1000}
.menuLink:hover, .menuLink:focus {text-decoration:none; }

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

.mainNav .sf-menu li .subMenu .expandMenu {
	position: absolute;
	top: 3px;
	right: 0;
	z-index: 10;
	padding: 15px 10px;
	width: auto;
	color: #3EB1C8;
	background: none;
	transform: rotate(90deg);
}
.mainNav .sf-menu li .subMenu .expandMenu.desktop {
	right: initial;
}
.mainNav .sf-menu li .subMenu > a.expandMenu.mobile {
	display:none;
}

	.mainNav .sf-menu li .subMenu ul li .expandMenu {
		position: absolute;
		top: -4px;
		right: 10px;
		z-index: 99;
		padding: 15px 14px;
		width: auto;
		color: #563D82;
		background: none;
		transform: rotate(0deg);
		transition: all 0.2s ease;
	}

.mainNav .sf-menu li .subMenu ul li:hover .expandMenu {
	right: 0px;
	transition: all 0.2s ease;
}


	.mainNav .sf-menu li li .expandMenu,
	.mainNav .sf-menu li .subMenu li .expandMenu {
		padding: 10px 14px;
	}

.no-js .mainNav {display:block;}

@media only screen and (max-width: 767px) {
	.mainNav {background:#f2f2f2;}
	.mainNav .sf-menu > li > a .menuText,
	.mainNav .sf-menu > li .subMenu > a .menuText { height:60px; }
	.mainNav .sf-menu li:hover .subMenu > ul,
	.mainNav .sf-menu li.sfHover .subMenu > ul,
	.mainNav .sf-menu li:hover .subNav,
	.mainNav .sf-menu li.sfHover .subNav { top:80px; }
	.mainNav .sf-menu > li .subMenu > a {color:#fff; font-size:20px; padding-left:25px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;}
	.mainNav .sf-menu > li .subMenu > a .menuText::before{content:'';}
	.mainNav .sf-menu > li .subMenu > a .menuText {text-align:left;}
	.mainNav .sf-menu li .subMenu{}
	
	.mainNav .sf-menu li li a {font-size:17px; padding:15px 12.5%; width:75%;}
	.mainNav .sf-menu li li li a {font-size:15px; padding:16px 15%; width:75%;}	
	.mainNav .sf-menu li li.sfHover > a,
	.mainNav .sf-menu li li a:hover,
	.mainNav .sf-menu li li a:focus,
	.mainNav .sf-menu li li a:active {color:#58595b;}
	.mainNav .sf-menu li li:last-child {border-bottom:none;}
	.mainNav .sf-menu li li {border-bottom:none; /*1px solid #d1d3d4; */}
	.mainNav .sf-menu li li:first-child {border-top:none; /*1px solid #d1d3d4;*/}

		.mainNav .sf-menu li ul li {
			min-width: 100%;
			background-color: #77C5D5;
		}

		.mainNav .sf-menu li .subMenu .expandMenu.desktop {
			display:none;
		}

		.mainNav .sf-menu li .subMenu > a.expandMenu.mobile {
			display: block;
		}

/*}

@media only screen and (max-width: 600px) {*/
	.mainNav .sf-menu,
	.mainNav .sf-menu li,
	.mainNav .sf-menu li a,
	.mainNav .sf-menu li a .menuText,
	.mainNav .sf-menu li ul { width:100%; display:block; }

	.mainNav .sf-menu li li a { padding:15px 7.5%; width:85%;}
	.mainNav .sf-menu li li li a {font-size:15px; padding:16px 10%; width:100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;}
	
	.mainNav .sf-menu li { border-top:1px solid #d1d3d4; }

	.mainNav .sf-menu li a .menuText,
	.mainNav .sf-menu > li .subMenu > a .menuText { height:auto; padding:1em 0;}

		.mainNav .sf-menu li .expandMenu,
		.mainNav .sf-menu li .subMenu .expandMenu {
			display: block;
			color: #000;
			right: 20px;
		}
		.mainNav .sf-menu li .subMenu > a.expandMenu {
			Xdisplay: block;
		}
		.mainNav .sf-menu li .expandMenu,
		.mainNav .sf-menu li .subMenu span.expandMenu {
			Xdisplay: none;
			color: #000 !important;
			right: 20px;
		}

		.mainNav .sf-menu li.sfHover .subMenu .expandMenu {
			transform: rotate(90deg);
		}

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

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

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

	.mainNav .sf-menu li li { border:0; background:#f2f2f2; }
	.mainNav .sf-menu li li:first-child a { }
	.mainNav .sf-menu li li a {border-bottom:none;/* border-bottom:1px solid #d1d3d4;*/ }
		.mainNav .sf-menu li li li {
			background: #3EB1C8;
		}

	.sf-sub-indicator {background:none;}
}



@media only screen and (min-width: 768px) and (max-width: 959px) {

}

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

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

@media only screen and (min-width:600px) and (max-width: 630px) {
	.mainNav .sf-menu li a .menuText,
	.mainNav .sf-menu > li .subMenu > a .menuText {font-size:.85em; line-height:1.2em; padding:10px 7px;}
}