/*--------------------------------
 Timelines CSS
--------------------------------*/

.timeline {
	color: #a46497;
	padding: 40px 0;
}

.timeline a {
	color: #a46497;
}

.timeline a:hover {
	color: #71b02f;
}

ol.timeline-list {
	position: relative;
	display: block;
	margin: 3%;
	height: 4px;
	background: #a46497;
}

ol.timeline-list::before,
ol.timeline-list::after {
	content: "";
	position: absolute;
	top: -8px;
	display: block;
	width: 0;
	height: 0;
	border-radius: 10px;
	border: 10px solid #333;
}

ol.timeline-list::before {
	left: -5px;
}

ol.timeline-list::after {
	right: -10px;
	border: 10px solid transparent;
	border-right: 0;
	border-left: 20px solid #333;
	border-radius: 3px;
}

.timeline li {
	position: relative;
	top: -55px;
	display: inline-block;
	float: left;
	width: 56px;
	transform: rotate(-45deg);
	font: bold 14px arial;
}

.timeline li::before {
	content: "";
	position: absolute;
	top: 20px;
	left: -29px;
	display: block;
	width: 6px;
	height: 6px;
	border: 6px solid #a46497;
	border-radius: 10px;
	background: #333;
}

.timeline .details {
	display: none;
	position: absolute;
	left: -85px;
	top: 60px;
	padding: 15px;
	border-radius: 3px;
	border-right: 2px solid rgba(0,0,0,.1);
	border-bottom: 2px solid rgba(0,0,0,.1);
	transform: rotate(45deg);
	font: 12px arial;
	background: #333;
}

.timeline .details::before {
	content: "";
	position: absolute;
	left: 10px;
	top: -9px;
	display: block;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: #333;
	border-top: 0;
}

.timeline li:hover {
	cursor: pointer;
	color: #71b02f;
}

.timeline li:hover::before {
	top: 20px;
	left: -31px;
	width: 8px;
	height: 8px;
	border-width: 6px;
	border-color: #71b02f;
}

.timeline li:hover .details {
	display: block;
	color: #fff;
}

@media screen and (max-width: 750px) {
	.timeline {
		display: none;
	}
}