/*The best header lives here*/

/**/

/**/

/**/

/**/


/*Main Desktop Menu and Toggler*/

/**/

/**/

/**/

/**/


/*Top level Navigation customization mainly for sizing and making sticky. Make #navWrapper and .navbar same height*/

#navWrapper {
    position: fixed;
    width: 100%;
    z-index: 99999;
    height: 126px;
}

/*Main navbar color and height.  Also controls padding but be wary top and bottom padding will prevent you from getting to dropdowns on hover. Make #navWrapper and .navbar same height*/

.navbar {
    background-color: rgb(23, 57, 81)!important;
    height: 126px;
    padding: 0 30px;
}

/*Set this to the height of the navbar.  May need to change it on media query if your mobile menu is different height*/

.main-content {
    padding-top: 96px;
}

/*Controls height of logo link which also changes height of main navbar*/

.navbar-brand {
    height: 100px;
}

/*Fine tune size of logo without controlling height of navbar.  Height is percentage of link height.  Use Margin-top to place it in the link tag*/

#nav-logo {
    height: 100%;
    margin-top: 9px;
}

/*Controls the width of the container that contains the main menu*/

#main-menu {
    min-width: 475px;
    font-family: mermaid;
    font-size: 28px;
    margin-top: 50px;
}

#menu-item-133 > ul {
    margin-top: -13px;
    background-color: rgb(23,57,81);
    font-family: brandon-grotesque, sans-serif;
    font-style: normal;
    font-weight: 200; 
}

/*controls the top level menu items.  May need to look further to find .someClass > .menu-item first because it's used for dynamic generation of menu*/

#main-menu .menu-item {}

/*controls the top level menu items on hover*/

#main-menu .menu-item:hover {}

/*Controls the style of the text in the main menu*/

.headerMenuWrapper .menu-item .nav-link {
    font-weight: bold;
    color: #fff!important;
}

/*absolute position the menu to prevent menu from jumping around.  Styles the sub-menu dropdown*/

.navbar-nav .dropdown-menu {
    position: absolute;
    background-color: #173951;
    margin-top: -13px;
    border-width: 0;
    border-radius: 0;
    padding: 0;
}

/*control menu items in the sub-menu dropdown*/

.navbar-nav .dropdown-menu .menu-item {
    width: 100%;
    padding: 3px 0;
}

/*control hover effects for items in the sub-menu dropdown*/

.navbar-nav .dropdown-menu .menu-item:hover {}

/*Can put a background around the mobile menu toggler button with this.  Background-color for color.  Border-radius: 100px & padding: .25em for a circle*/

#navbarToggler {}

/*Need to probably find a better way of doing this.  But there are attributes within the background image url to control it*/

#navbarTogglerIcon {
    margin-top: 10px;
}

/*header menu wrapper starts display none so that bootstrap can add classes that are synced to toggler and displays at the proper screen size*/

.headerMenuWrapper {
    display: none;
    height: 100%;
}

/*sets this child to height of navbar wrappers*/

.menu-main-navigation-menu-container {
    height: 100%;
}

/*sets this child to height of navbar wrappers*/

#main-menu {
    height: 100%;
}


/*         Mobile Menu         */

/**/

/**/

/**/


/*Controls the mobile menu dropdown color and width*/

#mobileNavWrapper {
    background-color: #660000;
    height: 0;
    overflow: hidden;
    /*So that menu doesn't hang out when div is collapsed*/
    transition: height .2s ease-in-out;
    -webkit-transition: height .2s ease-in-out;
    -moz-transition: height .2s ease-in-out;
    -ms-transition: height .2s ease-in-out;
    box-shadow: inset 0 20px 17px -18px #000;
}

/*This mobile menu dropdown container can be used to control alignment of the mobile menu links*/

#mobile-menu .menu-item {
    text-align: center;
}

/*Controls the style of the text in the mobile menu.  Display and width are there so that they don't completely fill the li container*/

#mobileNavWrapper .menu-item .nav-link {
    font-weight: bold;
    color: #fff!important;
    display: inline-block;
    width: auto;
}

/*Controls transition of the sub-menu dropdown container.  Overflow hidden to hide the transitioning sub menu.  This is also where you set the heights of the mobile menu li items*/

#mobile-menu > .menu-item {
    height: 40px;
    overflow: hidden;
    transition: height .2s ease-in-out;
    -webkit-transition: height .2s ease-in-out;
    -moz-transition: height .2s ease-in-out;
    -ms-transition: height .2s ease-in-out;
    flex-basis: initial;
    flex-grow: initial;
    flex-shrink: initial;
}

/*Controls the mobile sub-menu dropdown*/

#mobile-menu .dropdown-menu {
    background-color: rgb(23,57,81);
    box-shadow: inset 0 18px 25px -20px #000, inset 0 -18px 25px -20px #000;
/*    display: block!important;*/
    width: 100%!important;
    transition: height .2s ease-in-out;
    -webkit-transition: height .2s ease-in-out;
    -moz-transition: height .2s ease-in-out;
    -ms-transition: height .2s ease-in-out;
}

/*Can control the indent of the mobile sub menu dropdown items*/

#mobile-menu .dropdown-menu .menu-item {
    width: 100%;
    float: right;
    height: 46px;
}


/*stevestrap menu classes*/

/**/

/**/

/**/

/**/

/**/

/**/

/**/

/**/

.menu-item {
    display: inline-block;
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.horizontalMenu {
    flex-direction: row;
}

.equalMenuItems > .menu-item {
    flex: 1 1 100%;
    display: inline-flex;
}

.proportionalMenuItems > .menu-item {
    flex-grow: 1;
    display: inline-flex;
}

.equalNatrualMenuItems {
    justify-content: space-between;
}

.equalNatrualMenuItems > .menu-item {
    flex: initial;
    justify-content: space-between;
    padding: 1rem 2rem;
    display: inline-block;
}

/* Custom Navbar Collapse */

/**/

/**/

/**/

/**/

/**/

/**/

/**/

@media (max-width: 1475px) {
    #main-menu {
        font-size: 26px;
    }
}

@media (max-width: 1430px) {
    #main-menu {
        font-size: 24px;
    }
}

@media (max-width: 1340px) {
    .equalNatrualMenuItems > .menu-item {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 1199px) {
    #navbarTogglerIcon {
        margin-top: 0!important;
    }
    .navbar-brand {
        height: 75px;
        margin-top: 0!important;
    }
    .navbar > .container-fluid {
        flex-direction: column;
    }
}