/*----------------------------------------------------------
animation
----------------------------------------------------------*/
.fadeinUp {
  opacity: 0;
  -webkit-transform: translate(0, 50px);
          transform: translate(0, 50px);
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}

.fadeinUp.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.fadeinDown {
  opacity: 0;
  -webkit-transform: translate(0, -50px);
          transform: translate(0, -50px);
  -webkit-transition: all 1s;
  transition: all 1s;
}
@media screen and (max-width: 750px) {
  .fadeinDown {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

.fadeinDown.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.fadeinLeft {
  opacity: 0;
  -webkit-transform: translate(-40px, 0);
          transform: translate(-40px, 0);
  -webkit-transition: all 1s;
  transition: all 1s;
}

.fadeinLeft.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.fadeinRight {
  opacity: 0;
  -webkit-transform: translate(40px, 0);
          transform: translate(40px, 0);
  -webkit-transition: all 1s;
  transition: all 1s;
}

.fadeinRight.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}