.progress-bar {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
  z-index: 10;
  height: 15.3477218225vw;
}
.progress-bar.active {
  opacity: 1;
  visibility: visible;
}

.step {
  position: absolute;
}
.step span {
  background-color: white;
  border-radius: 100%;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-box-shadow: 0vw 0vw 0vw 0vw white;
  box-shadow: 0vw 0vw 0vw 0vw white;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: height 0.3s ease-in-out, width 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  transition: height 0.3s ease-in-out, width 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  transition: height 0.3s ease-in-out, width 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  transition: height 0.3s ease-in-out, width 0.3s ease-in-out, box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
}

.step.current span {
  -webkit-box-shadow: 0vw 0vw 3.194vw 1.2vw white;
  box-shadow: 0vw 0vw 3.194vw 1.2vw white;
}

.step-1 {
  height: 2.3954436451vw;
  width: 2.3954436451vw;
  left: 16.9028776978vw;
  top: -1.1978417266vw;
}
.step-1.active span {
  width: 166%;
  height: 166%;
}

.step-2 {
  height: 2.1294964029vw;
  width: 2.1294964029vw;
  left: 26.0860911271vw;
  top: 1.8630695444vw;
}
.step-2.active span {
  width: 175%;
  height: 175%;
}

.step-3 {
  height: 1.8630695444vw;
  width: 1.8630695444vw;
  left: 35.2697841727vw;
  top: 3.8594724221vw;
}
.step-3.active span {
  width: 185%;
  height: 185%;
}

.step-4 {
  height: 1.596882494vw;
  width: 1.596882494vw;
  left: 44.4532374101vw;
  top: 5.0573141487vw;
}
.step-4.active span {
  width: 200%;
  height: 200%;
}

.step-5 {
  height: 1.596882494vw;
  width: 1.596882494vw;
  left: 53.5033573141vw;
  top: 5.0573141487vw;
}
.step-5.active span {
  width: 183%;
  height: 183%;
}

.step-6 {
  height: 1.3309352518vw;
  width: 1.3309352518vw;
  left: 62.6868105516vw;
  top: 4.1258992806vw;
}
.step-6.active span {
  width: 200%;
  height: 200%;
}

.step-7 {
  height: 1.0647482014vw;
  width: 1.0647482014vw;
  left: 71.8705035971vw;
  top: 2.3956834532vw;
}
.step-7.active span {
  width: 225%;
  height: 225%;
}

.step-8 {
  height: 0.7983213429vw;
  width: 0.7983213429vw;
  left: 81.0539568345vw;
  top: -0.132853717vw;
}
.step-8.active span {
  width: 225%;
  height: 225%;
}

@media (min-width: 720px) {
  .progress-bar {
    height: 10.6777777778vw;
    bottom: 0.78125vh;
  }
  .step.current span {
    -webkit-box-shadow: 0vw 0vw 4.167vw 0.1vw white;
            box-shadow: 0vw 0vw 4.167vw 0.1vw white;
  }
  .step-1 {
    height: 2.4vw;
    width: 2.4vw;
    left: 16.1333333333vw;
    top: -2vw;
  }
  .step-1.active span {
    width: 163%;
    height: 163%;
  }
  .step-2 {
    height: 2.1331944444vw;
    width: 2.1331944444vw;
    left: 26.1331944444vw;
    top: 1.8666666667vw;
  }
  .step-3 {
    height: 1.8652777778vw;
    width: 1.8652777778vw;
    left: 35.3331944444vw;
    top: 3.8665277778vw;
  }
  .step-4 {
    height: 1.5998611111vw;
    width: 1.5998611111vw;
    left: 44.5333333333vw;
    top: 5.0666666667vw;
  }
  .step-5 {
    height: 1.5998611111vw;
    width: 1.5998611111vw;
    left: 53.5998611111vw;
    top: 5.0666666667vw;
  }
  .step-6 {
    height: 1.3319444444vw;
    width: 1.3319444444vw;
    left: 62.8vw;
    top: 4.1331944444vw;
  }
  .step-7 {
    height: 1.0665277778vw;
    width: 1.0665277778vw;
    left: 71.9998611111vw;
    top: 2.4vw;
  }
  .step-8 {
    height: 0.7998611111vw;
    width: 0.7998611111vw;
    left: 81.2vw;
    top: -0.1331944444vw;
  }
}/*# sourceMappingURL=prog-bar.css.map */