html {
	scroll-behavior: smooth; /* Makes anchor links scroll smoothly */
	overflow: auto;
	-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Routed Gothic Narrow;
  font-size: 16px;

  background-color: #A8A8A8; /*B1B1B1 A8A8A8*/
}

p {
	margin-top: 0;
	margin-bottom: 1em;
}

p.speaker1, p.speaker2, p.speaker3, p.speaker4, p.speaker5 {
	margin-top: 0;
	margin-bottom: 0;
}

button {
	cursor: pointer;

	/* new styling */
  font-size: 15px;
	line-height: 120%;

	font-family: Routed Gothic Narrow;

	border: 2px solid #000000;
	border-radius: 0px;
	background-color: #00000000;
	padding: 5px 10px 5px;
	vertical-align: middle;

  /* default styling */
  /* border: 1px solid #8f8f9c;
	font-size: 11px;
  border-radius: 4px;
  padding: 2px 5px 2px 5px;
  text-align: center;
  background-color: #e9e9ed;
  */
}

button:hover {
	color: white;
	border-color: white;

	/* color: #38dbf3;
	border-color: #38dbf3; */

	/* default styling */
  /* background-color: #d0d0d6; */
}

button.media {
	font-size: 20px;
	padding: 2px 8px 22px;
}


.ital {
	font-style: italic;
}


/* ///////////////////////// SITE LAYOUT ///////////////////////// */

/*overall site layout*/
.container {
  display: flex;
  flex-flow: row;
  height: 100vh;
}





/* ///////////////////////// LEFT SIDEBAR ///////////////////////// */


/* flex sidebar / left side */
.sidebarLeft {
  flex: 0 0 18%;
	min-width: 250px;

  background-color: gray;
  color: white;
  padding: 5px;
  height: 100vh;
  overflow: hidden;

  /* -webkit-box-shadow: inset 0 0 30px 1px #000000BB;
  -moz-box-shadow: inset 0 0 30px 1px #000000BB;
  box-shadow: inset 2px 2px 30px 1px #222222; */
}

.sidebarHead {
  text-align: center;
  border-bottom: solid;
  border-width: 1.5px;
  padding: 5px 0 15px;
	/* border-color: black; */
}

.sidebarHead > button {
  margin: 3px -4px 3px 8px;
	/* border-color: white;
	color: white; */
}

.sidebarTitle {
  font-size: 48px;
  display: inline-block;
}

button.media {
  font-size: 22px;
  height: 31px;
}

.sidebarEntries {
	height: calc(100vh - 300px);
	overflow: auto;

	-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

	/* border-bottom: solid;
	border-width: 1.5px; */
}

.sidebarEntries::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.sidebarEntry {
  display: grid;
  grid-template-columns: 2fr 10fr 0.5fr;
  padding: 5px 5px 5px 5px;

  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid;
  border-width: 1.5px;

  line-height: 120%;

  cursor: pointer;
	/* color: black; */
}

.entryNum {
  grid-column: 1;
  grid-row: 1;
	color: #6AE4F6;
}

.entryName {
  grid-column: 2;
  grid-row: 1;
	color: #6AE4F6;
}

.entryDesc {
  grid-column: 2 / span 1;
  grid-row: 2;
  display: block;
  padding: 7px 0px 7px;
}

.entryX{
  grid-column: 3;
  grid-row: 1;
  text-align: right;
}







/* ///////////////////////// R MAIN GUI ///////////////////////// */

/* flex main content / right side */
.main {
  flex: 1 1 75%;
  overflow: hidden;
  position: relative;
}

.imgBg {
  position: absolute;
  top: 0px;
  z-index: -2;
  width: 100%;

  display: flex;
  justify-content: center;
  height: 100vh;
}

.fadeOut { animation: fadeOut 3s; }

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}


.landingVid {
}

.titleBar {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 10;

  background-color: #F5F5F500;
  /* height: 50px; */
	/* border-bottom: 2px solid #000000;; */
}

.titleBar > button {
  margin: 8px -4px 8px 8px;
	background-color: #A8A8A899;

}







/* ///////////////////////// LANDING NAV ///////////////////////// */

.landing {
  padding: 0px 5px 5px;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.landingNav {
  /* position: absolute;
  left: 0;
	top: 0; */
	overflow: visible;
	position: relative;
}

/* landing content */
.landingContent {
	height: 100vh;
  /* height: calc(100vh - 35px); */
  position: absolute;
  /* top: 35px; */
  overflow: auto;

  font-size: 48px;
  line-height: 125%;
  padding: 50vh 30px 0px;
	scrollbar-width: none;  /* Firefox */
}

.landingText {
  color: #e1e1e1;
  mix-blend-mode: hard-light;
}

.term {
  display: inline;
  color: #38dbf3; /* ca3092 */
  cursor: help;
}

.term:hover {
  text-decoration: underline;
}

.num {
  display: inline-block;
  height: 1em;
  width: 1.5em;
  border-radius: 0%;
  outline: 0.12em solid #38dbf3;
	margin: 0.2em;


	text-align: center;
	vertical-align: inherit;

	font-size: 0.7em;
	font-style: normal;
	line-height: 110%;
}


/* nav hover  */
.navText {
  position: fixed;
	padding-top: 10vh;

  font-size: 30px;
  line-height: 110%;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  height: 100vh;


	/* different for sublabels  */
	right: 5vw;

}

.navText > div {
  flex: 0 0 20%;
  max-height: 20%;
  padding-bottom: 5px;
  cursor: pointer;

  width: 200px;
}

.sublabel {
	right: auto;
	left: calc(250px + 5vw);
}

.sublabel > span {
	display: inline-block;
	overflow: visible;
	width: 250px;
}

.highlightedText {
  color: #4ae6f6;
  /* color: MediumVioletRed; */
}



.navBoxes {
  position: absolute;
}

.hoverZone {
  background-color: #FFFFFF66;
  position: absolute;
  border: 1px solid #FFFFFFBB;
  cursor: pointer;
}

/* 937px /97 = 200/x --> 200*97/937 = x */

.hoverZone.armLeft {
  width: 21.70vh;
  height: 35.0vh;
  left: 20.29vh;
  top: 17.9vh;
}

.hoverZone.armRight {
  width: 13.94vh;
  height: 29.88vh;
  left: 59.0vh;
  top: 23.85vh;
}

.hoverZone.body {
  width: 25.8vh;
  height: 49.69vh;
  left: 37.0vh;
  top: 17.53vh;

}

.hoverZone.head {
  width: 20.17vh;
  height: 14.2vh;
  left: 39.5vh;
  top: 3.0vh;
}

.hoverZone.footer {
  width: 20.67vh;
  height: 31.1vh;
  left: 39.0vh;
  top: 66.8vh;
}







/* ///////////////////////// PAGES ///////////////////////// */

.pages {
}

.page {
	height: 100vh;
  /* height: calc(100vh - 35px); */
  position: absolute;
  overflow: auto;

  font-size: 30px;
  line-height: 130%;
	color: #e1e1e1;
	mix-blend-mode: hard-light;

  display: flex;
	justify-content: center;
  width: 100%;
	scrollbar-width: none;  /* Firefox */
}

h1 {
	font-family: Routed Gothic;
  font-size: 30px;
  margin: 2em 0px 0.4em;
}

h2 {
	font-family: Routed Gothic;
  font-size: 30px;
  margin: 2em 0px 0.5em;
}

sub {
  margin: 0;
	padding: 0;
	display: inline-block;
  font-size: 30px;
	line-height: 120%;
  font-style: italic;
}

/* page bodycopy */
.pageContent {
  flex: 1 0 70%;

  display: flex;
  justify-content: center;
	padding-left: 280px;

	position: relative;
}

.smallPadding {
	padding-left: 20px;
}

.pageText {
  padding: 0 30px 0;
  max-width: 1000px;
}

.pageText .cit {
	/* used descendent selector NOT child one!!! */
	vertical-align: super;
	font-size: 15px;

}

sup {
	font-size: 15px;
}

.pull {
	padding-left: 50px;
	font-size: 24px;
	line-height: 125%;
	margin-top: .5em;
	margin-bottom: .5em;
}

li {
	list-style: none;

}

ul {
	list-style-type: none;
	margin: 0em 0 1em;
	padding: 0;
}

ul > p {
	margin-bottom: 0em;
}

/*page citations */
.pageCit {
	flex: 3 0 10%;
	position: relative;
	display: flex;
  justify-content: flex-start;
}

.pageCit > .cit {
	display: inline-block;

	color: white;
	font-size: 16px;
	line-height: 125%;
	opacity: 0.7;

	position: absolute;
	max-width: 10vw;
}

.pageEmpty {
	flex: 0 1 10%;
	min-width: 120px;
	/* max-width: 120px; */
}

/* page nav on the right */
.pageNav {
  position: fixed;
  top: 20px;
  right: 0;
  z-index: -5;
}

.scroll {
	background-color: #38dbf3;
	width: 90px;
	height: 3px;

	position: absolute;
	right: 0;
  z-index: 10;
}

.scrollText {
	font-family: Routed Gothic Narrow;
	font-size: 16px;
	letter-spacing: 0px;
	line-height: 120%;
	text-align: right;
	text-wrap: balance;
	width: 120px;

	color: #38dbf3;

	position: absolute;
	top: -1em;
	right: 100px;
}

.scrollImg {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 16px;
}

.head .scroll {
	width: 150px;
}

.head .scrollText {
	right: 160px;
}

.armLeft > .pageNav > .scroll {
	width: 70px;
}

.armLeft > .pageNav > .scroll > .scrollText {
	right: 80px;
}

.armRight > .pageNav > .scroll {
	width: 70px;
}

.armRight > .pageNav > .scroll > .scrollText {
	right: 80px;
}

.spacer {
	height: 156px;
	display: block;
}

/* ///////////////////////// IMG OVERLAY  ///////////////////////// */

.speaker1, .speaker2 {
	padding-bottom: 1em;
}

.speaker3, .speaker4, .speaker5 {
	padding-bottom: 1em;
}

.speaker1 {
  padding-right: 40%;
}

.speaker2 {
  padding-left: 40%;
}

.speaker3 {
  padding-right: 40%;
}

.speaker4 {
  padding-left: 20%;
	padding-right: 20%;
}

.speaker5 {
  padding-left: 40%;
}

.imgContainer {
	margin: 0;
	padding: 0;
}

.imgFormat {
	position: fixed;
	max-width: 500px;
	max-height: 100%;
	left: 20%;

	mix-blend-mode: multiply;
	opacity: 100%;
	z-index: 0;
}

.imgCaption {
	position: fixed;
	bottom: 25px;
	left: 25px;
	max-width: 210px;

	color: #6AE4F6;
	font-size: 16px;
	line-height: 120%;
}

.imgCaption > button {
	margin: 0px 4px 0px 0px;
}






/* ///////////////////////// GLOSSARY FOOTER PAGE ///////////////////////// */

.footerContent {
	flex: 1 0 80%;

	padding: 80px;
	max-width: 1200px;

  display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 20px;

	position: relative;
}

.footerEntry {
	padding: 20px;

	/* display: grid;
  grid-template-columns: 1fr 10fr; */

	font-size: 24px;
  line-height: 120%;

}


/* .footerNum {
	grid-column: 1;
  grid-row: 1;
	color: #38dbf3;

	display: inline-block;
} */

.footerName {
	grid-column: 2;
  grid-row: 1;
	color: #38dbf3;
	width: 100%;

	display: inline-block;
	cursor: help;
}

.footerName:hover {
  text-decoration: underline;
}

.footerDesc {
	grid-column: 2 / span 1;
  grid-row: 2;
  display: none;
  padding: 7px 0px 40px;

	display: inline-block;
}

.footerDesc > span {
	display: inline-block;
}

.textNumMention {
	color: #38dbf3;
	cursor: help;
	margin-left: 5px;
	margin-right: 10px;
}

.textNumMention:hover {
	text-decoration: underline;

}







/* ///////////////////////// HIDE / UNHIDE CLASSES ///////////////////////// */

.hideOpacity { /* YES visible to computer; NOT visible to human */
  opacity: 0;
}

.unhideOpacity {
  opacity: 1;
}

.hideDisplay { /* NOT visible to computer; NOT visible to human */
  display: none;
}

/* .unhideDisplay {
  display: inline-block;
} */







/* ///////////////////////// FONTS ///////////////////////// */

@font-face {
  font-family: Routed Gothic;
  font-weight: normal;
  src: url(fonts/routed-gothic.ttf);
}

@font-face {
  font-family: Routed Gothic Narrow;
  font-weight: normal;
  src: url(fonts/routed-gothic-narrow.ttf);
}

@font-face {
  font-family: Routed Gothic Narrow;
  font-style: italic;
  src: url(fonts/routed-gothic-narrow-half-italic.ttf);
}

@font-face {
  font-family: Routed Gothic Wide;
  font-weight: normal;
  src: url(fonts/routed-gothic-wide.ttf);
}

@font-face {
  font-family: Routed Gothic Wide;
  font-style: italic;
  src: url(fonts/routed-gothic-wide-half-italic.ttf);
}

@font-face {
  font-family: Arial Narrow;
  font-weight: normal;
  src: url(fonts/arialnarrow.ttf);
}

@font-face {
  font-family: Arial Narrow;
  font-style: italic;
  src: url(fonts/arialnarrow_italic.ttf);
}

@font-face {
  font-family: Arial Narrow;
  font-weight: bold;
  src: url(fonts/arialnarrow_bold.ttf);
}