section.timeline {
	display: block;
	position: relative;
	padding: 64px 0px 64px 0px;
}

section.timeline:before {
	display: block;
	position: absolute;
	content: '';
	width: 4px;
	top: calc(48px + 64px);
	right: calc(50% - 2px);
	bottom: 0px;
	left: calc(50% - 2px);
	background: #252530;
	z-index: -1;
}

section.timeline:after {
	display: block;
	position: absolute;
	content: '';
	width: 32px;
	height: 16px;
	top: auto;
	right: calc(50% - 16px);
	bottom: 0px;
	left: calc(50% - 16px);
	background: #252530;
	border-radius: 16px 16px 0px 0px;
	z-index: -1;
}

section.timeline article {
	display: block;
	position: relative;
	/* 50% - margin - padding - center */
	width: calc(50% - 64px);
	margin: 32px 16px 32px 16px;
	cursor: default;
}

section.timeline article:nth-of-type(even) {
	margin-left: calc(50% + 32px + 16px);
}

section.timeline article:only-of-type {
	display: block;
	position: static;
	width: 608px;
	margin: 48px auto 0px auto;
	text-align: center;
}

section.timeline article figure {
	display: block;
	margin: 16px 0px 16px 0px;
	padding: 0px;
	text-align: center;
}

section.timeline article figure a {
	display: inline-block;
	margin: 4px;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
}

section.timeline article figure a:only-of-type {
	margin: 0px;
}

section.timeline article figure a:hover,
section.timeline article figure a:focus,
section.timeline article figure a:active {
	border: 1px solid #ffffff;
	animation: glowing-frame 1s ease-in-out infinite;
	outline: none;
}

@keyframes glowing-frame {
	0%   { border: 1px solid #ffffff; }
	50%  { border: 1px solid #0f99cb; }
	100% { border: 1px solid #ffffff; }
}

section.timeline article figure a img {
	border: 0px solid transparent;
	vertical-align: top;
	outline: none;
}

section.timeline article figure a:only-of-type img {
	display: block;
	width: 100%;
	height: auto;
	border: 0px solid transparent;
	vertical-align: top;
	outline: none;
}

section.timeline article h3 {
	vertical-align: middle;
	line-height: 32px;
	white-space: nowrap;
	overflow: hidden;
}

section.timeline article h3:before {
	display: inline-block;
	content: '';
	width: 32px;
	height: 32px;
	margin: 0px 16px 0px 0px;
	padding: 0px;
	background-position: center center;
	background-repeat: no-repeat;
	vertical-align: bottom;
	cursor: help;
}

section.timeline article.hardware h3:before                          { background-image: url('/design/search/hardware.svg'); }
section.timeline article.software h3:before                          { background-image: url('/design/search/software.svg'); }
section.timeline article.research h3:before                          { background-image: url('/design/search/research.svg'); }
section.timeline article.legacy h3:before                            { background-image: url('/design/search/legacy.svg'); }
section.timeline article.hardware-software h3:before                 { background-image: url('/design/search/hardware-software.svg'); }
section.timeline article.hardware-research h3:before                 { background-image: url('/design/search/hardware-research.svg'); }
section.timeline article.hardware-legacy h3:before                   { background-image: url('/design/search/hardware-legacy.svg'); }
section.timeline article.software-research h3:before                 { background-image: url('/design/search/software-research.svg'); }
section.timeline article.software-legacy h3:before                   { background-image: url('/design/search/software-legacy.svg'); }
section.timeline article.research-legacy h3:before                   { background-image: url('/design/search/research-legacy.svg'); }
section.timeline article.hardware-software-research h3:before        { background-image: url('/design/search/hardware-software-research.svg'); }
section.timeline article.hardware-software-legacy h3:before          { background-image: url('/design/search/hardware-software-legacy.svg'); }
section.timeline article.hardware-research-legacy h3:before          { background-image: url('/design/search/hardware-research-legacy.svg'); }
section.timeline article.software-research-legacy h3:before          { background-image: url('/design/search/software-research-legacy.svg'); }
section.timeline article.hardware-software-research-legacy h3:before { background-image: url('/design/search/hardware-software-research-legacy.svg'); }

section.timeline article samp {
	display: block;
	position: absolute;
	top: 28px;
	right: -68px;
	bottom: auto;
	left: auto;
	width: 68px;
}

section.timeline article samp:before {
	display: block;
	position: absolute;
	top: calc(18px);
	right: 0px;
	bottom: auto;
	left: 0px;
	content: "";
	width: calc(100%);
	height: 4px;
	background: #252530;
}

section.timeline article samp:after {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: auto;
	left: auto;
	content: "";
	width: 40px;
	height: 40px;
	border-radius: 16px;
	border: 4px solid #252530;
	background: #252530;
	box-sizing: border-box;
}

section.timeline article.hardware samp:after                          { background-image: url('/design/search/hardware.svg'); }
section.timeline article.software samp:after                          { background-image: url('/design/search/software.svg'); }
section.timeline article.research samp:after                          { background-image: url('/design/search/research.svg'); }
section.timeline article.legacy samp:after                            { background-image: url('/design/search/legacy.svg'); }
section.timeline article.hardware-software samp:after                 { background-image: url('/design/search/hardware-software.svg'); }
section.timeline article.hardware-research samp:after                 { background-image: url('/design/search/hardware-research.svg'); }
section.timeline article.hardware-legacy samp:after                   { background-image: url('/design/search/hardware-legacy.svg'); }
section.timeline article.software-research samp:after                 { background-image: url('/design/search/software-research.svg'); }
section.timeline article.software-legacy samp:after                   { background-image: url('/design/search/software-legacy.svg'); }
section.timeline article.research-legacy samp:after                   { background-image: url('/design/search/research-legacy.svg'); }
section.timeline article.hardware-software-research samp:after        { background-image: url('/design/search/hardware-software-research.svg'); }
section.timeline article.hardware-software-legacy samp:after          { background-image: url('/design/search/hardware-software-legacy.svg'); }
section.timeline article.hardware-research-legacy samp:after          { background-image: url('/design/search/hardware-research-legacy.svg'); }
section.timeline article.software-research-legacy samp:after          { background-image: url('/design/search/software-research-legacy.svg'); }
section.timeline article.hardware-software-research-legacy samp:after { background-image: url('/design/search/hardware-software-research-legacy.svg'); }

section.timeline article:nth-of-type(even) samp {
	left: -68px;
}

section.timeline article:nth-of-type(even) samp:after {
	top: 0px;
	right: auto;
	bottom: auto;
	left: 0px;
}

section.timeline article[data-result="true"] > div,
section.timeline article[data-result="true"] > figure,
section.timeline article[data-result="true"] > p,
section.timeline article[data-result="true"] > ul {
	display: inherit;
}

section.timeline article[data-result="false"] > div,
section.timeline article[data-result="false"] > figure,
section.timeline article[data-result="false"] > p,
section.timeline article[data-result="false"] > ul {
	display: none;
}

section.timeline article[data-result="false"] > h3 {
	margin: 0px;
	color: #ffffff;
	cursor: pointer;
}

section.timeline article[data-result="false"] > h3:hover {
	margin: 0px;
	color: #ffffff;
	animation: glowing-header 1s ease-in-out infinite;
	cursor: pointer;
}

@keyframes glowing-header {
	0%   { color: #ffffff; }
	50%  { color: #0f99cb; }
	100% { color: #ffffff; }
}



@media print {

	section.timeline {
		display: block;
		position: static;
		margin: 0px;
		padding: 0px;
		page-break-after: always;
	}

	section.timeline:before,
	section.timeline:after {
		display: none;
	}

	section.timeline h1 {
		display: block;
		position: static;
		width: 100vw;
		height: 100vh;
		margin: 0px;
		padding: 0px;
		font-size: 64px;
		line-height: 100vh;
		text-align: center;
		vertical-align: middle;
		page-break-before: always;
		page-break-after: always;
	}

	section.timeline article,
	section.timeline article:nth-of-type(even) {
		display: block;
		position: static;
		width: 100vw;
		height: calc(50vh - 1cm);
		margin: 0px;
		padding: 0px;
	}

	section.timeline article:nth-of-type(even) {
		page-break-after: always;
		height: calc(50vh - 1cm);
	}

	section.timeline.print-detail article,
	section.timeline.print-detail article:nth-of-type(even) {
		height: calc(100vh - 2cm);
		page-break-after: always;
	}

	section.timeline article samp:before,
	section.timeline article samp:after {
		display: none;
	}

	section.timeline div a {
		display: block;
	}

	section.timeline article figure a:after {
		display: none;
	}

	section.timeline article figure a img {
		width: auto;
		height: 96px;
	}

	section.timeline article figure a:only-of-type img {
		display: inline-block;
		width: auto;
		height: 96px;
	}

}



@media screen and (max-width: 1024px) {

	section.timeline {
		padding: 0px;
	}

	section.timeline:before,
	section.timeline:after {
		display: none;
	}

	section.timeline article,
	section.timeline article:nth-of-type(even) {
		width: 608px;
		margin: 32px auto;
	}

	section.timeline article:only-of-type {
		width: 608px;
		margin: 32px auto;
	}

	section.timeline article samp {
		display: none;
	}

}



@media screen and (max-width: 740px) {

	section.timeline article,
	section.timeline article:nth-of-type(even) {
		width: auto;
		margin: 32px 0px;
	}

	section.timeline article:only-of-type {
		width: auto;
		margin: 32px 0px;
	}

	section.timeline article figure a img {
		width: auto;
		height: 96px;
	}

	section.timeline article figure a:only-of-type img {
		display: inline-block;
		width: auto;
		height: 96px;
	}

}