/*--------------------------- CAP_1 --------------------------------------------------*/
.actor1{
    animation-duration: 400s;
    animation-name: actor1;
    animation-iteration-count: infinite;
}

@keyframes actor1{
    from{
        top: 60px;
        left: 90px;
        opacity: 0;
    }

    10%{
        opacity: 0.3;
    }

    50%{
        opacity: 0.3;
    }

    to{
        top: -300px;
        left: 30px;
        opacity: 0;
    }
}

.actor2{
    animation-duration: 200s;
    animation-name: actor2;
    animation-iteration-count: infinite;
}

@keyframes actor2{
    from{
        top: 450px;
        left: 600px;
        opacity: 0;
    }

    10%{
        opacity: 0.3;
    }

    50%{
        opacity: 0.3;
    }

    70%{
        top: -300px;
        left: 900px;
        opacity: 0.3;
    }

    to{
        top: -300px;
        left: 1000px;
        opacity: 0;
        background-color: #ffb6e1;
    }
}

.actor3{
    animation-duration: 300s;
    animation-name: actor3;
    animation-iteration-count: infinite;
}

@keyframes actor3{
    from{
        top: 200px;
        left: 460px;
        opacity: 0;
    }

    10%{
        opacity: 0.3;
    }

    50%{
        opacity: 0.3;
    }

    to{
        top: 600px;
        left: -900px;
        opacity: 0;
        background-color: #5ae9ff;
    }
}

.actor4{
    animation-duration: 200s;
    animation-name: actor4;
    animation-iteration-count: infinite;
}

@keyframes actor4{
    from{
        top: 300px;
        left: 950px;
        opacity: 0;
    }

    10%{
        opacity: 0.3;
    }

    50%{
        opacity: 0.3;
    }

    to{
        top: 400px;
        left: 1300px;
        opacity: 0;
    }
}

.actor5{
    animation-duration: 400s;
    animation-name: actor5;
    animation-iteration-count: infinite;
}
@keyframes actor5 {
    from{
        top: -100px;
        left: 800px;
        opacity: 0;
    }

    10%{
        opacity: 0.3;
    }

    50%{
        opacity: 0.3;
    }
    to{
        top: 2000px;
        left: 1050px;
    }
}
/*--------------------------- CAP_1 --------------------------------------------------*/
.actor6{
    animation-duration: 150s;
    animation-name: actor6;
    animation-iteration-count: infinite;
}
@keyframes actor6 {
    from{
        top: -150px;
        left: 20px;
        opacity: 0;
    }
    50%{
        opacity: 0.3;
    }
    to{
        top: 400px;
        left: 300px;
        opacity: 0;
    }
}

.actor7{
    animation-duration: 300s;
    animation-name: actor7;
    animation-iteration-count: infinite;
}
@keyframes actor7 {
    from{
        bottom: -100px;
        left: 300px;
        opacity: 0;
    }
    50%{
        opacity: 0.3;
        left: 900px;
    }

    70%{
        opacity: 0.3;
    }
    to{
        bottom: 300px;
        left: 390px;
        opacity: 0;
        background-color: #5ae9ff;
    }
}

.actor8{
    animation-duration: 300s;
    animation-name: actor8;
    animation-iteration-count: infinite;
}

@keyframes actor8 {
    from{
        bottom: 100px;
        left: 0px;
        opacity: 0;
    }
    15%{
        opacity: 0.3;
    }
    30%{
        opacity: 0;
    }
    45%{
        opacity: 0.3;
    }
    50%{
        bottom: 300px;
        left: 80px;
        opacity: 0.3;
    }
    60%{
        opacity: 0.3;
    }
    to{
        bottom: 400px;
        left: 900px;
        opacity: 0;
    }
}
.actor9{
    animation-duration: 100s;
    animation-name: actor9;
    animation-iteration-count: infinite;
}

@keyframes actor9{
    from{
        top: 60px;
        left: 90px;
        opacity: 0;
    }

    10%{
        opacity: 0.3;
    }

    50%{
        opacity: 0.3;
    }

    to{
        top: 500px;
        left: 200px;
        opacity: 0;
    }
}

.actor10{
    animation-duration: 500s;
    animation-name: actor10;
    animation-iteration-count: infinite;
}
@keyframes actor10 {
    from{
        top: 400px;
        left: 60px;
        opacity: 0;
    }
    20%{
        top: 100px;
        left: 60px;
        opacity:0.3;
    }
    30%{
        top: 200px;
        left: 100px;
        opacity:0;
    }
    40%{
        top: 70px;
        left: 300px;
        opacity:0.3;
        background-color: #9aa8ff;
    }
    50%{
        opacity: 0;
    }
    60%{
        opacity: 0.3;
        background-color: #ff83ed;
    }
    to{
        left: 1000px;
        opacity: 0;
    }
}

.actor11{
    animation-duration: 120s;
    animation-name: actor11;
    animation-iteration-count: infinite;
}
@keyframes actor11 {
    from{
        top: 80%;
        left: 90%;
        opacity: 0;
    }
    10%{
        opacity: 0.3;
    }
    80%{
        opacity: 0.3;
        background-color: #ffb6e1;
    }
    to{
        top:50%;
        left:50%;
        opacity: 0;
    }
}

.actor12{
    animation-duration: 220s;
    animation-name: actor12;
    animation-iteration-count: infinite;
}
@keyframes actor12 {
    from{
        top: 90%;
        right: 50%;
        opacity: 0;
    }
    10%{
        opacity: 0.3;
    }
    80%{
        opacity: 0.3;
        background-color: #b9b2ff;
    }
    to{
        top:1%;
        right:50%;
        opacity: 0;
    }
}