.section.intro.active h1 {
  animation-name: fadeInLeftIntro;
  animation-duration: 1s;
  animation-delay: 0;
  animation-iteration-count: 1;
}

.section.active .slide.active .fadeInLeft,
.section.active .title-slide.active h3 {
  animation-name: fadeInLeft;
  animation-duration: 1s;
  animation-delay: 0;
  animation-iteration-count: 1;
}

.section.active .title-slide.active p,
.section.active .slide.active .fadeInRight {
  animation-name: fadeInRight;
  animation-duration: 1s;
  animation-delay: 0;
  animation-iteration-count: 1;
}

.section.active .slide.active .fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-delay: 0;
  animation-iteration-count: 1;
}

@keyframes fadeInLeftIntro {
  0% {
    opacity: 0;
    transform: translate(-60px, 35px);
  }
  100% {
    opacity: 1;
    transform: translate(-20px, 35px);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-150px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(150px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}