section:nth-of-type(1) {
  background-color: #008746;
}

section:nth-of-type(1) .mainContent {
  background-image: url("../images/products-procombo-keyvisual.jpg");
  background-repeat: no-repeat;
  background-position: calc(100% + 20px) -165px;
}

section:nth-of-type(2) .mainContent {
  background-image: url("../images/products-collanol-keyvisual.jpg");
}

section:nth-of-type(3) {
  background-color: #3e4545;
}

section:nth-of-type(3) .mainContent {
  background-image: url("../images/products-menfloden-keyvisual.jpg");
  background-repeat: no-repeat;
  background-position: calc(100% + 10px) -95px;
}

section:nth-of-type(4) {
  background-color: #827b30;
}

section:nth-of-type(4) .mainContent {
  background-image: url("../images/products-tibanol-keyvisual.jpg");
  background-repeat: no-repeat;
  background-position: calc(100% + 10px) -95px;
}

section:nth-of-type(8) {
  background-color: #ff6633;
}

section:nth-of-type(8) .mainContent {
  background-image: url("../images/products-livevitamins-keyvisual.jpg");
  background-repeat: no-repeat;
  background-position: calc(92% + 20px) -79px;
  max-width: 1000px;
}

section:nth-of-type(5) {
  background-color: #153c75;
}

section:nth-of-type(5) .mainContent {
  max-width: 1000px;
  background-image: url("../images/products-magcombo-keyvisual.jpg");
  background-repeat: no-repeat;
  background-position: calc(92% + 20px) -79px;
}

section:nth-of-type(7) {
  margin-top: 0;
  background-color: #7e003b;
}

section:nth-of-type(7) .mainContent {
  background-image: url("../images/products-hepatofilin-keyvisual.jpg");
  background-repeat: no-repeat;
  background-position: calc(92% + 20px) -79px;
  max-width: 1000px;
}

section:nth-of-type(6) {
  background-color: #330099;
}

section:nth-of-type(6) .mainContent {
  background-image: url("../images/products-zeaforce-keyvisual.jpg");
  background-repeat: no-repeat;
  background-position: calc(92% + 20px) -79px;
  max-width: 1000px;
}

section:nth-of-type(6) {
  margin-top: 0;
}

/* section:nth-of-type(9) {
  background-color: #00664f;
}

section:nth-of-type(9) .mainContent {
  background-image: url("../images/products-line-keyvisual.jpg");
  background-repeat: no-repeat;
  background-position: calc(92% + 20px) -79px;
} */

section:nth-of-type(3) .logos {
  margin-top: 20px;
}

section:nth-of-type(5) .logos, 
section:nth-of-type(8) .logos {
  margin-left: 50px;
}

section:nth-of-type(7) img {
  width: auto;
  margin: 0 0 80px;
}

section:nth-of-type(9) {
  margin-top: 80px;
}

section:nth-of-type(9) p {
  text-align: center;
}

section:nth-of-type(9) img {
  width: 80px;
  margin: 40px 0 80px;
}

section:nth-of-type(9) .amazon {
  margin: 0 8px -12px;
}






/*
---------------------------------
          MEDIA QUERIES
---------------------------------
*/

@media screen and (max-width: 1200px) {
  section:nth-of-type(1) .whiteBG,
  section:nth-of-type(2) .whiteBG, 
  section:nth-of-type(3) .whiteBG, 
  section:nth-of-type(4) .whiteBG {
    margin-top: -55px;
  }
  section:nth-of-type(8) .whiteBG {
    margin-top: -71px;
  }
  section:nth-of-type(5) .whiteBG {
    margin-top: -72px;
  }
  section:nth-of-type(7) .whiteBG {
    margin-top: -72px;
  }
  section:nth-of-type(6) .whiteBG {
    margin-top: -71px;
  }
  section:nth-of-type(9) .whiteBG {
    margin-top: -71px;
  }

  section:nth-of-type(1) .mainContent,
  section:nth-of-type(2) .mainContent,
  section:nth-of-type(3) .mainContent,
  section:nth-of-type(4) .mainContent,
  section:nth-of-type(8) .mainContent,
  section:nth-of-type(5) .mainContent,
  section:nth-of-type(7) .mainContent,
  section:nth-of-type(6) .mainContent {
    height: auto;
    background-position: center bottom;
  }
  section:nth-of-type(8) .mainContent {
    background-image: url("../images/products-livevitamins-keyvisual-mob.jpg");
  }
  section:nth-of-type(5) .mainContent {
    background-image: url("../images/products-magcombo-keyvisual-mob.jpg");
  }
  section:nth-of-type(7) .mainContent {
    background-image: url("../images/products-hepatofilin-keyvisual-mob.jpg");
  }
  section:nth-of-type(6) .mainContent {
    background-image: url("../images/products-zeaforce-keyvisual-mob.jpg");
  }

  section:nth-of-type(1) .textContent {
    padding-bottom: 380px;
  }
  section:nth-of-type(2) .textContent {
    padding-bottom: 320px;
  }
  section:nth-of-type(3) .textContent {
    padding-bottom: 380px;
  }
  section:nth-of-type(4) .textContent {
    padding-bottom: 350px;
  }
  section:nth-of-type(8) .textContent {
    padding-bottom: 340px;
  }
  section:nth-of-type(5) .textContent {
    padding-bottom: 340px;
  }
  section:nth-of-type(7) .textContent {
    padding-bottom: 340px;
  }
  section:nth-of-type(6) .textContent {
    padding-bottom: 340px;
  }
  section:nth-of-type(9) .textContent {
    padding-bottom: 310px;
  }

  section:nth-of-type(3) .more,
  section:nth-of-type(4) .more {
    margin: 0 auto 45px;
  }
  section:nth-of-type(5) .more,
  section:nth-of-type(8) .more,
  section:nth-of-type(7) .more,
  section:nth-of-type(6) .more {
    margin: 0 auto 60px;
  }

  .textContent br {
    display: none;
  }

  section:nth-of-type(4) .textContent br {
    display: block;
  }
}

@media screen and (max-width: 550px) {
  section:nth-of-type(1) .mainContent,
  section:nth-of-type(2) .mainContent,
  section:nth-of-type(3) .mainContent,
  section:nth-of-type(4) .mainContent {
    background-size: 110%;
  }
  section:nth-of-type(5) .mainContent {
    background-size: 100%;
  }
  section:nth-of-type(1) .textContent {
    padding-bottom: 69vw;
  }
  section:nth-of-type(2) .textContent {
    padding-bottom: 58vw;
  }
  section:nth-of-type(3) .textContent {
    padding-bottom: 73vw;
  }
  section:nth-of-type(4) .textContent {
    padding-bottom: 62vw;
  }
  section:nth-of-type(8) .textContent {
    padding-bottom: 68vw;
  }
  section:nth-of-type(5) .textContent {
    padding-bottom: 64vw;
  }
  section:nth-of-type(7) .textContent {
    padding-bottom: 50vw;
  }
  section:nth-of-type(6) .textContent {
    padding-bottom: 61vw;
  }
  section:nth-of-type(9) .textContent {
    padding-bottom: 56vw;
  }
}

@media screen and (max-width: 500px) {
  h3 {
    font-size: 1.55rem;
    line-height: 1.8rem;
  }
}

@media screen and (max-width: 450px) {
  section:nth-of-type(3) .textContent {
    padding-bottom: 68vw;
  }
}

@media screen and (max-width: 400px) {
  h3 {
    font-size: 1.1rem;
    line-height: 1.3rem;
  }
  section:nth-of-type(3) .more {
    margin: 0 auto 35px;
  }
}