.container2 {
  position: relative;
  left: -29%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
}

.panel {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 50px;
  border-radius: 5px;
  cursor: pointer;
  flex: 0.5;
  margin: 0 2px;
  transition: all 700ms ease-in;

  background: transparent;
  border-radius: 40px;
  display: inline-block;
  width: 60px;
}

.panel p {
  font-size: 1rem;
  color: #000;
  margin: 0;
  opacity: 0;
}

.panel.active {
  flex: 10;
  display: flex;
  align-items: center;
  height: 62px;
  background-color: #ffbf47 !important;
  overflow: hidden;
}

.panel.active p {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
  padding-left: 70px;
}

@media (max-width: 480px) {
  /* .container {
        width: 30px;
    } */

  .panel:nth-last-of-type(6),
  .panel:nth-last-of-type(7) {
    display: none;
  }
}