// Styling for the navbar
#mainNav {
    background-color: $gray-darker;
    .navbar-toggler {
        font-size: 12px;
        right: 0;
        padding: 13px;
        text-transform: uppercase;
        color: white;
        border: 0;
        background-color: $theme-primary;
        @include heading-font;
    }
    .container {
        padding: 0;
        .navbar-brand {
            color: $theme-primary;
            @include script-font;
            &:hover,
            &:focus,
            &:active,
            &.active {
                color: darken($theme-primary, 10%);
            }
        }
        .navbar-nav {
            .nav-item {
                .nav-link {
                    font-size: 90%;
                    font-weight: 400;
                    padding: .75em 0;
                    letter-spacing: 1px;
                    color: white;
                    @include heading-font;
                    &:hover,
                    &.active {
                        color: $theme-primary;
                    }
                }
            }
        }
    }
}

@media(min-width:992px) {
    #mainNav {
        padding: 25px 0;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
        border: none;
        background-color: transparent;
        .navbar-brand {
            font-size: 1.75em;
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            transition: all .3s;
        }
        .navbar-nav {
            .nav-item {
                .nav-link {
                    padding: 1.1em 1em !important;
                }
            }
        }
        &.navbar-shrink {
            padding: 0;
            background-color: $gray-darker;
            .navbar-brand {
                font-size: 1.25em;
                padding: 12px 0;
            }
        }
    }
}