#timeline-wrap { }	 
 
/* The actual timeline (the vertical ruler) */
#timeline-wrap .timeline { position: relative; margin: 0 -22px 0 -22px; font-size: .9rem; }

/* The actual timeline (the vertical ruler) */
#timeline-wrap .timeline::after { content: ''; position: absolute; width: 4px; background-color: #ccc; top: 0; bottom: 0; left: 50%; margin-left: -3px; }

/* Container around content */
#timeline-wrap .container-time { padding: 10px 25px; position: relative; background-color: inherit; width: 50%; }

/* The circles on the timeline */
#timeline-wrap .container-time::after { content: ''; position: absolute; width: 23px; height: 23px; right: -10px;		
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#848484+0,000000+100,131313+100 */
background: #848484; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #848484 0%, #000000 100%, #131313 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #848484 0%,#000000 100%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #848484 0%,#000000 100%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#848484', endColorstr='#131313',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 1px solid #000; top: 15px; border-radius: 50%; z-index: 1; }

/* Place the container to the left */
#timeline-wrap .left { left: 0; }

/* Place the container to the right */
#timeline-wrap .right { left: 50%; }

/* Add arrows to the left container (pointing right) */
#timeline-wrap .left::before { content: " ";  height: 0; position: absolute; top: 16px;  width: 0; z-index: 1; right: 15px; border: medium solid #ccc; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #ccc; }

/* Add arrows to the right container (pointing left) */
#timeline-wrap .right::before { content: " "; height: 0; position: absolute; top: 18px; width: 0; z-index: 1; left: 15px; border: medium solid #ccc; border-width: 10px 10px 10px 0; border-color: transparent #ccc transparent transparent; }

/* Fix the circle for containers on the right side */
#timeline-wrap .right::after { left: -13px; }

/* The actual content */
#timeline-wrap .content { padding: 1px 16px 5px 18px;
background: rgb(252,243,221); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,243,221,1) 15%, rgba(224,198,136,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,243,221,1) 15%,rgba(224,198,136,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,243,221,1) 15%,rgba(224,198,136,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf3dd', endColorstr='#e0c688',GradientType=0 ); /* IE6-9 */;
position: relative; border-radius: 6px; }

#timeline-wrap .content h2 { color:#3b3d84; margin-top: 1.0rem; }	
		
#timeline-wrap .content-b { padding: 1px 16px 5px 18px;
background: rgb(59,61,132); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(59,61,132,1) 0%, rgba(10,8,38,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(59,61,132,1) 0%,rgba(10,8,38,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(59,61,132,1) 0%,rgba(10,8,38,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3d84', endColorstr='#0a0826',GradientType=0 ); /* IE6-9 */
position: relative; border-radius: 6px; color: #ffffff; }	
	
#timeline-wrap .content-b h2 { color:#E9DEB0; margin-top: 1.0rem; }
	
#timeline-wrap .timeline ul { margin-left: -18px; margin-top: -8px; } 		
	

/* Media queries - Responsive timeline on screens less than 600px wide */
	
@media screen and (max-width: 600px) {
	
/* Place the timelime to the left */
#timeline-wrap .timeline::after { width: 4px; left: 31px; }
	 
/* Full-width containers */
#timeline-wrap .container-time { width: 100%; padding-left: 55px; padding-right: 25px; }	
	
/* Make sure that all arrows are pointing leftwards */
#timeline-wrap .container-time::before { left: 45px; border: medium solid #ccc; border-width: 10px 10px 10px 0; border-color: transparent #ccc transparent transparent; top: 16px; }
	
/* The circles on the timeline */
#timeline-wrap .container-time::after { width: 20px; height: 20px; border: 1px solid #000; top: 16px; }		

/* Make sure all circles are at the same spot */
#timeline-wrap .left::after, #timeline-wrap .right::after { left: 20px; }
  
/* Make all right containers behave like the left ones */
#timeline-wrap .right { left: 0%; }
	
#timeline-wrap .timeline ul { margin-left: -20px; } 		
	
	}