.reveal {overflow: hidden;opacity: 0;}
.activesection .reveal {opacity: 1;}
.activesection .reveal__content {
  transform: translateY(100%);
  animation: reveal 1.7s cubic-bezier(1, 0, 0.3, 0.9) forwards;
}
.activesection .reveal:nth-child(2) .reveal__content {animation-delay: 0.6s;}
.activesection .reveal:nth-child(3) .reveal__content {animation-delay: 1.2s;}
.activesection .reveal:nth-child(4) .reveal__content {animation-delay: 1.8s;}
.activesection .reveal:nth-child(5) .reveal__content {animation-delay: 2.4s;}
.activesection .reveal:nth-child(6) .reveal__content {animation-delay: 3s;}
.activesection .reveal:nth-child(7) .reveal__content {animation-delay: 3.6s;}
@keyframes reveal {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
/*****************/
.to-bottom {
    display: block;
    animation-name: moveToBottom;
    animation-duration: 3s;
}
@keyframes moveToBottom {
    0% {
        opacity: 0;
        transform: translateY(-200px);
    }
   100% {
        opacity: 1;
        transform: translate(0);
    }

}

/******/
.activesection .to-top {
    display: block;
    animation-name: moveToTop;
    animation-duration: 7s;
}
@keyframes moveToTop{
    0% {
        opacity: 0;
        transform: translateY(400);
    }
   100% {
        opacity: 1;
        transform: translate(0);
    }

}

/******/
.activesection .to-right {
    display: block;
    animation-name: moveInleft;
    animation-duration: 3s;
}
@keyframes moveInleft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

 
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
/******/
.activesection .to-left {
    display: block;
    animation-name: moveInRight;
    animation-duration: 3s;
}
@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
   100% {
        opacity: 1;
        transform: translate(0);
    }

}
/******/
.activesection .box-sp {
  opacity: 0;
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.activesection .box-sp-2 {
  animation-delay: 500ms;
}
.activesection .box-sp-3 {
  animation-delay: 1000ms;
}
.activesection .box-sp-4 {
  animation-delay: 1500ms;
}
.activesection .box-sp-5 {
  animation-delay: 2000ms;
}
.activesection .box-sp-6 {
  animation-delay: 2500ms;
}