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

.menuToggle { display:block; position:relative; width:50px; height:46px; /*background:#333;*/ float: right; top:-76px; margin-right: 90px;}
.menuToggle:before, .menuToggle:after, .menuToggle > span:before {
    content:" ";
    position:absolute; 
    right:15%; 
    border-radius:2px;
    width:60%; height:4px; 
    background:#164377; 
}

.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:768px){
    .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: #404040;*/ font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: bold; text-transform: uppercase; text-decoration:none; }
.js-clickMenu * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

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

.js-clickMenu { position:static !important; z-index:1000; }
.js-clickMenu ul { margin:0; padding:0; list-style:none; /*background:#111;*/ }
.js-clickMenu li { border-top:1px solid #999; }
.js-clickMenu 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:-3px 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:#b9873e;
    -webkit-transform: scale(0.98);
        -ms-transform: scale(0.98);
            transform: scale(0.98);
	-webkit-transform: rotate(270deg);			
	    -ms-transform: rotate(270deg);
	        transform: rotate(270deg);		
}
.js-clickMenu .opened .hasSub span:after,
.js-clickMenu .subMenu .opened .hasSub:after {
    margin:0px 0 0 5px; 
	-webkit-transform: rotate(0deg);			
	    -ms-transform: rotate(0deg);
	        transform: rotate(0deg);	
} */

.js-clickMenu .subMenu { position:relative; }
.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:#1f3652; color:#fff !important;}

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

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

.megaMenu > li:first-child {} 
.megaMenu > li:last-child {padding-right:20px;}
/*.navWrpr {position:absolute; top: 0; right:0; width:100%;}*/




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

    .js-clickMenu > ul { display:table; width:auto%; 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: 9px 0; /*background:#999;*/ font-family:'Open Sans Condensed', sans-serif; font-size:20px; color:#154276; }
    .js-clickMenu > ul > li:last-child > a  {color:#a21d21;}
    .js-clickMenu > ul > li > a > span { display:table-cell; padding:0 15px; height:90px; 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:#333; }    
    
    .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 0; padding:3px 10px 3px 10px; /*background:#999;*/ }
    
    .js-clickMenu .subMenu li:hover > a, 
    .js-clickMenu .subMenu a:hover, .js-clickMenu .subMenu a:focus, 
    .js-clickMenu .subMenu .opened > a { color:#eaeaea; text-decoration:underline;}
    

    /* ================= 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; }    
    .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; }
    .js-enabled .opened > .subMenu > ul, .js-enabled .opened:hover > .subMenu > ul { top:0; max-height:80em; opacity:1; }
    .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; }
}

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

@media(min-width:768px){
    .megaMenu .subMenu {
        position:absolute;
        top:100%; left:0;
        width:100%; max-height:0;
        background:#1f3652;
        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; }
    
    .subMenu > ul {min-width:auto !important; max-width:1440px; margin:0 auto;}
    
    /*.megaMenu .subMenu > ul > li { float:left; width:50%;}*/
	.megaMenu .subMenu > ul > li {width:33%; float: left; padding:0 30px 0 70px; border-right:1px solid #364a64;}	
	.megaMenu .subMenu > ul > li:first-child {}
	
    /* ================= 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: 40px 0px; }

	.megaMenu .subMenu > ul > li > a {font-size:18px; color:#6d7b8d; font-family: 'Open Sans Condensed', sans-serif;}
	.megaMenu .subMenu > ul > li:hover > a {text-decoration:none;}	
    .megaMenu .subMenu > ul > li > ul > li a {font-size:15px; color:#fff; text-transform:none; font-weight:normal;}
	
	.megaMenu .subMenu > ul > li > ul > li {width: 50%; float: left;}
	.megaMenu .subMenu > ul > li > ul > li:nth-child(2n+1) {width:50%; clear:left;}
	.megaMenu .subMenu > ul > li:last-child > ul > li {width:100%;}
} 

@media only screen and (max-width:767px) {
	.megaMenu > li:first-child {padding-left:0;}
	.js-clickMenu ul {width:100%;background:#fff;}
	.navWrpr {top:136px;}
	
	.js-clickMenu {position:relative !important; top: 109px;}
	
	.megaMenu {border-bottom: 1px solid #000;}	
	.megaMenu > li:last-child {padding-right: 0;}
	
    .js-clickMenu > ul > li:last-child > a  {color:#a21d21;}	
    .js-clickMenu > ul > li > a {font-family: 'Open Sans Condensed', sans-serif;}
	
	.megaMenu .subMenu > ul > li > a {font-size:18px; color:#6d7b8d; font-family: 'Open Sans Condensed', sans-serif; padding-left:15px;}
	.megaMenu .subMenu > ul > li > ul > li a {font-size:15px; /*color:#fff;*/ text-transform:none; font-weight:normal; padding-left:30px;}	
}


/* 16px baseline (768px - 1439px +) */
@media only screen and (min-width:48em) and (max-width:89.938em){
	.megaMenu .subMenu > ul > li {padding: 0 2% 0 4%;}
}


/* 16px baseline (768px - 959px) */
@media only screen and (min-width:48em) and (max-width:59.938em) {
	.js-clickMenu > ul > li > a {font-size: 17px;}
	.js-clickMenu > ul > li > a > span {padding: 0 7px;}
	.megaMenu .subMenu > ul > li {padding: 0 2% 0 3%;}	
}

/* 16px baseline ( - 479px +) */
@media only screen and (max-width:29.938em){
	.menuToggle {top:-66px;}
	.js-clickMenu {top:85px;}
}