@keyframes slideRight {
    from {
        right: -100%;
        opacity: 0;
    }
    to {
        right: 0;
        opacity: 1;
    }
}

@keyframes slideLeftRight {
    from {
        right: 0;
        opacity: 1;
    }
    to {
        right: -100%;
        opacity: 0;
    }
}

@keyframes slideLeft {
    from {
        left: -100%;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        max-height: 0;
        opacity:0;

    }
    to {
        max-height: 500px;
        opacity:1;

    }
}

@keyframes fadeOut {
    from {
        max-height: 500px;
        opacity:1;
    }
    to {
        max-height: 0;
        opacity:0;
    }
}

@keyframes rotateX-180-0 {
    from {
        transform: rotateX(180deg);
    }
    to {
        transform: rotateX(0deg);
    }
}


@keyframes rotateX-0-180 {
    from {
        transform: rotateX(0deg);
    }
    to {
        transform: rotateX(180deg);
    }
}