@keyframes moveBottom {
  0% {
    bottom: -50px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes moveTop {
  0% {
    top: -50px;
  }
  100% {
    top: 0px;
  }
}
@keyframes moveLeft {
  0% {
    left: -50px;
  }
  100% {
    left: 0px;
  }
}
@keyframes moveRight {
  0% {
    right: -50px;
  }
  100% {
    right: 0px;
  }
}
@keyframes moveOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes moveClip {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes moveImg {
  0% {
    transform: translate(0%, 10%);
    clip-path: inset(9% round 0px);
  }
  100% {
    transform: translate(0px, 0px);
    clip-path: inset(0% round 0px);
  }
}
.eTop {
  position: relative;
  top: -50px;
}
.eBottom {
  position: relative;
  bottom: -50px;
}
.eLeft {
  position: relative;
  left: -50px;
}
.eRight {
  position: relative;
  right: var(--centerpaddingminus);
}
.eOpacity {
  opacity: 0;
}
.eClip {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
}
.eMoveImg {
  transform: translate(0%, 10%);
  clip-path: inset(9% round 0px);
}
.eBottom.effect {
  bottom: 0;
  animation: moveBottom 600ms 1 ease;
}
.eTop.effect {
  top: 0;
  animation: moveTop 600ms 1 ease;
}
.eLeft.effect {
  left: 0;
  animation: moveLeft 600ms 1 ease;
}
.eRight.effect {
  right: 0;
  animation: moveRight 600ms 1 ease;
}
.eClip.effect {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  animation: moveOpacity 600ms 1 ease,moveClip 1000ms 1 ease;
}
.eOpacity.effect {
  opacity: 1;
  animation: moveOpacity 300ms 1 ease;
}
.eOpacity.eBottom.effect {
  animation: moveBottom 600ms 1 ease,  moveOpacity 600ms 1 ease;
}
.eOpacity.eTop.effect {
  animation: moveTop 600ms 1 ease,  moveOpacity 600ms 1 ease;
}
.eMoveImg.effect {
  transform: translate(0px, 0px);
  clip-path: inset(0% round 0px);
  animation: moveImg 1000ms 1 ease;
}
.eOpacity.eBottom.eMoveImg.effect {
  animation: moveBottom 600ms 1 ease,  moveOpacity 600ms 1 ease, moveImg 1000ms 1 ease;
}
.eBottom.eMoveImg.effect {
  animation: moveBottom 600ms 1 ease,  moveImg 1000ms 1 ease;
}
.eOpacity.eBottom.effect {
  animation: moveBottom 600ms 1 ease,  moveOpacity 600ms 1 ease;
}
.eOpacity.eRight.effect {
  animation: moveRight 600ms 1 ease,  moveOpacity 600ms 1 ease;
}
.eOpacity.eLeft.effect {
  animation: moveLeft 600ms 1 ease,  moveOpacity 600ms 1 ease;
}
.effect .effect {
  bottom: 0;
  opacity: 1;
  animation: unset !important;
}