

.white-text {
	color: #ffffff;
}



.timeline h1 {
	font-family: 'Quicksand', sans-serif;
	color: #ffffff;
	font-size: 25px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 300;

}

.timeline h2 {
	font-family: 'Chivo', sans-serif;
	color: #232020;
	font-size: 30px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 300;
}

.timeline h3 {
	font-family: 'Chivo', sans-serif;
	color: #232020;
	font-size: 20px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 600;

}



.timeline ul li .time h4 {
	font-family: 'Chivo', sans-serif;
	color: #000;
	font-size: 30px;
	font-weight: 300;
	margin: 0;
	padding: 0;



}

.timeline p {
	font-family: 'Chivo', sans-serif;
	color: #fff;
	font-size: 18px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 300;

}

body {
	margin: 0;
	padding: 0;
}

.timeline:before {
	content: '';
	position: absolute;
	left: 50%;
	width: 1px;
	height: 100%;
	background: #232020;
}


.timeline {
	position: relative;
	margin: 50px auto;
	padding: 40px 0;
	width: 1300px;
	box-sizing: border-box;
}

.timeline ul{
	margin: 0;
	padding: 0;	
}

.timeline ul li{
	
	list-style: none;
	position: relative;
	width: 50%;
	padding: 20px 100px;
	box-sizing: border-box;
}

.timeline ul li:nth-child(odd){	
	float: left;
	text-align: right;
	clear: both;
}
.timeline ul li:nth-child(even){	
	float: right;
	text-align: left;
	clear: both;
}

.content {
	padding-bottom: 20px;
	
}

.content-image {
	background-color: red;
	width: 100%;
	height: 250px;
}
.content-image img {
	
	width: 100%;
	height: 250px;
}

.content-header {
	display: flex;
	height: 65px;
	align-items: center;

}

.content-title {
	display: flex;
	align-items: center;
	background-color: #232020;
	width: 82%;
	height: 100%;
	justify-content: center;
	color: #ffffff;
}

.content-icon {
	display: flex;
	align-items: center;
	/*background-color: #5c0001;*/
	width: 18%;
	height: 100%;
	justify-content: center;
	font-size: 40px;
	color: #ffffff;
}

.content-info {
	background-color: #232020;
	padding: 20px;

}

.timeline ul li:nth-child(odd):before{	
	content: '';
	position: absolute;
	top:24px;
	right: -6px;
	width: 10px;
	height: 10px;
	background: rgba(207,92,54,1);
	border-radius: 50%;
	box-shadow:  0 0 0 5px rgba(207,92,54,1);
}

.timeline ul li:nth-child(even):before{	
	content: '';
	position: absolute;
	top:24px;
	left: -4px;
	width: 10px;
	height: 10px;
	background: rgba(207,92,54,1);
	border-radius: 50%;
	box-shadow:  0 0 0 5px rgba(207,92,54,1);
}	

.timeline ul li h3 {
	margin: 0;
	padding: 0;
	font-weight: 600;
	color: rgb(255,255,255,1);

}

.timeline ul li p {
	margin: 0 0 0;
	padding: 0;

}

.timeline .time:nth-child(odd):after  {
	 content: '';
    width: 50px;
    border-bottom: dotted; 1px #000;
    position: absolute;
    left: -70px;
    top: 50%;
    z-index: 1;
}

.timeline .time:nth-child(even):after{
	 content: '';
    width: 50px;
    border-bottom: dotted; 1px #000;
    position: absolute;
    right: -70px;
    top: 50%;
    z-index: 1;
}


.timeline ul li:nth-child(odd) .time {
	position: absolute;
	top: 3px;
	right: -150px;
	margin: 0;
	/*padding-bottom: 8px 16px;*/
	padding: 5px;
	/*background: rgba(119,33,99,1);*/
	/*color: white;*/
	/*border-radius: 18px;*/
	/*box-shadow:  0 0 0 5px rgba(119,33,99,0.3);*/
}

.timeline ul li:nth-child(even) .time {
	position: absolute;
	top: 3px;
	left: -170px;
	margin: 0;
	padding-bottom: 8px 16px;
	padding: 5px;
	/*background: rgba(119,33,99,1);*/
	/*color: white;*/
	/*border-radius: 18px;*/
	/*box-shadow:  0 0 0 5px rgba(119,33,99,0.3);*/
}



@media (max-width: 1000px){

	.timeline {
		width: 100%;
	}

}

@media (max-width: 767px){

	.timeline {
		width: 100%;
	}

	.timeline:before {
		left: 20px;
	}

	.timeline ul li:nth-child(odd),
	.timeline ul li:nth-child(even){	
		width: 100%;
		text-align: left;
		padding-left: 50px;
		padding-bottom: 50px;
	}

	.timeline ul li:nth-child(odd):before,
	.timeline ul li:nth-child(even):before{	
		top:-18px;
		left: 16px;
	}

	.timeline ul li:nth-child(odd) .time,
	.timeline ul li:nth-child(even) .time{
		top:-25px;
		left: 50px;
		right: inherit;
	}



}









