@import url("https://fonts.googleapis.com/css?family=Oswald|Roboto:400,700");

.timeline {
  padding: 50px 0 0 60px;
}

.timeline-item {
  padding: 15px 40px;
  top: -20px;
  position: relative;
  color: rgba(0, 0, 0, 0.7);
  border-left: 2px solid rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 899px) {
.timeline-item {
  top: 0px;
  }
}
.timeline-item p {
  font-size: 1rem;
	line-height: 1.4em;
  margin: 0 0 10px 0;
}
.timeline-item::before {
  content: attr(date-is);
  position: absolute;
  font-weight: bold;
  top: 5px;
  left: -70px;
  display: block;
  font-size: 40px;
}
.timeline-item::after {
  width: 40px;
  height: 40px;
  display: block;
  top: 1em;
  position: absolute;
  left: -23px;
  border-radius: 100px;
  content: "";
}
.spring::before {color: #f2a5c3;}
.spring::after  {background: #f2a5c3;}
.summer::before {color: #32a2d3;}
.summer::after  {background: #32a2d3;}
.autumn::before {color: #f1ab3f;}
.autumn::after  {background: #f1ab3f;}
.winter::before {color: #bcbdcf;}
.winter::after  {background: #bcbdcf;}

.timeline-item:last-child {
  -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;
     border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;
}