#logo_bar {
    margin: 1.5em 0 0 0;
}

/* all ul and li */
#main_nav ul,
#main_nav ul li {
    margin: 0;
    padding:0;
    list-style: none;
    box-sizing: border-box;
    display: block;
}

/* all ul */
#main_nav ul {
    width: 100%;
}

/* main ul only */
#main_nav > ul {
    position: relative;
    float: left;
}

/* main li only */
#main_nav > ul > li {
    float: left;

}

/* 3rd li in the main ul only */
#main_nav > ul > li:nth-child(4) {
    width: 46%;
    text-align: center;
}

/* main ul 'a' tag  */
#main_nav > ul > li > a {
    color: #00395a;
    text-decoration: none;
    padding: 10px 10px 20px 10px;
    margin-top:30px;
}

#main_nav > ul > li > a,
#main_nav > ul > li > span {
    text-transform: uppercase;
    font-family: gotham_probold;
    display: block;
    font-size: 12px;
    line-height: 1em;
}

#main_nav > ul > li > span {
    margin-top:39px;
}

/*#main_nav > ul > li:nth-child(2) > a:before,
#main_nav > ul > li:nth-child(5) > a:before {
    content:"|";
    display: inline-block;
    color:#00395A;
    margin-right:10px;
}*/

#main_nav > ul > li.active > a {
    color: #95c11c;
}

/* main ul 'a' tag on hover */
#main_nav > ul > li.hover > a {
    color:#fff;
    background-color: #787a7c;
}

/* 2nd level ul only */
#main_nav ul ul {
    position:absolute;
    z-index: 1;
    left: 0;
    width:100%;
    display: flex;
}

/* li tag in the 2nd level ul only */
#main_nav ul ul li {
    flex-grow: 1;
    background-color: #787A7C;
    padding: 10px 0;
    text-align: center;
}

/* 'a' tag in the 2nd level ul only */
#main_nav ul ul li a {
    color:#00395a;
    font-family: gotham_prolight;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    padding: 2px 10px;
    border-right: 1px solid #00395a;
    line-height: 1em;
    font-size:12px;
}

#main_nav ul ul li:last-child a {
    border-right: 0;
}

/* 'a' tag in the 2nd level ul only */
#main_nav ul ul li a:hover,
#main_nav ul ul li.active a {
    color:#fff;
}

#main_nav #main_ul.hide {
    display: block;
}

#main_nav ul ul.hide {
    display: none;
}

#main_nav .nav-button {
    display: none;
}

.tablet-show,
#main_nav ul > li.mobile-show {
    display: none;
}

/* login box */
#module-login {
    box-sizing: border-box;
    padding: 20px;
    position:absolute;
    width:280px;
    right:0;
    background-color: #787a7c;
    z-index: 9;
}

#module-login input[type=text],
#module-login input[type=password] {
    width:100%;
}

#module-login input[type=submit] {
    margin-bottom: 1em;
}

#module-login p {
    margin-top:0;
    font-family: gotham_probold;
    color:#fff;
    font-size:12px;
    margin-right: 20px;
    margin-bottom: .25em;
}

#module-login a {
    font-family: gotham_prolight;
    text-decoration: underline;
    color:#fff;
}

#module-login .errorInputMsg {
    color:#fff;
}

@media all and (max-width: 990px) {
    .tablet-show {
        display: block;
        max-width:100%
    }

    #main_nav > ul > li.tablet-hide {
        display: none;
    }

    #main_nav > ul > li > a {
        margin-top: 5px;
    }

    #main_nav > ul > li > span {
        margin-top:15px;
    }

    #module-login-trigger {
        position: relative;
    }
}

@media all and (max-width:638px) {
    #logo_bar {
        margin: .5em 0;
    }

    #main_nav {
        border: 0;
        background-color: #787a7c;
        height: 33px;

        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        position: relative;
        margin-top: 10px;
    }

    #main_nav .nav-button {
        padding: 0 10px;
        top: 10px;
        color:#fff;
        font-weight: bold;
        position: relative;
        display: block;
        cursor: pointer;
    }

    #main_nav .nav-button::after {
        background-image: url('data:image/gif;base64,R0lGODlhCwALAIABAP///////yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRERFNEFEQzgxQkYxMUU1QkRCOEM3QTQzNkFBMTg0RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRERFNEFERDgxQkYxMUU1QkRCOEM3QTQzNkFBMTg0RiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFEREU0QURBODFCRjExRTVCREI4QzdBNDM2QUExODRGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjFEREU0QURCODFCRjExRTVCREI4QzdBNDM2QUExODRGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAsACwAAAg+Mj6nL7R+AnPPQiu7COxUAOw==');
        content: " ";
        display: block;
        font-size: 0.8em;
        height: 12px;
        position: absolute;
        right: 10px;
        top: -2px;
        width: 12px;
    }

    #main_nav #main_ul.hide {
        display: none;
    }

    #main_nav #main_ul {
        position:absolute;
        width:300px;
        top: 33px;
        right:0;
        z-index: 10;
    }

    #main_nav ul li,
    #main_nav ul ul li {
        display: block;
        float:none;
        width:100%;
        background-color: #d6d6d6;
        border-bottom:1px solid #7f7f7e;
    }

    #main_nav > ul > li a {
        margin-top: 0;
        padding: 10px;
        line-height: 1.125em;
    }

    #main_nav > ul > li:nth-child(2),
    #main_nav > ul > li:nth-child(6) {
        display: none;
    }

    #main_nav > ul > li.active > a {
        color: #00395a;
    }

    #main_nav > ul > li.hover > a {
        background-color: #eee;
        color:#000;
    }

    #main_nav ul li ul,
    #main_nav ul li ul.hide {
        display: block;
        width:100%;
        position: relative;
        border-top:1px solid #7f7f7e;
    }

    #main_nav ul ul li a {
        border-right: 0;
        text-align: left;
        margin-left:20px;
        line-height: 1.25em;
    }

    #main_nav ul li:last-child {
        border-bottom:0;
    }

    #main_nav ul ul li a:hover,
    #main_nav ul ul li.active a {
        color:#000000;
        text-decoration: underline;
    }

    #main_nav ul ul li.active a {
        font-weight: bold;
    }

    #main_nav ul > li.mobile-hide {
        display: none;
    }

    #main_nav ul > li.mobile-show {
        display: block;
    }
}