
.animSlideUp {
  opacity: 0;
  animation-name: slideup;
  animation-duration: 0.7S;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion) {  .animSlideUp {
    animation-duration: 0s;
  }
}

.animSlideDown {
  opacity: 0;
  animation-name: slidedown;
  animation-duration: 0.7S;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion) {  .animSlideDown {
    animation-duration: 0s;
  }
}

.animSlideFromLeft {
  opacity: 0;
  animation-name: slidefromleft;
  animation-duration: 0.7S;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion) {  .animSlideFromLeft {
    animation-duration: 0s;
  }
}

.animSlideFromRight {
  opacity: 0;
  animation-name: slidefromright;
  animation-duration: 0.7S;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion) {  .animSlideFromRight {
    animation-duration: 0s;
  }
}

.animSlideUEnter {
  opacity: 0;
  transform: translateY(50px);
}

.animSlideUEnter.animSlideUEnterActive {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.7S ease;
}

@media (prefers-reduced-motion) {  .animSlideUEnter.animSlideUEnterActive {
    transition: all 0s;
  }
}

.animSlideULeave {
  opacity: 1;
  transform: translateY(0);
}

.animSlideULeave.animSlideULeaveActive {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.7S ease;
}

@media (prefers-reduced-motion) {  .animSlideULeave.animSlideULeaveActive {
    transition: all 0s;
  }
}

.animSlideDEnter {
  opacity: 0;
  transform: translateY(-50px);
}

.animSlideDEnter.animSlideDEnterActive {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.7S ease;
}

@media (prefers-reduced-motion) {  .animSlideDEnter.animSlideDEnterActive {
    transition: all 0s;
  }
}

.animSlideDLeave {
  opacity: 1;
  transform: translateY(0);
}

.animSlideDLeave.animSlideDLeaveActive {
  opacity: 0;
  transform: translateY(-50px);
  transition: all 0.7S ease;
}

@media (prefers-reduced-motion) {  .animSlideDLeave.animSlideDLeaveActive {
    transition: all 0s;
  }
}

.animSlideLEnter {
  opacity: 0;
  transform: translateX(-50px);
}

.animSlideLEnter.animSlideLEnterActive {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.7S ease;
}

@media (prefers-reduced-motion) {  .animSlideLEnter.animSlideLEnterActive {
    transition: all 0s;
  }
}

.animSlideLLeave {
  opacity: 1;
  transform: translateX(0);
}

.animSlideLLeave.animSlideLLeaveActive {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.7S ease-in;
}

@media (prefers-reduced-motion) {  .animSlideLLeave.animSlideLLeaveActive {
    transition: all 0s;
  }
}

.animSlideREnter {
  opacity: 0;
  transform: translateX(50px);
}

.animSlideREnter.animSlideREnterActive {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.7S ease;
}

@media (prefers-reduced-motion) {  .animSlideREnter.animSlideREnterActive {
    transition: all 0s;
  }
}

.animSlideRLeave {
  opacity: 1;
  transform: translateX(0);
}

.animSlideRLeave.animSlideRLeaveActive {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.7S ease-in;
}

@media (prefers-reduced-motion) {  .animSlideRLeave.animSlideRLeaveActive {
    transition: all 0s;
  }
}

@keyframes slideup {  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slidedown {  0% {
    opacity: 0;
    transform: translateY(-50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slidefromleft {  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slidefromright {  0% {
    opacity: 0;
    transform: translateX(50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}