.animate {visibility:hidden;}

.slideRight {
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(70%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}
@-webkit-keyframes slideRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}


.slideLeft {
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(-70%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}
@-webkit-keyframes slideLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

.slideUp {
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(70%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
@-webkit-keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

.slideDown {
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-70%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
@-webkit-keyframes slideDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

.fade {
    animation-name: fade;
    -webkit-animation-name: fade;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
    animation-fill-mode: forwards;
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeMedium {
    animation-name: fade;
    -webkit-animation-name: fade;
    animation-duration: 1.4s;
    -webkit-animation-duration: 1.4s;
    visibility: visible;
    animation-fill-mode: forwards;
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeSlow {
    animation-name: fade;
    -webkit-animation-name: fade;
    animation-duration: 1.8s;
    -webkit-animation-duration: 1.8s;
    visibility: visible;
    animation-fill-mode: forwards;
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}