.on-now--container{
  background-color: #3d3935;
  color: #fff;
  display: flex;
  flex-flow: column;
  line-height: 1.5rem;
  padding: 0;
}

.on-now--header,
.on-now--full-list-link {
  background-color: #00aea9;
  color: #fff;
  font-weight: bold;
  padding: .25rem 1rem;
  text-align: center;
  text-transform: uppercase;
}

.on-now--header a,
.on-now--header a:active,
.on-now--header a:visited,
.on-now--full-list-link a,
.on-now--full-list-link a:active,
.on-now--full-list-link a:visited {
  color: #fff;
  transition: color .2s;
}
.on-now--header a:focus,
.on-now--header a:hover,
.on-now--full-list-link a:focus,
.on-now--full-list-link a:hover {
  color: #fec52e;
}

.on-now--listing {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  line-height: 1.5rem;
  margin-right: -.5rem;
  padding: 0.5em;
  text-align: center;
}
.on-now--show-title,
.on-now--show-subtitle,
.on-now--track-title {
  margin-right: .5rem;
}
.on-now--show-title {
  font-weight: bold;
}

.on-now--track-title {
  font-style: italic;
}

@media screen and (min-width: 750px) {
  .on-now--container{
    flex-flow: row nowrap;
    justify-content: space-between;
  }

  .on-now--header,
  .on-now--full-list-link {
    display: flex;
    flex-flow: column;
    justify-content: center;
  }

  .on-now--listing {
    align-content: flex-start;
  }
}