$primary: #3F51B5;
$dark-primary: #303F9F;
$light-primary: #C5CAE9;
$text: #FFFFFF;
$primary-text: #212121;
$secondary-text: #757575;
$accent: #FF4081;


 .timeline {
	 position: relative;
}
 .timeline::before {
	 content: '';
	 background: #c5cae9;
	 width: 5px;
	 height: 100%;
	 position: absolute;
	 left: 50%;
	 transform: translateX(-50%);
}
 .timeline-item {
	 width: 100%;
	 margin-bottom: 70px;
}
 .timeline-item:nth-child(even) .timeline-content {
	 float: right;
	 padding: 40px 30px 10px 30px;
}
 .timeline-item:nth-child(even) .timeline-content .date {
	 right: auto;
	 left: 0;
}
 .timeline-item:nth-child(even) .timeline-content::after {
	 content: '';
	 position: absolute;
	 border-style: solid;
	 width: 0;
	 height: 0;
	 top: 30px;
	 left: -15px;
	 border-width: 10px 15px 10px 0;
	 border-color: transparent #fdfdfd transparent transparent;
}
 .timeline-item::after {
	 content: '';
	 display: block;
	 clear: both;
}
 .timeline-content {
	 position: relative;
	 width: 45%;
	 padding: 10px 30px;
	 border-radius: 4px;
	 background: #fdfdfd;
	 box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);
}
 .timeline-content::after {
	 content: '';
	 position: absolute;
	 border-style: solid;
	 width: 0;
	 height: 0;
	 top: 30px;
	 right: -15px;
	 border-width: 10px 0 10px 15px;
	 border-color: transparent transparent transparent #f5f5f5;
}
 .timeline-img {
	 width: 30px;
	 height: 30px;
	 background: #4389a2;
	 border-radius: 50%;
	 position: absolute;
	 left: 50%;
	 margin-top: 25px;
	 margin-left: -15px;
}

 .timeline-card {
	 padding: 0 !important;
}
 .timeline-card p {
	 padding: 0 20px;
}
 .timeline-card a {
	 margin-left: 5px;
}
 .timeline-item .timeline-img-header {
	 background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)), url('https://picsum.photos/1000/800/?random') center center no-repeat;
	 background-size: cover;
}
 .timeline-img-header {
	 height: 200px;
	 position: relative;
	 margin-bottom: 20px;
}
 .timeline-img-header h2 {
	 color: #fff;
	 position: absolute;
	 bottom: 5px;
	 left: 20px;
}
 blockquote {
	 margin-top: 30px;
	 color: #757575;
	 border-left-color: #3f51b5;
	 padding: 0 20px;
}
 .date {
	 background: #7b3181;
	 display: inline-block;
	 color: #fff;
	 padding: 10px;
	 position: absolute;
	 top: 0;
	 right: 0;
}
 @media screen and (max-width: 768px) {
	 .timeline::before {
		 left: 50px;
	}
	 .timeline .timeline-img {
		 left: 50px;
	}
	 .timeline .timeline-content {
		 max-width: 100%;
		 width: auto;
		 margin-left: 70px;
	}
	 .timeline .timeline-item:nth-child(even) .timeline-content {
		 float: none;
	}
	 .timeline .timeline-item:nth-child(odd) .timeline-content::after {
		 content: '';
		 position: absolute;
		 border-style: solid;
		 width: 0;
		 height: 0;
		 top: 30px;
		 left: -15px;
		 border-width: 10px 15px 10px 0;
		 border-color: transparent #f5f5f5 transparent transparent;
	}
}