@keyframes color {
  0% {
    background-color: #e0f6ff;
    box-shadow: 0px 0px 10px #e0f6ff;
  }
  25% {
    background-color: #8bd5f3;
    box-shadow: 0px 0px 10px #8bd5f3;
  }
  50% {
    background-color: #e0f6ff;
    box-shadow: 0px 0px 10px #e0f6ff;
  }
  75% {
    background-color: #8bd5f3;
    box-shadow: 0px 0px 10px #8bd5f3;
  }
  100% {
    background-color: #e0f6ff;
    box-shadow: 0px 0px 10px #e0f6ff;
  }
}
@keyframes rotate {
  0% {
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -moz-transform: translate(-50%, -50%) rotate(-360deg);
    -ms-transform: translate(-50%, -50%) rotate(-360deg);
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes circulate {
  0% {
    -moz-transform: rotate(0deg) translate(-50%, -50%) rotate(0deg);
    -ms-transform: rotate(0deg) translate(-50%, -50%) rotate(0deg);
    -webkit-transform: rotate(0deg) translate(-50%, -50%) rotate(0deg);
    transform: rotate(0deg) translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -moz-transform: rotate(1440deg) translate(-50%, -50%) rotate(-1440deg);
    -ms-transform: rotate(1440deg) translate(-50%, -50%) rotate(-1440deg);
    -webkit-transform: rotate(1440deg) translate(-50%, -50%) rotate(-1440deg);
    transform: rotate(1440deg) translate(-50%, -50%) rotate(-1440deg);
  }
}


.dott {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-filter: url("#goo");
  filter: url("#goo");
}
.dot--big {
  width: 30px;
  height: 30px;
  animation: rotate 4s 0s infinite linear, color 4s 0s ease infinite;
  z-index: 6;
}
.dot--small {
  width: 30px;
  height: 30px;
  animation: circulate 4s 0s infinite linear, color 4s 0s ease infinite;
}