@font-face {
  font-family: Fluxisch;
  src: url(fonts/webfonts/FluxischElse-Regular.woff);
}

@font-face {
  font-family: Apfel;
  src: url(fonts/apfelGrotezk/ApfelGrotezk-Regular.otf);
}

@font-face {
  font-family: Porpora;
  src: url(fonts/porpora/Porpora-Regular.ttf);
}

@font-face {
  font-family: Mattone;
  src: url(fonts/mattone/Mattone-Regular.otf);
}

@font-face {
  font-family: Halibut;
  src: url(fonts/halibutSerif/HalibutSerif-Regular.otf);
}

@font-face {
  font-family: Happy;
  src: url(fonts/happy-times-at-the-ikob-webfont.woff);
}

@font-face {
  font-family: spacetext;
  src: url(fonts/SpaceText/SpaceText-Regular.woff);
}

@font-face {
  font-family: AlikeAngular;
  src: url(fonts/Alike_Angular/AlikeAngular-Regular.ttf);
}

@font-face {
  font-family: Alike;
  src: url(fonts/Alike_Angular/Alike-Regular.ttf);
}

@font-face {
  font-family: Proza;
  src: url(fonts/Proza_Libre/ProzaLibre-Regular.ttf);
}

@font-face {
  font-family: SneakyTimes;
  src: url(fonts/sneakyTimes/Sneaky-Times.otf);
}

@font-face {
  font-family: Selectric;
  src: url(fonts/selectric/OTF/SelectricRoman.otf);
}

@font-face {
  font-family: Porpora;
  src: url(fonts/porpora/Porpora-Regular.woff2) format("woff2"), url(fonts/porpora/Porpora-Regular.woff) format("woff");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'News Cycle';
  src: url(fonts/news\ cycle/newscycle-regular.ttf) format('truetype');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'News Cycle';
  src: url(fonts/news\ cycle/newscycle-bold.ttf) format('truetype');
  font-style: normal;
  font-weight: 700;
}

/*@font-face {
  font-family: 'Necto Mono';
  src: url(fonts/necto-mono/Necto-Mono.woff2) format('woff2'),
       url(fonts/necto-mono/Necto-Mono.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}*/


:root {
  --font-size: 18pt;
  --line-height: 24pt;
}

body {
  background: white;
  /*font-family: 'News Cycle';*/
  padding-top: 50px;
  display: flex;
  flex-direction: row;
  position: absolute;
  overflow: hidden;
  width: 100vw;
}

p.introduction, h1, h2, h3, .track--bookmark, .quote {
  font-family: apfel;
}

p.mvi:before, p.sp:before {
  font-family: arial;
  }


  .track--bookmark--timecode, body, p.sp, p.mvi, p.te {
    font-family: apfel;
      /*font-family: Alike;*/
  /*font-family: AlikeAngular;*/
  /*font-family: spacetext;*/
  /*font-family: Eczar;*/
  /*font-family: Work Sans;*/
  /*font-family: Gentium Basic;*/
  /*font-family: Libre Baskerville;*/
  /*font-family: Proza;*/
  /*font-family: SneakyTimes;*/
  /*font-family: Selectric;*/
  /* font-family: 'News Cycle'; */
  /* font-weight: medium; */
  }


.text {
  /* width: 55vw; */
  margin-left: 20%;
  margin-right: 17%;
}

.line {
  height: 1500vh;
  position: absolute;
  border-left: 3px solid black;
  transform: translate(39px, 9px);
  left: calc(10vw - 1.5px);
  top: 0;
}

#tag1 {
  font-weight: italic;
}

#cite-nav {
  float: left;
  display: block;
  /*position: fixed;*/
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 32px;
}

.cite-anchor {
  margin-left: 10pt;
  padding-bottom: 4pt;
  border-bottom: 1px dotted;
  position: absolute;
  right: 0;
  left: 0;
  width: 100vw;
  display: block;
  text-align: left;
}

div.cite-anchor a {
  transform: translate(8px, 11px);
  padding: 10px;
  /* background-color: white; */
  color: black;
  text-decoration: none;
  font-size: 10pt;
  /*font-family: 'Necto Mono';*/
  letter-spacing: .15em;
  font-family: h;
}

h1 + p {
  margin-top: var(--line-height);
}

p {
  line-height: inherit;
  color: #312121;
  hyphens: auto;
  /*! font-family: 'Porpora'; */
  font-size: var(--font-size);
  line-height: var(--line-height);
  position: relative;
}

p.introduction {
  --font-size: 16pt;
  --line-height: 23pt;
  /*font-family: 'Necto Mono';*/
  /* font-size: 16pt; */
  /* line-height: 23pt; */
  hyphens: none;
}

p#tag1 {
  margin-top: 5pt;
}

a, a:visited {
  /* border-bottom: 1px solid; */
  /* border-bottom-style: dotted; */
  font-style: italic;
  text-decoration: none;
  color:black;
}

p.sp {
  /* margin-left:15%; */
  margin-right: 15%;
  margin-top: 20px;
}

p.mvi {
 /* margin-left:15%; */
 margin-right: 15%;
 margin-top: 20px;
}

.intro {
   /* margin-left:15%; */
   /* margin-right: 15%; */
}

p.sp:before {
   content: 'SP';
   position: absolute;
   left: -4em;
   font-size: 14pt;
   /* border-bottom: 1px dotted rgb(100, 100, 100); */
   /*right: 0;*/
   /*padding-left: 5vw;*/
   font-family: 'Necto Mono';
   line-height: var(--line-height);
}

p.sp + p.sp:before {
  display: none;
}

p.mvi:before {
   content: 'MVI';
   position: absolute;
   left: -4em;
   /*font-style: normal;*/
   font-size: 14pt;
   /* border-bottom: 1px solid #000000; */
   /*left: 0;*/
   /*right: 0;*/
   /*padding-left: 5vw;*/
   font-family: 'Necto Mono';
   line-height: var(--line-height);
   top: 3px;
}

p.te:before {
    content: 'TE';
    position: absolute;
    left: -4em;
    font-size: 14pt;
    border-bottom: 1px dotted rgb(100, 100, 100);
    right: 0;
    padding-left: 5vw;
    /*font-family: 'Necto Mono';*/
    line-height: 37px;
}

h1 {
  /*font-family: fluxisch;*/
  /*font-family: Alike;*/
  /*font-family: AlikeAngular;*/
  /*font-family: spacetext;*/
  /*font-family: Eczar;*/
  /*font-family: Work Sans;*/
  /*font-family: Gentium Basic;*/
  /*font-family: Libre Baskerville;*/
  /*font-family: Proza;*/
  /*font-family: SneakyTimes;*/
  /* font-family: Selectric; */
  margin-top: 70pt;
  line-height: 35pt;
  font-size: 35pt;
  /*font-family: 'Necto Mono';*/
  /* font-family: 'Porpora'; */
  font-weight: normal;
  letter-spacing: .015em;
  text-rendering: optimizeLegibility;
}

h2 {
  /* font-family: fluxisch; */
  /*font-family: 'Necto Mono';*/
  font-weight: normal;
  font-size: 17pt;
  line-height: 19pt;
  width: 98%;
  font-weight: normal;
}

h3 {
  /*font-family: 'Necto Mono';*/
  color: black;
  font-size: 10pt;
  line-height: 28pt;
  margin: 0;
  font-weight: normal;
}

.tooltip {
  position: relative;
  display: inline-block;
  font-style: italic;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 320px;
  background-color: rgb(255, 255, 200);
  color: black;
  text-align: center;
  padding: 5px 0;
  position: fixed;
  left: 10%;
  float: left;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  position: fixed;
}

input.timeline {
  transform-origin: top left;
  transform: rotate(90deg) translate(-264px, 80px);
  width: 2200vw;
  float: left;
  /* transform: translate(10px, 10px); */
  /* top: 1px; */
  /* position: fixed; */
  z-index: -20;
}


audio {
  width: 100vw;
}

#float-right {
    height: 100%;
    float: right;
    position: fixed;
    right: 0;
    overflow: scroll;
    background-color: white;
    margin:0;
    top:0;
    z-index: 10;
    border-left: 3px solid black;
    width: 18vw;
}

#float-right p {
    font-size: 11pt;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid;
}

body {
  margin: 0;
  align-items: start;
  padding-top: 0;
}

.clusterintro a {
  display: block;
  flex: 1 1 50%;
}

/*.clusterindex {
  flex: 1 1 50%;
}*/



/*SLIDERBAR*/

.element {
    display: inline-block;
    /* height: 70%; */
    /* border: 1px solid black; */
    padding: 10pt;
}

.element h2 {
    margin: 0 auto;
    /* line-height: 0; */
    font-size: 20pt;
    text-align: center;
}

.element p {
    text-align: left;
    background-color: grey;
    display: inline-block;
    border: 1 px solid black;
    /*height: 50px;*/
    width: 200px;
    margin: 0;
    margin-top: 20pt;
    /* width: auto; */
}

#audio {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100vw;
    position: fixed;
    bottom: 0;
    margin: 0;
    background-color: white;
    z-index: 100;
    height: 16vh;
}

.clusterintro {
  flex: 1 1 50%;
  padding: 0 2em;
  position: sticky;
  top: 0;
}

.clusterindex {
  padding-top: 3em;
}

.clusterindex .element {
  text-align: left;
  background-color: white;
  margin: 2em 0;
  padding: 1.5em 3em 3em 3em;
  display: block;
}

.clusterindex .element p {
  background-color: white;
}

.element span {
  display: block;
  border-bottom: none;
  border-bottom-style: ;
  font-style: italic;
  text-decoration: none;
  color:black;
  line-height: 0;
  margin-top: 10pt;
}

.nogrey {
  background-color: ;
  font-size: 18pt !important;
    line-height: inherit;
    color: #312121;
    border-bottom: none;
    font-style:normal;
    text-decoration: none;
    color: black;
}


#navbar {
  background-color: darkgrey;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: block;
  transition: bottom 0.3s;
  overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    width: 81vw;
    z-index: 10;
}

@media only screen and (max-width: 750px) {
  .clusterintro {
    overflow: scroll;
  }
 }



#block {
  position: fixed;
}

/*MENU LEFT*/

#menu-left {
  /*flex: 1 1;*/
  display: flex;
  flex-direction: column;
  height: 100vh;
  /*width: 5%;*/
  background-color: white;
  border-right: 1px solid;
}

#menu-left h1 {
    margin-top: 0;
    font-size: 15pt;
    line-height: 20pt;
    text-align: middle;
}

#menu-left p {
    text-align: left;
    font-size: 16pt;
    line-height: 21pt;
    margin: 0 auto;
}

#menu-left img {
  float: left;
  width: 16%;
  display: inline-block;
}

.intro-text {
  margin: 1em;
  float: right;
  /* width: 70%; */
}

#menu-left .clustername:nth-of-type(4), #menu-left .clustername:nth-of-type(5) {
  flex: 1 !important;
}

#menu-left .clustername:nth-of-type(4) h1, #menu-left .clustername:nth-of-type(5) h1{
  text-align: center;
  top: 40%;
  position: relative;
}

.clustername {
  border-bottom: 1px solid;
}

#menu-left .clustername {
  flex:2;
  /* padding: 10px; */
  text-align: center;
}


#menu-left .clustername:hover {
  background-color: #f4f4f4;
}

#menu-left .clustername a {
  top: 50%;
  position: relative;
}


/*MENU MIDDLE*/

#menu-middle {
  display: none;
  flex-direction: column;
  flex/*:*/1;
 /*width: 36%;*/
  height: 100vh;
  /*width: fit-content;*/
  background-color: white;
  border-right: 1px solid;
}

#menu-middle .clustername {
  /* height: 33%; */
  flex:1;
  padding: 1em;
}

#menu-middle .clustername:hover {
  background-color: #f4f4f4;
}

#menu-middle h1 {
    margin-top: 0;
    font-size: 15pt;
    line-height: 20pt;
    text-align: left;
}

#menu-middle div {
    /* padding-top: var(--line-height); */
    /* padding-left: var(--line-height); */
  }

  .duration {
    float: right;
    transform: translate(0px, -50px);
    font-weight: bold;
    /* line-height: 0; */
    margin: 0;
    font-size: 10pt;
  }

.hide {
      font-size: 14pt;
      line-height: 18pt;
}
#menu-right {
  display: flex;
  flex-direction: column;
  flex:1;
  height: 100vh;
  /*width: fit-content;*/
  background-color: white;
  border-right: 1px solid;
}

#menu-right .clustername {
  flex: 1;
  position: relative;
}

/* #menu-right .clustername:hover {
  background-color: #f4f4f4;
} */

#menu-block {
  position: fixed;
}

#flex-left {
  display: flex;
  flex: 1 1 50%;
}

#flex-right {
  flex: 1 1 50%;
  display: flex;
  height: 100vh;
}

#menu-right {
  display: none;
}

.duration {
  display: block;
  /*margin-top: 10px;*/
}

.clusterintro {
  display: block;
}

.clusterintro2 {
  position: relative;
  display: none;
  overflow-y: auto;
  /* padding-left: 110px; */
  /* padding-right: 110px; */
}

#flex-left[data-state-menu="0"] #menu-middle {
  display: none;
}

#flex-left[data-state-menu="1"] #menu-middle {
  display: flex;
}

[data-state-menu="1"] #menu-left {
  flex: 1;
  word-break: break-all;
}

[data-state-menu="1"] #menu-middle {
  flex: 4;
}

[data-state-menu="1"] #menu-left p{
  display: none;
}

[data-state-menu="2"] #menu-left {
  flex: 1;
  word-break: break-all;
}

[data-state-menu="2"] #menu-middle {
  flex: 2;
  display: flex;
  word-break: break-all;
}

[data-state-menu="2"] #menu-middle .hide{
  display: none;
}

[data-state-menu="2"] #menu-right {
  flex: 2;
  display: flex;
}

[data-state-menu="0"] #menu-left img {
  display: block;
  float: left;
  margin-right: 1em;
}

[data-state-menu="0"] #menu-left .intro-text {
  display: block;
  /* float: right; */
}

[data-state-menu="2"] #menu-left p, #menu-left img {
  display: none;
}

[data-state-menu="2"] #menu-left p, #menu-left .intro-text {
  float: none;
}

[data-state-menu="2"] #menu-middle .clustername div {
  position: relative;
}

#flex-left[data-state-menu="2"] {
  flex: 1 1;
}

[data-state-menu="1"] #menu-left h1{
  text-align: center;
}
[data-state-menu="2"] #menu-left h1{
  text-align: center;
}
[data-state-menu="0"] #menu-left h1{
  text-align: left;
  margin-bottom: 10px;
}

[data-state-menu="2"] #menu-middle .duration {
  float: none;
  transform: none;
}

[data-state-menu="1"] #menu-left .clustername:nth-of-type(1),
[data-state-menu="2"] #menu-left .clustername:nth-of-type(1) {
  background-color: #333;
  color: white;
}

[data-state-menu="1"] #menu-left .clustername:nth-of-type(n+2) {
  flex: 0 !important;
}

[data-state-menu="2"] #menu-middle .clustername:nth-of-type(1) {
  background-color: #333;
  color: white;
}

audio.hidden {
    display: none;
  }

  .audio-player {
    min-width: 140px;
    --track-color: white;
    --progress-color: #e4e4e4;
    --hihglight-color: #666666;
  }

  [data-role="player--controls"] {
    position: absolute;
    top: 10px;
    left: 10px;
  }

[data-role="player--controls"] button {
  background: white;
  border: 1px solid;
}

  [data-role="play--pause"]:hover {
    color: var(--hihglight-color);
    /* background-color: var(--hihglight-color); */
  }

  [data-role="play--pause"]:before {
    display: block;
    content: 'PLAY AUDIO';
  }

  [data-playing="true"] [data-role="play--pause"]:before {
    content: 'PAUSE AUDIO';
  }

  [data-role="track"] {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    /* width: 10vw; */
    right: 0;
    height: 100vh;
    /* background: var(--track-color); */
  }

  [data-role="progress"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: var(--progress-color);
  }

  [data-role="scrubber"] {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 1px;
    background: black;
    /* box-shadow: 0px 0px 3px black; */
    /* border-top: 2px solid black; */ /* var(--progress-color); */
    /* border-bottom: 2px solid black; */ /* var(--progress-color);*/
    cursor: ns-resize;
    z-index: 1;
  }

  .track--bookmark {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dotted black;
    font-family: 'News Cycle';
    font-size: 11pt;
    cursor: pointer;
    padding: .25em .5em;
  }

  .track--bookmark:hover {
    text-decoration: underline;
  }

  .track--bookmark--timecode {
    margin-right: .25em;
    /*font-family: 'News Cycle'*/
  }

  .audioMarkers {
    display: none;
  }
  
  .scrubber--label,
  .time-marker {
    position: absolute;
    font-family: 'News Cycle';
    font-size: 11pt;
  }
  
  .time-marker {
    left: .5em;
  }
  
  .scrubber--label {
    left: calc(100% + .5em);
    top: -.6em;
  }

  .time-marker--start {
    top: .25em;
  }

  .time-marker--end {
    bottom: .25em;
  }

  [data-role="scrubber"][data-scrubbing="true"] .scrubber--label {
    display: block;
  }

  [data-role="current-time"], [data-role="duration"] {
    display: none;
  }


.sidenote-right {
    /* position: absolute; */
    float: right;
    right: 0;
    margin-left: 2em;
    margin-bottom: 2em;
    width: 210px;
    margin-top: 28px;
    font-size: calc(0.65 * var(--font-size));
    line-height: calc(0.7 * var(--line-height));
  }

  .sidenote-right span{
    display: block;
  }

  .sidenote-left {
    float: left;
    margin: 2em;
    width: 20%;
  }

    .sidenote-left img, .sidenote-right img{
    width: 100%;
    margin-bottom: 10px;
  }

.quote {
    /* font-family: 'Necto Mono'; */
    font-size: 33px;
    line-height: 36px;
    margin: 48px 0;
    padding: 32px 16px 34px;
    display: block;
    /* font-style: italic; */
}

span {
  letter-spacing: 0.025em;
}