aside{
  width: 10%;
  min-width: 150px;
  max-width: 500px;
  margin: 25px auto;
}

.detective-1 {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}

.lupa-1 {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 5s linear alternate infinite;
}

.dot, .dot1, .dot2, .dot3, .dot0, .dot4, .dot5, .dot6, .dot7, .dot8, .dot9, .dot11, .dot10 {
  height: 20px;
  width: 20px;
  margin-left: 5%;
  margin-right: 5%;
  background-color: #65d3ff;
  border-radius: 50%;
  display: inline-block;
  transform: scale(0);
}

.dot0{
  animation: bounce 5s infinite;
  animation-delay: -250ms;
}
.dot1{
  animation: bounce 5s infinite;
}
.dot2{
  animation: bounce 5s infinite;
  animation-delay: 250ms;
}
.dot3{
  animation: bounce 5s infinite;
  animation-delay: 500ms;
}
.dot4{
  animation: bounce 5s infinite;
  animation-delay: 750ms;
}
.dot5{
  animation: bounce 5s infinite;
  animation-delay: 1s;
}
.dot6{
  animation: bounce 5s infinite;
  animation-delay: 1.25s;
}
.dot7{
  animation: bounce 5s infinite;
  animation-delay: 1.5s;
}
.dot8{
  animation: bounce 5s infinite;
  animation-delay: 1.75s;
}
.dot9{
  animation: bounce 5s infinite;
  animation-delay: 2s;
}
.dot10{
  animation: bounce 5s infinite;
  animation-delay: 2.25s;
}
.dot11{
  animation: bounce 5s infinite;
  animation-delay: 2.5s;
}

@keyframes bounce {
        0%, 100% {
            transform: scale(0);
        }
        50% {
            transform: scale(1);
        }
    }

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@media screen and (min-width:360px) and (max-width: 450px) {
  .dot, .dot1, .dot2, .dot3, .dot0, .dot4, .dot5, .dot6, .dot7, .dot8, .dot9, .dot11, .dot10 {
    width: 3px;
    height: 3px;
  }
}