.tab-panel-frame {
  margin-bottom: 10px;
}
.tab-panel-frame .tab-frame {
  z-index: 10;
}
.tab-panel-frame .tab-frame .tab {
  background-color: lightgray;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 20px;
  display: inline-block;
  border-top: 1px solid #787878;
  border-right: 1px solid #787878;
  border-bottom: 1px solid #787878;
}
.tab-panel-frame .tab-frame .tab:nth-child(1) {
  border-left: 1px solid #787878;
}
.tab-panel-frame .tab-frame .tab:hover {
  cursor: pointer;
}
.tab-panel-frame .tab-frame .tab_hip-hop {
  background-color: #c9d18c;
  color: #474f0a;
}
.tab-panel-frame .tab-frame .tab_hip-hop:hover {
  background-color: #b5bd7d;
}
.tab-panel-frame .tab-frame .tab_rnb {
  background-color: #edcfb9;
  color: #8a1e1d;
}
.tab-panel-frame .tab-frame .tab_rnb:hover {
  background-color: #e6bea1;
}
.tab-panel-frame .tab-frame .tab_jazz {
  background-color: #DFC5DC;
  color: #6d2a6e;
}
.tab-panel-frame .tab-frame .tab_jazz:hover {
  background-color: #CFA8CA;
}
.tab-panel-frame .tab-frame .tab_electronic {
  background-color: #d1e3e7;
  color: #02637b;
}
.tab-panel-frame .tab-frame .tab_electronic:hover {
  background-color: #a3c6cf;
}
.tab-panel-frame .tab-frame .tab_rock {
  background-color: #d3d3d3;
  color: #000000;
}
.tab-panel-frame .tab-frame .tab_rock:hover {
  background-color: #b3b3b3;
}
.tab-panel-frame .tab-frame .active {
  background-color: #f1f1f1 !important;
  border-bottom: 1px solid #f1f1f1;
}
.tab-panel-frame .panel-frame {
  border: 1px solid #787878;
  margin-top: -1px;
}
.tab-panel-frame .panel-frame .panel {
  background-color: #f1f1f1;
  padding: 10px;
  display: none;
}
.tab-panel-frame .panel-frame .active {
  display: block;
}

/* Extra micro devices (smallest form phones, from 319px and lower) */
@media (max-width: 319px) {
  .tab-panel-frame {
    margin-bottom: 10px;
  }
  .tab-panel-frame .tab-frame .tab {
    font-size: 14px;
    padding: 5px 10px;
  }
  .tab-panel-frame .tab-frame .active {
    background-color: #f1f1f1 !important;
    border-bottom: 1px solid #f1f1f1;
  }
  .tab-panel-frame .panel-frame {
    border: 1px solid #787878;
    margin-top: -1px;
  }
  .tab-panel-frame .panel-frame .panel {
    background-color: #f1f1f1;
    padding: 10px;
    display: none;
  }
  .tab-panel-frame .panel-frame .active {
    display: block;
  }
}