@keyframes stretch {
  0% {
    transform: scaleX(1) scaleY(1);
  }

  33% {
    transform: scaleX(0.9) scaleY(1);
  }

  66% {
    transform: scaleX(1) scaleY(0.9);
  }

  100% {
    transform: scaleX(1) scaleY(1);
  }
}
@-webkit-keyframes stretch {
  0% {
    -webkit-transform: scaleX(1) scaleY(1);
  }

  33% {
    -webkit-transform: scaleX(0.9) scaleY(1);
  }

  66% {
    -webkit-transform: scaleX(1) scaleY(0.9);
  }

  100% {
    -webkit-transform: scaleX(1) scaleY(1);
  }
}
@keyframes shake {
  0% {
    transform: translateX(10px);
  }

  50% {
    transform: translateX(-10px);
  }

  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(10px);
  }

  50% {
    -webkit-transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(10px);
  }
}
@keyframes move {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-1500px);
    opacity: 0;
  }
}
@-webkit-keyframes move {
  0% {
    -webkit-transform: translateY(0px);
  }

  100% {
    -webkit-transform: translateY(-1500px);
    opacity: 0;
  }
}
#bubble h2 {
  color: #333;
  top: 150px;
}
#bubble #form {
  position: absolute;
  top: 150px;
  right: 20px;
  z-index: 10;
}
#bubble #form input {
  width: 50px;
  border: none;
  text-align: right;
  padding: 0 5px;
}
#bubble #contents {
  background: -webkit-linear-gradient(top, #d5ebfb 0%, #86c6e0 100%);
  background: linear-gradient(to bottom, #d5ebfb 0%, #86c6e0 100%);
  box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.14) inset;
  -webkit-box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.14) inset;
  margin-top: 0;
  overflow: hidden;
}
#bubble #contents .inner {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}
#bubble .bubble {
  position: absolute;
  bottom: -20%;
  left: 50%;
}
#bubble .bubble .item {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
  position: relative;
}
#bubble .bubble .item:after {
  content: "";
  display: block;
  width: 20%;
  height: 20%;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.6);
  position: absolute;
  right: 15%;
  top: 15%;
  filter: blur(2px);
  -webkit-filter: blur(2px);
  transform: rotateZ(45deg) scaleY(0.8);
  -webkit-transform: rotateZ(45deg) scaleY(0.8);
}
#bubble .stretch0 {
  animation: stretch 2s ease 0s infinite normal;
  -webkit-animation: stretch 2s ease 0s infinite normal;
}
#bubble .shake0 {
  animation: shake 2s ease 0s infinite normal;
  -webkit-animation: shake 2s ease 0s infinite normal;
}
#bubble .move0 {
  animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;
  -webkit-animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;
}
#bubble .pos0 {
  left: 0%;
}
#bubble .scale0 {
  transform: scale(0);
  -webkit-transform: scale(0);
}
#bubble .stretch1 {
  animation: stretch 2.2s ease 0s infinite normal;
  -webkit-animation: stretch 2.2s ease 0s infinite normal;
}
#bubble .shake1 {
  animation: shake 2.2s ease 0s infinite normal;
  -webkit-animation: shake 2.2s ease 0s infinite normal;
}
#bubble .move1 {
  animation: move 5.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s infinite normal;
  -webkit-animation: move 5.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s infinite normal;
}
#bubble .pos1 {
  left: 2%;
}
#bubble .scale1 {
  transform: scale(0.1);
  -webkit-transform: scale(0.1);
}
#bubble .stretch2 {
  animation: stretch 2.4s ease 0s infinite normal;
  -webkit-animation: stretch 2.4s ease 0s infinite normal;
}
#bubble .shake2 {
  animation: shake 2.4s ease 0s infinite normal;
  -webkit-animation: shake 2.4s ease 0s infinite normal;
}
#bubble .move2 {
  animation: move 5.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s infinite normal;
  -webkit-animation: move 5.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s infinite normal;
}
#bubble .pos2 {
  left: 4%;
}
#bubble .scale2 {
  transform: scale(0.2);
  -webkit-transform: scale(0.2);
}
#bubble .stretch3 {
  animation: stretch 2.6s ease 0s infinite normal;
  -webkit-animation: stretch 2.6s ease 0s infinite normal;
}
#bubble .shake3 {
  animation: shake 2.6s ease 0s infinite normal;
  -webkit-animation: shake 2.6s ease 0s infinite normal;
}
#bubble .move3 {
  animation: move 5.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s infinite normal;
  -webkit-animation: move 5.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s infinite normal;
}
#bubble .pos3 {
  left: 6%;
}
#bubble .scale3 {
  transform: scale(0.3);
  -webkit-transform: scale(0.3);
}
#bubble .stretch4 {
  animation: stretch 2.8s ease 0s infinite normal;
  -webkit-animation: stretch 2.8s ease 0s infinite normal;
}
#bubble .shake4 {
  animation: shake 2.8s ease 0s infinite normal;
  -webkit-animation: shake 2.8s ease 0s infinite normal;
}
#bubble .move4 {
  animation: move 5.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s infinite normal;
  -webkit-animation: move 5.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s infinite normal;
}
#bubble .pos4 {
  left: 8%;
}
#bubble .scale4 {
  transform: scale(0.4);
  -webkit-transform: scale(0.4);
}
#bubble .stretch5 {
  animation: stretch 3s ease 0s infinite normal;
  -webkit-animation: stretch 3s ease 0s infinite normal;
}
#bubble .shake5 {
  animation: shake 3s ease 0s infinite normal;
  -webkit-animation: shake 3s ease 0s infinite normal;
}
#bubble .move5 {
  animation: move 6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s infinite normal;
  -webkit-animation: move 6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s infinite normal;
}
#bubble .pos5 {
  left: 10%;
}
#bubble .scale5 {
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
}
#bubble .stretch6 {
  animation: stretch 3.2s ease 0s infinite normal;
  -webkit-animation: stretch 3.2s ease 0s infinite normal;
}
#bubble .shake6 {
  animation: shake 3.2s ease 0s infinite normal;
  -webkit-animation: shake 3.2s ease 0s infinite normal;
}
#bubble .move6 {
  animation: move 6.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s infinite normal;
  -webkit-animation: move 6.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s infinite normal;
}
#bubble .pos6 {
  left: 12%;
}
#bubble .scale6 {
  transform: scale(0.6);
  -webkit-transform: scale(0.6);
}
#bubble .stretch7 {
  animation: stretch 3.4s ease 0s infinite normal;
  -webkit-animation: stretch 3.4s ease 0s infinite normal;
}
#bubble .shake7 {
  animation: shake 3.4s ease 0s infinite normal;
  -webkit-animation: shake 3.4s ease 0s infinite normal;
}
#bubble .move7 {
  animation: move 6.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s infinite normal;
  -webkit-animation: move 6.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s infinite normal;
}
#bubble .pos7 {
  left: 14.0%;
}
#bubble .scale7 {
  transform: scale(0.7);
  -webkit-transform: scale(0.7);
}
#bubble .stretch8 {
  animation: stretch 3.6s ease 0s infinite normal;
  -webkit-animation: stretch 3.6s ease 0s infinite normal;
}
#bubble .shake8 {
  animation: shake 3.6s ease 0s infinite normal;
  -webkit-animation: shake 3.6s ease 0s infinite normal;
}
#bubble .move8 {
  animation: move 6.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s infinite normal;
  -webkit-animation: move 6.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s infinite normal;
}
#bubble .pos8 {
  left: 16%;
}
#bubble .scale8 {
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
}
#bubble .stretch9 {
  animation: stretch 3.8s ease 0s infinite normal;
  -webkit-animation: stretch 3.8s ease 0s infinite normal;
}
#bubble .shake9 {
  animation: shake 3.8s ease 0s infinite normal;
  -webkit-animation: shake 3.8s ease 0s infinite normal;
}
#bubble .move9 {
  animation: move 6.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s infinite normal;
  -webkit-animation: move 6.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s infinite normal;
}
#bubble .pos9 {
  left: 18%;
}
#bubble .scale9 {
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
}
#bubble .stretch10 {
  animation: stretch 4s ease 0s infinite normal;
  -webkit-animation: stretch 4s ease 0s infinite normal;
}
#bubble .shake10 {
  animation: shake 4s ease 0s infinite normal;
  -webkit-animation: shake 4s ease 0s infinite normal;
}
#bubble .move10 {
  animation: move 7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s infinite normal;
  -webkit-animation: move 7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s infinite normal;
}
#bubble .pos10 {
  left: 20%;
}
#bubble .scale10 {
  transform: scale(1);
  -webkit-transform: scale(1);
}
#bubble .stretch11 {
  animation: stretch 4.2s ease 0s infinite normal;
  -webkit-animation: stretch 4.2s ease 0s infinite normal;
}
#bubble .shake11 {
  animation: shake 4.2s ease 0s infinite normal;
  -webkit-animation: shake 4.2s ease 0s infinite normal;
}
#bubble .move11 {
  animation: move 7.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s infinite normal;
  -webkit-animation: move 7.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s infinite normal;
}
#bubble .pos11 {
  left: 22%;
}
#bubble .scale11 {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
#bubble .stretch12 {
  animation: stretch 4.4s ease 0s infinite normal;
  -webkit-animation: stretch 4.4s ease 0s infinite normal;
}
#bubble .shake12 {
  animation: shake 4.4s ease 0s infinite normal;
  -webkit-animation: shake 4.4s ease 0s infinite normal;
}
#bubble .move12 {
  animation: move 7.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s infinite normal;
  -webkit-animation: move 7.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s infinite normal;
}
#bubble .pos12 {
  left: 24%;
}
#bubble .scale12 {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}
#bubble .stretch13 {
  animation: stretch 4.6s ease 0s infinite normal;
  -webkit-animation: stretch 4.6s ease 0s infinite normal;
}
#bubble .shake13 {
  animation: shake 4.6s ease 0s infinite normal;
  -webkit-animation: shake 4.6s ease 0s infinite normal;
}
#bubble .move13 {
  animation: move 7.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s infinite normal;
  -webkit-animation: move 7.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s infinite normal;
}
#bubble .pos13 {
  left: 26%;
}
#bubble .scale13 {
  transform: scale(1.3);
  -webkit-transform: scale(1.3);
}
#bubble .stretch14 {
  animation: stretch 4.8s ease 0s infinite normal;
  -webkit-animation: stretch 4.8s ease 0s infinite normal;
}
#bubble .shake14 {
  animation: shake 4.8s ease 0s infinite normal;
  -webkit-animation: shake 4.8s ease 0s infinite normal;
}
#bubble .move14 {
  animation: move 7.8s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s infinite normal;
  -webkit-animation: move 7.8s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s infinite normal;
}
#bubble .pos14 {
  left: 28.0%;
}
#bubble .scale14 {
  transform: scale(1.4);
  -webkit-transform: scale(1.4);
}
#bubble .stretch15 {
  animation: stretch 5s ease 0s infinite normal;
  -webkit-animation: stretch 5s ease 0s infinite normal;
}
#bubble .shake15 {
  animation: shake 5s ease 0s infinite normal;
  -webkit-animation: shake 5s ease 0s infinite normal;
}
#bubble .move15 {
  animation: move 8s cubic-bezier(0.47, 0, 0.745, 0.715) 3s infinite normal;
  -webkit-animation: move 8s cubic-bezier(0.47, 0, 0.745, 0.715) 3s infinite normal;
}
#bubble .pos15 {
  left: 30%;
}
#bubble .scale15 {
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
}
#bubble .stretch16 {
  animation: stretch 5.2s ease 0s infinite normal;
  -webkit-animation: stretch 5.2s ease 0s infinite normal;
}
#bubble .shake16 {
  animation: shake 5.2s ease 0s infinite normal;
  -webkit-animation: shake 5.2s ease 0s infinite normal;
}
#bubble .move16 {
  animation: move 8.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s infinite normal;
  -webkit-animation: move 8.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s infinite normal;
}
#bubble .pos16 {
  left: 32%;
}
#bubble .scale16 {
  transform: scale(1.6);
  -webkit-transform: scale(1.6);
}
#bubble .stretch17 {
  animation: stretch 5.4s ease 0s infinite normal;
  -webkit-animation: stretch 5.4s ease 0s infinite normal;
}
#bubble .shake17 {
  animation: shake 5.4s ease 0s infinite normal;
  -webkit-animation: shake 5.4s ease 0s infinite normal;
}
#bubble .move17 {
  animation: move 8.4s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s infinite normal;
  -webkit-animation: move 8.4s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s infinite normal;
}
#bubble .pos17 {
  left: 34%;
}
#bubble .scale17 {
  transform: scale(1.7);
  -webkit-transform: scale(1.7);
}
#bubble .stretch18 {
  animation: stretch 5.6s ease 0s infinite normal;
  -webkit-animation: stretch 5.6s ease 0s infinite normal;
}
#bubble .shake18 {
  animation: shake 5.6s ease 0s infinite normal;
  -webkit-animation: shake 5.6s ease 0s infinite normal;
}
#bubble .move18 {
  animation: move 8.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s infinite normal;
  -webkit-animation: move 8.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s infinite normal;
}
#bubble .pos18 {
  left: 36%;
}
#bubble .scale18 {
  transform: scale(1.8);
  -webkit-transform: scale(1.8);
}
#bubble .stretch19 {
  animation: stretch 5.8s ease 0s infinite normal;
  -webkit-animation: stretch 5.8s ease 0s infinite normal;
}
#bubble .shake19 {
  animation: shake 5.8s ease 0s infinite normal;
  -webkit-animation: shake 5.8s ease 0s infinite normal;
}
#bubble .move19 {
  animation: move 8.8s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s infinite normal;
  -webkit-animation: move 8.8s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s infinite normal;
}
#bubble .pos19 {
  left: 38%;
}
#bubble .scale19 {
  transform: scale(1.9);
  -webkit-transform: scale(1.9);
}
#bubble .stretch20 {
  animation: stretch 6s ease 0s infinite normal;
  -webkit-animation: stretch 6s ease 0s infinite normal;
}
#bubble .shake20 {
  animation: shake 6s ease 0s infinite normal;
  -webkit-animation: shake 6s ease 0s infinite normal;
}
#bubble .move20 {
  animation: move 9s cubic-bezier(0.47, 0, 0.745, 0.715) 4s infinite normal;
  -webkit-animation: move 9s cubic-bezier(0.47, 0, 0.745, 0.715) 4s infinite normal;
}
#bubble .pos20 {
  left: 40%;
}
#bubble .scale20 {
  transform: scale(2);
  -webkit-transform: scale(2);
}
#bubble .stretch21 {
  animation: stretch 6.2s ease 0s infinite normal;
  -webkit-animation: stretch 6.2s ease 0s infinite normal;
}
#bubble .shake21 {
  animation: shake 6.2s ease 0s infinite normal;
  -webkit-animation: shake 6.2s ease 0s infinite normal;
}
#bubble .move21 {
  animation: move 9.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s infinite normal;
  -webkit-animation: move 9.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s infinite normal;
}
#bubble .pos21 {
  left: 42%;
}
#bubble .scale21 {
  transform: scale(2.1);
  -webkit-transform: scale(2.1);
}
#bubble .stretch22 {
  animation: stretch 6.4s ease 0s infinite normal;
  -webkit-animation: stretch 6.4s ease 0s infinite normal;
}
#bubble .shake22 {
  animation: shake 6.4s ease 0s infinite normal;
  -webkit-animation: shake 6.4s ease 0s infinite normal;
}
#bubble .move22 {
  animation: move 9.4s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s infinite normal;
  -webkit-animation: move 9.4s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s infinite normal;
}
#bubble .pos22 {
  left: 44%;
}
#bubble .scale22 {
  transform: scale(2.2);
  -webkit-transform: scale(2.2);
}
#bubble .stretch23 {
  animation: stretch 6.6s ease 0s infinite normal;
  -webkit-animation: stretch 6.6s ease 0s infinite normal;
}
#bubble .shake23 {
  animation: shake 6.6s ease 0s infinite normal;
  -webkit-animation: shake 6.6s ease 0s infinite normal;
}
#bubble .move23 {
  animation: move 9.6s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s infinite normal;
  -webkit-animation: move 9.6s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s infinite normal;
}
#bubble .pos23 {
  left: 46%;
}
#bubble .scale23 {
  transform: scale(2.3);
  -webkit-transform: scale(2.3);
}
#bubble .stretch24 {
  animation: stretch 6.8s ease 0s infinite normal;
  -webkit-animation: stretch 6.8s ease 0s infinite normal;
}
#bubble .shake24 {
  animation: shake 6.8s ease 0s infinite normal;
  -webkit-animation: shake 6.8s ease 0s infinite normal;
}
#bubble .move24 {
  animation: move 9.8s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s infinite normal;
  -webkit-animation: move 9.8s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s infinite normal;
}
#bubble .pos24 {
  left: 48%;
}
#bubble .scale24 {
  transform: scale(2.4);
  -webkit-transform: scale(2.4);
}
#bubble .stretch25 {
  animation: stretch 7s ease 0s infinite normal;
  -webkit-animation: stretch 7s ease 0s infinite normal;
}
#bubble .shake25 {
  animation: shake 7s ease 0s infinite normal;
  -webkit-animation: shake 7s ease 0s infinite normal;
}
#bubble .move25 {
  animation: move 10s cubic-bezier(0.47, 0, 0.745, 0.715) 5s infinite normal;
  -webkit-animation: move 10s cubic-bezier(0.47, 0, 0.745, 0.715) 5s infinite normal;
}
#bubble .pos25 {
  left: 50%;
}
#bubble .scale25 {
  transform: scale(2.5);
  -webkit-transform: scale(2.5);
}
#bubble .stretch26 {
  animation: stretch 7.2s ease 0s infinite normal;
  -webkit-animation: stretch 7.2s ease 0s infinite normal;
}
#bubble .shake26 {
  animation: shake 7.2s ease 0s infinite normal;
  -webkit-animation: shake 7.2s ease 0s infinite normal;
}
#bubble .move26 {
  animation: move 10.2s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s infinite normal;
  -webkit-animation: move 10.2s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s infinite normal;
}
#bubble .pos26 {
  left: 52%;
}
#bubble .scale26 {
  transform: scale(2.6);
  -webkit-transform: scale(2.6);
}
#bubble .stretch27 {
  animation: stretch 7.4s ease 0s infinite normal;
  -webkit-animation: stretch 7.4s ease 0s infinite normal;
}
#bubble .shake27 {
  animation: shake 7.4s ease 0s infinite normal;
  -webkit-animation: shake 7.4s ease 0s infinite normal;
}
#bubble .move27 {
  animation: move 10.4s cubic-bezier(0.47, 0, 0.745, 0.715) 5.4s infinite normal;
  -webkit-animation: move 10.4s cubic-bezier(0.47, 0, 0.745, 0.715) 5.4s infinite normal;
}
#bubble .pos27 {
  left: 54%;
}
#bubble .scale27 {
  transform: scale(2.7);
  -webkit-transform: scale(2.7);
}
#bubble .stretch28 {
  animation: stretch 7.6s ease 0s infinite normal;
  -webkit-animation: stretch 7.6s ease 0s infinite normal;
}
#bubble .shake28 {
  animation: shake 7.6s ease 0s infinite normal;
  -webkit-animation: shake 7.6s ease 0s infinite normal;
}
#bubble .move28 {
  animation: move 10.6s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6s infinite normal;
  -webkit-animation: move 10.6s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6s infinite normal;
}
#bubble .pos28 {
  left: 56.0%;
}
#bubble .scale28 {
  transform: scale(2.8);
  -webkit-transform: scale(2.8);
}
#bubble .stretch29 {
  animation: stretch 7.8s ease 0s infinite normal;
  -webkit-animation: stretch 7.8s ease 0s infinite normal;
}
#bubble .shake29 {
  animation: shake 7.8s ease 0s infinite normal;
  -webkit-animation: shake 7.8s ease 0s infinite normal;
}
#bubble .move29 {
  animation: move 10.8s cubic-bezier(0.47, 0, 0.745, 0.715) 5.8s infinite normal;
  -webkit-animation: move 10.8s cubic-bezier(0.47, 0, 0.745, 0.715) 5.8s infinite normal;
}
#bubble .pos29 {
  left: 58.0%;
}
#bubble .scale29 {
  transform: scale(2.9);
  -webkit-transform: scale(2.9);
}
#bubble .stretch30 {
  animation: stretch 8s ease 0s infinite normal;
  -webkit-animation: stretch 8s ease 0s infinite normal;
}
#bubble .shake30 {
  animation: shake 8s ease 0s infinite normal;
  -webkit-animation: shake 8s ease 0s infinite normal;
}
#bubble .move30 {
  animation: move 11s cubic-bezier(0.47, 0, 0.745, 0.715) 6s infinite normal;
  -webkit-animation: move 11s cubic-bezier(0.47, 0, 0.745, 0.715) 6s infinite normal;
}
#bubble .pos30 {
  left: 60%;
}
#bubble .scale30 {
  transform: scale(3);
  -webkit-transform: scale(3);
}
#bubble .stretch31 {
  animation: stretch 8.2s ease 0s infinite normal;
  -webkit-animation: stretch 8.2s ease 0s infinite normal;
}
#bubble .shake31 {
  animation: shake 8.2s ease 0s infinite normal;
  -webkit-animation: shake 8.2s ease 0s infinite normal;
}
#bubble .move31 {
  animation: move 11.2s cubic-bezier(0.47, 0, 0.745, 0.715) 6.2s infinite normal;
  -webkit-animation: move 11.2s cubic-bezier(0.47, 0, 0.745, 0.715) 6.2s infinite normal;
}
#bubble .pos31 {
  left: 62%;
}
#bubble .scale31 {
  transform: scale(3.1);
  -webkit-transform: scale(3.1);
}
#bubble .stretch32 {
  animation: stretch 8.4s ease 0s infinite normal;
  -webkit-animation: stretch 8.4s ease 0s infinite normal;
}
#bubble .shake32 {
  animation: shake 8.4s ease 0s infinite normal;
  -webkit-animation: shake 8.4s ease 0s infinite normal;
}
#bubble .move32 {
  animation: move 11.4s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s infinite normal;
  -webkit-animation: move 11.4s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s infinite normal;
}
#bubble .pos32 {
  left: 64%;
}
#bubble .scale32 {
  transform: scale(3.2);
  -webkit-transform: scale(3.2);
}
#bubble .stretch33 {
  animation: stretch 8.6s ease 0s infinite normal;
  -webkit-animation: stretch 8.6s ease 0s infinite normal;
}
#bubble .shake33 {
  animation: shake 8.6s ease 0s infinite normal;
  -webkit-animation: shake 8.6s ease 0s infinite normal;
}
#bubble .move33 {
  animation: move 11.6s cubic-bezier(0.47, 0, 0.745, 0.715) 6.6s infinite normal;
  -webkit-animation: move 11.6s cubic-bezier(0.47, 0, 0.745, 0.715) 6.6s infinite normal;
}
#bubble .pos33 {
  left: 66%;
}
#bubble .scale33 {
  transform: scale(3.3);
  -webkit-transform: scale(3.3);
}
#bubble .stretch34 {
  animation: stretch 8.8s ease 0s infinite normal;
  -webkit-animation: stretch 8.8s ease 0s infinite normal;
}
#bubble .shake34 {
  animation: shake 8.8s ease 0s infinite normal;
  -webkit-animation: shake 8.8s ease 0s infinite normal;
}
#bubble .move34 {
  animation: move 11.8s cubic-bezier(0.47, 0, 0.745, 0.715) 6.8s infinite normal;
  -webkit-animation: move 11.8s cubic-bezier(0.47, 0, 0.745, 0.715) 6.8s infinite normal;
}
#bubble .pos34 {
  left: 68%;
}
#bubble .scale34 {
  transform: scale(3.4);
  -webkit-transform: scale(3.4);
}
#bubble .stretch35 {
  animation: stretch 9s ease 0s infinite normal;
  -webkit-animation: stretch 9s ease 0s infinite normal;
}
#bubble .shake35 {
  animation: shake 9s ease 0s infinite normal;
  -webkit-animation: shake 9s ease 0s infinite normal;
}
#bubble .move35 {
  animation: move 12s cubic-bezier(0.47, 0, 0.745, 0.715) 7s infinite normal;
  -webkit-animation: move 12s cubic-bezier(0.47, 0, 0.745, 0.715) 7s infinite normal;
}
#bubble .pos35 {
  left: 70%;
}
#bubble .scale35 {
  transform: scale(3.5);
  -webkit-transform: scale(3.5);
}
#bubble .stretch36 {
  animation: stretch 9.2s ease 0s infinite normal;
  -webkit-animation: stretch 9.2s ease 0s infinite normal;
}
#bubble .shake36 {
  animation: shake 9.2s ease 0s infinite normal;
  -webkit-animation: shake 9.2s ease 0s infinite normal;
}
#bubble .move36 {
  animation: move 12.2s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s infinite normal;
  -webkit-animation: move 12.2s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s infinite normal;
}
#bubble .pos36 {
  left: 72%;
}
#bubble .scale36 {
  transform: scale(3.6);
  -webkit-transform: scale(3.6);
}
#bubble .stretch37 {
  animation: stretch 9.4s ease 0s infinite normal;
  -webkit-animation: stretch 9.4s ease 0s infinite normal;
}
#bubble .shake37 {
  animation: shake 9.4s ease 0s infinite normal;
  -webkit-animation: shake 9.4s ease 0s infinite normal;
}
#bubble .move37 {
  animation: move 12.4s cubic-bezier(0.47, 0, 0.745, 0.715) 7.4s infinite normal;
  -webkit-animation: move 12.4s cubic-bezier(0.47, 0, 0.745, 0.715) 7.4s infinite normal;
}
#bubble .pos37 {
  left: 74%;
}
#bubble .scale37 {
  transform: scale(3.7);
  -webkit-transform: scale(3.7);
}
#bubble .stretch38 {
  animation: stretch 9.6s ease 0s infinite normal;
  -webkit-animation: stretch 9.6s ease 0s infinite normal;
}
#bubble .shake38 {
  animation: shake 9.6s ease 0s infinite normal;
  -webkit-animation: shake 9.6s ease 0s infinite normal;
}
#bubble .move38 {
  animation: move 12.6s cubic-bezier(0.47, 0, 0.745, 0.715) 7.6s infinite normal;
  -webkit-animation: move 12.6s cubic-bezier(0.47, 0, 0.745, 0.715) 7.6s infinite normal;
}
#bubble .pos38 {
  left: 76%;
}
#bubble .scale38 {
  transform: scale(3.8);
  -webkit-transform: scale(3.8);
}
#bubble .stretch39 {
  animation: stretch 9.8s ease 0s infinite normal;
  -webkit-animation: stretch 9.8s ease 0s infinite normal;
}
#bubble .shake39 {
  animation: shake 9.8s ease 0s infinite normal;
  -webkit-animation: shake 9.8s ease 0s infinite normal;
}
#bubble .move39 {
  animation: move 12.8s cubic-bezier(0.47, 0, 0.745, 0.715) 7.8s infinite normal;
  -webkit-animation: move 12.8s cubic-bezier(0.47, 0, 0.745, 0.715) 7.8s infinite normal;
}
#bubble .pos39 {
  left: 78%;
}
#bubble .scale39 {
  transform: scale(3.9);
  -webkit-transform: scale(3.9);
}
#bubble .stretch40 {
  animation: stretch 10s ease 0s infinite normal;
  -webkit-animation: stretch 10s ease 0s infinite normal;
}
#bubble .shake40 {
  animation: shake 10s ease 0s infinite normal;
  -webkit-animation: shake 10s ease 0s infinite normal;
}
#bubble .move40 {
  animation: move 13s cubic-bezier(0.47, 0, 0.745, 0.715) 8s infinite normal;
  -webkit-animation: move 13s cubic-bezier(0.47, 0, 0.745, 0.715) 8s infinite normal;
}
#bubble .pos40 {
  left: 80%;
}
#bubble .scale40 {
  transform: scale(4);
  -webkit-transform: scale(4);
}
#bubble .stretch41 {
  animation: stretch 10.2s ease 0s infinite normal;
  -webkit-animation: stretch 10.2s ease 0s infinite normal;
}
#bubble .shake41 {
  animation: shake 10.2s ease 0s infinite normal;
  -webkit-animation: shake 10.2s ease 0s infinite normal;
}
#bubble .move41 {
  animation: move 13.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8.2s infinite normal;
  -webkit-animation: move 13.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8.2s infinite normal;
}
#bubble .pos41 {
  left: 82%;
}
#bubble .scale41 {
  transform: scale(4.1);
  -webkit-transform: scale(4.1);
}
#bubble .stretch42 {
  animation: stretch 10.4s ease 0s infinite normal;
  -webkit-animation: stretch 10.4s ease 0s infinite normal;
}
#bubble .shake42 {
  animation: shake 10.4s ease 0s infinite normal;
  -webkit-animation: shake 10.4s ease 0s infinite normal;
}
#bubble .move42 {
  animation: move 13.4s cubic-bezier(0.47, 0, 0.745, 0.715) 8.4s infinite normal;
  -webkit-animation: move 13.4s cubic-bezier(0.47, 0, 0.745, 0.715) 8.4s infinite normal;
}
#bubble .pos42 {
  left: 84%;
}
#bubble .scale42 {
  transform: scale(4.2);
  -webkit-transform: scale(4.2);
}
#bubble .stretch43 {
  animation: stretch 10.6s ease 0s infinite normal;
  -webkit-animation: stretch 10.6s ease 0s infinite normal;
}
#bubble .shake43 {
  animation: shake 10.6s ease 0s infinite normal;
  -webkit-animation: shake 10.6s ease 0s infinite normal;
}
#bubble .move43 {
  animation: move 13.6s cubic-bezier(0.47, 0, 0.745, 0.715) 8.6s infinite normal;
  -webkit-animation: move 13.6s cubic-bezier(0.47, 0, 0.745, 0.715) 8.6s infinite normal;
}
#bubble .pos43 {
  left: 86%;
}
#bubble .scale43 {
  transform: scale(4.3);
  -webkit-transform: scale(4.3);
}
#bubble .stretch44 {
  animation: stretch 10.8s ease 0s infinite normal;
  -webkit-animation: stretch 10.8s ease 0s infinite normal;
}
#bubble .shake44 {
  animation: shake 10.8s ease 0s infinite normal;
  -webkit-animation: shake 10.8s ease 0s infinite normal;
}
#bubble .move44 {
  animation: move 13.8s cubic-bezier(0.47, 0, 0.745, 0.715) 8.8s infinite normal;
  -webkit-animation: move 13.8s cubic-bezier(0.47, 0, 0.745, 0.715) 8.8s infinite normal;
}
#bubble .pos44 {
  left: 88%;
}
#bubble .scale44 {
  transform: scale(4.4);
  -webkit-transform: scale(4.4);
}
#bubble .stretch45 {
  animation: stretch 11s ease 0s infinite normal;
  -webkit-animation: stretch 11s ease 0s infinite normal;
}
#bubble .shake45 {
  animation: shake 11s ease 0s infinite normal;
  -webkit-animation: shake 11s ease 0s infinite normal;
}
#bubble .move45 {
  animation: move 14s cubic-bezier(0.47, 0, 0.745, 0.715) 9s infinite normal;
  -webkit-animation: move 14s cubic-bezier(0.47, 0, 0.745, 0.715) 9s infinite normal;
}
#bubble .pos45 {
  left: 90%;
}
#bubble .scale45 {
  transform: scale(4.5);
  -webkit-transform: scale(4.5);
}
#bubble .stretch46 {
  animation: stretch 11.2s ease 0s infinite normal;
  -webkit-animation: stretch 11.2s ease 0s infinite normal;
}
#bubble .shake46 {
  animation: shake 11.2s ease 0s infinite normal;
  -webkit-animation: shake 11.2s ease 0s infinite normal;
}
#bubble .move46 {
  animation: move 14.2s cubic-bezier(0.47, 0, 0.745, 0.715) 9.2s infinite normal;
  -webkit-animation: move 14.2s cubic-bezier(0.47, 0, 0.745, 0.715) 9.2s infinite normal;
}
#bubble .pos46 {
  left: 92%;
}
#bubble .scale46 {
  transform: scale(4.6);
  -webkit-transform: scale(4.6);
}
#bubble .stretch47 {
  animation: stretch 11.4s ease 0s infinite normal;
  -webkit-animation: stretch 11.4s ease 0s infinite normal;
}
#bubble .shake47 {
  animation: shake 11.4s ease 0s infinite normal;
  -webkit-animation: shake 11.4s ease 0s infinite normal;
}
#bubble .move47 {
  animation: move 14.4s cubic-bezier(0.47, 0, 0.745, 0.715) 9.4s infinite normal;
  -webkit-animation: move 14.4s cubic-bezier(0.47, 0, 0.745, 0.715) 9.4s infinite normal;
}
#bubble .pos47 {
  left: 94%;
}
#bubble .scale47 {
  transform: scale(4.7);
  -webkit-transform: scale(4.7);
}
#bubble .stretch48 {
  animation: stretch 11.6s ease 0s infinite normal;
  -webkit-animation: stretch 11.6s ease 0s infinite normal;
}
#bubble .shake48 {
  animation: shake 11.6s ease 0s infinite normal;
  -webkit-animation: shake 11.6s ease 0s infinite normal;
}
#bubble .move48 {
  animation: move 14.6s cubic-bezier(0.47, 0, 0.745, 0.715) 9.6s infinite normal;
  -webkit-animation: move 14.6s cubic-bezier(0.47, 0, 0.745, 0.715) 9.6s infinite normal;
}
#bubble .pos48 {
  left: 96%;
}
#bubble .scale48 {
  transform: scale(4.8);
  -webkit-transform: scale(4.8);
}
#bubble .stretch49 {
  animation: stretch 11.8s ease 0s infinite normal;
  -webkit-animation: stretch 11.8s ease 0s infinite normal;
}
#bubble .shake49 {
  animation: shake 11.8s ease 0s infinite normal;
  -webkit-animation: shake 11.8s ease 0s infinite normal;
}
#bubble .move49 {
  animation: move 14.8s cubic-bezier(0.47, 0, 0.745, 0.715) 9.8s infinite normal;
  -webkit-animation: move 14.8s cubic-bezier(0.47, 0, 0.745, 0.715) 9.8s infinite normal;
}
#bubble .pos49 {
  left: 98%;
}
#bubble .scale49 {
  transform: scale(4.9);
  -webkit-transform: scale(4.9);
}
#bubble .stretch50 {
  animation: stretch 12s ease 0s infinite normal;
  -webkit-animation: stretch 12s ease 0s infinite normal;
}
#bubble .shake50 {
  animation: shake 12s ease 0s infinite normal;
  -webkit-animation: shake 12s ease 0s infinite normal;
}
#bubble .move50 {
  animation: move 15s cubic-bezier(0.47, 0, 0.745, 0.715) 10s infinite normal;
  -webkit-animation: move 15s cubic-bezier(0.47, 0, 0.745, 0.715) 10s infinite normal;
}
#bubble .pos50 {
  left: 100%;
}
#bubble .scale50 {
  transform: scale(5);
  -webkit-transform: scale(5);
}
#bubble .section .field {
  border-radius: 3px;
  padding: 40px;
  background: -webkit-linear-gradient(top, #a5d4ea 0%, #86c6e0 100%);
  background: linear-gradient(to bottom, #a5d4ea 0%, #86c6e0 100%);
  margin-bottom: 20px;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08) inset;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08) inset;
  overflow: hidden;
}
#bubble .section .field.relative {
  height: 500px;
  position: relative;
  padding: 0px;
}
#bubble .section p {
  margin-bottom: 20px;
}
#bubble .section pre {
  margin-top: 0;
}
#bubble .section .ex-code-prettify-contents {
  margin-bottom: 30px;
}
#bubble .section .item {
  margin: 0 auto;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
  position: relative;
}
#bubble .section .item.L {
  width: 70px;
  height: 70px;
}
#bubble .section .item:after {
  content: "";
  display: block;
  width: 20%;
  height: 20%;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  right: 15%;
  top: 15%;
  filter: blur(2px);
  -webkit-filter: blur(2px);
  transform: rotateZ(45deg) scaleY(0.8);
  -webkit-transform: rotateZ(45deg) scaleY(0.8);
}
#bubble .section .shake {
  animation: shake 2s ease 0s infinite normal;
  -webkit-animation: shake 2s ease 0s infinite normal;
}
#bubble .section .move {
  animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;
  -webkit-animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;
  position: absolute;
  bottom: -10%;
  left: 50%;
}