.progress-progress {
	width: 100%;
	display: table;
	table-layout: fixed;
	padding: 0;
	margin: 0;
}

.progress__step {
	display: table-cell;
	text-align: center;
	vertical-align: top;
	position: relative;
	font-size: 1.25em;
	font-family: 'Open Sans';
	font-weight: 400;
}

.progress__step::before {
	content: "";
	display: block;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	margin: 0 auto;
	
	position: relative;
	z-index: 1;
}

.progress__step:not(:first-child)::after {
	content: "";
	position: absolute;
	top: 1.3em;
	left: -50%;
	width: 100%;
	height: .4em;
	/* z-index: -1; */
}

/*  */
.increment-counter + .progress__step:not(:first-child)::after {
	content: none;
}
/*  */

.progress--counter .progress__step {
	counter-increment: step-number;
	font-weight: 800;
	line-height: 3em;
}

/*  */
.progress--counter .increment-counter {
	/* counter-increment: step-number; */
	/* display: none; */
	visibility: hidden;
}
/*  */

/*
.progress--counter .progress__step::before {
	content: counter(step-number);
}
*/

/* steps before the active step */
.progress__step::before, .progress__step::after {
	background-color: #bf3542;
}

.progress__step::before {
	background-color: #fbd4d8;
	box-shadow: inset 0 0 0 3px #bf3542;
}

/* steps after the active step */
.progress__step--active ~ .progress__step::before {
	background-color: #eee;
	box-shadow: inset 0 0 0 3px #ccc;
}

.progress__step--active ~ .progress__step::after {
	background-color: #ccc
}

/* the active step */
.progress__step--active::before {
	background-color: #fbd4d8;
	box-shadow: 0 0 3px 1px #bf3542;
}

.progress__step--active {
	color: #ff6171;
}