<header class="header">
    <div class="promo-bar js-promo-bar">
        <div class="promo-bar__inner u-page-width-max">
            <a class="promo-bar__link" href="#">Free shipping and free returns</a>
            <button class="promo-bar__close-button">
      <span class="u-visually-hidden">Close</span>
      <svg class="icon icon--close">
  <use xlink:href="/assets/icons/icons.svg#close"></use>
</svg>

    </button>
        </div>
    </div>

    <div class="headroom">
        <nav class="header-nav">
            <ul class="header-nav__primary">
                <li class="header-nav__primary-item header-nav__primary-item--active">
                    <div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
                        <div class="u-page-width-max">
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    SHOP
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items header-nav__tertiary-menu-items--graphic">
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Sunglasses
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Goggles
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Accessory Lenses
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Accessories
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    TECHNOLOGY
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items header-nav__tertiary-menu-items--horizontal">
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Sunglasses Technology
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Prescription
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Goggle Technology
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Tech Goggle Support
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              RLs
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    OUR STORY
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items header-nav__tertiary-menu-items--horizontal">
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Who We Are
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Ambassadors
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Community
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Footprint
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    EXPLORE MORE
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items header-nav__tertiary-menu-items--horizontal">
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Blog
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Events
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Media
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Adventures
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="">
                    Customer Service
                  </a>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="tel:+18884549325">
                    (888) 454-9325
                    <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Contact Us
                    <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Find a Retailer
                    <svg class="icon icon--action-location">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    Customer Service
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Order Status</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Repairs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Returns</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Product Registration</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Prescription</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Retailers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">FAQs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Shipping Information</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Login
                  </a>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link js-modal-open-link" href="#" data-modal-id="country-selector">
                    United States
                    <img src="/assets/images/flag-us.png" alt="United States" width="22" height="14">
                  </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="header-menu-bar"></div>
        <a class="header__logo-wrapper" href="#">
      <img class="header__logo" src="/assets/images/zeal-brand-logo.png" alt="Zeal Optics logo">
    </a>
        <div class="header__menu-icon">
            <button class="hamburger-spring header__icon header__icon--menu  zeal js-header-icon--menu" type="button">
        <span class="u-visually-hidden">Menu</span>
        <span class="hamburger-spring__box">
          <span class="hamburger-spring__inner"></span>
        </span>
      </button>
        </div>
        <div class="header__icons">
            <div class="header__icons-inner">
                <button class="header__icon header__icon--search js-header-icon--search">
          <span class="u-visually-hidden">Search</span>
          <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

          <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

        </button>
                <button class="header__icon header__icon--wishlist">
          <span class="u-visually-hidden">Wishlist</span>
          <svg class="icon icon--heart-item">
  <use xlink:href="/assets/icons/icons.svg#heart-item"></use>
</svg>

        </button>
                <button class="header__icon header__icon--account">
          <span class="u-visually-hidden">Account</span>
          <svg class="icon icon--account">
  <use xlink:href="/assets/icons/icons.svg#account"></use>
</svg>

        </button>
                <button class="header__icon header__icon--cart header__icon--cart--button js-header-icon-empty-cart js-header-icon--cart">
          <span class="u-visually-hidden">Cart</span>
          <svg class="icon icon--cart">
  <use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>

          <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

        </button>
                <a href="#" class="header__icon header__icon--cart header__icon--cart--link js-header-icon-empty-cart">
          <span class="u-visually-hidden">Cart</span>
          <svg class="icon icon--cart">
  <use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>

          <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

        </a>
                <button class="header-nav__country js-modal-open-link" data-modal-id="country-selector">
          <img class="header-nav__country-image" src="/assets/images/flag-us.png" alt="US" width="31" height="20">
          <span class="header-nav__country-label">US</span>
        </button>
            </div>
        </div>
        <div class="header-search header-flyout header-flyout--search js-header-search">
            <form class="header-search__form">
                <input class="header-search__input js-header-search-input" type="text" placeholder="Search on Zeal">
                <button class="header-search__button js-header-search-button" type="reset">
          <span class="u-visually-hidden">Clear</span>
          <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

          <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

        </button>
            </form>
            <div class="header-search__list">
                <span class="header-search__list-label">Latest Search</span>
                <ul class="header-search__list-items">
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Forecast</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Eclipse</a>
                    </li>
                </ul>
            </div>
            <div class="header-search__list">
                <span class="header-search__list-label">Popular Searches</span>
                <ul class="header-search__list-items">
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Slate</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Tramline</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Level</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Vintage</a>
                    </li>
                </ul>
            </div>
            <div class="header-search__results">
                <a class="header-search__result-link" href="#">View all results <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Ho&#x27;okipa Reader Universal Fit</span>
          </a>
                </div>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Sandy Beach Universal Fit</span>
          </a>
                </div>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Hanalei Universal Fit</span>
          </a>
                </div>
            </div>
        </div>
        <div class="header-cart header-cart--default header-cart--tax header-flyout header-flyout--cart js-header-cart">
            <div class="header-cart__header">
                <span class="header-cart__title">Your Cart <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</span>
                <span class="header-cart__item-count header-cart__item-count--empty">0 items</span>
            </div>
            <div class="header-cart__empty">
                <div class="header-cart__empty-inner">
                    <img class="header-cart__empty-brand-logo" src="/assets/images/zeal-brand-mark-grey-small.png">
                    <span class="header-cart__empty-label">Your Shopping Cart is Empty</span>
                    <a class="header-cart__empty-button button button--primary">Shop Now</a>
                </div>
            </div>
        </div>
        <div class="header-flyout-overlay js-header-flyout-overlay"></div>
    </div>
</header>

<main class="main main--secondary u-page-width-max">
    <ul class="breadcrumb u-page-width-max-gutters">
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Zeal</a>
        </li>
        <li class="breadcrumb__item breadcrumb__item--current">
            Ambassadors
        </li>
    </ul>

    <div class="l-secondary-secondary-hero">
        <div class="secondary-hero">
            <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-ambassador-landing-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-ambassador-landing-small.jpg 432w, /assets/images/hero-ambassador-landing-large.jpg 1420w">
            <div class="secondary-hero__copy">
                <h1 class="secondary-hero__title">We are all Zeal</h1>
                <h2 class="secondary-hero__subtitle">We have a diverse family of athletes and ambassadors ranging from explorers to world-class competitors who all rely on unsurpassed optics to excel in their passions.</h2>
                <button class="button button--outlined js-modal-open-link secondary-hero__call-to-action" data-modal-id="video-youtube" data-modal-video="qk225Z_KjQI">Watch the Movie</button>

            </div>
        </div>

    </div>
    <div class="l-secondary-filters">
        <div class="filters js-filters u-page-width-max-gutters">
            <div class="filter-controls">
                <button class="filter-controls__button filter-controls__button--open js-filters-open-button">
      <span class="filter-controls__icon filter-controls__icon--open">
        <svg class="icon icon--filters">
  <use xlink:href="/assets/icons/icons.svg#filters"></use>
</svg>

      </span>
      <span class="filter-controls__label">Filter</span>
    </button>
            </div>
            <div class="filters__categories-wrapper js-filters-categories-wrapper">
                <button class="filters__close-button js-filters-close-button">
      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

      Close filters
    </button>
                <div class="js-selected-filter-close-icon"><svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
                </div>
                <ul class="filters__selected js-filters-selected"></ul>
                <ul class="filters__categories js-filters-categories">
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Sun
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--sun">
                                <div class="filters__subcategory-inner">
                                    <h5 class="filters__subcategory-label"></h5>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-mountain-bike" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="sun" data-id="sun-mountain-bike" data-value="Mountain Bike" data-toggle="mountain-bike">
                                            <label class="filters__item-label" for="sun-mountain-bike">
                    Mountain Bike
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-surf" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="sun" data-id="sun-surf" data-value="Surf" data-toggle="surf">
                                            <label class="filters__item-label" for="sun-surf">
                    Surf
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-fish" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="sun" data-id="sun-fish" data-value="Fish" data-toggle="fish">
                                            <label class="filters__item-label" for="sun-fish">
                    Fish
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-sup" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="sun" data-id="sun-sup" data-value="SUP" data-toggle="sup">
                                            <label class="filters__item-label" for="sun-sup">
                    SUP
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-climb" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="sun" data-id="sun-climb" data-value="Climb" data-toggle="climb">
                                            <label class="filters__item-label" for="sun-climb">
                    Climb
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-wake" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="sun" data-id="sun-wake" data-value="Wake" data-toggle="wake">
                                            <label class="filters__item-label" for="sun-wake">
                    Wake
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-explorer" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="sun" data-id="sun-explorer" data-value="Explorer" data-toggle="explorer">
                                            <label class="filters__item-label" for="sun-explorer">
                    Explorer
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-endurance" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="sun" data-id="sun-endurance" data-value="Endurance" data-toggle="endurance">
                                            <label class="filters__item-label" for="sun-endurance">
                    Endurance
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-creative" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="sun" data-id="sun-creative" data-value="Creative" data-toggle="creative">
                                            <label class="filters__item-label" for="sun-creative">
                    Creative
                  </label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Snow
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--snow">
                                <div class="filters__subcategory-inner">
                                    <h5 class="filters__subcategory-label"></h5>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="snow-snowboard" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="snow" data-id="snow-snowboard" data-value="Snowboard" data-toggle="snowboard">
                                            <label class="filters__item-label" for="snow-snowboard">
                    Snowboard
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-ski" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="snow" data-id="sun-ski" data-value="Ski" data-toggle="ski">
                                            <label class="filters__item-label" for="sun-ski">
                    Ski
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-explorer" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="snow" data-id="sun-explorer" data-value="Explorer" data-toggle="explorer">
                                            <label class="filters__item-label" for="sun-explorer">
                    Explorer
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-mountaineer" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="snow" data-id="sun-mountaineer" data-value="Mountaineer" data-toggle="mountaineer">
                                            <label class="filters__item-label" for="sun-mountaineer">
                    Mountaineer
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sun-creative" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="snow" data-id="sun-creative" data-value="Creative" data-toggle="creative">
                                            <label class="filters__item-label" for="sun-creative">
                    Creative
                  </label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="filters__submit-wrapper">
                <button class="filters__submit button button--primary js-filters-submit-button">See Results (14)</button>
            </div>
            <div class="filters__reset-wrapper">
                <button class="filters__reset js-filters-reset-button">Reset Filters</button>
            </div>
        </div>

    </div>
    <div class="image-cards">
        <div class="image-card" data-toggle-item="surf explorer">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Alison Teal image">
      <div class="image-card__text">
        <h4 class="image-card__title">Alison Teal</h4>
        <h5 class="image-card__subtitle">Surf / Explorer</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="surf">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Chris Del Moro image">
      <div class="image-card__text">
        <h4 class="image-card__title">Chris Del Moro</h4>
        <h5 class="image-card__subtitle">Surf</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="surf explorer">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Liz Clark image">
      <div class="image-card__text">
        <h4 class="image-card__title">Liz Clark</h4>
        <h5 class="image-card__subtitle">Surf / Explorer</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="surf">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="John Mulcoy image">
      <div class="image-card__text">
        <h4 class="image-card__title">John Mulcoy</h4>
        <h5 class="image-card__subtitle">Surf</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="surf">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Pete Devries image">
      <div class="image-card__text">
        <h4 class="image-card__title">Pete Devries</h4>
        <h5 class="image-card__subtitle">Surf</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="ski mountain-bike">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Whit Boucher image">
      <div class="image-card__text">
        <h4 class="image-card__title">Whit Boucher</h4>
        <h5 class="image-card__subtitle">Ski / Mountain Bike</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="creative">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Greg Von Doersten image">
      <div class="image-card__text">
        <h4 class="image-card__title">Greg Von Doersten</h4>
        <h5 class="image-card__subtitle">Creative</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="creative">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Chris Morgan image">
      <div class="image-card__text">
        <h4 class="image-card__title">Chris Morgan</h4>
        <h5 class="image-card__subtitle">Creative</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="endurance trail">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Anton Krupicka image">
      <div class="image-card__text">
        <h4 class="image-card__title">Anton Krupicka</h4>
        <h5 class="image-card__subtitle">Endurance / Trail</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="climb explorer">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Matt Segal image">
      <div class="image-card__text">
        <h4 class="image-card__title">Matt Segal</h4>
        <h5 class="image-card__subtitle">Climb / Explorer</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="mountaineer climb explorer">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Steve House image">
      <div class="image-card__text">
        <h4 class="image-card__title">Steve House</h4>
        <h5 class="image-card__subtitle">Mountaineer / Climb / Explorer</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="ski">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Banks Gilberti image">
      <div class="image-card__text">
        <h4 class="image-card__title">Banks Gilberti</h4>
        <h5 class="image-card__subtitle">Ski</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="ski">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Matt Henitiuk image">
      <div class="image-card__text">
        <h4 class="image-card__title">Matt Henitiuk</h4>
        <h5 class="image-card__subtitle">Ski</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="ski">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Mark Kogelmann image">
      <div class="image-card__text">
        <h4 class="image-card__title">Mark Kogelmann</h4>
        <h5 class="image-card__subtitle">Ski</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="ski mountaineer explorer">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Jon Kedrowski image">
      <div class="image-card__text">
        <h4 class="image-card__title">Jon Kedrowski</h4>
        <h5 class="image-card__subtitle">Ski / Mountaineer / Explorer</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="explorer mountaineer">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Ryan Waters image">
      <div class="image-card__text">
        <h4 class="image-card__title">Ryan Waters</h4>
        <h5 class="image-card__subtitle">Explorer / Mountaineer</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="wake">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Brian Grubb image">
      <div class="image-card__text">
        <h4 class="image-card__title">Brian Grubb</h4>
        <h5 class="image-card__subtitle">Wake</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="explorer">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Eric Larsen image">
      <div class="image-card__text">
        <h4 class="image-card__title">Eric Larsen</h4>
        <h5 class="image-card__subtitle">Explorer</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="snowboard">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Frederik Kalbermatten image">
      <div class="image-card__text">
        <h4 class="image-card__title">Frederik Kalbermatten</h4>
        <h5 class="image-card__subtitle">Snowboard</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="snowboard">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Austen Sweeten image">
      <div class="image-card__text">
        <h4 class="image-card__title">Austen Sweeten</h4>
        <h5 class="image-card__subtitle">Snowboard</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="snowboard">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Kimmy Fasani image">
      <div class="image-card__text">
        <h4 class="image-card__title">Kimmy Fasani</h4>
        <h5 class="image-card__subtitle">Snowboard</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="snowboard">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Andrew Burns image">
      <div class="image-card__text">
        <h4 class="image-card__title">Andrew Burns</h4>
        <h5 class="image-card__subtitle">Snowboard</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="snowboard">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Sandra Hillen image">
      <div class="image-card__text">
        <h4 class="image-card__title">Sandra Hillen</h4>
        <h5 class="image-card__subtitle">Snowboard</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="snowboard">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Kjersti Buaas image">
      <div class="image-card__text">
        <h4 class="image-card__title">Kjersti Buaas</h4>
        <h5 class="image-card__subtitle">Snowboard</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="snowboard creative">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Tamo Campos image">
      <div class="image-card__text">
        <h4 class="image-card__title">Tamo Campos</h4>
        <h5 class="image-card__subtitle">Snowboard / Creative</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="snowboard">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Ian Wood image">
      <div class="image-card__text">
        <h4 class="image-card__title">Ian Wood</h4>
        <h5 class="image-card__subtitle">Snowboard</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="snowboard">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Sarka Pancochova image">
      <div class="image-card__text">
        <h4 class="image-card__title">Sarka Pancochova</h4>
        <h5 class="image-card__subtitle">Snowboard</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="snowboard">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Byron Bagwell image">
      <div class="image-card__text">
        <h4 class="image-card__title">Byron Bagwell</h4>
        <h5 class="image-card__subtitle">Snowboard</h5>
      </div>
    </a>
            </div>
        </div>

        <div class="image-card" data-toggle-item="">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="David &quot;DCP&quot; Porcheron image">
      <div class="image-card__text">
        <h4 class="image-card__title">David &quot;DCP&quot; Porcheron</h4>
      </div>
    </a>
            </div>
        </div>

    </div>
    <a class="button button--primary l-secondary-image-card-call-to-action" href="#">Explore More</a>
</main>
<div class="subscribe">
    <div class="u-page-width-max">
        <div class="subscribe__text">
            <h5 class="subscribe__header">Subscribe to our &#x27;ohana</h5>
            <span class="subscribe__description">Keep up with the Latest Products and News.</span>
        </div>
        <div class="subscribe-form-wrapper subscribe-form-wrapper--default js-subscribe-form js-subscribe-form--default">
            <form class="subscribe-form">
                <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
                <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail">
  <use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>

    </button>
            </form>
            <div class="subscribe-form-status">
                <span class="subscribe-form-status__message js-subscribe-status-message"></span>
                <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </span>
            </div>
            <span class="subscribe-form-legal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
  </span>
        </div>

    </div>
</div>

<footer class="footer footer--default">
    <div class="footer-nav u-page-width-max">
        <a class="footer-nav__action footer-nav__action--phone" href="tel:+1800229933">
      1-888-666-5905
      <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

    </a>
        <a class="footer-nav__action footer-nav__action--contact" href="#">
      Contact Us
      <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

    </a>
        <a class="footer-nav__action footer-nav__action--retailers" href="#">
      Find a Retailer
      <svg class="icon icon--action-location">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

    </a>
        <div class="footer-nav__menus">
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Zeal Optics
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">About Us</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Sunglasses Technology</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Goggles Technology</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Events</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Careers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Flagship Store</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Trade Login</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Blog</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Media</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Adventures</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Customer Service
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Contact Us</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Order Status</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Repairs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Prescription</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Tech Goggle Support</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Retailers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">FAQs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Shipping Information</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link js-modal-open-link" href="#" data-modal-id="footer-catalogs">Catalogs</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Legal
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Terms &amp; Privacy</a>
                        </li>
                    </ul>
                </div>
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Gift Cards
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">VIP &amp; Gift Cardholder</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Shop Gift Card</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-nav__forms">
            <form class="footer__retailer-form">
                <label class="footer__retailer-label" for="footer__retailer-input">Retailers</label>
                <input class="footer__retailer-input" name="footer__retailer-input" type="text" placeholder="ZIP code or City" />
                <button class="footer__retailer-submit" type="submit">
          <svg class="icon icon--angle-right">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

        </button>
            </form>
            <div class="subscribe-form-wrapper subscribe-form-wrapper--mini js-subscribe-form js-subscribe-form--default">
                <form class="subscribe-form">
                    <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Subscribe to Our &#x27;Ohana" autocomplete="email">
                    <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail">
  <use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>

    </button>
                </form>
                <div class="subscribe-form-status">
                    <span class="subscribe-form-status__message js-subscribe-status-message"></span>
                    <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </span>
                </div>
                <span class="subscribe-form-legal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
  </span>
            </div>

        </div>
    </div>
    <div class="footer__bottom">
        <div class="u-page-width-max">
            <a class="footer__geo footer__geo--country js-modal-open-link" data-modal-id="country-identifier" href="#">
        <span class="footer__geo-label">Country:</span>
        <span class="footer__geo-current">
          United Arab Emirates
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </span>
      </a>
            <ul class="social-icons">
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-instagram">
  <use xlink:href="/assets/icons/icons.svg#social-instagram"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-facebook">
  <use xlink:href="/assets/icons/icons.svg#social-facebook"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-twitter">
  <use xlink:href="/assets/icons/icons.svg#social-twitter"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-tumblr">
  <use xlink:href="/assets/icons/icons.svg#social-tumblr"></use>
</svg>
</a>
                </li>
            </ul>

        </div>
    </div>
    <div class="footer__copyright">
        <img class="footer__copyright-logo" src="/assets/images/zeal-brand-logo-small-white.png">
        <span class="footer__copyright-text">©2016 Zeal Optics, Colorado</span>
    </div>
</footer>
{{render (dynamicComponent header)}}
<main class="main main--secondary u-page-width-max">
  {{#if breadcrumb}}
  {{render '@breadcrumb' breadcrumb}}
  {{/if}}
  {{#each components}}
  <div class="l-secondary-{{component}}">
    {{render (dynamicVariant component variant) context}}
  </div>
  {{/each}}
  {{#if imageCards}}
  <div class="image-cards{{#if imageCardsModifier}} image-cards--retailer{{/if}}">
    {{#each imageCards}}
    {{render '@image-card' this merge=true}}
    {{/each}}
  </div>
  {{#if imageCardCallToAction}}
  <a class="button button--primary l-secondary-image-card-call-to-action" href="#">{{imageCardCallToAction}}</a>
  {{/if}}
  {{/if}}
</main>
{{render '@subscribe'}}
{{render (dynamicComponent footer)}}
{
  "pageModals": [
    {
      "component": "video-modal",
      "context": {
        "id": "video-youtube",
        "youtubeId": null
      }
    }
  ],
  "header": "header--zeal--empty-cart",
  "footer": "footer--zeal",
  "breadcrumb": {
    "items": [
      {
        "label": "Zeal",
        "path": "#"
      },
      {
        "label": "Ambassadors",
        "current": true
      }
    ]
  },
  "components": [
    {
      "component": "secondary-hero",
      "variant": "default",
      "context": {
        "title": "We are all Zeal",
        "subtitle": "We have a diverse family of athletes and ambassadors ranging from explorers to world-class competitors who all rely on unsurpassed optics to excel in their passions.",
        "callsToAction": [
          {
            "modifier": "outlined",
            "buttonValue": "Watch the Movie",
            "buttonModal": "video-youtube",
            "buttonModalVideo": "qk225Z_KjQI",
            "classes": [
              "secondary-hero__call-to-action"
            ]
          }
        ],
        "image": {
          "small": {
            "src": "/assets/images/hero-ambassador-landing-small.jpg",
            "width": "432"
          },
          "large": {
            "src": "/assets/images/hero-ambassador-landing-large.jpg",
            "width": "1420"
          },
          "vw": "100"
        }
      }
    },
    {
      "component": "filters",
      "variant": "default",
      "context": {
        "categories": [
          {
            "label": "Sun",
            "subcategories": [
              {
                "modifier": "sun",
                "items": [
                  {
                    "id": "sun-mountain-bike",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Mountain Bike",
                    "data": {
                      "toggle": "mountain-bike"
                    }
                  },
                  {
                    "id": "sun-surf",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Surf",
                    "data": {
                      "toggle": "surf"
                    }
                  },
                  {
                    "id": "sun-fish",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Fish",
                    "data": {
                      "toggle": "fish"
                    }
                  },
                  {
                    "id": "sun-sup",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "SUP",
                    "data": {
                      "toggle": "sup"
                    }
                  },
                  {
                    "id": "sun-climb",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Climb",
                    "data": {
                      "toggle": "climb"
                    }
                  },
                  {
                    "id": "sun-wake",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Wake",
                    "data": {
                      "toggle": "wake"
                    }
                  },
                  {
                    "id": "sun-explorer",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Explorer",
                    "data": {
                      "toggle": "explorer"
                    }
                  },
                  {
                    "id": "sun-endurance",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Endurance",
                    "data": {
                      "toggle": "endurance"
                    }
                  },
                  {
                    "id": "sun-creative",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Creative",
                    "data": {
                      "toggle": "creative"
                    }
                  }
                ]
              }
            ]
          },
          {
            "label": "Snow",
            "subcategories": [
              {
                "modifier": "snow",
                "items": [
                  {
                    "id": "snow-snowboard",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Snowboard",
                    "data": {
                      "toggle": "snowboard"
                    }
                  },
                  {
                    "id": "sun-ski",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Ski",
                    "data": {
                      "toggle": "ski"
                    }
                  },
                  {
                    "id": "sun-explorer",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Explorer",
                    "data": {
                      "toggle": "explorer"
                    }
                  },
                  {
                    "id": "sun-mountaineer",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Mountaineer",
                    "data": {
                      "toggle": "mountaineer"
                    }
                  },
                  {
                    "id": "sun-creative",
                    "input": "checkbox",
                    "variant": "default",
                    "label": "Creative",
                    "data": {
                      "toggle": "creative"
                    }
                  }
                ]
              }
            ]
          }
        ],
        "prescription": null,
        "sortOptions": null,
        "angles": null,
        "excludeResultCount": true
      }
    }
  ],
  "imageCards": [
    {
      "title": "Alison Teal",
      "subtitle": "Surf / Explorer",
      "data": {
        "toggle-item": "surf explorer"
      }
    },
    {
      "title": "Chris Del Moro",
      "subtitle": "Surf",
      "data": {
        "toggle-item": "surf"
      }
    },
    {
      "title": "Liz Clark",
      "subtitle": "Surf / Explorer",
      "data": {
        "toggle-item": "surf explorer"
      }
    },
    {
      "title": "John Mulcoy",
      "subtitle": "Surf",
      "data": {
        "toggle-item": "surf"
      }
    },
    {
      "title": "Pete Devries",
      "subtitle": "Surf",
      "data": {
        "toggle-item": "surf"
      }
    },
    {
      "title": "Whit Boucher",
      "subtitle": "Ski / Mountain Bike",
      "data": {
        "toggle-item": "ski mountain-bike"
      }
    },
    {
      "title": "Greg Von Doersten",
      "subtitle": "Creative",
      "data": {
        "toggle-item": "creative"
      }
    },
    {
      "title": "Chris Morgan",
      "subtitle": "Creative",
      "data": {
        "toggle-item": "creative"
      }
    },
    {
      "title": "Anton Krupicka",
      "subtitle": "Endurance / Trail",
      "data": {
        "toggle-item": "endurance trail"
      }
    },
    {
      "title": "Matt Segal",
      "subtitle": "Climb / Explorer",
      "data": {
        "toggle-item": "climb explorer"
      }
    },
    {
      "title": "Steve House",
      "subtitle": "Mountaineer / Climb / Explorer",
      "data": {
        "toggle-item": "mountaineer climb explorer"
      }
    },
    {
      "title": "Banks Gilberti",
      "subtitle": "Ski",
      "data": {
        "toggle-item": "ski"
      }
    },
    {
      "title": "Matt Henitiuk",
      "subtitle": "Ski",
      "data": {
        "toggle-item": "ski"
      }
    },
    {
      "title": "Mark Kogelmann",
      "subtitle": "Ski",
      "data": {
        "toggle-item": "ski"
      }
    },
    {
      "title": "Jon Kedrowski",
      "subtitle": "Ski / Mountaineer / Explorer",
      "data": {
        "toggle-item": "ski mountaineer explorer"
      }
    },
    {
      "title": "Ryan Waters",
      "subtitle": "Explorer / Mountaineer",
      "data": {
        "toggle-item": "explorer mountaineer"
      }
    },
    {
      "title": "Brian Grubb",
      "subtitle": "Wake",
      "data": {
        "toggle-item": "wake"
      }
    },
    {
      "title": "Eric Larsen",
      "subtitle": "Explorer",
      "data": {
        "toggle-item": "explorer"
      }
    },
    {
      "title": "Frederik Kalbermatten",
      "subtitle": "Snowboard",
      "data": {
        "toggle-item": "snowboard"
      }
    },
    {
      "title": "Austen Sweeten",
      "subtitle": "Snowboard",
      "data": {
        "toggle-item": "snowboard"
      }
    },
    {
      "title": "Kimmy Fasani",
      "subtitle": "Snowboard",
      "data": {
        "toggle-item": "snowboard"
      }
    },
    {
      "title": "Andrew Burns",
      "subtitle": "Snowboard",
      "data": {
        "toggle-item": "snowboard"
      }
    },
    {
      "title": "Sandra Hillen",
      "subtitle": "Snowboard",
      "data": {
        "toggle-item": "snowboard"
      }
    },
    {
      "title": "Kjersti Buaas",
      "subtitle": "Snowboard",
      "data": {
        "toggle-item": "snowboard"
      }
    },
    {
      "title": "Tamo Campos",
      "subtitle": "Snowboard / Creative",
      "data": {
        "toggle-item": "snowboard creative"
      }
    },
    {
      "title": "Ian Wood",
      "subtitle": "Snowboard",
      "data": {
        "toggle-item": "snowboard"
      }
    },
    {
      "title": "Sarka Pancochova",
      "subtitle": "Snowboard",
      "data": {
        "toggle-item": "snowboard"
      }
    },
    {
      "title": "Byron Bagwell",
      "subtitle": "Snowboard",
      "data": {
        "toggle-item": "snowboard"
      }
    },
    {
      "title": "David \"DCP\" Porcheron",
      "subtitle": null,
      "data": {
        "toggle-item": null
      }
    }
  ],
  "imageCardCallToAction": "Explore More"
}
  • Content:
    .l-secondary-accordion-tabs,
    .l-secondary-big-card {
      @include breakpoint($breakpoint-md) {
        margin: 30px $gutter-width-half;
      }
    }
    
    .l-secondary-accordion-tabs,
    .l-secondary-secondary-contact {
      @include breakpoint($breakpoint-xl) {
        max-width: 940px;
        margin-right: auto;
        margin-left: auto;
      }
    }
    
    .l-secondary-big-card {
      @include breakpoint($breakpoint-md) {
        .big-card {
          margin: 0;
        }
      }
    }
    
    .l-secondary-secondary-contact {
      margin: 0 $gutter-width-half 50px;
    
      @include breakpoint($breakpoint-xl) {
        margin: 0 auto 50px;
      }
    }
    
    .l-secondary-centered-text {
      margin: 40px 0;
    
      @include breakpoint($breakpoint-xl) {
        margin: 60px 0;
      }
    }
    
    .l-secondary-filters {
      margin-bottom: 10px;
    
      @include breakpoint($breakpoint-md) {
        margin: 30px 0 50px;
    
        .filter-controls {
          display: none;
        }
      }
    }
    
    .l-secondary-image-card-call-to-action {
      display: block;
      margin: 40px 0 60px 50%;
      clear: both;
      transform: translateX(-50%);
    }
    
  • URL: /components/raw/secondary-page/secondary-page.scss
  • Filesystem Path: src/components/03-pages/secondary-page/secondary-page.scss
  • Size: 987 Bytes

There are no notes for this item.