.bricks-is-frontend .animation-trigger .smooth-fadein {
  opacity:0;
}
 

.animate{
  animation-name: fadeAnimation;
  animation-delay: calc(var(--delay, 0) * 200ms);
  animation-duration: var(--duration, 400ms);
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
 

.animation--left-to-right{
  --translate: -20px,0,0;
}
.animation--right-to-left{
  --translate: 20px,0,0;
}
.animation--top-to-bottom{
  --translate: 0,-20px,0;
}
.animation--bottom-to-top{
  --translate: 0,20px,0;
}
 

@keyframes fadeAnimation{
  from{
    transform: translate3d(var(--translate));
  }
  to{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}



@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(70px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.animate-fade-up {
  animation: fadeInUp 0.8s ease-out forwards;

}


.delay-200 {
  animation-delay: 200ms;
}

.delay-400 {
  animation-delay: 400ms;
}