/*
    Source
    https://bootstrap-menu.com/

*/
.navbar {
    z-index:1000 !important;
}

.navbar-collapse {
    padding: 0 1rem;
    margin-top: 1rem;
    background-color: rgb( 50, 55, 62 );
    border-radius: 4px;
    z-index: 100;
}

@media( min-width: 768px ) {
    .navbar-collapse {
        background-color: transparent;
    }
}


.navbar-nav .dropdown-item {
    padding-top: .7rem;
    padding-bottom: .7rem;

}


.dropdown-menu .dropdown-menu {
    margin: 0.2rem;


}


.bg-primary {

    background-color: transparent !important;
}



@media (min-width: 768px) {

    .bg-primary {
        background-color: transparent !important;
    /*    background-color: rgba( 255, 255, 255, .4) !important;*/
    }


    .dropdown-menu li {
        position: relative;

    }

    .dropdown-menu .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px;
    }

    .dropdown-menu .submenu-left {
        right: 100%;
        left: auto;
    }

    .dropdown-menu > li:hover {
        background-color: var(--ovsl-blue-color);
    }

    .dropdown-menu > li:hover > .submenu {
        display: block;
    }
}




.dropdown-menu {
    background-color: rgba( 255,255,255, .25 );

}
.dropdown-menu a {
    color: rgba( 255, 255, 255, .55);
}
@media( min-width: 768px ) {
    .dropdown-menu {
        max-width: 300px;
        background-color: rgba( 255, 255, 255, .8);
    }

    .dropdown-menu a {
        color: #212529;
    }


}






@media( min-width: 768px ) {
    a.contact-us-link {
        background-color: var(--ovsl-button-blue);
        color: white !important;
        padding: 8px 30px !important;
        border-radius: 8px;
        margin-left:20px;
    }


    a.contact-us-link:hover {
        margin-top: -6px;
    }
}




.fixed-top {
    background-color: rgb( 50, 55, 62 ) !important;
    padding: 10px !important;
    transition: background-color 1s ease;
}

@media( min-width: 768px ) {
    .fixed-top {
        background-color: white !important;
        border-bottom: 1px solid rgba( 30, 148, 178, .1 ) !important;
    }

    .fixed-top .nav-item .nav-link {
        color: rgb( 50, 55, 62 ) !important;

    }

    .nav-item .nav-link {
        font-size: 1.1rem;
        color: #ffffffda !important;
    }


    .fixed-top .nav-item .nav-link.contact-us-link {
        color: white !important;
    }

    .hero-menu li.active {
        border-bottom: 4px solid var(--ovsl-button-blue) !important;
    }
}







/** this is a bootstrap class, it defaults the menu to the left, 
    but the menu is on the right and when add the fixed-top class 
    it expands the menu to full screen and put the items on the left. **/

.navbar-expand-lg .navbar-collapse {
    justify-content: flex-end;
    z-index:100;
}

.nav-container {
    width: 100%;
}





.nav-logo {
    display: none;
}


.nav-logo a {
display: inline-flex;
color: rgba( 21, 29, 37, 1 )
}

.nav-logo a:hover {
    text-decoration: none;
    color: rgba( 21, 29, 37, .7 )
}



@media( min-width: 768px ) {

    .nav-logo {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-family: var(--heroFont);
        font-size: 2rem;
    }
}


.nav-logo-text {
    margin-top: 20px;
    margin-left: 10px;
    display: none;
}

.nav-logo-text--animate {
    display: block;
}

.nav-logo-img {
    opacity: 0;
    height: 0;
    width: 0;
}

.nav-logo-img--animate {
    opacity: 1;
    width: 100px;
    height: auto;
}