.bubble {
  /* background-color: rgba(255, 255, 255, 0.4); */
 background-image: url("images/copo.png");
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
}
.bubble-1 {
  opacity: 0.32;
  left: 83vw;
  top: 22vh;
  animation: move-1 30.02s infinite;
  -moz-transform: translate(0, 0) scale(0.37);
  -ms-transform: translate(0, 0) scale(0.37);
  -webkit-transform: translate(0, 0) scale(0.37);
  transform: translate(0, 0) scale(0.37);
}
.bubble-2 {
  opacity: 0.89;
  left: 55vw;
  top: 10vh;
  animation: move-2 30.04s infinite;
  -moz-transform: translate(0, 0) scale(0.46);
  -ms-transform: translate(0, 0) scale(0.46);
  -webkit-transform: translate(0, 0) scale(0.46);
  transform: translate(0, 0) scale(0.46);
}
.bubble-3 {
  opacity: 0.41;
  left: 93vw;
  top: 3vh;
  animation: move-3 30.06s infinite;
  -moz-transform: translate(0, 0) scale(0.27);
  -ms-transform: translate(0, 0) scale(0.27);
  -webkit-transform: translate(0, 0) scale(0.27);
  transform: translate(0, 0) scale(0.27);
}
.bubble-4 {
  opacity: 0.5;
  left: 36vw;
  top: 11vh;
  animation: move-4 30.08s infinite;
  -moz-transform: translate(0, 0) scale(0.36);
  -ms-transform: translate(0, 0) scale(0.36);
  -webkit-transform: translate(0, 0) scale(0.36);
  transform: translate(0, 0) scale(0.36);
}
.bubble-5 {
  opacity: 0.96;
  left: 47vw;
  top: 33vh;
  animation: move-5 30.1s infinite;
  -moz-transform: translate(0, 0) scale(0.27);
  -ms-transform: translate(0, 0) scale(0.27);
  -webkit-transform: translate(0, 0) scale(0.27);
  transform: translate(0, 0) scale(0.27);
}
.bubble-6 {
  opacity: 0.81;
  left: 77vw;
  top: 17vh;
  animation: move-6 30.12s infinite;
  -moz-transform: translate(0, 0) scale(0.24);
  -ms-transform: translate(0, 0) scale(0.24);
  -webkit-transform: translate(0, 0) scale(0.24);
  transform: translate(0, 0) scale(0.24);
}
.bubble-7 {
  opacity: 0.56;
  left: 74vw;
  top: 70vh;
  animation: move-7 30.14s infinite;
  -moz-transform: translate(0, 0) scale(0.78);
  -ms-transform: translate(0, 0) scale(0.78);
  -webkit-transform: translate(0, 0) scale(0.78);
  transform: translate(0, 0) scale(0.78);
}
.bubble-8 {
  opacity: 0.27;
  left: 17vw;
  top: 62vh;
  animation: move-8 30.16s infinite;
  -moz-transform: translate(0, 0) scale(1.67);
  -ms-transform: translate(0, 0) scale(1.67);
  -webkit-transform: translate(0, 0) scale(1.67);
  transform: translate(0, 0) scale(1.67);
}
.bubble-9 {
  opacity: 0.54;
  left: 92vw;
  top: 49vh;
  animation: move-9 30.18s infinite;
  -moz-transform: translate(0, 0) scale(0.73);
  -ms-transform: translate(0, 0) scale(0.73);
  -webkit-transform: translate(0, 0) scale(0.73);
  transform: translate(0, 0) scale(0.73);
}
.bubble-10 {
  opacity: 0.84;
  left: 15vw;
  top: 97vh;
  animation: move-10 30.2s infinite;
  -moz-transform: translate(0, 0) scale(1.54);
  -ms-transform: translate(0, 0) scale(1.54);
  -webkit-transform: translate(0, 0) scale(1.54);
  transform: translate(0, 0) scale(1.54);
}
.bubble-11 {
  opacity: 0.18;
  left: 83vw;
  top: 64vh;
  animation: move-11 30.22s infinite;
  -moz-transform: translate(0, 0) scale(1.83);
  -ms-transform: translate(0, 0) scale(1.83);
  -webkit-transform: translate(0, 0) scale(1.83);
  transform: translate(0, 0) scale(1.83);
}
.bubble-12 {
  opacity: 0.54;
  left: 100vw;
  top: 71vh;
  animation: move-12 30.24s infinite;
  -moz-transform: translate(0, 0) scale(2.05);
  -ms-transform: translate(0, 0) scale(2.05);
  -webkit-transform: translate(0, 0) scale(2.05);
  transform: translate(0, 0) scale(2.05);
}
.bubble-13 {
  opacity: 0.65;
  left: 83vw;
  top: 83vh;
  animation: move-13 30.26s infinite;
  -moz-transform: translate(0, 0) scale(1.94);
  -ms-transform: translate(0, 0) scale(1.94);
  -webkit-transform: translate(0, 0) scale(1.94);
  transform: translate(0, 0) scale(1.94);
}
.bubble-14 {
  opacity: 0.52;
  left: 49vw;
  top: 43vh;
  animation: move-14 30.28s infinite;
  -moz-transform: translate(0, 0) scale(0.98);
  -ms-transform: translate(0, 0) scale(0.98);
  -webkit-transform: translate(0, 0) scale(0.98);
  transform: translate(0, 0) scale(0.98);
}
.bubble-15 {
  opacity: 0.23;
  left: 59vw;
  top: 12vh;
  animation: move-15 30.3s infinite;
  -moz-transform: translate(0, 0) scale(1.37);
  -ms-transform: translate(0, 0) scale(1.37);
  -webkit-transform: translate(0, 0) scale(1.37);
  transform: translate(0, 0) scale(1.37);
}
.bubble-16 {
  opacity: 0.62;
  left: 11vw;
  top: 72vh;
  animation: move-16 30.32s infinite;
  -moz-transform: translate(0, 0) scale(0.67);
  -ms-transform: translate(0, 0) scale(0.67);
  -webkit-transform: translate(0, 0) scale(0.67);
  transform: translate(0, 0) scale(0.67);
}
.bubble-17 {
  opacity: 0.5;
  left: 43vw;
  top: 53vh;
  animation: move-17 30.34s infinite;
  -moz-transform: translate(0, 0) scale(0.38);
  -ms-transform: translate(0, 0) scale(0.38);
  -webkit-transform: translate(0, 0) scale(0.38);
  transform: translate(0, 0) scale(0.38);
}
.bubble-18 {
  opacity: 0.84;
  left: 8vw;
  top: 25vh;
  animation: move-18 30.36s infinite;
  -moz-transform: translate(0, 0) scale(1.38);
  -ms-transform: translate(0, 0) scale(1.38);
  -webkit-transform: translate(0, 0) scale(1.38);
  transform: translate(0, 0) scale(1.38);
}
.bubble-19 {
  opacity: 0.54;
  left: 16vw;
  top: 95vh;
  animation: move-19 30.38s infinite;
  -moz-transform: translate(0, 0) scale(1.87);
  -ms-transform: translate(0, 0) scale(1.87);
  -webkit-transform: translate(0, 0) scale(1.87);
  transform: translate(0, 0) scale(1.87);
}
.bubble-20 {
  opacity: 0.38;
  left: 81vw;
  top: 17vh;
  animation: move-20 30.4s infinite;
  -moz-transform: translate(0, 0) scale(1.8);
  -ms-transform: translate(0, 0) scale(1.8);
  -webkit-transform: translate(0, 0) scale(1.8);
  transform: translate(0, 0) scale(1.8);
}
.bubble-21 {
  opacity: 0.02;
  left: 45vw;
  top: 79vh;
  animation: move-21 30.42s infinite;
  -moz-transform: translate(0, 0) scale(1.22);
  -ms-transform: translate(0, 0) scale(1.22);
  -webkit-transform: translate(0, 0) scale(1.22);
  transform: translate(0, 0) scale(1.22);
}
.bubble-22 {
  opacity: 0.89;
  left: 63vw;
  top: 57vh;
  animation: move-22 30.44s infinite;
  -moz-transform: translate(0, 0) scale(1.8);
  -ms-transform: translate(0, 0) scale(1.8);
  -webkit-transform: translate(0, 0) scale(1.8);
  transform: translate(0, 0) scale(1.8);
}
.bubble-23 {
  opacity: 0.27;
  left: 44vw;
  top: 94vh;
  animation: move-23 30.46s infinite;
  -moz-transform: translate(0, 0) scale(0.54);
  -ms-transform: translate(0, 0) scale(0.54);
  -webkit-transform: translate(0, 0) scale(0.54);
  transform: translate(0, 0) scale(0.54);
}
.bubble-24 {
  opacity: 0.56;
  left: 62vw;
  top: 24vh;
  animation: move-24 30.48s infinite;
  -moz-transform: translate(0, 0) scale(0.73);
  -ms-transform: translate(0, 0) scale(0.73);
  -webkit-transform: translate(0, 0) scale(0.73);
  transform: translate(0, 0) scale(0.73);
}
.bubble-25 {
  opacity: 0.7;
  left: 2vw;
  top: 26vh;
  animation: move-25 30.5s infinite;
  -moz-transform: translate(0, 0) scale(1.75);
  -ms-transform: translate(0, 0) scale(1.75);
  -webkit-transform: translate(0, 0) scale(1.75);
  transform: translate(0, 0) scale(1.75);
}
.bubble-26 {
  opacity: 0.65;
  left: 67vw;
  top: 76vh;
  animation: move-26 30.52s infinite;
  -moz-transform: translate(0, 0) scale(0.3);
  -ms-transform: translate(0, 0) scale(0.3);
  -webkit-transform: translate(0, 0) scale(0.3);
  transform: translate(0, 0) scale(0.3);
}
.bubble-27 {
  opacity: 0.7;
  left: 34vw;
  top: 3vh;
  animation: move-27 30.54s infinite;
  -moz-transform: translate(0, 0) scale(0.75);
  -ms-transform: translate(0, 0) scale(0.75);
  -webkit-transform: translate(0, 0) scale(0.75);
  transform: translate(0, 0) scale(0.75);
}
.bubble-28 {
  opacity: 0.84;
  left: 2vw;
  top: 25vh;
  animation: move-28 30.56s infinite;
  -moz-transform: translate(0, 0) scale(1.27);
  -ms-transform: translate(0, 0) scale(1.27);
  -webkit-transform: translate(0, 0) scale(1.27);
  transform: translate(0, 0) scale(1.27);
}
.bubble-29 {
  opacity: 0.5;
  left: 2vw;
  top: 7vh;
  animation: move-29 30.58s infinite;
  -moz-transform: translate(0, 0) scale(1.28);
  -ms-transform: translate(0, 0) scale(1.28);
  -webkit-transform: translate(0, 0) scale(1.28);
  transform: translate(0, 0) scale(1.28);
}
.bubble-30 {
  opacity: 0.27;
  left: 3vw;
  top: 45vh;
  animation: move-30 30.6s infinite;
  -moz-transform: translate(0, 0) scale(1.26);
  -ms-transform: translate(0, 0) scale(1.26);
  -webkit-transform: translate(0, 0) scale(1.26);
  transform: translate(0, 0) scale(1.26);
}

.credits {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 2px 15px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  z-index: 111;
}
.credits a {
  color: #fff;
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 0.05em;
}

@keyframes move-1 {
  38% {
    -moz-transform: translate(69vw, 75vh);
    -webkit-transform: translate(69vw, 75vh);
    transform: translate(69vw, 75vh);
  }
}
@keyframes move-2 {
  37% {
    -moz-transform: translate(27vw, 30vh);
    -webkit-transform: translate(27vw, 30vh);
    transform: translate(27vw, 30vh);
  }
}
@keyframes move-3 {
  38% {
    -moz-transform: translate(9vw, 20vh);
    -webkit-transform: translate(9vw, 20vh);
    transform: translate(9vw, 20vh);
  }
}
@keyframes move-4 {
  45% {
    -moz-transform: translate(81vw, 86vh);
    -webkit-transform: translate(81vw, 86vh);
    transform: translate(81vw, 86vh);
  }
}
@keyframes move-5 {
  56% {
    -moz-transform: translate(37vw, 42vh);
    -webkit-transform: translate(37vw, 42vh);
    transform: translate(37vw, 42vh);
  }
}
@keyframes move-6 {
  35% {
    -moz-transform: translate(39vw, 34vh);
    -webkit-transform: translate(39vw, 34vh);
    transform: translate(39vw, 34vh);
  }
}
@keyframes move-7 {
  46% {
    -moz-transform: translate(47vw, 42vh);
    -webkit-transform: translate(47vw, 42vh);
    transform: translate(47vw, 42vh);
  }
}
@keyframes move-8 {
  33% {
    -moz-transform: translate(45vw, 50vh);
    -webkit-transform: translate(45vw, 50vh);
    transform: translate(45vw, 50vh);
  }
}
@keyframes move-9 {
  47% {
    -moz-transform: translate(27vw, 35vh);
    -webkit-transform: translate(27vw, 35vh);
    transform: translate(27vw, 35vh);
  }
}
@keyframes move-10 {
  51% {
    -moz-transform: translate(98vw, 93vh);
    -webkit-transform: translate(98vw, 93vh);
    transform: translate(98vw, 93vh);
  }
}
@keyframes move-11 {
  57% {
    -moz-transform: translate(58vw, 52vh);
    -webkit-transform: translate(58vw, 52vh);
    transform: translate(58vw, 52vh);
  }
}
@keyframes move-12 {
  41% {
    -moz-transform: translate(17vw, 23vh);
    -webkit-transform: translate(17vw, 23vh);
    transform: translate(17vw,23vh);
  }
}
@keyframes move-13 {
  50% {
    -moz-transform: translate(16vw, 21vh);
    -webkit-transform: translate(16vw, 21vh);
    transform: translate(16vw, 21vh);
  }
}
@keyframes move-14 {
  43% {
    -moz-transform: translate(38vw, 43vh);
    -webkit-transform: translate(38vw, 43vh);
    transform: translate(38vw, 43vh);
  }
}
@keyframes move-15 {
  38% {
    -moz-transform: translate(34vw, 39vh);
    -webkit-transform: translate(34vw, 39vh);
    transform: translate(34vw, 39vh);
  }
}
@keyframes move-16 {
  40% {
    -moz-transform: translate(78vw, 70vh);
    -webkit-transform: translate(78vw, 70vh);
    transform: translate(78vw, 70vh);
  }
}
@keyframes move-17 {
  46% {
    -moz-transform: translate(4vw, 10vh);
    -webkit-transform: translate(4vw, 10vh);
    transform: translate(4vw, 10vh);
  }
}
@keyframes move-18 {
  59% {
    -moz-transform: translate(96vw, 83vh);
    -webkit-transform: translate(96vw, 83vh);
    transform: translate(96vw, 83vh);
  }
}
@keyframes move-19 {
  60% {
    -moz-transform: translate(82vw, 70vh);
    -webkit-transform: translate(82vw, 70vh);
    transform: translate(82vw, 70vh);
  }
}
@keyframes move-20 {
  48% {
    -moz-transform: translate(7vw, 13vh);
    -webkit-transform: translate(7vw, 13vh);
    transform: translate(7vw, 13vh);
  }
}
@keyframes move-21 {
  55% {
    -moz-transform: translate(1vw, 6vh);
    -webkit-transform: translate(1vw, 6vh);
    transform: translate(1vw, 6vh);
  }
}
@keyframes move-22 {
  60% {
    -moz-transform: translate(89vw, 95vh);
    -webkit-transform: translate(89vw, 95vh);
    transform: translate(89vw, 95vh);
  }
}
@keyframes move-23 {
  44% {
    -moz-transform: translate(22vw, 16vh);
    -webkit-transform: translate(22vw, 16vh);
    transform: translate(22vw, 16vh);
  }
}
@keyframes move-24 {
  57% {
    -moz-transform: translate(66vw, 60vh);
    -webkit-transform: translate(66vw, 60vh);
    transform: translate(66vw, 60vh);
  }
}
@keyframes move-25 {
  54% {
    -moz-transform: translate(67vw, 72vh);
    -webkit-transform: translate(67vw, 72vh);
    transform: translate(67vw, 72vh);
  }
}
@keyframes move-26 {
  46% {
    -moz-transform: translate(6vw, 11vh);
    -webkit-transform: translate(6vw, 11vh);
    transform: translate(6vw, 11vh);
  }
}
@keyframes move-27 {
  40% {
    -moz-transform: translate(89vw, 72vh);
    -webkit-transform: translate(89vw, 72vh);
    transform: translate(89vw, 72vh);
  }
}
@keyframes move-28 {
  35% {
    -moz-transform: translate(39vw, 31vh);
    -webkit-transform: translate(39vw, 31vh);
    transform: translate(39vw, 31vh);
  }
}
@keyframes move-29 {
  41% {
    -moz-transform: translate(78vw, 83vh);
    -webkit-transform: translate(78vw, 83vh);
    transform: translate(78vw, 83vh);
  }
}
@keyframes move-30 {
  56% {
    -moz-transform: translate(87vw, 80vh);
    -webkit-transform: translate(87vw, 80vh);
    transform: translate(87vw, 80vh);
  }
}