/* MENU */
@-webkit-keyframes animate_menu {
    from {
        width: 0%;
        height: 0px;
        border-bottom-right-radius: 80%;
    }
    to {
        width: 100%;
        height: 60px;
        border-bottom-right-radius: 0%;
    }
}

@keyframes animate_menu {
    from {
        width: 0%;
        height: 0px;
        border-bottom-right-radius: 80%;
    }
    to {
        width: 100%;
        height: 60px;
        border-bottom-right-radius: 0%;
    }
}

.active_menu {
    animation-name: animate_menu;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

@-webkit-keyframes animate_menu_back {
    from {
        width: 100%;
        height: 60px;
        border-bottom-right-radius: 0%;
    }
    to {
        width: 0%;
        height: 0px;
        border-bottom-right-radius: 80%;
    }
}

@keyframes animate_menu_back {
    from {
        width: 100%;
        height: 60px;
        border-bottom-right-radius: 0%;
    }
    to {
        width: 0%;
        height: 0px;
        border-bottom-right-radius: 80%;
    }
}

.idle_menu {
    animation-name: animate_menu_back;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

/* SLIDE */
@-webkit-keyframes animate_slide {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

@keyframes animate_slide {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

.active_slide {
    animation-name: animate_slide;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}