.events { background: #fff; color: #000; margin: 20px 0; }
.events .event { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid; }
.events .lineup { display: block; font-style: italic; }
.events a { color: #fff; border: 1px solid; border-radius: 5px; padding: 5px 10px; display: inline-block; background: #333; transition: all 0.3s; text-decoration: none;   }
.events a:hover { background-color: gold; color: black; }
.events 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;
}
.events a.button:hover {
  background: yellow;
  color: #000;
}

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