.cont{
  height: 100%;
  width: 576px;
  left: calc(50% - 288px);
  padding: 0;
  margin: 0 auto;
  position: absolute;
}
#progress-bar{
  appearance:none;
  width: 576px;
  color: #000;
  height: 2px;
  margin: 0 auto;
}
#progress-bar span {
  height: 10px;
  width: 10px;
  border-radius: 100%;
  border: 3px solid #137CC0;
  background:#137CC0;
  position: absolute;
  left:0;
  top: 12px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.second{
  left: 192px;
}
.third{
  left: 384px;
}
.fourth{
  left: 576px;
}
#progress-bar::-webkit-progress-value{ /* Changes line color */
  background: #fff;
  transition: all 0.4s ease-in-out;
}
#progress-bar::-webkit-progress-bar{ /* Changes background color */
  background: #137CC0;
}
.border-change{
  border-color:#fff;
  transition: all 0.4s ease-in-out;
}


.progress-bar {
  width: 0;
  -webkit-animation: progress 1.5s ease-in-out forwards;
  animation: progress 1.5s ease-in-out forwards;
}
.progress-bar .title {
  opacity: 0;
  -webkit-animation: show 0.35s forwards ease-in-out 0.5s;
  animation: show 0.35s forwards ease-in-out 0.5s;
}


@-webkit-keyframes progress {
  from {
    width: 100%;
  }
  to {
    width: 100%;
  }
}

@keyframes progress {
  from {
    width: 100%;
  }
  to {
    width: 100%;
  }
}
@-webkit-keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}