.ube-timeline .ube-timeline-title {
	margin-top: 0;
	margin-bottom: 10px;
}

.ube-timeline-time, .ube-timeline-content {
	padding: 0 30px;
}

.ube-timeline-item {
	--size-time: 100px;
	--color: var(--e-global-color-dark);
	padding: 20px 0;
	position: relative;

	&:before {
		content: "";
		position: absolute;
		background-color: var(--color);
		top: 0;
		height: 100%;
	}
}

.ube-timeline-time > span {
	font-weight: 600;
	color: var(--color);
}

.ube-timeline-style-01 .ube-timeline-item {
	&:before {
		height: 100%;
		width: 6px;
		border-radius: 20px;
		margin-left: -1px;
	}

	.ube-timeline-time {
		position: relative;

		&:before {
			position: absolute;
			content: "";
			top: 15px;
			height: 20px;
			width: 20px;
			border: 6px solid var(--color);
			border-radius: 100%;
			background: #fff;
			@include transform(translateY(-50%))
		}
	}
}

.ube-timeline-style-02 .ube-timeline-item {
	&:before {
		width: 3px;
		margin-left: -2px;
	}

	.ube-timeline-time {
		> span {
			@include d-flex();
			@include align-items-center();
			@include justify-content-center();
			content: "";
			position: absolute;
			top: 40px;
			margin-left: -2px;
			color: #fff;
			width: var(--size-time);
			height: var(--size-time);
			background: var(--color);
			text-align: center;
			border-radius: 100%;

			&:before {
				position: absolute;
				content: "";
				top: 58%;
				margin-top: -15px;
				height: 10px;
				width: 10px;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
			}
		}
	}

	.ube-timeline-content {
		position: relative;
		background: #ffffff;
		box-shadow: 0 0 97px rgba(0, 0, 0, 0.1);
		padding: 38px 30px;
	}

}

.ube-timeline-style-03 .ube-timeline-item {
	&:before {
		width: 3px;
		margin-left: -2px;
	}

	.ube-timeline-content {
		padding-top: calc((var(--size-time) / 2) - 20px);
	}

	.ube-timeline-time {
		position: relative;

		&:before {
			position: absolute;
			margin-top: -15px;
			content: "";
			top: calc(var(--size-time) / 2);
			height: 30px;
			width: 30px;
			border: 7px solid var(--color);;
			border-radius: 100%;
			background: #fff;
			transform: translateY(-50%);
		}

		> span {
			width: var(--size-time);
			height: var(--size-time);
			border: 13px solid var(--color);;
			@include d-inline-flex();
			@include justify-content-center();
			@include align-items-center();
			border-radius: 100%;
			position: relative;
			top: -12px;

			&:before {
				position: absolute;
				content: "";
				top: 56%;
				margin-top: -15px;
				height: 10px;
				width: 10px;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;

			}
		}
	}

}

@media screen and (min-width: 769px) {
	.ube-timeline-item.item-reverse {
		@include flex-flow-row-reverse();
	}
	.ube-timeline-time, .ube-timeline-content {
		@include flex(1 1 50%);
	}
	.ube-timeline-item:before {
		left: 50%;
	}

	.ube-timeline-item.item-reverse .ube-timeline-time,
	.ube-timeline-item .ube-timeline-content {
		text-align: left;
	}
	.ube-timeline-item.item-reverse .ube-timeline-content,
	.ube-timeline-item .ube-timeline-time {
		text-align: right;
	}

	.ube-timeline-style-01 {
		.item-reverse .ube-timeline-time:before,
		.ube-timeline-item:not(.item-reverse) .ube-timeline-content:before {
			left: -8px;
		}

		.item-reverse .ube-timeline-content:before,
		.ube-timeline-item:not(.item-reverse) .ube-timeline-time:before {
			right: -12px;
		}
	}

	.ube-timeline-style-02 {
		.ube-timeline-item.item-reverse {
			.ube-timeline-content {
				margin-right: calc(var(--size-time) + 40px);
			}

			.ube-timeline-time > span:before {
				border-left: 10px solid transparent;
				border-right: 15px solid var(--color);
				right: 95%;
			}
		}

		.ube-timeline-item:not(.item-reverse) {
			.ube-timeline-content {
				margin-left: calc(var(--size-time) + 40px);
			}

			.ube-timeline-time > span:before {
				border-right: 10px solid transparent;
				border-left: 15px solid var(--color);
				left: 95%;
			}
		}

		.ube-timeline-time > span {
			left: calc(50% - (var(--size-time) / 2));
		}
	}

	.ube-timeline-style-03 .ube-timeline-item {
		&:not(.item-reverse) {
			.ube-timeline-time {
				&:before {
					right: -15px;
				}

				> span:before {
					left: calc(100% + 10px);
					border-left: 15px solid var(--color);
					border-right: 10px solid transparent;
				}

			}
		}

		&.item-reverse {
			.ube-timeline-time {
				&:before {
					left: -15px;
				}

				> span:before {
					right: calc(100% + 10px);
					border-right: 15px solid var(--color);
					border-left: 10px solid transparent;
				}
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.ube-timeline-content {
		text-align: left;
	}
	.ube-timeline-time {
		text-align: right;
	}
	.ube-timeline-style-01 {
		.ube-timeline-item {
			.ube-timeline-time {
				@include flex(1 1 30%);
				padding-left: 0;
			}

			.ube-timeline-content {
				@include flex(1 1 70%);
			}

			&:before {
				left: 30%;
			}

			.ube-timeline-time:before {
				right: -12px;
			}

			.ube-timeline-content :before {
				left: -8px;
			}
		}
	}

	.ube-timeline-style-02 {
		.ube-timeline-time {
			@include flex(1 1 10%);
		}

		.ube-timeline-content {
			@include flex(1 1 80%);
		}

		.ube-timeline-item:before {
			left: 10%;
		}

		.ube-timeline-content {
			margin-left: calc(var(--size-time) / 2);
		}

		.ube-timeline-time > span {
			left: calc(10% - (var(--size-time) / 2));

			&:before {
				border-right: 10px solid transparent;
				border-left: 15px solid var(--color);
				left: 95%;
			}
		}
	}

	.ube-timeline-style-03 {
		.ube-timeline-time {
			padding-left: 0;
			@include flex(1 1 45%);

			&:before {
				right: -15px;
			}

			> span:before {
				left: calc(100% + 10px);
				border-left: 15px solid var(--color);
				border-right: 10px solid transparent;
			}
		}

		.ube-timeline-content {
			@include flex(1 1 55%);
		}

		.ube-timeline-item:before {
			left: 45%;
		}
	}
}