.horizontal.timeline3 {
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 93%;
    padding-bottom: 80px;
    padding-top: 20px;
	margin: 0 auto;

	
	&:before {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: .2em;
		background-color: var(--#{$prefix}border-color);
	}
	
	.line {
		display: block;
		position: absolute;
		width: 50%;
		height: .2em;
		background-color: var(--#{$prefix}primary);
	}
	
	.steps {
		display: flex;
		position: relative;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		
		.step {
			display: block;
			position: relative;
			bottom: calc(100% + 1em);
			padding: 6px;
			margin: 0 2em;
			box-sizing: content-box;
			color: var(--#{$prefix}primary);
			background-color: currentColor;
			border-radius: 50%;
			z-index: 500;

			&:first-child {
				margin-left: 0;
			}

			&:last-child {
				margin-right: 0;
			}

			span {
				position: absolute;
				top: calc(100% + 1em);
				left: 50%;
				transform: translateX(-50%);
				white-space: nowrap;
				color: var(--#{$prefix}body-color);
			}

			&.current {
				&:before {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					padding: 1em;
					background-color: currentColor;
					border-radius: 50%;
					opacity: 0;
					z-index: -1;
					animation-name: animation-timeline-current;
					animation-duration: 2s;
					animation-iteration-count: infinite;
					animation-timing-function: ease-out;
				}

				span {
					opacity: .8;
				}
			}
		}	
	}
}

@keyframes animation-timeline-current {
	from {
		transform: translate(-50%, -50%) scale(0);
		opacity: 1;
	}
	to {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}