// Styling for the navbar
#mainNav {
    border-color: fade-out($gray-darker, .95);
    background-color: white;
    @include sans-serif-font;
    @include transition-all;
    .navbar-brand {
        font-weight: 700;
        text-transform: uppercase;
        color: $theme-primary;
        @include sans-serif-font;
        &:hover,
        &:focus {
            color: darken($theme-primary, .1);
        }
    }
    .navbar-toggle {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        color: $gray-darker;
    }
    .navbar-nav {
        > li.nav-item {
            > a.nav-link,
            > a.nav-link:focus {
                font-size: 13px;
                font-weight: 700;
                text-transform: uppercase;
                color: $gray-darker;
                &:hover {
                    color: $theme-primary;
                }
                &.active {
                    color: $theme-primary !important;
                    background-color: transparent;
                    &:hover {
                        background-color: transparent;
                    }
                }
            }
        }
    }
    @media (min-width: 992px) {
        border-color: fade-out(white, .7);
        background-color: transparent;
        .navbar-brand {
            color: fade-out(white, .3);
            -webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
            font-size: 1.5rem;
            small {
                font-size: 1.3rem;
                font-weight: 700;
            }
            &:hover,
            &:focus {
                color: white;
            }
            margin-left: 6rem;
        }
        .navbar-nav {
            margin-right: 9rem;
        }
        .navbar-nav > li.nav-item > a.nav-link,
        .navbar-nav > li.nav-item > a.nav-link:focus {
            color: fade-out(white, .3);
            -webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
            font-size: 1.3rem;
            &:hover {
                color: white;
            }
        }
        &.navbar-shrink {
            border-color: fade-out($gray-darker, .95);
            background-color: white;
            .navbar-brand {
                font-size: 1.3rem;
                color: $theme-primary;
                -webkit-text-stroke: 0px rgba(0, 0, 0, 0.7);
                small {
                    font-size: 1rem;
                    font-weight: 700;
                }
                &:hover,
                &:focus {
                    color: darken($theme-primary, .1);
                }
            }
            .navbar-nav > li.nav-item > a.nav-link,
            .navbar-nav > li.nav-item > a.nav-link:focus {
                color: $gray-darker;
                -webkit-text-stroke: 0px rgba(0, 0, 0, 0.7);
                font-size: 1rem;
                &:hover {
                    color: $theme-primary;
                }
            }
        }
    }
}