@keyframes fadeUp{
    from{ opacity: 0; transform: translate(0,1rem);}
    to{ opacity: 1; transform: translate(0,0);}
}
.fadeUp{ opacity: 0; transform: translate(0,1rem);}
.animated.fadeUp{ animation: fadeUp ease both;}
.animated .fadeUp{ animation: fadeUp ease both;}
@keyframes slideLeft{
    from{ transform: translate(-100%,0);}
    to{ transform: translate(0,0);}
}
.slideLeft{ transform: translate(-100%,0);}
.animated.slideLeft{ animation: slideLeft ease both;}
.animated .slideLeft{ animation: slideLeft ease both;}
@keyframes slideRight{
    from{ transform: translate(100%,0);}
    to{ transform: translate(0,0);}
}
.slideRight{ transform: translate(100%,0);}
.animated.slideRight{ animation: slideRight ease both;}
.animated .slideRight{ animation: slideRight ease both;}
@keyframes fadeLeft{
    from{ opacity: 0; transform: translate(-100%,0);}
    to{ opacity: 1; transform: translate(0,0);}
}
.fadeLeft{ opacity: 0; transform: translate(-100%,0);}
.animated.fadeLeft{ animation: fadeLeft ease both;}
.animated .fadeLeft{ animation: fadeLeft ease both;}
@keyframes fadeRight{
    from{ opacity: 0; transform: translate(100%,0);}
    to{ opacity: 1; transform: translate(0,0);}
}
.fadeRight{ opacity: 0; transform: translate(100%,0);}
.animated.fadeRight{ animation: fadeRight ease both;}
.animated .fadeRight{ animation: fadeRight ease both;}
@keyframes fadeIn{
    from{ opacity: 0; }
    to{ opacity: 1;}
}
.fadeIn{ opacity: 0;}
.animated.fadeIn{ animation: fadeIn ease both;}
.animated .fadeIn{ animation: fadeIn ease both;}

@keyframes fadeLeft1{
    from{ opacity: 0; transform: translate(-0.8rem,0);}
    to{ opacity: 1; transform: translate(0,0);}
}
.fadeLeft1{ opacity: 0; transform: translate(-0.8rem,0);}
.animated.fadeLeft1{ animation: fadeLeft1 ease both;}
.animated .fadeLeft1{ animation: fadeLeft1 ease both;}