/* fonts */



@font-face {

	font-display: swap;

	font-family: "Rockwell";

	src:

		local("Rockwell"),

		url("../font/rockwell.woff2") format("woff2"),

		url("../font/rockwell.woff") format("woff")

	;

}



@font-face {

	font-display: swap;

	font-family: "Ventura";

	src:

		/* don't reference local, as there are multiple fonts with this name */

		url("../font/ventura-regular.woff2") format("woff2"),

		url("../font/ventura-regular.woff") format("woff")

	;

}





/* normalization */



html {

	background: #e7d8a8 url("../img/mapBackground.jpg") 50% 50% / cover no-repeat;

	height: 100vh;

	overflow: hidden;

	-webkit-text-size-adjust: 100%;

	transition: background 1s;

}



body {

	color: #222;

	font: 1em/1.5 Rockwell, Roboto Slab, serif;

	font-size: calc(.75em + .333vw);

	margin: 0;

}



h1 {

	font-size: 2em;

	margin: .67em 0;

}



hr {

	box-sizing: content-box;

	height: 0;

	overflow: visible;

}



pre {

	font-family: Consolas, monospace, monospace;

	font-size: 1em;

}



abbr[title] {

	border-bottom: none;

	text-decoration: underline;

	text-decoration: underline dotted;

}



b,

strong,

.bold { font-weight: bolder; }



code,

kbd,

samp {

	font-family: Consolas, monospace, monospace;

	font-size: 1em;

}



dl,

p { margin: 1.5em 0 .2em; }



small,

.small { font-size: .8125em; }



sub,

sup {

	font-size: .75em;

	line-height: 0;

	position: relative;

	vertical-align: baseline;

}

sub { bottom: -0.25em; }

sup { top: -0.5em; }





button,

input,

optgroup,

select,

textarea {

	font-family: inherit;

	font-size: 100%;

	line-height: 1.15;

	margin: 0;

}



button,

input { overflow: visible; }



button,

select { text-transform: none; }



button,

[type="button"],

[type="reset"],

[type="submit"] { -webkit-appearance: button; }



button:active,

[type="button"]:active,

[type="reset"]:active,

[type="submit"]:active {

	transform: scale(.95);

}



button::-moz-focus-inner,

[type="button"]::-moz-focus-inner,

[type="reset"]::-moz-focus-inner,

[type="submit"]::-moz-focus-inner {

	border-style: none;

	padding: 0;

}



button:-moz-focusring,

[type="button"]:-moz-focusring,

[type="reset"]:-moz-focusring,

[type="submit"]:-moz-focusring { outline: 1px dotted; }



fieldset { padding: .35em .75em .625em; }



legend {

	box-sizing: border-box;

	color: inherit;

	display: table;

	max-width: 100%;

	padding: 0;

	white-space: normal;

}



progress { vertical-align: baseline; }



[type="number"]::-webkit-inner-spin-button,

[type="number"]::-webkit-outer-spin-button { height: auto; }



[type="search"] {

	-webkit-appearance: textfield;

	outline-offset: -2px;

}



[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }



::-webkit-file-upload-button {

	-webkit-appearance: button;

	font: inherit;

}



details,

main { display: block; }

summary { display: list-item; }

template { display: none; }



figure { margin: 0; }





/* template structure */



.splash {

	align-items: center;

	background: #27211a 50% 50% / cover no-repeat;

	background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7)), url("../img/splashBackground.jpg");

	display: flex;

	flex-direction: column;

	height: 100vh;

	justify-content: space-around;

	overflow: hidden;

}



.splash header {

	color: #c8ba97;

	text-shadow: 2px 2px 4px #222;

}



@keyframes textFadeIn-en {

	0% { opacity: 0; }

	50% {

		margin-top: 2rem;

		opacity: 0;

	}

	100% {

		margin-top: 0;

		opacity: 1;

	}

}



@keyframes textFadeIn-fr {

	0% { opacity: 0; }

	50% {

		opacity: 0;

		transform: translateY(-2rem);

	}

	100% {

		opacity: 1;

		transform: translateY(0);

	}

}



[lang="en"] .splash aside,

[lang="en"] .splash h1,

[lang="en"] .splash .subtitle,

[lang="en"] .splash button:not(:disabled) { animation: 2.5s ease-in-out 0s 1 textFadeIn-en; }



[lang="fr"] .splash aside,

[lang="fr"] .splash h1,

[lang="fr"] .splash .subtitle,

[lang="fr"] .splash button:not(:disabled) { animation: 2.5s ease-in-out 0s 1 textFadeIn-fr; }



.splash h1 {

	font: 1em/.85 Ventura, serif;

	font-size: calc(42px + 15vw); /* Firefox < 57 doesn't support calc() in the font shorthand property */

	margin: 0;

	white-space: nowrap;

}

[lang] .splash h1 { animation-duration: 1.5s; }

[lang="fr"] .splash h1 { line-height: .95; }



.splash .subtitle {

	align-items: center;

	display: flex;

	font-size: calc(6px + 1.666vw);

	justify-content: space-between;

}

[lang="en"] .splash .subtitle { margin: 0; }



.splash .subtitle span { flex: 1 0 auto; }

.splash .subtitle span:nth-child(1),

.splash .subtitle span:nth-child(3) {

	background: currentColor;

	height: 1px;

}

.splash .subtitle span:nth-child(2) {

	flex-basis: 19%; /* IE seems to require an exact, non-zero value */

	letter-spacing: .1em;

	padding: 0 .5em;

}



[lang="en"] .splash .subtitle span:nth-child(1) { flex-grow: 1.2; }

[lang="en"] .splash .subtitle span:nth-child(2) { padding-left: 4em; }

[lang="fr"] .splash .subtitle span:nth-child(3) { flex-grow: 1.618034; }



.splash button,

.splash button:hover,

.splash button:focus {

	background: #e6e3d7;

	border: 1px solid #c1b384;

	border-radius: 4px;

	box-shadow: 0 0 0 1px #e6e3d7;

	font-size: 1.2em;

	margin: 2px; /* side effect of box-shadow */

	padding: .33em;

	transition: .2s linear;

}

.splash button:disabled { opacity: 0; }

.splash button:hover,

.splash button:focus { background: #c2b491; }



.noJS .splash button { display: none; }



.splash button span { vertical-align: middle; }



/* hide from IE */

@supports (color: inherit) {

	@keyframes scrollToEnter {

		0% { transform: translateY(0); }

		25% { transform: translateY(.5em); }

		50% { transform: translateY(0); }

		75% { transform: translateY(.33em); }

		100% { transform: translateY(0); }

	}

}



.splash button:not(:disabled) .downArrow {

	animation: 3s ease-in-out 3s 1 scrollToEnter;

	border: 1px solid;

	border-radius: 50%;

	box-sizing: border-box;

	color: #595959;

	display: inline-flex;

	flex-direction: column;

	margin-left: .2em;

	padding: 1px;

	vertical-align: bottom;

}



.splash .downArrow svg {

	fill: currentColor;

	height: 1em;

	width: 1em;

}





main {

	display: flex;

	flex-direction: column;

	height: 100vh;

	justify-content: space-between;

	margin: 0 auto;

	max-width: 1796px;

	overflow: hidden;

}



button,

.fauxUnifiedButton {

	background: #b0ae96;

	border: 7px solid #5e543c;

	border-image: url("../img/fancyBorder.png") 7 / 7px / 0 stretch;

	border-radius: 3px;

	box-shadow: 0 0 0 2px #b0ae96, 2px 2px 4px 2px #222;

	margin: 2px .5em 5px 2px; /* to compensate for box-shadows */

	min-width: 44px;

	padding: 2px;

	position: relative;

	transition: .2s;

}



button:hover,

button:focus,

button.selected {

	background: #e6e3d7;

	box-shadow: 0 0 0 2px #e6e3d7, 2px 2px 4px 2px #222;

}



.fauxUnifiedButton,

.timePeriods { margin-left: .5em; }





main > header {

	padding: .5vh .5vw 0;

	text-align: center;

}



main > header > span {

	background: currentColor;

	flex-grow: 1;

	height: 1px;

	transition: .2s linear;

}

main > header > span:last-of-type { flex-grow: 1.618034; }



main h1 {

	font-size: 1.666em;

	height: 1.3em;

	line-height: 1.3;

	margin: 0;

	overflow: hidden;

	position: relative;

	text-shadow: 0 0 .5em #e7d8a8;

	transition: color .5s;

}

main h1.eventDialogIsOpen,

footer h2.eventDialogIsOpen {

	color: #e6e3d7;

	text-shadow: 0 0 0.5em #222;

}



article {

	flex: 1;

	overflow-y: scroll;

	transition: padding-bottom .5s ease-out, padding-top .5s ease-out;

}



.compassRose,

.chartContent { display: none; }



.tiles {

	display: flex;

	flex-flow: row wrap;

	justify-content: space-around;

}



.tiles a {

	margin: 1em .5em;

	text-decoration: none;

	transform: scale(0);

}



.tiles figure {

	background: #453e30;

	border: 1px solid #3e392c;

	box-shadow: 0 0 0 .15em rgba(230, 227, 215, .2), .25em .25em .5em .3em rgba(34, 34, 34, .3);

	box-sizing: border-box;

	color: #ffffd8;

	transition: .2s linear;

	width: 130px;

}



.tiles a:hover figure,

.tiles a:focus figure {

	background: #272118;

	color: #e6e3d7;

}



.tiles img {

	display: block;

	filter: sepia(1) saturate(75%);

	margin: 0 auto;

	min-height: 4em;

	transition: .2s linear;

}



.tiles a:hover img,

.tiles a:focus img { filter: sepia(.5) saturate(100%); }



.tiles figcaption {

	overflow: hidden;

	padding: 0 1px;

	text-overflow: ellipsis;

	white-space: nowrap;

}



.lines,

.markers,

.legendContainer { display: none; }



.legend {

	border-spacing: .25em .5em;

	font-size: calc(100vw * .01);

	transition: .5s;

}



.legend p {

	font-size: 1.1em;

	letter-spacing: 2px;

}

.legend h2 {

	font: 6.7em/.75 Ventura, serif;

	margin: 0;

	white-space: nowrap;

}



.legend th { font-weight: 400; }



.legend tbody td:last-child {

	border: 1px solid #3d3d2d;

	width: 5.4em;

}

.legend .allied { background: #808054; }

.legend .central { background: #706f59; }

.legend .neutral { background: #aea480; }



main > footer { padding: 0 .5vw .5vh; }



.viewTime { display: none; }

.filterEvents { margin: 0 auto; }



footer .header {

	align-items: center;

	display: flex;

}

footer .header > span {

	background: currentColor;

	flex: 1;

	height: 1px

}

footer .header > span:last-child { flex-grow: 1.618034; }



.timePeriods button:first-child,

.timePeriods button:last-child { min-width: auto; }



.scrollingWrapper {

	overflow-x: auto;

	transition: .4s linear;

}

button .nonEssential { display: none; }



footer h2 {

	font-size: .833333em;

	line-height: 1.8;

	margin: 0;

	padding: 0 .5em;

	text-shadow: 0 0 0.5em #e6e3d7;

	transition: color .5s;

}



main .faded { opacity: .5; }

main > footer sup { top: -.333333em; }





main > aside { box-shadow: 0 0 .5em #222; }



main > aside a {

	color: #fff;

	text-decoration: none;

}



main > aside .linearSignature {

	background: linear-gradient(to right, #113061, #053e7f, #053e7f, #053e7f, #113061);

	display: block;

	font: .85em/1.15 Minion Web Pro, Minion Web, Minion, Palatino Linotype, Palatino, serif;

	padding: .9em .8em;

	text-align: center;

	text-transform: uppercase;

	transition: letter-spacing .2s;

}



/* hide from IE */

@supports (color: inherit) {

	main > aside .linearSignature:hover,

	main > aside .linearSignature:focus { background: #113061; }

}



main > aside img { vertical-align: middle; }



main > aside .allInteractives { display: none; }





/* dialogs */



.eventDialogIsOpen { z-index: 3; }



.dialog {

	background: rgba(0, 0, 0, .75);

	height: 100vh;

	opacity: 0;

	position: fixed;

	top: 0;

	width: 100vw;

	z-index: 2;

}

.dialog.help { z-index: 3; }



.dialog .content {

	bottom: 0;

	left: 0;

	max-width: 1796px;

	overflow: hidden;

	position: absolute;

	right: 0;

	top: 0;

}



.dialog.event .content {

	background: url("../img/passportPage-8bit.png") 50% 50% / 100% 100% no-repeat;

	display: flex;

	flex-direction: column;

	overflow-x: hidden;

	overflow-y: scroll;

	padding: 0 1em;

}



.leatherBoundNotebook {

	display: none;

	filter: drop-shadow(6px 6px 8px #000);

	height: 90%;

	max-height: 900px;

	position: absolute;

	right: 10%;

	top: 5%;

}



.passport {

	font-family: Consolas, monospace, monospace;

	font-variant-numeric: oldstyle-nums;

	margin-bottom: 1em;

	order: -1;

}



.passport table { margin: 0 auto; }



.passport caption {

	font-family: serif;

	font-size: 1.2em;

	margin-top: 1vh;

	padding: .5em;

	text-shadow: 0 0 1em #e6e3d7;

}



.passport td,

.passport th {

	border: 1px solid;

	padding: .5em;

	vertical-align: top;

}

.passport td:first-child,

.passport th:first-child { border-left: 0; }

.passport th:last-child { border-right: 0; }



.passport th {

	padding-bottom: 0;

	padding-top: 0;

}



.duration { text-align: center; }

.duration .startDate { color: #b30900; }

.duration .endDate { color: #3d9970; }



.signatures { text-align: center; }



.signatures small {

	border-top: 1px dashed;

	display: block;

}

.signatures img {

	max-width: 160px;

	width: 100%;

}

.signatures .loggedBy img { margin-bottom: -14%; }

.signatures .approvedBy img {

	margin-bottom: -28%;

	margin-right: -19%;

}



.approved {

	border: 1px solid;

	border-radius: .666em;

	font-variant: all-petite-caps;

	margin: 1.5em auto .2em;

	padding: .25em;

	transform: rotate(3deg);

	width: -webkit-min-content;

	width: -moz-min-content;

	width: min-content;

}



.approved div {

	border: 1px solid;

	border-radius: .333em;

	display: flex;

	flex-direction: column;

}

.approved p {

	letter-spacing: .1em;

	line-height: 1;

	margin: 0;

	padding-bottom: .2em;

}

.approved span {

	font-size: .833333em;

	line-height: 1;

	padding: 0 .5em .2em;

	white-space: nowrap;

}



.passport .summary {

	border-right: 0;

	padding: 0;

}



.summary div {

	box-sizing: border-box;

	max-width: 75ch;

	padding: .5em;

}



.summary p:first-child { margin-top: 0; }



.participantSlider {

	margin: 0;

	padding: 0;

}



.passport .bx-wrapper .bx-prev { left: -25px; }

.passport .bx-wrapper .bx-next { right: -25px; }



.participantSlider li { padding: .5em 12px; }



.participantSlider figure { max-width: 124px; }



.participantSlider div {

	border: 1px solid #6c6b6a;

	margin: 0 auto;

	padding: 1px;

}

.participantSlider img { filter: drop-shadow(1px 1px 1px rgba(128, 128, 128, .5)); }



.participantSlider figcaption {

	font-weight: 400;

	line-height: 1;

	padding-top: .25em;

}



.multimedia {

	align-self: center;

	filter: drop-shadow(0 0 8px #222);

	flex-basis: 697px;

	position: relative;

}



.multimedia video {

	background: url("../img/multimediaFrame-24bit.png") 50% 50% / 100% 100% no-repeat;

	box-sizing: border-box;

	margin: 0 auto;

	padding: 3.628447% 4.499274% 4.354136% 3.628447%;

	vertical-align: middle;

}



.bx-wrapper {

	background: 0;

	border: 0;

	-webkit-box-shadow: none;

	box-shadow: none;

	margin: 0 auto;

}



.imageSlider {

	margin: 0;

	padding: 0;

}

.imageSlider:empty {

	max-width: 250px;

	width: 100%;

}



.multimedia > .imageSlider > li:not(:first-child) { display: none; }



.imageSlider figure {

	background: url("../img/multimediaFrame-24bit.png") 50% 50% / 100% 100% no-repeat;

	padding: 3.628447% 4.499274% 4.354136% 3.628447%;

}



.imageSlider figcaption {

	background: #fcf7ea;

	margin: 0;

	padding: 1em 1em 0;

}



.insetMap {

	align-self: center;

	background: url("../img/insetMapFrame-24bit.png") 50% 50% / 100% 100% no-repeat;

	filter: drop-shadow(0 0 8px #222);

	flex: 0 1 322px;

	margin: 1em 0 2em;

	padding: 1.5em 2em;

}



.insetMap img {

	background: url("../img/insetMapBorder-24bit.png") 50% 50% / 100% 100% no-repeat;

	box-sizing: border-box;

	padding: 1.552795%;

	transform: rotate(1deg) translateX(-2px);

	vertical-align: middle;

}



.streamers { margin-bottom: 2em; }

.streamers:empty { display: none; }



.streamers img { filter: drop-shadow(0 0 8px #222); }



.dialog.event .eventClose {

	margin-top: .5em;

	position: fixed;

	right: 0;

	z-index: 1;

}



.closeText { display: none; }



.closeX {

	background: #222;

	border-radius: 50%;

	color: #e6e3d7;

	display: inline-block;

	font-family: sans-serif;

	font-weight: 700;

	line-height: 1;

	text-align: center;

	transform: scale(2);

	width: 1em;

}



.credits h2 { font-size: 1.33em; }

.credits h2 a { color: #0e1232; }



.credits figure {

	align-items: flex-start;

	display: flex;

	flex-direction: column-reverse;

	margin: 0 auto;

	max-width: 500px;

	padding: 1.5em 0;

	justify-content: space-between;

}



.credits figure > div {

	border-radius: 4px;

	padding: .5em;

}

.credits img {

	max-width: 207px;

	vertical-align: middle;

	width: 100%;

}

.credits figcaption { margin-right: 1em; }



.networkDesigns > div { background: #0e1231; }

.johnBrown > div {

	background: #a18f61;

	font-weight: 700;

}

.dogGreen > div { background: #222; }

.belleWissell > div { background: #f1eae4; }



.johnBrown > div > p { width: 207px; }



.credits figcaption p {

	font-family: sans-serif;

	font-weight: 700;

}





/* responsive design */



@media (min-width: 350px) {

	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

		.tiles figure { width: 160px; }

	}

}



@media (min-width: 375px) {

	main > aside .linearSignature { letter-spacing: 1px; }

}



@media (min-width: 470px) {

	.filterEvents { display: table; }



	.twoColumn {

		display: flex;

		justify-content: space-between;

	}

	.twoColumn > div {

		flex-shrink: 0;

		flex-basis: calc(50% - 1em);

	}

}



@media (min-width: 550px) {

	main > header {

		align-items: center;

		display: flex;

	}



	main h1 { padding: 0 .25em; }



	header .buttonGroup {

		display: flex;

		flex: 0 0 auto;

	}



	main > aside {

		align-items: stretch;

		display: flex;

	}



	main > aside .linearSignature {

		flex-grow: 3.2360679775;

		padding-bottom: .6em;

		padding-top: .6em;

	}



	main > aside .allInteractives {

		background: #a2915f;

		color: #222;

		display: flex;

		flex-grow: 1;

		justify-content: center;

		padding: .5em 1em;

		text-align: center;

	}



	main > aside .allInteractives:hover,

	main > aside .allInteractives:focus { background: #af9c66; }



	main > aside .allInteractives span { align-self: center; }



	main > aside .allInteractives img { height: 1em; }

}



/* advanced layout (map and chart) */

@media (min-width: 768px) and (min-height: 562px) {

	html { background: #774428 url("../img/woodBackground.jpg") 100% 100% no-repeat; }



	main > header { color: #e6e3d7; }

	main h1 { text-shadow: 0 0 .5em #222; }



	article { overflow: hidden; }



	.stage {

		background: 50% 50% / contain no-repeat;

		filter: drop-shadow(3px 3px 2px #222);

		padding-top: 72.939866%; /* stage (map) image height as a percentage of its width */

		position: relative;

		transition: background .5s linear;

	}

	.map { background-image: url("../img/stage/prewar.png"); }

	.map.year1914 { background-image: url("../img/stage/1914.png"), url("../img/stage/prewar.png"); }

	.map.year1915 { background-image: url("../img/stage/1915.png"), url("../img/stage/prewar.png"); }

	.map.year1916 { background-image: url("../img/stage/1916.png"), url("../img/stage/prewar.png"); }

	.map.year1917 { background-image: url("../img/stage/1917.png"), url("../img/stage/prewar.png"); }

	.map.year1918 { background-image: url("../img/stage/1918.png"), url("../img/stage/prewar.png"); }

	.map.year1919 { background-image: url("../img/stage/postwar.png"), url("../img/stage/prewar.png"); }

	.chart { background-image: url("../img/stage/chart.png"); }



	.mapContent,

	.chartContent {

		bottom: 0;

		display: block;

		left: 0;

		position: absolute;

		right: 0;

		top: 0;

	}

	.chart .mapContent,

	.map .chartContent { display: none; }



	.legendContainer {

		background: rgba(230, 227, 215, .4);

		bottom: 29%;

		box-shadow: 0 0 .5em .5em rgba(230, 227, 215, .4);

		display: block;

		left: .5em;

		position: absolute;

		transition: .2s linear;

	}

	.legendContainer:hover {

		background: rgba(230, 227, 215, .8);

		box-shadow: 0 0 .5em .5em rgba(230, 227, 215, .8);

		z-index: 1;

	}



	.compassRose {

		bottom: 48%;

		display: inline;

		position: absolute;

		right: 1%;

		transition: .5s ease-out;

		width: 9vw;

	}



	.tiles a {

		left: 0;

		margin: 0;

		position: absolute;

		top: 0;

		transform-origin: 0 0;

		transition: transform .5s ease-out;

	}

	.tiles a:hover,

	.tiles a:focus { z-index: 1; }



	.tiles figure {

		font-size: calc(100vw * .009); /* arbitrary multiplier */

		margin: .3em .6em; /* to compensate for box-shadows */

		transition: .5s ease-out;

		width: calc(100vw * .071); /* magic number */

	}

	.tiles figcaption {

		line-height: 1.2;

		min-height: 2.6em;

		white-space: normal;

	}



	.lines,

	.markers { display: block; }



	.lines span {

		background: linear-gradient(to right, transparent, transparent 2px, #595959 3px, #222);

		height: 1px;

		position: absolute;

		transition: .5s;

		transform-origin: 0 100%;

		width: 1px;

	}



	.markers span {

		border-radius: 50%;

		border: 1px solid #222;

		height: 2px;

		position: absolute;

		transition: .5s ease-out;

		width: 2px;

	}



	.chartContent { padding-top: 5%; }



	.chartContent figure {

		font-size: calc(100vw * .009);

		overflow-x: auto;

		overflow-y: hidden;

		position: relative;

	}



	.chartContent table {

		border-collapse: collapse;

		table-layout: fixed;

		width: 100%;

	}



	.chartContent th {

		font-family: sans-serif;

		font-size: 1.2em;

		white-space: nowrap;

	}



	.chartContent th,

	.chartContent td { padding: 0; }



	.chartContent td {

		border: 1px dotted #774428;

		border-width: 0 1px;

		position: relative;

	}



	tr:last-child [data-period]::after {

		color: rgba(34, 34, 34, 0.2);

		content: attr(data-period);

		font-family: serif;

		font-size: 10em;

		letter-spacing: -.066em;

		line-height: 1;

		position: absolute;

		transform: rotate(-90deg);

		transform-origin: 0 0;

		white-space: nowrap;

	}



	[lang="fr"] tr:last-child [data-multi][data-period]::after,

	[lang="fr"] tr:last-child [data-multi][data-period]::after { font-size: 7.4em; }



	@keyframes colorHighlight {

		0% { color: rgba(34, 34, 34, 0.2); }

		50% { color: #000; }

		100% { color: rgba(34, 34, 34, 0.2); }

	}



	tr:last-child .colorHighlight[data-period]::after { animation: 2s ease-in-out 0s 1 colorHighlight; }



	.chartContent a {

		display: block;

		position: relative;

		text-decoration: none;

		transform: scale(0);

		transition: left 1s, transform 1s;

		white-space: nowrap;

		z-index: 1;

	}

	.chartContent a:hover,

	.chartContent a:focus { z-index: 2; }



	.chartContent .text {

		display: inline-block;

		left: 1px;

		padding: 0 .25em;

		position: -webkit-sticky;

		position: sticky;

		transition: background .2s linear;

	}



	.chartContent .icon {

		display: inline-block;

		margin-right: .25em;

		transition: background .2s linear;

	}



	.chartContent .combined,

	.chartContent .separate .icon {

		background: #413c33;

		border: 1px solid #888;

		border-radius: 6px;

		box-sizing: border-box;

		color: #e6e3d7;

		padding: .25em 0;

	}



	.chartContent .separate { color: #222; }



	.chartContent .separate .icon {

		min-width: 2.1em;

		text-align: center;

	}



	.chartContent .separate .text {

		background: rgba(230, 227, 215, .5);

		border-radius: 6px;

		padding-left: 0;

	}



	.chartContent .combined:hover,

	.chartContent .combined:focus,

	.chartContent .separate:hover .icon,

	.chartContent .separate:focus .icon { background: #222; }



	.chartContent .separate:hover .text,

	.chartContent .separate:focus .text { background: rgba(230, 227, 215, .9); }





	main > footer {

		color: #e6e3d7;

		display: flex;

		justify-content: space-around;

	}

	.viewTime,

	.filterEvents {

		display: block;

		margin: 0;

	}



	footer h2 { text-shadow: 0 0 .5em #222; }



	.fauxUnifiedButton {

		border-width: 2px;

		display: flex;

		padding: 0;

	}



	.fauxUnifiedButton button {

		background: 50% 50% / 50% 50%;

		border: 0;

		border-image: 0;

		border-radius: 0;

		box-shadow: none;

		margin: 0;

		padding: calc(.5em - 1px);

	}



	.fauxUnifiedButton button:nth-child(1) { padding-right: 1em; }



	.fauxUnifiedButton button:nth-child(1).selected,

	.fauxUnifiedButton button:nth-child(1):hover,

	.fauxUnifiedButton button:nth-child(1):focus {

		background:

			linear-gradient(to bottom right, transparent 3px, #e6e3d7 3px) top left,

			linear-gradient(to top right, transparent 3px, #e6e3d7 3px) bottom left,

			linear-gradient(#e6e3d7, #e6e3d7) top right,

			linear-gradient(#e6e3d7, #e6e3d7) bottom right;

		background-size: 75% 75%;

		background-repeat: no-repeat;

	}



	.fauxUnifiedButton button:nth-child(2) {

		border-left: 1px solid #5e553b;

		padding-left: 1em;

		position: relative;

	}



	.fauxUnifiedButton button:nth-child(2).selected,

	.fauxUnifiedButton button:nth-child(2):hover,

	.fauxUnifiedButton button:nth-child(2):focus {

		background:

			linear-gradient(#e6e3d7, #e6e3d7) top left,

			linear-gradient(#e6e3d7, #e6e3d7) bottom left,

			linear-gradient(to top left, transparent 3px, #e6e3d7 3px) bottom right,

			linear-gradient(to bottom left, transparent 3px, #e6e3d7 3px) top right;

		background-size: 75% 75%;

		background-repeat: no-repeat;

	}



	.pointer {

		display: flex;

		filter: drop-shadow(2px 2px 1px #5d553a);

		flex-direction: column;

		height: .66rem;

		left: 39%;

		position: absolute;

		top: 36%;

		transition: transform .5s linear;

		width: 15%;

	}

	[lang="fr"] .pointer { left: 35.5% }

	.selected + .pointer {

		filter: drop-shadow(2px -2px 1px #5d553a);

		transform: rotate(180deg);

	}



	.pointer::after {

		content: "★";

		font-size: xx-small;

		left: 30%;

		line-height: .66rem;

		position: absolute;

		top: 0;

		transition: transform .5s linear;

	}



	.selected + .pointer::after { transform: rotate(-180deg); }



	.pointer span {

		background: #774428;

		flex: 1;

	}

	.pointer span:nth-child(1) { transform: skew(-33deg); }

	.pointer span:nth-child(2) {

		margin-top: -1px;

		transform: skew(33deg);

	}

}



/* event dialog content switches to horizontal layout */

@media (min-width: 830px) {

	.dialog.event .content {

		align-items: center;

		background: none;

		flex-direction: row;

		justify-content: space-around;

		margin: 0 auto;

		overflow: visible;

		padding: 0 1em;

	}



	.leatherBoundNotebook { display: inline; }



	.passport {

		background: url("../img/passportPage-8bit.png") 50% 50% / 100% 100% no-repeat;

		filter: drop-shadow(0 0 8px #222);

		flex-basis: calc(640px + 2em);

		margin: 0;

		order: 0;

	}



	.passport .summary div {

		margin-right: .2vw;

		max-height: calc(100vh - 25em);

		overflow-y: auto;

	}



	.dialog.event .content > div:nth-of-type(2) {

		margin-left: -1em;

		margin-right: -1em;

	}



	.multimedia,

	.insetMap {

		align-self: auto;

		margin: 0;

	}



	.hasStreamers .multimedia,

	.hasStreamers .insetMap { align-self: flex-end; }



	.streamers {

		margin-bottom: 0;

		right: 2%;

		max-width: 57%;

		position: absolute;

		top: 8%;

	}



	.dialog.event .eventClose {

		font-size: .833333em;

		margin-top: 0;

		position: absolute;

		right: .5em;

		top: .5em;

	}



	.closeText { display: inline; }



	.closeX { transform: none; }

}



/* Internet Explorer doesn't support nested media queries */

@media (min-width: 830px) and (max-height: 610px) {

	.signatures .loggedBy { display: none; }

}

@media (min-width: 830px) and (max-height: 670px) {

	.signatures .approvedBy { display: none; }

}

@media (min-width: 830px) and (max-height: 770px) {

	.signatures .approved { display: none; }

}

@media (min-width: 830px) and (min-height: 1050px) {

	.hasStreamers .multimedia,

	.hasStreamers .insetMap { margin-bottom: 10vh; }

}



@media (min-width: 830px) and (min-height: 1250px) {

	.hasStreamers .multimedia,

	.hasStreamers .insetMap {

		align-self: center;

		margin-bottom: 0;

	}

}



@media (min-width: 850px) {

	[lang="en"] button .nonEssential { display: inline; }



	.credits figure {

		align-items: center;

		flex-direction: row-reverse;

	}

}



@media (min-width: 1000px) {

	[lang="fr"] button .nonEssential { display: inline; }

}



@media (min-width: 1020px) {

	header .buttonGroup { order: -1; }



	.markers span {

		border-width: 2px;

		height: 3px;

		width: 3px;

	}



	.lines span { background: linear-gradient(to right, transparent, transparent 3px, #595959 4px, #222); }

}



@media (min-width: 1920px), (min-height: 1081px) {

	html { background-size: cover; }

}



@media (min-height: 1180px) {

	.leatherBoundNotebook { top: calc(50% - (900px / 2)); }

}



@media (min-width: 1796px) {

	body { font-size: 1.125em; }

}



@media (prefers-reduced-motion: reduce) {

	* { animation: none !important; }



	.legend,

	.tiles figure,

	.chartContent a { transition-duration: 20ms; }

}





/* helper classes */



.hidden { display: none; }



img,

video {

	height: auto;

	max-width: 100%;

}

img.border { border: 1px solid; }



.join {

	margin-bottom: .2em;

	margin-top: .2em;

}



.lowercase { text-transform: lowercase; }



.message-box {

	background: #e6e3d7;

	box-shadow: 2px 2px 4px #222;

	padding: 1em;

}

.message-box.warning { border-left: 1em solid #ffdc00; }



.nowrap { white-space: nowrap; }



.roundAll { border-radius: 6px; }

.roundBottom { border-radius: 0 0 6px 6px; }

.roundLeft { border-radius: 6px 0 0 6px; }

.roundRight { border-radius: 0 6px 6px 0; }

.roundTop { border-radius: 6px 6px 0 0; }



.uppercase { text-transform: uppercase; }



.visuallyHidden {

	border: 0;

	clip: rect(0 0 0 0);

	height: 1px;

	margin: -1px;

	overflow: hidden;

	padding: 0;

	position: absolute;

	white-space: nowrap;

	width: 1px;

}