.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; */
  /* animation-name:fade_left;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  animation-timing-function:ease-out; */
}
.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.fade_up {
  /* opacity: 0 !important; */
  /* transform: translate(0, 0) !important; */
  animation-name:fade_up;
  animation-duration:0.7s;
  animation-fill-mode:forwards;
  animation-timing-function:ease-out;
}
.fadein.fade_left {
  /* opacity: 0 !important; */
  /* transform: translate(0, 0) !important; */
  animation-name:fade_left;
  animation-duration:0.7s;
  animation-fill-mode:forwards;
  animation-timing-function:ease-out;
}
.fadein.fade_line {
  /* opacity: 0 !important; */
  /* transform: translate(0, 0) !important; */
  animation-name:fade_line;
  animation-duration:0.7s;
  animation-fill-mode:forwards;
  animation-timing-function:ease-out;
}
/*# sourceMappingURL=huwatto.css.map */

@keyframes fade_up{
  from {
    opacity: 0;
	  transform: translate(0,20px);
  }

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

@keyframes fade_left{
  from {
    opacity: 0;
	transform: translate(-20px,0);
  }

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

@keyframes fade_line{
  from {
    opacity: 0;
	  width: 0px;
  }
  
  to {
    opacity: 1;
    width: 100%;
  }
}

.delay02{animation-delay: 0.2s;}
.delay04{animation-delay: 0.4s;}
.delay06{animation-delay: 0.6s;}
.delay08{animation-delay: 0.8s;}
.delay10{animation-delay: 1.0s;}
.delay12{animation-delay: 1.2s;}
.delay14{animation-delay: 1.4s;}
.delay16{animation-delay: 1.6s;}
.delay18{animation-delay: 1.8s;}
.delay20{animation-delay: 2.0s;}
.delay25{animation-delay: 2.5s;}
.delay30{animation-delay: 3.0s;}