.logo .panel {
  width: 79%;
  bottom: 37px;
  animation: lgPanel 12s ease infinite;
}

.logo .seven {
  width: 0%;
  top: 0;
  right: 0%;
  animation: lgSeven 12s ease infinite;
}

.logo .seven-text {
  width: 53%;
  bottom: 37%;
  right: 0%;
  animation: lgSevenText 12s ease infinite;
}

.logo .items {
  width: 78%;
  bottom: 17%;
  left: 0%;
  animation: lgItems 12s ease infinite;
}

.logo .slot {
  width: 23%;
  bottom: 32%;
  right: 0%;
  animation: lgSlot 12s ease infinite;
}

.logo .dust {
  width: 0%;
  bottom: 16%;
  right: 0%;
  z-index: -1;
  animation: lgDust 12s ease infinite;
}

.logo .stars-h {
  width: 100%;
  bottom: 35%;
  animation: lgStars 12s ease infinite;
}

.logo .stars-v {
  width: 24%;
  bottom: 3%;
  left: 0%;
  animation: lgStars 12s ease infinite;
}

@media (max-width: 460px) {
  .logo .panel {
    width: 79%;
    bottom: 20px;
    animation: lgPanel 12s ease infinite;
  }
}

@keyframes lgPanel {
  0% {
    opacity: 0;
    transform: translateY(-15%);
  }
  8% {
    opacity: 1;
    transform: translateY(0);
  }
  95% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes lgSeven {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  3% {
    opacity: 0;
    transform: scale(0.5);
  }
  7% {
    opacity: 1;
    transform: scale(1.05);
  }
  12% {
    opacity: 1;
    transform: scale(1);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes lgSevenText {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  7% {
    opacity: 0;
    transform: scale(0.5);
  }
  11% {
    opacity: 1;
    transform: scale(1.05);
  }
  16% {
    opacity: 1;
    transform: scale(1);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes lgItems {
  0% {
    opacity: 0;
    transform: rotate(15deg);
  }
  10% {
    opacity: 0;
    transform: rotate(15deg);
  }
  15% {
    opacity: 1;
    transform: rotate(0deg);
  }
  95% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: rotate(0deg);
  }
}

@keyframes lgSlot {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  10% {
    opacity: 0;
    transform: translateY(-10%);
  }
  15% {
    opacity: 1;
    transform: translateY(0);
  }
  95% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes lgDust {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  3% {
    opacity: 0;
    transform: scale(1.1);
  }
  8% {
    opacity: 1;
    transform: scale(1);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes lgStars {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.logo .stars-h img {
  animation: lgStarhAnim 0.8s ease infinite;
}

@keyframes lgStarhAnim {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}

.logo .stars-v img {
  animation: lgStarvAnim 0.8s ease infinite;
}

@keyframes lgStarvAnim {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}