/* flexy */
.flexy {
	display: flex;
	flex-wrap: wrap;
}
.flexy--row {
	flex-direction: row;
}
.flexy--col {
	flex-direction: column;
}

/* Content */
.content {
	position: relative;
	overflow-x: hidden;  /* no x-axis scrollbars */
}
.content__timeline {
  width: 1055px;
}
.content__left-half {
	border-right: 2px solid black;
	margin-left: auto;
	padding: 0 5px;
	text-align: right;
}
.content__right-half {
	width: 50px;
	padding: 0 5px;
	text-align: left;
	z-index: 2;
}
.content__event {
	font-size: 12pt;
	display: inline-block;
	position: relative;
}
.content__title {
	font-size: 14pt;
	font-weight: bold;
	line-height: 1;
}
.content__image {
	display: block;
	padding-right: 5px;
	opacity: 0;
}
.content__date {
	font-size: 14pt;
	font-weight: bold;
	margin-bottom: 5px;
	display: inline-block;
}


/* events */
.event-description {
  font-size: 12pt;
}
.event-breakthrough {
	color: #1080ff; /*#6009ff;*/
}
.event-meeting {
	color: #806060;
}
.event-cooperative_resource {
	color: #336600;
}

/* arrows */
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  vertical-align: middle;
}
.arrow-left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.arrow-right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}


/* scroll-reveal support */
.hide {
  visibility: hidden;
}


/* specific styling classes */
.image-caption {
  font-size: 12pt;
  font-style: italic;
  margin-top: 8px;
}
.shadow {
  border: 1px solid #909090;
  box-shadow: 3px 3px 2px #a0a0a0;
}
.heading {
  font-size: 13pt;
  font-weight: bold;
}

/* animations */
.image-anim {
  animation-name: reveal_image;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(.5,.5,0,1);
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes reveal_image {
  from {opacity: 0;}
  to {opacity: 1;}
}

.date-anim {
  animation-name: reveal_date;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(.5,.5,0,1);
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
@keyframes reveal_date {
  0% { transform: translatex(25px) scale(.5); }
  5% { transform: translatex(10px) scale(.75); }
  10% { transform: translatex(2px) scale(1); }
  15% { transform: translatex(0px) scale(1); }
  100% { transform: translatex(0px) scale(1); }
}

.event-anim {
  animation-name: reveal_event;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(.5,.5,0,1);
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
@keyframes reveal_event {
  from { opacity: 0; }
  to { opacity: 1; }
}