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

.logo .panel {
    width: 99%;
    bottom: 0;
    animation: lgPanel 12s ease infinite;
}

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

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

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

.logo .slot {
    width: 58%;
    bottom: 6%;
    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: 480px) {
    
}

@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;
    }
}