:root {
  --Josefin: "Josefin Sans", sans-serif;
  --beige: #f3ede4;
  --copyDarkPurple: #333333;
  --blue: #177acc;
  --yellow: #e6ac23;
}
body {
  background-color: var(--beige);
  font-family: var(--Josefin);
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow-x: hidden;
}
body p {
  font-family: var(--Josefin);
}

/* Global Classes */
.sections {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.ourMission {
  background-image: url(/res/about/aboutBG.svg);
  background-size: 50%;
  background-position-x: right;
  background-repeat: no-repeat;
}

.copyCenter {
  width: 40vw;
}

.omCopy p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 2.25vw;
  line-height: 2.5vw;
  font-weight: 500;
  width: 46vw;
  text-align: center;
}

#p1p2 {
  font-size: 1.7vw;
  line-height: 2vw;
  font-weight: 300;
  width: 38vw;
}
#p1p2 span {
  font-weight: 400;
}
#p1p3 {
  width: 38vw;
  font-size: 1.7vw;
  line-height: 2vw;
  color: var(--blue);
}

/* Services Adendum */

.services {
  background-color: var(--blue);
}
.servCont {
  margin-left: 21vw;
  margin-right: 21vw;
  margin-top: 5%;
}
#servP1 {
  font-size: 2.5vw;
  font-weight: 400;
  color: var(--beige);
  text-align: center;
}
#servAnim {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 31.3vw;
}
#servAnim2 {
  position: absolute;
  top: 50.55%;
  left: 49.95%;
  transform: translate(-50%, -50%);
  width: 31.3vw;
}

.servLP {
  width: 17.5vw;
  margin-top: 7%;
}
#servLP1 {
  font-size: 1.25vw;
  color: var(--beige);
  font-weight: 400;
}
.servLP ul {
  margin-left: -10%;
  list-style: none;
}
.servLP ul li::before {
  content: "\2022";
  color: #a0b543;
  font-size: 1.25vw;
  font-weight: bold;
  display: inline-block;
  width: 0.75em;
  margin-left: -0.7em;
  margin-top: 1.5%;
}

.servLP li {
  font-size: 1vw;
  font-weight: 300;
  list-style: none;
  color: var(--beige);
}

.servRP {
  position: absolute;
  width: 17.5vw;
  margin-top: -18.55%;
  margin-left: 46.5%;
}
.servRP p {
  font-size: 1.25vw;
  color: var(--beige);
  font-weight: 400;
}
.servRP li {
  font-size: 1vw;
  font-weight: 300;
  list-style: none;
  color: var(--beige);
}
.servRP ul {
  margin-left: -10%;
  list-style: none;
}

#servRL1 li::before {
  content: "\2022";
  color: #e6ac23;
  font-size: 1.25vw;
  font-weight: bold;
  display: inline-block;
  width: 0.75em;
  margin-left: -0.7em;
  margin-top: 1.5%;
}

#servRP2 {
  margin-top: 9.5%;
  width: 20vw;
}
#servRL2 li::before {
  content: "\2022";
  color: #15bfcc;
  font-size: 1.25vw;
  font-weight: bold;
  display: inline-block;
  width: 0.75em;
  margin-left: -0.7em;
  margin-top: 1.5%;
}

/* What we do */
.wwdCopy {
  position: absolute;
  width: 45vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.aboutHex {
  position: absolute;
  width: 8.63vw;
}
#aboutHex1 {
  margin-left: 28.52vw;
  margin-top: 5.75%;
}
#aboutHex2 {
  margin-left: 45.58vw;
  margin-top: 9.4%;
}
#aboutHex3 {
  margin-left: 58.96vw;
  margin-top: 4.5%;
}
#aboutHex4 {
  margin-left: 28.52vw;
  margin-top: 35%;
}
#aboutHex5 {
  margin-left: 41.27vw;
  margin-top: 40%;
}
#aboutHex6 {
  margin-left: 58.96vw;
  margin-top: 35%;
}

.wwd1 p {
  font-size: 1.25vw;
  line-height: 1.4vw;
  font-weight: 300;
  text-align: center;
  color: var(--copyDarkPurple);
  margin: 0% 0% 2% 0%;
}
#p2p1 {
  font-size: 2.5vw;
  font-weight: 600;
}
#p2p2 {
  margin-top: 5%;
  font-weight: 400;
}

/* WWD2 */
.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%;
}
.wwd2s1 {
  height: 100vh;
  width: 25%;
  float: left;
  background-image: url(/res/about/veggies.svg);
  background-size: 40%;
  background-position-x: left;
  background-position-y: bottom;
  background-repeat: no-repeat;
}

.wwd2s3 {
  width: 25%;
  float: left;
  background-color: #a30514;
}
.wwd2s4 {
  width: 25%;
  float: left;
  background-color: #27558a;
}
.wwd2s5 {
  width: 25%;
  float: left;
  background-color: #e6ac23;
}

.wwd2Sections {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
}
.left {
  width: 50%;
  order: 1;
}
.right {
  order: 2;
  width: 50%;
}
.wwd2Hex {
  width: 26vw;
  position: relative;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
}
.wwd2Copy {
  width: 60%;
  position: relative;
  top: 46%;
  left: 40%;
  transform: translate(-50%, -50%);
  text-align: left;
}
.wwd2H {
  font-size: 1.75vw;
  font-weight: 400;
  color: var(--beige);
}
.wwd2P {
  font-size: 1.7vw;
  line-height: 2vw;
  font-weight: 300;
  color: var(--beige);
}
.wwd2P span {
  font-weight: 600;
}
#wwd2C1 {
  position: relative;
  top: 52.7%;
  left: 40%;
  transform: translate(-50%, -50%);
}

#wwd2C2 {
  position: relative;
  top: 44.5%;
  left: 40%;
  transform: translate(-50%, -50%);
}

#wwd2C3 {
  position: relative;
  top: 44.5%;
  left: 40%;
  transform: translate(-50%, -50%);
}
#p3Last {
  color: var(--copyDarkPurple);
}

#wwd2C3 ul li {
  font-size: 1.5vw;
  line-height: 2vw;
  color: var(--copyDarkPurple);
  font-weight: 300;
  margin-left: -3%;
}
.p3C {
  font-size: 1.75vw;
  line-height: 2vw;
  font-weight: 300;
}

.p3Copy {
  position: relative;
  width: 40vw;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.p3Copy p {
  color: var(--copyDarkPurple);
  position: absolute;
  text-align: center;
  width: 40vw;
  font-size: 1.75vw;
  line-height: 2vw;
  font-weight: 300;
}

#p3p1 {
  font-weight: 400;
}
#p3p3 u {
  font-weight: 400;
}

/* Who we are */

#p4Title {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 50vw;
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: 3vw;
  font-weight: 600;
  color: var(--copyDarkPurple);
}
.wwaP1 p {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 2.5vw;
  font-weight: 600;
  color: var(--copyDarkPurple);
  opacity: 1;
  margin: 0;
  padding: 0;
}
#p4p5 {
  top: 24%;
  width: 40vw;
}

.wwaP2 p {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1.7vw;
  line-height: 2vw;
  font-weight: 300;
  color: var(--copyDarkPurple);
  margin: 0%;
  padding: 0%;
  opacity: 1;
  width: 39vw;
}
#p4p9 {
  width: 40vw;
}

.wwaGraphics {
  margin-top: 3%;
  margin-left: 22%;
}
.wwaHex {
  opacity: 1;
  position: absolute;
  top: 55%;
  width: 14.2vw;
  margin: 0;
  padding: 0;
  z-index: 98;
}
#wwaHex2 {
  margin-left: 10.6vw;
  margin-top: 6vw;
}
#wwaHex3 {
  margin-left: 21.2vw;
}
#wwaHex4 {
  margin-left: 31.8vw;
  margin-top: 6vw;
}
#wwaHex5 {
  margin-left: 42.4vw;
}
.wwaJsons {
  z-index: 97;
}
#anim2 {
  margin-left: 10.6vw;
  margin-top: 6vw;
}
#anim3 {
  margin-left: 21.2vw;
}
#anim4 {
  margin-left: 31.8vw;
  margin-top: 6vw;
}
#anim5 {
  margin-left: 42.4vw;
}

#wwaRule {
  width: 58vw;
  margin-left: 21%;
  margin-top: 22%;
  opacity: 0;
}

/* Last Page */

#p5p1 {
  text-align: center;
  color: var(--copyDarkPurple);
  font-size: 2.5vw;
  font-weight: 600;
  margin-top: 13%;
}

#p5p3 {
  font-size: 1.25vw;
  text-align: center;
  font-weight: 400;
  color: var(--copyDarkPurple);
  margin-top: 4%;
}

#pa {
  text-align: center;
  margin: 0;
  padding: 0;
  margin-top: 2%;
}
#pa a {
  color: var(--copyDarkPurple);
  font-size: 1.25vw;
  font-weight: 400;
  color: var(--blue);
  margin: 0;
  padding: 0;
}

.buttons {
  margin-left: 30%;
  width: 40vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.endButtons {
  border: none;
  font-family: var(--Josefin);
  font-weight: 300;
  padding: 0;
  margin: 0;
  padding: 1vw 2.5vw 0.8vw 2.5vw;
  border-radius: 10px;
  font-size: 1.75vw;
}
#scheButt {
  background-color: var(--blue);
  color: var(--beige);
}
#contactButton {
  background-color: #15bfcc;
  color: var(--beige);
}

.endRule {
  width: 58vw;
  margin-left: 21%;
  margin-top: 4%;
}
#endRule2 {
  margin-top: 2%;
}

.fStories {
  width: 58vw;
  margin-left: 21%;
  display: flex;
  justify-content: space-between;
}
.fHex {
  width: 14.2vw;
}

/* Media Queries */

/* For laptop/desktops with resolution less than 1200px */
@media only screen and (min-height: 800px) and (max-height: 1080px) {
  #aboutHex1 {
    margin-top: 4.75%;
  }
  #aboutHex2 {
    margin-top: 9%;
  }
  #aboutHex3 {
    margin-top: 3.5%;
  }
  #aboutHex4 {
    margin-top: 34%;
  }
  #aboutHex5 {
    margin-top: 39%;
  }
  #aboutHex6 {
    margin-top: 34%;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 812px) {
  .ourMission {
    background-image: url(/res/about/aboutBG2.svg);
    background-size: 63%;
    background-position-x: right;
    background-position-y: bottom;
    background-repeat: no-repeat;
  }

  .omCopy p {
    top: 20%;
    width: 75vw;
    font-size: 6vw;
    line-height: 6.35vw;
    font-weight: 400 !important;
  }
  #p1p2 {
    font-size: 5.5vw;
    line-height: 5.75vw;
    width: 80vw;
    top: 23%;
  }
  #p1p2_2 {
    color: var(--yellow) !important;
  }
  #p1p3 {
    font-size: 6vw;
    line-height: 6.35vw;
    width: 80vw;
  }
  .wwdCopy {
    position: absolute;
    width: 75vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(243, 237, 228, 0.7);
  }

  .wwd1 p {
    font-size: 6vw;
    line-height: 6.25vw;
  }
  #p2p1 {
    font-size: 6.25vw;
    line-height: 6.5vw;
  }
  .aboutHex {
    width: 15vw;
  }
  #aboutHex1 {
    margin-left: 15.52vw;
    margin-top: 10.75%;
  }
  #aboutHex2 {
    margin-left: 45.58vw;
    margin-top: 10%;
  }
  #aboutHex3 {
    margin-left: 72vw;
    margin-top: 15.75%;
  }
  #aboutHex4 {
    margin-left: 15.52vw;
    margin-top: 140%;
  }
  #aboutHex5 {
    margin-left: 45.58vw;
    margin-top: 165%;
  }
  #aboutHex6 {
    margin-left: 72vw;
    margin-top: 140%;
  }
  .p3Copy {
    top: 35%;
    width: 75vw;
  }
  .p3Copy p {
    width: 100%;
    font-size: 6.25vw;
    line-height: 6.5vw;
  }

  .wwd2Sections {
    flex-direction: column;
  }
  .left {
    width: 100%;
    height: 50%;
  }
  .right {
    width: 100%;
    height: 50%;
  }
  .wwd2Hex {
    width: 60vw;
    left: 50%;
    top: 70%;
  }
  .wwd2Copy {
    left: 50%;
    top: 35%;
    width: 75vw;
  }
  .wwd2H {
    font-size: 4.25vw;
    color: var(--beige);
  }
  .wwd2P {
    font-size: 6.35vw;
    line-height: 6.5vw;
    color: var(--beige);
    text-align: center;
  }
  #wwd2C1{
    left: 50% !important;
  }
  #wwd2C2{
    left: 50% !important;
  }
  #wwd2C3{
    left: 50% !important;
  }

  .p3C {
    font-size: 6vw;
    line-height: 6.3vw;
  }

  .wwd2s1 {
    background-size: 80%;
  }
  .wwd2s2Copy {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .wwaP1 {
    width: 75vw;
    position: relative;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    margin-bottom: 0%;
  }
  .wwaP1 p {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6.5vw;
    line-height: 6.75vw;
  }
  #p4p1 {
    opacity: 1;
  }
  #p4p2 {
    margin-top: 0;
  }
  #p4p3 {
    margin-top: 0;
  }
  #p4p4 {
    margin-top: 0;
  }
  #p4p5 {
    width: 75vw;
    margin-top: 0;
  }
  .wwaP2 {
    width: 75vw;
    position: relative;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0;
    margin-right: 0;
  }
  .wwaP2 p {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5.75vw;
    line-height: 6vw;
  }
  #p4p6 {
    opacity: 1;
  }
  #p4p7 {
    margin-top: 0;
  }
  #p4p8 {
    margin-top: 0;
  }
  #p4p9 {
    width: 75vw;
    margin-top: 0;
  }
  #p4p10 {
    width: 75vw;

    margin-top: 13%;
  }
  #p4Title {
    top: 15%;
    width: 75vw;
    font-size: 6vw;
  }
  .wwaHex {
    position: absolute;
    opacity: 1;
    width: 25vw;
    margin: 0;
    padding: 0;
    z-index: 98;
  }
  .wwaGraphics {
    margin-left: 12.5%;
  }
  #wwaHex1 {
    margin-top: -35%;
  }
  #wwaHex2 {
    margin-left: 25vw;
    margin-top: -35%;
  }
  #wwaHex3 {
    margin-top: -35%;
    margin-left: 50vw;
  }
  #wwaHex4 {
    margin-left: 12.5vw;
    margin-top: -56%;
  }
  #wwaHex5 {
    margin-left: 37.5vw;
    margin-top: -56%;
  }
  .wwaJsons {
    z-index: 97;
  }
  #anim1 {
    margin-top: -35%;
  }
  #anim2 {
    margin-left: 25vw;
    margin-top: -35%;
  }
  #anim3 {
    margin-top: -35%;
    margin-left: 50vw;
  }
  #anim4 {
    margin-left: 12.5vw;
    margin-top: -56%;
  }
  #anim5 {
    margin-left: 37.5vw;
    margin-top: -56%;
  }
  #p5p3 {
    font-size: 5vw;
  }
  .fStories {
    width: 75vw;
    margin-left: 9.5%;
  }
  .fHex {
    width: 27vw;
  }
  #arrow {
    width: 3vw;
    margin-top: 5%;
  }
  #lsp3p3 {
    font-size: 2.25vw;
  }
}