.bubbles{
    width:auto;
    /*padding-left:20px;*/
    position:absolute;
    
    /*margin-left:-90px;*/
    /*left:10px;
    
    top:0;*/
    display:inline-block;
    
}

.bubble{
    -webkit-animation:short-bubble 1500ms linear infinite;
    animation:short-bubble 1500ms linear infinite;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    height:10px;
    width:9px;
    border:1px solid rgba(240,240,240,0.5);
    border-radius:50%;
}

.b2{
    -webkit-animation:medium-bubble 5000ms linear infinite;
    animation:medium-bubble 5000ms linear infinite;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    margin-left:-7px;
    margin-top:25px;
    height:13px;
    width:12px;
}

.b3{
    -webkit-animation-duration:3500ms;
    animation-duration:3500ms;
    margin-left:-5px;
    margin-bottom:10px;
}

.b4{
    -webkit-animation-duration:2000ms;
    animation-duration:2000ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    margin:0 0 40px -9px;
    height:7px;
    width:6px;
}

.b5{
    -webkit-animation:medium-bubble 3000ms linear infinite;
    animation:medium-bubble 3000ms linear infinite;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    margin-left:-1px;
    margin-top:100px;
    height:5px;
    width:4px;
}

.b6{
    -webkit-animation-duration:3000ms;
    animation-duration:3000ms;
    margin-left:-8px;
    margin-bottom:50px;
}

.b7{
    -webkit-animation-duration:6000ms;
    animation-duration:6000ms;
    margin-left:-3px;
    margin-bottom:50px;
    height:7px;
    width:6px;
}

.b8{
    -webkit-animation:medium-bubble 2000ms linear infinite;
    -webkit-animation-fill-mode:forwards;
    animation:medium-bubble 2000ms linear infinite;
    animation-fill-mode:forwards;
    margin-left:-13px;
    margin-bottom:30px;
}

@-webkit-keyframes short-bubble{
    0%{ -webkit-transform:translate3d(5px, 0, 0);opacity:0; }
    13%{ -webkit-transform:translate3d(2px, -20px, 0); opacity:1; }
    20%{ -webkit-transform:translate3d(5px, -40px, 0) scale(1.2); }
    30%{ -webkit-transform:translate3d(0, -60px, 0); }
    40%{ -webkit-transform:translate3d(8px, -80px, 0); }
    50%{ -webkit-transform:translate3d(3px, -100px, 0); }
    60%{ -webkit-transform:translate3d(8px, -120px, 0); }
    70%{ opacity:0.4; }
    80%, 100%{ -webkit-transform:translate3d(0,-200px, 0); opacity:0; }
}

@keyframes short-bubble{
    0%{ transform:translate3d(5px, 0, 0);opacity:0; }
    13%{ transform:translate3d(2px, -20px, 0); opacity:1; }
    20%{ transform:translate3d(5px, -40px, 0) scale(1.2); }
    30%{ transform:translate3d(0px, -60px, 0); }
    40%{ transform:translate3d(8px, -80px, 0); }
    50%{ transform:translate3d(3px, -100px, 0); }
    60%{ transform:translate3d(8px, -120px, 0); }
    70%{ opacity:0.4; }
    80%, 100%{ transform:translate3d(0,-200px, 0); opacity:0; }
}

@-webkit-keyframes medium-bubble{
    0%{ -webkit-transform:translate3d(0, 0, 0); opacity:0;}
    5%{ -webkit-transform:translate3d(4px, -20px, 0); opacity:1;}
    10%{ -webkit-transform:translate3d(2px, -40px, 0) rotate(10deg); }
    20%{ -webkit-transform:translate3d(7px, -80px, 0) rotate(14deg) scale(0.7); }
    30%{ -webkit-transform:translate3d(5px, -120px, 0) rotate(15deg); }
    40%{ -webkit-transform:translate3d(1px, -160px, 0) rotate(20deg); }
    50%{ -webkit-transform:translate3d(2px, -200px, 0) rotate(18deg) scale(1.1); }
    60%{ -webkit-transform:translate3d(-3px, -240px, 0) rotate(22deg); opacity:0.4; }
    100%{ -webkit-transform:translate3d(0, -400px, 0); opacity:0; }
}

@keyframes medium-bubble{
    0%{ transform:translate3d(0, 0, 0); opacity:0;}
    5%{ transform:translate3d(4px, -20px, 0); opacity:1;}
    10%{ transform:translate3d(2px, -40px, 0) rotate(10deg); }
    20%{ transform:translate3d(7px, -80px, 0) rotate(14deg) scale(0.7); }
    30%{ transform:translate3d(5px, -120px, 0) rotate(15deg); }
    40%{ transform:translate3d(1px, -160px, 0) rotate(20deg); }
    50%{ transform:translate3d(2px, -200px, 0) rotate(18deg) scale(1.1); }
    60%{ transform:translate3d(-3px, -240px, 0) rotate(22deg); opacity:0.4; }
    100%{ transform:translate3d(0, -400px, 0); opacity:0; }
}