/* KEYFRAMES */

@-webkit-keyframes animateBubble {
    0% {
        transform:translateY(1500px);
    }

    100% {
        transform: translateY(0px);
    }
}

@-moz-keyframes animateBubble {
    0% {
        transform: translateY(1500px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes animateBubble {
    0% {
        transform: translateY(1500px);
    }

    100% {
        transform: translateY(0px);
    }
}

@-webkit-keyframes sideWays {
    0% {
        transform: translateX(0px);
    }

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

@-moz-keyframes sideWays {
    0% {
        transform: translateX(0px);
    }

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

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

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

.svg {
   
}

/* ANIMATIONS 

.x1 {
    -webkit-animation: animateBubble 80s linear infinite, sideWays 20s ease-in-out infinite alternate;
    -moz-animation: animateBubble 80s linear infinite, sideWays 20s ease-in-out infinite alternate;
    animation: animateBubble 80s linear infinite, sideWays 20s ease-in-out infinite alternate;
    left: -5%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    animation-delay: -60s;
}

.x2 {
    -webkit-animation: animateBubble 70s linear infinite, sideWays 40s ease-in-out infinite alternate;
    -moz-animation: animateBubble 70s linear infinite, sideWays 40s ease-in-out infinite alternate;
    animation: animateBubble 70s linear infinite, sideWays 40s ease-in-out infinite alternate;
    left: 1%;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
    animation-delay: -50s;
}

.x3 {
    -webkit-animation: animateBubble 110s linear infinite, sideWays 20s ease-in-out infinite alternate;
    -moz-animation: animateBubble 110s linear infinite, sideWays 20s ease-in-out infinite alternate;
    animation: animateBubble 110s linear infinite, sideWays 20s ease-in-out infinite alternate;
    left: 14%;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
    animation-delay: -40s;
}

.x4 {
    -webkit-animation: animateBubble 90s linear infinite, sideWays 30s ease-in-out infinite alternate;
    -moz-animation: animateBubble 90s linear infinite, sideWays 30s ease-in-out infinite alternate;
    animation: animateBubble 90s linear infinite, sideWays 30s ease-in-out infinite alternate;
    left: -2%;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
    animation-delay: -30s;
}

.x5 {
    -webkit-animation: animateBubble 75s linear infinite, sideWays 40s ease-in-out infinite alternate;
    -moz-animation: animateBubble 75s linear infinite, sideWays 40s ease-in-out infinite alternate;
    animation: animateBubble 75s linear infinite, sideWays 40s ease-in-out infinite alternate;
    left: 30%;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
    animation-delay: -20s;
}

.x6 {
    -webkit-animation: animateBubble 85s linear infinite, sideWays 20s ease-in-out infinite alternate;
    -moz-animation: animateBubble 85s linear infinite, sideWays 20s ease-in-out infinite alternate;
    animation: animateBubble 85s linear infinite, sideWays 20s ease-in-out infinite alternate;
    left: 54%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    animation-delay: -10s;
}

.x7 {
    -webkit-animation: animateBubble 140s linear infinite, sideWays 20s ease-in-out infinite alternate;
    -moz-animation: animateBubble 140s linear infinite, sideWays 20s ease-in-out infinite alternate;
    animation: animateBubble 140s linear infinite, sideWays 20s ease-in-out infinite alternate;
    left: 86%;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
    animation-delay: 0s;
}

.x8 {
    -webkit-animation: animateBubble 95s linear infinite, sideWays 30s ease-in-out infinite alternate;
    -moz-animation: animateBubble 95s linear infinite, sideWays 30s ease-in-out infinite alternate;
    animation: animateBubble 95s linear infinite, sideWays 30s ease-in-out infinite alternate;
    left: 43%;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
    animation-delay: 5s;
}

.x9 {
    -webkit-animation: animateBubble 80s linear infinite, sideWays 40s ease-in-out infinite alternate;
    -moz-animation: animateBubble 80s linear infinite, sideWays 40s ease-in-out infinite alternate;
    animation: animateBubble 80s linear infinite, sideWays 40s ease-in-out infinite alternate;
    left: 65%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    animation-delay: 15s;
}

.x10 {
    -webkit-animation: animateBubble 90s linear infinite, sideWays 20s ease-in-out infinite alternate;
    -moz-animation: animateBubble 90s linear infinite, sideWays 20s ease-in-out infinite alternate;
    animation: animateBubble 90s linear infinite, sideWays 20s ease-in-out infinite alternate;
    left: 76%;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
    animation-delay: 25s;
}
.x11 {
    -webkit-animation: animateBubble 70s linear infinite, sideWays 20s ease-in-out infinite alternate;
    -moz-animation: animateBubble 70s linear infinite, sideWays 20s ease-in-out infinite alternate;
    animation: animateBubble 70s linear infinite, sideWays 20s ease-in-out infinite alternate;
    left: -3%;
    -webkit-transform: scale(0.45);
    -moz-transform: scale(0.45);
    transform: scale(0.45);
    animation-delay: 36s;
}
.x12 {
    -webkit-animation: animateBubble 82s linear infinite, sideWays 20s ease-in-out infinite alternate;
    -moz-animation: animateBubble 82s linear infinite, sideWays 20s ease-in-out infinite alternate;
    animation: animateBubble 82s linear infinite, sideWays 20s ease-in-out infinite alternate;
    left: 80%;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    animation-delay: -30s;
}
.x13 {
    -webkit-animation: animateBubble 99s linear infinite, sideWays 20s ease-in-out infinite alternate;
    -moz-animation: animateBubble 99s linear infinite, sideWays 20s ease-in-out infinite alternate;
    animation: animateBubble 99s linear infinite, sideWays 20s ease-in-out infinite alternate;
    left: 60%;
    -webkit-transform: scale(0.33);
    -moz-transform: scale(0.33);
    transform: scale(0.33);
    animation-delay: 50s;
}
.x14 {
    -webkit-animation: animateBubble 70s linear infinite, sideWays 20s ease-in-out infinite alternate;
    -moz-animation: animateBubble 70s linear infinite, sideWays 20s ease-in-out infinite alternate;
    animation: animateBubble 70s linear infinite, sideWays 20s ease-in-out infinite alternate;
    left: 40%;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
    animation-delay: 55s;
}
.x15 {
    -webkit-animation: animateBubble 90s linear infinite, sideWays 20s ease-in-out infinite alternate;
    -moz-animation: animateBubble 90s linear infinite, sideWays 20s ease-in-out infinite alternate;
    animation: animateBubble 90s linear infinite, sideWays 20s ease-in-out infinite alternate;
    left: 20%;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
    animation-delay: 65s;
}
.x16 {
    -webkit-animation: animateBubble 90s linear infinite, sideWays 20s ease-in-out infinite alternate;
    -moz-animation: animateBubble 90s linear infinite, sideWays 20s ease-in-out infinite alternate;
    animation: animateBubble 90s linear infinite, sideWays 20s ease-in-out infinite alternate;
    left: 45%;
    -webkit-transform: scale(0.25);
    -moz-transform: scale(0.25);
    transform: scale(0.25);
    animation-delay: -40s;
}*/

.floating-particles {
    /*-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%);*/
    -webkit-perspective: 100px;
    -moz-perspective: 100px;
    -o-perspective: 100px;
    perspective: 100px;
    transform-style: preserve-3d;
}