body {
  background-color: #f3ede4;
  font-family: "Josefin Sans", sans-serif;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow-x: hidden;
}
body p {
  font-weight: 300;
  color: #3b3b4f;
}
.horizontal {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}
.horizontalScroll {
  width: 400vw; /* to contain 4 panels, each with 100% of window width */
  height: 100%;
}
#four {
  width: 25%;
  float: left;
}
#five {
  float: left;
  width: 25%;
}
#six {
  float: left;
  width: 25%;
}
#seven {
  float: left;
  width: 25%;
}

#logo {
  width: 3vw;
  z-index: 999;
  position: fixed;
  margin-left: 5%;
  margin-top: 1%;
}
#Header {
  z-index: 999;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  width: 100vw;
  margin-right: 5%;
  margin-left: 5%;
}
#navBar {
  margin-left: 73%;
  margin-top: 2%;
  width: 25%;
  justify-content: space-between;
}
#navBar ul {
  padding: 0;
  list-style: none;
}
#navBar li {
  display: inline;
  padding: 5%;
}
#navBar a {
  color: #333;
  text-decoration: none;
  font-size: 1.25vw;
}

.section {
  width: 100vw;
  height: 100vh;
}

.main {
  position: relative;
  display: flex;
  flex-direction: row;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.left {
  order: 1;
  width: 50vw;
}
.right {
  order: 2;
  width: 50vw;
}

.animation {
  position: relative;
  width: 33.4vw;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
}
.rightani {
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
}
#one {
  background-color: #e9b028;
}
.coverText {
  position: relative;
  top: 46%;
  left: 38%;
  transform: translate(-50%, -50%);
  width: 65%;
}
#line2 {
  width: 100%;
}
#JHTitle {
  font-weight: 400;
  text-align: center;
  font-size: 1.5vw;
  line-height: 1.8vw;
  color: whitesmoke;
}
#JHTitle span {
  font-weight: 600;
  font-size: 2.75vw;
  line-height: 2.9vw;
}
#JHTitle2 {
  font-weight: 400;
  font-size: 1.5vw;
  color: #603813;

  text-align: center;
  line-height: 2.2vw;
  margin-top: 8%;
}
#JHTitle2 span {
  font-weight: 600;
  font-size: 2.75vw;
  line-height: 2.9vw;
}

.textBox {
  position: relative;
  border-color: rgba(0, 0, 0, 0.4);
  border-style: solid;
  border-width: 1px;
  border-left: none;
  border-right: none;
  font-size: 1.5vw;
  line-height: 1.65vw;
  width: 50%;
  font-weight: 400;
}
.t1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.t2 {
  width: 47%;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#J {
  position: absolute;
  font-size: 3.2vw;
  font-weight: 600;
  margin-top: 10%;
}
#text2 {
  margin-left: 4.5%;
}
#text3_1 {
  font-weight: 400;
}
#phoneimg {
  position: relative;
  width: 22vw;
  top: 1%;
  left: 60%;
  transform: translate(-50%, -50%);
}
.bookDiv {
  position: absolute;
  cursor: pointer;
  width: 10vw;
  height: 15vw;
  left: 70%;
  top: 60%;
  z-index: 999;
}
.book {
  position: absolute;
  width: 100%;
}
#narrationJSON {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  overflow-y: hidden;
}
#H {
  position: absolute;
  font-weight: 600;
  font-size: 3.7vw;
  margin-top: 11%;
}
#text3 {
  margin-left: 13%;
}
#text3_2 {
  margin-left: -11%;
}

.JHOverlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 99;
  display: none;
}
#narration {
  font-family: adobe-caslon-pro, serif;
  font-style: normal;
  padding-left: 3%;
  padding-right: 3%;
  font-size: 1.72vw;
  word-spacing: 0.45vw;
}
.textBox4 {
  position: relative;
  width: 60%;
  top: 45%;
  left: 65%;
  transform: translate(-50%, -50%);
}
#text4 {
  font-weight: 300;
  font-size: 1.5vw;
  line-height: 1.65vw;
}
#text4_1 {
  color: #177acc;
  font-weight: 400;
}
#text4_2 {
  font-weight: 400;
}
#text4_3 {
  font-weight: 400;
}

.BG {
  position: absolute;
  width: 100vw;
  background-color: white;
}

.cardani {
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}
.cardText {
  width: 35vw;
  height: 22vw;
  position: relative;
  text-align: center;
  top: 45%;
  left: 35%;
  transform: translate(-50%, -50%);
  box-shadow: 0.3vw 0.3vw 0.8vw 0vw rgba(0, 0, 0, 0.56);
}
.card1 {
  background-color: #15bfcc;
}
.card2 {
  background-color: #e6ac23;
}
.card3 {
  background-color: #15bfcc;
}
.card4 {
  background-color: #f4e182;
}
.card4 p {
  color: #3b3b4f;
}
.cardTitle {
  color: whitesmoke;
  font-size: 2.5vw;
  font-weight: 600;
  padding-top: 10%;
}
.cardBody {
  color: whitesmoke;
  font-size: 2.25vw;
  font-weight: 400;
  padding-top: 0%;
}
#card3ani {
  width: 25vw;
}
#card4ani {
  width: 24vw;
}

.t5 {
  width: 53%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#U {
  position: absolute;
  font-size: 3.7vw;
  font-weight: 600;
  margin-top: 11.5%;
}
#text5 {
  margin-left: 10.5%;
  font-size: 1.5vw;
  line-height: 1.65vw;
}
.text5_1 {
  margin-left: -10%;
}
#text5_2 {
  font-weight: 400;
}
.t6 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.t7 {
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#text7 span {
  font-weight: 400;
}
.t8 {
  top: 25.5%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#s9ani2 {
  opacity: 0;
  top: 14%;
  left: 35%;
  transform: translate(-50%, -50%);
}
#s9ani3 {
  opacity: 0;
  top: -27%;
  left: 35%;
  transform: translate(-50%, -50%);
}

#ten {
  background-color: #e9b028;
  width: 100vw;
}
.ten {
  flex-direction: column;
  text-align: center;
  width: 58%;
}

#fancyRule {
  width: 25vw;
  margin-top: 7%;
  margin-left: 28%;
}
.s10rule {
  width: 100%;
}
#s10r1 {
  margin-top: 2%;
}

#s10p1 {
  font-weight: 600;
  font-size: 1.5vw;
  color: whitesmoke;
  padding: 0;
  margin: 0;
  margin-top: 1%;
}
#s10p2 {
  font-weight: 600;
  font-size: 3.5vw;
  color: #603813;
  padding: 0;
  margin: 0;
  margin-top: 4%;
}
#s10p3 {
  font-weight: 300;
  font-size: 1.5vw;
  line-height: 1.65vw;
  color: whitesmoke;
  margin: 0;
  padding: 0;
  margin-top: 0.5%;
  margin-bottom: 4%;
}
#s10p4 {
  color: #603813;
  font-weight: 400;
  font-size: 3.5vw;
  margin-top: 4%;
}
#s10p5 {
  color: #603813;
  font-weight: 300;
  font-size: 1vw;
  text-align: center;
  margin-top: 4%;
  line-height: 1.2vw;
}
#s10p5 span {
  font-weight: 400;
}
#s10p6 {
  color: #603813;
  font-size: 0.95vw;
  font-weight: 500;
  margin-top: -0.25%;
}
.s10a {
  color: #603813;
  font-weight: 400;
  font-size: 0.9vw;
  margin-top: 1%;
}
#s10a1 {
  margin-top: -0.5%;
}

.s10RuleB {
  width: 100%;
}
#s10r3 {
  margin-top: -2%;
}

.backToTop {
  width: 6vw;
  cursor: pointer;
  margin-left: 120%;
  margin-top: -5%;
}
.backToTop p {
  text-align: center;
  font-size: 1vw;
  color: whitesmoke;
  font-weight: 400;
  margin-top: 10%;
  margin-left: 1%;
}
#backTo {
  width: 55%;
}
#eleven {
  background-color: #15bfcc;
}
.eleven {
  flex-direction: column;
  text-align: center;
}
.s11p {
  margin: 0;
  padding: 0;
}
#s11p1 {
  color: whitesmoke;
  font-weight: 400;
  font-size: 2.75vw;
  padding-bottom: 2%;
}
#s11p2 {
  color: whitesmoke;
  font-weight: 400;
  font-size: 2vw;
  padding-top: 2%;
}
#s11p2 SPAN {
  font-size: 1.7vw;
}
#s11p3 span {
  font-weight: 400;
}
#s11p3 {
  font-weight: 300;
  font-size: 1.5vw;
  padding-top: 2%;
}
#s11p4 {
  font-weight: 300;
  font-size: 1.5vw;
  padding-top: 2%;
  padding-bottom: 2%;
}
#s11p4 span {
  font-weight: 400;
  color: whitesmoke;
  cursor: pointer;
}
#s11p5 {
  padding-top: 2%;
}
#s11p6 {
  padding-top: 2%;
}
.filler {
  width: 52%;
}
#fText {
  font-size: 3.25vw;
  line-height: 3.5vw;
  font-weight: 600;
  text-align: center;
  color: #3b3b4f;
}

/* Drop Case replacements */

#text2_1 {
  display: none;
}
#text3_3 {
  display: none;
}
#text5_3 {
  display: none;
}
/* Media Queries for Mobile Version */

@media only screen and (min-device-width: 320px) and (max-device-width: 812px) {
  .main {
    flex-direction: column;
  }
  .left {
    width: 100vw;
  }
  .right {
    width: 100vw;
  }
  #line2 {
    display: none;
  }
  #anim1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .animation {
    position: absolute;
    width: 85vw;
  }
  #JHTitle {
    position: absolute;
    font-size: 4vw;
    line-height: 7vw;
    top: -180%;
    left: 70%;
    width: 90vw;
    transform: translate(-50%, -290%);
  }
  #JHTitle span {
    font-weight: 600;
    font-size: 9vw;
    line-height: 9vw;
  }
  #JHTitle2 span {
    font-weight: 600;
    font-size: 9vw;
    line-height: 9vw;
  }
  #JHTitle2 {
    position: absolute;
    top: 270%;
    left: 70%;
    width: 90vw;
    transform: translate(-50%, 105%);
    font-size: 4vw;
    line-height: 7vw;
  }

  /* Section 2 */
  #ani1 {
    position: absolute;
    top: -270%;
    left: 50%;
    transform: translate(-50%, -80%);
  }
  #phoneimg {
    position: absolute;
    width: 60vw;
    top: -100%;
    left: 52%;
    transform: translate(-50%, -85%);
  }
  .textBox {
    position: absolute;
    font-size: 4vw;
    line-height: 4.5vw;
    width: 75%;
    margin-top: 20%;
    left: 50%;
    transform: translate(-50%, 0);
    border-width: 2px;

  }

  .bookDiv {
    width: 30vw;
    height: 20vw;
    margin-top: 50%;
    left: 52%;
    top: 85%;
    transform: translate(-50%, 15%);
    z-index: 999;
  }
  /* Section 3 */

  .textBox4 {
    position: absolute;
    width: 75%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -95%);
  }
  #text4 {
    text-align: center;
    font-size: 6.25vw;
    line-height: 6.5vw;
  }
  #waterfall {
    position: absolute;
    width: 85vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -10%);
  }

  /* Section 4 */
  .BG {
    display: none;
  }
  #four {
    background-color: #3b3b4f;
  }
  #five {
    background-color: #ed1c24;
  }
  #six {
    background-color: #edcd2f;
  }
  #seven {
    background-color: #177acc;
  }
  .cardani {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -115%);
    width: 75vw;
  }
  .cardText {
    width: 75vw;
    height: 42vw;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 52%;
    transform: translate(-50%, 10%);
    box-shadow: 0.3vw 0.3vw 0.8vw 0vw rgba(0, 0, 0, 0.56);
  }
  .cardTitle {
    color: whitesmoke;
    font-size: 5.5vw;
    font-weight: 600;
    padding-top: 2%;
  }
  .cardBody {
    color: whitesmoke;
    font-size: 5vw;
    font-weight: 400;
    padding-top: 0%;
    padding-left: 8%;
    padding-right: 8%;
  }
  #card2ani {
    transform: translate(-50%, 5%);
    width: 79vw;
  }

  #card3ani {
    width: 55vw;
  }
  #card4ani {
    width: 55vw;
  }
  .UpCards {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -115%);
  }
  .downAnis {
    top: 50%;
    left: 52%;
    transform: translate(-50%, 10%);
  }

  /* Secition 5 */

  #boredlady {
    top: 50%;
    left: 52%;
    transform: translate(-50%, -95%);
  }
  #U {
    position: absolute;
    font-size: 8.7vw;
    font-weight: 600;
    margin-top: 10%;
  }
  .t5 {
    width: 75vw;
  }
  #text5 {
    margin-left: 10%;
    font-size: 4vw;
    line-height: 4.5vw;
  }
  .text5_1 {
    margin-left: -3%;
  }

  /* Section 6 */
  .s9Ani {
    top: 50% !important;
    left: 52% !important;
    transform: translate(-50%, -95%) !important;
  }
  #text6 {
    font-size: 6.25vw;
    line-height: 6.5vw;
  }
  #text7 {
    font-size: 6.25vw;
    line-height: 6.5vw;
  }
  #text8 {
    font-size: 6.25vw;
    line-height: 6.5vw;
  }
  .filler{
    width: 75%;
  }
  #fText {
    font-size: 8vw;
    line-height: 10vw;
  }
  /* Credits */

  .ten {
    width: 85%;
  }
  #fancyRule {
    margin-left: 0%;
    width: 100%;
  }
  #s10p1 {
    margin-top: 5%;
    font-size: 6.25vw;
    line-height: 6.55vw;
    margin-bottom: 5%;
  }
  #s10p2 {
    margin-top: 7%;
    margin-bottom: 3%;
    font-size: 7vw;
    line-height: 7.7vw;
  }
  #s10p3 {
    font-size: 3.5vw;
    line-height: 4vw;
    color: #603813;
  }
  #s10p4 {
    margin-top: 5%;
    font-size: 6vw;
    line-height: 6.5vw;
    color: whitesmoke;
  }
  #s10p5 {
    font-size: 3.5vw;
    line-height: 4vw;
    margin-top: 15%;
  }
  #s10p6 {
    font-size: 3.5vw;
    line-height: 2vw;
  }
  .s10a {
    font-size: 3.2vw;
    margin-top: 3%;
  }
  .backToTop {
    display: none;
  }

  /* Dropcase replacements */
  #J {
    display: none;
  }
  #text2 {
    display: none;
  }
  #H {
    display: none;
  }
  #text3 {
    display: none;
  }
  #U {
    display: none;
  }
  #text5 {
    display: none;
  }
  #text2_1 {
    display: flex;
    font-size: 6.25vw;
    line-height: 6.5vw;
    padding-top: 1%;
    padding-bottom: 1%;
  }
  #text3_3 {
    display: flex;
    font-size: 6.25vw;
    line-height: 6.5vw;
    padding-top: 1%;
    padding-bottom: 1%;
  }
  /* #text3_3 span{
    font-weight: 500;
  } */
  #text5_4{
    font-weight: 500 !important;
  }
  #text5_3 {
    display: flex;
    text-align: left;
    font-size: 6.25vw;
    line-height: 6.5vw;
    padding-top: 1%;
    padding-bottom: 1%;
  }
}