#siteTitle.events {
	background: url('../img/title_chronicle.jpg') center / cover no-repeat;
}
#timeline {
  position: relative; margin: 0 auto; padding: 1em 0;
	font-size: .9rem;
	border-top: 5px solid #aaf;
}
/* vertical line */
#timeline:after {
	position: absolute; top: 0; bottom: 0; left: 5%;
	margin-left: -.25em; width: .5em;
	content: '';
	background-image: linear-gradient(to bottom, #aaf, #ccc);
}

.event-container {position: relative; padding: .5em 0; width: 100%;}

.event-circle {
	position: absolute; top: 50%; left: 5%; margin: -.5em 0 0 -.5em;
	width: .5em; height: .5em; z-index: 2;
	background: #fff;
	border: .25em solid #55f; border-radius: 50%;
}
.event-arrow {
	position: absolute; top: 50%; left: 12.5%;
	margin-top: -10px; margin-left: -13px; width: 0; height: 0;
	border: medium solid #fff; border-width: 10px 10px 10px 0;
	border-color: transparent #ddd transparent transparent;
}
.event-content {
	position: relative; margin-left: 12.5%; width: 82.5%;
	background: rgba(255, 255, 255, .3);
	outline: 3px solid #ddd;
	transition: all ease 1s;
}
.event-content:focus,
.event-content:hover,
.event-content:active {
	background-color: rgba(255, 255, 255, .8);
	transition: all ease .2s;
}
.event-content p {padding: .25em .5em;}
.event-content p:first-child {padding: .5em .5em .25em;}
.event-content p:last-child {padding: .25em .5em .5em;}

.event-content p.event-place a:after {font-family: FontAwesome; content: ' \f278';}

/*	breakpoints ------------------------------------------------------------- */
/* global breakpoints min-width: sm = 35.5em, md = 48em, lg = 64em, xl = 80em */
@media only screen and (min-width: 35.5em) {
	/* vertical line */
	#timeline:after {left: 50%; content: '';}

	.event-circle {left: 50%;}
	.event-container {padding: 0;}
	.event-container:nth-of-type(odd) .event-arrow {
		left: 46%; margin-left: 3px;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #ddd;
	}
	.event-container:nth-of-type(even) .event-arrow {
		left: 54%;
		border-width: 10px 10px 10px 0;
		border-color: transparent #ddd transparent transparent;
	}
	.event-container:nth-of-type(odd) .event-content {
		margin-left: 2%; width: 44%; text-align: right;
	}
	.event-container:nth-of-type(even) .event-content {
		margin-left: 54%; width: 44%;
	}
}
@media only screen and (min-width: 64em) {
	.event-container:nth-of-type(odd) .event-arrow {
		left: 475px; margin-left: 3px;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #ddd;
	}
	.event-container:nth-of-type(even) .event-arrow {
		left: 525px;
		border-width: 10px 10px 10px 0;
		border-color: transparent #ddd transparent transparent;
	}
	.event-container:nth-of-type(odd) .event-content {
		margin-left: 7px; width: 465px; text-align: right;
		outline: none; border: 3px solid #ddd; border-radius: 5px;
	}
	.event-container:nth-of-type(even) .event-content {
		margin-left: 522px; width: 465px;
		outline: none; border: 3px solid #ddd; border-radius: 5px;
	}
}