<!-- Hero Section -->
<div class="js-slick-carousel u-slick u-slick--equal-height"
     data-fade="true"
     data-infinite="true"
     data-autoplay="true"
     data-speed="10000"
     data-pagi-classes="text-center u-slick__pagination u-slick__pagination--white position-absolute right-0 bottom-0 left-0 mb-4 mb-0">
  <div class="js-slide gradient-overlay-half-primary-v1 bg-img-hero space-3 min-height-lg-100vh" style="background-image: url(../../assets/img/1920x800/img7.jpg);">
    <!-- Hero News -->
    <div class="container d-lg-flex align-items-lg-center">
      <article class="js-scroll-effect position-relative w-lg-60 text-center mx-lg-auto"
               data-scroll-effect="smoothFadeToBottom"
               data-scroll-effect-speed="500">
        <!-- Share Social Networks -->
        <div data-scs-animation-in="fadeInUp">
          <ul class="list-inline mb-4">
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-facebook-f btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-google btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-twitter btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-github btn-icon__inner"></span>
              </a>
            </li>
          </ul>
        </div>
        <!-- End Share Social Networks -->

        <!-- Info -->
        <div class="mb-4">
          <h1 class="text-white font-weight-semi-bold mb-3"
              data-scs-animation-in="fadeInUp">2018's Most Relaxing and Affordable Vacations</h1>
          <p class="text-white-70 mb-7"
             data-scs-animation-in="fadeInUp">At Wake, our mission has always been focused on bringing openness and transparency to the design process.</p>
        </div>
        <a class="btn text-primary btn-white btn-pill btn-wide transition-3d-hover" href="../blog/single-article-classic.html"
           data-scs-animation-in="fadeInUp">Read More</a>
        <!-- End Info -->
      </article>
    </div>
    <!-- End Hero News -->
  </div>

  <div class="js-slide gradient-overlay-half-primary-v1 bg-img-hero space-3 min-height-lg-100vh" style="background-image: url(../../assets/img/1920x800/img6.jpg);">
    <!-- Hero News -->
    <div class="container d-lg-flex align-items-lg-center">
      <article class="js-scroll-effect position-relative w-lg-60 text-center mx-lg-auto"
               data-scroll-effect="smoothFadeToBottom"
               data-scroll-effect-speed="500">
        <!-- Share Social Networks -->
        <div data-scs-animation-in="fadeInUp">
          <ul class="list-inline mb-4">
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-facebook-f btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-google btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-twitter btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-github btn-icon__inner"></span>
              </a>
            </li>
          </ul>
        </div>
        <!-- End Share Social Networks -->

        <!-- Info -->
        <div class="mb-4">
          <h2 class="h1 text-white font-weight-semi-bold mb-3"
              data-scs-animation-in="fadeInUp">Bonded by science: researchers describe their nerdy proposals</h2>
          <p class="text-white-70 mb-7"
             data-scs-animation-in="fadeInUp">For Valentine's Day, Nature collects tales of romance in research.</p>
        </div>
        <a class="btn text-primary btn-white btn-pill btn-wide transition-3d-hover" href="../blog/single-article-classic.html"
           data-scs-animation-in="fadeInUp">Read More</a>
        <!-- End Info -->
      </article>
    </div>
    <!-- End Hero News -->
  </div>

  <div class="js-slide gradient-overlay-half-primary-v1 bg-img-hero space-3 min-height-lg-100vh" style="background-image: url(../../assets/img/1920x800/img8.jpg);">
    <!-- Hero News -->
    <div class="container d-lg-flex align-items-lg-center">
      <article class="js-scroll-effect position-relative w-lg-60 text-center mx-lg-auto"
               data-scroll-effect="smoothFadeToBottom"
               data-scroll-effect-speed="500">
        <!-- Share Social Networks -->
        <div data-scs-animation-in="fadeInUp">
          <ul class="list-inline mb-4">
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-facebook-f btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-google btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-twitter btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-github btn-icon__inner"></span>
              </a>
            </li>
          </ul>
        </div>
        <!-- End Share Social Networks -->

        <!-- Info -->
        <div class="mb-4">
          <h2 class="h1 text-white font-weight-semi-bold mb-3"
              data-scs-animation-in="fadeInUp">Tree rings reveal increased fire risk for southwestern US</h2>
          <p class="text-white-70 mb-7"
             data-scs-animation-in="fadeInUp">Historical record points to climate patterns that could prime the region for an intense fire season.</p>
        </div>
        <a class="btn text-primary btn-white btn-pill btn-wide transition-3d-hover" href="../blog/single-article-classic.html"
           data-scs-animation-in="fadeInUp">Read More</a>
        <!-- End Info -->
      </article>
    </div>
    <!-- End Hero News -->
  </div>

  <div class="js-slide gradient-overlay-half-primary-v1 bg-img-hero space-3 min-height-lg-100vh" style="background-image: url(../../assets/img/1920x800/img9.jpg);">
    <!-- Hero News -->
    <div class="container d-lg-flex align-items-lg-center">
      <article class="js-scroll-effect position-relative w-lg-60 text-center mx-lg-auto"
               data-scroll-effect="smoothFadeToBottom"
               data-scroll-effect-speed="500">
        <!-- Share Social Networks -->
        <div data-scs-animation-in="fadeInUp">
          <ul class="list-inline mb-4">
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-facebook-f btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-google btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-twitter btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent rounded-circle" href="#">
                <span class="fab fa-github btn-icon__inner"></span>
              </a>
            </li>
          </ul>
        </div>
        <!-- End Share Social Networks -->

        <!-- Info -->
        <div class="mb-4">
          <h2 class="h1 text-white font-weight-semi-bold mb-3"
              data-scs-animation-in="fadeInUp">The top 30 self-improvement goals we never get around to achieving</h2>
          <p class="text-white-70 mb-7"
             data-scs-animation-in="fadeInUp">Travelling, getting out of debt and writing will among goals most commonly deferred, according to survey</p>
        </div>
        <a class="btn text-primary btn-white btn-pill btn-wide transition-3d-hover" href="../blog/single-article-classic.html"
           data-scs-animation-in="fadeInUp">Read More</a>
        <!-- End Info -->
      </article>
    </div>
    <!-- End Hero News -->
  </div>
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.scroll-effect.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');

    // initialization of scroll effect component
    $.HSCore.components.HSScrollEffect.init('.js-scroll-effect');
  });
</script>