.navbar {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    z-index: 3;
}

.front-nav > .navbar {
    background: #ffffff!important;
}

.front-nav > .navbar > * > .nav-link {
    color: #4B6E67 !important;
}

.navbar.rule-nav {
    background: #FFE600;
}

.nav-link {
    color: #ffffff;
    opacity: 1 !important;
    font-size: 18px;
}

/* mobiles */
@media (max-width: 767px) {
    .overlay {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 3;
        top: 0;
        left: 0;
        overflow-y: clip;
        transition: 0.5s;
    }

    .overlay-content {
        position: relative;
        width: 100%;
    }

    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        transition: 0.3s;
    }

}

/* desktops */
@media (min-width: 768px) {
}