@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap');
.greek-body {
  font-family: 'GFS Didot', serif;
  background-color: #e8dedc;
  text-rendering: optimizeLegibility;
  color: #222222;
  -webkit-font-smoothing: antialiased;
}
.latin-body {
  font-family: 'Cormorant Garamond', serif;
  background-color: #e8dedc;
  text-rendering: optimizeLegibility;
  color: #222222;
  -webkit-font-smoothing: antialiased;
}
note {
  display: none;
}
lemma, foreign, quote {
  font-style: italic;
}
lemma[lang="greek"], foreign[lang="greek"], quote[lang="greek"] {
  font-family: 'GFS Didot', serif;
}
lemma {
  font-weight: bold;
}
emph, bibl {
  font-style: italic;
}
bibl > title {
  display: inline;
}
quote > l {
  margin-left: 10px;
  display: block;
  font-style: italic;
}
speaker {
  display: block;
}
castlist {
  display: block;
  text-align: center;
}
castitem {
  text-transform: uppercase;
  display: inline;
}
quote[lang="greek"]::before, quote[lang="greek"]::after {
  content: "'";
}
.line-ref {
  font-weight: bold;
}
translation {
  margin-left: 5vw;
  margin-right: 1vw;
  display: block;
}
.parallel_translation, .comment {
  display: none;
  position:fixed;
  padding-left: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: 250;
  bottom: 0;
  left: 1px;
  right: 1px;
  width: 100%;
  max-height: 50%;
  overflow-y: scroll;
  background-color: #e8dedc;
  border-top: 1px black solid;
  font-size: 4.2vw;
  font-family: 'IM Fell English', serif;
}
.navigator {
  font-style: normal !important;
  font-weight: bold;
  z-index: 200;
  font-size: 8vw;
}
.comment-indicator {
  font-style: normal !important;
  font-weight: bold;
  float: right;
  display: none;
  z-index: 200;
  font-size: 8vw;
}
.masthead-container {
  top: -1px;
  left: 0px;
  position: fixed;
  z-index: 100;
  width: 100%;
  box-shadow: 0 1px 10px 0px lightgray;
}
.masthead, .helper {
  z-index: 100;
  width: 100%;
  font-family: 'IM Fell English', serif;
  background-color: #e8dedc;
}
.masthead {
  background-color: #e8dedc;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.helper {
  z-index: 200;
  text-align: center;
}
.firstspeaker {
  margin-left: 6vw;
  user-select: none;
  font-size: 5vw;
}
.hexameter-line {
  user-select: none;
}
.prose-line {
  font-size: 5vw;
}
head, .heading {
  font-size: 6vw;
}
.para {
  display: inline-block;
}
milestone[ed="P"] {
  display: inline-block;
}
milestone[ed="P"]:first-letter {
  float: left;
  font-size: 65px;
  line-height: 40px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
  text-transform: uppercase;
}
.line, .para, .heading {
  margin-left: 5vw;
  user-select: none;
}
.line {
  font-size: 4.2vw;
}
.milestone[unit="chapter"], .speaker, .chapter {
  margin-top: 0.4vh;
  position: absolute;
  left: 2px;
  font-size: 3.6vw;
}
.milestone {
  font-size: 2.2vw;
  vertical-align: super;
}
.chapter {
  font-size: 2.5vw;
}
.line-number {
  float: right;
  font-size: 3vw;
  vertical-align: bottom;
  font-family: 'GFS Didot', serif;
}
.author {
  text-transform: uppercase;
  font-size: 6vw;
  font-family: 'IM Fell English', serif;
  color: black;
  font-style: normal;
  font-weight: bold;
  margin-left: 6vw;
}
.menu {
  display: none;
  background-color: #e8dedc;
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 5px;
  padding: 25px;
  z-index: 999999;
  cursor: pointer;
  border: 1px black solid;
  min-width: 80%;
  font-family: 'IM Fell English', serif;
  font-size: 4.7vw;
  font-style: italic;
}
.title,.book {
  font-family: 'IM Fell English', serif;
  text-transform: uppercase;
  font-size: 5vw;
  color: gray;
  text-overflow: ellipsis;
}
.book {
  color: black;
}
.book-name {
  color: gray;
}
span {
  font-style: italic;
}
#transCount {
  position: absolute;
  right: 0;
  font-size: 3vw;
}
.helper {
  font-size: 4vw;
}

.hexameter-line {
  font-size: 3.5vw;
}
.line-number {
  font-size: 2vw;
  margin-top: 0.7vh;
}
.comment, .parallel_translation {
  font-size: 3vw;
}
.author {
  font-size: 4vw;
}
.title {
  font-size: 3.5vw;
}
.book {
  font-size: 3vw;
}
#transCount,.helper {
  font-size: 3.5vw;
}

@media (200px <= width <= 500px) {
  .hexameter-line {
    font-size: 4vw;
  }
  .line-number {
    font-size: 2.4vw;
  }
  .comment, .parallel_translation {
    font-size: 4vw;
  }
  .author {
    font-size: 6.5vw;
  }
  .title {
    font-size: 5.5vw;
  }
  .book {
    font-size: 4.5vw;
  }
  #transCount,.helper {
    font-size: 4vw;
  }
}
@media (800px <= width) {
  .masthead-container,.comment, .parallel_translation, .greek-body {
    margin-left: 33%;
  }
  .masthead-container, .comment, .parallel_translation, .greek-body {
    width: 66%;
  }
  .hexameter-line {
    font-size: 0.8vw;
  }
  .line-number {
    font-size: 0.5vw;
  }
  .comment, .parallel_translation {
    font-size: 1vw;
  }
  .author {
    font-size: 1.5vw;
  }
  .title {
    font-size: 1vw;
  }
  .book {
    font-size: 0.8vw;
  }
  #transCount,.helper {
    font-size: 1vw;
  }
}

.column {
  line-height: 1vw;
}

#papyrus {
  top: 0;
  left: 0;
  height: 100%;
  width: 33%;
}
 
#uncial > span > span:nth-child(even) {
  font-weight: bold;
  color: gray;
}

#uncial span {
  text-transform: uppercase;
  font-style: normal;
}

.container {
}
.column {
  position: absolute;
  display: inline-block;
}
#minor {
  left: 68%;
}
#uncial {
  left: 33%;
  font-family: 'P114', serif;
}
.imagecontainer {
  position: fixed;
  height: 100%;
}
.imagecontainer img {
  height: 100%;
  mix-blend-mode: multiply;
  z-index: 11;
  position: relative;
  pointer-events:none;
}
.image-line {
  position: absolute;
  z-index: 0;
}
#uncial .hexameter-line {
  margin-left: 2vw;
  margin-right: 2vw;
  line-height: 12px;
}
#minor .hexameter-line {
  margin-left: 2vw;
  margin-right: 2vw;
  line-height: 12px;
}

.translation-highlight {
  background-color: rgba(80, 80, 80, 0.2);
}

#papyrus .translation-highlight {
  background-color: rgba(80, 80, 80, 0.1);
}

.line-highlight {
  background-color: rgba(255, 255, 0, 0.2);
}
#papyrus .line-highlight {
  background-color: rgba(255, 255, 80, 0.8);
}
.hexameter-line span {
  cursor: pointer;
}
.hexameter-line span:hover {
  background-color: #e9e9e9;
}