@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@keyframes logoAnimation {
  0% {
      transform: translate(-50%, -50%) scale(0.3);
      top: 50%;
      left: 50%;
      opacity: 1;
  }
  100% {
      transform: translate(0, 0) scale(0.6);
      top: 110px;
      left: 0px;
      opacity: 1;
  }
}

@keyframes slideOut {
  0% {
      opacity: 1;
      top: 170px;
  }
  100% {
      opacity: 0;
      top: 0px;
  }
}

@keyframes slideDown {
  0% {
      opacity: 1;
      top: -100px;
  }
  100% {
      opacity: 1;
      top: 0;
  }
}

@keyframes slideLeft {
  0% {
      opacity: 0;
      right: -70px;
  }
  100% {
      opacity: 1;
      right: 0;
  }
}

@keyframes slideUp {
  0% {
      opacity: 0;
      top: 460px;
  }
  100% {
      opacity: 1;
      top: 150px;
  }
}

@keyframes slidecontUp {
  0% {
      opacity: 0;
      transform: translateY(30px);
  }
  100% {
      opacity: 1;
      transform: translateY(0px);
  }
}
@keyframes lineupani {
  0%{ transform: scale(0.5); opacity: 0; }
  100%{ transform: scale(1); opacity: 1; }
}
@keyframes lineupani2 {
  0%{ left: 50px; top: 419px; }
  100%{ left: 0px; top: 369px; }
}
@keyframes aboutani {
  0%{ left: 320px; top: 150px; opacity: 0; }
  100%{ left: 270px; top: 0px; opacity: 1; }
}
@keyframes customizeani {
  0%{ left: 714px; top: 419px; opacity: 0; }
  100%{ left: 914px; top: 369px; opacity: 1; }
}
@keyframes functionani {
  0%{ left: 285px; bottom: 100px; opacity: 0; }
  100%{ left: 235px; bottom: 30px; opacity: 1; }
}