Your IP : 216.73.216.95

Current Path : /var/www/mainsite/wp-content/themes/maxcoach/assets/scss/elementor/widgets/
Upload File :
Current File : /var/www/mainsite/wp-content/themes/maxcoach/assets/scss/elementor/widgets/_timeline.scss

.maxcoach-timeline {
	&.style-01 {
		position: relative;

		.timeline-line {
			position: absolute;
			left: 50%;
			margin-left: -1px;
			height: 100%;
			border-left: 2px solid #e2e2e8;
		}

		.timeline-list {
			padding: 44px 0 47px;
		}

		.timeline-item {
			@extend %clearfix;
			position: relative;

			+ .timeline-item {
				margin-top: 87px;
			}

			&:nth-child(even) {
				.content-wrap {
					flex-direction: row-reverse;
				}

				.content-header {
					text-align: left;
					justify-content: flex-end;
				}

				.content-main {
					text-align: right;
					justify-content: flex-start;
				}
			}
		}

		.timeline-dot {
			position: absolute;
			top: 2px;
			left: 50%;
			transform: translateX(-50%);
			width: 30px;
			height: 30px;
			border-radius: 50%;

			&:before,
			&:after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border: 1px solid currentColor;
				border-radius: 50%;
			}

			&:before {
				width: 30px;
				height: 30px;
				opacity: .3;
			}

			&:after {
				width: 13px;
				height: 13px;
				border-width: 3px;
				background: #fff;
			}
		}

		.content-wrap {
			display: flex;
			align-items: center;
			margin-left: -30px;
			margin-right: -30px;
		}

		.image {
			img {
				border-radius: 5px;
			}
		}

		.content-header,
		.content-main {
			display: flex;
			width: 50%;
			padding: 0 30px;
		}

		.content-header {
			text-align: right;
			justify-self: flex-start;
		}

		.content-main {
			text-align: left;
			justify-content: flex-end;

			font-size: 18px;
			line-height: 2;

			h4 {
				font-size: 24px;
				margin-bottom: 22px;
			}
		}

		.content-inner {
			max-width: 500px;
		}

		.title {
			font-size: 24px;
			text-transform: uppercase;
			letter-spacing: 3px;
			margin-bottom: 56px;
		}

		.text {
			margin-bottom: 25px;
		}

		.timeline-date {
			font-size: 50px;
			line-height: 1;
			color: #ababab;
			margin: 0 0 30px;

			> div {
				display: inline-block;
			}
		}
	}
}

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

			.timeline-item {
				padding-left: 50px;

				+ .timeline-item {
					margin-top: 40px;
				}
			}

			.timeline-dot {
				left: 0;
				transform: none;
			}

			.content-wrap {
				display: block;
			}

			.content-header,
			.content-main {
				display: block;
				width: 100%;
				text-align: left !important;
			}

			.content-header {
				margin-bottom: 40px;
			}

			.title {
				margin-bottom: 30px;
			}
		}
	}
}

body:not(.elementor-editor-active) {
	.maxcoach-timeline {
		.maxcoach-entrance-animation-queue {
			.item {
				.content-header,
				.content-main {
					opacity: 0;
				}

				.content-header {
					transform: translateX(-100px);
				}

				.content-main {
					transform: translateX(100px);
				}

				&:nth-child(even) {
					.content-header {
						transform: translateX(100px);
					}

					.content-main {
						transform: translateX(-100px);
					}
				}

				&.animate {
					.content-header,
					.content-main {
						opacity: 1;
						animation: moveHorizontal 0.65s ease forwards;
					}
				}
			}
		}
	}
}

@include elementor-breakpoint-down(sm) {
	body:not(.elementor-editor-active) {
		.maxcoach-timeline {
			.maxcoach-entrance-animation-queue {
				.item {
					.content-header,
					.content-main {
						transform: translateX(50px);
					}

					&:nth-child(even) {
						.content-header,
						.content-main {
							transform: translateX(50px);
						}
					}
				}
			}
		}
	}
}