#left-burger-content[data-visible="false"] {
    left: -100%;
    transition: left 0.2s ease-in;
}

#left-burger-content[data-visible="true"] {
    left: 0;
    transition: left 0.2s ease-out;
}

#right-burger-content[data-visible="false"] {
    visibility: hidden;
    opacity: 0;
    transition:
        visibility 0.2s,
        opacity 0.2s ease-in;
}

#right-burger-content[data-visible="true"] {
    visibility: visible;
    opacity: 1;
    transition:
        visibility 0.2s,
        opacity 0.2s ease-out;
}

#burger_open[data-visible="false"] {
    visibility: hidden;
    opacity: 0;
    transition:
        visibility 0.1s,
        opacity 0.1s linear;
}

#burger_open[data-visible="true"] {
    visibility: visible;
    opacity: 1;
}