/*================================================================
                 CLICK MENU STYLES
================================================================*/
/*
    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
*/

.cm-menu {
    border-top:2px solid #1b4b7a;
    position:absolute;
    top:100%; left:0;
    background:#fff;
    max-height:0;
}
.cm-menu a {
    display:block;
    font-weight:700;
    font-size:21px;
    font-size:1.3125rem;
    line-height:1.42;
    text-transform: uppercase;
}
.cm-menu a,
.cm-menu a:visited {
    color: #4d4c4c;
    text-decoration: none;
}
.cm-menu, .cm-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.toggle-menu + .cm-menu {
    opacity: 0;
    overflow: hidden;
    -wekbit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

.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 li {
    border-top: 1px solid #ccc;
}
.cm-menu li:first-child {
    border-top: 0;
}
.cm-menu .has-sub span {
    padding-right: 25px;
    background: url("../../images/layout/design/nav-arrow.jpg") no-repeat right center;
}
.cm-menu .opened > .has-sub > span {
    background: url("../../images/layout/design/nav-arrow-up.jpg") no-repeat right 14px;
}
.cm-menu > .opened > a,
.cm-menu > li > a:hover,
.cm-menu > li > div > a:hover,
.js-keyboard-user .cm-menu > li > a:focus,
.js-keyboard-user .cm-menu > li > div > a:focus {
    color: #8F313F;
}
.cm-menu ul .opened > a,
.cm-menu ul a:hover,
.js-keyboard-user .cm-menu ul li a:focus {
    background: #444;
}
.cm-js-active .cm-menu {
    max-height: 80em;
    opacity: 1;
}
.cm-menu .opened > ul {
    max-height: 80em;
    opacity: 1;
}

/* ================= 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: 75em) {    
    .cm-menu { position:static; border-top:0; max-height:none; }
    .toggle-menu + .cm-menu {
        max-height: none;
        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;
    }
}
/*================================================================
                 CLICK MENU MENU TYPES
================================================================*/
/*  NAV BAR STYLE TYPE
    ================================================================*/

@media (min-width: 75em) {
    .nav-bar li {
        border-top: 0;
    }
    .nav-bar > ul {
        display: table;
        margin-left:auto;
        margin-right:0;
        width:100%;
    }
    .nav-bar > ul > li {
        display: table-cell;
        vertical-align: middle;
    }
    .nav-bar > ul > li > a {
        display:block;
        padding: 0;
        padding-left: 22px;
        font-size:17px;
        font-size:1.0625rem;
    }
    .nav-bar > ul > li:first-child > a {
        padding-left: 0;
    }
    .nav-bar > ul > li > a > span {
        display: block;
        padding: 0 10px;
        vertical-align: middle;
        text-align: center;
    }
    .nav-bar > ul > li > ul {
        position: absolute;
    }
    .nav-bar .has-sub span:after {
        position: static;
        margin-top: 10px;
    }
    .nav-bar ul ul .has-sub:after {
        right: 5px;
    }
    .nav-bar ul.cm-menu ul {
        text-align: left;
    }
    .nav-bar ul li li {
        display: inline-block;
        width: 49%;
        text-align: left;
    }
    .nav-bar ul li li li {
        margin-left: 0;
        margin-right: 0;
    }
    .nav-bar ul.cm-menu ul a {
        color: #1f5a93;
        font: 400 17px / 45px Lato;
        text-transform: none;
    }
    .nav-bar ul ul a:hover,
    .js-keyboard-user .nav-bar ul ul a:focus,
    .nav-bar ul ul .opened > a {
        color: #8f313f;
        background: none;
    }
    /* ================= HOVER FALLBACK IF JAVASCRIPT IS DISABLED ================= */
    
    .no-js .nav-bar ul ul li:hover > a {
        color: #000;
        background: #ddd;
    }
}

@media (min-width: 82em) {
    .nav-bar > ul {
        width:auto;
    }
}

@media (min-width:90em) {
    .nav-bar > ul > li > a {
        font-size:21px;
        font-size:1.3125rem;
    }
}

/*  MEGA MENU NAVIGATION ADJUSTMENTS
    ================================================================*/

@media (min-width: 75em) {
    .cm-menu [data-type="mega"] {
        position: static;
    }
    [data-type="mega"] > ul {
        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;
    }
    [data-type="mega"] > ul ul {
        position: static;
        max-height: 80em;
        width: 100%;
        overflow: hidden;
        background: transparent;
        opacity: 1;
    }
    [data-type="mega"] > ul .opened ul {
        margin-left: 0;
    }
    [data-type="mega"] > ul > li {
        float: left;
        width: 25%;
    }
    [data-type="mega"] > ul > li:nth-child(4n+1) {
        clear: left;
    }
    [data-type="mega"] > ul > .link-landing {
        margin: 0;
        width: 100%;
    }
    [data-type="mega"] > ul > .link-landing ~ li:nth-child(4n+1) {
        clear: none;
    }
    [data-type="mega"] > ul > .link-landing ~ li:nth-child(4n+2) {
        clear: left;
    }
    /* ================= OPENED FUNCTIONALITY ADDED ON SETUP ================= */
    
    [data-type="mega"] a + .has-sub {
        width: 0;
        min-height: 0;
        height: 100%;
    }
    [data-type="mega"] a + .has-sub > span {
        min-height: 0;
        height: 100%;
    }
    [data-type="mega"] ul .has-sub:after {
        display: none;
    }
    [data-type="mega"].opened > ul {
        padding: 20px;
    }
    /* ================= SEPARATE EXPANDERS OPTION IS ENABLED ================= */
    
    [data-type="mega"] ul a + .has-sub {
        display: none;
    }
    /* ================= HOVER FALLBACK IF JAVASCRIPT IS DISABLED ================= */
    
    .no-js .cm-menu [data-type="mega"] ul ul {
        display: block;
    }
}
/*================================================================
                 NAVIGATION TOGGLE STYLES
================================================================*/

.toggle-menu {
    border: 0 none;
    display: block;
    height: 46px;
    position: absolute;
    right: 10px;
    top: 30px;
    width: 50px;
    text-indent: -9999px;
    color:#686868;
    background:none;
}
.toggle-menu:before,
.toggle-menu:after,
.toggle-menu > span:before {
    content: " ";
    position: absolute;
    left: 15%;
    border-radius: 2px;
    width: 70%;
    height: 3px;
    background: currentColor;
}
.toggle-menu:before {
    top: 11px;
}
.toggle-menu:after {
    top: 21px;
}
.toggle-menu > span:before {
    top: 31px;
}
.toggle-menu:hover,
.toggle-menu:focus,
.cm-js-menu-active .toggle-menu {
    color: #8f313f;
}
@media (min-width: 75em) {
    .toggle-menu {
        display: none;
    }
}


/*================================================================
                 EXTRA OVERWRITE STYLES
================================================================*/

[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 0;
    color: #585858;
    font: 400 15px / 30px Lato;
}
[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;
}


.cm-menu .table-col h3,
.cm-menu .table-col .title {
    color: #585858;
    font: 700 25px / 45px Lato;
}
.cm-menu .table-col p {
    color: #585858;
    font: 400 15px / 30px Lato;
}


.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;
}
.header-mid .grid_9 {
    position: static !important;
}

.cm-menu .quick-link a { font-size:17px; font-size:1.0625rem; color:#595959; background:#edeff2; }

.cm-js-menu-active body:after {
    content:"";
    position:fixed;
    z-index:800;
    top:0; left:0; right:0; bottom:0;
    background:rgba(42,42,42,.8);

    opacity:0;
    -webkit-animation:fadeIn ease-in .4s;
    -moz-animation:fadeIn ease-in .4s;
    animation:fadeIn ease-in .4s;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

}

@media (min-width: 75em) {
    .cm-menu .quick-link { display:none; }
    .cm-menu .flagico { display:none; }
	
    [data-type="mega"] .custom-sub {
        position: absolute;
        border-top: solid 2px #C24C5D;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(237, 239, 242, 0.95);
    }

    .cm-js-menu-active body:after { display:none; }
}

@media (max-width: 47.938em) {
	.header-top .translate .flags {display:none;}
	/*.cm-menu .flagico {display:inline-block; border-top:none;}
	.cm-menu .flagico a {display:inline-block; font-size:16px; padding-right:10px;}*/
}

@media (max-width: 74.938em) {
	.cm-menu .flagico a {font-size:16px; background: #edeff2}
    .cm-menu .table-col + .table-col { margin-top:1em; border-top:1px solid #ccc; padding-top:1em; }
}