/* ---- Timeline ---- */
ol {
  position: relative;
  display: block;
  /*margin: 100px;*/
  height: 4px;
  background: #31708F; }

/*ol::before,
ol::after {
    content: "";
    position: absolute;
    top: -8px;
    display: block;
    width: 0;
    height: 0;
    border-radius: 10px;
    border: 10px solid #31708F;
}

ol::before {
    left: -5px;
}

ol::after {
    right: -10px;
    border: 10px solid transparent;
    border-right: 0;
    border-left: 20px solid #31708F;
    border-radius: 3px;
}*/
/* ---- Timeline elements ---- */
li.last {
  float: right; }

li {
  position: relative;
  display: inline-block;
  float: left;
  width: 150px;
  font: bold 14px arial;
  height: 50px; }

li .diplome {
  position: absolute;
  color: #000000;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  top: -20px; }

li .point {
  content: "";
  top: -4px;
  left: 50%;
  display: block;
  width: 6px;
  height: 6px;
  border: 6px solid #31708F;
  border-radius: 10px;
  background: #fff;
  position: absolute; }

li .description {
  padding-top: 10px;
  position: relative;
  font-weight: normal;
  text-align: center;
  z-index: 1; }

/* ---- Hover effects ---- */
li:hover {
  cursor: pointer;
  color: #48A4D2; }

li:hover .description {
  display: block; }