.floating{
    -webkit-animation-name: Floatingx;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 7s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;

}

@-webkit-keyframes Floatingx{
    from {-webkit-transform:translate(0, 0px);}
    70% {-webkit-transform:translate(0, 30%);}
    to {-webkit-transform: translate(0, -0px);    }    
}
    
@-moz-keyframes Floating{
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 30%);}
    to {-moz-transform: translate(0, -0px);}    
}

/* Screen glare */
#screenglare{
    background: rgba(9,155,221,1);
    height: 400%;
    width: 1000%;
    opacity: 0.05;
    border-radius: 0 0 5000000px 0;
    position: absolute;
    margin-left: -950%;
    margin-top: -100%;
}

/* Bubbles */
#bubbles { height: 100% }
html,body, #bubbles { overflow: hidden }
#bubbles { padding: 100px 0 }

.bubble {
    width: 50px;
    height: 50px;
    background:rgba(9,155,221,0.2);
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    position: absolute;
}

.x1 {
    -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;
}

.x2 {
    left: 80%;
    -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;
}
.x3 {
    left: 10%;
    -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;
}
.x4 {
    left: 20%;
    -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;
}
.x5 {
    left: 25%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3; 
    -webkit-animation: moveclouds 12s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 12s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 12s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x6 {
    left: 45%;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0.25; 
    -webkit-animation: moveclouds 10s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -moz-animation: moveclouds 10s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -o-animation: moveclouds 10s linear infinite, sideWays 3s ease-in-out infinite alternate;
}
.x7 {
    left: 65%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.4; 
    -webkit-animation: moveclouds 9s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -moz-animation: moveclouds 9s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -o-animation: moveclouds 9s linear infinite, sideWays 3s 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;
    }
}