ul.timeline {
  margin: 0px;
}

ul.timeline li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0;
  padding-top: 30px;
  padding-bottom: 20px;
  background: #fff;
  margin-bottom: -1em;
}

/* --- Timeline buttons --- */
ul.timeline li::after {
  content: '';
  font-family: "FontAwesome";
  position: absolute;
  left: 50%;
  bottom: calc(50% - 25px);
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: inherit;
  text-align: center;
  font-size: 30px;
  padding-top: 5px;
  color: rgba(0, 0, 0, 0.3);
  transition: color 0.25s;
}
ul.timeline li:hover::after {
  color: rgba(0, 0, 0, 0.7);
}

/* Button school */
ul.timeline li.t-school::after {
  content: '\f19d';
}
/* Button work */
ul.timeline li.t-work::after {
  content: '\f0b1';
}

/* --- Entry bubble --- */
/* Arrow */
ul.timeline li div.t-info::before {
  content: '';
  position: absolute;
  left: -40px;
  top: calc(50% - 25px);
  border: 20px solid transparent;
  border-right: 20px solid;
  transition: border-right-color 0.25s;
  border-right-color: rgba(240,240,240,0.6);
}

ul.timeline li:hover div.t-info::before {
  border-right-color: rgba(240,240,240,0.9);
}

/* Bubble */
ul.timeline li div.t-info {
  position: relative;
  left: 80px;
  top: 0px;
  width: calc(100vw - 150px);
  background-color: rgba(240,240,240,0.6);
  padding: 10px;
  transition: background-color 0.25s linear, left 0.5s;
}

ul.timeline li:hover div.t-info {
  left: 50px;
  background-color: rgba(240,240,240,0.9);
}

/* For large screens display alternate bubbles */
@media (min-width: 1200px) {
  ul.timeline {
    padding: 0px;
  }

  ul.timeline li {
    margin: 0 auto;
  }

  /* --- Arrows --- */
  ul.timeline li:nth-child(odd) div.t-info::before {
    left: -40px;
  }
  ul.timeline li:nth-child(even) div.t-info::before {
    right: -40px;
    left: auto;
    transform: rotateZ(180deg);
  }

  /* --- Entry bubbles --- */
  ul.timeline li div.t-info {
    width: 500px;
  }

  ul.timeline li:nth-child(odd) div.t-info {
    left: 80px;
  }
  ul.timeline li:nth-child(even) div.t-info {
    left: -574px;
  }
  ul.timeline li:hover:nth-child(odd) div.t-info {
    left: 50px;
  }
  ul.timeline li:hover:nth-child(even) div.t-info {
    left: -544px;
  }
}