/* --------- */
/* VARIABLES */
/* --------- */
/**** COLOURS ****/
/**** FONTS ****/
@import url("reset.css");
.no-scroll {
  height: 100%;
  margin: 0;
  overflow: hidden; }

/* ------------ */
/* CSS: DEFAULT */
/* ------------ */
/* CSS Reset */
html, body {
  width: 100%;
  height: 100%;
  background-color: white;
  font-family: "omnes-pro", sans-serif;
  font-size: 1.2vw; }
  @media only screen and (max-device-width: 480px) {
    html, body {
      font-size: 3.6vw;
      /* Add 'Momentum' scrolling */
      -webkit-overflow-scrolling: touch; } }

/* Links */
a {
  color: inherit;
  text-decoration: none; }

/* Sections */
section {
  width: 100%;
  position: relative; }

/* -------------------------- */
/* MIXINS & RE-USABLE CLASSES */
/* -------------------------- */
/** INNER **/
/** BOX SHADOW **/
/** NO SELECT **/
/** BORDER BOX **/
/** POSITIONING **/
/** OVERLAY **/
/** TRANSITION **/
/** SCROLLING **/
.stop-scrolling {
  height: 100%;
  overflow: hidden; }

/* ------- */
/* SECTION */
/* ------- */
section {
  width: 100%;
  float: left;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  ms-box-sizing: border-box;
  moz-box-sizing: border-box;
  webkit-box-sizing: border-box;
  /* WRAP */ }
  section:nth-of-type(2n) {
    background-color: #F2F2F2; }
  section .title {
    font-size: 200%;
    font-weight: bolder; }
    @media only screen and (max-device-width: 480px) {
      section .title {
        line-height: 135%; } }
  section h2 {
    font-size: 135%;
    font-weight: 400;
    line-height: 125%;
    margin-top: 3vw;
    opacity: 0.4; }
    @media only screen and (max-device-width: 480px) {
      section h2 {
        margin-top: 7vw; } }
  section #wrap {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    ms-box-sizing: border-box;
    moz-box-sizing: border-box;
    webkit-box-sizing: border-box; }
    @media only screen and (max-device-width: 480px) {
      section #wrap {
        width: 90%; } }
    section #wrap #toLeft {
      width: 50%;
      float: left;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      ms-box-sizing: border-box;
      moz-box-sizing: border-box;
      webkit-box-sizing: border-box; }
      @media only screen and (max-device-width: 480px) {
        section #wrap #toLeft {
          width: 100%; } }
    section #wrap #toRight {
      width: 50%;
      float: right;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      ms-box-sizing: border-box;
      moz-box-sizing: border-box;
      webkit-box-sizing: border-box; }
      @media only screen and (max-device-width: 480px) {
        section #wrap #toRight {
          width: 100%; } }

/* --------------- */
/* INTRO (Section) */
/* --------------- */
#intro {
  background-color: white;
  /* LEFT */
  /* RIGHT */ }
  @media only screen and (max-device-width: 480px) {
    #intro {
      text-align: center; } }
  #intro #toLeft #logo {
    height: 5vw;
    margin-bottom: 3.5vw; }
    @media only screen and (max-device-width: 480px) {
      #intro #toLeft #logo {
        height: 20vw;
        margin-bottom: 6vw;
        margin-top: 10vw; } }
  #intro #toLeft h1 {
    font-size: 260%;
    font-weight: 400;
    line-height: 130%;
    margin-bottom: 3.5vw;
    opacity: 1; }
  #intro #toLeft h2 {
    font-size: 130%;
    line-height: 133%;
    opacity: 0.8; }
    @media only screen and (max-device-width: 480px) {
      #intro #toLeft h2 {
        font-size: 150%;
        margin-bottom: 5vw; } }
  #intro #toLeft img {
    height: 4.20vw;
    cursor: pointer;
    margin-top: 4vw; }
    @media only screen and (max-device-width: 480px) {
      #intro #toLeft img {
        height: 13vw; } }
  #intro #toRight img {
    width: 100%;
    height: 100%;
    float: right; }
    @media only screen and (max-device-width: 480px) {
      #intro #toRight img {
        float: none;
        padding-top: 12vw; } }

/* ---------- */
/* ADVANTAGES */
/* ---------- */
#advantages {
  padding-bottom: 6vw;
  padding-top: 6vw;
  text-align: center;
  /* GRID */ }
  @media only screen and (max-device-width: 480px) {
    #advantages {
      padding-bottom: 12vw;
      padding-top: 12vw; } }
  #advantages #grid {
    width: 100%;
    float: left;
    margin-top: 4vw; }
    @media only screen and (max-device-width: 480px) {
      #advantages #grid {
        margin-top: 12vw; } }
    #advantages #grid > div {
      width: 24%;
      float: left;
      margin-left: 1.333333333%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      ms-box-sizing: border-box;
      moz-box-sizing: border-box;
      webkit-box-sizing: border-box; }
      @media only screen and (max-device-width: 480px) {
        #advantages #grid > div {
          width: 100%;
          margin-left: 0;
          margin-top: 9vw; } }
      #advantages #grid > div:nth-of-type(1) {
        margin-left: 0; }
        @media only screen and (max-device-width: 480px) {
          #advantages #grid > div:nth-of-type(1) {
            margin-top: 0; } }
      #advantages #grid > div .icn {
        color: #7AD4EB;
        font-size: 400%;
        margin-top: 1.5vw; }
        @media only screen and (max-device-width: 480px) {
          #advantages #grid > div .icn {
            font-size: 300%;
            margin-top: 5vw; } }
      #advantages #grid > div h1 {
        font-size: 140%;
        line-height: 125%;
        margin-top: 1.8vw; }
        @media only screen and (max-device-width: 480px) {
          #advantages #grid > div h1 {
            font-size: 200%;
            margin-top: 4vw; } }

/* ------------- */
/* PRODUCT STEPS */
/* ------------- */
#productSteps {
  padding-bottom: 6vw;
  padding-top: 6vw;
  text-align: center;
  /* WRAP */
  /* GRID */ }
  @media only screen and (max-device-width: 480px) {
    #productSteps {
      padding-bottom: 12vw;
      padding-top: 12vw; } }
  #productSteps #wrap {
    width: 80%; }
  #productSteps #grid {
    width: 100%;
    float: left;
    margin-top: 4vw; }
    @media only screen and (max-device-width: 480px) {
      #productSteps #grid {
        margin-top: 12vw; } }
    #productSteps #grid > div {
      width: 32%;
      float: left;
      margin-left: 2%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      ms-box-sizing: border-box;
      moz-box-sizing: border-box;
      webkit-box-sizing: border-box; }
      @media only screen and (max-device-width: 480px) {
        #productSteps #grid > div {
          width: 100%;
          margin-left: 0;
          margin-top: 14vw; } }
      #productSteps #grid > div:nth-of-type(1) {
        margin-left: 0; }
        @media only screen and (max-device-width: 480px) {
          #productSteps #grid > div:nth-of-type(1) {
            margin-top: 0; } }
      #productSteps #grid > div #img {
        width: 100%;
        height: 17vw;
        background-size: cover;
        background-position: center; }
        @media only screen and (max-device-width: 480px) {
          #productSteps #grid > div #img {
            height: 60vw; } }
      #productSteps #grid > div h1 {
        font-size: 140%;
        line-height: 130%;
        margin-top: 2.5vw; }
        @media only screen and (max-device-width: 480px) {
          #productSteps #grid > div h1 {
            font-size: 200%;
            margin-top: 5vw; } }

/* -------- */
/* INCLUDES */
/* -------- */
#includes {
  padding-bottom: 6vw;
  padding-top: 6vw;
  text-align: center;
  /* WRAP */
  /* GRID */ }
  @media only screen and (max-device-width: 480px) {
    #includes {
      padding-bottom: 12vw;
      padding-top: 12vw; } }
  #includes #wrap {
    width: 80%; }
  #includes .grid {
    width: 100%;
    float: left;
    margin-top: 4vw; }
    @media only screen and (min-device-width: 480px) {
      #includes .grid:nth-of-type(2) .inner {
        width: 70%;
        display: inline-block; }
        #includes .grid:nth-of-type(2) .inner .item {
          width: 48%; } }
    @media only screen and (max-device-width: 480px) {
      #includes .grid {
        margin-top: 12vw; } }
    #includes .grid .item {
      width: 32%;
      float: left;
      margin-left: 2%;
      margin-top: 4%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      ms-box-sizing: border-box;
      moz-box-sizing: border-box;
      webkit-box-sizing: border-box; }
      @media only screen and (max-device-width: 480px) {
        #includes .grid .item {
          width: 100%;
          margin-left: 0;
          margin-top: 8vw !important; } }
      #includes .grid .item:nth-of-type(1) {
        margin-left: 0;
        margin-top: 0; }
      #includes .grid .item:nth-of-type(2), #includes .grid .item:nth-of-type(3) {
        margin-top: 0; }
      #includes .grid .item:nth-of-type(4) {
        margin-left: 0; }
      #includes .grid .item #img {
        width: 100%;
        height: 17vw;
        background-image: url("../images/placeholder.jpg");
        background-position: center;
        background-size: cover; }
        @media only screen and (max-device-width: 480px) {
          #includes .grid .item #img {
            height: 60vw; } }
      #includes .grid .item h1 {
        font-size: 140%;
        line-height: 130%;
        margin-top: 2vw; }
        @media only screen and (max-device-width: 480px) {
          #includes .grid .item h1 {
            font-size: 200%;
            margin-top: 5vw; } }
      #includes .grid .item h2 {
        margin-top: 1.5vw; }
        @media only screen and (max-device-width: 480px) {
          #includes .grid .item h2 {
            font-size: 150%;
            margin-top: 4vw; } }

/* ----------------- */
/* REVIEWS (Section) */
/* ----------------- */
#reviews {
  display: none;
  padding-bottom: 6vw;
  padding-top: 6vw;
  text-align: center;
  /* GRID */ }
  @media only screen and (max-device-width: 480px) {
    #reviews {
      padding-bottom: 12vw;
      padding-top: 12vw; } }
  #reviews #grid {
    width: 100%;
    float: left;
    margin-top: 3vw;
    position: relative;
    /* Items */ }
    @media only screen and (max-device-width: 480px) {
      #reviews #grid {
        margin-top: 9vw; } }
    #reviews #grid .review {
      width: 50%;
      padding: 2vw;
      float: left;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      ms-box-sizing: border-box;
      moz-box-sizing: border-box;
      webkit-box-sizing: border-box; }
      @media only screen and (max-device-width: 480px) {
        #reviews #grid .review {
          width: 100%;
          margin-top: 9vw;
          padding: 0; }
          #reviews #grid .review:nth-of-type(1) {
            margin-top: 0; } }
      #reviews #grid .review #pic {
        width: 5.5vw;
        height: 5.5vw;
        border: 0.2vw solid #D97575;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        ms-box-sizing: border-box;
        moz-box-sizing: border-box;
        webkit-box-sizing: border-box; }
        @media only screen and (max-device-width: 480px) {
          #reviews #grid .review #pic {
            width: 22vw;
            height: 22vw;
            border-width: 1vw; } }
      #reviews #grid .review h1 {
        font-size: 150%;
        margin-top: 1.7vw; }
        @media only screen and (max-device-width: 480px) {
          #reviews #grid .review h1 {
            font-size: 180%;
            margin-top: 3vw; } }
      #reviews #grid .review h2 {
        font-size: 120%;
        margin-top: 1.7vw; }
        @media only screen and (max-device-width: 480px) {
          #reviews #grid .review h2 {
            font-size: 150%;
            margin-top: 3vw; } }

/* --------------- */
/* VIDEO (Section) */
/* --------------- */
#video {
  background-color: #7AD4EB;
  display: none;
  padding-bottom: 6vw;
  padding-top: 6vw;
  text-align: center;
  /* YouTube Video */ }
  @media only screen and (max-device-width: 480px) {
    #video {
      padding-bottom: 9vw; } }
  #video iframe {
    width: 100%;
    height: 40vw;
    margin-top: 4vw; }
    @media only screen and (max-device-width: 480px) {
      #video iframe {
        margin-top: 7vw;
        height: 49vw; } }

/* ------------------ */
/* SHOP NOW (Section) */
/* ------------------ */
#shop-now {
  display: none;
  padding-bottom: 7vw;
  padding-top: 6vw;
  /* Products */ }
  @media only screen and (max-device-width: 480px) {
    #shop-now {
      padding-bottom: 10vw;
      padding-top: 9vw; } }
  #shop-now #wrap {
    width: 80%; }
    @media only screen and (max-device-width: 480px) {
      #shop-now #wrap h1 {
        margin-bottom: 3vw; } }
  #shop-now #products {
    width: 100%;
    float: left;
    margin-top: 5vw; }
    #shop-now #products > div {
      width: 33.333333333%;
      float: left; }
      #shop-now #products > div:nth-last-of-type(1) {
        margin-bottom: 0; }
      @media only screen and (max-device-width: 480px) {
        #shop-now #products > div {
          width: 100%;
          margin-bottom: 11vw; } }
      #shop-now #products > div h1 {
        margin-bottom: 5vw; }
      #shop-now #products > div img {
        width: 90%; }
      #shop-now #products > div #buy-btn {
        background-color: #60C8E2;
        color: white;
        display: inline-block;
        font-size: 130%;
        font-weight: 600;
        margin-top: 2.5vw;
        padding: 1.1vw 1.2vw 1.25vw 1.2vw;
        text-transform: capitalize; }
        #shop-now #products > div #buy-btn:hover {
          background-color: #D97575; }
        #shop-now #products > div #buy-btn span {
          font-size: 80%;
          font-weight: 500;
          margin-left: 0.4vw;
          opacity: 0.8; }
        @media only screen and (max-device-width: 480px) {
          #shop-now #products > div #buy-btn {
            font-size: 140%;
            margin-top: 5vw;
            padding: 4vw 4vw 3.45vw 4vw; } }

/* ---------------- */
/* FOOTER (Section) */
/* ---------------- */
#footer {
  padding-bottom: 1.5vw;
  padding-top: 1.5vw;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  ms-box-sizing: border-box;
  moz-box-sizing: border-box;
  webkit-box-sizing: border-box; }
  @media only screen and (max-device-width: 480px) {
    #footer {
      padding-bottom: 4.5vw;
      padding-top: 4.5vw; } }
  #footer #inner {
    width: 100%;
    text-align: center; }
    #footer #inner a {
      font-weight: bolder;
      margin-left: 2vw; }
      @media only screen and (max-device-width: 480px) {
        #footer #inner a {
          margin-left: 3.5vw;
          padding-bottom: 5vw; } }
      #footer #inner a:hover {
        color: #D97575; }
      #footer #inner a:nth-of-type(1) {
        margin-left: 0; }
    #footer #inner a#phone:hover {
      color: inherit; }
    #footer #inner #social {
      margin-top: 1vw; }
      #footer #inner #social a {
        font-size: 120%; }
      @media only screen and (max-device-width: 480px) {
        #footer #inner #social {
          margin-top: 4.5vw; } }

/* --------- */
/* FAQ POPUP */
/* --------- */
#faqOverlay {
  width: 100%;
  height: 100%;
  background-color: rgba(53, 53, 53, 0.8);
  position: fixed !important;
  z-index: 9999; }
  #faqOverlay #wrap {
    width: 50vw;
    height: 80%;
    background-color: white;
    left: 50%;
    position: absolute !important;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-box-shadow: 0px 0px 1vw 0px #333333;
    -moz-box-shadow: 0px 0px 1vw 0px #333333;
    box-shadow: 0px 0px 1vw 0px #333333;
    /* Inner */ }
    @media only screen and (max-device-width: 480px) {
      #faqOverlay #wrap {
        width: 100%;
        height: 100%; } }
    #faqOverlay #wrap #closeBtn {
      background-color: #D97575;
      border: 0.25vw solid white;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      padding: 1.5vw;
      position: fixed;
      right: -1vw;
      top: -1vw; }
      #faqOverlay #wrap #closeBtn:hover {
        background-color: #60C8E2; }
      #faqOverlay #wrap #closeBtn .icn {
        font-size: 140%;
        left: 50%;
        position: absolute !important;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
      @media only screen and (max-device-width: 480px) {
        #faqOverlay #wrap #closeBtn {
          width: 9vw;
          height: 8vw;
          padding: 0;
          right: 1vw;
          top: 1vw; } }
    #faqOverlay #wrap #inner {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      padding: 2vw;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      ms-box-sizing: border-box;
      moz-box-sizing: border-box;
      webkit-box-sizing: border-box; }
      #faqOverlay #wrap #inner h1 {
        font-size: 300%;
        font-weight: bolder;
        margin-bottom: 2vw; }
      #faqOverlay #wrap #inner h2.subcat-title {
        font-size: 180%;
        margin-bottom: 2vw;
        margin-top: 1.5vw;
        opacity: 0.9; }
        #faqOverlay #wrap #inner h2.subcat-title:nth-of-type(1) {
          margin-top: 0; }
      #faqOverlay #wrap #inner #qa {
        border-bottom: 0.1vw solid #F2F2F2;
        margin-bottom: 1vw;
        padding-bottom: 1vw; }
        #faqOverlay #wrap #inner #qa:nth-last-of-type(1) {
          border-bottom: 0;
          margin-bottom: 0; }
        #faqOverlay #wrap #inner #qa h2 {
          font-size: 120%;
          font-weight: 600;
          line-height: 130%;
          margin-bottom: 1.5vw; }
        #faqOverlay #wrap #inner #qa p {
          line-height: 130%; }
        #faqOverlay #wrap #inner #qa ul li {
          list-style-type: circle;
          line-height: 130%;
          margin-left: 1vw; }
          #faqOverlay #wrap #inner #qa ul li .icn {
            font-size: 85%;
            opacity: 0.5;
            padding-left: 0.4vw;
            padding-right: 0.4vw; }
      @media only screen and (max-device-width: 480px) {
        #faqOverlay #wrap #inner {
          padding: 6vw; }
          #faqOverlay #wrap #inner h1 {
            font-size: 400%; }
          #faqOverlay #wrap #inner h2.subcat-title {
            font-size: 230%;
            margin-top: 6vw !important; }
          #faqOverlay #wrap #inner #qa {
            padding-bottom: 4vw;
            padding-top: 4vw; }
            #faqOverlay #wrap #inner #qa h2 {
              font-size: 180%;
              margin-bottom: 4.5vw; }
            #faqOverlay #wrap #inner #qa ul li {
              font-size: 130%;
              margin-left: 11vw; }
              #faqOverlay #wrap #inner #qa ul li .icn {
                font-size: 85%;
                opacity: 0.5;
                padding-left: 0.4vw;
                padding-right: 0.4vw; }
          #faqOverlay #wrap #inner p {
            font-size: 130%; } }