/* ================================================================
   PRIMARY SITE NAV
   ================================================================ */

/*  MAIN NAV
   ================================================================ */

.mainNav ::-moz-selection { background: transparent; text-shadow: none; }
.mainNav ::selection { background: transparent; text-shadow: none; }

/* MENU LINK */

.mainNav .menuToggle { 
    display:block; 
    position:absolute; 
    top:-52px; left:8px;
    border-radius:5px;
    width:33px; height:35px; 
    background:#ededed; 
}
.mainNav .menuToggle > span { display:block; }

.mainNav .menuToggle:before,
.mainNav .menuToggle:after,
.mainNav .menuToggle > span:before { 
	content:" "; 
	position:absolute; 
	left:15%;
	width:70%; height:3px; 
	background:#888;	
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
		    transition: all 0.3s ease-in-out;
}
.mainNav .menuToggle:before { top:8px; }
.mainNav .menuToggle:after { top:15px; }
.mainNav .menuToggle > span:before { top:22px; }

.mainNav .menuToggle:hover, .mainNav .menuToggle:focus, .mainNav .menuToggle.active { 
    background:#d7d7d7;
    -webkit-box-shadow: 0 0 0 3px #888;
            box-shadow: 0 0 0 3px #888;
}

.mainNav .menuToggle:hover:before, 
.mainNav .menuToggle:hover:after,
.mainNav .menuToggle:hover > span:before,
.mainNav .menuToggle:focus:before, 
.mainNav .menuToggle:focus:after,
.mainNav .menuToggle:focus > span:before, 
.mainNav .menuToggle.active:before,
.mainNav .menuToggle.active:after,
.mainNav .menuToggle.active > span:before { background:#222; }

@media (min-width:992px){
    .mainNav { margin-top:5px; }
    .mainNav .menuToggle { display:none; }   
}


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

.js-clickMenu { 
	position: absolute; 
	z-index:2000;
	top: 100%; left: 0;
	margin-top:2px; padding:0; 
	width: 100%;
	background:#ebebeb;
}
.js-clickMenu ul { 
    margin:0; padding:0; 
    max-height:0;
    opacity:0;
    list-style:none;
    overflow:hidden;
    background:#ebebeb; 
    -wekbit-transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out;
            transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out;
}
.js-clickMenu li a { display:block; position:relative; padding:10px; font-size:18px; font-size:1.15rem; font-weight:600; }

.js-clickMenu > ul > li { position:relative; -webkit-backface-visibility:hidden; }
.js-clickMenu > ul > li > a {
    border-bottom:1px solid #888;
	padding: .9em 27px .9em;
	letter-spacing:1px;
	color: #fff;
    background:#a2a2a2;
	-webkit-transition: all 0.2s ease-out;
		    transition: all 0.2s ease-out;
}
.js-clickMenu > ul > li > a > span { display:block; }

.js-clickMenu > ul > li:hover > a, .js-clickMenu > ul > .opened > a,
.js-clickMenu > ul > li > a:hover, .js-clickMenu > ul > li > a:focus { outline:0; color:#222; border-bottom-color:#ebebeb; background:#ebebeb; }

.js-clickMenu .hasSub span:after,
.js-clickMenu .subMenu .hasSub:after { 
	content:" "; 
	position:absolute; 
	bottom:10px; right:10px;
	border:5px solid transparent; border:5px solid rgba(80,80,80,0); 
    border-bottom-color:#656565; border-right-color:#656565;
	-moz-transform:scale(.99);
	margin-left:10px;
	vertical-align:middle;
	line-height:1;
	-webkit-transition: all 0.2s ease-out;
		    transition: all 0.2s ease-out;
}

.js-clickMenu .subMenu { position:relative; }
.js-clickMenu .subMenu ul { padding:0 10px; font-size:.9em; }
.js-clickMenu .subMenu ul li { position:relative; }
.js-clickMenu .subMenu a { margin:10px 0; padding:.9em 40px .9em; color:#fff; background:#A2A2A2; }

.js-clickMenu .subMenu li:hover > a, .js-clickMenu .subMenu .opened > a,
.js-clickMenu .subMenu a:hover, .js-clickMenu .subMenu li a:focus { color: #222; background:#fff; }


/* ================= 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:992px){
    .js-clickMenu { position: static; padding:0; background:none; }
    .js-clickMenu ul { overflow:visible; }
    
    .js-clickMenu > ul { display:table; table-layout:fixed; border: 0; width: 100%; max-height:80em; opacity:1; background: none; }
    .js-clickMenu > ul > li { display: table-cell; position:static; vertical-align: middle; }
    .js-clickMenu > ul > li > a { 
		display:table;
        border:2px solid #fff;
        border-width:2px 1px 2px 1px;
		width:100%; height:42px;
		padding:0;
		text-align: center;
        font-weight:normal;
		font-size:14px;
		font-size:.85rem;
        font-weight:600;
    }
    .js-clickMenu > ul > li > a > span { display:table-cell; padding-left: 0.4em; padding-right: 0.4em; vertical-align:middle; line-height:1.2; }

    .js-clickMenu .hasSub span:after,
    .js-clickMenu .subMenu .hasSub:after { bottom:5px; right:5px; }

    .js-clickMenu .subMenu { position:relative; padding:0; }
    .js-clickMenu .subMenu ul { display:block; position:absolute; z-index:-1; top:-100em; left:0; border-top:2px solid #a7a7a7; padding:5px 0; min-width:100%; }
    .js-clickMenu .subMenu ul ul { border-top: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:8px; padding:8px 10px; font-size:14px; font-size:.85rem; font-weight:600; background:#bbb; -webkit-backface-visibility:hidden; }
    
    .js-clickMenu .subMenu li:hover > a, 
    .js-clickMenu .subMenu a:hover, .js-clickMenu .subMenu a:focus, 
    .js-clickMenu .subMenu .opened > a { color:#222; background:#fff; }
    

    /* ================= 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.6s ease-in-out, opacity 0.4s ease-in-out, left 0.4s ease-in-out, right 0.4s ease-in-out, box-shadow 0.2s ease-in-out;
                transition: max-height 0.6s ease-in-out, opacity 0.4s ease-in-out, left 0.4s ease-in-out, right 0.4s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .js-enabled .subMenu ul ul { top:-13px; }
    
    .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; 
        -webkit-box-shadow:1px 3px 5px rgba(0,0,0,.3);
                box-shadow:1px 3px 5px rgba(0,0,0,.3); 
    }
    .js-enabled .opened > ul, .js-enabled .opened:hover > ul { 
        top:-13px; left:100%;
        margin-left:0; 
        max-height:80em;
        opacity:1;
        -webkit-box-shadow:-1px 3px 5px rgba(0,0,0,.3);
                box-shadow:-1px 3px 5px rgba(0,0,0,.3); 
    }
    .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:0;
        -webkit-box-shadow:1px 3px 5px rgba(0,0,0,.3);
                box-shadow:1px 3px 5px rgba(0,0,0,.3); 
    }

    .js-enabled .animated > ul, 
    .js-enabled .animated .subMenu > ul { overflow:visible; z-index:10; }
    .js-enabled .animating > ul { z-index:-1; }
}


/* ================================================================
   RAIL NAV
   ================================================================ */

.railNav { margin:0; padding:0; list-style:none; }
.railNav { border-bottom:2px solid #e4e4e4; }
.railNav li a { display:block; position:relative; padding:3px 0; color:#888; }
.railNav li a:hover, .railNav li a:focus { color:#ED1C27;  }
.railNav ul { margin:20px 10px; padding:0; list-style:none; }
.railNav li li a { color:#000; }

.csstransforms .railNav li .hasSub:after { 
    content:" ";
    display:inline-block;
    margin-left:5px;
    width:7px; height:7px;
    -webkit-box-shadow:1px 1px 0 0 #DADADA, 2px 2px 0 0 #DADADA, 3px 3px 0 0 #DADADA;
            box-shadow:1px 1px 0 0 #DADADA, 2px 2px 0 0 #DADADA, 3px 3px 0 0 #DADADA;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
		    transition: all 0.3s ease-in-out;
}
.csstransforms .railNav li .hasSub:hover:after, 
.csstransforms .railNav li .hasSub:focus:after {
    margin-left:10px;
}