@keyframes bubbleFloat
{
    from    { left: -100px; }
    to      { left: 100px; }
}


@keyframes bubbleUp
{
    from    {bottom: -200px; }
    to      {bottom: 1300px; }
}
body {
    overflow: hidden;
}

.carrier {
   position: absolute;
   
   /*animation-name: bubbleUp;
   animation-duration: 60s;
   animation-iteration-count: infinite;*/
}

.spawnPool {
    position: absolute;
    height: 200px;
    bottom: 0px;
    width: 100%;
}

.bubble {
   width:200px; /* Our bubble will be 200px wide and 200px tall */
   height:200px;
   box-shadow:inset 30px 30px 75px rgba(0,0,0,.1), /* this gives us our subtle light gray background gradient */
              inset 0px 0px 15px rgba(0,0,0,.5), /* this gives us the darker gray border around the whole bubble */
              inset 0px 0px 55px rgba(255,255,255,.5), /* this gives us the more subtle white gradient all around the edge of the bubble */
              inset 3px 3px 5px rgba(0,0,0,.5), /* this gives us the slightly darker top left edge */
              0 0 50px rgba(255,255,255,.75); /* this puts a white glow all around the outside of the bubble to better contrast the edge */
   border-radius:100px; /* making our border-radius half the width/height ensures a perfectly round circle */
   background:rgba(255,255,255,.4); /* makes our bubble slightly lighter in color than the background */
   position:relative; /* allows us to absolutely position the pseudo elements within the bubble */
   overflow:hidden;
   border: 2px solid gray;
   opacity: 0.6;

   animation-name: bubbleFloat;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   animation-direction: alternate;

}

.bubble:before { /* adds the white highlight on the top left of the bubble */
   content:"";
   display:block;
   position:absolute;
   width:100px;
   height:100px;
   top:15px;
   left:15px;
   border-radius: 150px 50px;
   box-shadow:inset 10px 10px 50px rgba(255,255,255,.6);
}


.bubble_2 {
   width:100px; /* Our bubble will be 200px wide and 200px tall */
   height:100px;
   box-shadow:inset 30px 30px 75px rgba(0,0,0,.1), /* this gives us our subtle light gray background gradient */
              inset 0px 0px 15px rgba(0,0,0,.5), /* this gives us the darker gray border around the whole bubble */
              inset 0px 0px 55px rgba(255,255,255,.5), /* this gives us the more subtle white gradient all around the edge of the bubble */
              inset 3px 3px 5px rgba(0,0,0,.5), /* this gives us the slightly darker top left edge */
              0 0 50px rgba(255,255,255,.75); /* this puts a white glow all around the outside of the bubble to better contrast the edge */
   border-radius:50px; /* making our border-radius half the width/height ensures a perfectly round circle */
   background:rgba(255,255,255,.4); /* makes our bubble slightly lighter in color than the background */
   position:relative; /* allows us to absolutely position the pseudo elements within the bubble */
   overflow:hidden;
   border: 2px solid gray;
   opacity: 0.6;

   animation-name: bubbleFloat;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
}


.bubble_2:before { /* adds the white highlight on the top left of the bubble */
   content:"";
   display:block;
   position:absolute;
   width:50px;
   height:50px;
   top:15px;
   left:15px;
   border-radius: 75px 25px;
   box-shadow:inset 10px 10px 50px rgba(255,255,255,.6);
}