@charset "utf-8";


.circles8{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.circles8 li{
    position: absolute;
    display: block;
    list-style: none;
    width: 1vw;
    height: 2vw;
    border-radius: 0.1vw;
    background: rgba(255, 255, 255, 0.2);
    animation: animate8 25s linear infinite;
    bottom: -300px;
    background: #2196F3;

}
.circles8 li:nth-child(1){
    left: 25%;


    background: #00c8c8;
    animation: ax8-1 35s linear infinite;
    animation-delay: 0s;
    animation-fill-mode:forwards;
}
.circles8 li:nth-child(2){
    left: 10%;


    background: #00c8c8;
    animation: ax8-6 30s linear infinite;
    animation-delay: 0s;
    animation-fill-mode:forwards;
}
.circles8 li:nth-child(3){
    left: 70%;


    background: #00c8c8;
    animation-delay: 0s;
    animation-fill-mode:forwards;

}
.circles8 li:nth-child(4){
    left: 40%;


    background: #3c95fd;
    animation: ax8-2 35s linear infinite;
    animation-delay: 0s;
    animation-fill-mode:forwards;
}
.circles8 li:nth-child(5){
    left: 65%;


    background: #3c95fd;
    animation: ax8-4 50s linear infinite;
    animation-delay: 0s;
    animation-fill-mode:forwards;
}
.circles8 li:nth-child(6){
    left: 75%;


    background: #3c95fd;
    animation: ax8-5 40s linear infinite;
    animation-delay: 0s;
    animation-fill-mode:forwards;
}
.circles8 li:nth-child(7){
    left: 35%;

    background: #32c8ff;
    animation: ax8-3 30s linear infinite;
    animation-fill-mode:forwards;
}
.circles8 li:nth-child(8){
    left: 50%;


    background: #32c8ff;
    animation: ax8-4 45s linear infinite;
    animation-delay: 0s;
    animation-fill-mode:forwards;
}

.circles8 li:nth-child(9){
    left: 20%;


    background: #32c8ff;
    animation: ax8-4 40s linear infinite;
    animation-delay: 0s;
    animation-fill-mode:forwards;
}

@keyframes animate8 {
    0%{
        transform: translateY(-0vh) rotate(0deg);
        opacity: 0;
    }
    10%{
        opacity: 0.9;
    }
    80%{
        opacity: 0.9;
    }
    100%{
        transform: translateY(-100vh) rotate(-660deg);
        opacity: 0;
    }
}
@keyframes ax8-1 {
    0%{
        transform: translateX(0) translateY(-0vh) rotate(0deg);
        opacity: 0;
    }
    10%{
        opacity: 0.9;
    }
    80%{
        opacity: 0.9;
    }
    100%{
        transform: translateX(-20vw) translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}
@keyframes ax8-2 {
    0%{
        transform: translateX(0) translateY(0vh) rotate(0deg);
        opacity: 0;
    }
    10%{
        opacity: 0.9;
    }
    80%{
        opacity: 0.9;
    }
    100%{
        transform: translateX(40vw) translateY(-120vh) rotate(-620deg);
        opacity: 0;
    }
}
@keyframes ax8-3 {
    0%{
        transform: translateX(0) translateY(0vh) rotate(0deg);
        opacity: 0;
    }
    10%{
        opacity: 0.9;
    }
    80%{
        opacity: 0.9;
    }
    100%{
        transform: translateX(-60vw) translateY(-120vh) rotate(520deg);
        opacity: 0;
    }
}
@keyframes ax8-4 {
    0%{
        transform: translateX(0) translateY(0vh) rotate(0deg);
        opacity: 0;
    }
    10%{
        opacity: 0.9;
    }
    80%{
        opacity: 0.9;
    }
    100%{
        transform: translateX(80vw) translateY(-120vh) rotate(-420deg);
        opacity: 0;
    }
}
@keyframes ax8-5 {
    0%{
        transform: translateX(0) translateY(-20vh) rotate(0deg);
        opacity: 0;
    }
    10%{
        opacity: 0.9;
    }
    80%{
        opacity: 0.9;
    }
    100%{
        transform: translateX(-100vw) translateY(-120vh) rotate(320deg);
        opacity: 0;
    }
}
@keyframes ax8-6 {
    0%{
        transform: translateX(0) translateY(0vh) rotate(0deg);
        opacity: 0;
    }
    10%{
        opacity: 0.9;
    }
    80%{
        opacity: 0.9;
    }
    100%{
        transform: translateX(-20vw) translateY(-120vh) rotate(-220deg);
        opacity: 0;
    }
}