.active {
  -webkit-animation: fadeIn 2s;
          animation: fadeIn 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.notactive {
  -webkit-animation: fadeOut 2s;
          animation: fadeOut 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.darkfadein {
  -webkit-animation: darkfadeIn 2s;
          animation: darkfadeIn 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes darkfadeIn {
  0% {
    background-color: #f9f9f9;
  }
  100% {
    background-color: var(--darkbackground);
  }
}

@keyframes darkfadeIn {
  0% {
    background-color: #f9f9f9;
  }
  100% {
    background-color: var(--darkbackground);
  }
}
.darkfadeout {
  -webkit-animation: darkfadeOut 2s;
          animation: darkfadeOut 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes darkfadeOut {
  0% {
    background-color: var(--darkbackground);
  }
  100% {
    background-color: #f9f9f9;
  }
}

@keyframes darkfadeOut {
  0% {
    background-color: var(--darkbackground);
  }
  100% {
    background-color: #f9f9f9;
  }
}
.scrollable.swipein {
  -webkit-animation: swipeinanimation 0.1s;
          animation: swipeinanimation 0.1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.swipein {
  -webkit-animation: swipeinanimation 1s;
          animation: swipeinanimation 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes swipeinanimation {
  0% {
    -webkit-transform: translate(-15%, 100%);
            transform: translate(-15%, 100%);
  }
  100% {
    -webkit-transform: translate(-15%, 0);
            transform: translate(-15%, 0);
  }
}

@keyframes swipeinanimation {
  0% {
    -webkit-transform: translate(-15%, 100%);
            transform: translate(-15%, 100%);
  }
  100% {
    -webkit-transform: translate(-15%, 0);
            transform: translate(-15%, 0);
  }
}
.swipeout {
  -webkit-animation: swipeoutanimation 1s;
          animation: swipeoutanimation 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes swipeoutanimation {
  0% {
    -webkit-transform: translate(-15%, 0);
            transform: translate(-15%, 0);
  }
  100% {
    -webkit-transform: translate(-15%, 100%);
            transform: translate(-15%, 100%);
  }
}

@keyframes swipeoutanimation {
  0% {
    -webkit-transform: translate(-15%, 0);
            transform: translate(-15%, 0);
  }
  100% {
    -webkit-transform: translate(-15%, 100%);
            transform: translate(-15%, 100%);
  }
}
@-webkit-keyframes wibbel {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -15%);
            transform: translate(0, -15%);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes wibbel {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -15%);
            transform: translate(0, -15%);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
#floatingarrow {
  position: sticky;
  left: 100%;
  top: 2%;
  width: 10vw;
  height: 10vw;
  max-width: 100px;
  max-height: 100px;
  z-index: 10;
  -webkit-animation: wibbel 3s;
          animation: wibbel 3s;
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@media screen and (max-width: 720px) {
  @-webkit-keyframes swipeinanimation {
    0% {
      -webkit-transform: translate(-20%, 100%);
              transform: translate(-20%, 100%);
    }
    100% {
      -webkit-transform: translate(-20%, 0);
              transform: translate(-20%, 0);
    }
  }
  @keyframes swipeinanimation {
    0% {
      -webkit-transform: translate(-20%, 100%);
              transform: translate(-20%, 100%);
    }
    100% {
      -webkit-transform: translate(-20%, 0);
              transform: translate(-20%, 0);
    }
  }
  @-webkit-keyframes swipeoutanimation {
    0% {
      -webkit-transform: translate(-20%, 0);
              transform: translate(-20%, 0);
    }
    100% {
      -webkit-transform: translate(-20%, 100%);
              transform: translate(-20%, 100%);
    }
  }
  @keyframes swipeoutanimation {
    0% {
      -webkit-transform: translate(-20%, 0);
              transform: translate(-20%, 0);
    }
    100% {
      -webkit-transform: translate(-20%, 100%);
              transform: translate(-20%, 100%);
    }
  }
  body {
    padding: 0px !important;
  }
  body p {
    font-size: 18px !important;
  }
  body #scrollbody.chapter1 .panel:not(.fadeingroup), body #scrollbody.chapter2 .panel:not(.fadeingroup), body #scrollbody.chapter3 .panel:not(.fadeingroup) {
    overflow-x: clip;
  }
  body #scrollbody.chapter1 .panel .fadeininner, body #scrollbody.chapter2 .panel .fadeininner, body #scrollbody.chapter3 .panel .fadeininner {
    overflow-x: clip;
  }
  body #scrollbody.chapter1 .panel img, body #scrollbody.chapter2 .panel img, body #scrollbody.chapter3 .panel img {
    width: 170% !important;
    -webkit-transform: translate(-20%, 0);
            transform: translate(-20%, 0);
  }
  body #scrollbody.chapter1 .panel .reportertext img, body #scrollbody.chapter2 .panel .reportertext img, body #scrollbody.chapter3 .panel .reportertext img {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  body #scrollbody.chapter1 .panel .fadeininner > img, body #scrollbody.chapter1 .panel .fadecontainer > img, body #scrollbody.chapter2 .panel .fadeininner > img, body #scrollbody.chapter2 .panel .fadecontainer > img, body #scrollbody.chapter3 .panel .fadeininner > img, body #scrollbody.chapter3 .panel .fadecontainer > img {
    max-width: none !important;
    max-height: none !important;
  }
  body #scrollbody.chapter1 .panel .reportertext .flexhorizontal img, body #scrollbody.chapter2 .panel .reportertext .flexhorizontal img, body #scrollbody.chapter3 .panel .reportertext .flexhorizontal img {
    max-width: 30vw;
  }
}
body {
  margin: 0 auto;
  max-width: 862px;
  padding: 15px;
}
body .hidden {
  visibility: hidden;
}
body .smallitalics {
  font-size: 20px;
}
body #scrollbody {
  display: inline-block;
  overflow-x: clip;
  width: 100%;
  margin: 0 auto;
  --darkbackground: rgb(0,67,60);
}
body #scrollbody.chapter1 #panel10 {
  color: white;
  background: var(--darkbackground);
}
body #scrollbody.chapter1 #panel10 a {
  color: white;
}
body #scrollbody .panel {
  background-color: #f9f9f9;
  position: relative;
  padding: 50px 0;
}
body #scrollbody .panel.dark {
  background: var(--darkbackground);
  color: white;
}
body #scrollbody .panel.dark a {
  color: white;
}
body #scrollbody .panel img {
  width: 150% !important;
  max-width: 177.7777777778vh;
  -webkit-transform: translate(-15%, 0);
          transform: translate(-15%, 0);
  display: block;
}
body #scrollbody .panel .moving {
  position: sticky;
  top: 0%;
}
body #scrollbody .panel .stickybot {
  position: sticky;
  top: 100%;
}
body #scrollbody .panel .flexleftright {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 20px;
  height: calc(100vh - 40px);
}
body #scrollbody .panel .flexleftright img:nth-child(2n) {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
body #scrollbody .panel .fadeininner {
  position: sticky;
  top: 0%;
  height: calc(100vh - 40px);
  padding: 20px;
}
body #scrollbody .panel .fadeininner > img {
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: auto;
}
body #scrollbody .panel .fadeininner .fadecontainer {
  position: relative;
  top: 0%;
  height: calc(100vh - 40px);
}
body #scrollbody .panel .fadeininner .fadecontainer img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: auto;
}
body #scrollbody .panel .reportertext {
  font-family: "Noto Sans", sans-serif;
  padding: 80px 0;
}
body #scrollbody .panel .reportertext .flexhorizontal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5%;
}
body #scrollbody .panel .reportertext .flexhorizontal > div, body #scrollbody .panel .reportertext .flexhorizontal > p {
  -ms-flex-preferred-size: 60%;
      flex-basis: 60%;
  padding: 0;
}
body #scrollbody .panel .reportertext .flexhorizontal img {
  max-width: 250px;
  -ms-flex-preferred-size: 20%;
      flex-basis: 20%;
}
body #scrollbody .panel .reportertext p {
  font-size: 24px;
  padding: 5%;
  margin: 0px;
}
body #scrollbody .panel .swipeupgroup .swipeuparea {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
body #scrollbody .panel .swipeupgroup .swipeuparea > div {
  position: relative;
  overflow: hidden;
  max-height: 100%;
}
body #scrollbody .panel .swipeupgroup .swipeuparea .foreground {
  position: relative;
  display: block;
  margin: 0 auto;
  width: auto;
  z-index: 50;
}
body #scrollbody .panel .swipeupgroup .swipeuparea .foreground.stickybot {
  position: relative;
  top: 100%;
  -webkit-transform: none;
          transform: none;
}
body #scrollbody .panel .swipeupgroup .swipeuparea .background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 25;
}
body #scrollbody .panel .swipeupgroup .swipeuparea .background.swipeout.outside {
  z-index: 75;
}
body #scrollbody .panel .swipeupgroup .swipeuparea .background.swipein.outside {
  z-index: 0;
}
body #scrollbody .panel .swipeupgroup .swipeuparea .background.swipein.outside.last {
  z-index: 75;
}
body #scrollbody .panel .scrollswitch {
  position: sticky;
  top: 0;
}

#panel4background {
  position: relative;
  background: url("img/chapterone/p4_1_3small.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0 !important;
  height: 100vh !important;
}
#panel4background img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 100%;
  width: auto !important;
  margin: 0 auto;
  display: block;
}

#panel7background, #panel71background {
  position: relative;
  background: url("img/chapterone/p7_1.1_2.png");
  padding: 0 !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh !important;
}
#panel7background img, #panel71background img {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: auto !important;
  margin: 0 auto;
  display: block;
}

#panel71background {
  background-image: url("img/chapterone/p7_2.1.png") !important;
}
#panel71background img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#panel11background {
  position: relative;
  background: url("img/chapterone/p11_1.png");
  padding: 0 !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh !important;
}
#panel11background img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 0 auto;
  display: block;
}

#overlaytriangle {
  opacity: 0.6;
}

.foregroundfade {
  z-index: 100;
  position: absolute;
  top: 0;
}

#panel62 {
  padding-bottom: 30% !important;
}

#creditpanel p {
  font-size: 20px !important;
}
#creditpanel p.subtitle {
  font-size: 26px !important;
  font-weight: 500;
  padding: 0 5% !important;
  margin: 20px;
}
#creditpanel .flexhorizontal {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
#creditpanel .flexhorizontal a {
  font-size: 24px;
  border: 2px solid var(--darkbackground);
  background: var(--darkbackground);
  color: white;
  padding: 10px 20px;
  text-decoration: none;
}
#creditpanel .flexhorizontal a:hover {
  color: var(--darkbackground);
  background-color: #f9f9f9;
}
#creditpanel ul {
  font-size: 20px;
  padding: 0 5%;
}