@keyframes slideInRight {
    from {
        transform: translateX(2%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-2%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(0%);
        opacity: 1;
    }
}


@keyframes slideDown {
    from {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }

    to {
        max-height: 100%;
        padding-top: 16px;
        padding-bottom: 16px;
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        max-height: 700px;
        padding-top: 16px;
        padding-bottom: 16px;
        opacity: 1;
    }

    to {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }
}