/* */

.copos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}

.copo {
    position: absolute;
    z-index: 9;
}

.copo img {
    width: 100%;
}

.copo.blur3 img {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

.copo.blur5 img {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

/* --- */

#float1 {
    top: -30%;
    left: 50px;
    width: 24vw;
    max-width: 100px;
    -webkit-animation: floatBubble1 50s linear infinite;
    animation: floatBubble1 50s linear infinite;
}

@-webkit-keyframes floatBubble1 {
    0% {
        top: -30%;
    }

    90% {
        top: 130%;
        opacity: 1;
    }

    100% {
        top: 135%;
        opacity: 0;
    }
}

@keyframes floatBubble1 {
    0% {
        top: -30%;
    }

    90% {
        top: 130%;
        opacity: 1;
    }

    100% {
        top: 135%;
        opacity: 0;
    }
}

@media all and (max-width:480px) {
    @-webkit-keyframes floatBubble1 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }

    @keyframes floatBubble1 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }
}

/* --- */

#float2 {
    top: -40%;
    left: 6vw;
    width: 22vw;
    max-width: 80px;
    -webkit-animation: floatBubble2 70s linear infinite;
    animation: floatBubble2 70s linear infinite;
}

@-webkit-keyframes floatBubble2 {
    0% {
        top: -40%;
    }

    90% {
        top: 150%;
        opacity: 1;
    }

    100% {
        top: 155%;
        opacity: 0;
    }
}

@keyframes floatBubble2 {
    0% {
        top: -40%;
    }

    90% {
        top: 150%;
        opacity: 1;
    }

    100% {
        top: 155%;
        opacity: 0;
    }
}

@media all and (max-width:480px) {
    @-webkit-keyframes floatBubble2 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }

    @keyframes floatBubble2 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }
}

/* --- */

#float3 {
    top: -10%;
    left: 7vw;
    width: 21vw;
    max-width: 110px;
    -webkit-animation: floatBubble3 50s linear infinite;
    animation: floatBubble3 50s linear infinite;
}

@-webkit-keyframes floatBubble3 {
    0% {
        top: -10%;
    }

    90% {
        top: 120%;
        opacity: 1;
    }

    100% {
        top: 125%;
        opacity: 0;
    }
}

@keyframes floatBubble3 {
    0% {
        top: -10%;
    }

    90% {
        top: 120%;
        opacity: 1;
    }

    100% {
        top: 125%;
        opacity: 0;
    }
}


/* --- */

#float4 {
    top: -20%;
    left: 11vw;
    width: 18vw;
    max-width: 120px;
    -webkit-animation: floatBubble4 40s linear infinite;
    animation: floatBubble4 40s linear infinite;
}

@-webkit-keyframes floatBubble4 {
    0% {
        top: -20%;
    }

    90% {
        top: 120%;
        opacity: 1;
    }

    100% {
        top: 125%;
        opacity: 0;
    }
}

@keyframes floatBubble4 {
    0% {
        top: -20%;
    }

    90% {
        top: 120%;
        opacity: 1;
    }

    100% {
        top: 125%;
        opacity: 0;
    }
}

@media all and (max-width:480px) {
    @-webkit-keyframes floatBubble4 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }

    @keyframes floatBubble4 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }
}

/* --- */

#float5 {
    top: -15%;
    left: 2vw;
    width: 19vw;
    max-width: 130px;
    -webkit-animation: floatBubble5 35s linear infinite;
    animation: floatBubble5 35s linear infinite;
}

@-webkit-keyframes floatBubble5 {
    0% {
        top: -15%;
    }

    90% {
        top: 120%;
        opacity: 1;
    }

    100% {
        top: 125%;
        opacity: 0;
    }
}

@keyframes floatBubble5 {
    0% {
        top: -15%;
    }

    90% {
        top: 120%;
        opacity: 1;
    }

    100% {
        top: 125%;
        opacity: 0;
    }
}

@media all and (max-width:480px) {
    @-webkit-keyframes floatBubble5 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }

    @keyframes floatBubble5 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }
}

/* --- */

#float6 {
    top: -30%;
    right: 3vw;
    width: 22vw;
    max-width: 170px;
    -webkit-animation: floatBubble6 30s linear infinite;
    animation: floatBubble6 30s linear infinite;
}

@-webkit-keyframes floatBubble6 {
    0% {
        top: -30%;
    }

    90% {
        top: 140%;
        opacity: 1;
    }

    100% {
        top: 145%;
        opacity: 0;
    }
}

@keyframes floatBubble6 {
    0% {
        top: -30%;
    }

    90% {
        top: 140%;
        opacity: 1;
    }

    100% {
        top: 145%;
        opacity: 0;
    }
}

@media all and (max-width:480px) {
    @-webkit-keyframes floatBubble6 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }

    @keyframes floatBubble6 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }
}

/* --- */

#float7 {
    top: -100px;
    right: 16vw;
    width: 15vw;
    max-width: 70px;
    -webkit-animation: floatBubble7 90s linear infinite;
    animation: floatBubble7 90s linear infinite;
}

@-webkit-keyframes floatBubble7 {
    0% {
        top: -100px;
    }

    90% {
        top: 130%;
        opacity: 1;
    }

    100% {
        top: 135%;
        opacity: 0;
    }
}

@keyframes floatBubble7 {
    0% {
        top: -100px;
    }

    90% {
        top: 130%;
        opacity: 1;
    }

    100% {
        top: 135%;
        opacity: 0;
    }
}

@media all and (max-width:480px) {
    @-webkit-keyframes floatBubble7 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }

    @keyframes floatBubble7 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }
}

/* --- */

#float8 {
    top: -13%;
    right: 10vw;
    width: 17vw;
    max-width: 100px;
    -webkit-animation: floatBubble8 80s linear infinite;
    animation: floatBubble8 80s linear infinite;
}

@-webkit-keyframes floatBubble8 {
    0% {
        top: -13%;
    }

    90% {
        top: 160%;
        opacity: 1;
    }

    100% {
        top: 165%;
        opacity: 0;
    }
}

@keyframes floatBubble8 {
    0% {
        top: -13%;
    }

    90% {
        top: 160%;
        opacity: 1;
    }

    100% {
        top: 165%;
        opacity: 0;
    }
}

@media all and (max-width:480px) {
    @-webkit-keyframes floatBubble8 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }

    @keyframes floatBubble8 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }
}

/* --- */

#float9 {
    top: -20%;
    right: 8vw;
    width: 17vw;
    max-width: 110px;
    -webkit-animation: floatBubble9 40s linear infinite;
    animation: floatBubble9 40s linear infinite;
}

@-webkit-keyframes floatBubble9 {
    0% {
        top: -20%;
    }

    90% {
        top: 130%;
        opacity: 1;
    }

    100% {
        top: 135%;
        opacity: 0;
    }
}

@keyframes floatBubble9 {
    0% {
        top: -20%;
    }

    90% {
        top: 130%;
        opacity: 1;
    }

    100% {
        top: 135%;
        opacity: 0;
    }
}

/* --- */

#float10 {
    top: -50%;
    right: 8vw;
    width: 22vw;
    max-width: 240px;
    -webkit-animation: floatBubble10 20s linear infinite;
    animation: floatBubble10 20s linear infinite;
}

@-webkit-keyframes floatBubble10 {
    0% {
        top: -50%;
    }

    90% {
        top: 150%;
        opacity: 1;
    }

    100% {
        top: 155%;
        opacity: 0;
    }
}

@keyframes floatBubble10 {
    0% {
        top: -50%;
    }

    90% {
        top: 150%;
        opacity: 1;
    }

    100% {
        top: 155%;
        opacity: 0;
    }
}

@media all and (max-width:480px) {
    @-webkit-keyframes floatBubble10 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }

    @keyframes floatBubble10 {
        90% {
            top: 550px;
            opacity: 1;
        }

        100% {
            top: 560px;
            opacity: 0;
        }
    }
}

/* --- */

#float11 {
    top: -200px;
    right: 18vw;
    width: 20vw;
    max-width: 140px;
    -webkit-animation: floatBubble11 40s linear infinite;
    animation: floatBubble11 40s linear infinite;
}

@-webkit-keyframes floatBubble11 {
    0% {
        top: -200px;
    }

    90% {
        top: 140%;
        opacity: 1;
    }

    100% {
        top: 145%;
        opacity: 0;
    }
}

@keyframes floatBubble11 {
    0% {
        top: -200px;
    }

    90% {
        top: 140%;
        opacity: 1;
    }

    100% {
        top: 145%;
        opacity: 0;
    }
}

/* --- */

#float12 {
    top: -200px;
    left: 18vw;
    width: 14vw;
    max-width: 70px;
    -webkit-animation: floatBubble12 80s linear infinite;
    animation: floatBubble12 80s linear infinite;
}

@-webkit-keyframes floatBubble12 {
    0% {
        top: -200px;
    }

    90% {
        top: 120%;
        opacity: 1;
    }

    100% {
        top: 125%;
        opacity: 0;
    }
}

@keyframes floatBubble12 {
    0% {
        top: -200px;
    }

    90% {
        top: 120%;
        opacity: 1;
    }

    100% {
        top: 125%;
        opacity: 0;
    }
}

/* RESPONSIVE */

@media all and (max-width:480px) {

    #float3,
    #float9,
    #float11,
    #float12 {
        visibility: hidden;
        display: none;
    }
}