.arrow-steps {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	overflow: hidden;
	margin-top: 6rem;
	margin-bottom: 4rem;
}

.arrow-step {
	display: inline-block;
	position: relative;
	padding: 1rem 1rem 1rem 2rem;
	width: 100%;
	text-align: center;
	background: $color--graylight;
	font-weight: 800;
	font-size: 2rem;
	transition: all 0.2s linear;
	&:before {
		content: '';
		display: block;
		position: absolute;
		width: 10rem;
		height: 100%;
		border-top: 2px solid $color--white;
		border-right: 2px solid $color--white;
		background: $color--graylight;
		bottom: -72%;
		right: -4.2rem;
		transform: rotate(45deg) translate(-50%, -50%);
		transition: all 0.2s linear;
	}

	&.active {
		pointer-events: none;
		background: $color--additional-light;
		color: $color--white;
		text-decoration: none;
		&:before {
			background: $color--additional-light;
		}
	}
	&.clickable:hover {
		cursor: pointer;
		background: lighten($color--additional-light, 5%);
		color: $color--white;
		text-decoration: none;
		&:before {
			background: lighten($color--additional-light, 5%);
		}
	}

	&:last-child {
		&:before { display: none; }
	}


	&:nth-child(0) { z-index: 20; }
	&:nth-child(1) { z-index: 19; }
	&:nth-child(2) { z-index: 18; }
	&:nth-child(3) { z-index: 17; }
	&:nth-child(4) { z-index: 16; }
	&:nth-child(5) { z-index: 15; }
	&:nth-child(6) { z-index: 14; }
	&:nth-child(7) { z-index: 13; }
	&:nth-child(8) { z-index: 12; }
	&:nth-child(9) { z-index: 11; }
	&:nth-child(10) { z-index: 10; }
	&:nth-child(11) { z-index: 9; }
	&:nth-child(12) { z-index: 8; }
	&:nth-child(13) { z-index: 7; }
	&:nth-child(14) { z-index: 6; }
	&:nth-child(15) { z-index: 5; }
	&:nth-child(16) { z-index: 4; }
	&:nth-child(17) { z-index: 3; }
	&:nth-child(18) { z-index: 2; }
	&:nth-child(19) { z-index: 1; }
	&:nth-child(20) { z-index: 0; }
}