.step-progress__wrapper{width:90%;margin:0 auto;position:relative}.step-progress__wrapper-before{content:"";background-color:gray;width:100%;height:12px;position:absolute;top:50%;left:0;transform:translateY(-50%)perspective(1000px)}.step-progress__wrapper-after{content:"";transform-origin:0;background-color:red;width:100%;height:12px;transition:transform .5s;position:absolute;top:50%;left:0;transform:scaleX(0)translateY(-50%)perspective(1000px)}.step-progress__bar{justify-content:space-between;align-items:center;width:100%;height:100px;margin-bottom:40px;display:flex}.step-progress__step{z-index:2;--activeColor:red;--passiveColor:gray;--activeBorder:5px;--passiveBorder:5px;position:relative}.step-progress__step span{color:var(--passiveColor);text-align:center;opacity:1;font-size:50px;font-weight:900;transition:all .3s;display:block;transform:translateY(-2px)scale(1)perspective(1000px)}.step-progress__step--active span,.step-progress__step--active .step-progress__step-label{color:var(--activeColor)}.step-progress__step--active .step-progress__step-icon{opacity:1}.step-progress__step--valid .step-progress__step-icon{opacity:1;transform:translate(-50%,-50%)scale(1)perspective(1000px)}.step-progress__step--valid span{color:var(--activeColor);opacity:0;transform:translate(0,0)scale(2)perspective(1000px)}.step-progress__step--valid .step-progress__step-label{color:var(--activeColor)}.step-progress__step:after{content:"";z-index:-1;border:var(--passiveBorder) solid var(--passiveColor);background-color:#fff;border-radius:50%;width:75px;height:75px;transition:all .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)perspective(1000px)}.step-progress__step--active:after{border:var(--activeBorder) solid var(--activeColor)}.step-progress__step--valid:after{background-color:var(--activeColor);border:var(--activeBorder) solid var(--activeColor)}@media (width<=767px){.step-progress__step-label{display:none}.step-progress__step span{font-size:28px}.step-progress__step:after{width:40px;height:40px}.step-progress__step-icon{font-size:22px}}.step-progress__step-label{white-space:nowrap;color:gray;font-size:18px;font-weight:600;transition:all .3s;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%)perspective(1000px)}.step-progress__step-icon{color:#fff;opacity:0;font-size:36px;transition:transform .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)perspective(1000px)}