body {
  font-family: 'Open Sans', sans-serif;
}

strong {
  font-weight: 700;
}

.header {
  width: 100%;
  height: 40vw;
  text-align: center;
  position: relative;
}

.header-mobile {
  display: none;
}

.header-text {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.9vw;
  width: 100%;
}

.header > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.section-1 {
  width: 100%;
  margin-bottom: 10vw;
}

.section-1-mobile {
  display: none;
}

.section-1-header {
  text-align: center;
  font-size: 1.2vw;
  margin-top: 5vw;
  margin-bottom: 5vw;
}

.section-1-text {
  width: 65%;
  margin-left: 17.5%;
  margin-right: 17.5%;
  font-size: 1.1vw;
}

.section-number {
  font-size: 6vw;
  position: absolute;
  top: 0;
  margin: 0;
  text-shadow: 0px 1px, 1px 0px, 1px 1px;
}

.section-name {
  font-size: 1.6vw;
  padding-top: 4vw;
}

.section-question {
  font-size: 1vw;
}

.line {
  width: 12vw;
  border-top: 1px solid black;
  transform: rotate(110deg);
  position: absolute;
}

.section-2-mobile {
  display: none;
}

.section-2 {
  position: relative;
  width: 100%;
  margin-bottom: 10vw;
}

.section-2-line {
  left: 35%;
  top: 13%;
}

.section-2-number {
  left: 3%;
  color: #F2D1D8;
  z-index: -1
}

.section-2-text {
  width: 38%;
  display: inline-block;
  vertical-align: top;
  margin-left: 5%;
}

.section-2-question {
  margin-top: 8vw;
}

.section-2-image {
  width: 56%;
  display: inline-block;
  margin-top: 7vw;
}

.section-2-image > img {
  width: 100%;
}

.section-2-square {
  width:24vw;
  height: 24vw;
  bottom: 10vw;
  left: 1vw;
  position: absolute;
}

.section-2-quote {
  width: 35%;
  background-color: rgb(252, 236, 239);
  padding: 4vw;
  position: absolute;
  bottom: 8%;
  left: 28%;
  font-style: italic;
  font-size: 1vw;
}

.section-2-pattern {
  width: calc(35% + 8vw);
  position: absolute;
  bottom: 6%;
  left: 26%;
  z-index: -1;
}

.section-2-pattern > img {
  width: 100%;
}

.section-2-dots {
  color: rgba(252, 236, 239, 0.8);
  font-size: 2vw;
  position: absolute;
  top: 53%;
  left: 30%;
}

.section-3-mobile {
  display: none;
}

.section-3 {
  position: relative;
  width: 100%;
  margin-bottom: 25vw;
}

.section-3-line {
  right: 3%;
  top: 13%;
}

.section-3-number {
  left: 59%;
  color: #F2D1D8;
  z-index: -1
}

.section-3-text {
  width: 38%;
  display: inline-block;
  vertical-align: top;
  margin-left: 5%;
}

.section-3-question {
  margin-top: 8vw;
}

.section-3-image {
  width: 56%;
  display: inline-block;
  margin-top: 7vw;
}

.section-3-image > img {
  width: 100%;
}

.section-3-quote {
  width: 35%;
  background-color: rgb(252, 236, 239);
  padding: 3vw 0vw 3vw 6vw;
  position: absolute;
  bottom: 8%;
  left: 22%;
  font-style: italic;
  font-size: 1vw;
}

.section-3-pattern {
  width: calc(35% + 6vw);
  position: absolute;
  bottom: 6%;
  left: 23%;
  z-index: -1;
}

.section-3-pattern > img {
  width: 100%;
}

.section-3-dots {
  color: rgba(252, 236, 239, 0.8);
  font-size: 2vw;
  position: absolute;
  top: 93%;
  left: 80%;
  transform: rotate(90deg);
}

.section-3-square {
  width:26vw;
  height: 22vw;
  bottom: -10vw;
  left: 0;
  position: absolute;
}

.section-4-mobile {
  display: none;
}

.section-4 {
  position: relative;
  width: 100%;
  margin-bottom: 15vw;
}

.section-4-line {
  left: 26%;
  top: 13%;
}

.section-4-number {
  left: 1%;
  color: #F2D1D8;
  z-index: -1
}

.section-4-text {
  width: 40%;
  display: inline-block;
  vertical-align: top;
  margin-left: 3%;
}

.section-4-question {
  margin-top: 8vw;
}

.section-4-image {
  width: 56%;
  display: inline-block;
  margin-top: 7vw;
}

.section-4-image > img {
  width: 100%;
}

.section-4-quote {
  width: 35%;
  background-color: rgb(252, 236, 239);
  padding: 3vw 2vw 3vw 2vw;
  position: absolute;
  bottom: 20%;
  left: 3%;
  font-style: italic;
  font-size: 1vw;
  z-index: 9;
}

.section-4-pattern {
  width: 35%;
  position: absolute;
  bottom: 18%;
  left: 2%;
  z-index: -1;
}

.section-4-pattern > img {
  width: 100%;
}

.section-4-square {
  width:26vw;
  height: 26vw;
  bottom: -5vw;
  left: 35%;
  position: absolute;
}

.section-4-dots {
  color: rgba(252, 236, 239, 0.8);
  font-size: 2vw;
  position: absolute;
  bottom: -10vw;
  left: 10%;
}

.section-5-mobile {
  display: none;
}

.section-5 {
  position: relative;
  width: 100%;
  margin-bottom: 20vw;
}

.section-5-line {
  right: 4%;
  top: 13%;
}

.section-5-number {
  left: 59%;
  color: #F2D1D8;
  z-index: -1
}

.section-5-text {
  width: 38%;
  display: inline-block;
  vertical-align: top;
  margin-left: 5%;
}

.section-5-question {
  margin-top: 8vw;
}

.section-5-image {
  width: 56%;
  display: inline-block;
  margin-top: 7vw;
}

.section-5-image > img {
  width: 100%;
}

.section-5-quote {
  width: 35%;
  background-color: rgb(252, 236, 239);
  padding: 3vw;
  position: absolute;
  bottom: 8%;
  left: 45%;
  font-style: italic;
  font-size: 1vw;
  z-index: 9;
}

.section-5-pattern {
  width: calc(35% + 6vw);
  position: absolute;
  bottom: 6%;
  left: 46%;
  z-index: -1;
}

.section-5-pattern > img {
  width: 100%;
}

.section-5-dots {
  color: rgba(252, 236, 239, 0.8);
  font-size: 2vw;
  position: absolute;
  top: 93%;
  left: 80%;
  transform: rotate(90deg);
}

.section-5-square {
  width:30vw;
  height: 22vw;
  bottom: -11vw;
  left: 10vw;
  position: absolute;
}

.video-container-mobile {
  display: none;
}

.video-container {
  width: 100%;
  position: relative;
  margin-bottom: 10vw;
}

.video-background {
  width: 100%;
}

.video-background >img {
  width: 100%;
}

.yt-video {
  width: 80%;
  height: 45vw;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 1vw 1vw rgba(252, 236, 239, 0.8);
}

.section-6-mobile {
  display: none;
}

.section-6 {
  width: calc(100% - 2vw);
  margin-bottom: 10vw;
  border-right: solid 1vw rgb(252, 236, 239);
  border-left: solid 1vw rgb(252, 236, 239);
  box-sizing: content-box;
}

.section-6-image {
  width: 40vw;
  display: inline-block;
}

.section-6-image > img {
  width: 100%;
  vertical-align: bottom;
  /* border-left: solid 3vw rgb(252, 236, 239); */

}

.section-6-text {
  width: 50%;
  height: 40vw;
  display: inline-block;
  margin-left: 6%;
  vertical-align: top;
  font-size: 1.3vw;
  /* border-right: solid 3vw rgb(252, 236, 239); */
}

.section-6-text > p {
  margin-top: 0;
  margin-bottom: 10vw;
}

.credits-mobile {
  display: none;
}

.credits {
  width: 100%;
  position: relative;
}

.credits-image {
  width: 30vw;
  margin-right: 3vw;
  display: inline-block;
}

.credits-image > img {
  width: 100%;
}

.credits-text {
  vertical-align: top;
  display: inline-block;
  margin-top: 1.5vw;
  font-size: 1.2vw;
}

.credits-text > p {
  margin: 0;
}


/* Mobile */


@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    .header {
      display: none;
    }

    .header-mobile {
      width: 100%;
      height: 40vw;
      text-align: center;
      position: relative;
      display: block;
    }

    .header-text-mobile {
      z-index: 1;
      position: absolute;
      top: 65%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2.7vw;
      width: 100%;
    }

    .header-text-mobile > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
    }

    .section-1 {
      display: none;
    }

    .section-1-mobile {
      display: block;
    }

    .section-1-header-mobile {
      text-align: center;
      font-size: 1.2vw;
      margin-top: 15vw;
      margin-bottom: 5vw;
    }

    .section-1-text-mobile {
      width: 89.9%;
      margin-left: 5%;
      margin-right: 5%;
      font-size: 1.3vw;
    }

    .section-number-mobile {
      font-size: 10vw;
      position: absolute;
      top: 0;
      margin: 0;
    }

    .section-name-mobile {
      font-size: 3vw;
      padding-top: 6vw;
    }

    .section-question-mobile {
      font-size: 1.2vw;
      width: 94.9%;
      margin-left: 2.5%;
      margin-right: 2.5%;
    }

    .line-mobile {
      width: 22vw;
      border-top: 2px solid black;
      transform: rotate(110deg);
      position: absolute;
    }

    .section-2 {
      display: none;
    }

    .section-2-line-mobile {
      top: 7%;
      right: 6%;
    }

    .section-2-mobile {
      position: relative;
      width: 100%;
      margin-bottom: 10vw;
      margin-top: 10vw;
      display: block;
    }

    .section-2-number-mobile {
      left: 6%;
      color: #F2D1D8;
      z-index: -1
    }

    .section-2-text-mobile {
      width: 90%;
      display: inline-block;
      vertical-align: top;
      margin-left: 10%;
    }

    .section-2-question-mobile {
      margin-top: 15vw;
    }

    .section-2-image-mobile {
      width: 100%;
      display: block;
      margin-top: 7vw;
      text-align: right;
      position: relative;
    }

    .section-2-image-mobile > img {
      width: 90%;
    }

    .section-2-square-mobile {
      width:35vw;
      height: 35vw;
      bottom: 33vw;
      left: 0vw;
      position: absolute;
    }

    .section-2-square-mobile > img {
      width: 100%;
    }

    .section-2-quote-mobile {
      width: 75%;
      background-color: rgb(252, 236, 239);
      padding: 6vw;
      position: absolute;
      bottom: -4%;
      left: 3%;
      font-style: italic;
      font-size: 2.1vw;
    }

    .section-2-pattern-mobile {
      width: calc(75% + 12vw);
      position: absolute;
      bottom: -6%;
      left: 1%;
      z-index: -1;
    }

    .section-2-pattern-mobile > img {
      width: 100%;
    }

    .section-3 {
      display: none;
    }

    .section-3-mobile {
      position: relative;
      width: 100%;
      margin-bottom: 10vw;
      margin-top: 10vw;
      display: block;
    }

    .section-3-line-mobile {
      top: 8%;
      right: -2%;
    }

    .section-3-number-mobile {
      left: 26%;
      color: #F2D1D8;
      z-index: -1
    }

    .section-3-text-mobile {
      width: 70%;
      display: inline-block;
      vertical-align: top;
      margin-left: 30%;
    }

    .section-3-question-mobile {
      margin-top: 15vw;
    }

    .section-3-image-mobile {
      width: 100%;
      display: block;
      margin-top: 7vw;
      text-align: left;
      position: relative;
    }

    .section-3-image-mobile > img {
      width: 90%;
    }

    .section-3-square-mobile {
      width:35vw;
      height: 35vw;
      bottom: -10vw;
      left: 0vw;
      position: absolute;
    }

    .section-3-square-mobile > img {
      width: 100%;
    }

    .section-3-quote-mobile {
      width: 75%;
      background-color: rgb(252, 236, 239);
      padding: 6vw 0vw 6vw 12vw;
      position: absolute;
      bottom: 14%;
      right: 2%;
      font-style: italic;
      font-size: 2.3vw;
    }

    .section-3-pattern-mobile {
      width: calc(75% + 12vw);
      position: absolute;
      bottom: 11%;
      right: 0%;
      z-index: -1;
    }

    .section-3-pattern-mobile > img {
      width: 100%;
    }

    .section-4 {
      display: none;
    }

    .section-4-mobile {
      position: relative;
      width: 100%;
      margin-bottom: 10vw;
      margin-top: 10vw;
      display: block;
    }

    .section-4-line-mobile {
      top: 7%;
      right: 10%;
    }

    .section-4-number-mobile {
      left: 6%;
      color: #F2D1D8;
      z-index: -1
    }

    .section-4-text-mobile {
      width: 90%;
      display: inline-block;
      vertical-align: top;
      margin-left: 10%;
    }

    .section-4-question-mobile {
      margin-top: 35vw;
    }

    .section-4-image-mobile {
      width: 100%;
      display: block;
      margin-top: 7vw;
      text-align: right;
      position: relative;
    }

    .section-4-image-mobile > img {
      width: 90%;
    }

    .section-4-square-mobile {
      width:35vw;
      height: 35vw;
      bottom: -22vw;
      right: 2vw;
      position: absolute;
      z-index: 1;
    }

    .section-4-square-mobile > img {
      width: 100%;
    }

    .section-4-quote-mobile {
      width: 75%;
      background-color: rgb(252, 236, 239);
      padding: 6vw;
      position: absolute;
      bottom: 8%;
      left: 3%;
      font-style: italic;
      font-size: 2.3vw;
      z-index: 9;
    }

    .section-4-pattern-mobile {
      width: calc(75% - 12vw);
      position: absolute;
      bottom: 6%;
      left: 1%;
      z-index: -1;
    }

    .section-4-pattern-mobile > img {
      width: 100%;
    }

    .section-5 {
      display: none;
    }

    .section-5-mobile {
      position: relative;
      width: 100%;
      margin-bottom: 10vw;
      margin-top: 10vw;
      display: block;
    }

    .section-5-line-mobile {
      top: 7%;
      right: -3%;
    }

    .section-5-number-mobile {
      left: 20%;
      color: #F2D1D8;
      z-index: -1;
    }

    .section-5-text-mobile {
      width: 70%;
      display: inline-block;
      vertical-align: top;
      margin-left: 25%;
    }

    .section-5-question-mobile {
      margin-top: 25vw;
    }

    .section-5-image-mobile {
      width: 100%;
      display: block;
      margin-top: 7vw;
      text-align: left;
      position: relative;
    }

    .section-5-image-mobile > img {
      width: 90%;
    }

    .section-5-square-mobile {
      width:35vw;
      height: 35vw;
      bottom: -12vw;
      left: 30vw;
      position: absolute;
    }

    .section-5-square-mobile > img {
      width: 100%;
    }

    .section-5-quote-mobile {
      width: 75%;
      background-color: rgb(252, 236, 239);
      padding: 6vw 6vw 6vw 6vw;
      position: absolute;
      bottom: 14%;
      right: 2%;
      font-style: italic;
      font-size: 2.3vw;
      z-index: 9;
    }

    .section-5-pattern-mobile {
      width: calc(75% + 12vw);
      position: absolute;
      bottom: 11%;
      right: 0%;
      z-index: -1;
    }

    .section-5-pattern-mobile > img {
      width: 100%;
    }

    .video-container {
      display: none;
    }

    .video-container-mobile {
      margin-top: 15vw;
      display: block;
      width: 96vw;
      height: 54vw;
    }

    .yt-video-mobile {
      width: 100%;
      height: 100%;
      margin: 0 1.9vw;
    }

    .section-6 {
      display: none;
    }

    .section-6-mobile {
      width: 100%;
      margin-bottom: 10vw;
      display: block;
      margin-top: 15vw;
    }

    .section-6-image-mobile {
      width: 100%;
      display: block;
    }

    .section-6-image-mobile > img {
      width: calc(100% - 5vw);
      vertical-align: bottom;
      border-left: solid 5vw rgb(252, 236, 239);

    }

    .section-6-text-mobile {
      width: 80%;
      vertical-align: top;
      font-size: 1.1vw;
      padding: 0% 5%;
      margin: 15vw calc(5% - 5vw) 5% 5%;
      border-right: solid 5vw rgb(252, 236, 239);
    }

    .section-6-text-mobile > p {
      margin-top: 0;
      margin-bottom: 10vw;
    }

    .credits {
      display: none;
    }

    .credits-mobile {
      width: 100%;
      position: relative;
      margin-bottom: 10vw;
      display: block;
    }

    .credits-image-mobile {
      width: 10vw;
      margin-right: 3vw;
      display: inline-block;
    }

    .credits-image-mobile > img {
      width: 100%;
    }

    .credits-text-mobile {
      vertical-align: top;
      display: inline-block;
      margin-top: 1.5vw;
      font-size: 1.3vw;
      width: 85vw;
    }

    .credits-text-mobile > p {
      margin: 0;
    }

  }