.tmpl-fintech {
	&__timeline {
		&-container {
			display: flex;
			flex-direction: column;
			padding-left: 6px;
			@include media-min($medium) {
				flex-direction: row;
				flex-wrap: wrap;
			}
			@include media-min($large) {
				padding-left: 0;
				justify-content: space-between;
			}
		}
		.step-item {
			position: relative;
			display: inline-block;
			flex: 1;
			opacity: 0;
			@include media-min($medium) {
				width: 50%;
				flex: none;
			}
			@include media-min($large) {
				width: 33%;
			}
			&-tail {
				width: 1px;
				height: 100%;
				background: #5d6974;
				position: absolute;
				@include media-min($medium) {
					width: 100%;
					height: 1px;
					top: 0;
				}
				@include media-min($large) {
					display: none;
				}
			}
			&-dot {
				position: absolute;
				background: #dc150b;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				left: -6px;
				top: 16px;
				@include media-min($medium) {
					top: -6px;
					left: 0px;
				}
				@include media-min($large) {
					display: none;
				}
			}
			&-content {
				padding-left: 32px;
				padding-bottom: 48px;
				@include media-min($medium) {
					padding: 16px 16px 48px 0;
				}
			}
			&.step-1 {
				.step-item-tail {
					top: 16px;
					@include media-min($medium) {
						top: 0;
						left: 0;
					}
				}
			}
			&.step-2 {
				.step-item-dot {
					background: #9e4ec4;
				}
				@include media-min($large) {
					display: none;
				}
			}
			&.step-3 {
				.step-item-dot {
					background: #2c80ce;
				}
			}
			&.step-4 {
				.step-item-dot {
					background: #1aa8a8;
				}
				@include media-min($large) {
					display: none;
				}
			}
			&.step-5 {
				.step-item-tail {
					&::after {
						content: "";
						width: 0;
						height: 0;
						border-left: 4px solid rgba(0, 0, 0, 0);
						border-right: 4px solid rgba(0, 0, 0, 0);
						border-top: 8px solid #fff;
						left: -3px;
						bottom: 2px;
						display: block;
						position: absolute;
					}
				}
				@include media-min($medium) {
					.step-item-tail {
						&::after {
							content: "";
							border: none;
							border-top: 4px solid rgba(0, 0, 0, 0);
							border-bottom: 4px solid rgba(0, 0, 0, 0);
							border-left: 8px solid #fff;
							right: -6px;
							bottom: unset;
							left: unset;
							top: -4px;
						}
					}
				}
				.step-item-content {
					padding-bottom: 0;
				}
			}
		}
		.step-icon {
			width: 40px;
			height: 40px;
			display: block;
			margin-bottom: 20px;
		}
		.step-title {
			font-weight: 700;
			font-size: 24px;
			line-height: 32px;
		}
		.step-description {
			margin-top: 6px;
		}
		.timeline-line {
			display: none;
			@include media-min($large) {
				background: #5d6974;
				width: 100%;
				height: 1px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.step-item-dot {
				background: #dc150b;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				display: block;
				position: relative;
				margin-top: 12px;
				&:nth-of-type(2) {
					background: #9e4ec4;
				}
				&:nth-of-type(3) {
					background: #2c80ce;
				}
				&:nth-of-type(4) {
					background: #1aa8a8;
				}
			}
			.step-item-arrow {
				border: none;
				border-top: 4px solid rgba(0, 0, 0, 0);
				border-bottom: 4px solid rgba(0, 0, 0, 0);
				border-left: 8px solid #fff;
			}
		}
		.timeline-step {
			display: none;
			padding-top: 32px;
			@include media-min($large) {
				display: flex;
			}
			.step-item {
				&.step-2 {
					margin-left: 20%;
				}
				&.step-4 {
					margin-left: 7%;
				}

				@include media-min($large) {
					display: block;
				}
			}
            .step-item-content{
                padding-bottom: 0;
            }
		}
	}
}