.scroll-space {
  box-sizing: border-box;
  padding-top: 300px;
  height: 1600px;
  color: #fff;
  overflow: hidden;
}
.scroll-space .blue {
  background: #77BBCF;
  width: 200px;
  height: 200px;
  padding: 30px;
  margin: 0 auto 50px;
}
.scroll-space .pink {
  background: #FFB4B4;
  width: 200px;
  height: 200px;
  padding: 30px;
  margin: 0 auto 50px;
}
.scroll-space .yellow {
  background: #F8913C;
  width: 200px;
  height: 200px;
  padding: 30px;
  margin: 0 auto 50px;
}
.scroll-space .green {
  background: #26AA5A;
  width: 200px;
  height: 200px;
  padding: 30px;
  margin: 0 auto 50px;
}

.fadein {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.5s;
}
.fadein.fadein-left {
  transform: translate(-30px, 0);
}
.fadein.fadein-right {
  transform: translate(30px, 0);
}
.fadein.fadein-up {
  transform: translate(0, -30px);
}
.fadein.fadein-bottom {
  transform: translate(0, 30px);
}
.fadein.scrollin {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}/*# sourceMappingURL=animations.css.map */