/* OTO Progress */
.progress {
  width: 100%;
  margin: 0px auto;
  padding: 20px 0px;
  text-align: center;
}
.progress .circle {
  display: inline-block;
  background: #fff;
  width: 62px; height: 62px;
  border-radius: 62px;
  border: 1px solid #777777;
}
.progress .bar {
  display: inline-block;
  background: #fff;
  position: relative;
  width: 80px;
  height: 6px;
  margin: 0 -5px 44px -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
  border: 1px solid #777777;
}
.progress .circle .label {
  display: inline-block;
  width: 54px;
  height: 54px;
  line-height: 54px;
  border-radius: 54px;
  margin-top: 3px;
  color: #b5b5ba;
  font-size: 17px;
}
.progress .circle .title {
  color: #b5b5ba;
  font-size: 13px;
  line-height: 30px;
  margin-left: -5px;
  font-weight: 700;
}

/* Done / Active */
.progress .bar.done,
.progress .circle.done {
  background: #777777;
}
.progress .bar.active {
  background: linear-gradient(to right, #777777 40%, #FFF 60%);
}
.progress .circle.done .label {
  color: #FFF;
  background: #8bc435;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progress .circle.done .title {
  color: #827a7a;
  font-weight: 700;
}
.progress .circle.active .label {
  color: #FFF;
  background: #0c95be;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progress .circle.active .title {
  color: #0c95be;
  font-weight: 700;
}

@media screen and (max-width : 480px) {
  .progress {padding: 5px 0;}
  .progress .bar { width: 33px; }
  .progress .circle {width: 52px; height: 52px;  border-radius: 52px;}
  .progress .circle .label {width: 44px;height: 44px;line-height: 44px;border-radius: 44px;font-size: 14px;}
  .progress .bar { margin: 0 -5px 36px -5px;}
}