.logo .logo-img {
    width: 100%;
    position: relative;
    bottom:0px;
    opacity: 0;
}

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

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

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

.logo .items {
    width: 78%;
    bottom: 25%;
    left: 0%;
    z-index: -1;
    animation: lgItems 12s ease infinite;
}

.logo .slot {
    width: 58%;
    bottom: 16%;
    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: 1200px) {
    .logo .seven {
        width: 26%;
        top: 6px;
        right: 0%;
        animation: lgSeven 12s ease infinite;
    }
    .logo .panel {
        width: 83%;
        bottom: 22px;
        animation: lgPanel 12s ease infinite;
    }
    
}

@media (max-width: 480px) {
    .logo .seven {
        width: 24%;
        top: 9px;
        right: 0%;
        animation: lgSeven 12s ease infinite;
    }
    .logo .panel {
        width: 83%;
        bottom: 19px;
        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;
    }
}