.ball {
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	position: relative;
	background: radial-gradient(circle at bottom, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
  
.ball:before {
	content: "";
	position: absolute;
	top: 1%;
	left: 5%;
	width: 90%;
	height: 90%;
	border-radius: 100%;
	background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%);
	-webkit-filter: blur(5px);
	filter: blur(5px);
	z-index: 2; 
}
	
.ball:after {
	content: "";
	position: absolute;
	display: none;
	top: 5%;
	left: 10%;
	width: 80%;
	height: 80%;
	border-radius: 100%;
	-webkit-filter: blur(1px);
	filter: blur(1px);
	z-index: 2;
	-webkit-transform: rotateZ(-30deg);
	transform: rotateZ(-30deg);
}
	  
.ball.bubble-new {
	background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));
	width: 100px;
	height: 100px;
	opacity:0.3;
}

.ball.bubble-new:before {
	-webkit-filter: blur(0);
	filter: blur(0);
	height: 80%;
	width: 40%;
	background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%,
	rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
	-webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
	transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg); 
}
	  
.ball.bubble-new:after {
	display: block;
	background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%);
}

.l1,.l2,.l3,.l4,.l5,.r1,.r2,.r3,.r4,.r5{position:absolute;}

.l1 {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
/*    opacity: 0.2;*/
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.l2 {
    left: 20%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
/*    opacity: 0.5;*/
    -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.l3 {
    left: 35%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
/*    opacity: 0.3;*/
    -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.l4 {
    left: 45%;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
/*    opacity: 0.35;*/
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.l5 {
    left: 15%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
/*    opacity: 0.3; */
    -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}


.r1 {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
/*    opacity: 0.2;*/
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.r2 {
    right: 22%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
/*    opacity: 0.5;*/
    -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.r3 {
    right:38%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
/*    opacity: 0.3;*/
    -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.r4 {
    right: 40%;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
/*    opacity: 0.35;*/
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.r5 {
    right: 18%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
/*    opacity: 0.3; */
    -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}


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

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

@-moz-keyframes moveclouds {     
    0% { 
        top: 500px;
    }

    100% { 
        top: -500px;
    }
}

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

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