/*================================================================
                 CLICK MENU STYLES
================================================================*/

body.homepage .cm-menu .has-sub:after,
body.homepage .cm-menu ul {
    display: none;
}

/*
    THESE STYLES will probably not be needed and are adjusted in your main styles
    - * 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
*/

nav .hidden { display: none !important; visibility: hidden; }
nav .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px;  margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
nav .visually-hidden.focusable:active,
nav .visually-hidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.cm-menu a, .cm-menu a:visited { text-decoration:none; font-family: 'Work Sans', sans-serif;}
.cm-menu *, .cm-menu *:after, .cm-menu *:before {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.cm-menu:focus { outline:3px solid blue;  }
.cm-menu, .cm-menu ul { margin:0; padding:0; list-style:none; background: transparent; }

.toggle-menu + .cm-menu, .cm-menu 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;
}
.cm-menu { position:relative; }
.cm-menu li a { 
    display: block; 
    padding: 10px 40px; 
    position: relative; 
    background: transparent; 
    color: #1d3151; 
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/*
li.link-landing {
    display: none;
}
*/

.cm-menu li:first-child { border-top:0; }
.cm-menu li { position:relative; }


.cm-menu .has-sub:after,
.cm-menu .expander-wrap .has-sub > span:after {
    content: "";
    font-family: 'icomoon';
    color: #1d3151;
    font-size: 30px;
    display: inline-block;
    position: absolute;
    top: 46%;
    margin: 2px 0px 0px 5px;
    vertical-align: middle;
    border: 7px solid transparent;
    /* Extra is for anti-aliasing issues in firefox and others */
    border: 7px solid rgba(0,0,0,0);
    border-top-color:#1d3151;
    -wekbit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: scale(0.98) translateY(-50%) rotate(-90deg);
    -ms-transform: scale(0.98) translateY(-50%) rotate(-90deg);
    transform: scale(0.98) translateY(-50%) rotate(-90deg);
}

.cm-menu li li .has-sub:after,
.cm-menu li li .expander-wrap .has-sub > span:after {
    content: "+";
    font-size: 16px;
    font-weight: 700;
    font-family: sans-serif;
    color: #fff;
    font-size: 24px;
    display: inline-block;
    position: absolute;
    top: 43%;
    margin: 2px 0 0 10px;
    vertical-align: middle;
    border: 0px solid transparent;
    /* Extra is for anti-aliasing issues in firefox and others */
    border: 0px solid rgba(0,0,0,0);
    border-top-color: none;
    -wekbit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: scale(0.98) translateY(-50%) rotate(-90deg);
    -ms-transform: scale(0.98) translateY(-50%) rotate(-90deg);
    transform: scale(0.98) translateY(-50%) rotate(-90deg);
}

/*
.cm-menu > .opened > a,
.cm-menu > li > a:hover,
.cm-menu > li > a:focus,
.cm-menu > li > div > a:hover,
.cm-menu > li > div > a:focus { color: #fff; background: #82c241; }
*/


.cm-menu ul .opened > .has-sub:after,
.cm-menu ul .opened > .expander-wrap .has-sub > span:after{
    border-top-color:#fff;
}

.cm-js-active .cm-menu { max-height:80em; opacity:1; }
.cm-menu .opened > ul { max-height:80em; opacity:1; }

/* ================= SEPARATE EXPANDERS OPTION IS ENABLED ================= */

.cm-menu .expander-wrap { display:table; width:100%; }
.cm-menu .expander-wrap a { display:table-cell; }
.cm-menu .expander-wrap .has-sub { position:relative; width:30px; }
.cm-menu .expander-wrap .has-sub:after { display:none; }
.cm-menu .expander-wrap .has-sub > span {
    display:block;
    position:absolute; top:0; right:0;
    width:100%; height:100%;
    background:#aaa;
}



/* ================= HOVER FALLBACK IF JAVASCRIPT IS DISABLED ================= */

.no-js .toggle-menu + .cm-menu { opacity:1; max-height:80em; }
.no-js .cm-menu > li:hover > a { background:#333; }
.no-js .cm-menu ul ul li:hover > a { background:#444; }

.no-js .cm-menu li:hover > ul { display:block; max-height:80em; opacity:1; width:100%; }
.no-js .cm-menu ul { display:none; overflow:visible; }

/* ================= MENU OPEN FUNCTIONALITY ADDED ON SETUP ================= */

@media (min-width:48em){
    .toggle-menu + .cm-menu { max-height:80em; opacity:1; overflow:visible; }
    .cm-menu ul { top:100%; overflow:hidden; }
    .cm-menu .opened > ul { max-height:80em; opacity:1; }

    .cm-menu .animated > ul { overflow:visible; z-index:10; }
    .cm-menu .animating > ul { z-index:-1; }
}


@media (min-width:48em){
    .toggle-menu { display:none; }
}

/*================================================================
                 EXTRA OVERWRITE STYLES
================================================================*/

.main-nav { position:relative; z-index:1000; max-width: 980px; margin: 0px auto;}

[data-type="sliding"] .sub-menu .item-banner { width:100%; }
[data-type="sliding"] .sub-menu .item-banner a { text-align:center; background:none; }

[data-type="mega"] .custom-sub {
    max-height:0; opacity;0;
    overflow:hidden;
    -wekbit-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}
[data-type="mega"] .custom-sub ul { position:static; opacity:1; max-height:80em; }
[data-type="mega"] .custom-sub p { margin:10px; color:#fff; }

[data-type="mega"] .custom-sub .banner-wrap { width:100%; }
[data-type="mega"] .custom-sub .banner-wrap a { text-align:center; background:none; }

.cm-menu .opened > .custom-sub { max-height:80em; opacity:1; padding:20px; }
.cm-menu .animated > .custom-sub { overflow:visible; z-index:10; }
.cm-menu .animating > .custom-sub { z-index:-1; }

    .main-nav {
        margin-top: 15px;
        border-top: none;
    }
    .cm-menu { 

    }
    .cm-menu li {
        margin: 4px 0px 4px 0px;
        text-align: left;
    }
   .cm-menu li li a {
        color: #3d3d3e; 
        font-size: 16px;
        text-transform: none; 
        font-weight: 700;
    }
   .cm-menu li li li a {
        color: #3d3d3e; 
        font-size: 16px;
        text-transform: none; 
        font-weight: 400;
        letter-spacing: 0px;
    }
    .nav-bar ul li[data-type="dropdown"] li.link-landing a { 
        color: #3d3d3e; 
        background: transparent;
    }

    .nav-bar ul li[data-type="dropdown"] li.link-landing a:hover {
        color: #3d3d3e;
        background: #d1d2d4;
    }

    .cm-menu li li { 
        margin: 0px 0px 0px 0px;
    }
    
    .cm-menu li.opened .has-sub:after,
    .cm-menu li:visited .has-sub:after,
    .cm-menu li:link .has-sub:after,
    .cm-menu li:focus .has-sub:after,
    .cm-menu li:active .has-sub:after,
    .cm-menu li:hover .has-sub:after {
        color: #fff;
    }

    .cm-menu li.opened li .has-sub:after {
        color: #3d3d3e;
    }

    .cm-menu .opened > .has-sub:after,
    .cm-menu .opened > .expander-wrap .has-sub > span:after{
        color: #3d3d3e;
        margin-top: 1px;  
        -webkit-transform: scale(0.98) translateY(-75%) rotate(-180deg);
            -ms-transform: scale(0.98) translateY(-75%) rotate(-180deg);
                transform: scale(0.98) translateY(-75%) rotate(-180deg);
    }

    .cm-menu li li.opened > .has-sub:after,
    .cm-menu li li.opened > .expander-wrap .has-sub > span:after{
        content: "-";
        color: #3d3d3e;
        margin-top: 10px;  
        -webkit-transform: scale(0.98) translateY(-75%) rotate(-180deg);
            -ms-transform: scale(0.98) translateY(-75%) rotate(-180deg);
                transform: scale(0.98) translateY(-75%) rotate(-180deg);
    }
    
    .cm-menu > .opened > a,
    .cm-menu > li > a:hover,
    .cm-menu > li > a:focus,
    .cm-menu > li > div > a:hover,
    .cm-menu > li > div > a:focus { color: #1d3151; background: #d1d2d4; }

    .cm-menu li li a:hover { 
        color: #3d3d3e; 
        background: #D1D2D4; 
    }   
    


.section-nav .opened > ul { border-bottom:1px solid #d4d4d4; max-height:80em; opacity:1; }
.section-nav .opened > a,
.section-nav .opened > .expander-wrap a { border-bottom:1px solid #aaa; color:#333; background:#d4d4d4; }
.section-nav .opened .opened > .expander-wrap > a { background:#c4c4c4; }

.menuLink { 
    display: none; 
    cursor: pointer; 
    width: 40px;
    height: 30px;
}

@media only screen and (min-width: 48em) {
    
	.outer-container {
        min-height: 100px !important;
    }
    
    .main-nav-split {
        margin-top: 50px;
    }

}

@media only screen and (max-width: 47.94em) {

	.outer-container {
        position: relative;
    }

    .menuLink-all { 
        position: relative;
        border-left: 1px solid #9b9c9e;
        margin-top: -20px;
        padding: 10px 0px 20px 0px;
        width: 100%;
    }

    .menuLink:before,
    .menuLink:after,
    .menuLink > span.icon:before {
        content: " ";
        position: absolute;
        width: 40px; 
        height: 4px;
        background: #1e3151;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        z-index: 1001;
        margin-left: 0px;
    }
    .menuLink:before { 
        top: 18px; 
    } 
    .menuLink:after { 
        top: 28px;
    } 
    .menuLink > span.icon:before { 
        top: 38px;
    } 


    .menuLink.activeMenu:before,
    .menuLink.activeMenu:after,
    .menuLink.activeMenu > span.icon:before {
        content: "X";
        letter-spacing: 3px;
        position: absolute;
        left: 32%;
        border-radius: 2px;
        width: 70%; 
        height: 46px;
        background: transparent;
        font-size: 35px;
        color: #1e3151;
        text-align: center;
    }

    .menuLink.activeMenu:before { top: 0px; }
    .menuLink.activeMenu:after { top: 0px; }
    .menuLink.activeMenu > span:before { top: 0px; }    

	.main-nav-split { 
        position: relative; 
        height: auto; 
        position: absolute; 
        right: -80%; 
        top: 0px; 
        width: 80%; 
        z-index: 100; 
        background: #ffffff; 
        box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
        border-right: 0px solid #211c16;
    }

	.menuLink {
		display: block !important;
        margin-left: auto;
        margin-right: auto;
	}
    
	.menuLink.activeMenu {
		display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: right !important;
	}    

	.activeMenu .activeBG {
        display: block;
    }
    
    
    .cm-menu .has-sub:after,
    .cm-menu .expander-wrap .has-sub > span:after {
        content: "";
        font-family: 'icomoon';
        color: #fff;
        font-size: 30px;
        display: inline-block;
        position: absolute;
        top: 46%;
        margin: 2px 0px 0px 5px;
        vertical-align: middle;
        border: 7px solid transparent;
        /* Extra is for anti-aliasing issues in firefox and others */
        border: 7px solid rgba(0,0,0,0);
        border-top-color:#1e3151;
        -wekbit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        -webkit-transform: scale(0.98) translateY(-50%) rotate(-90deg);
        -ms-transform: scale(0.98) translateY(-50%) rotate(-90deg);
        transform: scale(0.98) translateY(-50%) rotate(-90deg);
    }    
    
}

@media only screen and (min-width: 0em) and (max-width: 61.19em) {

    .cm-menu .has-sub:after,
    .cm-menu .expander-wrap .has-sub > span:after {
        content: "";
        margin-left: 20px;
    }

}