@keyframes anim-swipe-out-up {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-20px);
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes anim-hide {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


@keyframes anim-swipe-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes anim-swipe-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes anim-swipe-in-left {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes anim-swipe-in-right {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

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

.dynamic-content {
  min-height: 100%;
  &__body {
    min-height: 100%;
    display: block;
    width: 100%;
  }
  .tp-progress {
    display: none;
  }
}


.transition {
  &-page {
    &--out-up {
      animation: anim-swipe-out-up 0.3s ease;
      opacity: 0;
    }
    &--out-in {
      animation: anim-swipe-in-up 0.3s ease;
      opacity: 1;
    }
    &--fade-out {
      animation: fade-out 0.3s ease;
      opacity: 0;
    }
    &--fade-in {
      animation: fade-in 0.3s ease;
      opacity: 1;
    }
    &--loading {
      .tp-progress {
        display: block;
      }
    }
  }
}