.steps {
	display: none;
	grid-template-columns: auto 1fr auto 1fr auto;
	justify-content: space-around;
	margin: 40px 0;
}

.steps.active {
  display: grid;
  animation: fadeIn 1s;
}

.steps .steps-segment {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #F0F0FF;
	font-size: 24px;
	color: rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	font-weight: 400;
	height: 4rem;
	width: 4rem;
	box-shadow: 0px 2px 4px #D0D0E8;
	transition: all ease .5s
}

.steps .steps-segment.is-current {
	border: 1px solid #E63C1F;
}

.steps .steps-segment.is-active {
	background: #E63C1F;
	color: #F0F0FF;
}

.steps .steps-segment.is-active + .steps-divider {
	background: #E63C1F;
}

.steps .steps-divider {
	height: 1px;
	background: #D0D0E8;
	align-self: center;
	transition: all ease .5s
}