.noite {
    position: absolute;
    float: left;   
    width: 100%;
    height: 100%;
    top: -55%;
    left: -2%;
    transform: rotateZ(135deg);
    z-index: 1
}

@media only screen and (max-width:1536px) {
    .noite {
        left: -10%;
        top: -62%
    }
}

@media only screen and (max-width:1366px) {
    .noite {
        left: -12%;
    }
}

@media only screen and (max-width:768px) {
    .noite {
        left: -15%
    }
}

.estrela {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999
}

.estrela_cadente {
    position: absolute;
    left: 50%;
    top: 40%;
    height: 2px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;
    /* filter: drop-shadow(0 0 6px #fff); */
    animation: tail 3000ms ease-in-out, shooting 3000ms ease-in-out;
    animation-delay: 3000ms;
}

/* @media only screen and (max-width:576px) {
    .estrela_cadente {
        display: none;
        visibility: hidden
    }
} */

@media only screen and (max-width:1536px) {
    .estrela_cadente {
        top: 30%
    }
}

.estrela_cadente::before {
    content: '';
    position: absolute;    
    top: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(45deg, rgba(0, 0, 255, 0), rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    transform: translateX(50%) rotateZ(45deg);
    border-radius: 999px;
    animation: shining 3000ms ease-in-out;    
    animation-iteration-count: 2;
}

.estrela_cadente::after {
    content: '';
    position: absolute;    
    top: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    transform: translateX(50%) rotateZ(-45deg);        
    border-radius: 999px;
    animation: shining 3000ms ease-in-out;
    animation-iteration-count: 2;
}

@keyframes tail {
    0% {
        width: 0;
    }

    30% {
        width: 250px;
    }

    100% {
        width: 0;
    }
}

@keyframes shining {
    0% {
        width: 0;
    }

    50% {        
        width: 15px;
    }

    100% {
        width: 0;
    }
}

@keyframes shooting {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(745px);
    }
}

@media only screen and (max-width:1536px) {
    @keyframes shooting {
        0% {
            transform: translateX(0);            
        }

        100% {
            transform: translateX(525px);            
        }
    }
}

@media only screen and (max-width:576px) {
    .shines {
        display: none
    }
}

.shine1 {
    position: absolute;
    left: 10%;
    top: 5%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;
    
}

.shine2 {
    position: absolute;
    left: 20%;
    top: 35%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;    
}

.shine3 {
    position: absolute;
    left: 35%;
    top: 30%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;    
}

@media only screen and (max-width:1536px) {
    .shine3 {
        left: 30%
    }
}

.shine4 {
    position: absolute;
    left: 45%;
    top: 20%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;    
}

@media only screen and (max-width:1536px) {
    .shine4 {
        left: 32%
    }
}

.shine5 {
    position: absolute;
    left: 40%;
    top: 15%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;    
}

@media only screen and (max-width:1536px) {
    .shine5 {
        top: 60%;
        left: 30%
    }
}

.shine6 {
    position: absolute;
    left: 5%;
    top: 15%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;    
}

.shine7 {
    position: absolute;
    left: 25%;
    top: 5%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;    
}

.shine8 {
    position: absolute;
    left: 35%;
    top: 10%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;    
}

.shine9 {
    position: absolute;
    left: 35%;
    top: 60%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;    
}

.shine10 {
    position: absolute;
    left: 27%;
    top: 57%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;    
}

.shine11 {
    position: absolute;
    left: 94%;
    top: 40%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;    
}

.shine12 {
    position: absolute;
    left: 73%;
    top: 65%;
    height: 1px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;    
}

.shine10::after,
.shine10::before,
.shine11::after,
.shine11::before,
.shine12::after,
.shine12::before,
.shine1::after,
.shine1::before,
.shine2::after,
.shine2::before,
.shine3::after,
.shine3::before,
.shine4::after,
.shine4::before,
.shine5::after,
.shine5::before,
.shine6::after,
.shine6::before,
.shine7::after,
.shine7::before,
.shine8::after,
.shine8::before,
.shine9::after,
.shine9::before {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    height: 1px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    transform: translateX(50%) rotateZ(0);
    border-radius: 100%;
    animation: shining 3s ease-in-out
}

.shine1::after {
    transform: translateX(50%) rotateZ(-90deg)
}

.shine2::after {
    transform: translateX(50%) rotateZ(-90deg)
}

.shine3::after {
    transform: translateX(50%) rotateZ(-90deg)
}

.shine4::after {
    transform: translateX(50%) rotateZ(-90deg)
}

.shine5::after {
    transform: translateX(50%) rotateZ(-90deg)
}

.shine6::after {
    transform: translateX(50%) rotateZ(-90deg)
}

.shine7::after {
    transform: translateX(50%) rotateZ(-90deg)
}

.shine8::after {
    transform: translateX(50%) rotateZ(-90deg)
}

.shine9::after {
    transform: translateX(50%) rotateZ(-90deg)
}

.shine10::after {
    transform: translateX(50%) rotateZ(-90deg)
}

.shine11::after {
    transform: translateX(50%) rotateZ(-90deg)
}

.shine12::after {
    transform: translateX(50%) rotateZ(-90deg)
}