/* Bubble Animation code from https://codepen.io/Mark_Bowley/pen/mEtqj */

/* KEYFRAMES */

@-webkit-keyframes animateBubble {
  0% {
      top: 600%;
  }
  100% {
      top: -200px;
  }
}

@-moz-keyframes animateBubble {
  0% {
      top: 600%;
  }
  100% {
      top: -200px;
  }
}

@keyframes animateBubble {
  0% {
      top: 600%;
  }
  100% {
      top: -200px;
  }
}

@-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 {
  -webkit-animation: animateBubble 20s ease-in-out infinite, sideWays 2s ease infinite alternate;
-moz-animation: animateBubble 20s ease-in-out infinite, sideWays 2s ease infinite alternate;
animation: animateBubble 20s ease-in-out infinite, sideWays 2s ease infinite alternate;

left: -5%;
top: 5%;

-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);

animation-delay: -4s;
}

.x2 {
  -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 5%;
top: 80%;

-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);

animation-delay: -7s;
}

.x3 {
/* background-image: url('../images/pink-bubble.png'); */

  -webkit-animation: animateBubble 24s ease-in-out infinite, sideWays 2s ease infinite alternate;
-moz-animation: animateBubble 24s ease-in-out infinite, sideWays 2s ease infinite alternate;
animation: animateBubble 24s ease-in-out infinite, sideWays 2s ease infinite alternate;

left: 10%;
top: 40%;

-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);

animation-delay: -6s;
}

.x4 {
  -webkit-animation: animateBubble 21s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 21s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 21s linear infinite, sideWays 3s ease-in-out infinite alternate;

left: 20%;
top: 0;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);

animation-delay: -7s;
}

.x5 {
  -webkit-animation: animateBubble 25s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 25s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 25s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 30%;
top: 50%;

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);

animation-delay: -2s;
}

.x6 {
  -webkit-animation: animateBubble 21s ease-in-out infinite, sideWays 2s ease infinite alternate;
-moz-animation: animateBubble 21s ease-in-out infinite, sideWays 2s ease infinite alternate;
animation: animateBubble 21s ease-in-out infinite, sideWays 2s ease infinite alternate;

left: 50%;
top: 0;

-webkit-transform: scale(.6);
-moz-transform: scale(.6);
transform: scale(.6);

animation-delay: -8s;
}

.x7 {
  -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 60%;
top: 70%;

-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);

animation-delay: -9s;
}

.x8 {
  -webkit-animation: animateBubble 21s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 21s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 21s linear infinite, sideWays 3s ease-in-out infinite alternate;

left: 70%;
top: 10%;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);

animation-delay: -6s;
}

.x9 {
  -webkit-animation: animateBubble 25s ease-in-out infinite, sideWays 4s ease infinite alternate;
-moz-animation: animateBubble 25s ease-in-out infinite, sideWays 4s ease infinite alternate;
animation: animateBubble 25s ease-in-out infinite, sideWays 4s ease infinite alternate;

left: 75%;
top: 50%;

-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);

animation-delay: -14s;
}

.x10 {
  -webkit-animation: animateBubble 23s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 23s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 23s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 80%;
top: 80%;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);

animation-delay: -4s;
}

.x11 {
-webkit-animation: animateBubble 35s cubic-bezier(0.3,0.7,0,0.85) infinite, sideWays 2s ease infinite alternate;
-moz-animation: animateBubble 35s cubic-bezier(0.3,0.7,0,0.85) infinite, sideWays 2s ease infinite alternate;
animation: animateBubble 35s cubic-bezier(0.3,0.7,0,0.85) infinite, sideWays 2s ease infinite alternate;

left: 70%;
top: 70%;


-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);

animation-delay: -6s;
cursor:pointer !important;

}


/* OBJECTS */

.bubble {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
  -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
  height: 200px;
  position: absolute;
  width: 200px;
  z-index: 50;

  /* pointer-events: none; */ /* Necessary to be able to click through the bubbles */
}

.bubble:after {
  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* IE10+ */
  background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

  -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);


height: 180px;
left: 10px;
position: absolute;
width: 180px;
}

/* Media Queries - # of bubbles, sizing, position - Adjusts starting position */

@media (max-width: 925px) {
  .x10 {
    display: none;
  }
}

@media (max-width: 860px) {
  .x9 {
    display: none;
  }
}

/* Necessary for the page height change at screen-width <767px */
@media (max-width: 767px) {
@-webkit-keyframes animateBubble {
  0% {
      top: 725%;
  }
  100% {
      top: -200px;
  }
}
@-moz-keyframes animateBubble {
  0% {
      top: 725%;
  }
  100% {
      top: -200px;
  }
}
@keyframes animateBubble {
  0% {
      top: 725%;
  }
  100% {
      top: -200px;
  }
}
}

@media (max-width: 620px) {
  .x8 {
    display: none;
  }
}


@media (max-width: 490px) {
  .x11{
    -webkit-transform: scale(.6);
    -moz-transform: scale(.6);
    transform: scale(.6);
  }
  .x7 {
    display: none;
  }
  
  .x6 {
    left: 30%;
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    transform: scale(.5);
  }

  .x5 {
    left: 20%;
    -webkit-transform: scale(.4);
    -moz-transform: scale(.4);
    transform: scale(.4);
  }
  .x3 {
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    transform: scale(.5);
  }
  .x2 {
    left: -5%;
    -webkit-transform: scale(.6);
    -moz-transform: scale(.6);
    transform: scale(.6);
  }
  .x1 {
    left: -18%;
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    transform: scale(.5);
  }

}

@media screen and (max-width:700px){
  .x11{
    left: 30%;
    top: 50%;
  }
  
}