.events.bit-chime-compact .event {
  span + span::before { content: " "; }
  .venue { font-weight: bold; }
  .soldout { color: red; font-weight: bold; }
  .lineup { padding-left: 5px; }
  .with { text-transform: lowercase; }
}

.events.bit-chime-default {
  background: #fff; color: #000; margin: 20px 0;
  .event {
    margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid;
    .lineup { display: block; font-style: italic; }
    .date { font-weight: bold; }

    .soldout { color: red; padding: 5px 10px; }
    .onsale_text { font-size: 0.8em; padding: 5px 5px; }
    .onsale_text, .soldout {
      white-space: nowrap; 
      border: 1px solid; border-radius: 5px; display: inline-block; background: #fff; transition: all 0.3s; text-decoration: none; font-weight: bold;  }

    a { color: #fff; border: 1px solid; border-radius: 5px; padding: 5px 10px; display: inline-block; background: #333; transition: all 0.3s; text-decoration: none; margin-bottom: 1px; }
    a:hover { background-color: gold; color: black; }
    a.button {
      text-decoration: none;
      display: inline-block;
      border-radius: 5px;
      border: 1px solid;
      color: yellow;
      background: #000;
      padding: 5px 10px;
      font-weight: bold;
      font-size: 20px;
      transition: all 0.3s;
      margin-bottom: 10px;
    }
    a.button:hover {
      background: yellow;
      color: #000;
    }
  }
}

/* desktop */
@media screen and (min-width: 800px) {
  .events.bit-chime-default {
    .event:nth-child(odd) { background: #ccc; }
    .event { border: 0; margin: 0; padding: 8px; }
    .event div { display: inline-block; vertical-align: top; padding: 5px; box-sizing: border-box; }
    .event .date { width: 15%; }
    .event .venue { width: 40%; }
    .event .city { width: 25%; font-weight: bold; }
    .event .tickets {
      width: 20%; text-align: right;
      .details { margin-left: 1px; }
    }
    .event .presale_onsale { margin-left: 15%; }
  }
}