.join-steps {}
.join-steps .step {
	border-top: 5px solid #D80A38;
    width: 100%;
    padding: 10px 1rem;
}
.join-steps .step .badge{
	background-color: #51626F;
	border-radius: 0 0 0 0.75em;
}

.join-steps .step.active .badge{
	background-color: #0939A3;
}

.join-steps .step.active{
	border-top: 10px solid #D80A38;
	padding-top: 5px;
	color: #0939A3;
}

.join-steps-m {
	border-top: 3px solid #D80A38;
	padding: 1rem 1.5rem;
}

.join-steps-m .step{
	width: 100%;
	text-align: right;
}

.join-steps-m .step h2 {
	font-size: 1.25rem;
	font-weight: 400;
	margin: 0;
}
.join-steps-m .step .subtext {
	color: #51626F;
	font-size: 0.75rem;
}



.step-progress {
    position: relative;
    float: left;
}

.step-progress p {
    text-align:center;
    position: absolute;
    line-height: 50px;
    width: 100%;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: #51626F;
}

.step-progress svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.step-progress .circle_animation {
  stroke-dasharray: 147.655; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 147.655;
}

.step2 .circle_animation {
    -webkit-animation: step2 1s ease-out forwards;
    animation: step2 1s ease-out forwards;
}

.step3 .circle_animation {
	stroke-dashoffset: 110.74125;
    -webkit-animation: step3 1s ease-out forwards;
    animation: step3 1s ease-out forwards;
}

@-webkit-keyframes step2 {
  to {
    stroke-dashoffset: 110.74125;
  }
}

@keyframes step2 {
  to {
    stroke-dashoffset: 110.74125;
  }
}

@-webkit-keyframes step3 {
	to {
	  stroke-dashoffset: 73.8275;
	}
  }
  
  @keyframes step3 {
	to {
	  stroke-dashoffset: 73.8275;
	}
  }

@-webkit-keyframes step4 {
	to {
	  stroke-dashoffset: 36.91375;
	}
  }
  
  @keyframes step4 {
	to {
	  stroke-dashoffset: 36.91375;
	}
  }