body {
  background-color: #fff;
}

.uppercase {
  text-transform: uppercase;
}

.text-balance {
  text-wrap: balance;
}

.text-14 {
  font-size: 14px;
}

.advertorial {
  font-family: "Open Sans", sans-serif;

  #masthead {
    background-color: #5a7a52;
  }

  h1.page-title {
    font-size: 38px;
  }

  h2.page-subtitle {
    font-size: 16px;
  }

  .advertorial-content {
    max-width: 802px;
    margin: 0 auto;
  }

  .advertorial-hero {
    max-width: 100%;
    width: 802px;
    height: auto;
  }

  .advertorial-callout {
    background-color: #fcf5ea;

    ul {
      margin-left: 0;
      padding-left: 0;

      li {
        list-style-position: inside;
        background-color: #fff;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
      }
    }
  }

  .footer-global {
    background-color: #5a7a52;
    color: #fff;

    .footer__social-icons {
      display: flex;
      margin: 0;
      padding: 0;
      gap: 10px;

      li {
        list-style: none;
      }
    }

    .icon {
      fill: #fff;
    }
  }

  /* search form */
  .search__wrap {
    display: flex;
    background-color: #f3f6f1;
    margin: 2% 0;
    border-radius: 10px;

    @media (max-width: 768px) {
      display: block;
    }

    h1 {
      font-size: 32px;
      font-weight: 300;
    }

    h2 {
      font-size: 20px;
      font-weight: 300;
    }

    .slp-area-hero-image {
      background-image: url("https://www.genealogybank.com/sites/default/files/slp-images/hist-newspapers-family.jpg");

      @media (max-width: 768px) {
        background-image: none;
      }
    }

    .col-search {
      position: relative;
      background-size: cover;
      width: 50%;
      min-height: 477px;
      border-radius: 10px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      z-index: 1;

      @media (max-width: 768px) {
        width: 100%;
        min-height: auto;
        border-radius: 10px;
        /* border-top-right-radius: 10px;
        border-bottom-right-radius: 10px; */
      }
    }

    .col-search--title {
      color: #fff;
    }

    .col-search--title::after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: " ";
      display: block;
      padding: 0;
      width: 100%;
      height: 50%;
      z-index: -1;
      border-bottom-left-radius: 10px;
      background: -moz-linear-gradient(
        top,
        rgba(0, 0, 0, 0) 0%,
        #000 33%,
        rgba(0, 0, 0, 0.65) 100%
      );
      background: -webkit-linear-gradient(
        top,
        rgba(0, 0, 0, 0) 0%,
        #000 33%,
        rgba(0, 0, 0, 0.65) 100%
      );
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        #000 33%,
        rgba(0, 0, 0, 0.65) 100%
      );

      @media (max-width: 768px) {
        background: #000;
        height: 100%;
        border-bottom-left-radius: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
    }

    .slp-area-search-area-left {
      border-bottom-left-radius: 5px;
      background-color: rgba(0, 0, 0, 0.33);

      @media (max-width: 768px) {
        padding-top: 10px;
        border-bottom-left-radius: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        text-align: center;
      }
    }

    #gb-bootstrap-landing-pages-search-area {
      padding: 0 3%;
    }

    h2.search-subtitle {
      font-size: 30px;
      font-weight: 300;
    }

    .col-search-form {
      width: 50%;
      padding: 0 3%;

      @media (max-width: 768px) {
        width: 100%;
        padding: 0 5%;
      }
    }

    #gb-bootstrap-landing-pages-search-area
      .pane-gb-forms-search-main {
      background: transparent;
      padding: 0;
      margin: 0 auto;
    }

    #gb-bootstrap-landing-pages-search-area
      .pane-gb-forms-search-main {
      display: inline-block;
    }

    .pane-gb-forms-search-main {
      width: 100%;
    }

    #edit-lname {
      background-color: #f9ff93;
    }

    .form-submit {
      border: none;
      background-color: #7e9c6c;
      font-size: 1.57rem;
      font-weight: 600;
      color: #fff;
      width: auto;

      &:hover {
        background-color: #59704b;
      }
    }
  }
}