* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

#timeline {
  height: 6px;
  width: 70%;
  background: #e4e7ed;
  border: solid 1px rgba(121, 121, 121, 0.5);
  border-radius: 5px;
  margin: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: relative; }

#span {
  display: none;
  width: 70%;
  margin: auto;
  margin-top: 25%;
  text-align: center;
  color: black; }

.circle {
  width: 10px !important;
  height: 25px !important;
  background: #fcfcfc;
  position: absolute;
  top: -11px;
  left: -2px;
  border: 2px solid #4ad5ff;
  cursor: pointer; }
  .circle:before {
    content: '';
    width: 10px;
    height: 25px;
    top: -3px;
    left: -2px;
    background: #4aa4ff;
    position: absolute;
    display: none; }
  .circle .popupSpan {
    width: auto;
    height: auto;
    padding: 10px;
    black-space: nowrap;
    display: inline-block;
    color: black;
    position: absolute;
    top: 20px;
    left: -75px;
    display: none;
    -webkit-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out; }
  .circle.hover:before, .circle.active:before {
    display: block; }
  .circle.hover .popupSpan, .circle.active .popupSpan {
    display: block; }
  .circle.active .popupSpan {
    top: -40px; }