@charset "utf-8";
h2 {
	margin: 3em 0 0 0;
	font-size: 1.5em;
	letter-spacing: 2px;
	text-transform: uppercase;
}
/* -------------------------------------
 * timeline
 * ------------------------------------- */
#timeline {
	list-style: none;
	margin: 50px 0 30px 120px;
	padding-left: 30px;
	padding-bottom: 30px;
	border-left: 8px solid #eee9dc;
}
#timeline li {
	margin: 40px 0;
	position: relative;
}
#timeline p { margin: 0 0 15px; }
.date {
	margin-top: -10px;
	top: 50%;
	left: -158px;
	font-size: 1.5rem;
	line-height: 20px;
	position: absolute;
}
.ccl {
	margin-top: -10px;
	top: 50%;
	left: -46px;
	width: 25px;
	height: 25px;
	background: #48b379;
	border: 5px solid #eee9dc;
	border-radius: 50%;
	display: block;
	position: absolute;
}
.content {
	max-height: 20px;
	padding: 50px 20px 0;
	border-color: transparent;
	border-width: 2px;
	border-style: solid;
	border-radius: 0.5em;
	position: relative;
}
.content:before, .content:after {
	content: "";
	width: 0;
	height: 0;
	border: solid transparent;
	position: absolute;
	pointer-events: none;
	right: 100%;
}
.content:before {
	border-right-color: inherit;
	border-width: 20px;
	top: 50%;
	margin-top: -20px;
}
.content:after {
	border-right-color: #48b379;
	border-width: 17px;
	top: 50%;
	margin-top: -17px;
}
.content p {
	max-height: 0;
	color: transparent;
	text-align: justify;
	word-break: break-word;
	hyphens: auto;
	overflow: hidden;
}
label {
	font-size: 1.3em;
	/*  position: absolute;*/
	z-index: 100;
	cursor: pointer;
	top: 20px;
	transition: transform 0.2s linear;
}
.radio { display: none; }
.radio:checked + .relative label {
	cursor: auto;
	transform: translateX(42px);
}
.radio:checked + .relative .ccl { background: #f98262; }
.radio:checked ~ .content {
	max-height: 180px;
	border-color: #eee9dc;
	margin-right: 20px;
	transform: translateX(20px);
	transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}
.radio:checked ~ .content p {
	max-height: 200px;
	color: #eee9dc;
	transition: color 0.3s linear 0.3s;
}

/* -------------------------------------
 * mobile phones (vertical version only)
 * ------------------------------------- */
@media screen and (max-width: 767px) {
#timeline {
	margin-left: 0;
	padding-left: 0;
	border-left: none;
}
#timeline li { margin: 50px 0; }
label {
	width: 85%;
	font-size: 1.1em;
	/*white-space: nowrap;*/
/*	text-overflow: ellipsis;*/
	overflow: auto;
	display: block;
	transform: translateX(18px);
}
.content {
	padding-top: 45px;
	border-color: #eee9dc;
}
.content:before, .content:after {
	border: solid transparent;
	bottom: 100%;
}
.content:before {
	border-bottom-color: inherit;
	border-width: 17px;
	top: -16px;
	left: 50px;
	margin-left: -17px;
}
.content:after {
	border-bottom-color: #48b379;
	border-width: 20px;
	top: -20px;
	left: 50px;
	margin-left: -20px;
}
.content p {
	font-size: 0.9em;
	line-height: 1.4;
}
.date { position: inherit;  }
}