/** McSweeney's Audio Issue - Hide Flash of Audio Controls **/
audio { display: none; }

/** McSweeney's Audio Issue - Fonts **/
@font-face {
  font-family: 'Synt';
  src: url('font/ABCSynt-Regular.woff2') format('woff2');
  src: url('font/ABCSynt-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Synt-Italic';
  src: url('font/ABCSynt-Italic.woff2') format('woff2');
  src: url('font/ABCSynt-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Synt-Slant';
  src: url('font/ABCSynt-Slant.woff2') format('woff2');
  src: url('font/ABCSynt-Slant.woff') format('woff');
}
@font-face {
  font-family: 'Synt-Turbo';
  src: url('font/ABCSynt-Turbo.woff2') format('woff2');
  src: url('font/ABCSynt-Turbo.woff') format('woff');
}

/** McSweeney's Audio Issue - Main Styles **/
body {
  padding: 0;
  margin: 0 auto;
  font-family: 'Synt', serif;
  font-weight: 400;
}
body.descriptive {
  background: none;
}
nav {
  background: #f2f2f5;
  margin: 0;
  padding: 1em 2em;
}
nav .button {
  width: 100%;
  max-width: 250px;
}
nav #main-nav-links a {
  color: #0a0a0a;
  text-decoration: none;
}
nav #main-nav-links .main-nav-item {
  display: flex;
  justify-content: left;
  align-items: center;
  border-bottom: 1px solid black;
  padding-top: .25em;
  padding-bottom: .25em;
  overflow: hidden
}
nav #main-nav-links .main-nav-item span {
  font-weight: 400;
  font-size: 1.9375em;
}

nav #main-nav-links .main-nav-item:first-of-type {
  border-top: 1px solid black;
  margin-top: 10px;
}
nav .hamburger img {
  height: 52px;
  width: 52px;
}
nav .seek-box {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
}
nav .control-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 8px;
}
.control-left, .control-right {
  width: 80px;
}
.control-left {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.control-right {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
nav .control-container button {
  width: 21px;
  height: 21px;
  cursor: pointer;
  margin: 0px;
  transition: transform .2s ease-in-out;
  background-size: contain;
  background-repeat: no-repeat;
}
nav .control-container button.back, nav .control-container button.forward {
  width: 23px;
  height: 23px;
}
nav .control-container button + button {
  margin-left: 8px;
}
nav .control-container button:hover {
  transform: scale(1.05);
}
nav .control-container button.play {
  background: url('../images/control_play.svg');
}
nav .control-container button.pause {
  background: url('../images/control_pause.svg');
}
nav .control-container button.back {
  background: url('../images/control_back.svg') no-repeat;
}
nav .control-container button.forward {
  background: url('../images/control_forward.svg') no-repeat;
}
nav .seek-container {
  width: 100%;
  height: 10px;
}
nav .seek-bar {
  width: 100%;
  background-color: #e1e2e3;
  height: 10px;
  margin: auto;
}
nav .seek-progress {
  width: 40%;
  background-color: #231f20;
  height: 10px;
}
.track-time {
  font-size: 1.9em;
  line-height: 0.7;
  display: flex;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.sticky + .content {
  padding-top: 102px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}
h1 {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  font-size: 4em;
}
body.descriptive h1 {
  color: #000000;
  line-height: 1;
  letter-spacing: 0;
}
body.descriptive h1 span {
  font-size: .35em;
}
a {
  text-decoration: underline;
  text-decoration-thickness: .1px;
  color: inherit;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  text-underline-offset: 0.18em;
}

.button {
  text-decoration: none;
}

p {
  /* color: #000; */
  font-size: 1.1em;
  line-height: 1.2;
}
body.descriptive p {
  color: black;
}
p.small {
  font-size: .85em;
}
em, i {
  font-family: 'Synt-Italic';
  font-style: normal;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border:1px solid black;
  border-radius: 8px;
  font-size: 1em;
  text-transform: uppercase;
  height: 3.5em;
  margin-bottom: 0;
  color: black;
}
hr {
  border: solid #000;
  border-width: 1px 0 0;
  clear: both;
  margin: 1.5rem 0 1rem;
  height: 0;
}
body.descriptive hr {
  border: solid black;
}
nav h2 {
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.1;
  margin-bottom: 0;
}
h1 {
  margin: 1em auto;
}
.marginhalf {
  margin-top: 0.5em;
}
.margintop {
  margin-top: 1em;
}
.margintop2 {
  margin-top: 2em;
}
.margintop3 {
  margin-top: 3em;
}
.margintop16 {
  margin-top: 16em;
}
.marginbot {
  margin-bottom: 1em;
}
.marginbot2 {
  margin-bottom: 2em;
}
.marginbot3 {
  margin-bottom: 3em;
}
.marginbot4 {
  margin-bottom: 4em;
}

.indent {
  padding-left: 1em;
}

/** Introduction Styles **/
div.introduction h1 {
  color: #ffffff;
  letter-spacing: inherit;
  line-height: 1.1em;
  text-align: center;
  text-transform: inherit;
  font-size: 2.4em;
}
.production-credits {
  background-color: #000000;
}

/*** Src: https://alvarotrigo.com/fullPage/examples/videoBackground.html ***/
#background-video {
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		right:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
		background-image: /* our video */;
		background-position: center center;
		background-size: contain;
		object-fit: cover; /*cover video background */
		z-index: -1;
    opacity: 10%;
}

/*solves problem with overflowing video in Mac with Chrome */
#video-overlay{
	overflow: hidden;
}

/* Hiding video controls
* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
* --------------------------------------- */
video::-webkit-media-controls {
	display:none !important;
}
/*** End Src ***/

/** Audio Styles **/
.circle {
  margin:0 auto 4em;
  display: block;
  background: #000;
  border-radius: 50%;
  height: 400px;
  width: 400px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease-in-out;
}
a:hover .circle {
  transform: scale(.95);
}
.circle span {
  position: absolute;
  text-transform: uppercase;
  letter-spacing: 1px;
  left: 0;
  right: 0;
  top: 200px;
  margin:0 auto;
  display: block;
  text-align: center
}
p.intro {
  font-size: 1.25em;
  text-align: left;
}
p.intro a {
  text-decoration: underline;
}

.audio-group {
  display: flex;
  justify-content: left;
  align-items: center;
  border-bottom: 1px solid #000;
  padding-top: .25em;
  padding-bottom: .25em;
  overflow: hidden
}

.descriptive .audio-group {
  padding-top: 1em;
  padding-bottom: 1em;
}

.descriptive .audio-group p {
  margin-top: auto;
  margin-bottom: auto;
}

/* This helps get the background color flush with the border of the above content */
.descriptive-physical-component p:last-of-type, .descriptive-text-header p:last-of-type {
  margin-bottom: 0;
}

body.descriptive .audio-titles .audio-group.audio-group-dt {
  padding-top: 0em;
  padding-bottom: 0em;
  background-color: #FFF;
  max-width: 90%;
}

body.descriptive .audio-titles .audio-group.audio-group-dt:first-of-type {
  border-top: 1px solid #858791;
}

.audio-group.subchapter, .audio-group.subchapter-bottom {
  position: relative;
}
.audio-group.subchapter:before, .audio-group.subchapter-bottom:before {
  padding: 0;
  margin: 0;
  display: block;
  content: "";
  width: 83.333%; /* to match the width from foundation.css */
  height: 1.1px; /* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */
  background-color: #000;
  position: absolute;
  right: 0;
  top: 0;
}
.audio-group.subchapter-top {
  min-height: 48px; /* to match the height of rows with buttons */
}
.audio-group.subchapter, .audio-group.subchapter-top {
  border-bottom: 0px;
}
body.descriptive .audio-group {
  border-bottom: 1px solid #858791;
  margin-bottom: 2em;
  overflow: hidden;
  background-color: #FFFEF2;
}

body.descriptive section .audio-group {
  max-width: 100%;
  border-top: 1px solid #858791;
}

.press-play-instructions {
  font-style: italic;
}
.audio-group h2 {
  margin-top: 1em;
  color: #DEF970;
  font-size: 3.625em;
}
body.descriptive .audio-group  h2 {
  color: black;
}

.audio-group button, button.aleatory-button {
  width: 32px;
  height: 32px;
  cursor: pointer;
  margin: 0.2em;
  transition: transform .2s ease-in-out;
  background-size: contain;
  background-repeat: no-repeat;
}
button.aleatory-button {
  width: 1.1em;
  height: 1.1em;
  padding: 2px;
  margin: 0px;
  vertical-align: middle;
}
.audio-group button:hover, button.aleatory-button:hover {
  transform: scale(1.05);
}
.audio-group button.play, button.aleatory-button.play {
  background: url('../images/play.svg');
}
.audio-group button.replay, button.aleatory-button.replay {
  background: url('../images/replay.svg');
}
.audio-group button.pause, button.aleatory-button.pause {
  background: url('../images/pause.svg');
}
.audio-group button:disabled, .audio-group button[disabled] {
  opacity: 0.2;
}

.audio-credits {
  display: none;
  margin-top: 2em;
  font-size: 0.9em;
}
.audio-description-expanded  {
  display: none;
}
.audio-credits, .audio-description-expanded {
  margin-top: 1em;
  display: none;
}
.audio-credits ul {
  list-style-type: none;
  margin:0 0 1em;
}
.audio-credits ul li {
  margin-bottom: .5em;
}
.audio-credits hr{
  width: 125%;
  margin-top:0;
}
.audio-titles h3 {
  font-size: 1.75em;
  line-height: 1;
  color: #000;
}
.audio-titles h3 a {
  text-decoration: none;
}
h3 {
  margin-top: 0px;
  margin-bottom: 0px;
}
body.descriptive .audio-titles h3 {
  color: black;
}

.audio-titles {
  padding-top: 3em;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: #ffffff;
  text-align: center;
  height: 70px;
  padding: 1em;
}
.footer p {
  max-height: 25px;
  overflow: hidden;
}

.kidzworks-audio a {
  text-decoration: underline;
}


/** Descriptive Text Styles **/
body.descriptive ul.contents {
  list-style-type: none;
  margin: 0;
}
body.descriptive ul.contents li {
  font-size: 1.75em;
  line-height: 1;
  margin-top: .25em;
  margin-bottom: .25em;
  border-bottom: 1px solid #858791;
  padding-bottom: .25em;
}
body.descriptive ul.contents li.no-underline {
  border-bottom: none;
}
body.descriptive ul.contents li:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
body.descriptive p.byline {
  font-family: 'Synt-Italic';
  border-bottom: 1px solid #858791;
  padding-bottom: .5em;
}
body.descriptive .story-content h4, body.descriptive .story-content p {
  font-size: 1em;
  line-height: 1.3;
}
body.descriptive .story-content h4 a{
  border-bottom: 1px solid #858791;
  display: inline-block;
}

body.descriptive .descriptive-text-body h5 {
  text-align: center;
}

body.descriptive.individual > section:first-of-type {
  margin-top: 3em;
}

body.descriptive hr.half {
  width: 50%;
  margin: 2em auto;
}

.missing {
  opacity: 0.2;
}

body.descriptive .audio-group a {
  text-decoration: none;
}


/** Descriptive Individual Styles **/



.dt-credits {
  border-top: 1px solid #858791;
  padding-top: 1em;
}

.individual button.large {
  width: 100%;
  max-width: 600px;
  border:1px solid #cacaca;
  color: #858791;
  padding: 3em;
  font-size: .7em;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.individual p {
  line-height: 1.3
}
.individual button.large:hover {
  background: #cacaca;
  color: #000000;
  cursor: pointer
}
.individual.descriptive h1 {
  text-transform: none;
  font-size: 2.5em;
  padding: .25em 0;
  margin-bottom: .5em;
  margin-top: .5em;
}

.individual.descriptive .descriptive-text-header h1 {
  margin-bottom: 0;
  padding: .25em .25em .1em .25em;
}

.descriptive-physical-component div p {
  padding-bottom: 1em;
  border-bottom: 1px solid #C2C3C4;
}
.individual .individual-credits h2, .individual h3 {
  font-size: 1.375em;
  line-height: 1.25;
  padding: 0;
  margin: 0;
}
.individual .individual-credits h2 span, .individual h3 span{
  font-family: 'Synt-Italic';
}
.individual h3 {
  color: #757575;
}
.individual-credits {
  border-bottom: 1px solid #C2C3C4;
  padding-bottom: 1em;
}
.descriptive-text-body p {
  font-size: 1.25em;
}
.descriptive-text-body h4 {
  text-align: center;
  display: inline-block;
  width: auto;
  margin: 2em auto 1em;
  border:1px solid #757575;
  color: #757575;
  padding: .25em .75em;
  font-size: .6em;
  border-radius: 6px;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
}

.descriptive-text-body p img {
  width: 1.1em;
  height: 1.1em;
  padding: 2px;
}

body.descriptive .audio-description p {
  font-family: 'Synt-Italic';
  /* font-size: 1.375em; */
  line-height: 1.25;
  padding: 0;
  margin: 0;
  color: #757575;
  display: block;
}
.descriptive-text-body h5 {
  font-size: 1.375em;
  margin-bottom: 1em;
  margin-top: 3em;
  display: block;
  text-decoration: underline;
  text-underline-offset: 7px;
}

.descriptive-text-body section:first-child h5 {
  margin-top: .5em;
}

.descriptive-text-body p {
  margin-bottom: 1.5em;
}

.credits-footer {
  background-color: black;
  padding-top: 2em;
  padding-bottom: 2em;
}

.descriptive .credits-footer {
  margin-bottom: 0em;
}

.logo-container {
  height: 30px;
}
.credits-footer img {
  height: 100%;
  max-width: 180px;
  margin-bottom: 10px;
}
.credits-footer img.radiotopia {
  margin-right: 25px;
}

.credits-footer div p {
  color: white;
  font-size: 1em;;
}

.dt-credits {
  font-family: 'Synt-Italic';
}

.dt-credits em {
  font-family: 'Synt';
}

body.descriptive .audio-group button.play {
  background: url('../images/play.svg');
}
body.descriptive .audio-group button.replay {
  background: url('../images/replay.svg');
}
body.descriptive .audio-group button.pause {
  background: url('../images/pause.svg');
}

.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.sans-serif em {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: italic;
}

.descriptive-text-body .primer p {
  border-top: 1px #858791 solid;
  border-bottom: 1px #858791 solid;
  padding: 1em 0 1em 1em;
}

.descriptive-text-body section.hairline-top {
  border-top: 1px #858791 solid;
  padding-top: 2em;
}

.descriptive-text-body section.hairline-top h5 {
  border-top: 1px #858791 solid;
  padding-top: 2em;
}

.descriptive-text-body section.hairline-bottom h5 {
  border-bottom: 1px #858791 solid;
}

/** Pop-up Styles **/

.introduction#popup {
  background-color: rgb(0, 133, 235);
  display: none;
  height: 100%;
  left: 0;
  overflow: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}
.introduction#popup.transcript-popup {
  background-color: #d7fe53;
}
.introduction#popup.transcript-popup h1, .introduction#popup.transcript-popup .button {
  color: #000;
  border-color: #000;
}
.introduction#popup.transcript-popup .button:hover {
  color: #fff;
}

.introduction#popup.transcript-popup .button:focus {
  color: #fff;
}

 /* https://stackoverflow.com/questions/26600931/css-vertical-align-inside-a-fixed-position-div */
.introduction#popup > div {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   width: 70%;
    margin: 0 auto;
}

.introduction#popup .button {
  border-radius: 50px;
  border: 1px solid #fff;
  color: #fff;
}

/** Accessibility Queries **/
:focus-visible {
  color: white !important;
  background: rgb(0, 133, 235);
}

button:focus-visible {
  outline: solid 4px rgb(0, 133, 235);
}

button.hamburger:focus-visible {
  background: inherit;
  outline: solid 4px rgb(0, 133, 235);
}

button.hamburger {
  cursor: pointer;
}

blockquote {
  color: #757575;
}



/** Media Queries **/

@media only screen and (max-width: 1024px) {
  nav {
    padding: 1em 0;
  }
  nav h2 {
    font-size: 1rem;
    padding-top: .5em;
  }
  nav .button {
    width: 90%
  }
  .track-time {
    font-size: 1.7em;
  }
  nav .control-container button {
    width: 19px;
    height: 19px;
  }
  nav .control-container button.back, nav .control-container button.forward {
    width: 21px;
    height: 21px;
  }
  nav .control-container button + button {
    margin-left: 7px;
  }
  nav .hamburger img {
    height: 43px;
    width: 43px;
  }
}

@media only screen and (max-width: 760px) {
  h1 {
    font-size: 3.75em;
  }
  div.introduction h1 {
    font-size: 1.4em;
  }
  div#moveDown{
    height: 60px;
    width: 60px;
  }
}

@media only screen and (max-width: 639px) {
  nav {
    padding: .625em;
  }
  nav .grid-x {
    max-width: 100%
  }
  nav h2 {
    font-size: .8em;
    padding-top: .5em;
  }
  .track-time {
    font-size: 1.4em;
  }
  h1 {
    font-size: 2.5em;
  }
  .audio-group p.small {
    font-size: .75em;
    margin-top: .6em;
    margin-bottom: 0;
  }
  nav .control-container button {
    width: 15px;
    height: 15px;
  }
  nav .control-container button.back, nav .control-container button.forward {
    width: 17px;
    height: 17px;
  }
  nav .control-container button + button {
    margin-left: 5px;
  }
  nav .hamburger img {
    height: 34px;
    width: 34px;
  }
}