@keyframes moveInDown {
  0% {
    opacity: 1;
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
  }
}
.moveInDown {
  animation-name: moveInDown;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 10%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 0.7s;
  animation-fill-mode: both;
}

@keyframes fadeInRight{
  0% {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight{
  animation-name: fadeInRight;
  animation-duration: 0.7s;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.7s;
  animation-fill-mode: both;
}
.order-one { animation-delay: 0.7s; }
.order-two { animation-delay: 1.4s; }
.order-three { animation-delay: 2.1s; }
.order-four { animation-delay: 2.8s; }


@keyframes expand {
    0%    { opacity: 0; transform: translateX(-100%) }
    80%   { opacity: 1; transform: translateX(0%) }
    90%   { opacity: 1; transform: translateX(0%) }
    100%  { opacity: 0; transform: translateX(0%) }
}

@keyframes onePlaceL1 {
  0%   { opacity: 1;}
  10%  { opacity: 1;}
  20%  { opacity: 1;}
  30%  { opacity: 1;}
  40%  { opacity: 1;}
  50%  { opacity: 1;}
  60%  { opacity: 1;}
  70%  { opacity: 1;}
  80%  { opacity: 1;}
  90%  { opacity: 1;}
  100% { opacity: 1;}
}

.onePlaceL1 {
  animation-name: onePlaceL1;
  animation-duration: 8s;
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes onePlaceL2 {
  0%   { opacity: 0;}
  10%  { opacity: 0;}
  20%  { opacity: 1;}
  30%  { opacity: 1;}
  40%  { opacity: 1;}
  50%  { opacity: 1;}
  60%  { opacity: 1;}
  70%  { opacity: 1;}
  80%  { opacity: 1;}
  90%  { opacity: 1;}
  100% { opacity: 0;}
}

.onePlaceL2 {
  animation-name: onePlaceL2;
  animation-duration: 8s;
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes onePlaceL3 {
  0%   { opacity: 0;}
  10%  { opacity: 0;}
  20%  { opacity: 0;}
  30%  { opacity: 0; transform: translate3d(0, 10%, 0);}
  40%  { opacity: 1; transform: translate3d(0, 0%, 0);}
  50%  { opacity: 1;}
  60%  { opacity: 1;}
  70%  { opacity: 1;}
  80%  { opacity: 1;}
  90%  { opacity: 1;}
  100% { opacity: 0;}
}

.onePlaceL3 {
  animation-name: onePlaceL3;
  animation-duration: 8s;
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes onePlaceL4 {
  0%   { opacity: 0;}
  10%  { opacity: 0;}
  20%  { opacity: 0;}
  30%  { opacity: 0;}
  40%  { opacity: 0;}
  50%  { opacity: 0;}
  60%  { opacity: 1;}
  70%  { opacity: 1;}
  80%  { opacity: 1;}
  90%  { opacity: 1;}
  100% { opacity: 0;}
}

.onePlaceL4 {
  animation-name: onePlaceL4;
  animation-duration: 8s;
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes forgetL1 {
  0%   { opacity: 1;}
  10%  { opacity: 1;}
  20%  { opacity: 1;}
  30%  { opacity: 1;}
  40%  { opacity: 1;}
  50%  { opacity: 1;}
  60%  { opacity: 1;}
  70%  { opacity: 1;}
  80%  { opacity: 1;}
  90%  { opacity: 1;}
  100% { opacity: 1;}
}

.forgetL1 {
  animation-name: forgetL1;
  animation-duration: 6s;
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes forgetL2 {
  0%   { opacity: 0;}
  10%  { opacity: 0;}
  20%  { opacity: 1;}
  30%  { opacity: 1;}
  40%  { opacity: 1;}
  50%  { opacity: 1;}
  60%  { opacity: 1;}
  70%  { opacity: 1;}
  80%  { opacity: 1;}
  90%  { opacity: 1;}
  100% { opacity: 0;}
}

.forgetL2 {
  animation-name: forgetL2;
  animation-duration: 6s;
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes forgetL3 {
  0%   { opacity: 0;}
  10%  { opacity: 0;}
  20%  { opacity: 0;}
  30%  { opacity: 0;}
  40%  { opacity: 1;}
  50%  { opacity: 1;}
  60%  { opacity: 1;}
  70%  { opacity: 1;}
  80%  { opacity: 1;}
  90%  { opacity: 1;}
  100% { opacity: 0;}
}

.forgetL3 {
  animation-name: forgetL3;
  animation-duration: 6s;
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-iteration-count: infinite;
}