.bubbles_wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    pointer-events: none;
}
.bubble {
    border-radius: 50%;
    box-shadow: none;
    height: 5px;
    position: absolute;
    width: 5px;
}
.x1 {
    -webkit-animation: animateBubble 15s linear infinite,sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 15s linear infinite,sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 15s linear infinite,sideWays 2s ease-in-out infinite alternate;
    left: 6%;
    top: 45%;
    background: #ffb739;
}
.x2 {
    -webkit-animation: animateBubble 10s linear infinite,sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 10s linear infinite,sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 10s linear infinite,sideWays 4s ease-in-out infinite alternate;
    left: 5%;
    top: 80%;
    background: #fc4fdd;
}
.x3 {
    -webkit-animation: animateBubble 18s linear infinite,sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 18s linear infinite,sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 18s linear infinite,sideWays 2s ease-in-out infinite alternate;
    left: 10%;
    top: 40%;
    background: #5ed5cb;
}
.x4 {
    -webkit-animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
    -moz-animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
    animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
    left: 20%;
    top: 0;
    background: #3de4a3;
}
.x5 {
    -webkit-animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
    left: 30%;
    top: 50%;
    background: #fc4fb1;
}
.x6 {
    -webkit-animation: animateBubble 11s linear infinite,sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 11s linear infinite,sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 11s linear infinite,sideWays 2s ease-in-out infinite alternate;
    left: 50%;
    top: 0;
    background: #2c4aff;
}
.x7 {
    -webkit-animation: animateBubble 10s linear infinite,sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 10s linear infinite,sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 10s linear infinite,sideWays 2s ease-in-out infinite alternate;
    left: 65%;
    top: 70%;
    background: #ffb739;
}
.x8 {
    -webkit-animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
    -moz-animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
    animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
    left: 80%;
    top: 10%;
    background: #8f3de4;
}
.x9 {
    -webkit-animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
    left: 90%;
    top: 50%;
    background: #fff339;
}
.x10 {
    -webkit-animation: animateBubble 16s linear infinite,sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 16s linear infinite,sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 16s linear infinite,sideWays 2s ease-in-out infinite alternate;
    left: 80%;
    top: 80%;
    background: #fc4f4f;
}

@-webkit-keyframes animateBubble {
    0% {
        margin-top: 20%
    }
    100% {
        margin-top: -30%
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 20%
    }
    100% {
        margin-top: -30%
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 20%
    }
    100% {
        margin-top: -30%
    }
}