/* ===============  menu-primary  =============== */
.menu.menu-primary {
    margin: 1em 0;
    overflow: hidden;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 3em;
    font-weight: 400;
    color: rgb(173,186,221);
}

.menu.menu-primary + .icon-plus {
    display: none;   
}

.menu.menu-primary > li > a {
    position: relative;
    padding: 0 3em 0 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

.menu.menu-primary > li > a:hover {
    color: rgb(255,255,255);
}

.menu.menu-primary li a .icon-next {
    position: absolute;
    top: 0;
    right: 0;
    width: 3em;
    display: block;
    text-align: center;
    font-size: 1em;
    line-height: 3em;
    color: rgb(255,255,255);   
}

.menu.menu-primary li a .icon-plus {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.5em;
    display: none;
    -webkit-transition: -webkit-transform 0.3s, color 0.3s;
    -moz-transition: -moz-transform 0.3s, color 0.3s;
    transition: transform 0.3s, color 0.3s;  
    text-align: center;
    font-size: 0.92307692em;
    line-height: 3.5em;
    color: rgb(173,186,221);
}

.menu.menu-primary > li > ul {
    display: none;
}


/* ===============  menu-footer  =============== */
.menu.menu-footer {
    margin: 3.42857143em 0 1.14285714em;
    overflow: hidden;
    border-bottom: 1px solid rgba(173,186,221,0.5);
    font-size: 0.875em;
    line-height: 3.42857143em;
    font-weight: 400;
    color: rgb(173,186,221);
}

.menu.menu-footer li {
    border-top: 1px solid rgba(173,186,221,0.5);
}

.menu.menu-footer li a {
    position: relative;
    padding: 0 3.42857143em 0 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

.menu.menu-footer li a:hover {
    color: rgb(255,255,255);
}

.menu.menu-footer li a .icon-next {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.42857143em;
    display: block;
    text-align: center;
    font-size: 1em;
    line-height: 3.42857143em;
    color: rgb(255,255,255);   
}

.menu.menu-footer li a .icon-plus {
    position: absolute;
    top: 0;
    right: 0;
    width: 4em;
    display: none;
    text-align: center;
    font-size: 0.85714286em;
    line-height: 4em;
    color: rgb(32,45,96);
}


@media screen and (min-width: 992px) {
    
    /* ===============  menu-primary  =============== */
    .menu.menu-primary {
        margin: 0;
        width: 100%;
        display: table;
        table-layout: fixed;
        border-top: 1px solid rgb(218,218,218);
        text-transform: none;
        font-size: 0.8125em;
        line-height: 3.23076923em;
        color: rgb(32,45,96);
    }
    
    .menu.menu-primary.active {
        border-bottom: 5px solid rgb(218,218,218);
    }
    
    .menu.menu-primary + .icon-plus {
        position: absolute;
        top: 3em;
        left: 0;
        width: 3em;
        display: block;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        cursor: pointer;
        text-align: center;
        font-size: 1em;
        line-height: 3em;
        color: rgb(32,45,96);
    }
    
    .menu.menu-primary > li {
        display: table-cell;
        vertical-align: top;
        width: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .menu.menu-primary > li:nth-last-child(-n+2) {
        width: 10.9230769em;
    }
    
    .menu.menu-primary > li:nth-last-child(-n+1) {
        width: 14.6153846em;
    }
    
    .menu.menu-primary > li > a {
        padding: 0 2.28571429em 0 1.14285714em;
        border-bottom: 5px solid rgb(218,218,218);
        background: rgb(255,255,255);
        -webkit-transition: border-bottom-color 0.3s;
        -moz-transition: border-bottom-color 0.3s;
        transition: border-bottom-color 0.3s;
        font-size: 1.07692308em;
    }
    
    .menu.menu-primary > li ~ li > a {
        border-left: 1px solid rgb(218,218,218);
    }
    
    .menu.menu-primary > li:hover > a,
    .menu.menu-primary > li > a:hover {
        border-bottom-color: rgb(32,45,96);
        color: inherit;
    }
    
    .menu.menu-primary > li > a .icon-next {
        display: none;   
    }
    
    .menu.menu-primary > li > a .icon-plus {
        display: block;
    }
    
    .menu.menu-primary.active > li > a .icon-plus {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    .menu.menu-primary > li > a .icon-plus:hover {
        color: rgb(0,0,0);
    }
    
    .menu.menu-primary > li > ul {
        max-height: 0;
        margin: 0;
        display: block;
        overflow: hidden;
        opacity: 0.5;
        -webkit-transition: max-height 0.6s, margin 0.7s, opacity 0.3s;
        -moz-transition: max-height 0.6s, margin 0.7s, opacity 0.3s;
        -ms-transition: max-height 0.6s, margin 0.7s, opacity 0.3s;
        transition: max-height 0.6s, margin 0.7s, opacity 0.3s;    
        font-size: 0.92307692em;
        line-height: 2em;
        font-weight: 700;
        color: rgb(32,45,96);
    }
    
    .menu.menu-primary.active > li > ul {
        max-height: 60em;
        margin: 2em 0;
    }
    
    .menu.menu-primary > li:hover > ul {
        opacity: 1;
    }
    
    .menu.menu-primary > li > ul > li {
        margin: 0 1.33333333em;
    }
    
    .menu.menu-primary > li > ul > li > a {
        position: relative;
        padding: 0.66666667em 0;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-transition: color 0.3s;
        -moz-transition: color 0.3s;
        transition: color 0.3s;
    }
    
    .menu.menu-primary > li > ul > li.menu-item-has-children > a {
        padding: 0.66666667em 2em 0.66666667em 0;
    }
    
    .menu.menu-primary > li > ul > li ~ li > a {
        border-top: 1px solid rgba(32,45,96, 0.25); 
    }
    
    .menu.menu-primary > li > ul > li > a:hover {
        color: rgb(255,255,255);   
    }
    
    .menu.menu-primary > li > ul > li > a > .icon-next,
    .menu.menu-primary > li > ul > li > a > .icon-plus {
        display: none;   
    }
    
    .menu.menu-primary > li > ul > li.menu-item-has-children > a > .icon-plus {
        width: 2em;
        display: block;
        font-size: 1em;
        line-height: 3.33333333em;
        color: rgb(32,45,96);
    }
    
    .menu.menu-primary > li > ul > li.menu-item-has-children > a > .icon-plus:hover {
        color: rgb(255,255,255);   
    }
    
    .menu.menu-primary > li > ul > li > ul {
        max-height: 0;
        margin: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.6s, margin 0.7s;
        -moz-transition: max-height 0.6s, margin 0.7s;
        -ms-transition: max-height 0.6s, margin 0.7s;
        transition: max-height 0.6s, margin 0.7s;
        font-size: 1em;
        line-height: 2em;
        font-weight: 400; 
        color: rgb(32,45,96);
    }
    
    .menu.menu-primary > li > ul > li > ul.active {
        max-height: 30em;
        margin: 0 0 0.66666667em 0;  
    }
    
    .menu.menu-primary > li > ul > li > ul > li:before {
        content: " — ";
        float: left;
        margin: 0 0.5em 0 0;
    }
    
    .menu.menu-primary > li > ul > li > ul > li > a {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-transition: color 0.3s;
        -moz-transition: color 0.3s;
        transition: color 0.3s;
    }
    
    .menu.menu-primary > li > ul > li > ul > li > a:hover {
        color: rgb(255,255,255);   
    }
    
    .menu.menu-primary > li > ul > li > ul > li > a > .icon-next,
    .menu.menu-primary > li > ul > li > ul > li > a > .icon-plus {
        display: none;   
    }
    
    
    /* ===============  menu-footer  =============== */
    .menu.menu-footer {
        margin: 0;
        width: 100%;
        display: table;
        table-layout: fixed;
        border-bottom: 0;
        color: rgb(32,45,96);
    }
    
    .menu.menu-footer li {
        display: table-cell;
        vertical-align: top;
        width: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-top: 0;
    }
    
    .menu.menu-footer li:nth-last-child(-n+2) {
        width: 11.8571429em;
    }
    
    .menu.menu-footer li ~ li {
        border-left: 1px solid rgba(255,255,255,0.5);
    }
    
    .menu.menu-footer li a {
        padding: 0 3.42857143em 0 1.14285714em;
        border-bottom: 5px solid rgba(255,255,255,0.5);
    }
    
    .menu.menu-footer li a .icon-next {
        display: none;   
    }
    
    .menu.menu-footer li a .icon-plus {
        display: block; 
    }
    
}