.fade-in {
    transition: 2s;
    opacity: 0;
  }
  
  .fade-in.animated {
    opacity: 1;
  }

.fade-left {
    transform: translate3d(-100px, 0, 0);
    transition: 1s;
    opacity: 0;
}

.fade-left.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fade-up {
    transform: translate3d(0, 100px, 0);
    transition: 1s;
    opacity: 0;
}

.fade-up.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}


.fade-right {
    transform: translate3d(50px, 0, 0);
    transition: 1s;
    opacity: 0;
}

.fade-right.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}


@media (min-width:768px) {

    .fade-up {
        transform: translate3d(0, 200px, 0);
        transition: 1s;
        opacity: 0;
    }
    
    .fade-up:nth-child(2) {
        transform: translate3d(0, 200px, 0);
        transition: 1.5s;
        opacity: 0;
    }
    
    .fade-up:nth-child(3) {
        transform: translate3d(0, 200px, 0);
        transition: 2s;
        opacity: 0;
    }

    .fade-up.animated {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }

}

/* :root{
	scroll-padding: 150px;
	scroll-behavior: smooth;
    transition: 3s;
} */

.text-in span {
  opacity: 0;
 
}
.text-in.apptextin span {
  animation: text-anime_on 1s ease-out forwards;
}
@keyframes text-anime_on {
  0% {opacity: 0;}
  100% {opacity: 1;}
}