#animateBubble {
    position: absolute;
    bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
	mix-blend-mode: overlay;

}

/* KEYFRAMES */

@-webkit-keyframes animateBubble {
    0% {
        margin-top: 800px;
    }
    100% {
        margin-top: -100%;
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 800px;
    }
    100% {
        margin-top: -100%;
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 800px;
    }
    100% {
        margin-top: -100%;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@-moz-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

/* ANIMATIONS */
.x1 {
  animation: animateBubble 14s linear infinite, sideWays 2.1s ease-in-out infinite alternate;
  left: 12%;
  top: -28%;
  transform: scale(0.8);
}
.x2 {
  animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 45%;
  top: 15%;
  transform: scale(0.6);
}
.x3 {
  animation: animateBubble 18s linear infinite, sideWays 1.8s ease-in-out infinite alternate;
  left: 22%;
  top: -55%;
  transform: scale(0.9);
}
.x4 {
  animation: animateBubble 30s linear infinite, sideWays 2.7s ease-in-out infinite alternate;
  left: 5%;
  top: 65%;
  transform: scale(1.0);
}
.x5 {
  animation: animateBubble 24s linear infinite, sideWays 1.5s ease-in-out infinite alternate;
  left: 75%;
  top: -12%;
  transform: scale(0.7);
}
.x6 {
  animation: animateBubble 19s linear infinite, sideWays 2.9s ease-in-out infinite alternate;
  left: 47%;
  top: 33%;
  transform: scale(0.4);
}
.x7 {
  animation: animateBubble 15s linear infinite, sideWays 2.4s ease-in-out infinite alternate;
  left: 13%;
  top: 77%;
  transform: scale(0.3);
}
.x8 {
  animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 40%;
  top: -90%;
  transform: scale(0.5);
}
.x9 {
  animation: animateBubble 29s linear infinite, sideWays 2.5s ease-in-out infinite alternate;
  left: 12%;
  top: 35%;
  transform: scale(0.8);
}
.x10 {
  animation: animateBubble 13s linear infinite, sideWays 3.2s ease-in-out infinite alternate;
  left: -5%;
  top: 10%;
  transform: scale(0.2);
}
.x11 {
  animation: animateBubble 27s linear infinite, sideWays 2.6s ease-in-out infinite alternate;
  left: 65%;
  top: 5%;
  transform: scale(1.0);
}
.x12 {
  animation: animateBubble 31s linear infinite, sideWays 2.3s ease-in-out infinite alternate;
  left: 10%;
  top: 80%;
  transform: scale(0.9);
}
.x13 {
  animation: animateBubble 16s linear infinite, sideWays 1.9s ease-in-out infinite alternate;
  left: 1%;
  top: 45%;
  transform: scale(0.6);
}
.x14 {
  animation: animateBubble 21s linear infinite, sideWays 3.1s ease-in-out infinite alternate;
  left: 85%;
  top: 50%;
  transform: scale(0.7);
}
.x15 {
  animation: animateBubble 28s linear infinite, sideWays 2.7s ease-in-out infinite alternate;
  left: 60%;
  top: 15%;
  transform: scale(0.4);
}
.x16 {
  animation: animateBubble 17s linear infinite, sideWays 2.8s ease-in-out infinite alternate;
  left: 15%;
  top: 70%;
  transform: scale(0.5);
}
.x17 {
  animation: animateBubble 20s linear infinite, sideWays 2.2s ease-in-out infinite alternate;
  left: 50%;
  top: 40%;
  transform: scale(1.0);
}
.x18 {
  animation: animateBubble 32s linear infinite, sideWays 2.4s ease-in-out infinite alternate;
  left: 7%;
  top: 85%;
  transform: scale(0.8);
}
.x19 {
  animation: animateBubble 23s linear infinite, sideWays 1.7s ease-in-out infinite alternate;
  left: -2%;
  top: 30%;
  transform: scale(0.3);
}
.x20 {
  animation: animateBubble 12s linear infinite, sideWays 3.0s ease-in-out infinite alternate;
  left: 78%;
  top: 20%;
  transform: scale(0.6);
}
/*.x21 {
  animation: animateBubble 25s linear infinite, sideWays 2.5s ease-in-out infinite alternate;
  left: -6%;
  top: 18%;
  transform: scale(0.7);
}
.x22 {
  animation: animateBubble 29s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 15%;
  top: 65%;
  transform: scale(0.2);
}
.x23 {
  animation: animateBubble 18s linear infinite, sideWays 2.4s ease-in-out infinite alternate;
  left: 55%;
  top: 5%;
  transform: scale(1.0);
}
.x24 {
  animation: animateBubble 30s linear infinite, sideWays 2.3s ease-in-out infinite alternate;
  left: 25%;
  top: 60%;
  transform: scale(0.4);
}
.x25 {
  animation: animateBubble 15s linear infinite, sideWays 2.9s ease-in-out infinite alternate;
  left: 5%;
  top: 48%;
  transform: scale(0.9);
}
.x26 {
  animation: animateBubble 14s linear infinite, sideWays 1.8s ease-in-out infinite alternate;
  left: 38%;
  top: 28%;
  transform: scale(0.5);
}
.x27 {
  animation: animateBubble 26s linear infinite, sideWays 2.6s ease-in-out infinite alternate;
  left: -5%;
  top: 75%;
  transform: scale(0.8);
}
.x28 {
  animation: animateBubble 19s linear infinite, sideWays 2.1s ease-in-out infinite alternate;
  left: 42%;
  top: 90%;
  transform: scale(0.7);
}
.x29 {
  animation: animateBubble 24s linear infinite, sideWays 3.0s ease-in-out infinite alternate;
  left: 10%;
  top: 32%;
  transform: scale(0.3);
}
.x30 {
  animation: animateBubble 13s linear infinite, sideWays 2.2s ease-in-out infinite alternate;
  left: 50%;
  top: 70%;
  transform: scale(0.6);
}*/

/* OBJECTS */

.bubble {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
    background: radial-gradient(closest-side circle, rgba(255,255,255,0.6) 0, rgba(255,255,255,0.3) 80%, rgba(255,255,255,0));
	position: absolute;
    height: 400px;
	width: 400px;
    opacity: 1;
}