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

/* Container around content */
.event {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
  left: 50%;
}

.event:nth-child(even) {
	left: 0;
}

/* The circles on the timeline */
.event::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: white;
  border: 4px solid #ff6600;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}
.event:nth-child(even)::after {
	right: -17px;
}
.event:nth-child(odd)::after {
	left: -16px;
}

/* arrows */
.event:nth-child(even)::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	right: 30px;
	border: medium solid #4d4d4d;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #4d4d4d;
}
.event:nth-child(odd)::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid #4d4d4d;
	border-width: 10px 10px 10px 0;
	border-color: transparent #4d4d4d transparent transparent;
}

.event_content {
	padding: 20px 30px;
	background-color: white;
	position: relative;
	border-radius: 6px;
	border: 2px solid #4d4d4d;
	box-shadow: 5px 5px 5px #666666;
}

.event_date {
	font-size: 1em;
	float: right;
	color: #666;
}

@media only screen and (max-width: 768px) {
	/* display all events on the right*/
	.timeline::after {
		left: 41px;
	}
	.event {
		padding-left: 40px;
		padding-right: 25px;
		width: 100%;
		left: 0%;
	}
	.event:nth-child(even)::after {
		left: -12px;
	}
	.event:nth-child(odd)::after {
		left: -12px;
	}
	.event:nth-child(even)::before {
		left: 30px;
		border: medium solid #4d4d4d;
		border-width: 10px 10px 10px 0;
		border-color: transparent #4d4d4d transparent transparent;
	}
	#calendar_header {
		padding-left: 50px;
	}
}
@media only screen and (max-width: 375px) {
	.event_date {
		font-size: 0.8em;
	}
}