@media(max-width: 768px) {
    
    .calendar {
        display:none !important;
    }
    .mobile-events {
        display:block !important;
    }
}

.mobile-events {
    display:none;
}

.event {
    display: block;
    margin-bottom:50px;
    position:relative;
}

.event-color {

  width:4px;
  position:absolute;
  top:0px;
  height:70px;
  left:0;

}

.event .event-date {
    float:left;
    width:30%;
    height:50px;
    margin-right:0px;
    text-align:center;
}

.event .event-details {
    float:left;
    width:70%;
}

.event-day {
    font-size:42px;
    display:block;
    font-weight:200;
    line-height:40px;
}

.event-month {
  text-transform:uppercase;
  color:#777;
  font-weight:200;
  margin-top:5px;
}

.event-title {
  font-size:28px;
  line-height:32px;
  font-weight:200;
}

.event-time {
  text-transform:uppercase;
  color: #777;
  font-weight:200;
  font-size:14px;
  margin-bottom:10px;
  margin-top:4px;
}