@charset "UTF-8";
/* 
  GF 04/05/2022: Convention to define colour variable names.
  We use names that are not tied to neither the specific colour
  nor to the object they are initially tied to.
  Initial colour palette derived from flat designs:
  https: //www.figma.com/file/8mGkpFZTQpL7kpGCOYRgC8/Alice-Thornton?node-id=164%3A1480
*/
@import url("https://fonts.googleapis.com/css2?family=Kalnia+Glaze:wght@100..700&display=swap");
.visually-hidden:not(:focus) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

html {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

*,
*:before,
*:after {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

section {
  max-width: 1200px;
  margin: 0 auto;
}

#data {
  margin: 10vw 0 10vw 25%;
  width: 60%;
  font-family: sans-serif;
}
#data table {
  display: inline-block;
  width: 100%;
  height: auto;
  position: relative;
  justify-content: center;
  vertical-align: bottom;
  margin: 2vw 0 4vw 0;
  border-collapse: collapse;
}
#data table:nth-child(2) thead:before {
  content: "decades";
  font-size: 1.5vw;
  color: rgba(0, 0, 0, 0.5);
  left: -19.5vw;
  top: 100%;
  position: absolute;
  font-family: "Kalnia Glaze", serif;
  filter: grayscale(1);
  margin-top: -13vw;
}
#data table:nth-child(2) tbody:before {
  content: "10";
}
#data table:nth-child(3) tbody:before {
  content: "20";
}
#data table:nth-child(3) tr:nth-child(3) td.historicalEventCount {
  background-image: linear-gradient(90deg, #6c4826 1%, #6c4826 4%, transparent 5%, transparent 7%, #6c4826 8%, #6c4826 11%, transparent 12%);
}
#data table:nth-child(3) tr:nth-child(9) td.historicalEventCount {
  background-image: linear-gradient(90deg, #6c4826 1%, #6c4826 4%, transparent 5%, transparent 7%, #6c4826 8%, #6c4826 11%, transparent 12%);
}
#data table:nth-child(4) tbody:before {
  content: "30";
}
#data table:nth-child(5) tbody:before {
  content: "40";
}
#data table:nth-child(6) tbody:before {
  content: "50";
}
#data table:nth-child(7) tbody {
  padding-top: 2vw;
}
#data table:nth-child(7) tbody:before {
  content: "60";
}
#data table:nth-child(8) tbody {
  padding-top: 3vw;
}
#data table:nth-child(8) tbody:before {
  content: "70";
}
#data table:nth-child(9) tbody:before {
  content: "80";
}
#data table:nth-child(9) tr:nth-child(8):before {
  content: "⟵ end of Thornton's life";
  position: absolute;
  font-size: 1.2vw;
  line-height: 0;
  width: 15vw;
  margin-left: 6.5vw;
  margin-top: 0.3vw;
}
#data table:after {
  border-radius: 0 100% 100% 0;
  position: absolute;
  content: "";
  height: calc(100% + 5.6vw);
  aspect-ratio: 1/1;
  padding: 0;
  right: -3vw;
  bottom: 0;
  border: 0.4vw solid #b0ab9e;
  transform: translate(50%, 0);
  border-left: 0;
  z-index: -1;
}
#data table:nth-child(2n+1):after {
  right: initial;
  left: -3vw;
  transform: translate(-50%, 0) rotate(180deg);
}
#data table:first-of-type:after {
  display: none;
}
#data table:first-of-type tr:not(:nth-child(1n+6)) {
  opacity: 0;
}
#data table:first-of-type tr:nth-child(6) span {
  opacity: 0;
}
#data table:first-of-type tr:nth-child(6):before {
  content: "start of Thornton's life ⟶";
  position: absolute;
  font-size: 1.2vw;
  line-height: 0;
  width: 15vw;
  margin-left: -15vw;
  margin-top: 0.3vw;
}
#data table:first-of-type:before {
  right: 45%;
  left: inherit;
}
#data table:before {
  position: absolute;
  content: "";
  border: 0.1vw solid #b7b7b7;
  width: 1vw;
  height: 1vw;
  bottom: -0.25vw;
  z-index: 1;
  transform: translate(50%, 10%) rotate(45deg);
  border-left: 0.1vw solid transparent;
  border-bottom: 0.1vw solid transparent;
  left: -4.5vw;
}
#data table:nth-child(2n):before {
  right: -3.5vw;
  left: inherit;
  transform: translate(50%, 15%) rotate(-135deg);
}
#data table:nth-of-type(even) tbody {
  display: flex;
  flex-direction: row-reverse;
}
#data table tbody {
  position: relative;
  display: flex;
}
#data table tbody:before {
  content: "";
  font-size: 6vw;
  color: rgba(0, 0, 0, 0.2);
  left: -20vw;
  top: 100%;
  position: absolute;
  font-family: "Kalnia Glaze", serif;
  filter: grayscale(1);
  margin-top: -7vw;
}
#data table tbody tr {
  width: 10%;
  position: relative;
  margin: 0 0 0;
  border-bottom: 0.4vw solid #b0ab9e;
  align-self: flex-end;
  /*[data-book-id] { //Removing based on partner's request
    &:before {
      content: attr(data-book-id);
      font-size: 1vw;
      width: 1vw;
      position: absolute;
      opacity: 1;
      text-align: center;
      background-image: linear-gradient(
        180deg,
        rgba(70, 34, 0, 0.6) 1%,
        rgba(179, 66, 0, 0.1) 100%
      );
      height: 5vw;
      bottom: 4vw;
      color: white;
    }
    &:after {
      content: attr(data-book-tooltip);
      font-size: 1vw;
      width: 8vw;
      position: absolute;
      opacity: 0;
      transform: translate(-80%, -120%);
      text-align: left;
      background: rgba(255, 255, 255, 0.9);
      padding: 0.3vw;
      box-shadow: 0.1vw 0.1vw 0.1vw $gray;
    }
  }*/
}
#data table tbody tr:hover {
  border-bottom: 0.4vw solid #a45a52;
  cursor: pointer;
}
#data table tbody tr:hover td {
  opacity: 1;
}
#data table tbody tr:hover td:after {
  opacity: 1;
}
#data table tbody tr:hover td:before {
  opacity: 1;
}
#data table tbody tr:hover td.present {
  opacity: 1;
}
#data table tbody tr:hover td.present span {
  opacity: 1;
}
#data table tbody tr:hover td.year span {
  font-weight: bold;
}
#data table tbody tr:hover td.birthEventCount:after, #data table tbody tr:hover td.deathEventCount:after, #data table tbody tr:hover td.marriageEventCount:after, #data table tbody tr:hover td.historicalEventCount:after, #data table tbody tr:hover td.entityEventCount:after, #data table tbody tr:hover td.year:after {
  opacity: 1;
}
#data table tbody tr.hiddenRow {
  z-index: 9;
  width: 60%;
  height: 70%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.6);
  overflow: scroll;
  padding: 100px 25% 20% 15%;
}
#data table tbody tr.hiddenRow td {
  background-color: #e2e2e2;
  padding: 55px 10% 0 10%;
  width: 80%;
}
#data table tbody tr.hiddenRow button.hidden-close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background-color: #462200;
  color: white;
  border: none;
  padding: 0 0 15px 10px;
  font-size: 16px;
  line-height: 1;
}
#data table tbody tr.hiddenRow button.hidden-close:after {
  content: "✕";
  right: 0;
  top: 7px;
  font-size: 40px;
  padding: 3px 10px;
  position: relative;
}
#data table tbody tr.hiddenRow button.hidden-close:hover {
  background-color: #200000;
  color: white;
}
#data table tbody tr.hiddenRow td {
  width: 100%;
  text-align: left;
  max-width: 950px;
  margin: 0 auto;
}
#data table tbody tr.hiddenRow td div {
  background: white;
  width: 100%;
  margin-bottom: 3vw;
  padding: 3vw 3vw 0 5vw;
}
#data table tbody tr.hiddenRow td h3 {
  font-size: 30px;
  margin-left: 18px;
}
#data table tbody tr.hiddenRow td .hidden-row-footer {
  background: #e2e2e2;
  height: 0;
  padding: 0;
}
#data table tbody tr.hiddenRow td .container-lifetimeEvents h3:before {
  background-image: linear-gradient(0deg, rgba(128, 31, 0, 0.4) 6%, rgba(128, 31, 0, 0) 100%);
  position: relative;
  content: "";
  left: -40px;
  top: 10px;
  border-radius: 50%;
  border: 4px double #b34200;
  width: 22px;
  height: 22px;
  display: block;
  background-repeat: no-repeat;
  z-index: 1;
}
#data table tbody tr.hiddenRow td .container-lifetimeEvents h3:after {
  position: relative;
  content: "";
  width: 30px;
  height: 18px;
  background: black;
  left: -40px;
  top: -23px;
  display: block;
}
#data table tbody tr.hiddenRow td .container-historicalEvents h3:before {
  content: "";
  width: 2px;
  height: 40px;
  margin-top: 0;
  left: -20px;
  top: 29px;
  position: relative;
  background: #462200;
  display: block;
}
#data table tbody tr.hiddenRow td .container-entityEvents h3:before {
  background-image: linear-gradient(180deg, rgba(70, 34, 0, 0.7), rgba(128, 31, 0, 0.05));
  vertical-align: bottom;
  position: relative;
  content: "";
  left: 0;
  left: -40px;
  top: 29px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 30px;
  height: 40px;
  margin-top: 3px;
  display: block;
}
#data table tbody tr.hiddenRow td ul {
  margin-bottom: 70px;
}
#data table tbody tr.hiddenRow td ul li h4 {
  margin-top: 40px;
}
#data table tbody tr.hiddenRow td img {
  width: 100%;
  max-width: 1000px;
}
#data table tbody tr.hiddenRow td img .portrait {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  display: flex;
}
#data table tbody tr td {
  position: relative;
  padding: 0;
  border: 0;
  height: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 10%;
  text-align: center;
  align-items: center;
  justify-content: center;
}
#data table tbody tr td:after {
  opacity: 0.6;
}
#data table tbody tr td span {
  position: absolute;
  font-size: 1vw;
  opacity: 0;
  /*left: 50%;*/
  visibility: visible;
}
#data table tbody tr td.entityEventCount {
  width: calc(var(--event-value) / 1);
  padding-bottom: calc(var(--event-value) / 1);
  margin-bottom: 0;
  opacity: 0.4;
  aspect-ratio: 1/4;
}
#data table tbody tr td.entityEventCount:before {
  background-image: linear-gradient(180deg, rgb(70, 34, 0), rgba(128, 31, 0, 0.05));
  padding-bottom: 500%;
  bottom: -0.5vw;
  vertical-align: bottom;
  position: absolute;
  content: "";
  left: -1vw;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 7.5vw;
}
#data table tbody tr td.entityEventCount span {
  text-align: left;
  opacity: 0;
  background: rgba(255, 255, 255, 0.9);
  display: block;
  padding: 0 0.5vw;
}
#data table tbody tr td.entityEventCount:after {
  content: attr(data-tooltip-suffix);
  font-size: 1vw;
  width: 7vw;
  position: absolute;
  opacity: 0;
  transform: translate(60%, 0);
  text-align: left;
  background: rgba(255, 255, 255, 0.9);
}
#data table tbody tr td.year {
  vertical-align: bottom;
  height: 3vw;
  position: absolute;
  bottom: -4vw;
  z-index: 1;
  width: 3vw;
  height: 1.5vw;
  opacity: 1;
  display: inline-flex;
  margin-top: 2vw;
  transform: translateX(35%);
}
#data table tbody tr td.year span {
  opacity: 1;
}
#data table tbody tr td.historicalEventCount {
  width: 3vw;
  height: 4vw;
  margin-bottom: 0;
  vertical-align: bottom;
  position: absolute;
  bottom: -2.7vw;
  transform: translateX(83%);
}
#data table tbody tr td.historicalEventCount.present {
  background-image: linear-gradient(90deg, #6c4826 1%, #6c4826 5%, transparent 3%);
}
#data table tbody tr td.historicalEventCount span {
  bottom: -10%;
}
#data table tbody tr td.historicalEventCount:after {
  content: attr(data-tooltip-suffix);
  font-size: 1vw;
  width: 10vw;
  left: 20%;
  position: absolute;
  bottom: -10%;
  opacity: 0;
}
#data table tbody tr td.birthEventCount {
  background-image: linear-gradient(0deg, rgba(128, 31, 0, 0.4) 6%, rgba(128, 31, 0, 0) 100%);
  background-repeat: no-repeat;
  border: 0.1vw solid #b34200;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  width: 3.3vw;
  height: 3.2vw;
  opacity: 1;
  display: flex;
  margin-top: -3vw;
  transform: translateX(27.5%);
  opacity: 0;
  border-radius: 50%;
}
#data table tbody tr td.birthEventCount.present {
  opacity: 1;
}
#data table tbody tr td.birthEventCount.present:before {
  width: 2vw;
  height: 2vw;
  content: "B";
  position: absolute;
  font-size: 1.1vw;
  text-align: center;
  color: black;
  text-align: center;
  bottom: 0.2vw;
  color: black;
  z-index: 0;
  left: 0.7vw;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 11%, rgba(255, 255, 255, 0) 75%);
  line-height: 1.9;
  /*background:rgba(255,255,255,0.7);*/
}
#data table tbody tr td.birthEventCount span {
  display: none;
}
#data table tbody tr td.deathEventCount {
  width: 3vw;
  height: 1.8vw;
  opacity: 1;
  display: inline-flex;
  margin-top: 0.3vw;
  transform: translateX(35%);
  background: black;
  position: absolute;
  opacity: 0;
}
#data table tbody tr td.deathEventCount.present {
  opacity: 1;
}
#data table tbody tr td.deathEventCount.present:before {
  width: 1.5vw;
  height: 1.5vw;
  content: "D";
  position: absolute;
  font-size: 1.1vw;
  text-align: center;
  bottom: 0.25vw;
  color: white;
  z-index: 0;
  left: 0.75vw;
  border-radius: 50%;
}
#data table tbody tr td.deathEventCount span {
  display: none;
}
#data table tbody tr td.marriageEventCount {
  width: 3vw;
  height: 3vw;
  opacity: 1;
  display: flex;
  margin-top: -3vw;
  /*bottom:0.7vw*/
  transform: translateX(35%);
  background-position: 50% -1.5vw, -1.5vw 50%, -1.5vw -1.5vw;
  background-size: 100% 100%;
  display: flex;
  opacity: 0;
}
#data table tbody tr td.marriageEventCount.present {
  opacity: 1;
}
#data table tbody tr td.marriageEventCount.present:before {
  width: 4vw;
  height: 4vw;
  content: "B";
  position: absolute;
  font-size: 1vw;
  line-height: 4.2;
  text-align: center;
  bottom: -0.5vw;
  left: -0.4vw;
  color: black;
  background: rgba(0, 0, 0, 0.4);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 41%, rgba(128, 31, 0, 0.7) 44%, rgba(128, 31, 0, 0.7) 45%, white 48%, rgba(128, 31, 0, 0.7) 54%, rgba(255, 255, 255, 0) 55%);
  border-radius: 50%;
  z-index: 1;
}
#data table tbody tr td.marriageEventCount span {
  display: none;
}
#data table tbody tr td.birthEventCount:before, #data table tbody tr td.deathEventCount:before, #data table tbody tr td.marriageEventCount:before {
  text-underline-offset: 0.2vw;
  text-decoration: underline;
}
#data table tbody tr td.birthEventCount.child-1:before, #data table tbody tr td.deathEventCount.child-1:before, #data table tbody tr td.marriageEventCount.child-1:before {
  content: "1";
}
#data table tbody tr td.birthEventCount.child-2:before, #data table tbody tr td.deathEventCount.child-2:before, #data table tbody tr td.marriageEventCount.child-2:before {
  content: "2";
}
#data table tbody tr td.birthEventCount.child-3:before, #data table tbody tr td.deathEventCount.child-3:before, #data table tbody tr td.marriageEventCount.child-3:before {
  content: "3";
}
#data table tbody tr td.birthEventCount.child-4:before, #data table tbody tr td.deathEventCount.child-4:before, #data table tbody tr td.marriageEventCount.child-4:before {
  content: "4";
}
#data table tbody tr td.birthEventCount.child-5:before, #data table tbody tr td.deathEventCount.child-5:before, #data table tbody tr td.marriageEventCount.child-5:before {
  content: "5";
}
#data table tbody tr td.birthEventCount.child-6:before, #data table tbody tr td.deathEventCount.child-6:before, #data table tbody tr td.marriageEventCount.child-6:before {
  content: "6";
  text-decoration-style: double;
}
#data table tbody tr td.birthEventCount.child-7:before, #data table tbody tr td.deathEventCount.child-7:before, #data table tbody tr td.marriageEventCount.child-7:before {
  content: "7";
  text-decoration-style: double;
}
#data table tbody tr td.birthEventCount.child-8:before, #data table tbody tr td.deathEventCount.child-8:before, #data table tbody tr td.marriageEventCount.child-8:before {
  content: "8";
}
#data table tbody tr td.birthEventCount.child-9:before, #data table tbody tr td.deathEventCount.child-9:before, #data table tbody tr td.marriageEventCount.child-9:before {
  content: "9";
  text-decoration-style: double;
}
#data table tbody tr td.birthEventCount.alice:before, #data table tbody tr td.deathEventCount.alice:before, #data table tbody tr td.marriageEventCount.alice:before {
  content: "T";
}
#data table tbody tr td.birthEventCount.alice-mother:before, #data table tbody tr td.deathEventCount.alice-mother:before, #data table tbody tr td.marriageEventCount.alice-mother:before {
  content: "AW";
}
#data table tbody tr td.birthEventCount.alice-father:before, #data table tbody tr td.deathEventCount.alice-father:before, #data table tbody tr td.marriageEventCount.alice-father:before {
  content: "CW";
  text-decoration-style: double;
}
#data table tbody tr td.birthEventCount.alice-husband:before, #data table tbody tr td.deathEventCount.alice-husband:before, #data table tbody tr td.marriageEventCount.alice-husband:before {
  content: "WT";
  text-decoration-style: double;
}
#data table tbody tr td.birthEventCount:after, #data table tbody tr td.marriageEventCount:after, #data table tbody tr td.deathEventCount:after {
  content: attr(data-title);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.1vw 0.3vw rgba(128, 31, 0, 0.4);
  width: 15vw;
  font-size: 1vw;
  line-height: 1;
  position: absolute;
  top: -70%;
  height: auto;
  opacity: 0;
  z-index: 2;
  color: black;
  padding: 0.3vw 0;
}
#data table tbody tr td.birthEventCount.child-2:after {
  top: -150%;
}
#data table tbody tr td.birthEventCount.child-4:after {
  top: -150%;
}
#data table tbody tr td.birthEventCount.child-5:after {
  top: -100%;
}
#data table tbody tr td.marriageEventCount:after {
  transform: translateX(0%);
  top: -100%;
}
#data table tbody tr td.deathEventCount:after {
  top: 220%;
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0 0.1vw 0.3vw rgba(0, 0, 0, 0.4);
  color: white;
  padding: 0.2vw 0;
}

#legend-wrapper {
  z-index: 1;
  pointer-events: auto;
  /* end .content */
}
#legend-wrapper > label {
  display: block;
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  -ms-transition: all 400ms ease-in;
  -o-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
  z-index: 1;
  cursor: pointer;
  right: -3px;
  bottom: 0;
  top: 160px;
  margin: auto;
  position: fixed;
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: top center;
  font-size: 1.2em;
  background: #462200;
  color: white;
  width: 80px;
  height: 2em;
  z-index: 99;
}
#legend-wrapper > label:hover {
  background: #200000;
  right: 6px;
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  -ms-transition: all 400ms ease-in;
  -o-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
}
#legend-wrapper > label:hover ~ .content {
  right: -340px; /* content on hover */
}
#legend-wrapper > label:hover:before {
  -moz-transform: rotate(180deg) translate(0, -1px);
  -o-transform: rotate(180deg) translate(0, -1px);
  -ms-transform: rotate(180deg) translate(0, -1px);
  -webkit-transform: rotate(180deg) translate(0, -1px);
  transform: rotate(180deg) translate(0, -1px);
}
#legend-wrapper > label h2 {
  font-size: 16px;
  line-height: 0;
  color: white;
  font-weight: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  padding: 18px 0 0 12px;
}
#legend-wrapper > label h2:before {
  display: none;
}
#legend-wrapper > label:before {
  content: "▾";
  -moz-transform: rotate(180deg) translate(0, -3px);
  -o-transform: rotate(180deg) translate(0, -3px);
  -ms-transform: rotate(180deg) translate(0, -3px);
  -webkit-transform: rotate(180deg) translate(0, -3px);
  transform: rotate(180deg) translate(0, -3px);
  position: absolute;
  right: 0.7em;
  bottom: 0.4em;
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  -ms-transition: all 400ms ease-in;
  -o-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
}
#legend-wrapper .content {
  position: fixed;
  top: 150px;
  bottom: 0;
  right: -375px;
  overflow: scroll;
  font-size: 14px;
  line-height: 1.6;
  width: 310px;
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  -ms-transition: all 400ms ease-in;
  -o-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
  background: white;
  height: 320px;
  margin: auto;
  border: 1px solid #462200;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  padding-right: 40px;
}
#legend-wrapper .content div {
  background: white;
  width: 134px;
  margin: 0px;
  padding: 16px 0 0 10px;
  font-size: 14px;
}
#legend-wrapper .content div ul {
  width: 140px;
}
#legend-wrapper .content div h4 {
  margin: 0;
  font-size: 18px;
}
#legend-wrapper .content .events ul li {
  list-style-type: none;
}
#legend-wrapper .content .events ul li:nth-child(1):before {
  content: "";
  width: 20px;
  height: 6px;
  left: 11px;
  margin-top: 8px;
  position: absolute;
  background: #b0ab9e;
}
#legend-wrapper .content .events ul li:nth-child(2):before {
  position: absolute;
  content: "";
  border: 1px solid #b7b7b7;
  width: 8px;
  height: 8px;
  transform: translate(50%, 10%) rotate(45deg);
  border-left: 1px solid transparent;
  border-bottom: 1px solid transparent;
  left: 8px;
  margin-top: 4px;
}
#legend-wrapper .content .events ul li:nth-child(3):before {
  background-image: linear-gradient(180deg, rgba(70, 34, 0, 0.7), rgba(128, 31, 0, 0.05));
  vertical-align: bottom;
  position: absolute;
  content: "";
  left: 11px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 20px;
  height: 17px;
  margin-top: 1px;
}
#legend-wrapper .content .events ul li:nth-child(4):before {
  content: "";
  width: 1px;
  height: 14px;
  margin-top: 3px;
  left: 20px;
  position: absolute;
  background: #462200;
}
#legend-wrapper .content .events ul li:nth-child(5):before {
  background-image: linear-gradient(0deg, rgba(128, 31, 0, 0.35) 6%, rgba(128, 31, 0, 0) 100%);
  background-repeat: no-repeat;
  border: 1px solid #b34200;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  width: 18px;
  height: 18px;
  content: "";
  position: absolute;
  border-radius: 50%;
  left: 12px;
  margin-top: 0;
}
#legend-wrapper .content .events ul li:nth-child(6):before {
  width: 18px;
  height: 10px;
  content: "";
  background: black;
  position: absolute;
  margin-left: -26px;
  margin-top: 5px;
}
#legend-wrapper .content .events ul li:nth-child(7):before {
  width: 25px;
  height: 25px;
  opacity: 1;
  position: absolute;
  content: "";
  left: -1px;
  transform: translateX(35%);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 41%, rgba(128, 31, 0, 0.7) 44%, rgba(128, 31, 0, 0.7) 45%, white 48%, rgba(128, 31, 0, 0.7) 54%, rgba(255, 255, 255, 0) 55%);
  background-size: 100% 100%;
  margin-top: -3px;
}
#legend-wrapper .content .events ul li:nth-child(8):before {
  width: 10px;
  height: 1px;
  content: "";
  position: absolute;
  margin-left: -22px;
  margin-top: 12px;
  border-bottom: 3px double black;
}
#legend-wrapper .content .events ul li:nth-child(9):before {
  width: 10px;
  height: 1px;
  content: "";
  position: absolute;
  margin-left: -22px;
  margin-top: 14px;
  border-bottom: 1px solid black;
}
#legend-wrapper .content .initials {
  padding-left: 2vw;
}
#legend-wrapper .content .initials ul li {
  list-style-type: none;
  margin-left: -27px;
}
#legend-wrapper input#legend[type=checkbox] {
  display: none;
}
#legend-wrapper input#legend[type=checkbox]:checked ~ .content {
  right: 0px; /* content on click */
}
#legend-wrapper input#legend[type=checkbox]:checked ~ label.legend-button {
  right: 355px;
  background: #462200;
  /* cross icon */
}
#legend-wrapper input#legend[type=checkbox]:checked ~ label.legend-button h2 {
  color: white;
}
#legend-wrapper input#legend[type=checkbox]:checked ~ label.legend-button:before {
  content: "▾";
  -moz-transform: rotate(0) translate(0, -1px);
  -o-transform: rotate(0) translate(0, -1px);
  -ms-transform: rotate(0) translate(0, -1px);
  -webkit-transform: rotate(0) translate(0, -1px);
  transform: rotate(0) translate(0, -1px);
  color: white;
}
#legend-wrapper input#legend[type=checkbox]:checked ~ label.legend-button:hover {
  background: #200000;
}
#legend-wrapper input#legend[type=checkbox]:checked ~ label.legend-button:hover:before {
  transform: translate(0, 2px);
}

#guideline-wrapper {
  z-index: 1;
  pointer-events: auto;
  /* end .content */
}
#guideline-wrapper > label {
  display: block;
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  -ms-transition: all 400ms ease-in;
  -o-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
  z-index: 1;
  cursor: pointer;
  right: -37px;
  bottom: 0;
  top: -150px;
  margin: auto;
  position: fixed;
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: top center;
  font-size: 1.2em;
  background: #462200;
  color: white;
  width: 150px;
  height: 2em;
  z-index: 99;
}
#guideline-wrapper > label:hover {
  background: #200000;
  right: -28px;
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  -ms-transition: all 400ms ease-in;
  -o-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
}
#guideline-wrapper > label:hover ~ .content {
  right: -350px; /* content on hover */
}
#guideline-wrapper > label:hover:before {
  -moz-transform: rotate(180deg) translate(0, -1px);
  -o-transform: rotate(180deg) translate(0, -1px);
  -ms-transform: rotate(180deg) translate(0, -1px);
  -webkit-transform: rotate(180deg) translate(0, -1px);
  transform: rotate(180deg) translate(0, -1px);
}
#guideline-wrapper > label h2 {
  font-size: 16px;
  line-height: 0;
  color: white;
  font-weight: normal;
  text-transform: uppercase;
  font-family: sans-serif;
  padding: 18px 0 0 17px;
}
#guideline-wrapper > label h2:before {
  display: none;
}
#guideline-wrapper > label:before {
  content: "▾";
  -moz-transform: rotate(180deg) translate(0, -3px);
  -o-transform: rotate(180deg) translate(0, -3px);
  -ms-transform: rotate(180deg) translate(0, -3px);
  -webkit-transform: rotate(180deg) translate(0, -3px);
  transform: rotate(180deg) translate(0, -3px);
  position: absolute;
  right: 0.7em;
  bottom: 0.4em;
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  -ms-transition: all 400ms ease-in;
  -o-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
}
#guideline-wrapper .content {
  position: fixed;
  top: -100px;
  bottom: 0;
  right: -370px;
  overflow: scroll;
  font-size: 14px;
  line-height: 1.6;
  width: 300px;
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  -ms-transition: all 400ms ease-in;
  -o-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
  background: white;
  height: 450px;
  margin: auto;
  border: 1px solid #462200;
  z-index: 7;
  padding: 20px 40px 20px 20px;
}
#guideline-wrapper .content div h4 {
  margin: 0;
  font-size: 18px;
}
#guideline-wrapper input#guideline[type=checkbox] {
  display: none;
}
#guideline-wrapper input#guideline[type=checkbox]:checked ~ .content {
  right: 0px; /* content on click */
}
#guideline-wrapper input#guideline[type=checkbox]:checked ~ label.guideline-button {
  right: 330px;
  background: #462200;
  /* cross icon */
}
#guideline-wrapper input#guideline[type=checkbox]:checked ~ label.guideline-button h2 {
  color: white;
}
#guideline-wrapper input#guideline[type=checkbox]:checked ~ label.guideline-button:before {
  content: "▾";
  -moz-transform: rotate(0) translate(0, -1px);
  -o-transform: rotate(0) translate(0, -1px);
  -ms-transform: rotate(0) translate(0, -1px);
  -webkit-transform: rotate(0) translate(0, -1px);
  transform: rotate(0) translate(0, -1px);
  color: white;
}
#guideline-wrapper input#guideline[type=checkbox]:checked ~ label.guideline-button:hover {
  background: #200000;
}
#guideline-wrapper input#guideline[type=checkbox]:checked ~ label.guideline-button:hover:before {
  transform: translate(0, 2px);
}

@media screen and (max-width: 800px) {
  #data table tbody tr.hiddenRow {
    z-index: 99;
    margin-top: 56px;
    width: 98%;
    height: 70%;
    padding: 20% 1%;
  }
  #data table tbody tr.hiddenRow td {
    padding: 55px 5% 0 5%;
    width: 90%;
  }
}