@media(max-width: 770px) {
    header .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        padding: 10px 20px;
        height: 100vh;
        z-index: -1;
        background: var(--white);
        clip-path: circle(0% at 100% 0%);
        transition: clip-path 0.8s cubic-bezier(0.86, 0, 0.07, 1) 0s;
    }

    header .navbar.active {
        clip-path: circle(150% at 100% 0%);
    }

    header .menu-links.d-flex {
        display: initial !important;
        width: 100%;
    }

    header .menu-links a {
        display: block !important;
        padding: 5px;
        text-align: center;
        margin-bottom: 20px;
        transition: color .1s ease-in-out;
    }

    header .menu-links a:hover,
    header .menu-links a.active {
        color: var(--app-color-primary) !important;
    }

    header .menu-links a:before,
    header .menu-links a:hover:before,
    header .menu-links a.active:before {
        width: 0;
    }

    #btn-menu.menu-buttons {
        display: initial !important;
    }

    .social-networks {
        display: initial !important;
    }

    .social-networks nav a {
        font-size: 2rem !important;
    }
}