section {
  display: block;
  border-bottom: 1px solid #ffffff;
}
#section01 {
  height: 4rem;
  margin-top: 6rem;
}
#section02 {
  margin: 0;
  border: 1px solid #ffffff;
}
section.light {
  width: 100%;
  height: 100%;
  background: #cccccc;
  color: #555555;
}
section.dark {
  width: 100%;
  height: 100%;
  background: #999999;
  color: #ffffff;
}
section .caption {
  padding: 1rem;
  font-size: 1rem;
  font-weight: bold;
}
h1 {
  font-size: 1.5rem;
  margin-bottom: .5em;
}
p {
  font-size: 1rem;
}
.container {
  width: 90%;
  margin: 0 auto;
}
.timeline-item {
  padding: 3em 2em 2em;
  position: relative;
  color: rgba(0, 0, 0, 0.7);
  border-left: 2px solid rgba(0, 0, 0, 0.3);
}
.timeline-item p {
  font-size: 1rem;
}
.timeline-item::before {
  content: attr(date-is);
  position: absolute;
  left: 2em;
  font-weight: bold;
  top: 1em;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: .785rem;
}
.timeline-item::after {
  width: 10px;
  height: 10px;
  display: block;
  top: 1em;
  position: absolute;
  left: -7px;
  border-radius: 10px;
  content: '';
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
}
.timeline-item:last-child {
  -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%;
  border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%;
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%;
}