.tm-timeline {
	ul {
		margin: 0;
		padding: 0;
	}

	.row {
		margin-left: -30px;
		margin-right: -30px;
	}

	.col-md-6 {
		padding-left: 30px;
		padding-right: 30px;
	}

	&.style-01 {
		.tm-timeline-list {
			position: relative;
			display: inline-block;
			width: 100%;
			padding: 32px 0 65px;
		}

		.line {
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -1px;
			height: 100%;
			border-left: 2px solid #086ad8;
			opacity: .15;
		}

		.dots {
			position: absolute;
			top: 14px;
			left: 50%;
			transform: translate(-50%, 0);
			width: 30px;
			height: 30px;

			&:before {
				content: '';
				position: absolute;
				border: 1px solid currentColor;
				border-radius: 50%;
				top: 0;
				left: 0;
				opacity: .3;
				width: 30px;
				height: 30px;
			}

			.middle-dot {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 14px;
				height: 14px;
				border-radius: 50%;
				z-index: 2;
				border: 3px solid currentColor;
				background: #fff;
			}
		}

		.item {
			position: relative;
			list-style-type: none;

			&:nth-child(odd) {
				.timeline-feature {
					order: 3;

					> .inner {
						text-align: left;
						float: right;
					}
				}

				.timeline-info {
					> .inner {
						float: left;
					}

					.content-wrap {
						text-align: right;
					}
				}
			}

			+ .item {
				margin-top: 68px;
			}
		}

		.timeline-feature > .inner {
			text-align: right;
			width: 500px;
			max-width: 100%;
		}

		.timeline-info > .inner {
			@extend %clearfix;
			padding-top: 130px;
			float: right;
			width: 500px;
			max-width: 100%;
		}

		.content-body {
			display: inline-block;
			width: 400px;
			max-width: 100%;

			ul {
				li {
					list-style-type: none;
					position: relative;
					padding-left: 18px;

					&:before {
						content: '';
						position: absolute;
						top: 8px;
						left: 0;
						width: 6px;
						height: 6px;
						border-radius: 50%;
						background: #bebebe;
					}

					+ li {
						margin-top: 10px;
					}
				}
			}
		}

		.year {
			font-size: 72px;
			font-weight: 400;
			line-height: 1;
			margin-bottom: 27px;
		}

		.heading {
			font-size: 24px;
			margin-bottom: 20px;
		}

		.text {
			font-size: 18px;
			line-height: 2;
		}

		.photo {
			img {
				width: 100%;
				border-radius: 5px;
			}
		}
	}
}

.tm-timeline {
	.tm-animation-queue {
		.item {
			.timeline-col {
				opacity: 0;
			}

			&.animate {
				.timeline-col {
					opacity: 1;
					animation: moveHorizontal 0.65s ease forwards;
				}

				&:nth-child(odd) {
					.timeline-col.left {
						transform: translateX(100px);
					}

					.timeline-col.right {
						transform: translateX(-100px);
					}
				}

				&:nth-child(even) {
					.timeline-col.left {
						transform: translateX(-100px);
					}

					.timeline-col.right {
						transform: translateX(100px);
					}
				}
			}
		}
	}
}

@include media-breakpoint-down(lg) {
	.tm-timeline {
		&.style-01 {
			.year {
				font-size: 62px;
			}
		}
	}
}

@include media-breakpoint-down(md) {
	.tm-timeline {
		&.style-01 {
			.year {
				font-size: 52px;
			}

			.timeline-info > .inner {
				padding-top: 70px;
			}
		}
	}
}

@include media-breakpoint-down(sm) {
	.tm-timeline {
		&.style-01 {
			.year {
				font-size: 42px;
			}
		}
	}
}

@include media-breakpoint-down(sm) {
	.tm-timeline {
		&.style-01 {
			.line {
				left: 15px;
			}

			.dots {
				right: auto;
				left: 0;
				transform: none;
			}

			.item {
				padding-left: 45px;
				width: 100%;

				&:nth-child(odd) {
					.timeline-feature {
						order: -1;
					}

					.timeline-info {
						.content-wrap {
							text-align: left;
						}
					}
				}
			}

			.timeline-feature > .inner {
				text-align: left;
				width: 500px;
				max-width: 100%;
			}

			.timeline-info > .inner {
				padding-top: 30px;
				float: none;
				text-align: left;
			}

			.text {
				font-size: 15px;
				line-height: 1.78;
			}

			.tm-animation-queue {
				.item.animate {
					&:nth-child(even) {
						.timeline-col {
							&.left {
								transform: translateX(100px);
							}
						}
					}

					&:nth-child(odd) {
						.timeline-col.right {
							transform: translateX(100px);
						}
					}
				}
			}
		}
	}
}