carpseeds.pl/wp-content/plugins/jet-elements/assets/scss/addons/_jet-timeline.scss

.jet-timeline {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	
	&-item {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
	}
	
	&__line {
		position: absolute;
		width: 2px;
		bottom: 0;
		top: 0;
		transform: translateX(-50%);
		left: 50%;
		overflow: hidden;
		
		&-progress {
			width: 100%;
			height: 20%;
		}
	}
	
	.timeline-item {
		&__card {
			position: relative;
			display: flex;
			flex-direction: column;
			
			&-inner{
				z-index: 1;
			}
			
			&-arrow {
				position: absolute;
				width: 20px;
				height: 20px;
			}

			&-btn-wrap {
				margin-top: 15px;
			}
		}
		
		&__meta {
			display: inline-block;
			
			&-content {
				display: inline-block;
			}
		}
		
		&__point {
			&-content {
				width: 40px;
				height: 40px;
				min-width: 10px;
				min-height: 10px;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	
	&--align-left {
		.timeline-item__point {
			flex-grow: 0;
			order: 0;
		}
		
		.timeline-item__card {
			flex-grow: 1;
			order: 1;
		}
		
		.jet-timeline__line {
			left: 0;
		}
		
		.timeline-item__card-arrow {
			left: 0;
			margin-left: -10px;
			border-top-width: 0!important;
			border-right-width: 0!important;
		}
		
		.timeline-item__meta:empty{
			display: none;
		}
		
		.jet-timeline-item {
			> .timeline-item__meta {
				display: none;
			}
		}
	}
	
	&--align-center {
		@media (min-width: 1025px) {
			.jet-timeline-item:nth-child(even) {
				flex-direction: row-reverse;
				
				.timeline-item__meta {
					text-align: right;
				}
				
				.timeline-item__card-arrow {
					left: 0;
					margin-left: -10px;
					border-top-width: 0!important;
					border-right-width: 0!important;
				}
			}
			
			.jet-timeline-item:nth-child(odd) {
				.timeline-item__meta {
					text-align: left;
				}
				
				.timeline-item__card-arrow {
					right: 0;
					margin-right: -10px;
					border-left-width: 0!important;
					border-bottom-width: 0!important;
				}
			}
			
			.timeline-item__meta {
				flex-grow: 1;
				flex-basis: 50%;
				max-width: 50%;
				order: 2;
			}
			
			.timeline-item__point {
				flex-shrink: 0;
				flex-grow: 0;
				order: 1;
			}
			
			.timeline-item__card {
				flex-grow: 1;
				flex-basis: 50%;
				max-width: 50%;
				order: 0;
			}
			
			.jet-timeline__line {
				left: 50%;
				margin: 0 !important;
			}
			
			.timeline-item__card-content {
				> .timeline-item__meta {
					display: none;
				}
			}
		}
		
		@media (max-width: 1024px) {
			.timeline-item__point {
				flex-grow: 0;
				order: 0;
				margin-left: 0 !important;
			}
			
			.timeline-item__card {
				flex-grow: 1;
				order: 1;
				margin-left: 10px;
			}
			
			.jet-timeline__line {
				left: 0;
			}
			
			.timeline-item__card-arrow {
				left: 0;
				margin-left: -10px;
				border-top-width: 0!important;
				border-right-width: 0!important;
			}
			
			.jet-timeline-item {
				> .timeline-item__meta {
					display: none;
				}
			}
		}
	}
	
	&--align-right {
		.timeline-item__point {
			flex-grow: 0;
			order: 1;
		}
		
		.timeline-item__card {
			flex-grow: 1;
			order: 0;
		}
		
		.jet-timeline__line {
			left: auto;
			right: 0;
		}
		
		.timeline-item__meta:empty{
			display: none;
		}
		
		.timeline-item__card-arrow {
			right: 0;
			margin-right: -10px;
			border-bottom-width: 0!important;
			border-left-width: 0!important;
		}
		
		.jet-timeline-item {
			> .timeline-item__meta {
				display: none;
			}
		}
	}
	
	&--align-top {
		.jet-timeline-item {
			align-items: flex-start;
		}
		
		.timeline-item__card-arrow {
			top: 0;
			transform: rotate(45deg);
		}
	}
	
	&--align-middle {
		.jet-timeline-item {
			align-items: center;
		}
		
		.timeline-item__card-arrow {
			top: 50%;
			transform: translateY(-50%) rotate(45deg);
		}
	}
	
	&--align-bottom {
		.jet-timeline-item {
			align-items: flex-end;
		}
		
		.timeline-item__card-arrow {
			bottom: 0;
			transform: rotate(45deg);
		}
	}
}

.jet-timeline-item--animated {
	.timeline-item{
		&__card {
			-webkit-animation-duration: 1s;
			animation-duration: 1s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			opacity: 0;
		}
	}
}

// Animations for timeline cards
.jet-timeline {
	&--align-left {
		.jet-timeline-item--animated {
			&.is--show {
				.timeline-item__card {
					@extend .card-animation-right;
				}
			}
		}
	}
	&--align-center {
		.jet-timeline-item--animated {
			&.is--show {
				&:nth-child(even) {
					.timeline-item__card {
						@extend .card-animation-right;
					}
				}
				&:nth-child(odd) {
					.timeline-item__card {
						@extend .card-animation-left;
					}
				}
			}
		}
	}
	&--align-right {
		.jet-timeline-item--animated {
			&.is--show {
				.timeline-item__card {
					@extend .card-animation-left;
				}
			}
		}
	}
}

@-webkit-keyframes card-animation-right {
	0% {
		opacity: 0;
		-webkit-transform: translateX(400px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@keyframes card-animation-right {
	0% {
		opacity: 0;
		transform: translateX(400px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.card-animation-right {
	-webkit-animation-name: card-animation-right;
	animation-name: card-animation-right;
}

@-webkit-keyframes card-animation-left {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-400px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@keyframes card-animation-left {
	0% {
		opacity: 0;
		transform: translateX(-400px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.card-animation-left {
	-webkit-animation-name: card-animation-left;
	animation-name: card-animation-left;
}