// Desktop Navigation desktopNav {

.navbar {
        margin: .25em 0;
}

.navigation {
  list-style: none;
  padding: 0;
  margin-bottom: 0.5em;
  vertical-align: middle;

        li {
                margin-right: .75rem;

                a {
                        color: $color-gray-smoke;
                        font-weight: $font-semi-bold;

                        &:before {
                                height: 2px;
                        }

                        &:hover {
                                color: $color-gray;
                        }
                }
        }

        li:first-child {
                a {
                        color: $color-gray;
                }
        }
}

}

// Mobile Navigation mobileNav {

.rm-menu-top {
        position: relative;

        .rm-menu-brand {
                color: $color-gray;
                font-weight: $font-bold;
                display: inline-block;
                margin: 15px 0;

                em {
                        color: $color-main;
                }

                &:before {
                        height: 2px;
                }
        }

        .rm-toggle {
                display: block;
                position: absolute;
                top: 0;
                right: 0;
        }
}

.navbar {
        background: $color-gray-darker;
        height: 0;
        overflow: hidden;
        @include transition (height, 0.5s, cubic-bezier(.68,-0.55,.27,1.55));

        &.open {
                height: 10.56em;
        }
}

.navigation {
        li {
                border-bottom: 1px solid $color-gray-dark;

                &:last-child {
                        border-bottom: none;
                }
        }

        a {
                text-align: center;
                z-index: 1;

                &:before {
                        height: 100%;
                        width: 0;
                        background-color: $color-main;
                        z-index: -1;
                        -webkit-transform: scaleX(1);
transform: scaleX(1);
                }

                &:hover {
                        color: $color-white;
                        background: none;

                        &:before {
                                width: 100%;
                        }
                }
        }
}

}

// Responsive Rule @media (min-width: 683px) {

#desktopNav { display: flex; }
#mobileNav { display: none; }

#desktopNav .navigation {
        font-size: 0.75rem;
}

}

@media (max-width: 682.999px) {

#desktopNav { display: none; }
#mobileNav { display: flex; }

}