/*=================================================
=            Landing Page Styles Begin            =
=================================================*/

.tmpl_type_page_landing {
  .page-full {
    text-align: left;
  }

  .landing-section {
    padding: 0;
    background-size: cover;
    background-position: center;
  }

  .landing-row {
    width: 100%;

    @media (min-width: 768px) {
      display: flex;
      align-items: center;
    }

    .landing-column {
      flex-basis: 0;
      flex-grow: 1;
      background-size: cover;
      background-position: center;
    }

    .landing-column-content {
      @media (max-width: 768px) {
        padding: 20px !important;
      }

      @media (min-width: 768px) {
        padding: 60px 20px 80px;
      }
    }
  }

  /*----------  Heading Specific  ----------*/

  .int-header {
    .page-title {
      display: block;
      position: relative;
    }

    .title-crumbs {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgb(from var(--primary-color) r g b / 0.8);
    }

    .title-image {
      width: 100%;
      height: 55vw;
    }
  }

  /*----------  Section Contain  ----------*/
  .landing-contain {
    .landing-row {
      padding: 0;
    }
  }

  /*----------  Landing Anchor Links Styling  ----------*/

  .landing-anchor-links {
    list-style-type: none;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    li {
      position: relative;
      width: auto;

      &:last-of-type {
        a {
          &::after {
            display: none;
          }
        }
      }

      &.remove-sep {
        a {
          &::after {
            display: none;
          }
        }
      }

      a {
        display: inline-block;
        width: 100%;
        position: relative;
        text-decoration: none;
        padding: 4px 20px;
        color: var(--light-color);

        &::after {
          content: '';
          height: 14px;
          border-right: 1px solid;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        &:hover {
          background: rgb(from var(--light-color) r g b / 0.04);
          color: var(--light-color);
        }
      }
    }
  }

  /*----------  Landing Unordered List Styles  ----------*/

  ul {
    &.dark-list {
      margin: 1em 30px;
      list-style: none;

      li {
        position: relative;
        padding-left: 20px;

        &::before {
          content: '';
          background: var(--dark-color);
          font-weight: var(--fw-bold);
          position: absolute;
          left: 0;
          top: 0.75em;
          width: 8px;
          height: 8px;
          border-radius: 50%;
        }
      }
    }

    &.light-list {
      margin: 1em 30px;
      list-style: none;

      li {
        position: relative;
        padding-left: 20px;

        &::before {
          content: '';
          background: var(--light-color);
          font-weight: var(--fw-bold);
          position: absolute;
          left: 0;
          top: 0.75em;
          width: 8px;
          height: 8px;
          border-radius: 50%;
        }
      }
    }

    &.list-margin-bottom {
      li {
        margin-bottom: 1em;
      }
    }
  }

  /*========================================================
  =            Specific Landing Section Classes            =
  ========================================================*/

  /*----------  Padding Styles  ----------*/

  .pt-10 { padding-top: 10px; }
  .pt-20 { padding-top: 20px; }
  .pt-30 { padding-top: 30px; }
  .pt-40 { padding-top: 40px; }
  .pt-50 { padding-top: 50px; }
  .pt-60 { padding-top: 60px; }
  .pt-70 { padding-top: 70px; }
  .pt-80 { padding-top: 80px; }
  .pt-90 { padding-top: 90px; }
  .pt-100 { padding-top: 100px; }

  .pb-0 { padding-bottom: 0px; }
  .pb-10 { padding-bottom: 10px; }
  .pb-20 { padding-bottom: 20px; }
  .pb-30 { padding-bottom: 30px; }
  .pb-40 { padding-bottom: 40px; }
  .pb-50 { padding-bottom: 50px; }
  .pb-60 { padding-bottom: 60px; }
  .pb-70 { padding-bottom: 70px; }
  .pb-80 { padding-bottom: 80px; }
  .pb-90 { padding-bottom: 90px; }
  .pb-100 { padding-bottom: 100px; }

  /*----------  Split Width with alternating rows  ----------*/
  .landing-split {
    .landing-row {
      align-items: stretch;
      display: flex;
      flex-direction: column-reverse;

      @media (min-width: 768px) {
        flex-direction: row;
      }

      &:nth-of-type(even) {
        @media (min-width: 768px) {
          flex-direction: row-reverse;
        }
      }

      .landing-column {
        @media (max-width: 768px) {
          min-height: 50vw;
          flex: auto;
        }

        @media (min-width: 768px) {
          min-height: 30vw;
        }

        &.height-auto {
          min-height: auto;
        }
      }
    }

    &.split-reverse {
      .landing-row {
        &:nth-of-type(even) {
          @media (min-width: 768px) {
            flex-direction: row;
          }
        }

        &:nth-of-type(odd) {
          @media (min-width: 768px) {
            flex-direction: row-reverse;
          }
        }
      }
    }
  }

  /*----------  Split Width Alternating rows CONTAINED  ----------*/

  .landing-split-contain {
    .landing-row {
      display: flex;
      align-items: stretch;
      flex-direction: column-reverse;

      @media (min-width: 768px) {
        flex-direction: row;
      }

      &:nth-of-type(even) {
        @media (min-width: 768px) {
          flex-direction: row-reverse;
        }

        .landing-column {
          @media (min-width: 1060px) {
            padding-left: 0;
            padding-right: calc(50% - 615px);
            text-align: right;
          }

          &:nth-of-type(even) {
            @media (min-width: 1060px) {
              padding-left: calc(50% - 615px);
              padding-right: 0;
              text-align: left;
            }
          }
        }
      }

      .landing-column {
        @media (max-width: 768px) {
          min-height: 50vw;
          flex: auto;
        }

        @media (min-width: 1060px) {
          padding-left: calc(50% - 615px);
        }

        &:nth-of-type(even) {
          @media (min-width: 1060px) {
            padding-left: 0;
            padding-right: calc(50% - 615px);
            text-align: right;
          }
        }

        .landing-column-content {
          @media (min-width: 1060px) {
            text-align: left;
            display: inline-block;
          }
        }
      }
    }
  }

  /*----------  Center the Text  ----------*/

  .landing-center {
    text-align: center;
  }

  .landing-top {
    .landing-row {
      align-items: flex-start;
    }
  }

  /*----------  Border  ----------*/
  .landing-border {
    &.landing-column {
      padding: 20px;
    }

    .landing-column-content {
      border: 1px solid;
    }
  }

  /*----------  Specific Widths and padding  ----------*/

  .landing-column {
    &.landing-10 { flex-basis: 10%; }
    &.landing-20 { flex-basis: 20%; }
    &.landing-30 { flex-basis: 30%; }
    &.landing-40 { flex-basis: 40%; }
    &.landing-50 { flex-basis: 50%; }
    &.landing-60 { flex-basis: 60%; }
    &.landing-70 { flex-basis: 70%; }
    &.landing-80 { flex-basis: 80%; }
    &.landing-90 { flex-basis: 90%; }

    &.pr-10 { padding-right: 10%; }
    &.pr-20 { padding-right: 20%; }
    &.pr-30 { padding-right: 30%; }
    &.pr-40 { padding-right: 40%; }
    &.pr-50 { padding-right: 50%; }
    &.pr-60 { padding-right: 60%; }
    &.pr-70 { padding-right: 70%; }
    &.pr-80 { padding-right: 80%; }
    &.pr-90 { padding-right: 90%; }
  }
}

/*=============================================
=            Site Specific Classes            =
=============================================*/

.tmpl_type_page_landing {
  .landing-title {
    text-align: center;
    width: 100%;

    @media (min-width: 1060px) {
      margin-top: 100px;
    }

    * {
      color: var(--light-color);
    }

    h1 {
      margin-bottom: 0;

      @media (min-width: 1060px) {
        font-size: 57px;
      }
    }
  }

  .landing-text-light {
    color: #fff;

    h1,
    h2,
    h3,
    h4 {
      color: var(--light-color);
    }

    a {
      color: var(--light-color);
      text-decoration: underline;

      &.button {
        text-decoration: none;
        border-color: var(--light-color);
      }
    }
  }

  .flex-align-top {
    .landing-row {
      align-items: flex-start;
    }
  }

  .padding-bottom-0 {
    .landing-column-content {
      padding-bottom: 0;
    }
  }

  .padding-top-bottom-0 {
    .landing-column-content {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  ol {
    counter-reset: item;
    margin: 1em 40px;

    > li {
      display: block;
      margin-left: 0;

      &::before {
        content: counter(item) ". ";
        counter-increment: item;
        color: var(--secondary-alt);
      }
    }
  }
}

.short-p {
  p {
    @media (min-width: 768px) {
      max-width: 60%;
      margin: 1em auto;
    }
  }
}

.bg-left {
  background-position: left center !important;
}

.bg-mobile-none {
  @media (max-width: 768px) {
    background-image: none !important;
  }
}

.tmpl_type_page_landing .home-bnas {
  background: none;
}

.landing-stars {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;

  i {
    font-size: 23px;
    color: var(--primary-color);
    margin: 2px;
  }
}

.landing-testimonial {
  font-size: 19px;
  line-height: 1.8em;
  font-family: var(--highlight-font);
  font-style: italic;
  padding-bottom: 2em;

  @media (min-width: 768px) {
    font-size: 25px;
  }
}

.landing-author {
  font-size: 21px;
  line-height: 1em;
  font-weight: var(--fw-light);
  text-align: center;

  i {
    font-size: 30px;
    margin-bottom: 20px;
  }
}

.dr-quote {
  blockquote {
    line-height: 1.8em;
  }

  footer {
    font-size: 21px;
    line-height: 1em;
    font-weight: var(--fw-light);
    display: flex;
    align-items: center;
    font-family: var(--primary-font);

    img {
      margin: 0 20px 0 0;
    }
  }
}

.landing-icon {
  margin-bottom: 1em;

  .warranty-icons & {
    height: 75px;
    display: flex;
    align-items: center;

    img {
      max-width: 100%;
      height: auto;
    }
  }
}

.heading-top-0 {
  h2,
  h3,
  h4 {
    margin-top: 0;
  }
}

.areola-img {
  @media (min-width: 768px) {
    padding-top: 140px;
  }

  @media (min-width: 1060px) {
    padding-top: 190px;
  }
}

/*----------  Anchor Links styling  ----------*/

.mele-anchors {
  .landing-column-content {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}
/*===============================================
=            Landing Page Styles End            =
===============================================*/