.equlizer {
    /* margin: 100px auto 0; */
    /* width: 420px; */
    height: 96px;
    display: flex;
    align-items: flex-end;
    position: absolute;
    top: -97px;
    right: 0;
}

.bar {
    width: 10px;
    min-height: 3px;
    margin-right: 1px;
 
}

.bar:nth-child(0) {
  background-color: rgba(122, 236, 19, 0.42);
  animation: grow2 1758ms alternate infinite;
}

@keyframes grow0 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(1) {
  background-color: rgba(255, 188, 0, 0.6);
  animation: grow3 2063ms alternate infinite;
}

@keyframes grow1 {
 0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(2) {
   background-color: rgba(223, 32, 32, 0.56);
  animation: grow4 2018ms alternate infinite;
}

@keyframes grow2 {
 0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(3) {
  background-color: rgba(110, 1, 255, 0.45);
  animation: grow5 2149ms alternate infinite;
}

@keyframes grow3 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(4) {
  background-color: rgba(210, 45, 197, 0.43);
  animation: grow6 1725ms alternate infinite;
}

@keyframes grow4 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(5) {
   background-color: rgba(202, 204, 51, 0.36);
  animation: grow7 1542ms alternate infinite;
}

@keyframes grow5 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(6) {
 background-color: rgba(98, 198, 57, 0.39);
  animation: grow8 1997ms alternate infinite;
}

@keyframes grow6 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(7) {
  background-color: rgba(0, 156, 247, 0.18);
  animation: grow9 1557ms alternate infinite;
}

@keyframes grow7 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(8) {
  background-color: gray;
  animation: grow19 1509ms alternate infinite;
}

@keyframes grow8 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(9) {
  background-color: rgba(180, 0, 255, 0.39);
  animation: grow20 2067ms alternate infinite;
}

@keyframes grow9 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(10) {
  background-color: rgba(6, 249, 193, 0.47);
  animation: grow0 1530ms alternate infinite;
}

@keyframes grow10 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(11) {
  background-color: rgba(117, 162, 204, 0.38);
  animation: grow1 2149ms alternate infinite;
}

@keyframes grow11 {
 0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(12) {
  background-color: rgba(122, 236, 19, 0.42);
  animation: grow2 1758ms alternate infinite;
}

@keyframes grow12 {
 0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(13) {
  background-color: rgba(255, 188, 0, 0.6);
  animation: grow3 2063ms alternate infinite;
}

@keyframes grow13 {
 0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(14) {
  background-color: rgba(223, 32, 32, 0.56);
  animation: grow4 2018ms alternate infinite;
}

@keyframes grow14 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(15) {
  background-color: rgba(110, 1, 255, 0.45);
  animation: grow5 2149ms alternate infinite;
}

@keyframes grow15 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(16) {
  background-color: rgba(210, 45, 197, 0.43);
  animation: grow6 1725ms alternate infinite;
}

@keyframes grow16 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(17) {
  background-color: rgba(202, 204, 51, 0.36);
  animation: grow7 1542ms alternate infinite;
}

@keyframes grow17 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(18) {
  background-color: rgba(98, 198, 57, 0.39);
  animation: grow8 1997ms alternate infinite;
}

@keyframes grow18 {
   0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(19) {
  background-color: rgba(0, 156, 247, 0.18);
  animation: grow9 1557ms alternate infinite;
}

@keyframes grow19 {
  0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(20) {
  background-color: rgba(180, 0, 255, 0.39);
  animation: grow20 2067ms alternate infinite;
}

@keyframes grow20 {
 0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}

.bar:nth-child(21) {
  background-color: rgba(6, 249, 193, 0.47);
  animation: grow0 1530ms alternate infinite;
}

@keyframes grow21 {
 0% {
    height: 70px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 70px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(22) {
  background-color: rgba(117, 162, 204, 0.38);
  animation: grow1 2149ms alternate infinite;
}

@keyframes grow22 {
 0% {
    height: 50px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 50px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(23) {
  background-color: rgba(122, 236, 19, 0.42);
  animation: grow2 1758ms alternate infinite;
}

@keyframes grow23 {
  0% {
    height: 50px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 50px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(24) {
  background-color: rgba(255, 188, 0, 0.6);
  animation: grow3 2063ms alternate infinite;
}

@keyframes grow24 {
 0% {
    height: 50px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 50px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(25) {
  background-color: rgba(223, 32, 32, 0.56);
  animation: grow4 2018ms alternate infinite;
}

@keyframes grow25 {
 0% {
    height: 50px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 50px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(26) {
  background-color: rgba(110, 1, 255, 0.45);
  animation: grow5 2149ms alternate infinite;
}

@keyframes grow26 {
  0% {
    height: 50px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 50px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(27) {
  background-color: rgba(210, 45, 197, 0.43);
  animation: grow6 1725ms alternate infinite;
}

@keyframes grow27 {
  0% {
    height: 50px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 50px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(28) {
  background-color: rgba(202, 204, 51, 0.36);
  animation: grow7 1542ms alternate infinite;
}

@keyframes grow28 {
  0% {
    height: 50px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 50px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(29) {
  background-color: rgba(98, 198, 57, 0.39);
  animation: grow8 1997ms alternate infinite;
}

@keyframes grow29 {
 0% {
    height: 50px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 50px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}
.bar:nth-child(30) {
  background-color: rgba(0, 156, 247, 0.18);
  animation: grow9 1557ms alternate infinite;
}

@keyframes grow30 {
  0% {
    height: 50px;
  }
  10% {
    height: 20px;
  }
  20% {
    height: 20px;
  }
  30% {
    height: 50px;
  }
  40% {
    height: 14px;
  }
  50% {
    height: 12px;
  }
  60% {
    height: 24px;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 50px;
  }
  90% {
    height: 6px;
  }
  100% {
    height: 35px;
  }
}