@charset "UTF-8";
/* CSS Document */ :root {
  --desktop-width: 1080px;
  --anim-dur: 2s;
  --bg: #ece7df;
  --step1: 3.18;
  --step2: 24.52;
  --step3: 45.86;
  --step4:49.04;
  --step5:80.89;
  --step6:96.82;
}
/*html, */
body {
  background-color: var(--bg);
  /*margin: 0;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;*/
}
/*layout*/
/*.wrapper {
  position: relative;
  overflow-x: hidden;
  max-height: 100vh;
}*/
/*section {
  margin: 10vh 0 0 0;
}*/
.row:before, .row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}
.col-left {
  width: 33%;
}
.col-right {
  width: 67%;
}
.col {
  float: left;
}
.non-full {
  max-width: min(var(--desktop-width), 90vw);
  margin-left: auto;
  margin-right: auto;
}
.full-margin {
  max-width: min(var(--desktop-width) + 120px, 90vw);
  margin-left: auto;
  margin-right: auto;
}
/*text*/
#top-menu a
{
  color:black;
  font-family: futura-pt,sans-serif;
  font-weight: 500;
  margin: 0 0.5em;
}
#top-menu a:visited
{
  color:black;
}
#top-menu a:hover
{
  color:#d29939;
} 
a {
  color: #D29939;
  text-decoration: none;
}
a::selection {
  color: #000000;
}
/* .video-link {
  color: #D29939;
  text-decoration: none;
  cursor: pointer;
}
.video-link::selection {
  color: #000000;
} */
h1 {
  font-family: futura-pt, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 44pt;
  line-height: 44pt;
  text-transform: uppercase;
}
h2 {
  font-family: futura-pt, sans-serif;
  font-size: 18pt;
  line-height: 24pt;
}
.prose {
  max-width: 89%;
  /* margin: 0 auto; */
  margin: 0 0 0 auto;
  /*padding: 0; /*1rem;*/
}
.prose p {
  font-family: Times;
  font-size: 14pt;
  line-height: 20pt;
}
/* h2.intro {
  /*font-family: Times;
  font-style: italic;
  line-height: 1.45em;*/

  /* font-family: futura-pt, sans-serif; */
  /*font-weight: 700;*/
  /* font-style: normal; */
  /*font-size: 28pt;
  line-height: 32pt;*/
/*} */
.notes {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0; /*1rem;*/
}
/* .notes h2 {
  font-style: italic;
  /*font-size: 18pt;
  line-height: 24pt;*/
/*} */
.notes p {
  /* text-align:right; */
  font-family:futura-pt, sans-serif;
}
.notes h3 {
  font-family:futura-pt, sans-serif;
}
.container2 {
  display: grid;
  grid-template-columns: 48% 48%;
  grid-gap: 4%;
  padding: 0 8% 0 8%;
}
.container21 {
  display: grid;
  grid-template-columns: 23% 73%;
  grid-gap: 4%;
  padding: 0;
  margin: 1em 0;
}
.container12 {
  display: grid;
  grid-template-columns: 33% 67%;
}
.container4 {
  display: grid;
  grid-template-columns: 22% 22% 22% 22%;
  grid-gap: 4%;
}
h1.inside-cover {
  font-family: futura-pt, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 4vmin;
  line-height: normal;
  text-transform: uppercase;
  text-align: center;
}
h2.inside-cover {
  font-family: futura-pt, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 3.4vmin;
  line-height: normal;
  text-align: center;
}
h3.inside-cover {
  font-family: futura-pt, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.7vmin;
  line-height: 1.7vmin;
}
p.inside-cover {
  font-family: Times;
  font-size: 1.9vmin;
  line-height: 1.4em;
}
h2.legend {
  font-family: futura-pt, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 3.4vmin;
  line-height: normal;
}
p.legend {
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.9vmin;
  line-height: normal;
}
p.legend-small {
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6vmin;
  line-height: normal;
  /*margin: 0;*/
}
svg.legend {
	width: 40%;
	float:left;
}
strong {
  font-weight: bold;
  font-style: italic;
}
emph {
	  font-weight: 600;

}
h2.viz-title{
  font-family: Times;
  /*font-size: 20pt;
  line-height: 28pt;*/
  margin-top: 4rem;
}
.viz-nums {
  /*font-size: 13pt;*/
  font-family: century-gothic, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.viz-annot {
  /*font-size: 14pt;*/
  font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: normal;
/*		letter-spacing: 0.05em;
*/
}
.viz-annot .hi {
  font-weight: 600;

}
/*scrollytelling*/
#scrolly-overlay {
  max-width: auto;
  margin: 0;
  padding: 0;
}
#scrolly-overlay .scrolly {
  max-width: auto;
  margin: 0;
  padding: 0;
}
#scrolly-overlay .scrolly article {
  padding: 0;
  max-width: 30rem;
  margin: 0 auto;
  position: relative;
  transform: translate3d(0, 0, 0);
  width: 0%;
}
#scrolly-overlay .scrolly article .step {
  min-height: 1500vh;
  z-index: 0;
}
#scrolly-overlay .scrolly .sticky {
  position: -webkit-sticky;
  position: sticky;
  width: auto;
  height: 100vh;
  margin: 0;
  top: 0vh;
  left: 0;
}
.sticky-overflow {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  }
  .no-x-scroll 
  {
/*     position: relative;
    width: 100%;
    height: 100%; */
    /*width: 100vw;*/
    overflow: hidden;
  }
.animcover {
  animation: slideright var(--anim-dur) ease-out;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -2.2s); /*calc(min(var(--scroll), 1.0) * -2s);*/
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.animphotorights {
  animation: slideright2 var(--anim-dur) ease-out;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -2.2s); /*calc(min(var(--scroll), 1.0) * -2s);*/
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.animsleeve {
  animation: slideinoutin var(--anim-dur) ease-in-out;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -2.2s);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.animsleevetext {
  animation: slideinout var(--anim-dur) ease-in-out;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -2.2s);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.animhide {
  animation: slideleft var(--anim-dur) ease-in-out;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -2.2s);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.animnote {
  animation: slideleft2 var(--anim-dur) ease-in-out;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -2.2s);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.animlegend {
  animation: slidein var(--anim-dur) ease-in-out;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -2.2s);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.animbutton {
  animation: slidein2 var(--anim-dur) ease-in-out;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -2.2s);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes slideright {
  from {
    transform: translateX(0vw);
  }
  5% {
    transform: translateX(0vw);
  }
  24.52% {
    transform: translateX(67vw);
  }
  to {
    transform: translateX(67vw);
  }
}
@keyframes slideright2 {
  from {
    transform: translateX(0vw);
  }
  5% {
    transform: translateX(0vw);
  }
  24.52% {
    transform: translateX(-67vw);
  }
  to {
    transform: translateX(-67vw);
  }
}
@keyframes slideinoutin {
  from {
    transform: translateX(67vw);
  }
  24.52% {
    transform: translateX(67vw);
  }
  45.86% {
    transform: translateX(0vw);
  }
  50.86% {
    transform: translateX(0vw);
  }
  80.89% {
    transform: translateX(-100vw);
  }
  95% {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(-50vw);
  }
}
@keyframes slideinout {
  from {
    transform: translateX(67vw);
  }
  24.52% {
    transform: translateX(67vw);
  }
  45.86% {
    transform: translateX(0vw);
  }
  50.86% {
    transform: translateX(0vw);
  }
  80.89% {
    transform: translateX(-100vw);
  }
  to {
    transform: translateX(-100vw);
  }
}
@keyframes slideleft {
  from {
    transform: translateX(0vw);
  }
  50.86% {
    transform: translateX(0vw);
  }
  80.89% {
    transform: translateX(-100vw);
  }
  to {
    transform: translateX(-100vw);
  }
}
@keyframes slideleft2 {
  from {
    transform: translateX(0vw);
  }
  60% {
    transform: translateX(0vw);
  }
  80.89% {
    transform: translateX(-100vw);
  }
  to {
    transform: translateX(-100vw);
  }
}
@keyframes slidein {
  from {
    transform: translateX(-100vw);
  }
  80.89% {
    transform: translateX(-100vw);
  }
  95% {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(-50vw);
  }
}
@keyframes slidein2 {
  from {
    transform: translateX(67vw);
  }
  24.52% {
    transform: translateX(67vw);
  }
  45.86% {
    transform: translateX(0vw);
  }
  to {
    transform: translateX(0vw);
  }
}
.fit-window-col {
	--dim: calc(min(90vh, 0.67*min(var(--desktop-width), 100vw)));
  height: var(--dim);
  width: var(--dim);
  position: absolute;
  top: calc(0.5*(100vh - var(--dim)));
  left: 0;
}
.fit-window-col-max {
	--dim: min(90vh, calc(0.67*min(var(--desktop-width), 100vw) + max(0.5*(100vw - var(--desktop-width)), 0px)));
  height: var(--dim);
  width: var(--dim);
  position: absolute;
  top: calc(0.5*(100vh - var(--dim)));
  left: calc(0.33*min(var(--desktop-width), 100vw) + max(0.5*(100vw - var(--desktop-width)), 0px) - 8px);
}
.fit-col-left {
  position: absolute;
  width: calc(0.33*min(var(--desktop-width), 100vw));
  top: calc(0.5*(100vh - var(--dim)));
  left: calc(max(0.5*(100vw - var(--desktop-width)), 0px) - 8px);
}
.recordimg {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.bottom-right{
  position: absolute;
  bottom: 2vh;
  right: 2vh;
}
.bottom-left{
  position: absolute;
  bottom: 2vh;
  left: 3vh;
}
.hidetemp {
  background-color: var(--bg);
  height: 99%;
  width: 99%;
  position: absolute;
  top: 0.5%;
  left: 0.5%;
}
.record-circle {
  --galleta: 30%;
  /* (A) PERCENTAGE WIDTH & BORDER RADIUS */
  border-radius: 50%;
  /* (B) BACKGROUND COLOR */
  /* (C) NECESSARY TO POSITION TEXT BLOCK */
  position: absolute;
  height: 30%;
  width: 30%;
  top: 35%;
  left: 35%;
  z-index: 0;
}
.left-shape {
  float: left;
  shape-outside: polygon(0 0, 100% 0, 60% 4%, 40% 10%, 20% 20%, 10% 28.2%, 5% 34.4%, 0 50%, 5% 65.6%, 10% 71.8%, 20% 80%, 40% 90%, 60% 96%, 100% 100%, 0 100%);
  width: 50%;
  height: 100%;
  z-index: 0;
}
.right-shape {
  float: right;
  shape-outside: polygon(100% 0, 0 0, 40% 4%, 60% 10%, 80% 20%, 90% 28.2%, 95% 34.4%, 100% 50%, 95% 65.6%, 90% 71.8%, 80% 80%, 60% 90%, 40% 96%, 0 100%, 100% 100%);
  width: 50%;
  height: 100%;
  z-index: 0;
}
.container3 {
  display: grid;
  grid-template-columns: 40% 20% 40%;
  position: absolute;
  width: 100%;
  height: 20%;
}
.record-text {
  text-align: center;
  font-style: normal;
  z-index: 0;
}
#record-text-upper {
  height: 30%;
  font-family: futura-pt, sans-serif;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
#record-text-lower {
  height: 30%;
  font-family: futura-pt-condensed, sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
#record-text-middle {
  height: 20%;
  font-family: futura-pt, sans-serif;
  font-weight: 500;
  font-size: 1.2vmin;
  line-height: 0.1vmin;
margin: auto 0;
}
.empty-space {
  height: 10%;
}
.dup {
  font-size: 2vmin;
}
#record-text-upper-text {
  padding: 0%;
  margin: 0%;
  z-index: 0;
  /*font-size: 4.8vmin;*/
}
#record-text-lower-text {
  padding: 0%;
  margin: 0%;
  z-index: 0;
  /*font-size: 5.3vmin;*/
}
/*record viz*/
.st0 {
  fill: #FFFFFF;
}
.st1 {
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-miterlimit: 10;
}
.st2 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}
.st4 {
  fill: var(--bg);
  stroke: #000000;
  stroke-width: 1;
}
.decadeslice {
  stroke: #606060;
  stroke-width: 0.5;
}
.songslice {
  stroke: #606060;
  stroke-width: 0.25;
}
/*
.songslice:hover {
  fill: #D29939;
  stroke: #D29939;
}
*/
.active {
  fill: #D29939;
  stroke: #D29939;
}
.clicked {
  fill: #ffffff;
  stroke: #ffffff;
}
/*
.st11 {
  stroke: #606060;
  stroke-width: 0.25;
  stroke-miterlimit: 10;
}
.st11:hover {
  fill: #D29939;
  stroke: #D29939;
}
*/
/*
.st4 {
	fill: var(--bg);
		stroke: #000000;
	stroke-width: 1;
}
*/
/*
.playnote {
	border: none;
	background: none;

}
*/
.hidden-record {
  visibility: hidden;
}
.empty-space2 {
  height:10.87%;
  position: relative;
}
/*
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  /*height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}*/
::-moz-selection { /* Code for Firefox */
  background: #D29939;
}
::selection {
  background: #D29939;
}
/**
 * Reset button styles.
 * It takes a bit of work to achieve a neutral look.
 */
 /*
.myButton {
  padding: 0 0.5em;
  font-family: futura-pt, sans-serif;
  font-size: 0.9em;
  color: inherit;
  background-color: white;
  border-radius:0.4em;
  border:1px solid #8a8a8a;
  min-height: 1em;
  background:linear-gradient(to bottom, #f0f0f0 5%, #cacaca 100%);
  box-shadow: 0px 1px 0px 0px #1c1b18;
  text-decoration:none;
  /*display:inline-block;*/
  /*font-weight: normal;*/
  /* show a hand cursor on hover; some argue that we
  should keep the default arrow cursor for buttons */
  /*cursor: pointer;*/
/*}
/*<a href="#" class="myButton">creme</a>*/
.myButton {
  font-family: futura-pt, sans-serif;
  font-size: 0.9em;
  min-height: 1em;
  min-width: 1em;
  padding: 0 0.5em;
  color: inherit;
  background-color: #d29939;
  border-radius:0.1em;
  cursor: pointer;
}
.myButton:focus {
	outline: none;
} 
.myButton:hover {
  background-color: #D29939;
}
.myButton:active {
  background-color: #ffffff;
  position:relative;
  top:1px;
}
.video-link{
  font-size: 0.7em;
  padding: 0.1em 0.4em 0 0.5em;
}
.video-link-time{
  font-size: 0.7em;
  padding: 0.1em 0.4em 0 0.5em;
}
.pressed-button{
  background-color: #ffffff;
}
.pressed-button:hover{
  background-color: #ffffff;
}
.framehighlight {
  border: 1px solid #1b1b1b;
  padding: 0 0.5em 0.5em 0.5em;
  /*margin: 1em 0 0 0; */
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin-top: 1em;
  margin-bottom: 1em;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.viz {
  margin-bottom:4rem;
}
.sticky-button {
  position:sticky;
  position:-webkit-sticky;
}