/*================================================================
                 NAVIGATION TOGGLE STYLES
================================================================*/

.menuToggle { display:block; position:relative; width:50px; height:46px; background:#333; top:15px; left:20px; }
.menuToggle:before, .menuToggle:after, .menuToggle > span:before {
    content:" ";
    position:absolute;
    left:5%;
    border-radius:2px;
    width:55%; height:4px;
    background:#fff;
}

.menuToggle:before { top:13px; }
.menuToggle:after { top:21px; }
.menuToggle > span:before { top:29px; }

.menuToggle:hover, .menuToggle:focus, .js-menu-active .menuToggle { /*background:#111;*/ }

@media (min-width:48em){
    .menuToggle { display:none; }
}

/*================================================================
                 NAVIGATION STYLES
================================================================*/

/*
    THESE STYLES will probably not be needed or adjusted in main
    - * for example is most efficient when not a child of a class
       -- hopefully you already are using the box sizing globally
    - you may not need text-decoration etc. depending on your global anchors
*/
.js-clickMenu a { color:#fff; text-decoration:none; text-transform:uppercase;}
.js-clickMenu * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* ================= DEFAULT SETTINGS ================= */

.js-clickMenu { position:relative; z-index:1000; }
.js-clickMenu ul { margin:0; padding:0; list-style:none; /*background:#111;*/ }
.js-clickMenu li { border-top:1px solid #404547; }
.js-clickMenu > ul > li:first-child { border-top:0; }


.js-clickMenu li a { display:block; padding:10px; position:relative; }

/*.js-clickMenu .hasSub span:after,
.js-clickMenu .subMenu .hasSub:after {
    content:" ";
    display:inline-block;
    position:absolute; top:15px; right:10px;
    margin:5px 0 0 5px;
    vertical-align:middle;
    border:5px solid transparent;*/
		/* Extra is for anti-aliasing issues in firefox and others */
    /*border:5px solid rgba(0,0,0,0);
    border-top-color:#fff;
    -webkit-transform: scale(0.98);
        -ms-transform: scale(0.98);
            transform: scale(0.98);*/
}
.js-clickMenu {font-size:16px;}
.js-clickMenu .subMenu { position:relative; font-family: 'Open Sans Condensed', sans-serif; font-size:1.125em;}
.js-clickMenu .subMenu ul li { position:relative; }

.js-clickMenu > ul > li:hover > a, .js-clickMenu > ul > .opened > a,
.js-clickMenu > ul > li > a:hover, .js-clickMenu > ul > li > a:focus { background:#20262a; }

.js-clickMenu ul {
    max-height:0;
    opacity:0;
    overflow:hidden;
    -wekbit-transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
            transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.js-clickMenu .subMenu li:hover > a, .js-clickMenu .subMenu .opened > a,
.js-clickMenu .subMenu a:hover, .js-clickMenu .subMenu li a:focus { /*background:#444;*/ color:#fff200 !important; }

/* ================= MENU TOGGLE FUNCTIONALITY ================= */

.js-menu-active .js-clickMenu > ul { max-height:80em; opacity:1; }
.js-clickMenu .opened > ul,
.js-clickMenu .opened > .subMenu > ul { max-height:80em; opacity:1; }


@media (min-width:48em){
    .js-clickMenu ul { overflow:visible; }
    .js-clickMenu li { border-top:0; }

    .js-clickMenu > ul { display:table; width:100%; /*table-layout:fixed;*/ max-height:80em; opacity:1; }
    .js-clickMenu > ul > li { display:table-cell; vertical-align:middle; }
    .js-clickMenu > ul > li > a { display:table; width:100%; padding:0; /*background:#999;*/ }
    .js-clickMenu > ul > li > a > span { display:table-cell; padding:0 10px; height:79px; vertical-align:middle; text-align:center; }

    .js-clickMenu .hasSub span:after { position:static; }
    .js-clickMenu .subMenu .hasSub:after { top:8px; right:5px; }

    .js-clickMenu .subMenu ul { display:block; position:absolute; z-index:-1; left:0; top:-100em; min-width:100%; background:#20262a;  padding:15px 0;}    

    .js-clickMenu li:nth-last-child(-n+2) .subMenu ul { left:auto; right:0; }
    .js-clickMenu li:nth-last-child(-n+2) .subMenu ul ul { margin-left:0; }

    .js-clickMenu .subMenu a { margin:5px; padding:2px 15px 2px 30px; /*background:#999;*/ }

    .js-clickMenu .subMenu li:hover > a,
    .js-clickMenu .subMenu a:hover, .js-clickMenu .subMenu a:focus,
    .js-clickMenu .subMenu .opened > a { color:#000; /*background:#ddd;*/ }


    /* ================= HOVER FUNCTIONALITY (MAYBE JS FAILED) ================= */

    .js-clickMenu li:hover > .subMenu > ul { top:0; max-height:80em; opacity:1; }
    .js-clickMenu li:hover > ul { left:100%; top:-5px; margin-left:-5px; max-height:80em; opacity:1; }

    /* Eh if you need IE8 Support have pragmming add in a class - This will work for every other browser in the meantime */
    .js-clickMenu li:nth-last-child(-n+2) li:hover > ul { left:auto; right:100%; margin-right:-5px; }


    /* ================= HOVER FUNCTIONALITY REMOVED AND OPENED FUNCTIONALITY ADDED ON SETUP ================= */

    .js-enabled li:hover > .subMenu > ul { top:0; max-height:0; opacity:0; width:230px;}
    .js-enabled li:hover > ul { left:0; top:-5px; max-height:0; opacity:0; }
    .js-enabled li:nth-last-child(-n+2) li:hover > ul { right:0; }

    .js-enabled ul ul {
        -wekbit-transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, left 0.4s ease-in-out, right 0.4s ease-in-out;
                transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, left 0.4s ease-in-out, right 0.4s ease-in-out;
    }
    .js-enabled .subMenu ul ul { top:-5px; }

    .js-enabled .subMenu ul { top:0; overflow:hidden; width:230px;}
    .js-enabled .opened > .subMenu > ul, .js-enabled .opened:hover > .subMenu > ul { top:0; max-height:80em; opacity:1; width:230px;}
    .js-enabled .opened > ul, .js-enabled .opened:hover > ul { left:100%; top:-5px; margin-left:-5px; max-height:80em; opacity:1; }
    .js-enabled li:nth-last-child(-n+2) .opened > ul,
    .js-enabled li:nth-last-child(-n+2) .opened:hover > ul { right:100%; margin-right:-5px; }

    .js-enabled .animated > ul,
    .js-enabled .animated .subMenu > ul { overflow:visible; z-index:10;}
    .js-enabled .animating > ul { z-index:-1; }
	
	.js-enabled .animated .subMenu > ul:after  {
		position:absolute;
		content:"";
		top:-3px;
		left:35px;
		height:3px;
		width:90px;
		border-top:3px solid #fff200;
	} 
}

/*================================================================
                 MEGA MENU NAVIGATION STYLES
================================================================*/

@media(min-width:48em){
    .megaMenu .subMenu {
        position:absolute;
        top:100%; left:0;
        width:100%; max-height:0;
        background:#333;
        overflow:hidden;
        -wekbit-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;
    }

    .megaMenu .subMenu .hasSub:after { display:none; }

    .megaMenu .subMenu ul { position:static; max-height:80em; width:100%; overflow:hidden; background:transparent; max-height:80em; opacity:1; }
    .megaMenu .subMenu ul ul { margin-left:0; }
    .megaMenu .subMenu > ul > li { float:left; width:25%; }
    .megaMenu .subMenu > ul > li:nth-child(4n+1) { clear:left; }

    /* ================= HOVER FUNCTIONALITY (MAYBE JS FAILED) ================= */

    .megaMenu li:hover .subMenu { max-height:30em; padding:20px; }
    .megaMenu li:hover > .subMenu > ul,
    .megaMenu li:hover > ul { max-height:80em; opacity:1; }

    /* ================= HOVER FUNCTIONALITY REMOVED ON SETUP ================= */

    .js-enabled .megaMenu li:hover > .subMenu { max-height:0; padding:0; }
    .js-enabled .megaMenu .opened > .subMenu, .js-enabled .megaMenu .opened:hover > .subMenu { max-height:30em; padding:20px; }

}

.nav {margin:0 40px 0 6%;}
.js-clickMenu > ul > li:first-child + li + li + li {padding-left:180px;} 

/* 16px baseline (960px - 1199px) */
@media only screen and (min-width:60em) and (max-width:74.938em) {
	/*.nav {margin: 0 25px 0 6% !important;}*/
	.js-clickMenu {font-size:14px;}
	.js-clickMenu > ul > li > a > span {padding:0 6px;}
}

/* 16px baseline (768px - 959px) */
@media only screen and (min-width:48em) and (max-width:59.938em) {
	/*.nav {margin: 0 25px 0 6% !important;}*/
	.js-clickMenu {font-size:13px;}
	.js-clickMenu > ul > li > a > span {padding:0 4px;}
}

/* 16px baseline (180px - 767px) */
@media only screen and (min-width:11.250em) and (max-width:47.938em) {
	.nav {margin:0;}
	.js-clickMenu > ul > li:first-child + li + li + li {
		padding-left: 0;
	}
	
	.js-clickMenu li a {display: block; padding: 10px 18px;}
	.js-clickMenu li li a { padding: 10px 18px 10px 30px;}
	.js-clickMenu li li li a { padding: 10px 18px 10px 40px;}
	.js-clickMenu li li li li a { padding: 10px 18px 10px 50px;}

	.js-clickMenu > ul > li:last-child { border-bottom:1px solid #404547;}
	
	.js-clickMenu .hasSub span:after,
	.js-clickMenu .subMenu .hasSub:after {
	font-family: 'Open Sans', sans-serif;
	content: "\2b";
	font-size: 30px;
    font-weight: 500;
	color:#fff200;
		display:inline-block;
		position:absolute; top:-1px; right:15px;
		margin:0 0 0 5px;
		vertical-align:middle;
		/*border:5px solid transparent;*/
			/* Extra is for anti-aliasing issues in firefox and others */
		/*border:5px solid rgba(0,0,0,0);
		border-top-color:#fff;*/
		-webkit-transform: scale(0.98);
			-ms-transform: scale(0.98);
				transform: scale(0.98);
	}
	
	.js-clickMenu .opened > .hasSub span:after,
	/*.js-clickMenu .opened > .hasSub:after*/
	.js-clickMenu .subMenu .opened > .hasSub:after {
		content: "\2d";
		margin:0;
		top:-4px;
		right:20px;
	}

}




/* BEGIN menuWrap */

.siteSearch,
.siteHeader .subMenu,
.siteHeader *,
.siteWrap,
.menuWrap,
.menuWrap *{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.menuWrap {
	display:none; position: absolute;
	z-index: 1000;
	top: 0;
	left: -100%;
	width:79%;
	height: 100%;
	background: #333;
	-webkit-transition: left 0.6s ease-out;
	-moz-transition: left 0.6s ease-out;
	-o-transition: left 0.6s ease-out;
	transition: left 0.6s ease-out;
}

.js-menu-active .menuWrap { background:#20262a;
	display: block; left: 0%;
	-webkit-transition: left 0.6s ease-out;
	-moz-transition: left 0.6s ease-out;
	-o-transition: left 0.6s ease-out;
	transition: left 0.6s ease-out;
}
	
.siteWrap {
	position: relative;
	z-index: 2000;
	right: 0;
	width: 100%;
	-webkit-transition: left 0.6s ease-out;
	transition: left 0.6s ease-out;
}

@media only screen and (max-width: 767px) {
	.js-menu-active .siteWrap { right: -79%; }
	.siteHeader .mainMenu {display: none;}
}
/* END menuWrap */





/* Ticket: #431119 - Site Updates  */


.headerWrpr {background:#fff;}

.js-clickMenu a {color:#2d3337; font-weight:bold;}
.js-clickMenu a:hover {color:#fff;}

.js-clickMenu .subMenu a {color:#fff !important;}
.js-clickMenu li.opened a {color:#fff !important;}

.siteHeader a.sitelogo, 
.siteHeader a.sitelogo:link, 
.siteHeader a.sitelogo:visited {top:0px;}

.homelink {
	padding: 9px 17px;
	position: absolute;
    left: 2%;
    top: 20px;
	}
.homelink:hover, 
.homelink:focus {
    background: #20262a;
    cursor: pointer;
}
.iconHome {
    position: relative;
	top:0;
	left:0;
	padding:5px;
	
}

.homelink .iconHome span {
	background-image:url("/cms/images/icon-home-v3.png"); 
	background-position:0px 0px;
	width:21px; 
	height:17px; 
	display:block;
}
	
.homelink:hover .iconHome span {	
	background-position:0px 19px;
}	
	
.searchCall span {
	background-image:url("/cms/images/icon-magnifier-v3.png"); 
	background-position:0px 0px;
	width:22px; 
	height:21px; 
	display:block;
}

.searchCall:hover span {	
	background-position:0px 21px;
}

.searchCall {
	padding: 29px 17px;
	top:20px;
}

.searchCall span 

.searchCall img {
	padding:5px;
	
}
	
.nav {
    margin: 20px 5% 0 5%;
}	

.siteHeader {min-height:150px;}
.siteHeader a.sitelogo, .siteHeader a.sitelogo:link, .siteHeader a.sitelogo:visited {width:260px; margin-left:-163px;}
.js-clickMenu > ul > li:first-child + li + li + li {padding-left:250px;}

.headerWrpr .container {max-width:85em;}


@media only screen and (max-width: 1130px) {
	.siteHeader a.sitelogo, .siteHeader a.sitelogo:link, .siteHeader a.sitelogo:visited {width:260px; margin-left:-154px;}
	.homelink {left:0;}
}

@media only screen and (max-width: 900px) {
	.siteHeader a.sitelogo, .siteHeader a.sitelogo:link, .siteHeader a.sitelogo:visited {width:260px; margin-left:-143px;}
}

@media only screen and (max-width: 825px) {
	.siteHeader a.sitelogo, .siteHeader a.sitelogo:link, .siteHeader a.sitelogo:visited {width:220px; margin-left:-14%;}
	.js-clickMenu {font-size:12px;}
}

@media only screen and (max-width: 767px) {
	.siteHeader a.sitelogo, .siteHeader a.sitelogo:link, .siteHeader a.sitelogo:visited {width:260px; margin-left:-19%;}
	.js-clickMenu a {color:#fff;}
	.js-clickMenu a:hover {color:#fff200;}
	
	.js-clickMenu > ul > li:first-child + li + li + li {padding-left:0;}
}


@media only screen and (max-width: 540px) {
	.siteHeader a.sitelogo, .siteHeader a.sitelogo:link, .siteHeader a.sitelogo:visited {width:260px; margin-left:-22%;}
}

@media only screen and (max-width: 470px) {
	.siteHeader a.sitelogo, .siteHeader a.sitelogo:link, .siteHeader a.sitelogo:visited {width:260px; margin-left:-25%;}
}

@media only screen and (max-width: 420px) {
	.siteHeader a.sitelogo, .siteHeader a.sitelogo:link, .siteHeader a.sitelogo:visited {width:220px; margin-left:-25%;}
	.siteHeader {min-height:135px;}
}

@media only screen and (max-width: 380px) {
	.siteHeader a.sitelogo, .siteHeader a.sitelogo:link, .siteHeader a.sitelogo:visited {width:200px; margin-left:-25%;}
	.siteHeader {min-height:125px;}
}