.timeline--container {
	padding: 60px 30px;
}

.timeline--sm-title,
.timeline--lg-title {
	text-align: center;
}

.timeline--dot {
	position: relative;
	width: 40px;
	height: 40px;
	margin: 0 auto 10px;
	background: var(--theme-green);
	border-radius: 50%;
}

.timeline--dot:after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	background: var(--theme-blue-dark);
	top: 11px;
	left: 11px;
	border-radius: 50%;
}

.timeline--line {
	font-size: 5px;
	height: 3em;
	width: 0;
	border-left: 1em dotted #ccc;
	margin: 0 auto 10px;
}

.timeline--copy-wrap {
	border: 2px solid var(--theme-green);
	border-radius: var(--theme-general-border-radius);
	padding: 15px 15px 1px 15px;
	margin-bottom: 10px;
	position: relative;
}

.timeline--headline {
	margin-bottom: 10px;
}

.timeline--copy-wrap:after,
.timeline--copy-wrap:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	font-size: 20px;
}

@media (max-width: 991px) {
	.timeline--step:last-child .timeline--line.bottom-mod {
		display: none;
	}
	
	.timeline--copy-wrap {
		margin-bottom: 25px;
	}
	
	.timeline--copy-wrap:before {
		bottom: -1em;
		left: 50%;
		border-width: 1em 1.2em 0 1.2em;
		margin-left: -1.2em;
		border-color: var(--theme-green) transparent transparent transparent;
	}

	.timeline--copy-wrap:after {
		bottom: calc(-1em + 3px);
		left: 50%;
		border-width: 1em 1.2em 0 1.2em;
		margin-left: -1.2em;
		border-color: #fff transparent transparent transparent;
	}
}

@media (min-width: 992px) {
	
	.timeline--step {
		display: flex;
		width: calc(50% + 20px);
		margin-top: -30px;
		margin-bottom: -30px;
	}
	
	.timeline--dot {
		align-self: center;
		margin: 10px auto;
	}
	
	.timeline--step:nth-child(even) {
		margin-left: auto;
	}
	
	.timeline--step:nth-child(odd) .timeline--copy-wrap {
		order: 1;
	}

	.timeline--step:nth-child(odd) .timeline--dot {
		order: 2;
		margin-right: 0;
	}

	.timeline--step:nth-child(even) .timeline--dot {
		margin-left: 0;
	}

	.timeline--step .timeline--line {
		display: none;
	}
	
	.timeline--copy-wrap {
		width: calc(100% - 100px);
		padding: 25px 25px 10px;
		margin-bottom: 0;
	}
	
	.timeline--step:nth-child(odd) .timeline--copy-wrap:before {
		top: calc(50% - 1.2em);
		right: -1em;
		margin-left: -1.2em;
		border-width: 1.2em 0 1.2em 1em;
		border-color: transparent transparent transparent var(--theme-green);
	}

	.timeline--step:nth-child(odd) .timeline--copy-wrap:after {
		top: calc(50% - 1.2em);
		right: calc(-1em + 3px);
		margin-left: -1.2em;
		border-width: 1.2em 0 1.2em 1em;
		border-color: transparent transparent transparent #fff;
	}	

	.timeline--step:nth-child(even) .timeline--copy-wrap:before {
		top: calc(50% - 1.2em);
		left: -1em;
		margin-right: -1.2em;
		border-width: 1.2em 1em 1.2em 0;
		border-color: transparent var(--theme-green) transparent transparent;
	}

	.timeline--step:nth-child(even) .timeline--copy-wrap:after {
		top: calc(50% - 1.2em);
		left: calc(-1em + 3px);
		margin-right: -1.2em;
		border-width: 1.2em 1em 1.2em 0;
		border-color: transparent #fff transparent transparent;
	}

	.timeline--steps {
		position: relative;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	.timeline--steps:before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - 2px);
		width: 0;
		border-left: 5px dotted #ccc;
	}
	
	.timeline--step:last-child,
	.timeline--step:first-child {
		overflow: hidden;
	}
	
	.timeline--step:last-child .timeline--dot:before,
	.timeline--step:first-child .timeline--dot:before {
		content: "";
		position: absolute;
		left: 17px;
		height: 1000px;
		width: 6px;
		background: #fff;
	}
	
	.timeline--step:first-child .timeline--dot:before {
		top: -1000px;
	}

	.timeline--step:last-child .timeline--dot:before {
		bottom: -1000px;
	}
	
	.timeline--section:not(.white-bg-mod) 	.timeline--step:first-child .timeline--dot:before,
	.timeline--section:not(.white-bg-mod) 	.timeline--step:last-child .timeline--dot:before {
		background: transparent;
	}
}

.timeline--section-copy {
	max-width: 900px;
	margin: 0 auto 30px;
}