/*------------------------------------------------------------
  Viewport
------------------------------------------------------------*/

.viewport .fade-effect,
.viewport .move-effect,
.viewport .move-margin-effect {
  opacity: 0;
  visibility: hidden;
}

.viewport .fade-effect {
  -webkit-transition: opacity 0.7s linear, visibility 0.7s linear;
  -o-transition: opacity 0.7s linear, visibility 0.7s linear;
  transition: opacity 0.7s linear, visibility 0.7s linear;
}

.viewport .move-effect {
  -webkit-transition: opacity 0.7s linear, visibility 0.7s linear, -webkit-transform 0.7s linear;
  transition: opacity 0.7s linear, visibility 0.7s linear, -webkit-transform 0.7s linear;
  -o-transition: transform 0.7s linear, opacity 0.7s linear, visibility 0.7s linear;
  transition: transform 0.7s linear, opacity 0.7s linear, visibility 0.7s linear;
  transition: transform 0.7s linear, opacity 0.7s linear, visibility 0.7s linear, -webkit-transform 0.7s linear;
  -webkit-transform: translateY(2.5rem);
  -ms-transform: translateY(2.5rem);
  transform: translateY(2.5rem);
}

.viewport .move-margin-effect {
  -webkit-transition: margin-top 0.7s linear, opacity 0.7s linear, visibility 0.7s linear;
  -o-transition: margin-top 0.7s linear, opacity 0.7s linear, visibility 0.7s linear;
  transition: margin-top 0.7s linear, opacity 0.7s linear, visibility 0.7s linear;
  margin-top: 2.5rem;
}

.viewport.in-viewport .move-effect,
.viewport.in-viewport .fade-effect,
.viewport.in-viewport .move-margin-effect {
  opacity: 1;
  visibility: visible;
}

.viewport.in-viewport .move-effect {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

.viewport.fade-effect,
.viewport.move-effect,
.viewport.move-margin-effect {
  opacity: 0;
  visibility: hidden;
}

.viewport.fade-effect {
  -webkit-transition: opacity 0.7s linear, visibility 0.7s linear;
  -o-transition: opacity 0.7s linear, visibility 0.7s linear;
  transition: opacity 0.7s linear, visibility 0.7s linear;
}

.viewport.move-effect {
  -webkit-transition: opacity 0.7s linear, visibility 0.7s linear, -webkit-transform 0.7s linear;
  transition: opacity 0.7s linear, visibility 0.7s linear, -webkit-transform 0.7s linear;
  -o-transition: transform 0.7s linear, opacity 0.7s linear, visibility 0.7s linear;
  transition: transform 0.7s linear, opacity 0.7s linear, visibility 0.7s linear;
  transition: transform 0.7s linear, opacity 0.7s linear, visibility 0.7s linear, -webkit-transform 0.7s linear;
  -webkit-transform: translateY(2.5rem);
  -ms-transform: translateY(2.5rem);
  transform: translateY(2.5rem);
}

.viewport.move-margin-effect {
  -webkit-transition: margin-top 0.7s linear, opacity 0.7s linear, visibility 0.7s linear;
  -o-transition: margin-top 0.7s linear, opacity 0.7s linear, visibility 0.7s linear;
  transition: margin-top 0.7s linear, opacity 0.7s linear, visibility 0.7s linear;
  margin-top: 2.5rem;
}

.viewport.move-delay {
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.viewport.in-viewport.move-effect,
.viewport.in-viewport.fade-effect,
.viewport.in-viewport.move-margin-effect {
  opacity: 1;
  visibility: visible;
}

.viewport.in-viewport.move-effect {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

.viewport.in-viewport.move-margin-effect {
  margin-top: 0;
}