.slideanim {
    visibility: hidden;
}

.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}

@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(70%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

.slideanimR {
    visibility: hidden;
}

.slideR {
    animation-name: slideR;
    -webkit-animation-name: slideR;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}

@keyframes slideR {
    0% {
        opacity: 0;
        transform: translateX(70%);
    }

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

@-webkit-keyframes slideR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(70%);
    }

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

.slideanimL {
    visibility: hidden;
}

.slideL {
    animation-name: slideL;
    -webkit-animation-name: slideL;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}

@keyframes slideL {
    0% {
        opacity: 0;
        transform: translateX(-70%);
    }

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

@-webkit-keyframes slideL {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-70%);
    }

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


@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    animation-name: zoomIn;
    animation-duration: 1s;
    animation-fill-mode: both;
}