@media screen and (max-width: 850px) {
    .sidebar__menu,
    .sidebar__menu_close,
    .sidebar__button,
    .sidebar__button_close {
        animation-duration: 0.5s;
        -webkit-animation-duration: 0.5s;
        animation-iteration-count: 1;
        -webkit-animation-iteration-count: 1;
    }

    .sidebar__menu {
        animation-name: "sidebar__menu_open";
        -webkit-animation-name: "sidebar__menu_open";
    }

    .sidebar__menu_close {
        animation-name: "sidebar__menu_close";
        -webkit-animation-name: "sidebar__menu_close";
    }

    .sidebar__button {
        animation-name: "sidebar__button_open";
        -webkit-animation-name: "sidebar__button_open";
    }

    .sidebar__button_close {
        animation-name: "sidebar__button_close";
        -webkit-animation-name: "sidebar__button_close";
    }
}

@-webkit-keyframes "sidebar__menu_open" {
    from {
        width: 0;
        min-width: 0;
    }
    to {
        width: 80%;
        min-width: 10em;
    }
}

@-webkit-keyframes "sidebar__menu_close" {
    from {
        width: 80%;
        min-width: 10em;
    }
    to {
        width: 0;
        min-width: 0;
    }
}

@-webkit-keyframes "sidebar__button_open" {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes "sidebar__button_close" {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}