/*==================================
    TIMELINE
==================================*/
/*-- GENERAL STYLES
------------------------------*/
.timeline {
	line-height: 1.4em;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
	line-height: inherit;
}

/*----- TIMELINE ITEM -----*/
.timeline-item {
	padding-left: 40px;
	position: relative;
}
.timeline-item:last-child {
	padding-bottom: 0;
}

.timeline-item p {
	margin-bottom: 0;
}

.timeline-image {
	width: 100%;
	text-align: left;
	padding-top: 5px;
}
.timeline-image-desktop {
	display: none;
}
/*----- TIMELINE INFO -----*/
.timeline-info {
	font-weight: 700;
	letter-spacing: 3px;
	margin: 0 0 .5em 0;
	font-family: 'Cabin', sans-serif;
	font-size: 14px;
	color: #333;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.timeline-title {
  	font-family: 'Cabin', sans-serif;
	font-size: 20px;
	color: #666;
	font-style: normal;
	font-weight: 700;
	text-align: left;
}

/*----- TIMELINE MARKER -----*/
.timeline-marker {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 15px;
}
.timeline-marker:before {
	background: #808285;
	border: 3px solid transparent;
	border-radius: 100%;
	content: "";
	display: block;
	height: 15px;
	position: absolute;
	top: 4px;
	left: 0;
	width: 15px;
	transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
.timeline-marker:after {
	content: "";
	width: 3px;
	background: #808285;
	display: block;
	position: absolute;
	top: 24px;
	bottom: 0;
	left: 6px;
}
.timeline-item:last-child .timeline-marker:after {
  	content: none;
}

.timeline-item:not(.period):hover .timeline-marker:before {
	background: transparent;
	border: 3px solid #808285;
}

/*----- TIMELINE CONTENT -----*/
.timeline-content {
	padding-bottom: 40px;
	font-family: 'Cabin', sans-serif;
	font-size: 12px;
	color: #808285;
	font-style: normal;
	font-weight: normal;
	text-align: left;
}
.timeline-content p:last-child {
	margin-bottom: 0;
}

/*----- TIMELINE PERIOD -----*/
.period {
  	padding: 0;
}
.period .timeline-info {
  	display: none;
}
.period .timeline-marker:before {
	background: transparent;
	content: "";
	width: 15px;
	height: auto;
	border: none;
	border-radius: 0;
	top: 0;
	bottom: 30px;
	position: absolute;
	border-top: 3px solid #808285;
	border-bottom: 3px solid #808285;
}
.period .timeline-marker:after {
	content: "";
	height: 32px;
	top: auto;
}
.period .timeline-content {
  	padding: 40px 0 70px;
}
.period .timeline-title {
  	margin: 0;
}

/*----------------------------------------------
    MOD: TIMELINE SPLIT
----------------------------------------------*/
@media (min-width: 768px) {
	.timeline-split .timeline, .timeline-centered .timeline {
		display: table;
	}
	.timeline-split .timeline-item, .timeline-centered .timeline-item {
		display: table-row;
		padding: 0;
	}
	.timeline-split .timeline-info, .timeline-centered .timeline-info,
	.timeline-split .timeline-marker,
	.timeline-centered .timeline-marker,
	.timeline-split .timeline-content,
	.timeline-centered .timeline-content,
	.timeline-split .period .timeline-info,
	.timeline-centered .period .timeline-info {
		display: table-cell;
		vertical-align: top;
	}
	.timeline-split .timeline-marker, .timeline-centered .timeline-marker {
		position: relative;
	}
	.timeline-split .timeline-content, .timeline-centered .timeline-content {
		padding-left: 30px;
	}
	.timeline-split .timeline-info, .timeline-centered .timeline-info {
		padding-right: 30px;
	}
	.timeline-split .period .timeline-title, .timeline-centered .period .timeline-title {
		position: relative;
		left: -45px;
	}
	.timeline-image {
		width: 50%;
		text-align: left;
	}

	.timeline-info {
		text-align: right;
	}
	
}

/*----------------------------------------------
    MOD: TIMELINE CENTERED
----------------------------------------------*/
@media (min-width: 992px) {
	.timeline-centered,
	.timeline-centered .timeline-item,
	.timeline-centered .timeline-info,
	.timeline-centered .timeline-marker,
	.timeline-centered .timeline-content {
		display: block;
		margin: 0;
		padding: 0;
	}
	.timeline-centered .timeline-item {
		padding-bottom: 40px;
		overflow: hidden;
	}
	.timeline-centered .timeline-marker {
		position: absolute;
		left: 50%;
		margin-left: -7.5px;
	}
	.timeline-centered .timeline-info,
	.timeline-centered .timeline-content {
		width: 50%;
	}
	/*.timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
		float: left;
		text-align: right;
		padding-right: 30px;
	}
	.timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
		float: right;
		text-align: left;
		padding-left: 30px;
	}
	.timeline-centered > .timeline-item:nth-child(even) .timeline-info {
		float: right;
		text-align: left;
		padding-left: 30px;
	}
	.timeline-centered > .timeline-item:nth-child(even) .timeline-content {
		float: left;
		text-align: right;
		padding-right: 30px;
	}*/
	.timeline-centered > .timeline-item .timeline-info {
		float: left;
		text-align: right;
		padding-right: 30px;
	}
	.timeline-centered > .timeline-item .timeline-content {
		float: right;
		text-align: left;
		padding-left: 30px;
	}


	.timeline-centered > .timeline-item.period .timeline-content {
		float: none;
		padding: 0;
		width: 100%;
		text-align: center;
	}
	.timeline-centered .timeline-item.period {
		padding: 50px 0 90px;
	}
	.timeline-centered .period .timeline-marker:after {
		height: 30px;
		bottom: 0;
		top: auto;
	}
	.timeline-centered .period .timeline-title {
		left: auto;
	}
	.timeline-image {
		width: 50%;
		text-align: right;
		float: right;
		padding-top: 0px;
	}
	.timeline-image-desktop {
		display: block;
	}
	.timeline-image-mobile {
		display: none;
	}
}

/*----------------------------------------------
    MOD: MARKER OUTLINE
----------------------------------------------*/
.marker-outline .timeline-marker:before {
	background: transparent;
	border-color: #808285;
}
.marker-outline .timeline-item:hover .timeline-marker:before {
  	background: #808285;
}