﻿nav .toggle-nav {
    display: block;
    background-color: #22335C;
    outline: none;
    border: none;
    border-radius: 0.250em;
    width: 100%;
    cursor:pointer;
    margin: 0.938em auto;
    color: #fff;
    padding: 0.625em 0.500em;
}

nav .toggle-nav:focus {
    background-color: #008A0E !important;
}

nav ul.first.show {
    display: flex !important;
}

nav ul.first {
    display: none !important;
    list-style: none;
    margin: 0;
    padding: 0 0 0.938em 0;
}

nav ul.first > li {
    position: relative !important;
    padding: 0em 0.313em 0em;
}

nav ul.first > li > a {
    position: relative !important;
    text-decoration: none;
    margin-right: 0.313em;
    color: #22335C;
    font-weight: bolder;
    text-transform: uppercase;
    padding: 0.500em 0.313em 0.938em;
    display: block;
}

nav ul.first > li > a:focus {
    color: #008A0E !important;
    outline: none;
}

nav ul.first > li:first-child,
nav ul.first > li.active:first-child {
    padding: 0em 0.313em 0em 0em;
    -webkit-transition: left .3s linear, right .3s linear;
    -moz-transition: left .3s linear, right .3s linear;
    -o-transition: left .3s linear, right .3s linear;
    transition: left .3s linear, right .3s linear;
}

nav ul.first > li:hover > a,
nav ul.first > li:focus > a {
    display: block;
    text-decoration: none;
    color: #008A0E;
}

nav ul.first > li > a:after {
    content: '';
    position: absolute;
    background-color: transparent;
    height: 0.250em;
    border-radius: 0.250em;
    bottom: 0.313em;
    left: 30%;
    right: 30%;
    -webkit-transition: left .3s linear, right .3s linear, background-color .3s linear;
    -moz-transition: left .3s linear, right .3s linear, background-color .3s linear;
    -o-transition: left .3s linear, right .3s linear, background-color .3s linear;
    transition: left .3s linear, right .3s linear, background-color .3s linear;
}

nav ul.first > li.active > a:after {
    background-color: #152d9d;
    left: 30%;
    right: 30%;
    -webkit-transition: left .3s linear, right .3s linear;
    -moz-transition: left .3s linear, right .3s linear;
    -o-transition: left .3s linear, right .3s linear;
    transition: left .3s linear, right .3s linear;
}

nav ul.first > li:hover > a:after,
nav ul.first > li a:focus:after {
    content: '';
    background-color: #152d9d;
    left: 0.313em;
    right: 0.313em;
    -webkit-transition: left .3s linear, right .3s linear;
    -moz-transition: left .3s linear, right .3s linear;
    -o-transition: left .3s linear, right .3s linear;
    transition: left .3s linear, right .3s linear;
}

nav ul.first > li .drop-container {
    width: 100%;
    position: relative;
    left: 0;
    margin-top: 0em;
    z-index: 1;
    outline: none !important;
    border: none !important;
    -webkit-appearance: none !important;
}

nav ul.first > li .drop-container > ul.multi-level {
    display: none !important;
    list-style: none;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0.125em;
    -webkit-transition-property: background-color, display, border-color, box-shadow;
    -webkit-transition-duration: .3s;
    -webkit-transition-delay: .2s, .8s .3s .3s;
    border-color: transparent;
    border-style: solid;
    border-width: 0 0 0 0.250em;
    padding: 0;
}

nav ul.first > li:hover > .drop-container > ul.multi-level,
nav ul.first > li > a:hover ~ .drop-container > ul.multi-level,
/*nav ul.first > li:focus > .drop-container > ul.multi-level,
nav ul.first > li > a:focus ~ .drop-container > ul.multi-level*/
nav ul.first > li > .drop-container > ul.multi-level.open
{
    background-color: #22335C;
    box-shadow: 0 0 0.625em #999;
    display: inline-block !important;
    -webkit-transition-property: background-color, display, border-color, box-shadow;
    -webkit-transition-duration: .3s;
    -webkit-transition-delay: .2s .8s .4s .3s;
    border-color: #152d9d;
    margin-top: -0.573em !important;
    width: 100%;
}

nav ul.first > li .drop-container > ul.multi-level li {
    position: relative;
    display: block;
    background-color: #fff;
    min-width: 5.000em;
    max-width: 100%;
}

nav ul.first > li > .drop-container > ul.multi-level li:nth-child(2n) {
    background-color: #eee;
    color: #152d9d;
}

nav ul.first > li > .drop-container > ul.multi-level li > a {
    text-decoration: none;
    display: block;
    color: #152d9d;
    margin: 0;
    padding: 0.375em 0.500em;

    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
}

nav ul.first > li > .drop-container > ul.multi-level li:last-child,
nav ul.first > li > .drop-container > ul.multi-level li:last-child > a,
nav ul.first > li > .drop-container > ul.multi-level li:last-child:hover,
nav ul.first > li > .drop-container > ul.multi-level li:last-child:hover > a,
nav ul.first > li > .drop-container > ul.multi-level li:last-child:focus,
nav ul.first > li > .drop-container > ul.multi-level li:last-child:focus > a {
    border-radius: 0 0 0.125em 0.125em !important;
}

nav ul.first > li > .drop-container > ul.multi-level li > ul.multi-level,
nav ul.first > li > .drop-container > ul.multi-level.open li > ul.multi-level.open {
    display: none;
}

nav ul.first > li > .drop-container > ul.multi-level li:hover > .drop-container,
nav ul.first > li > .drop-container > ul.multi-level li:focus > .drop-container,
nav ul.first > li > .drop-container > ul.multi-level.open li > .drop-container {
    left: 0 !important;
    top: 0 !important;
    width: 25em !important;
    margin-top: 0em !important;
}

nav ul.first > li > .drop-container > ul.multi-level li:hover > .drop-container > ul.multi-level,
nav ul.first > li > .drop-container > ul.multi-level li:focus > .drop-container > ul.multi-level,
nav ul.first > li > .drop-container > ul.multi-level.open li > .drop-container > ul.multi-level.open {
    display: block !important;
    border-color: #152d9d;
}

nav ul.first > li > a span,
nav ul.first > li > .drop-container > ul.multi-level li > a span {
    float: right;
    margin-top: 0.125em;
    vertical-align: middle;
}

nav ul.first > li > .drop-container > ul.multi-level li:hover > a,
nav ul.first > li > .drop-container > ul.multi-level li > a:focus,
nav ul.first > li > .drop-container > ul.multi-level li:nth-child(2n):hover > a,
nav ul.first > li > .drop-container > ul.multi-level li:nth-child(2n):focus > a,
nav ul.first > li > .drop-container > ul.multi-level li:nth-child(2n) > a:focus {
    color: #fff;
    background-color: #008A0E;
    outline: none;

    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    nav .toggle-nav {
        display: none;
    }

    nav ul.first {
        display: flex !important;
        padding-bottom: 0.250em;
    }

    nav ul.first > li .drop-container {
        position: absolute;
        width: 25em;
        top: 100%;
        outline: none !important;
        border: none !important;
        -webkit-appearance: none !important;
    }

    nav ul.first > li .drop-container > ul.multi-level li {
        max-width: 14em !important;
    }

    nav ul.first > li:hover > .drop-container > ul.multi-level,
    nav ul.first > li > .drop-container > ul.multi-level li:hover > ul.multi-level,
    nav ul.first > li > .drop-container > ul.multi-level li:focus > ul.multi-level {
        display: inline-block !important;
        padding-bottom: 0em;
    }

    nav ul.first > li:hover > .drop-container > ul.multi-level .drop-container,
    nav ul.first > li > .drop-container > ul.multi-level li:hover > .drop-container,
    nav ul.first > li > .drop-container > ul.multi-level li:focus > .drop-container,
    nav ul.first > li > .drop-container > ul.multi-level.open li > .drop-container {
        left: 100% !important;
        margin-top: -0.250em !important;
    }

    nav ul.first > li > .drop-container > ul.multi-level li:hover > .drop-container > ul.multi-level,
    nav ul.first > li > .drop-container > ul.multi-level li:focus > .drop-container > ul.multi-level,
    nav ul.first > li > .drop-container > ul.multi-level.open li > .drop-container > ul.multi-level.open
    {
        display: inline-block !important;
    }

    nav ul.first > li > .drop-container > ul.multi-level li:hover > .drop-container.left,
    nav ul.first > li > .drop-container > ul.multi-level li:focus > .drop-container.left,
    nav ul.first > li > .drop-container > ul.multi-level.open li > .drop-container.left {
        left: auto !important;
        right: 100%;
    }

    nav ul.first > li ul.multi-level {
        border-width: 0.250em 0 0 !important;
        width: auto !important;
    }

    nav ul.first > li:hover > .drop-container,
    nav ul.first > li:focus > .drop-container {
        margin-top: 0em !important;
    }

    nav ul.first > li > a span,
    nav ul.first > li > .drop-container > ul.multi-level li > a span {
        display: none;
        float: right;
    }

    nav ul.first > li > .drop-container ul.show {
        display: inline-block !important;
        border-width: 0.250em 0 0 !important;
        border-color: #152d9d;
        margin-top: -0.250em !important;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 800px) {
    nav ul.first > li .drop-container > ul.multi-level li {
        max-width: 25em !important;
    }
}

nav ul li.drop a {
    padding-right: 1.250em !important;
}

nav ul li.drop:before {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 600;
    content: '\f0d7';
    position: absolute;
    right: 0.6em;
    top: 50%;
    vertical-align: middle;
    margin-top: -1em;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

nav ul li.drop:hover:before {
    content: '\f0da';
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

nav ul.multi-level li.drop:before {
    margin-top: -0.8em !important;
}
