.effect_fade, .effect_slide,
.effect_slide_out_left, .effect_slide_out_right {
  opacity: 0;
  transition: transform 0.6s, opacity 0.6s;
}

.effect_slide {
  transition: opacity 0.3s;
}

.effect_width {
  width: 0;
}

.fade_in_up {
  transform: translate(0, 45px);
}

.fade_in_down {
  transform: translate(0, -45px);
}

.fade_in_right {
  transform: translate(45px, 0);
}

.fade_in_left {
  transform: translate(-45px, 0);
}

.slide_in_left {
  transform: translate(-200%, 0);
}

.slide_in_right {
  transform: translate(200%, 0);
}

.effect_scroll {
  opacity: 1;
  transform: translate(0, 0);
}

.effect_scroll_width {
  width: 100%;
}

.slide_left {
  opacity: 1;
  transform: translateX(-100%);
}

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

.slide_up {
  opacity: 1;
  transform: translateY(-10%);
}

.scroll_active {
  opacity: 0;
  transition: transform 0.6s, opacity 0.6s, position 1s;
}

.scroll_active.on {
  opacity: 1;
  transform: translate(0, 0);
}