.eventsList {
    display: table;
    width: 100%;
    padding-top: 30px;
}

.eventsList > div {
  display: table-cell;
    width: 25%;
  vertical-align: top;
  position: relative;
  text-align: center;
}

.eventsList a.event {
    display: table-cell;
    width: 25%;
    vertical-align: top;
    position: relative;
}

.eventsList > div:after,.eventsList a.event:after {
    background: #333333;
    content: '';
    width: 2px;
    height: 40px;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    right: -1px;
}

.eventsList > div:last-child:after, .eventsList a.event:last-child:after {
    display: none;
}

a.event {
    text-align: center;
    padding: 20px;
}

a.event:hover {
   text-decoration: none;
}

.eventDate {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 55px;
    margin-bottom: 5px;
    line-height: 35px;
}

.eventDate span.month {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    display: block;
    font-size: 26px;
    text-transform: uppercase;
}

.eventTime {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    margin-bottom: 5px;
}

.eventTime span {
    font-weight: 300;
    margin-left: 5px;
}

.eventName {
    color: #464b4f;
    font-size: 23px;
}

a.event > div {
    transition: all .2s ease-in-out;
}

a.event:hover > div {
      transform: scale(1.1);
}

@media screen and (max-width: 820px) {
  .eventsList > div, .eventsList a.event {
    display: block;
    width: 96%;
    padding: 2%;
  }

  .eventsList > div:after, .eventsList a.event:after {
    display: none;
  }
}