.eltdf-workflow {
	margin-top: 50px;
	position: relative;

	.main-line {
		background: #deebf5;
		left: 50%;
		margin-left: 0;
		position: absolute;
		right: 50%;
		top: 0;
		height: 100%;
		width: 1px;
	}

	.eltdf-workflow-item {
		margin-left: auto;
		margin-right: auto;
		max-width: 80%;
		position: relative;
		padding-bottom: 75px;
		overflow: hidden;

		&:nth-of-type(2n+1) {
			text-align: left;

			.eltdf-workflow-item-inner {
				.eltdf-workflow-image {
					text-align: right;
				}
                .eltdf-workflow-text {
                    p.text {
                        padding-right: 19%;
                    }
                }
			}
		}

		&:nth-of-type(2n) {
			text-align: right;

			.eltdf-workflow-item-inner {
				display: -webkit-box;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: reverse;
				-webkit-flex-direction: row-reverse;
				-ms-flex-direction: row-reverse;
				flex-direction: row-reverse;
				-webkit-flex-wrap: wrap;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;

				.eltdf-workflow-image {
					text-align: left;
				}

                .eltdf-workflow-text {
                    p.text {
                        padding-left: 19%;
                    }
                }
			}
		}

		.eltdf-workflow-item-inner {
			display: inline-block;
			position: relative;
			width: 100%;
			vertical-align: middle;

			.eltdf-workflow-image,
			.eltdf-workflow-text {
				float: left;
				margin: 0;
				width: 50%;
				box-sizing: border-box;
			}

			.eltdf-workflow-image {
				padding: 0 60px;
			}

			.eltdf-workflow-text {
				padding: 0 60px;

				h3 {
					margin-top: 0;
					margin-bottom: 2px;
				}

				span {
                    display: block;
                    font-family: $addition-text-font;
                    font-size: 21px;
                    color: $first-main-color;
                    font-weight: 400;
                    font-style: italic;
				}

				p.text {
					margin-top: 14px;
                    box-sizing: border-box;
				}

				.circle {
					background: #eaf1f4;
					border: 3px solid #eaf1f4;
					border-radius: 50%;
					content: "";
					height: 17px;
					left: 50%;
					margin: 0 0 0 -11px;
					position: absolute;
					top: 0;
					width: 17px;
					box-sizing: content-box;
				}
			}

		}

		.line {
			display: none;
			background-color: #fff;
			height: 100%;
			left: 50%;
			margin-left: 0;
			position: absolute;
			width: 1px;
		}

		&:first-of-type .line {
			display: block;
			top: 4px;
			transform: translateY(-100%);
		}

		&:last-of-type .line {
			display: block;
			top: 24px;
		}

	}

	&.eltdf-workflow-animate {
		@include eltdfTransform(translateY(100px));
		opacity: 0;
		-webkit-transition: opacity .55s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .55s cubic-bezier(0.23, 1, 0.32, 1);
		transition: opacity .55s cubic-bezier(0.23, 1, 0.32, 1), transform .55s cubic-bezier(0.23, 1, 0.32, 1);
		.main-line {
			opacity: 0;
			height: 0;
			@include eltdfTransition(opacity .55s cubic-bezier(0.23, 1, 0.32, 1), height 1.8s ease-out);
		}
		.circle {
			@include eltdfTransform(scale(.2));
			-webkit-transition: -webkit-transform .6s cubic-bezier(0.18, 0.89, 0.32, 0.98) .5s;
			transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 0.98) .5s;
		}
		.eltdf-workflow-item {
			.eltdf-workflow-item-inner {
				.eltdf-workflow-image {
					opacity: 0;
					@include eltdfTransform(scale(.6));
					-webkit-transition: -webkit-transform .6s cubic-bezier(0.18, 0.89, 0.32, 1), opacity .3s ease-out;
					transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1), opacity .3s ease-out;
				}
				.eltdf-workflow-text {
					h4, p {
						opacity: 0;
						@include eltdfTransition(opacity .5s cubic-bezier(0.22, 0.61, 0.36, 1) .2s);
					}
				}
			}
		}
		&.eltdf-appeared {
			@include eltdfTransform(translateY(0));
			opacity: 1;
			.main-line {
				opacity: 1;
				height: 100%;
			}
			.eltdf-workflow-item.eltdf-appeared {
				.eltdf-workflow-image {
					opacity: 1;
					@include eltdfTransform(scale(1));
				}
				.eltdf-workflow-text {
					h4, p {
						opacity: 1;
					}
				}

			}
			.circle {
				@include eltdfTransform(scale(1));
			}
		}
	}
}