@-skrollr-keyframes scroll-fade {
  bottom-top {
    opacity[quadratic]: 0;
  }
  center-top {
    opacity[quadratic]: 1;
  }
  center-bottom {
    opacity[sqrt]: 1;
  }
  top-bottom {
    opacity[sqrt]: 0;
  }
}

@-skrollr-keyframes image-parallax {
  bottom-top {
    background-position: center -300px;
  }
  top-bottom {
    background-position: center 300px;
  }
}

@-skrollr-keyframes video-parallax {
  bottom-top {
    transform: translate3d(0, -50%, 0);
  }
  top-bottom {
    transform: translate3d(0, 50%, 0);
  }
}

@-skrollr-keyframes fixed-slideshow-slide {
  -15p-center-top {
    opacity: 0;
  }
  15p-top {
    opacity: 1;
  }
  -15p-bottom {
    opacity: 1;
  }
  15p-center-bottom {
    opacity: 0;
  }
}

@-skrollr-keyframes how-tour-circles {
  15p-center-top {
    opacity: 0;
  }
  40p-top {
    opacity: 1;
  }
  -10p-bottom {
    opacity: 1;
  }
  15p-center-bottom {
    opacity: 0;
  }
}

@-skrollr-keyframes how-tour-steps {
  center-top {
    opacity: 0;
  }
  25p-top {
    opacity: 1;
  }
  -10p-bottom {
    opacity: 1;
  }
  15p-center-bottom {
    opacity: 0;
  }
}

.scroll-fade {
  -skrollr-animation-name: scroll-fade;
}

.background.parallax {
  -skrollr-animation-name: image-parallax;
}

.background.video.parallax {
  -skrollr-animation-name: video-parallax;
}

.fixed-slideshow > div {
  -skrollr-animation-name: fixed-slideshow-slide;
}

.how-tour .circles > div {
  -skrollr-animation-name: how-tour-circles;
}

.how-tour .steps > div {
  -skrollr-animation-name: how-tour-steps;
}