.animated-element {
    opacity: 0;
    transition: opacity 1.8s ease, transform 1.8s ease;
}

.animated-element.animate {
    opacity: 1;
    transform: translateY(0) translateX(0);
}
.animated-element.from-top {
    transform: translateY(-50%);
    opacity: 0;
}
.animated-element.from-top.animate {
    transform: translateY(0);
    opacity: 1;
}
.animated-element.from-bottom {
    transform: translateY(50%);
    opacity: 0;
}
.animated-element.from-bottom.animate {
    transform: translateY(0);
    opacity: 1;
}
.animated-element.from-left {
    transform: translateX(-50%);
    opacity: 0;
}
.animated-element.from-left.animate {
    transform: translateX(0);
    opacity: 1;
}
.animated-element.from-right {
    transform: translateX(50%);
    opacity: 0;
}
.animated-element.from-right.animate {
    transform: translateX(0);
    opacity: 1;
}
@media (max-width: 992px){
    
.animated-element.from-left {
    transform: translateX(-50%);
}
.animated-element.from-right {
    transform: translateX(50%);
}

.animated-element.from-bottom {
    transform: translateY(50%);
}

.animated-element.from-top {
    transform: translateY(-50%);
}
}