/* CSS Main File for One More Voice (https://onemorevoice.org/) */

/* Created and developed by Adrian S. Wisnicki, 2020-2022, and released under a Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) license (https://creativecommons.org/licenses/by-nc/4.0/). Originally based on  the CSS file for Fieldwork of Empire (https://awisnicki.github.io/fieldwork_of_empire/), but since revised considerably. */

/* 
Table of Contents
-----------------
** Main Site Colors **
** Site Color Codes **
** z-index **

** Main CSS **
01. Principal Components 
02. Division-Specific Colors
03. Headings
04. Page Menus
05. Main
06. Credits
07. Margin Tops
08. Home/Categories Top
09. Essay Top
10. Main Image Caption Button
11. Middle of  Pages
12. Home and Essay Bottom
13. Images and Related
14. Links
15. Action Buttons
16. Tooltips
17. Header and Nav
17.1. Skip Nav
17.2. Logo
17.3. Google Translate
17.4. Font-Awesome Buttons
17.5. Hamburger Menu and Close
17.6. Breadcrumbs
18. Overlay
19. Footer
20. Scroll to Top Button
21. Lists
22. Lines
23. Text/Warning Boxes & Info Notes
24. Keycap
25. General Formatting
26. Thematic Initiatives Page Images
27. Object Gallery: Visual Materials & Motion Pictures
28. Motion Pictures
29. Site Map
30. Site Sections
31. 404 Page
32. BIPOC Voices
33. Recovering Histories
*/

/*--------------------------------------*/

/* Main Site Colors */
/* As relevant, color contrast checked via https://webaim.org/resources/contrastchecker/ and https://color.adobe.com/create/color-contrast-analyzer */
/* Color shades: https://mdigi.tools/color-shades/ */
/* Create a palette: https://coolors.co/ */
/* Color palette from image: https://icolorpalette.com/color-palette-from-images */
/* Colors chosen to be Color Blind Safe using https://color.adobe.com/create/color-accessibility */ /* Triad */
/* Complementary color picker: https://giggster.com/guide/complementary-colors/ and https://www.canva.com/colors/color-wheel/ */
/* Gradients via https://www.css-gradient.com/ */

/* Site Color Codes */
/* 
(white) #fff
(black) #212119;

(lighter blue) #aeced9; (contrast checked)
(light blue) #8db7bf;
(dark blue) #315257;
(darker blue) #305056; (contrast checked)
(darkest blue) #243D42;

(gray-green): #697c6f;
(olive green) #a4b48b;
(dark green) #3c5e58;

(lighter yellow) #F1EACA; (contrast checked)
(yellow) #dcd3a6;
(lighter orange) #F1D7B6; (contrast checked)
(orange) #e3b382;
(lighter red) #984d55;
(red) #743B41; (contrast checked)
(dark brown) #7d4d1c; (contrast checked)
(dark brown, for a links) #694017 (contrast checked)

(super light gray) #ededed;
(light gray) #E7E9E7;
(lighter gray): #d9d9d9;
(light mid-gray) #bdc2bd;
(ligh mid-gray) #a1a1a1;
(mid-gray) #737d73;
(dark blue in grayscale, made lighter): #737373;
(dark blue in grayscale) #575757;
(dark gray) #4d5b51; (contrast checked)

also see styleTEI for manuscript colors
*/

/* z-index  */
/* 
.image-overlay
z-index: 1;

.play-button
z-index: 2;

.youtube iframe
z-index: 3;

.skipcontrols a,
mark.advisory,
mark.running-time
z-index: 10;

#topButton
z-index: 75;

.caption-icon .tooltip-container:hover,
.caption-icon .tooltip-container:focus-within
z-index: 99;

.overlay
z-index: 100;

.tooltip-container:hover,
.tooltip-container:focus-within
z-index: 101;

.tooltip-container::before
z-index: 101;

#skip a
z-index: 150;
*/

/*--------------------------------------*/

/** Main CSS **/

/* 01. Principal Components */

*, *:before, *:after{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*:focus{
	outline: 0 none;
}
/* ::selection from HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
::selection{
	color: #fff;
  background: #4d5b51;
  text-shadow: none;
}
::-moz-selection{
  color: #fff;
	background: #4d5b51;
  text-shadow: none;
}
:root{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: normal;
	line-height: 2rem;
	color: #212119;
}
/* adds margin to all anchors; see https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html */
[id]:target{
	scroll-margin-top: 3rem;
}
html{
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
	background: #ededed;
}
body{
	-moz-osx-font-smoothing: auto;
	-webkit-font-smoothing: antialiased;
	border: 1px solid #212119;
	margin: 0 auto;
	padding: 0;
	max-width: 100%; /* prevents overflow of frame */
	overflow-x: hidden; /* prevents overflow of frame */
	overflow-y: scroll; /* needed to make overlay work */
	scrollbar-gutter: stable; /* needed to make overlay work */
	top: 0px !important; /* needed for Google Translate */
}
/* word break options; used only as needed */
/* overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	-ms-word-break: break-all;
	hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto; */
button{
	cursor: pointer;
	-webkit-appearance: button;
	appearance: button;
}
.mobile{
	display: inherit;
	visibility: visible;
}
.desktop{
	display: none;
	visibility: hidden;
}
@media only screen and (min-width: 992px){
	.mobile{
		display: none;
		visibility: hidden;
	}
	.desktop{
		display: inherit;
		visibility: visible;
	}
}


/* 02. Division-Specific Colors */

/* combo #1: blue border left, organge bottom, yellow frame */
.home h2,
.documents h2{
	border-left: 12px solid #8db7bf;
}
.home h3,
.documents h3{
	border-bottom: 8px solid #e3b382;
}
.materials .content.recovered #texts h4{
	border-bottom: 4px solid #dcd3a6;
}
.materials .content.recovered #books h4{
	border-bottom: 4px solid #a4b48b;
}
.home .toc ol:before,
.documents .toc ol:before{
	border-bottom: 4px solid #e3b382;
}
.home .content div.decoration,
.documents .content div.decoration{
	background: #dcd3a6;
}
/* combo #2: yellow border left, yellow border bottom, blue frame */
.materials h2{
	border-left: 12px solid #dcd3a6;
}
.materials h3{
	border-bottom: 8px solid #dcd3a6;
}
.materials .toc ol:before{
	border-bottom: 4px solid #dcd3a6;
}
.categories .content div.decoration,
.materials .content div.decoration{
	background: #8db7bf;
}
.content.recovered div.decoration{
	background: #bdc2bd;
}


/* 03. Headings */

/* main page heading */
h2{
	font-size: 1.5rem;
	font-family: 'Merriweather', serif;
	font-style: italic;
	line-height: 1.6em;
	color: #305056;
	margin-bottom: 2rem;
	padding: 0 0 0 .75rem;
}
@media only screen and (min-width: 480px){
	h2{
		font-size: 2.1rem;
		padding: 0 0 0 1rem;
	}
}
@media only screen and (min-width: 768px){
	h2{
		font-size: 2.3rem;
	}
}
@media only screen and (min-width: 992px){
	h2{
		font-size: 2.1rem;
	}
	.critical h2{
		font-size: 1.7em;
	}
}
@media only screen and (min-width: 1200px){
	h2{
		font-size: 2.6rem;
	}
}
@media only screen and (min-width: 1366px){
	.critical h2{
		font-size: 2.6rem;
	}
}
/* main page heading spacing */
.page-details h2{
	margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px){
	.page-details h2{
		margin-top: 1rem;
	}
}
@media only screen and (min-width: 992px){
	.page-details h2{
		line-height: 1.55em;
		margin-top: inherit;
		margin-bottom: .5rem;
	}
}
@media only screen and (min-width: 1200px){
	.page-details h2{
		margin-top: .5rem;
		margin-bottom: 1.5rem;
	}
}
/* index and categories pages heading */
.introduction-text h2{
	text-align: center;
	border: none;
	margin: 0;
	padding: 0;
	display: inline-block;
}
@media only screen and (min-width: 768px){
	.introduction-text h2{
		margin: 1rem 0;
	}	
}
/* subsection headings */
h3{
	font-size: 1.3rem;
	font-family: 'Merriweather', serif;
	text-align: center;
	line-height: 1.6em;
	color: #305056;
	margin: 1.5rem 0;
	padding: 0 0 .75rem 0;
}
@media only screen and (min-width: 480px){
	h3{
		font-size: 1.4rem;
	}
}
@media only screen and (min-width: 768px){
	h3{
		font-size: 1.5rem;
	}
}
/* subtitle heading on essays */
h3.subtitle{
	font-size: 1rem;
	font-variant: small-caps;
	font-weight: normal;
	text-align: left;
	color: #212119;
	border-bottom: none;
	margin: .5rem 0 1rem;
}
h3.subtitle:before{
	content: "\f518";
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
	margin-right: .5rem;
}
/* credits heading */
.credits h3{
	font-size: 1.2rem;
	text-align: center;
	border-bottom: 6px solid #8db7bf;
}
/* sub-subsection headings */
h4{
	font-weight: 600;
	font-family: 'Merriweather', serif;
	text-align: center;
	margin-bottom: 1rem;
}
section p + h4,
section h4:not(:first-of-type){
	margin-top: 3rem;
}


/* 04. Page Menus */

/* menu layout */
.toc{
	line-height: 2.1rem;
	margin: .5rem auto;
	padding: 0 0 1rem;
	display: -webkit-flex;
  display: flex;
	justify-content: center;
}
@media only screen and (min-width: 480px){
	.toc{
		margin: 1rem 2rem;
	}
}
@media only screen and (min-width: 768px){
	.toc{
		margin: 1rem 3rem;
	}
}
@media only screen and (min-width: 992px){
	.toc{
		margin: 2rem 4rem;
	}
}
@media only screen and (min-width: 1200px){
	.toc{
		margin: 2rem 5rem 3rem;
	}
}
/* menu heading; adapted from https://stackoverflow.com/a/20478913 */
.toc > ol:first-child:before{
	content:attr(aria-label);
	font-family: 'Merriweather', serif;
	font-weight: 600;
	color: #305056;
	margin: 0 0 .5rem -1rem;
	display: inline-block;
}
/* menu list */
.toc > ol:first-child{
	background: #E7E9E7;
	border: 1px solid #bdc2bd;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	padding: 1.5rem 3rem 2rem;
}
@media only screen and (min-width: 480px){
	.toc > ol:first-child{
		padding: 1.5rem 4rem 2rem;
	}
}
@media only screen and (min-width: 768px){
	.toc > ol:first-child{
		padding: 1.5rem 5rem 2rem;
	}
}
@media only screen and (min-width: 992px){
	.toc > ol:first-child{
		padding: 2rem 6rem 3rem;
	}
}
/* menu sublists */
.toc ol li ol{
	margin-top: .6rem;
}
/* menu items */
.toc li{
	line-height: 1.6rem;
	margin-bottom: .65rem;
	padding-left: .125rem;
}
.toc li:last-child{
	margin-bottom: 0;
}
.toc details li a{
	margin-left: .25rem;
}


/* 05. Main */

main{
	margin: 0 auto;
	padding: 0 0 1rem;
	display: -webkit-flex;
  display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
@media only screen and (min-width: 768px){
	main{
		padding: 1rem 0 0;
		max-width: 698px;
	}
	.home main,
	.categories main{
		padding-top: 0;
	}
}
@media only screen and (min-width: 992px){
	main{
		font-size: 1.125rem;
		padding: 0;
		max-width: 1600px;
	}
}


/* 06. Credits */

.credits{
	font-size: .95rem;
}
.credits a{
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	-ms-word-break: break-all;
}


/* 07. Margin Tops */

/* section.content:nth-child(3) > section:not(:first-child) 
is for spacing gallery sections in middle of page;
section.content article section section:not(:first-of-type)
used especially on bibliography.html */
article > section:not(:first-child),
section.content:nth-child(3) > section:not(:first-child),
section.content:not(.recovered) article section section:not(:first-of-type),
.credits{
	margin-top: 3rem;
}
/* spacing on motion pictures and  book-length works */
.content.recovered.full-page article > section:not(:first-child),
.content.recovered article > section > section:not(:first-of-type){
	margin-top: 2rem;
}
/* spacing on texts */
.content.recovered.full-page article#texts > section > section:not(:first-of-type){
	margin-top: 0;
}
/* spacing on initiatives.html */
section.content:not(.recovered) article section .section-divider + section:not(:first-of-type){
	margin-top: 1.5rem;
}
@media only screen and (min-width: 768px){
	section.content:not(.recovered) article section .section-divider + section:not(:first-of-type){
		margin-top: 2rem;
	}	
}
@media only screen and (min-width: 768px){
	article > section:not(:first-child),
	section.content:nth-child(3) > section:not(:first-child),
	section.content:not(.recovered) article section section:not(:first-of-type),
	.credits{
		margin-top: 3.5rem;
	}
}
@media only screen and (min-width: 992px){
	article > section:not(:first-child),
	section.content:nth-child(3) > section:not(:first-child),
	section.content:not(.recovered) article section section:not(:first-of-type),
	.credits{
		margin-top: 4rem;
	}	
}
/* section after TOC spacing */
article > .toc + section{
	margin-top: 2rem;
}
@media only screen and (min-width: 992px){
	article > .toc + section{
		margin-top: 3rem;
	}
}
/* credits spacing (also see above) */
.home .credits:first-of-type{
	margin-top: 0;
}
@media only screen and (min-width: 768px){
	.home .credits:first-of-type,
	.categories .credits:first-of-type,
	.editions .credits:first-of-type{
		margin-top: 2rem;
	}
	.content.recovered + .content .credits:first-child{
		margin-top: 0;
	}
}


/* 08. Home/Categories Top */

/* set up section as a whole */
.home .introduction-section, 
.categories .introduction-section{
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	align-items: center;
 }
 @media only screen and (min-width: 992px){
	.home .introduction-section,
	.categories .introduction-section{
		position: relative;
	}
}
/* image segment */
.home .introduction-section .image-wrapper,
.categories .introduction-section .image-wrapper{
	width: calc(100vw - 2px);
	max-width: 1600px;
	display: block;
	visibility: visible;
	position: relative;
}
/* text segment */
.home .introduction-section .introduction-text,
.categories .introduction-section .introduction-text{
	margin: 0 auto;
	display: -webkit-flex;
  display: flex;
	flex-direction: column;
}
.home .introduction-section .introduction-text{
	padding: 0 1rem;
}
.categories .introduction-section .introduction-text{
	padding: 2rem 1rem 1rem;
	gap: 1rem; /* See Safari Support */
}
@media only screen and (min-width: 768px){
	.home .introduction-section .introduction-text,
	.categories .introduction-section .introduction-text{
		max-width: 700px;
	}
	.home .introduction-section .introduction-text{
		padding: 0 2rem;
	}
	.categories .introduction-section .introduction-text{
		padding: 2rem;
	}
}
@media only screen and (min-width: 992px){
	.home .introduction-section .introduction-text,
	.categories .introduction-section .introduction-text{
		background: rgb(226, 228, 226, .94);
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		padding: 2rem;
		position: absolute;
		top: 38%;
    transform: translate(0, -38%);
	}
	.home .introduction-section .introduction-text{
		width: 700px;
	}
	.categories .introduction-section .introduction-text{
		width: fit-content;
	}
}
/* introduction-text heading: see main headings section, above */
/* paragraphs in text segment */
.home .introduction-section p,
.categories .introduction-section p{
	line-height: 1.875em;
}
.home .introduction-section p{
	text-align: left;
}
@media only screen and (min-width: 992px){
	.home .introduction-section p{
		margin: 0;
	}
}
.categories .introduction-section p{
	font-style: italic;
	text-align: center;
	margin: 0;
	padding: 0;
}
@media only screen and (min-width: 992px){
	.categories .introduction-section p{
		padding: 0 1.5rem;
	}
}
/* introduction text ordering: mobile v. desktop */
.home .introduction-section .introduction-text h2,
.categories .introduction-section .introduction-text h2{
	order: 2;
}
.home .introduction-section .introduction-text p,
.categories .introduction-section .introduction-text p{
	order: 3;
}
.home .introduction-section .introduction-text div,
.categories .introduction-section .introduction-text div{
	order: 1;
}
@media only screen and (min-width: 992px){
	.home .introduction-section .introduction-text h2,
	.categories .introduction-section .introduction-text h2{
		order: 1;
	}
	.home .introduction-section .introduction-text p,
	.categories .introduction-section .introduction-text p{
		order: 2;
	}
	.home .introduction-section .introduction-text div,
	.categories .introduction-section .introduction-text div{
		order: 3;
	}
}


/* 09. Essay Top */

/* main container */
.essay .page-details{
	width: 100%;
	display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 768px){
	.essay .page-details{
		margin-bottom: 1rem;
	}
}
@media only screen and (min-width: 992px){
	.essay .page-details{
		display: -webkit-flex;
  	display: flex;
		flex-direction: row-reverse;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem; /* See Safari Support */
		margin: 1rem;
		position: relative;
	}
	.essay .page-details.vertical{
		align-items: center;
	}
}
@media only screen and (min-width: 1200px){
	.essay .page-details{
		align-items: center;
		margin: 1rem 1rem 2rem;
	}
}
/* sub-containers within container: desktop rendering */
@media only screen and (min-width: 992px){
	.essay .page-details.horizontal div{
		width: calc(43% - 1rem);
	}
	.essay .page-details.horizontal figure{
		width: calc(57% - 1rem);
	}
	.essay .page-details.vertical div{
		width: calc(50% - 1rem);
	}
	.essay .page-details.vertical figure{
		width: calc(50% - 1rem);
	}
}
/* text sub-container */
.essay .page-details div{
	margin: 1rem 0;
	padding: 0 1rem;
}
@media only screen and (min-width: 768px){
	.essay .page-details div{
		margin: 2rem 0 0;
		padding: 0 2rem;
	}
}
@media only screen and (min-width: 992px){
	.essay .page-details div{
		-webkit-box-shadow: #697c6f 0px 1px 6px 0px;
		-moz-box-shadow: #697c6f 0px 1px 6px 0px;
		box-shadow: #697c6f 0px 1px 6px 0px;
		margin: 0;
		padding: 1rem 2.25rem;
		height: 100%;
		display: -webkit-flex;
  	display: flex;
		flex-direction: column;
		justify-content: center;
	}
}
.essay .page-details div > span{
	margin: 0 auto;
}
/* paragraphs in text sub-container */
.essay .page-details ul.publication-details{
	list-style: none;
	line-height: 1.875rem;
	padding: 0;
}
.essay .page-details ul.publication-details li{
	margin: .55rem 0;
}
.essay .page-details ul.publication-details li span{
	font-size: .9em;
	text-transform: uppercase;
	margin-right: .15rem;
}
@media only screen and (min-width: 992px){
	.essay .page-details ul.publication-details li{
		font-size: 1.05rem;
	}
}
/* image sub-container */
.image-wrapper{
	line-height: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	position: relative;
}
.image-wrapper::after{
	content: "";
	display: block;
	/* padding-bottom: calc((height/width)*100%) */
	/* supply padding-bottom hard-coded in html file;
	use coding in prior comment or see existing files */
}
/* image in image subcontainer */
.image-wrapper img{
	background: #E7E9E7;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
}


/* 10. Main Image Caption Button */

.caption-icon{
	margin: 0;
	bottom: .5rem;
	right: .5rem;
	left: inherit;
	position: absolute;
}
.caption-icon:hover .caption,
.caption-icon:focus-within .caption{
	background: #4d5b51;
	border: 2px solid #E7E9E7;
}
.caption-icon:hover .caption i,
.caption-icon:focus-within .caption i{
	color: #E7E9E7;
}
.caption-icon a:hover,
.caption-icon a:focus{
	outline: none;
}
.caption{
	font-size: 1.4rem;
	font-weight: normal;
	font-family: Arial, Geneva, Tahoma, sans-serif;
	text-decoration: none;
	background: #E7E9E7;
	border: 2px solid #4d5b51;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 4px 6px 2px;
	display: inline-block;
}
@media only screen and (min-width: 480px){
	 .caption{
		font-size: 1.6rem;
		padding: 5px 7px 3px;
	}
}
@media only screen and (min-width: 768px){
	 .caption{
		font-size: 1.8rem;
		padding: 6px 8px 4px;
	}
}
.caption i{
	color: #4d5b51;
}


/* 11. Middle of Pages */

/* main container "sections" appear on:
books & texts + essays/materials/documents/editions */
/* padding */
.categories .sections,
.editions .sections{
	padding: 1rem 1rem 0;
} 
@media only screen and (min-width: 768px){
	.categories .sections{
		padding: 0 0 1rem;
	}
	#books,
	#texts,
	#films,
	#visuals{
		padding: 0;
	}
}
@media only screen and (min-width: 992px){
	.categories .sections{
		padding: 2rem 1rem;
	}
	.editions .sections{
		padding: 1rem 1rem 2rem;
	}
	#books,
	#texts,
	#films{
		padding: 1rem 0;
	}
	#visuals{
		padding: 0 0 1rem
	}
}
@media only screen and (min-width: 1200px){
	.editions .sections{
		padding: 0 1rem 2rem;
	}
	#books,
	#texts,
	#films{
		padding: 1rem 0;
	}
}
/* institute flex */
.categories .sections,
.editions .sections,
#books .sections,
#texts .sections{
	width: 100%;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;	
}
@media only screen and (min-width: 624px){
	#books .sections{
		flex-direction: row;
		flex-wrap: wrap;
	}
}
@media only screen and (min-width: 768px){
	.categories .sections,
	.editions .sections{
		flex-direction: row;
		flex-wrap: wrap;
	}
}
@media only screen and (min-width: 992px){
	#texts .sections{
		flex-direction: row;
		flex-wrap: wrap;
	}
}
/* gap */
.categories .sections,
.editions .sections,
#books .sections,
#texts .sections{
	gap: 1.5rem; /* See Safari Support */
}
@media only screen and (min-width: 1200px){
	.categories .sections,
	.editions .sections,
	#books .sections,
	#texts .sections{
		gap: 2rem; /* See Safari Support */
	}
}
@media only screen and (min-width: 1600px){
	.categories .sections,
	.editions .sections,
	#books .sections,
	#texts .sections{
		gap: 2.5rem; /* See Safari Support */
	}
}
/* flex percentages and flex-grow */
.categories .sections .section-container,
.editions .sections .section-container,
#books .sections .section-container,
#texts .sections .section-container{
	flex-grow: 1;
}
@media only screen and (min-width: 624px){
	#books .sections .section-container{
		flex: 0 0 calc(50% - .75rem);
	}
}
@media only screen and (min-width: 768px){
	.categories .sections .section-container,
	.editions .sections .section-container{
		flex: 0 0 calc(50% - .75em);
	}
}
@media only screen and (min-width: 992px){
	.categories .sections .section-container,
	.editions .sections .section-container{
		flex: 0 0 calc(33.33% - 1.5rem);
	}
}
@media only screen and (min-width: 1200px){
	.categories .sections .section-container,
	.editions .sections .section-container{
		flex: 0 0 calc(33.33% - 2rem);
	}
	#books .sections .section-container,
	#texts .sections .section-container{
		flex: 0 0 calc(50% - 1rem);
	}
}
@media only screen and (min-width: 1366px){
	#books .sections .section-container{
		flex: 0 0 calc(33.33% - 2rem);
	}
}
@media only screen and (min-width: 1600px){
	.categories .sections .section-container,
	.editions .sections .section-container{
		flex: 0 0 calc(25% - 2.5rem);
	}
	#books .sections .section-container,
	#texts .sections .section-container{
		flex: 0 0 calc(33.33% - 2.5rem);
	}
}
/* single item container */
.categories .sections .section-container,
.editions .sections .section-container,
#books .sections .section-container,
#texts .sections .section-container{
		background: #ededed;
		-webkit-box-shadow: #697c6f 0px 3px 7px 0px;
		-moz-box-shadow: #697c6f 0px 3px 7px 0px;
		box-shadow: #697c6f 0px 3px 7px 0px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		padding: 1rem;
}
#books .sections .section-container,
#texts .sections .section-container{
	font-size: 1.05rem;
	padding: 1rem 1.5rem;
	position: relative;
	display: -webkit-flex; 
	display: flex;
	flex-direction: column;
	gap: 1.25rem; /* See Safari Support */
}
/* used for containers that have title & no other content */
.editions .sections .section-container.title-slide,
#books .sections .section-container.title-slide,
#texts .sections .section-container.title-slide{
	min-height: 167px;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
@media only screen and (min-width: 480px){
	#books .sections .section-container,
	#texts .sections .section-container{
		padding: 1rem 2rem;
	}
}
@media only screen and (min-width: 768px){
	#books .sections .section-container,
	#texts .sections .section-container{
		padding: 1.5rem;
	}
}
/* section-container hover/focus */
.categories .sections .section-container:hover,
.categories .sections .section-container:focus-within,
.editions .sections .section-container:hover,
.editions .sections .section-container:focus-within{
	outline: 4px solid #e3b382;
}
.editions .sections .section-container.title-slide:hover,
.editions .sections .section-container.title-slide:focus-within{
	outline: none;
}
#books .sections .section-container:hover,
#books .sections .section-container:focus-within,
#texts .sections .section-container:hover,
#texts .sections .section-container:focus-within{
	outline: none;
}
/* main hyperlink */
.categories .sections .section-container a,
.categories .sections .section-container a:visited,
.editions .sections .section-container a,
.editions .sections .section-container a:visited{
	color: #212119;
	text-decoration: none;
	width: 100%;
	height: 100%;
}
#books .sections .section-container a, 
#books .sections .section-container a:visited,
#texts .sections .section-container a, 
#texts .sections .section-container a:visited{
	color: #305056;
	text-decoration: underline;
}
.categories .sections .section-container a:hover,
.categories .sections .section-container a:focus,
.editions .sections .section-container a:hover,
.editions .sections .section-container a:focus{
	outline: none;
}
#books .sections .section-container a:hover,
#books .sections .section-container a:focus,
#texts .sections .section-container a:hover,
#texts .sections .section-container a:focus{
	color: #212119;
	background: #E7E9E7;
	outline: 3px solid #e3b382;
}
/* single item in hyperlink container */
.categories .sections .section-container a div,
.editions .sections .section-container a div{
	flex: 1 0 calc(50% - 1rem)
}
/* Start ratio box; adapted from https://pqina.nl/blog/presenting-images-in-an-aspect-ratio-with-css/ */
/* 8/10 = 80 | 5/7 = 71.43 | 2/3 = 66.67 | 9/16 = 56.25 */
/* image container */
.categories .sections .section-container a .section-image,
.editions .sections .section-container a .section-image{
	border: 1px solid #737d73;
	padding: 0;
	position: relative;
}
.categories .sections .section-container a .section-image:after,
.editions .sections .section-container a .section-image:after{
	content: "";
	display: block;
	padding-bottom: 80%;
}
.categories .sections .section-container a .section-image:hover,
.categories .sections .section-container a .section-image:focus-within,
.editions .sections .section-container a .section-image:hover,
.editions .sections .section-container a .section-image:focus-within{
	overflow: hidden;
	outline: none;
}
/* main image */
.categories .sections .section-container a .section-image img,
.editions .sections .section-container a .section-image img{
	background: #E7E9E7;
	border: none;
	width: 100%;
  height: 100%;
	position: absolute;
  top: 0;
	left: 0;
	-o-object-fit: cover;
	object-fit:cover;
	-o-object-position: 50% 50%;
	object-position: 50% 50%;
	overflow: hidden;
}
/* End ratio box */
/* text container */
.categories .sections .section-container a div:nth-child(2),
.editions .sections .section-container a div:nth-child(2){
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* heading */
.categories .sections .section-container a div h3,
.editions .sections .section-container a div h3, /* needed for bv-essays.html */
.editions .sections .section-container a div h4,
#books .sections .section-container h4,
#texts .sections .section-container h4{
	font-size: 1.3rem;
	font-family: 'Amaranth', sans-serif;
	font-weight: 400;
	color: #305056;
	margin: .5rem 0 0;
	padding: 0;
}
/* needed for bv-essays.html */
.editions .sections .section-container a div h3{
	border-bottom: none;
}
#books .sections .section-container h4,
#texts .sections .section-container h4{
	color: #305056;
	margin: 0;
	padding: 0 0 .5rem 0;
	position: relative;
}
#books .sections .section-container h4:before,
#texts .sections .section-container h4:before{
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: #4d5b51;
	white-space: nowrap;
	margin-right: .75rem;
}
#books .sections .section-container h4:before{
	content: "\f304";
}
#books .sections .section-container h4::after{
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	-webkit-box-shadow: #697c6f 1px 0px 5px 1px inset;
  -moz-box-shadow: #697c6f 1px 0px 5px 1px inset;
  box-shadow: #697c6f 1px 0px 5px 1px inset;
	-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top: -.5rem;
	right: -1rem;
}
@media only screen and (min-width: 768px){
	#books .sections .section-container h4::after{
		top: -.5rem;
		right: -.5rem;
	}
}
/* texts: image and biography */
#texts .image-biography{
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* See Safari Support */
}
@media only screen and (min-width: 480px){
	#texts .image-biography{
		flex-direction: row;
		align-items: center;
		gap: 1rem; /* See Safari Support */
	}
}
/* texts: images */
/* Adapted from https://spin.atomicobject.com/2015/07/14/css-responsive-square/ */
#texts .creator-image{
	line-height: 0;
	min-height: 160px;
	min-width: 160px;
	position: relative;
}
#texts .sections .creator-image a:hover,
#texts .sections .creator-image a:focus{
	outline: 4px solid #305056;
}
#texts .creator-image img{
	border: none;
}
/* boxes for creators without images */
#texts .no-image:after{
	content: "";
	background: #e3e3e3;
	border: 1px solid #858585;
	padding-bottom: 100%;
	display: block;
}
#texts .no-image .content{
	font-style: italic;
	font-weight: 400;
	line-height: 1.5em;
	text-align: center;
	color: #404040;
	width: 100%;
	display: inline-block;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
}
/* texts: biographical text */
#texts .image-biography p{
	margin: 1rem .5rem 0;
}
@media only screen and (min-width: 480px){
	#texts .image-biography p{
		margin: 0 .5rem;
	}
}
#texts p{
	margin: 0 .5rem;
}
#texts p.location-info{
	margin: 1rem .5rem;
}
/* paragraphs of text */
.categories .sections .section-container a div p,
.editions .sections .section-container a div p{
	line-height: 1.6rem;
	font-style: italic;
	text-align: center;
}
/* lists of text */
#books .sections .section-container ul,
#books .sections .section-container ol,
#texts .sections .section-container ul,
#texts .sections .section-container ol{
	line-height: 1.875rem;
}
#books .sections .section-container ul:first-of-type{
	margin-top: .5rem;
}
/* list items of text */
#books .sections .section-container ul:first-of-type li,
#texts .sections .section-container ul:first-of-type li{
	margin-bottom: .2rem;
}
#books .sections .section-container ul:first-of-type li:last-of-type,
#texts .sections .section-container ul:first-of-type li:last-of-type,
#books .sections .section-container ul:first-of-type li:only-of-type,
#texts .sections .section-container ul:first-of-type li:only-of-type{
	margin-bottom: 0;
}
/* list of works: details/summary */
#books details,
#texts details{
	margin-bottom: 3rem;
}
#texts summary,
#books summary{
	text-decoration: none;
	-webkit-box-shadow: #697c6f 0px 2px 6px 0px;
	-moz-box-shadow: #697c6f 0px 2px 6px 0px;
	box-shadow: #697c6f 0px 2px 6px 0px;
	margin: 0 0 0 .5rem;
	padding: 6px 10px;
}
#texts summary{
	font-size: .9rem;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
#books summary{
	border-left: 4px dashed #bdc2bd;
	margin-top: .25rem;
}
@media only screen and (min-width: 480px){
	#texts summary,
	#books summary{
		padding: 6px 14px;
	}
	#texts summary{
		font-size: inherit;
	}
}
#books summary::before,
#texts summary::before{
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	white-space: nowrap;
	color: #4d5b51;
	margin: 0 .5rem;
}
#books summary::before{
	content: "\f518";
}
#texts summary::before{
	content: "\f279";
}
#books summary::after,
#texts summary::after{
	content: "expand";
	font-size: .9em;
	font-family: inherit;
	font-weight: 400;
	text-decoration: underline;
	text-transform: uppercase;
	white-space: nowrap;
	color: #305056;
	margin: 0 .5rem;
}
#books details[open] > summary:after,
#texts details[open] > summary:after{
	content: "collapse";
}
/* list of works: individual items in details/summary */
#books details li,
#texts details li{
	padding-left: .25rem;
}
#books details li:not(:last-child),
#texts details li:not(:last-child){
	margin-bottom: .5rem;
}
/* location info */
#books .location-info,
#texts .location-info{
	font-size: .9em;
	font-style: italic;
	color: #4d5b51;
	right: 1rem;
	bottom: 0;
	position: absolute;
}


/* 12. Home and Essay Bottom */

/* main containers and sub-containers */
.content{
	padding: 0 1rem;
	width: 100%;
}
/* "recovered" = central section on books, films, texts, visuals;
either .recovered or .recovered.full-page which is wider */
.content.recovered{
	margin-top: 1rem;
}
@media only screen and (min-width: 768px){	
	.content{
		margin: 0 0 1rem;
		padding: 0;
		display: -webkit-flex;
    display: flex;
	}
	main .content:nth-child(2){
		margin-top: 0;
	}
	.content.recovered{
		margin-top: 0;
	}
	/* article = main container within .content */
	.content article{
		margin: 0 2rem;
		max-width: 700px;
	}
}
@media only screen and (min-width: 992px){
	.content{
		padding: 0 1rem;
	}
	.content:last-of-type{
		margin-bottom: 2rem;
	}
	.home main .content:nth-child(2){
		margin-top: 2rem;
	}
	/* div.decoration = colored "wings" on desktop */
	.content div.decoration{
		margin: 0;
		display: block;
		visibility: visible;
		flex-grow: 1;
	}
	.content article,
	.content.recovered.full-page article{
		margin: 0 4rem
	}
}
@media only screen and (min-width: 1200px){
	.content.recovered{
		margin: 1em 0 2rem;
	}
	.content.recovered.full-page{
		margin: 0 2rem 1rem;
		padding: 0;
	}
	.content.full-page div.decoration{
		display: none;
		visibility: hidden;
	}
	.content.recovered article{
		max-width: 900px;
	}
	.content.recovered.full-page article{
		margin: 0;
		max-width: 100%;
	}
}
@media only screen and (min-width: 1366px){
	.content.recovered article{
		max-width: 1100px;
	}
}
@media only screen and (min-width: 1600px){
	.content.recovered.content.full-page{
		margin: 0 1rem 1rem;
	}
	.content.recovered article{
		max-width: 1300px;
	}
}


/* 13. Images and Related */

/* see https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/ */
img{
	color: transparent;
	background: #E7E9E7;
	width: 100%;
	height: auto;
	display: block;
}
a img{
	border: 4px transparent solid;
}
a:hover img,
a:focus img{
	border: 4px #395f65 solid;
}
/* image-container used on main visuals page & individual objects */
.image-container{
	padding: .5em;
}
.image-border{
	outline: 1px solid #bdc2bd;
}
.image-border-dark{
	border: 1px solid #737d73;
}
/* Image overlay adapted from https://www.w3schools.com/howto/howto_css_image_overlay.asp */
.image-overlay{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: #8db7bf;
	z-index: 1;
}
:hover > .image-overlay,
:focus-within > .image-overlay,
.section-container:hover .image-overlay,
.section-container:focus-within .image-overlay{
  opacity: .2;
}


/* 14. Links */

a,
a:visited{
	color: #305056;
	background: transparent;
}
a:hover,
a:focus{
	color: #212119;
	background: #E7E9E7;
	outline: 3px solid #e3b382;
}
/* used for external and email links */
a[aria-label="External Link"],
a[aria-label="External Client"]{
	margin-right: .15rem;
}
a[aria-label="External Link"]:after{
	content: "\f08e";
}
a[aria-label="External Client"]:after{
	content: "\f003";
}
a[aria-label="External Link"]:after,
a[aria-label="External Client"]:after{
	font: normal normal normal 14px/1 ForkAwesome;
	-moz-osx-font-smoothing: grayscale;
	padding-left: .15rem;
}
footer a[aria-label="External Link"]:after,
footer a[aria-label="External Client"]:after{
	padding-left: .2rem;
}

/* 15. Action Buttons */

/* Action button modified from a button created with https://buttonoptimizer.com/ and https://www.css-gradient.com */
/* action buttons appear only on 404, index, and site_sections */
a.action-button,
a.action-button:visited,
#rotate-button{
	font-weight: 600;
	text-decoration: none;
	background: #fff;
	-webkit-box-shadow: #697c6f 0px 3px 7px 0px;
	-moz-box-shadow: #697c6f 0px 3px 7px 0px;
	box-shadow: #697c6f 0px 3px 7px 0px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	padding: 10px 30px;
	 cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
@media only screen and (min-width: 1200px){
	a.action-button,
	a.action-button:visited,
	#rotate-button{
		padding: 12px 30px;
	}
}
.action-button.primary,
.home .action-button.primary{
	color: #212119;
	background: #F1EACA;
}
.home .action-button.secondary{
	color: #212119;
	background: #F1D7B6;
}
.home .action-button.tertiary{
	color: #212119;
	background: #aeced9;
}
a.action-button:hover,
a.action-button:focus,
a.action-button.primary:hover,
a.action-button.primary:focus,
a.action-button.secondary:hover,
a.action-button.secondary:focus,
a.action-button.tertiary:hover,
a.action-button.tertiary:focus{
	color: #fff;
	background: #305056;
	outline: none;
}
a.action-button i{
	margin-left: .5rem;
}
/* home-buttons appear on index page */
.home-buttons{
	margin: .75rem 0 1.25rem;
	display: -webkit-flex;
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.home a.action-button{
	font-size: 1.05rem;
	text-transform: none;
	white-space: nowrap;
	border: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	margin: 1.25rem 1rem;
	padding: 10px 0;
	width: 100%;
	display: -webkit-flex;
  display: flex;
	visibility: visible;
	align-items: center;
	justify-content: center;
}
@media only screen and (min-width: 480px){
	.home a.action-button{
		width: 11rem;
	}
}
@media only screen and (min-width: 768px){
	.home-buttons{
		margin: 2rem 0;
	}
	.home a.action-button{
		font-size: 1.15rem;
		margin: 0 1rem;
	}
}
@media only screen and (min-width: 992px){
	.home-buttons{
		margin: 2rem 0;
		justify-content: space-between;
	}
}
/* 404 button */
.error404 .horizontal a.action-button,
.error404 .horizontal a.action-button:visited{
	font-weight: 400;
	text-transform: none;
	color: #fff;
	background: #743B41;
	margin:  1rem 0;
	display: inline-block;
	visibility: visible;
}
.error404 .horizontal a.action-button:hover,
.error404 .horizontal a.action-button:focus{
	color: #fff;
	background: #305056;
	outline: none;
}


/* 16. Tooltips */

/* Adapted from https://github.com/ZoeBijl/apg-tooltip */
:root{
  --tooltip-thingy-height: .5rem;
}
.tooltip-container{
	line-height: 0;
  position: relative;
}
.tooltip-container:hover,
.tooltip-container:focus-within{
	z-index: 101;
}
/* logo-container for OMV icon on all pages */
.logo-container .tooltip-container{
	display: block;
}
/* caption-icon for main image info on all pages */
.caption-icon .tooltip-container:hover,
.caption-icon .tooltip-container:focus-within{
	z-index: 99;
}
/* The arrow (or tooltip thingy) that connects the tooltip to the container */
.tooltip-container::before{
  border: var(--tooltip-thingy-height) solid transparent;
  border-bottom-color: #F1EACA;
	position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
	z-index: 101;
}
/* This allows users to move their cursor from the button to the tooltip */
.tooltip-container::after{
  height: calc(var(--tooltip-thingy-height) * 2);
	display: block;
	position: absolute;
  right: -20%;
  top: 100%;
  left: -20%;
}
.tooltip-container.tooltip-visible::before,
.tooltip-container.tooltip-visible::after{
  content: '';
}
.tooltip-container.top::before,
.tooltip-container.top::after,
.tooltip-container.top [role="tooltip"]{
  top: unset;
  bottom: 100%;
}
.tooltip-container.top::before{
  border-top-color: #F1EACA;
  border-bottom-color: transparent;
}
.tooltip-container.top [role="tooltip"]{
  bottom: calc(100% + calc(var(--tooltip-thingy-height) * 2));
}
/* Tooltip styles */
[role="tooltip"]{
  font-size: 1rem;
	text-align: center;
	text-indent: 0;
	line-height: 1.5rem;
  color: #212119;
	background: #F1EACA;
	-webkit-box-shadow: #697c6f 0px 3px 10px 0px;
	-moz-box-shadow: #697c6f 0px 3px 10px 0px;
	box-shadow: #697c6f 0px 3px 10px 0px;
	-webkit-border-radius: .25rem;
	-moz-border-radius: .25rem;
	border-radius: .25rem;
	margin: 0;
  padding: .25rem .75rem;
	min-width: max-content;
  max-width: 10rem;
	position: absolute;
  top: calc(100% + calc(var(--tooltip-thingy-height) * 2));
  left: 50%;
  transform: translateX(-50%);
}
/* Removes the emoji container from the pointer event targets. If removed the globalPointerDown() function will break when you click/tap exactly on the emoji. */
[aria-hidden="true"]{
  pointer-events: none;
}


/* 17. Header and Nav */

/* main container */
header{
	background: #212119;
	margin: 0 auto;
	padding: 0;
	height: 81.4px;
	width: 100%;
	max-width: 1600px;
	display: -webkit-flex;
  display: flex;
	flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 480px){
	header{
		padding: 0;
		height: 86.2px;
	}
}
@media only screen and (min-width: 768px){
	header{
		height: 91.2px;
	}
}
@media only screen and (min-width: 1200px){
	header{
		height: 94.4px;
	}
}
/* contains skip, logo, and icons */
.nav-container{
	padding: .4rem .5rem;
	width: 100%;
	display: -webkit-flex;
  display: flex;
	flex-direction: column;
	justify-content: center;
}
@media only screen and (min-width: 480px){
	.nav-container{
		padding: .5rem .5rem;
	}
}
@media only screen and (min-width: 992px){
	.nav-container{
		padding: .5rem .8rem;
	}
}
@media only screen and (min-width: 1200px){
	.nav-container{
		padding: .6rem 1rem;
	}
}
/* applies to both breadcrumbs and logo/icons navs */
header nav{
	width: 100%;
	display: -webkit-flex;
  display: flex;
  align-items: center;
	justify-content: space-between;
}
@media only screen and (min-width: 992px){
	header nav{
		max-width: 1600px;
	}
}
header nav a,
header nav a:visited,
header nav button,
.overlay-header nav a,
.overlay-header nav a:visited,
.overlay-header nav button{
	text-decoration: none;
	color: #fff;
}


/* 17.1. Skip Nav */

/* skip to main content; adapted from https://webaim.org/techniques/skipnav/ */
#skip a{
	font-weight: 600;
	text-decoration: underline;
	color: #fff;
	background: #305056;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: .15rem .55rem;
	position: absolute;
	top: -58px;
	left: 0;
	z-index: 150;
	transition: top .8s ease-out;
	-webkit-transition: top .8s ease-out;
}
@media only screen and (min-width: 480px){
	#skip a{
		padding: .4rem .55rem;
	}
}
@media only screen and (min-width: 768px){
	#skip a{
		padding: .55rem;
	}
}
#skip a:focus{
	outline-color: transparent;
	top: 0px;
	left: 0px;
	position: fixed;
	transition: top .4s ease-in;
	-webkit-transition: top .4s ease-in;
}
@media only screen and (min-width: 768px){
	#skip a:focus{
		position: absolute;
	}
}


/* 17.2. Logo */

nav .logo-container{
	margin: 0;
}
@media only screen and (min-width: 480px){
	nav .logo-container{
    margin-right: 1%;
	}
}
@media only screen and (min-width: 624px){
	nav .logo-container{
    margin: 0;
	}
}
nav .logo-container a{
	display: -webkit-flex;
  display: flex;
	align-items: center;
}
nav .logo-container a:hover,
nav .logo-container a:focus{
	color: #fff;
	background: transparent;
	outline: none;
}
/* OMV icon */
nav .logo-container a img{
	border: none;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
nav .logo-container a img{
	margin: 0;
	width: 29px;
	height: 29px;
}
@media only screen and (min-width: 480px){
	nav .logo-container a img{
		width: 36px;
		height: 36px;
	}
}
@media only screen and (min-width: 768px){
	nav .logo-container a img{
		width: 39px;
		height: 39px;
	}
}
nav .logo-container a:hover img,
nav .logo-container a:focus img{
	border: none;
	outline: 2px solid #fff;
}
/* OMV logo */
nav .logo-container a h1{
	font-family: 'Amaranth', sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
	white-space: nowrap;
	margin: 0 0 0 .5rem;
}
nav.overlay-nav .logo-container a h1#logo{
	display: none;
	visibility: hidden;
}
@media only screen and (min-width: 480px){
	nav .logo-container a h1{
		font-size: 1.7rem;
	}
}
@media only screen and (min-width: 768px){
	nav .logo-container a h1{
		font-size: 1.8rem;
	}
	nav.overlay-nav .logo-container a h1#logo{
		display: block;
		visibility: visible;
	}
}
nav .logo-container a:hover h1,
nav .logo-container a:focus h1{
	text-decoration: underline;
}


/* 17.3. Google Translate */

/* also see body, above, for one key bit of coding */
.goog-te-banner-frame.skiptranslate{
	display: none !important;
	visibility: hidden !important;
}
.translate-widget{
	margin: -1px auto 0;
}
.translate{
	padding-right: 5px;
  width: 203px;
  height: 32px;
	overflow: hidden !important;
	display: none;
	visibility: hidden;
}
.overlay-nav .translate{
	display: -webkit-flex;
  display: flex;
	visibility: visible;
}
@media only screen and (min-width: 480px){
	.translate-widget{
		margin: -1px auto 0 0;
	}
}
@media only screen and (min-width: 624px){
	.translate-widget{
		margin: 0;
	}
}
@media only screen and (min-width: 992px){
	.translate-widget{
		width: 203px;
	}
	.translate{
		display: -webkit-flex;
  	display: flex;
		visibility: visible;
	}	
}
.translate-widget:hover,
.translate-widget:focus-within{
	outline: 2px solid white;
}
.translate-widget:hover .hidden,
.translate-widget:focus-within .hidden{
	display: block;
}
.translate span{
	border: 2px solid transparent;
	padding: 0 6px;
	display: -webkit-flex;
  display: flex;
  align-items: center;
}
.translate img{
	background: none;
	border: none;
	width: 18px;
	height: 18px;
}
#google_translate_element > div > span > a > img{
	width: 3.5rem;
}
.skiptranslate.goog-te-gadget{
	background: #212119 !important;
	color: #fff !important;
}
#google_translate_element div.goog-te-gadget .goog-te-combo{
	font-size: .95rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	color: #212119;
	max-width: 160px; /* keeps the dropdown arrow inside the fixed-width .translate box */
	border: 2px solid transparent;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	margin: 0 0 0 -3px;
	padding: 1px 1px 1px 8px;
}
#google_translate_element div.goog-te-gadget .goog-te-combo:hover,
#google_translate_element div.goog-te-gadget .goog-te-combo:focus{
	outline: none;
}
.skiptranslate:nth-child(1){
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	color: #212119;
	padding-left: 4px;
	line-height: 2.5em;
	margin-top: .2rem;
}
.skiptranslate:nth-child(1) > span:nth-child(2),
.skiptranslate:nth-child(1) > span:nth-child(2){
	border: 2px transparent solid;
	margin-left: -2px;
	display: none;
	visibility: hidden;
}
.skiptranslate:nth-child(1) > span:nth-child(2):hover,
.skiptranslate:nth-child(1) > span:nth-child(2):focus-within{
	border: 2px #305056 solid;
	outline: none;
}
#google_translate_element > div > span > a > img,
#google_translate_element > div > span > a > img{
	border: 2px transparent solid;
	padding-right: 1px !important;
}
#google_translate_element > div > span > a > img:hover,
#google_translate_element > div > span > a > img:focus{
	border: 2px transparent solid;
	outline: none;
}
.goog-logo-link,
.goog-logo-link:link{
	font-size: 11px !important;
	font-weight: normal !important;
	color: #4D5B53 !important;
	background: #fff !important;
}
.original-text{
	text-align: left !important; /* Needed to remove WAVE error */
}
h1.title.gray{
	color: #575757 !important; /* Needed to remove WAVE error */
}


/* 17.4. Font-Awesome Buttons */

/* main button container */
nav .button-container,
nav.overlay-nav .button-container{
	white-space: nowrap;
	margin: 0;
	display: -webkit-flex;
  display: flex;
	align-items: center;
	justify-content: center;
}
nav.overlay-nav .button-container{
	width: 100%;
}
@media only screen and (min-width: 480px){
	nav .button-container{
		justify-content: flex-end;
		width: 100%;
	}
	nav.overlay-nav .button-container{
		justify-content: space-between;
		gap: .5rem; /* See Safari Support */
	}
}
@media only screen and (min-width: 624px){
	nav.overlay-nav .button-container{
		margin-left: 3rem;
	}
}
@media only screen and (min-width: 768px){
	nav .button-container,
	nav.overlay-nav .button-container{
		margin-left: 2.5rem;
		min-width: calc(50% + .5rem);
		justify-content: space-between;
	}
}
@media only screen and (min-width: 992px){
	nav .button-container,
	nav.overlay-nav .button-container{
		margin-left: 0;
		justify-content: flex-end;
		gap: 2rem; /* See Safari Support */
	}
}
.overlay-content .button-container{
	white-space: nowrap;
	margin: 0 auto;
	width: 200px;
	height: 60px;
	display: -webkit-flex;
  display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem; /* See Safari Support */
}
@media only screen and (min-width: 480px){
		.overlay-content .button-container{
			display: none;
			visibility: hidden;
	}
}
/* email icon positioning */
@media only screen and (min-width: 480px){
	nav.overlay-nav .button-container .tooltip-container:nth-child(5){
		margin-left: auto;
	}
}
@media only screen and (min-width: 624px){
	nav.overlay-nav .button-container .tooltip-container:nth-child(5){
		margin-left: 0;
	}
}
/* all icons icons */
nav .button-container .home-icon,
nav .button-container .sitemap-icon,
nav .button-container a.external{
	height: fit-content;
	display: none;
	visibility: hidden;
}
.overlay-content .button-container a.external{
	height: fit-content;
	margin: 0;
}
[aria-describedby="zotero-icon-1"],
[aria-describedby="zotero-icon-2"]{
	margin-top: 0.15rem;
}
@media only screen and (min-width: 480px){
	nav.overlay-nav .button-container a.external{
    display: -webkit-flex;
  	display: flex;
    visibility: visible;
    align-items: center;
    justify-content: center;
	}
}
@media only screen and (min-width: 624px){
	nav .button-container .sitemap-icon{
		display: -webkit-flex;
  	display: flex;
    visibility: visible;
    align-items: center;
    justify-content: center;
	}
}
@media only screen and (min-width: 992px){
	nav .button-container .home-icon{
		display: -webkit-flex;
  	display: flex;
    visibility: visible;
    align-items: center;
    justify-content: center;
	}
	nav .button-container a.external{
		display: -webkit-flex;
  	display: flex;
    visibility: visible;
    align-items: center;
    justify-content: center;
	}
}
nav .button-container a.external:hover,
nav .button-container a.external:focus,
.overlay-content .button-container a.external:hover,
.overlay-content .button-container a.external:focus{
	background: transparent;
	outline: none;
}
/* font-awesome icons */
nav .button-container a.external i{
	margin: 0 .15rem;
	padding: .25rem .5rem;
}
.overlay-content .button-container a.external i{
	margin: 0;
	padding: .5rem .75rem;
}
nav .button-container a.external i{
	font-size: 1.6rem;
	color: #E7E9E7;
}
.overlay-content .button-container a.external i{
	font-size: 1.8rem;
	color: #fff;
}
nav .button-container a.external:hover i,
nav .button-container a.external:focus i{
	color: #212119;
	background: #fff;
}
/* tooltip hover/focus */
.overlay-content .button-container .tooltip-container:hover,
.overlay-content .button-container .tooltip-container:focus-within{
	background: #E7E9E7;
	transition: .2s;
}
.overlay-content .button-container .tooltip-container:hover i,
.overlay-content .button-container .tooltip-container:focus-within i{
	color: #212119;
	transition: .2s;
}


/* 17.5. Hamburger Menu and Close */

/* menu-icon/close-icon = tooltip container */
nav .menu-icon{
	margin: 0;
}
nav.overlay-nav .menu-icon{
	display: none;
	visibility: hidden;
}
nav .close-icon{
	margin: 0 0 .1rem;
	display: none;
	visibility: hidden;
}
nav.overlay-nav .close-icon.mobile{
	display: block;
	visibility: visible;
}
nav.overlay-nav .close-icon.desktop{
	display: none;
	visibility: hidden;
}
/* hamburger-menu/close = button */
nav .hamburger-menu,
nav .close{
	color: #fff;
	background: transparent;
	border: none;
	cursor: pointer;
}
nav .hamburger-menu{
	padding: 6px 7px 4px;
}
nav .close{
	padding: 5px 9px;
}
@media only screen and (min-width: 768px){
	nav .menu-icon{
		margin-left: .5rem;
	}
	nav .close-icon{
		margin-left: .5rem;
	}
	nav .hamburger-menu{
		padding: 6px 7px 5px;
	}
}
@media only screen and (min-width: 992px){
	nav.overlay-nav .close-icon.mobile{
		display: none;
		visibility: hidden;
	}
	nav.overlay-nav .close-icon.desktop{
		display: block;
		visibility: visible;
	}
}
nav .menu-icon:hover,
nav .menu-icon:focus-within,
nav .close-icon:hover,
nav .close-icon:focus-within
{
	background: #fff;
}
/* fallback nav; appears only when Javascript disabled */
nav.fallback .hamburger-menu{
	margin: 0 0.5rem 0 0;
	display: -webkit-flex;
	display: flex;
	visibility: visible;
}
/* hamburger-menu/close icons */
nav .hamburger-menu .fa-bars,
nav .close .fa-times{
	font-size: 1.5rem;
}
@media only screen and (min-width: 480px){
	nav .hamburger-menu .fa-bars,
	nav .close .fa-times{
		font-size: 1.6rem;
	}
}
@media only screen and (min-width: 768px){
	nav .hamburger-menu .fa-bars,
	nav .close .fa-times{
		font-size: 1.7rem;
	}
}
nav .menu-icon:hover .fa-bars,
nav .menu-icon:focus-within .fa-bars,
nav .close-icon:hover .fa-times,
nav .close-icon:focus-within .fa-times{
	color: #212119;
}


/* 17.6. Breadcrumbs */

/* main container */
header nav.breadcrumbs{
	border-bottom: 1px solid #737373;
	padding: .1rem 0;
	width: 100%;
}
/* list of breadcrumbs */
header nav.breadcrumbs ul{
	font-size: .75rem;
	color: #fff;
	list-style: none;
	line-height: 1rem;
	padding:  .4rem .5rem;
	width: 100%;
	display: -webkit-flex;
	display: flex;
}
@media only screen and (min-width: 768px){
	header nav.breadcrumbs ul{
		font-size: .83rem;
		padding: .5rem;
	}
}
@media only screen and (min-width: 992px){
	header nav.breadcrumbs ul{
		padding: .5rem .8rem;
	}
}
/* breadcrumb items */
header nav.breadcrumbs ul li:not(:first-child):before{
	content: '/';
	margin: 0 .25rem;
}
header nav.breadcrumbs ul li a{
	text-decoration: underline;
	line-height: 1rem;
	padding: .15rem .25rem;
}
header nav.breadcrumbs ul li a:first-child{
	padding: 0 .25rem;
}
header nav.breadcrumbs ul li a:hover,
header nav.breadcrumbs ul li a:focus{
	color: #212119;
  background: #fff;
  outline: none;
}
/* items (plain levels) and historical material items (transcription levels) */
#level-2,
#level-3,
#level-4,
#level-5{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#level-2,
#level-3,
#level-4,
#level-5{
	max-width: 4rem;
}
@media only screen and (min-width: 480px){
	#level-2,
	#level-3,
	#level-4,
	#level-5{
		max-width: 6.5rem;
	}
}
@media only screen and (min-width: 624px){
	#level-2,
	#level-3,
	#level-4,
	#level-5{
		max-width: 10rem;
	}
}
@media only screen and (min-width: 768px){
	#level-2,
	#level-3,
	#level-4,
	#level-5{
		max-width: 14rem;
	}
}
@media only screen and (min-width: 992px){
	#level-2,
	#level-3,
	#level-4,
	#level-5{
		max-width: 20rem;
	}
}
@media only screen and (min-width: 1200px){
	#level-2,
	#level-3,
	#level-4,
	#level-5{
		max-width: 24rem;
	}
}
@media only screen and (min-width: 1366px){
	#level-2,
	#level-3,
	#level-4,
	#level-5{
		max-width: 28rem;
	}
}
@media only screen and (min-width: 1600px){
	#level-2,
	#level-3,
	#level-4,
	#level-5{
		max-width: 32rem;
	}
}


/* 18. Overlay */

/* Adapted from https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp */
/* main container */
.overlay{
	font-size: 1.05rem;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	/* min-height needs to be 3px larger than header height or overlay exceeds window in Safari */
	min-height: calc(100vh - 84px);
	width: 100%;
	max-width: 1600px;
	overflow: hidden;
	display: none;
	visibility: hidden;
}
@media only screen and (min-width: 480px){
	.overlay{
		min-height: calc(100vh - 89px);
	}
}
@media only screen and (min-width: 768px){
	.overlay{
		font-size: 1.1rem;
		min-height: calc(100vh - 95px);
	}
}
@media only screen and (min-width: 1200px){
	.overlay{
		min-height: calc(100vh - 98px);
	}
}
/* sub-container: colored background on left on larger devices */
.overlay > div{
	display: none;
	visibility: hidden;
}
@media only screen and (min-width: 624px){
	.overlay > div{
		background: #DA9C5D;
    height: auto;
		flex-grow: 1;
		display: block;
		visibility: visible;
	}
}
/* sub-container: button/text content container of overlay */
.overlay-content{
	white-space: nowrap;
	background: #243D42;
	margin: 0 auto;
	padding: .5rem 1rem 2rem;
	width: 100%;
	/* overflow: auto;
	scrollbar-gutter: stable; */
}
@media only screen and (min-width: 624px){
	.overlay-content{
		padding: 1rem 1rem 2rem;
		width: 50%;
	}
}
/* text content container of overlay (cf. button container) */
.overlay .text-container{
  background: inherit;
	margin: 0;
  padding: 0 1rem 1rem;
}
@media only screen and (min-width: 624px){
  .overlay .text-container{
    padding: .5rem 0;
  }
}
.overlay .text-container{
  text-align: left;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}
/* icons, headings, links, buttons in overlay text content */
.overlay .text-container i{
	margin-right: .5rem;
	width: 1.25rem;
}
.overlay .text-container h2,
.overlay .text-container a,
.overlay .text-container a:visited,
.overlay .text-container button{
  color: #fff;
  text-decoration: none;
}
.overlay .text-container h2{
  font-size: 1.1rem;
	font-weight: 400;
	font-style: inherit;
	font-family: 'Source Sans Pro', sans-serif;
	border-bottom: 1px solid #ededed;
	border-left: none;
	margin: 0;
	padding: 0;
  height: 60px;
}
.overlay .text-container h2:last-child{
	border: none;
}
.overlay .text-container a{
  margin: .25rem 0;
  padding: 0 .5rem;
  width: calc(100% - 1rem);
  height: calc(100% - .5rem);
  display: -webkit-flex;
  display: flex;
  align-items: center;
	cursor:pointer;
  transition: .2s;
}
.overlay .text-container a{
  width: 100%;
}
.overlay .text-container a:hover,
.overlay .text-container a:focus{
	color: #212119;
	background: #E7E9E7;
	outline: none;
}


/* 19. Footer */

/* main container */
footer{
	font-weight: 400;
	text-align: center;
	color: #fff;
	background: #305056;
	margin: 0 auto;
	padding: 0;
	max-width: 1600px;
	clear: both;
}
@media only screen and (min-width: 480px){
	footer{
		margin: 0 auto;
	}
}
/* text container */
footer p{
	line-height: 2rem;
	margin: 0;
	padding: 1rem;
}
@media only screen and (min-width: 768px){
	footer p{
		padding: 1rem 1.5rem;
	}
}
/* items in text container */
footer p .site-detail{
	padding: 0 .2rem;
}
footer p .site-detail:after{
	content: ' | ';
	padding-left: .5rem;
}
footer p .site-detail:last-child:after{
	content: '';
}
@media only screen and (min-width: 480px){
	footer p .site-detail{
		padding: 0 .3rem;
	}
}
@media only screen and (min-width: 768px){
	footer p .site-detail{
		white-space: nowrap;
	}
}
/* links in footer */
footer a,
footer a:visited{
	color: #fff;
}
footer a:hover,
footer a:focus{
	color: #7d4d1c;
	background: #E7E9E7;
	outline: none;
}


/* 20. Scroll to top button */

/* Adapted from https://www.w3schools.com/howto/howto_js_scroll_to_top.asp */
#topButton{
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background: #4d5b51;
	border: 2px solid #fff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	outline: none;
	padding: 5px;
	width: 60px;
	height: 60px;
	position: fixed;
	top: .5rem;
	right: .5rem;
	z-index: 75;
	opacity: .97;
	display: none;
	visibility: hidden;
	justify-content: center;
	align-items: center;
}
@media only screen and (min-width: 992px){
	#topButton{
		top: unset;
		right: 3rem;
		bottom: 5.5rem;
	}
}
@media only screen and (min-width: 1200px){
	#topButton{
		right: 4rem;
	}
}
  #topButton:hover,
  #topButton:focus{
	color: #4d5b51;
	background: #fff;
	border: 2px solid #4d5b51;
}
#topButton:active{
	color: #fff;
	background: #4d5b51;
	border: 2px solid transparent;
}


/* 21. Lists */

ol,
ul{
	margin: 0;
	padding: 0 0 0 1.4rem;
}
ol li ol{
	padding: 0 0 0 .6rem;
}
@media only screen and (min-width: 768px){
	ol li ol{
		padding-left: 1.2rem;
	}
}
.indented-list{
	margin-left: 1.4rem;
	padding-left: 0;
}
@media only screen and (min-width: 624px){
	.indented-list{
		padding-left: 1.4rem;	
	}
}
.noindent-list{
	margin-left: 0;
	padding-left: 0;
}
.nostyle-list{
	list-style: none;
}
.padded-list li{
	padding-bottom: 1rem;
}
.double-padded-list li{
	padding-bottom: 2rem;
}
.padded-list li:last-child,
.double-padded-list li:last-child{
	padding-bottom: 0;
}


/* 22. Lines */

/* hr from HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
hr{
  height: 1px;
  border: 0;
  border-top: 1px solid #58484b;
  margin: 1rem 0;
  padding: 0;
}
hr.section-divider{
	border-top: 4px solid #58484b;
}
section + hr.section-divider{
	margin: 1.5rem auto 0;
}
@media only screen and (min-width: 768px){
	section + hr.section-divider{
		margin: 2rem auto 0;
	}	
}
.content.recovered section + hr.section-divider{
	border-top: 2px solid #58484b;
	margin: 2.25rem auto 0;
	width: calc(100% - 1rem);
}
@media only screen and (min-width: 992px){
	.content.recovered section + hr.section-divider{
		width: calc(100% - 2.5rem);
	}
}
@media only screen and (min-width: 1200px){
	.content.recovered section + hr.section-divider{
		width: calc(100% - 3rem);
	}
}
.wide-hr{
	margin: 2rem 0;
}


/* 23. Text/Warning Boxes & Info Notes */

aside.text-box,
aside.warning-box{
	background: #E7E9E7;
	border: 1px solid #bdc2bd;
	border-top: 5px solid #8db7bf;
	border-bottom: 5px solid #8db7bf;
	padding: 1rem;
}
aside.text-box{
	border-top: 5px solid #8db7bf;
	border-bottom: 5px solid #8db7bf;
	margin: 1.5rem auto;
}
aside.warning-box{
	margin: 1.5rem auto 2.5rem;
}
@media only screen and (min-width: 992px){
	aside.warning-box{
		margin: 1rem auto 2.5rem;
	}
}
aside.warning-box.violence,
aside.warning-box.language{
	border-top: 5px solid #85454B;
	border-bottom: 5px solid #85454B;
	max-width: 700px;
}
.info-note{
	font-size: 1rem;
	font-style: italic;
	line-height: 1.875rem;
	margin-bottom: 2.5rem;
}
.info-paragraph{
	margin-bottom: 3rem;
}


/* 24. Keycap */

/* simulates keyboard key; only used on project_design */ 
.keycap{
	font-size: .95em;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	text-align: center;
	color: #212119;
	background: #f1f1f1;
	border: 1px solid #212119;
	border-width: 1px 2px 2px 1px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin: 1px;
	padding: 0 2px;
	min-width: 17px;
}


/* 25. General Formatting */

/* bold class only appears in a few TEI files and is auto-generated */
.bold,
strong{
	font-weight: 600;
}
.caps{
	text-transform: uppercase;
}
.center{
	text-align: center;
}
.half{
	width: 50%;
}
.hidden{
  display: none;
}
.highlight{
	color: #743B41;
}
.italic{
	font-style: italic;
}
.left{
	text-align: left;
}
.leftmargin{
	margin-left: 1.5rem;
}
.right{
  text-align: right;
}
.site-red{
	color: #743B41;
}
.small{
	font-size: .9em;
}
.smallcaps{
	font-size: .9em;
	font-variant: small-caps;
}
.underline{
	text-decoration: underline;
}


/* 26. Thematic Initiatives Page Images */

/* Also see https://stackoverflow.com/a/55557988 for the following */
/* double image set up */
.double-image{
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;/* See Safari Support */
}
@media only screen and (min-width: 480px){
	.double-image{
		flex-direction: row;
	}
}
/* captions for double images */
img + p.caption-text,
.double-image + p.caption-text{
	font-size: .9rem;
	line-height: 1.6rem;
	margin: 10px 0 1em 0;
	padding: 0;
}
p.caption-text + p.caption-text{
	font-size: .9rem;
	line-height: 1.6rem;
}
/* adds margin to double image captions */
.caption-text > span:not(:last-child){
	margin-bottom: 10px;
	display: inline-block;
}
/* identifies double image captions responsively */
.left-right{
	display: none;
	visibility: hidden;
}
@media only screen and (min-width: 480px){
	.top-bottom{
		display: none;
		visibility: hidden;
	}
	.left-right{
		display: inline-block;
		visibility: visible;
	}
}


/* 27. Object Gallery: Visual Materials & Motion Pictures */

/* institute flex */
@media only screen and (min-width: 480px){
	.visuals.gallery{
		flex-direction: row;
		flex-wrap: wrap;
	}
}
@media only screen and (min-width: 624px){
	.films.gallery{
		flex-direction: row;
		flex-wrap: wrap;
	}
}
/* visuals: gap */
.visuals.gallery{
	gap: 2rem; /* See Safari Support */
}
/* flex percentages: visuals */
@media only screen and (min-width: 480px){
	.visuals.gallery figure{
		flex: 0 0 calc(50% - 1rem);
	}
}
@media only screen and (min-width: 624px){
	.visuals.gallery figure{
		flex: 0 0 calc(33.33% - 1.33333rem);
	}
}
@media only screen and (min-width: 1200px){
	.visuals.gallery figure{
		flex: 0 0 calc(25% - 1.5rem);
	}
}
@media only screen and (min-width: 1366px){
	.visuals.gallery figure{
		flex: 0 0 calc(20% - 1.75rem);
	}
}
@media only screen and (min-width: 1600px){
	.visuals.gallery figure{
		flex: 0 0 calc(17% - 2rem);
	}
}
/* films: gap */
.films.gallery{
	gap: 1.5rem;
}
@media only screen and (min-width: 1200px){
	.films.gallery{
		gap: 2rem;
	}
}
@media only screen and (min-width: 1600px){
	.films.gallery{
		gap: 2.5rem;
	}
}
/* flex percentages: films */
@media only screen and (min-width: 624px){
	.films.gallery figure{
		flex: 0 0 calc(50% - .75rem);
	}
}
@media only screen and (min-width: 1200px){
	.films.gallery figure{
		flex: 0 0 calc(33.33% - 1.5rem);
	}
}
@media only screen and (min-width: 1600px){
	.films.gallery figure{
		flex: 0 0 calc(25% - 2.5rem);
	}
}
/* min height: films */
@media only screen and (min-width:320px){
	.films.gallery figure{
		min-height: 384px;
	}
}
@media only screen and (min-width: 480px){
	.films.gallery figure{
		min-height: 464px;
	}
}
@media only screen and (min-width: 624px){
	.films.gallery figure{
		min-height: 382px;
	}
}
@media only screen and (min-width: 768px){
	.films.gallery figure{
		min-height: 393px;
	}
}
@media only screen and (min-width: 992px){
	.films.gallery figure{
		min-height: 428px;
	}
}
@media only screen and (min-width: 1200px){
	.films.gallery figure{
		min-height: 438px;
	}
}
@media only screen and (min-width: 1366px){
	.films.gallery figure{
		min-height: 469px;
	}
}
@media only screen and (min-width: 1600px){
	.films.gallery figure{
		min-height: 438px;
	}
}
/* gallery set up: films and visuals */
.gallery{
	margin: 0;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
	justify-content: center;
}
/* main gallery containers (i.e., cards) for films and visuals */
.gallery figure{
	margin: 0;
}
.films.gallery figure{
  background: #ededed;
  -webkit-box-shadow: #697c6f 0px 3px 7px 0px;
  -moz-box-shadow: #697c6f 0px 3px 7px 0px;
  box-shadow: #697c6f 0px 3px 7px 0px;
	-webkit-border-radius: 6px;
  -moz-border-radius: 6px;
	border-radius: 6px;
	padding: 1rem;
	width: 100%;
}
/* visuals image containers and images */
.visuals.gallery .image-container{
	padding: 0;
}
.visuals.gallery figure img{
	border: 4px solid #E7E9E7;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	width: 100%;
	max-width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	overflow: hidden;
}
.visuals.gallery figure a:hover,
.visuals.gallery figure a:focus{
	outline: none;
}
.visuals.gallery figure a:hover img,
.visuals.gallery figure a:focus img{
	border: 4px #305056 solid;
}
/* container for metadata: films and visuals */
.visuals.gallery figure figcaption{
	font-size: .95rem;
	text-align: center;
	line-height: 1.6rem;
	margin-top: .5rem;
}
.films.gallery figure figcaption{
	font-size: 1rem;
	line-height: 1.5rem;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .75rem; /* See Safari Support */
}
@media only screen and (min-width: 480px){
	.films.gallery figure figcaption{
		padding: 0 1rem 1rem;
	}
}
@media only screen and (min-width: 624px){
	.films.gallery figure figcaption{
		padding: 0;
	}
}
@media only screen and (min-width: 992px){
	.films.gallery figure figcaption{
		padding: 0 1rem 1rem;
	}
}
/* subsection title slides for films */
.films.gallery figure.title-slide{
	font-size: 1rem;
	min-height: 138px;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
/* metadata details for films */
.films.gallery figure figcaption h4{
  font-size: 1.3rem;
  font-family: 'Amaranth', sans-serif;
  font-weight: 400;
	line-height: 1.875rem;
	color: #305056;
  margin: 1.5rem 0 .5rem;
  padding: 0 0 .5rem 0;
}
.films.gallery figure figcaption p{
	margin: 0;
	line-height: 1.6rem;
}
/* expandable notes for films */
.films.gallery figure figcaption summary{
	font-weight: 600;
}
.films.gallery figure figcaption summary::after{
	content: "expand";
	font-size: .9em;
	font-family: inherit;
	font-weight: 400;
	text-decoration: underline;
	text-transform: uppercase;
	white-space: nowrap;
	color: #305056;
	margin-left: .25rem;
}
.films.gallery figure figcaption details[open] > summary:after{
	content: "collapse";
}


/* 28. Motion Pictures */

/* YouTube player taken from https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743 */
/* Review https://codepen.io/beardofprey/pen/MXmxXR */
/* YouTube frame and image */
.youtube{
	cursor: pointer;
	padding-top: 56.25%;
	overflow: hidden;
	position: relative;
}
.youtube:hover,
.youtube:focus{
	outline: 4px #305056 solid;
}
.youtube iframe,
.youtube img{
	position: absolute;
}
.youtube iframe{
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 3; /* Hides pay button when iframe loads */
}
.youtube img{
	width: 100%;
	top: -16.82%;
	left: 0;
}
/* YouTube play button */
.play-button,
.play-button:before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.play-button{
	background: #902D27;
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	width: 60px;
	height: 40px;
	z-index: 2;
}
@media only screen and (min-width: 480px){
	.play-button{
		width: 90px;
		height: 60px;
		opacity: .94;
	}
}
.play-button:before{
	content: "";
	border-style: solid;
	border-width: 10px 0 10px 18px;
	border-color: transparent transparent transparent #fff;
}
@media only screen and (min-width: 480px){
	.play-button:before{
		border-width: 15px 0 15px 26px;
	}
}
:hover > .play-button,
:focus-within > .play-button{
	background: #305056;
}
/* Image for external site video */
/* Ratio box adapted from https://pqina.nl/blog/presenting-images-in-an-aspect-ratio-with-css/ */
.screenshot{
	position: relative;
}
.screenshot:after{
	display: block;
	content: '';
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.screenshot:hover,
.screenshot:focus-within{
	outline: 4px solid #305056;
}
.screenshot img{
	border: none;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: top;
	object-position: top;
	top: 0;
	left: 0;
	position: absolute;
}
.screenshot a:hover,
.screenshot a:focus,
.screenshot a:hover img,
.screenshot a:focus img{
	border: none;
	outline: none;
}
/* Video overlay text */
.skipcontrols a{
	top: -44px;
}
.skipcontrols a:focus{
	color: #fff;
	background: #305056;
	outline-color: transparent;
	top: 0;
	transition: top .4s ease-in;
	-webkit-transition: top .4s ease-in;
}
mark.advisory{
	bottom: 0;
}
.skipcontrols a,
mark.advisory,
mark.running-time{
	font-size: .9em;
	line-height: 1rem;
	color: #fff;
	position: absolute;
	z-index: 10;
}
.skipcontrols a,
mark.advisory{
	background: #305056;
	border-right: 2px solid #fff;
	padding: 8px;
	left: 0;
	transition: top 1s ease-out;
	-webkit-transition: top 1s ease-out;
}
.skipcontrols a{
	border-bottom: 2px solid #fff;
	-webkit-border-bottom-right-radius: 8px;
	-moz-border-bottom-right-radius: 8px;
	border-bottom-right-radius: 8px;
}
mark.advisory{
	border-top: 2px solid #fff;
	-webkit-border-top-right-radius: 8px;
	-moz-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
}
mark.running-time{
	background: #212119;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-border-top-right-radius: 8px;
	-moz-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
	padding: 6px 8px;
	bottom: 0;
	left: 0;
	display: none;
	visibility: hidden;
}
@media only screen and (min-width: 768px){
	mark.advisory{
		display: none;
		visibility: hidden;
	}
}
:hover > mark.advisory,
:focus-within > mark.advisory{
	display: block;
	visibility: visible;
}


/* 29. Site Map */

.site-map{
	line-height: 1.7rem;
}
/* lists */
.site-map ol li:first-child{
	margin-top: .5rem;
}
.site-map li{
	margin-bottom: 1rem;
	padding-left: .5rem;
}
/* sublists */
/* Taken from https://stackoverflow.com/a/56758842 */
details > summary{
  list-style: none;
	cursor: pointer;
	display: inline;
	vertical-align: top;
}
details[open] > p:first-of-type{
	padding: .5rem 0;
}
details[open] > ul,
details[open] > ol{
	margin: 0 0 0 1rem;
	padding: .5rem 0 0;
}
.toc details[open] > ol{
	padding: 0 0 0 1rem;
}
summary::-webkit-details-marker{
  display: none;
}
summary::after{
	content: "\f0da";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	white-space: nowrap;
	margin-left: .25rem;
}
details[open] > summary:after{
  content: "\f0d7";
}
summary:hover,
summary:focus{
	color: #212119;
	background: #E7E9E7;
	outline: 3px solid #e3b382;
}
details ::marker,
details:focus-within ::marker{
	white-space: nowrap;
}


/* 30. Site Sections */

.essay .site-links{
	margin: 0 0 1rem;
	display: -webkit-flex;
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.essay .site-links  a.action-button{
	font-size: 1rem;
	text-transform: none;
	white-space: nowrap;
	border: none;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	margin: 1.25rem 1rem;
	padding: 10px 0;
	width: 12.5rem;
	display: -webkit-flex;
  display: flex;
	visibility: visible;
	align-items: center;
	justify-content: center;
}
.essay .site-links  a.action-button{
	color: #212119;
}
.essay .site-links  a.action-button:hover,
.essay .site-links  a.action-button:focus{
	color: #fff;
}
.essay .site-links i{
	font-size: 1.4rem;
	margin-right: .4rem;
}


/* 31. 404 Page */

@media only screen and (min-width: 992px){
	.error404 main{
		margin-top: 1rem;
	}
}
/* error text container */
.error404 main div{
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
@media only screen and (min-width: 992px){
	.error404 .page-details div{
		min-width: 375px;
	}
}
@media only screen and (min-width: 1200px){
	.error404 .page-details div{
		min-width: 450px;
	}
}
/* error text elements */
.error404 main span{
	text-align: center;
}
.error404 main span h2{
	font-size: 2rem;
	text-align: left;
}
@media only screen and (min-width: 768px){
	.error404 main span h2{
		font-size: 2.7rem;
	}
}
.error404 main span p:last-child{
	margin-bottom: 0;
}


/* 32. BIPOC Voices */

/* overrides default spacing on title slide */
.essay .page-details .bv-title{
	margin: 1rem 0 0;
}
@media only screen and (min-width: 768px){
	.essay .page-details .bv-title{
		margin: 2rem 0 0;
	}
}
@media only screen and (min-width: 992px){
	.essay .page-details .bv-title{
		margin: 0;
	}
}
/* increases size of bv essay titles */
@media only screen and (min-width: 992px){
	.essay.critical .bv-title h2{
		font-size: 1.7rem;
	}
	.essay.critical .bv-title p{
		font-size: 1.1rem;
	}
}
@media only screen and (min-width: 1200px){
	.essay.critical .bv-title h2{
		font-size: 2rem;
		margin-top: .5rem;
	}
	.essay.critical .bv-title h2.large{
		font-size: 2.1rem;
	}
	.essay.critical .bv-title h2.larger{
		font-size: 2.2rem;
	}
	.essay.critical .bv-title h2.largest{
		font-size: 2.3rem;
	}
	.essay.critical .bv-title h2.small{
		font-size: 1.9rem;
	}
	.essay.critical .bv-title h2.smaller{
		font-size: 1.8rem;
	}
	.essay.critical .bv-title h2.smallest{
		font-size: 1.7rem;
	}
} 
@media only screen and (min-width: 1366px){
	.essay.critical .bv-title h2{
		font-size: 2.6rem;
	}
}
/* bipoc voices project button on all pages */
#bv-project,
#bv-details-project{
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
}
#bv-project{
	margin: 2rem 0 1.5rem;
	text-align: center;
}
#bv-details-project{
	margin: 1.5rem 0 2.5rem;
}
@media only screen and (min-width: 480px){
	#bv-project,
	#bv-details-project{
		font-size: 1rem;
	}
	#bv-details-project{
		margin: 2rem 0 2.5rem;
	}
}
@media only screen and (min-width: 992px){
	#bv-project{
		text-align: left;
	}
	#bv-details-project{
		margin: 1rem 0 2.5rem;
	}
}
#bv-project a,
#bv-details-project a{
	color: #212119;
	text-decoration: none;
	text-align: center;
	background: #d9d9d9;
	background-image: linear-gradient(#d9d9d9, #E7E9E7);
	-webkit-box-shadow: #bdc2bd 0px 1px 3px 2px;
	-moz-box-shadow: #bdc2bd 0px 1px 3px 2px;
	box-shadow: #bdc2bd 0px 1px 3px 2px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding: .5rem .75rem;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
#bv-project a:hover,
#bv-details-project a:hover,
#bv-project a:focus,
#bv-details-project a:focus{
	color: #fff;
	background: #305056;
	border: 1px solid #305056;
	/* outline: none; */
}
/* theming for authorship card */
@media only screen and (min-width: 992px){
	.production-details{
		font-size: 1.1rem;
		text-align: center;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		-webkit-box-shadow: #697c6f 0px 1px 6px 0px;
		-moz-box-shadow: #697c6f 0px 1px 6px 0px;
		box-shadow: #697c6f 0px 1px 6px 0px;
		padding: 1rem 1.5rem;
		margin-top: 2rem;
		position: relative;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
	}
}
/* staples on authorship card */
@media only screen and (min-width: 992px){
	.production-details::before,
	.production-details::after{
		content: "";
		width: 2rem;
		height: .25rem;
		border-right: 6px solid;
		border-left: 6px solid;
		-webkit-box-shadow: #697c6f 1px 0px 5px 1px inset;
		-moz-box-shadow: #697c6f 1px 0px 5px 1px inset;
		box-shadow: #697c6f 1px 0px 5px 1px inset;
		position: absolute;
		top: 1rem;
	}
	.production-details::before{
		left: 1rem;
	}
	.production-details::after{
		right: 1rem;
	}
}
.production-details > span{
	display: block;
}
.production-details  + .toc{
	margin-top: 1.5rem;
}
@media only screen and (min-width: 992px){
	.production-details  + .toc{
		margin-top: 4rem;
	}
}
/* spacing on author list on mobile */
.authorship.mobile p{
	margin: .75rem 0;
}
/* font-size and space above/below on warning box */
aside.warning-box.bv-essay{
	font-size: 1rem;
	margin: 1.5rem auto .5rem;
}
@media only screen and (min-width: 768px){
	aside.warning-box.bv-essay{
		margin: 1.5rem auto 0;
	}
}
@media only screen and (min-width: 992px){
	aside.warning-box.bv-essay{
		font-size: 1.05rem;
		margin: 4rem auto 0;
	}
	aside.warning-box.bv-essay + .toc{
		margin-top: 4rem;
	}
}


/* 33. Recovering Histories */

 /* vertical images */
@media only screen and (min-width: 480px){
	.recovering-histories .vertical {
		display: block;
	}
	.recovering-histories	.vertical img {
		margin: 0 auto;
		width: 70%;
		display: inline-block;
	}
}
/* captions for vertical images */
.recovering-histories .vertical + p.caption-text{
	font-size: .9rem;
	line-height: 1.6rem;
	margin: 10px auto 1rem;

}
@media only screen and (min-width: 480px){
	.recovering-histories .vertical + p.caption-text{
	width: 70%;
	}
}
/* subsections in outcomes section */
.recovering-histories section.content:not(.recovered) article section section:not(:first-of-type){
	margin-top: 2.5rem;
}
@media only screen and (min-width: 768px){
	.recovering-histories section.content:not(.recovered) article section section:not(:first-of-type){
		margin-top: 3rem;
	}	
}
@media only screen and (min-width: 992px){
	.recovering-histories section.content:not(.recovered) article section section:not(:first-of-type){
		margin-top: 3.5rem;
	}	
}


/* Safari Support: Mobile and Safari below 14.1 */
/* Adapted from  https://ppuzio.medium.com/flexbox-gap-workaround-for-safari-on-ios-14-13-and-lower-ffcae589eb69 and 
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries */
@supports (-webkit-touch-callout: none) and (not (translate: none)){
	/* Easy stuff */
	/* Mainly spacing among elements where gap is used otherwise; in particular, see all the margin settings below; use parents elements to find items in the CSS above */
	.categories .introduction-section .introduction-text > *:not(:first-child),
	.editions .introduction-section .introduction-text > *:not(:first-child){
		margin-top: 1rem;
	}
	/* needed as otherwise the text background on these pages does not appear */
	@media only screen and (min-width: 992px){
		.home .introduction-section .introduction-text,
		.categories .introduction-section .introduction-text,
		.editions .introduction-section .introduction-text{
			background: #ededed;
		}
	}
	@media only screen and (min-width: 992px){
		.essay .page-details > *:not(:last-child){
			margin-left: 2rem;
		}
	}
	#books .sections .section-container > *,
	#texts .sections .section-container > *{
		margin-top: 1.25rem;
	}
	#books .sections .section-container > *:first-child,
	#texts .sections .section-container > *:first-child{
		margin-bottom: 1rem;
	}
	#texts .image-biography > *:not(:first-child){
		margin-top: 1.5rem;
	}
	@media only screen and (min-width: 480px){
		#texts .image-biography > *:not(:first-child){
			margin-left: 1rem;
		}
	}
	@media only screen and (min-width: 480px){
		nav.overlay-nav .button-container > *:not(:first-child){
			margin-left: .5rem !important;
		}
	}
	@media only screen and (min-width: 992px){
		nav .button-container  > *:not(:first-child),
		nav.overlay-nav .button-container > *:not(:first-child){
			margin-left: 2rem !important;
		}
	}
	.overlay-content .button-container > *:not(:first-child){
			margin-left: 1rem;
	}
	/* needed to that the image with Google translate is not bunched up */
	.translate img{
		width: auto;
	}
	.double-image > *:not(:first-child){
		margin: 10px 0 0 0;
	}
	@media only screen and (min-width: 480px){
		.double-image > *:not(:first-child){
			margin: 0 0 0 10px;
		}
	}
	.films.gallery figure figcaption > *:not(:first-child){
		margin-top: .75rem;
	}
	/* Tricky stuff */
	/* mainly all related to gap spacing of cards/other items in various galleries */
	/* padding adjustments, part 1 */
	@media only screen and (min-width: 1200px){
		#books,
		#texts,
		#films{
			padding: 1rem 0 0;
		}
	}
	/* spacing around cards & wrapper compensation */
	.categories .sections > *,
	.editions .sections > *,
	#books .sections > *,
	.films.gallery > *{
		margin: .75rem .375rem;
	}
	.categories .sections,
	.editions .sections,
	#books .sections,
	.films.gallery{
		margin: -.75rem -.375rem;
	}
	/* Texts needs separate break out; not clear why */
	#texts .sections > *{
		margin: 1.5rem .375rem;
	}
	#texts .sections{
		margin: -1.5rem -.375rem;
	}
	.visuals.gallery > *{
		margin: 1rem .5rem;
	}
	.visuals.gallery{
		margin: -1rem -.5rem;
	}
	@media only screen and (min-width: 1200px){
		.categories .sections > *,
		.editions .sections > *,
		#books .sections > *,
		.films.gallery > *{
			margin: 1rem .5rem;
		}
		.categories .sections,
		.editions .sections,
		#books .sections,
		.films.gallery{
			margin: -1rem -.5rem;
		}
		#texts .sections > *{
			margin: 2rem .5rem;
		}
		#texts .sections{
			margin: -2rem -.5rem;
		}
	}
	@media only screen and (min-width: 1600px){
		.categories .sections > *,
		.editions .sections > *,
		#books .sections > *,
		.films.gallery > *{
			margin: 1.25rem .625rem;
		}
		.categories .sections,
		.editions .sections,
		#books .sections,
		.films.gallery{
			margin: -1.25rem -.625rem;
		}
		#texts .sections > *{
			margin: 2.5rem .625rem;
		}
		#texts .sections{
			margin: -2.5rem -.625rem;
		}
	}
	/* horizontal ruler compensation */
	section + hr.section-divider{
		margin: 1.5rem auto;
	}
	@media only screen and (min-width: 768px){
		section + hr.section-divider{
			margin: 2rem auto;
		}	
	}
	.content.recovered section + hr.section-divider{
		margin: 2.25rem auto;
	}
	/* padding adjustments, part 2 */
	@media only screen and (min-width: 1200px){
		.content.recovered.full-page{
			margin: 0 2rem;
			padding: 0;
		}
	}
	@media only screen and (min-width: 1600px){
		.content.recovered.content.full-page{
			margin: 0 2rem 2rem;
		}
	}
}