.timeline-content{
	display: flex;
	flex-direction: column;
	max-width: 900px;
	margin: auto;
	justify-content: center;
	align-items: center;
	position: relative;
}

.timeline-item {
	display: flex;
	align-items: start;
}

.timeline-item-description{
	display: flex;
	justify-content: center;
	align-items: start;
}







/* VERTICAL VERSION OF TIMELINE*/
.vertical .timeline-item h5{
	max-width: 450px;
	min-width: 450px;
	width:100%;
	position: relative;
}

.vertical .item-description{
	max-width: 450px;
	min-width: 450px;
	width:100%;
	position: relative;
}

.vertical .item-description p{
	margin-top: -10px !important;
}


.vertical .separator{
	width: 1px;
	height: 150px;
	border-left: 1px dotted #0F6FB7;
	position: relative;
}

.vertical .separator::before{
	position: absolute;
	content: '';
	width: 20px;
	height: 20px;
	background: #0F6FB7;
	border-radius: 100%;
	top: -10px;
	left: -10px;
	margin: auto;
	z-index: 9;
}








/* 1, 3, 5, 7... */
.vertical .timeline-item:nth-child(odd) .item-description p{
	margin: 0;
	padding-left: 125px;
}

.vertical .timeline-item:nth-child(odd)  .item-description::before{
	position: absolute;
	content: '';
	width:85px;
	height:1px;
	top: 0;
	left: 0;
	border-top:1px dotted #0F6FB7;
}

.vertical .timeline-item:nth-child(odd) .item-description::after{
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	background: #0F6FB7;
	border-radius: 100%;
	left: 80px;
	top: -5px;
}

.vertical .timeline-item:nth-child(odd)  h5{
	margin-top: -10px !important;
	text-align: right;
	padding-right: 35px !important;
}




/* 2, 4, 6, 8... */
.vertical .timeline-item:nth-child(even),
.vertical .timeline-item:nth-child(even) .timeline-item-description{
	flex-direction: row-reverse;
}

.vertical .timeline-item:nth-child(even) .item-description p{
	padding-left: 0;
	padding-right: 125px;
	text-align: right;
}

.vertical .timeline-item:nth-child(even) h5{
	margin-top: -10px !important;
    	text-align: left;
    	padding-left: 35px !important;
}



/*Small circle*/
.vertical .timeline-item:nth-child(even) .item-description::before{
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	background: #0F6FB7;
	border-radius: 100%;
	right: 80px;
	top: -5px;
	margin-left: auto;
	margin-right:0;
}

/*Dotted line */
.vertical .timeline-item:nth-child(even) .item-description::after{
	position: absolute;
	content: '';
	width:85px;
	height:1px;
	top: 0;
	right: 0;
	left: unset;
	border-top:1px dotted #0F6FB7;
}


/* Vertical timeline - before element */
.timeline-content.vertical{
	margin-top: 30px;
}


.timeline-content.vertical::before{
	height: 50px;
	position: absolute;
	content: '';
	width: 1px;
	top: -50px;
	border-left: 1px dotted #0F6FB7;
}

.timeline-content.vertical::after{
	position: absolute;
	content: '';
	width: 6px;
	height: 6px;
	top: -55px;
	background: #0F6FB7;
	border-radius: 50px;
}



















/* HORIZONTAL VERSION OF TIMELINE */
.timeline-content.horizontal{
	flex-direction: row;
	max-width:100%;
	align-items: start;
	padding-top:80px;
	border-top: 1px dotted #0F6FB7;
	position: relative;
}

.timeline-content.horizontal .timeline-item{
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	flex: 1 1 0px;
	padding:0 30px;
	position: relative;
}


.timeline-content.horizontal .timeline-item:first-child{
	padding-left:0;
}

.timeline-content.horizontal .timeline-item:last-child{
	padding-right: 0;
}



/* Two small dots at the top of timeline section - left and right */
.timeline-content.horizontal:before{
	position: absolute;
	content: '';
	width: 6px;
	height: 6px;
	background: #0F6FB7;
	border-radius: 50px;
	top: -3px;
	left: 0;
}

.timeline-content.horizontal:after{
	position: absolute;
	content: '';
	width: 6px;
	height: 6px;
	background: #0F6FB7;
	border-radius: 50px;
	top: -3px;
	right: 0;
}


/* Blue dot for every timeline item*/
.timeline-content.horizontal .timeline-item::before{
	position: absolute;
	content: '';
	top: -90px;
	width: 20px;
	height: 20px;
	background: #0F6FB7;
	border-radius: 50px;
}













@media only screen and (max-width:992px){
	/* VERTICAL TIMELINE - MOBILE VER */
	.timeline-content.vertical{
		max-width: 100%;
	}

	.timeline-content.vertical .item-description,
	.timeline-content.vertical .timeline-item h5,
	.vertical .item-description p{
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		text-align: center !important;
	}

	.vertical .timeline-item:nth-child(even), .vertical .timeline-item:nth-child(even) .timeline-item-description,
	.vertical .timeline-item{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}


	.vertical .timeline-item:nth-child(odd) .item-description::before,
	.vertical .timeline-item:nth-child(odd) .item-description::after,
	.vertical .timeline-item:nth-child(even) .item-description::before,
	.vertical .timeline-item:nth-child(even) .item-description::after,
	.timeline-content.vertical::after,
	.timeline-content.vertical::before{
		position: relative !important;
		content: unset;
	}


	/*Separator*/
	.timeline-item{
		margin:20px 0 0;
	}
	.timeline-item .timeline-item-description{
		align-items: center;
		flex-direction: column-reverse;
	}

	.timeline-item .timeline-item-description .separator{
		margin: 20px 0 0;
		height: 50px;
	}

	.vertical .timeline-item .separator:before{
		width: 10px;
		height: 10px;
		top: -5px;
		left: -5px;
	}

	.vertical .timeline-item:nth-child(even) .timeline-item-description{
		flex-direction: column-reverse !important;
	}

	.timeline-section .timeline-content.vertical{
		margin-top: 0;
	}





	/* HORIZONTAL TIMELINE - MOBILE VER */
	.timeline-content.horizontal:before,
	.timeline-content.horizontal:after{
		position: relative !important;
		content: unset;
	}

	.timeline-content.horizontal{
		border: none;
		flex-direction: column;
		padding-top: 0;
	}

	.timeline-content.horizontal .timeline-item{
		padding:0;
		width:100%;
	}


	.timeline-content.horizontal .timeline-item::before{
		top:-30px;
	}
}