.equalizer-contener {
	display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.equalizer {
  display: flex;
  justify-content: center;
  align-items: end;
  height: 100%;
  margin-top: -50px;
  transform: rotateZ(-15deg);
  width: 100%;
}
.equalizer-bar {
  width: 10em;
  margin: 0 3px;
  display: flex;
  flex-direction: column-reverse;
}
.equalizer-bar span {
  display: block;
  height: 3em;
  border-radius: 0px;
  width: 100%;
  margin: 3px 0;
  background-color: #FFF;
  transition: 0.5s ease-in-out all;
  opacity: 1;
}
.equalizer-bar:nth-child(1) span {
  background: #c12208;
}
.equalizer-bar:nth-child(2) span {
  background: #c17908;
}
.equalizer-bar:nth-child(3) span {
  background: #c1ad08;
}
.equalizer-bar:nth-child(4) span {
  background: #a9c108;
}
.equalizer-bar:nth-child(5) span {
  background: #75c108;
}
.equalizer-bar:nth-child(6) span {
  background: #38c108;
}
.equalizer-bar:nth-child(7) span {
  background: #08c16c;
}
.equalizer-bar:nth-child(8) span {
  background: #00fffc;
}