.ProgressBar { margin: 0 auto; list-style: none; position: relative; display: flex; justify-content: space-between; }

.ProgressBar-step { text-align: center; position: relative; width: 100%; }
.ProgressBar-step:before, .ProgressBar-step:after { content: ""; height: 0.5em; background-color: #632054; position: absolute; z-index: 1; width: 100%; left: -50%; top: 45%; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all .25s ease-out; }
.ProgressBar-step:first-child:before, .ProgressBar-step:first-child:after { display: none; }
.ProgressBar-step:after { background-color: #00637C; width: 0%; }
.ProgressBar-step.is-complete + .ProgressBar-step.is-current:after, .ProgressBar-step.is-complete + .ProgressBar-step.is-complete:after { width: 100%; }
.ProgressBar .active { background-color: #632054; }
.ProgressBar .active text { fill: #ffffff; font-family: Raleway-Regular !important; }


.ProgressBar-icon { width: 2.5em; height: 2.5em; background-color: #ffffff; fill: #9F9FA3; border: 2px solid #632054; padding: 0.5em; max-width: 100%; z-index: 10; position: relative; transition: all .25s ease-out; }
.is-current .ProgressBar-icon { fill: #00637C; background-color: #00637C; }
.is-complete .ProgressBar-icon { fill: #DBF1FF; background-color: #00637C; }

.ProgressBar-stepLabel { display: block; text-transform: uppercase; color: #9F9FA3; position: absolute; padding-top: 0.5em; width: 100%; transition: all .25s ease-out; }
.is-current > .ProgressBar-stepLabel, .is-complete > .ProgressBar-stepLabel { color: #00637C; }

.wrapper { max-width: 1000px; margin: 4em auto; font-size: 16px; }