{#

Element ID: Element19
Element Name: Newsletter

#}

<section class="newsletter" id="js-newsletter">
  <div class="container container--narrow">
    <div class="row">
      <div class="col-md-6">
        <div class="newsletter__image">
            <img src="{{ site.theme.link }}/frontend/img/newsletter.png" alt="" />
        </div>
      </div>
      <div class="col-md-6">
        <div class="newsletter__titles">
          <p class="p newsletter__subtitle">{{ element.small_title }}</p>
          <h2 class="h2 newsletter__title">{{ element.title }}</h2>
          <p class="h4 newsletter__text">{{ element.description }}</p>
        </div>
      </div>
    </div>
    <form id="newsletterForm" class="newsletter-form m-t-8 js-newsletter-signup" >
      <div class="row">
        <div class="col-md-4">
          <div class="newsletter-form__group">
            <label class="newsletter-form__label" for="mce-firstName">First Name</label>
            <input class="newsletter-form__input"  value="" name="firstName" class="" id="mce-firstName" required>
          </div>
        </div>
        <div class="col-md-4">
          <div class="newsletter-form__group">
            <label class="newsletter-form__label" for="mce-lastName">Last Name</label>
            <input class="newsletter-form__input" type="text" value="" name="lastName" class="" id="mce-lastName"required >
          </div>
        </div>
        <div class="col-md-4">
          <div class="newsletter-form__group">
            <label class="newsletter-form__label" for="mce-email">Email</label>
            <input class="newsletter-form__input" type="email" value="" name="email" class="required email" id="mce-email" required>
          </div>
        </div>
      </div>
      <div style="position: absolute; left: -5000px;" aria-hidden="true">
        <input type="text" value="Yes" name="newsletterLVA">
      </div>
      <div class="newsletter-form__error h6 m-b-0 m-t-2 p-t-1 p-b-1 js-newsletter-error-response"></div>
      <div style="position:absolute; left:-9999px; top: -9999px;">
        <label for="pardot_extra_field">Comments</label>
        <input type="text" id="pardot_extra_field" name="pardot_extra_field">
    </div>
      <button type="submit" class="newsletter-form__button btn btn--gradient p-2 m-t-8 js-newsletter-submit">Sign Up</button>
    </form>

    <div class="newsletter-success m-t-8">
      <h2 class="h3 newsletter-success__title m-b-2">Thank you!</h2>
      <p class="h4">You have sent the request successfully!</p>
    </div>
  </div>
</section>