<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" alt="">
  <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">
                    <a class="header-nav__primary-link" href="#">Sunglasses</a>
                    <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" aria-haspopup="true" aria-expanded="false" aria-controls="shop">
                    Shop
                    <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

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

                      Back
                    </button>
                                        <ul class="header-nav__tertiary header-nav__tertiary--marketing js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">Frame Style</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Aviators</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Classic</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Wrap</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Fashion</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Rectangular</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Cat Eye</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Rimless</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Shield</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--accent" href="#">
                              All Frames
                              <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">Activity</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Golf</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Fish</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Surf</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Run</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Drive</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Hike</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Tennis</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">More</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">New Arrivals</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Best Sellers</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="#">Accessories</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Readers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Blue Hawaii</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <div class="header-nav__tertiary-marketing-placement">
                                            <a class="header-nav__tertiary-marketing-link" href="#">
                                                <div class="header-nav__tertiary-marketing-image" style="background-image: url('/assets/images/megamenu-marketing-placement.jpg');"></div>
                                                <div class="header-nav__tertiary-marketing-text">
                                                    <span class="header-nav__tertiary-marketing-title">Blue Hawaii</span>
                                                    <span class="header-nav__tertiary-marketing-cta">Shop now</span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    MyMaui
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Home Try-on
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Vintage
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Apparel
                  </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:+1800229933">
                    1-888-666-5905
                    <svg class="icon icon--action-phone" alt="">
  <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" alt="">
  <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" alt="">
  <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" aria-haspopup="true" aria-expanded="false" aria-controls="customer-service">
                    Customer Service
                    <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div id="customer-service" class="header-nav__tertiary-wrapper u-page-width-max" aria-hidden="true">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left" alt="">
  <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="#">
                    Your Account
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Your Orders
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Your Wishlist
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link header-nav__secondary-link--logout" href="#">
                    Logout
                  </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>
                <li class="header-nav__primary-item">
                    <a class="header-nav__primary-link" href="#">Eyeglasses</a>
                    <div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
                        <div class="u-page-width-max">
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="header-menu-bar"></div>
        <a class="header__logo-wrapper" href="#">
      <img class="header__logo" src="/assets/images/mauijim-brand-logo.png" alt="Maui Jim logo">
    </a>
        <div class="header__menu-icon">
            <button class="hamburger-spring header__icon header__icon--menu  js-header-icon--menu" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="navigation">
        <span class="u-visually-hidden">Open 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-flyout__toggle header-flyout__toggle--search
  
  
  js-header-icon--search" id="header-flyout-search-toggle" aria-controls="header-flyout-search" aria-expanded="false" data-header-flyout data-header-flyout-type="search">
  <span class="u-visually-hidden">Search</span>
    <svg class="icon icon--search" alt="">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

</button>

                <div class="header-flyout header-flyout--search
  " id="header-flyout-search" aria-hidden="true">
                    <button aria-label="Close search" class="header-flyout__close js-header-search-close-button">
    <svg class="icon icon--close-large" alt="">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

  </button>
                    <div class="header-flyout__content">
                        <div class="header-search js-header-search">
                            <form class="header-search__form">
                                <label class="header-search__form-label">
      <span class="u-visually-hidden">Search</span>
      <input class="header-search__input js-header-search-input" type="text" placeholder="Search on Maui Jim">
    </label>
                            </form>
                            <div class="header-search__results">
                                <a class="header-search__result-link" href="#">View all results <svg class="icon icon--arrow-right" alt="">
  <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"
            alt="Front-side view of the Ho&#x27;okipa Reader Universal Fit">
        </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"
            alt="Front-side view of the Sandy Beach Universal Fit">
        </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"
            alt="Front-side view of the Hanalei Universal Fit">
        </span>
        <span class="search-autocomplete-result__title">Hanalei Universal Fit</span>
      </a>
                                </div>
                            </div>
                            <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="#">Koko Head</a>
                                    </li>
                                    <li class="header-search__list-item">
                                        <a class="header-search__list-link js-header-search-list-link" href="#">Tail Slide</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="#">Aviators</a>
                                    </li>
                                    <li class="header-search__list-item">
                                        <a class="header-search__list-link js-header-search-list-link" href="#">Man</a>
                                    </li>
                                    <li class="header-search__list-item">
                                        <a class="header-search__list-link js-header-search-list-link" href="#">Surf</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>

                    </div>
                </div>

                <div class="header-flyout__overlay header-flyout__overlay--search js-header-flyout-overlay js-header-flyout-overlay--search"></div>

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

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

        </a>
                <button class="header-flyout__toggle header-flyout__toggle--cart
   header-flyout__toggle--with-fallback
  
  js-header-icon--cart" id="header-flyout-cart-toggle" aria-controls="header-flyout-cart" aria-expanded="false" data-header-flyout data-header-flyout-type="cart">
  <span class="u-visually-hidden">Cart</span>
    <svg class="icon icon--cart" alt="">
  <use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>

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

</button>

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

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

  </a>

                <div class="header-flyout header-flyout--cart
   header-flyout--with-fallback" id="header-flyout-cart" aria-hidden="true">
                    <button aria-label="Close cart" class="header-flyout__close js-header-cart-close-button">
    <svg class="icon icon--close-large" alt="">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

  </button>
                    <div class="header-flyout__header">
                        <span class="header-cart__title">Your Cart <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</span>
                    </div>
                    <div class="header-flyout__content">
                        <div class="header-cart header-cart--maui-jim header-cart--tax header-cart--express ">
                            <div class="header-cart__products">
                                <div class="header-cart__item" aria-label="PEAHI">
                                    <a href="#202-02"><img class="header-cart__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;330" alt="Gloss Black front view"></a>
                                    <span class="header-cart__item-info header-cart__item-info--name">PEAHI</span>
                                    <ul class="header-cart__item-list" aria-label="Product Details">
                                        <li class="header-cart__item-info">Frame Color: Gloss Black</li>
                                        <li class="header-cart__item-info">Lens Color: Neutral Grey</li>
                                        <li class="header-cart__item-info">Lens Material: SuperThin Glass</li>
                                        <li class="header-cart__item-info">Gradient: Single Gradient</li>
                                        <li class="header-cart__item-info header-cart__item-info--qty">Qty: 1</li>
                                        <li class="header-cart__item-info header-cart__item-info--price">Price: $149.00</li>
                                    </ul>
                                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                                </div>
                                <div class="header-cart__item" aria-label="WATERWAYS">
                                    <a href="#HTS267-15C"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;330" alt="Olive Stripe front view"></a>
                                    <span class="header-cart__item-info header-cart__item-info--name">WATERWAYS</span>
                                    <ul class="header-cart__item-list" aria-label="Product Details">
                                        <li class="header-cart__item-info">Frame Color: Olive Stripe</li>
                                        <li class="header-cart__item-info">Lens Color: Maui HT™</li>
                                        <li class="header-cart__item-info">Lens Material: SuperThin Glass</li>
                                        <li class="header-cart__item-info">Gradient: Single Gradient</li>
                                        <li class="header-cart__item-vip-info header-cart__item-vip-info--card-value">VIP Card: 30%</li>
                                        <li class="header-cart__item-vip-info header-cart__item-vip-info--original-price"><span class="u-visually-hidden">Original Price:</span> $319.00</li>
                                        <li class="header-cart__item-info header-cart__item-info--qty">Qty: 1</li>
                                        <li class="header-cart__item-info header-cart__item-info--price">Price: $219.00</li>
                                    </ul>
                                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                                </div>
                                <div class="header-cart__item" aria-label="KAWIKA">
                                    <a href="#H257-16C"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;330" alt="Tortoise with Antique Gold front view"></a>
                                    <span class="header-cart__item-info header-cart__item-info--name">KAWIKA</span>
                                    <ul class="header-cart__item-list" aria-label="Product Details">
                                        <li class="header-cart__item-info">Frame Color: Tortoise with Antique Gold</li>
                                        <li class="header-cart__item-info">Lens Color: HCL® Bronze</li>
                                        <li class="header-cart__item-info">Lens Material: MauiPure</li>
                                        <li class="header-cart__item-info">Gradient: Single Gradient</li>
                                        <li class="header-cart__item-vip-info header-cart__item-vip-info--card-value">VIP Card: 30%</li>
                                        <li class="header-cart__item-vip-info header-cart__item-vip-info--original-price"><span class="u-visually-hidden">Original Price:</span> $319.00</li>
                                        <li class="header-cart__item-info header-cart__item-info--qty">Qty: 1</li>
                                        <li class="header-cart__item-info header-cart__item-info--price">Price: $299.00</li>
                                    </ul>
                                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                                </div>
                                <div class="header-cart__item" aria-label="VOYAGER">
                                    <a href="#H178-10"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;330" alt="Tortoise front view"></a>
                                    <span class="header-cart__item-info header-cart__item-info--name">VOYAGER</span>
                                    <ul class="header-cart__item-list" aria-label="Product Details">
                                        <li class="header-cart__item-info">Frame Color: Tortoise</li>
                                        <li class="header-cart__item-info">Lens Color: HCL® Bronze</li>
                                        <li class="header-cart__item-info">Lens Material: SuperThin Glass</li>
                                        <li class="header-cart__item-info">Gradient: Single Gradient</li>
                                        <li class="header-cart__item-info header-cart__item-info--qty">Qty: 1</li>
                                        <li class="header-cart__item-info header-cart__item-info--price">Price: $219.00</li>
                                    </ul>
                                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                                </div>
                            </div>
                            <div class="header-cart__footer">
                                <div class="header-cart__subtotal">
                                    <span class="header-cart__subtotal-label">Subtotal (4 items):</span>
                                    <span class="header-cart__subtotal-value">$1,096.00</span>
                                    <span class="header-cart__subtotal-tax">Inkl. MWST</span>
                                </div>
                                <div class="header-cart__actions">
                                    <a class="header-cart__action button button--primary" href="#">View your cart</a>
                                </div>
                                <div class="header-cart__express">
                                    <div class="header-cart__express-label-header">
                                        <span class="header-cart__express-label">Express Checkout</span>
                                    </div>
                                    <iframe class="header-cart__express-iframe" src="../../assets/static/html/paypal.html" frameborder="0"></iframe>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="header-flyout__overlay header-flyout__overlay--cart js-header-flyout-overlay js-header-flyout-overlay--cart"></div>

                <button class="header-nav__country js-modal-open-link" data-modal-id="country-selector" aria-label="Current country is US. Click to select country.">
          <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>
</header>

<main id="main-section" class="main main--secondary  main--secondary-ambassadors u-page-width-max">
    <ul class="breadcrumb u-page-width-max-gutters js-breadcrumb">
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Maui Jim</a>
        </li>
        <li class="breadcrumb__item breadcrumb__item--current">
            Maui Jim 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--form-large.jpeg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-ambassador--form-small.jpeg 432w, /assets/images/hero-ambassador--form-large.jpeg 1420w">
            <div class="secondary-hero__copy">
                <h2 class="secondary-hero__title">Apply to Become a Maui Jim Ambassador</h2>
                <div class="secondary-hero__calls-to-action-wrapper">
                </div>
            </div>
        </div>

    </div>
    <div class="l-secondary-patterned-text">
        <div class="patterned-text">
            <p>Our Maui Jim ambassadors are the core of our 'ohana. We look to our brand ambassadors as influencers to help us see the world in new ways--from Hawaii to anywhere around the world. <br/><br/>Our ambassadors are passionate about living aloha
                and practice aloha each and every day. A life of aloha is when the heart is full of mutual regard and affection and extends warmth in caring with no obligation in return. The view's better from there.</p>
        </div>

    </div>
    <div class="l-secondary-ambassadors-form">
        <form class="ambassadors js-ambassadors u-page-width-max-restricted">
            <h4 class="registration-title">Personal info</h4>
            <div class="ambassadors__form-items ambassadors__form-items--personal-info">
                <div class="form-item form-item--text form-item--ambassadors-first-name form-item--required">
                    <label for="ambassadors-first-name" class="label label--text label--required">
      First name
      <input type="text"  name="first-name" class="input input--text" autocomplete="given-name" >
      </label>
                </div>
                <div class="form-item form-item--text form-item--ambassadors-last-name form-item--required">
                    <label for="ambassadors-last-name" class="label label--text label--required">
      Last name
      <input type="text"  name="last-name" class="input input--text" autocomplete="last-name" >
      </label>
                </div>
                <div class="form-item form-item--email form-item--ambassadors-email form-item--required">
                    <label for="ambassadors-email" class="label label--email label--required">
      Email address
      <input type="email"  name="email" class="input input--email" autocomplete="email" >
      </label>
                </div>
                <div class="form-item form-item--tel form-item--ambassadors-phone form-item--required">
                    <label for="ambassadors-phone" class="label label--tel label--required">
      Phone number
      <input type="tel"  name="phone" class="input input--tel" autocomplete="tel" >
      </label>
                </div>
                <div class="form-item form-item--text form-item--ambassadors-city form-item--required">
                    <label for="ambassadors-city" class="label label--text label--required">
      City
      <input type="text"  name="city" class="input input--text" autocomplete="city" >
      </label>
                </div>
                <div class="form-item form-item--select form-item--required">
                    <div class="select-wrapper">
                        <label for="ambassadors-state" class="label label--required">
        State
        <select id="ambassadors-state" name="state" class="select js-select" autocomplete="state">
          <option value="" >Select</option>
          <option value="AL" >Alabama</option>
          <option value="AK" >Alaska</option>
          <option value="AS" >American Samoa</option>
          <option value="AZ" >Arizona</option>
          <option value="AR" >Arkansas</option>
          <option value="CA" >California</option>
          <option value="CO" >Colorado</option>
          <option value="CT" >Connecticut</option>
          <option value="DE" >Delaware</option>
          <option value="DC" >District Of Columbia</option>
          <option value="FM" >Federated States Of Micronesia</option>
          <option value="FL" >Florida</option>
          <option value="GA" >Georgia</option>
          <option value="GU" >Guam</option>
          <option value="HI" >Hawaii</option>
          <option value="ID" >Idaho</option>
          <option value="IL" >Illinois</option>
          <option value="IN" >Indiana</option>
          <option value="IA" >Iowa</option>
          <option value="KS" >Kansas</option>
          <option value="KY" >Kentucky</option>
          <option value="LA" >Louisiana</option>
          <option value="ME" >Maine</option>
          <option value="MH" >Marshall Islands</option>
          <option value="MD" >Maryland</option>
          <option value="MA" >Massachusetts</option>
          <option value="MI" >Michigan</option>
          <option value="MN" >Minnesota</option>
          <option value="MS" >Mississippi</option>
          <option value="MO" >Missouri</option>
          <option value="MT" >Montana</option>
          <option value="NE" >Nebraska</option>
          <option value="NV" >Nevada</option>
          <option value="NH" >New Hampshire</option>
          <option value="NJ" >New Jersey</option>
          <option value="NM" >New Mexico</option>
          <option value="NY" >New York</option>
          <option value="NC" >North Carolina</option>
          <option value="ND" >North Dakota</option>
          <option value="MP" >Northern Mariana Islands</option>
          <option value="OH" >Ohio</option>
          <option value="OK" >Oklahoma</option>
          <option value="OR" >Oregon</option>
          <option value="PW" >Palau</option>
          <option value="PA" >Pennsylvania</option>
          <option value="PR" >Puerto Rico</option>
          <option value="RI" >Rhode Island</option>
          <option value="SC" >South Carolina</option>
          <option value="SD" >South Dakota</option>
          <option value="TN" >Tennessee</option>
          <option value="TX" >Texas</option>
          <option value="UT" >Utah</option>
          <option value="VT" >Vermont</option>
          <option value="VI" >Virgin Islands</option>
          <option value="VA" >Virginia</option>
          <option value="WA" >Washington</option>
          <option value="WV" >West Virginia</option>
          <option value="WI" >Wisconsin</option>
          <option value="WY" >Wyoming</option>
        </select>
        </label>
                    </div>
                </div>
                <div class="form-item form-item--text form-item--ambassadors-zip-code form-item--required">
                    <label for="ambassadors-zip-code" class="label label--text label--required">
      ZIP code
      <input type="text"  name="zip-code" class="input input--text" autocomplete="zip-code" >
      </label>
                </div>
                <div class="form-item form-item--select form-item--required">
                    <div class="select-wrapper">
                        <label for="ambassadors-country" class="label label--required">
        Country
        <select id="ambassadors-country" name="country" class="select js-select" autocomplete="country">
          <option value="" >Select</option>
          <option value="USA" >United States</option>
          <option value="AUS" >Australia</option>
          <option value="CAN" >Canada</option>
          <option value="FRA" >France</option>
          <option value="GER" >Germany</option>
          <option value="HK" >Hong Kong</option>
          <option value="IND" >India</option>
          <option value="IRE" >Ireland</option>
          <option value="ITA" >Italy</option>
          <option value="MEX" >Mexico</option>
          <option value="NZE" >New Zealand</option>
          <option value="SAF" >South Africa</option>
          <option value="SPA" >Spain</option>
          <option value="SWE" >Sweden</option>
          <option value="UAE" >United Arab Emirates</option>
          <option value="UK" >United Kingdom</option>
        </select>
        </label>
                    </div>
                </div>
            </div>
            <h4 class="registration-title">Online Presence</h4>
            <p>Please fill out as many as possible.</p>
            <div class="ambassadors__form-items ambassadors__form-items--online-presence">
                <div class="form-item form-item--text form-item--ambassadors-instagram">
                    <label for="ambassadors-instagram" class="label label--text">
      Instagram
      <input type="text"  name="instagram" class="input input--text" autocomplete="instagram" >
      </label>
                </div>
                <div class="form-item form-item--text form-item--ambassadors-facebook">
                    <label for="ambassadors-facebook" class="label label--text">
      Facebook
      <input type="text"  name="facebook" class="input input--text" autocomplete="facebook" >
      </label>
                </div>
                <div class="form-item form-item--text form-item--ambassadors-twitter">
                    <label for="ambassadors-twitter" class="label label--text">
      Twitter
      <input type="text"  name="twitter" class="input input--text" autocomplete="twitter" >
      </label>
                </div>
                <div class="form-item form-item--text form-item--ambassadors-other">
                    <label for="ambassadors-other" class="label label--text">
      Other
      <input type="text"  name="other" class="input input--text" autocomplete="other" >
      </label>
                </div>
                <div class="form-item form-item--text form-item--ambassadors-website">
                    <label for="ambassadors-website" class="label label--text">
      Website
      <input type="text"  name="website" class="input input--text" autocomplete="website" >
      </label>
                </div>
                <div class="form-item form-item--text form-item--ambassadors-blog">
                    <label for="ambassadors-blog" class="label label--text">
      Blog
      <input type="text"  name="blog" class="input input--text" autocomplete="blog" >
      </label>
                </div>
            </div>
            <h4 class="registration-title">Ambassador Program</h4>
            <div class="ambassadors__form-items ambassadors__form-items--online-presence">
                <div class="form-item form-item--select form-item--required">
                    <div class="select-wrapper">
                        <label for="ambassadors-program" class="label label--required">
        Ambassador program
        <select id="ambassadors-program" name="program" class="select js-select">
          <option value="" >Select</option>
          <option value="professional" >Professional Athletes</option>
          <option value="fishing" >Fishing/Marine/Sailing</option>
          <option value="lifestyle" >Lifestyle</option>
          <option value="industry-pro" >Industry Pro Deal</option>
        </select>
        </label>
                    </div>
                </div>
            </div>
            <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="professional">
                <h4>Professional Athletes</h4>
                <div class="ambassadors__form-items">
                    <div class="form-item form-item--text form-item--ambassadors-sport form-item--required">
                        <label for="ambassadors-sport" class="label label--text label--required">
        Sport
        <input type="text"  name="sport" class="input input--text" autocomplete="sports" >
        </label>
                    </div>
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="ambassadors-program" class="label label--required">
          Is this sport your only profession?
          <select id="ambassadors-program" name="program" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                        </div>
                    </div>
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="ambassadors-currently-wear" class="label label--required">
          Do you currently wear Maui Jim sunglasses?
          <select id="ambassadors-currently-wear" name="currently-wear" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                        </div>
                    </div>
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="ambassadors-prescription-or-sunglasses" class="label label--required">
          Do you currently wear prescription sunglasses or sunglasses?
          <select id="ambassadors-prescription-or-sunglasses" name="prescription-or-sunglasses" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                        </div>
                    </div>
                    <div class="form-item form-item--textarea form-item--required">
                        <label for="ambassadors-short-bio" class="label label--required">Please enter a short bio about yourself.</label>
                        <textarea id="ambassadors-short-bio" class="textarea"></textarea>
                    </div>
                    <div class="form-item form-item--textarea form-item--required">
                        <label for="ambassadors-why-maui-jim" class="label label--required">Why do you want to become a Maui Jim Ambassador?</label>
                        <textarea id="ambassadors-why-maui-jim" class="textarea"></textarea>
                    </div>
                    <div class="form-item form-item--textarea form-item--required">
                        <label for="ambassadors-accomplishments" class="label label--required">Please list any accomplishments in your sport.</label>
                        <textarea id="ambassadors-accomplishments" class="textarea"></textarea>
                    </div>
                </div>
            </div>
            <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="fishing">
                <h4>Fishing/Marine/Sailing</h4>
                <div class="ambassadors__form-items">
                    <div class="form-item form-item--text form-item--ambassadors-fms-specialty form-item--required">
                        <label for="ambassadors-fms-specialty" class="label label--text label--required">
        Specialty
        <input type="text"  name="fms-specialty" class="input input--text" autocomplete="fms-specialty" >
        </label>
                    </div>
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="ambassadors-fms-only-profession" class="label label--required">
          Is this your only profession?
          <select id="ambassadors-fms-only-profession" name="fms-only-profession" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                        </div>
                    </div>
                    <div class="form-item form-item--text form-item--ambassadors-fms-days-on-water form-item--required">
                        <label for="ambassadors-fms-days-on-water" class="label label--text label--required">
        How many days a week are you out on the water?
        <input type="text"  name="fms-days-on-water" class="input input--text" autocomplete="fms-days-on-water" >
        </label>
                    </div>
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="ambassadors-fms-currently-wear" class="label label--required">
          Do you currently wear Maui Jim sunglasses?
          <select id="ambassadors-fms-currently-wear" name="fms-currently-wear" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                        </div>
                    </div>
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="ambassadors-fms-prescription-or-sunglasses" class="label label--required">
          Do you currently wear prescription sunglasses or sunglasses?
          <select id="ambassadors-fms-prescription-or-sunglasses" name="fms-prescription-or-sunglasses" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                        </div>
                    </div>
                    <div class="form-item form-item--textarea form-item--required">
                        <label for="ambassadors-fms-short-bio" class="label label--required">Please enter a short bio about yourself.</label>
                        <textarea id="ambassadors-fms-short-bio" class="textarea"></textarea>
                    </div>
                    <div class="form-item form-item--textarea form-item--required">
                        <label for="ambassadors-fms-why" class="label label--required">Why do you want to become a Maui Jim Ambassador?</label>
                        <textarea id="ambassadors-fms-why" class="textarea"></textarea>
                    </div>
                </div>
            </div>
            <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="lifestyle">
                <h4>Lifestyle</h4>
                <div class="ambassadors__form-items">
                    <div class="form-item form-item--text form-item--ambassadors-ls-specialty form-item--required">
                        <label for="ambassadors-ls-specialty" class="label label--text label--required">
        Specialty or Profession
        <input type="text"  name="ls-specialty" class="input input--text" autocomplete="ls-specialty" >
        </label>
                    </div>
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="ambassadors-ls-currently-wear" class="label label--required">
          Do you currently wear Maui Jim sunglasses?
          <select id="ambassadors-ls-currently-wear" name="ls-currently-wear" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                        </div>
                    </div>
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="ambassadors-ls-prescription-or-sunglasses" class="label label--required">
          Do you currently wear prescription sunglasses or sunglasses?
          <select id="ambassadors-ls-prescription-or-sunglasses" name="ls-prescription-or-sunglasses" class="select js-select">
            <option value="" ></option>
            <option value="" ></option>
          </select>
          </label>
                        </div>
                    </div>
                    <div class="form-item form-item--textarea form-item--required">
                        <label for="ambassadors-ls-short-bio" class="label label--required">Please enter a short bio about yourself.</label>
                        <textarea id="ambassadors-ls-short-bio" class="textarea"></textarea>
                    </div>
                    <div class="form-item form-item--textarea form-item--required">
                        <label for="ambassadors-ls-why" class="label label--required">Why do you want to become a Maui Jim Ambassador?</label>
                        <textarea id="ambassadors-ls-why" class="textarea"></textarea>
                    </div>
                </div>
            </div>
            <div class="ambassadors__additional-options" aria-hidden="true" data-options-id="industry-pro">
                <h4>Industry Pro Deal</h4>
                <div class="ambassadors__form-items">
                    <div class="form-item form-item--text form-item--ambassadors-pro-industry form-item--required">
                        <label for="ambassadors-pro-industry" class="label label--text label--required">
        Industry
        <input type="text"  name="pro-industry" class="input input--text" autocomplete="pro-industry" >
        </label>
                    </div>
                    <div class="form-item form-item--textarea form-item--required">
                        <label for="ambassadors-pro-short-bio" class="label label--required">Please enter a short bio about yourself or your company.</label>
                        <textarea id="ambassadors-pro-short-bio" class="textarea"></textarea>
                    </div>
                </div>
            </div>
            <div class="ambassadors__actions">
                <div class="form-item form-item--checkbox">
                    <input type="checkbox" id="ambassadors-terms-and-conditions" name="ambassadors-terms-and-conditions" class="checkbox checkbox--default">
                    <label for="ambassadors-terms-and-conditions">
        
        I agree to the <a href='#'>Terms and Conditions</a> of the website
        
      </label>
                </div>
                <button class="button button--primary">Submit</button>
            </div>
        </form>

    </div>
</main>
<div class="subscribe">
    <div class="u-page-width-max">
        <div class="subscribe__text">
            <p class="subscribe__header">Subscribe to our &#x27;ohana</p>
            <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">
                <label class="subscribe-form__label">
      <span class="u-visually-hidden">Subscribe</span>
      <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
    </label>
                <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail" alt="">
  <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" alt="">
  <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" alt="">
  <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" alt="">
  <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" alt="">
  <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">
                    <h6 class="footer-nav__menu-header">Maui Jim</h6>
                    <button class="footer-nav__menu-button js-footer-nav-button" aria-disabled="false" aria-controls="maui-jim" aria-expanded="false">
            Maui Jim
            <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

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

          </button>
                    <ul class="footer-nav__menu-items" id="maui-jim">
                        <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="#">Contact Us</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Technology</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Golf Events</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Corporate Gifts</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link js-modal-open-link" href="#" data-modal-id="data-protection">Careers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Austine Wood Comarow Polage ® Art</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Trade Login</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <h6 class="footer-nav__menu-header">Customer Service</h6>
                    <button class="footer-nav__menu-button js-footer-nav-button" aria-disabled="false" aria-controls="customer-service" aria-expanded="false">
            Customer Service
            <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

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

          </button>
                    <ul class="footer-nav__menu-items" id="customer-service">
                        <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="#">Returns</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Product Registration</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="#">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>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <h6 class="footer-nav__menu-header">Legal</h6>
                    <button class="footer-nav__menu-button js-footer-nav-button" aria-disabled="false" aria-controls="legal" aria-expanded="false">
            Legal
            <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

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

          </button>
                    <ul class="footer-nav__menu-items" id="legal">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Terms of Use</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Privacy Policy</a>
                        </li>
                    </ul>
                </div>
                <div class="footer-nav__menu js-footer-nav-menu">
                    <h6 class="footer-nav__menu-header">Gift Cards</h6>
                    <button class="footer-nav__menu-button js-footer-nav-button" aria-disabled="false" aria-controls="gift-cards" aria-expanded="false">
            Gift Cards
            <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

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

          </button>
                    <ul class="footer-nav__menu-items" id="gift-cards">
                        <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="zipcode_or_city">
          <span>Retailers</span>
          <input id="zipcode_or_city" 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" alt="">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

          </button>
        </label>
            </form>
            <div class="subscribe-form-wrapper subscribe-form-wrapper--mini js-subscribe-form js-subscribe-form--default">
                <form class="subscribe-form">
                    <label class="subscribe-form__label">
      <span class="u-visually-hidden">Subscribe</span>
      <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Subscribe to Our &#x27;Ohana" autocomplete="email">
    </label>
                    <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail" alt="">
  <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" alt="">
  <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">
            <button class="footer__geo footer__geo--country js-modal-open-link" data-modal-id="country-selector" aria-label="Current country is United Arab Emirates. Click to select country.">
        <span class="footer__geo-label">Country:</span>
        <span class="footer__geo-current">
          United Arab Emirates
          <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </span>
      </button>
            <button class="footer__geo footer__geo--language js-modal-open-link" data-modal-id="language-selector" aria-label="Current language is English. Click to select language.">
        <span class="footer__geo-current">
          English
          <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </span>
      </button>
            <ul class="social-icons">
                <li class="social-icons__item social-icons__item--social-youtube">
                    <a class="social-icons__link" href="#" aria-label="social-youtube"><svg class="icon icon--social-youtube" alt="">
  <use xlink:href="/assets/icons/icons.svg#social-youtube"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item social-icons__item--social-linkedin">
                    <a class="social-icons__link" href="#" aria-label="social-linkedin"><svg class="icon icon--social-linkedin" alt="">
  <use xlink:href="/assets/icons/icons.svg#social-linkedin"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item social-icons__item--social-twitter">
                    <a class="social-icons__link" href="#" aria-label="social-twitter"><svg class="icon icon--social-twitter" alt="">
  <use xlink:href="/assets/icons/icons.svg#social-twitter"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item social-icons__item--social-facebook">
                    <a class="social-icons__link" href="#" aria-label="social-facebook"><svg class="icon icon--social-facebook" alt="">
  <use xlink:href="/assets/icons/icons.svg#social-facebook"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item social-icons__item--social-instagram">
                    <a class="social-icons__link" href="#" aria-label="social-instagram"><svg class="icon icon--social-instagram" alt="">
  <use xlink:href="/assets/icons/icons.svg#social-instagram"></use>
</svg>
</a>
                </li>
            </ul>

        </div>
    </div>
    <div class="footer__copyright">
        <img class="footer__copyright-logo" src="/assets/images/mauijim-brand-logo-monochromatic.svg">
        <span class="footer__copyright-text">©2016 Maui Jim, Inc. Lahana, Hawaii</span>
    </div>
</footer>
{{render (dynamicComponent header)}}
<main id="main-section" class="main main--secondary {{#each classes}} main--secondary-{{this}}{{/each}} 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": false
      }
    }
  ],
  "snapshot": true,
  "classes": [
    "ambassadors"
  ],
  "header": "header",
  "footer": "footer",
  "breadcrumb": {
    "items": [
      {
        "label": "Maui Jim",
        "path": "#"
      },
      {
        "label": "Maui Jim Ambassadors",
        "current": true
      }
    ]
  },
  "components": [
    {
      "component": "secondary-hero",
      "variant": "default",
      "context": {
        "title": "Apply to Become a Maui Jim Ambassador",
        "subtitle": null,
        "image": {
          "small": {
            "src": "/assets/images/hero-ambassador--form-small.jpeg",
            "width": "432"
          },
          "large": {
            "src": "/assets/images/hero-ambassador--form-large.jpeg",
            "width": "1420"
          },
          "vw": "100"
        }
      }
    },
    {
      "component": "patterned-text",
      "variant": "default",
      "context": {
        "value": "Our Maui Jim ambassadors are the core of our 'ohana. We look to our brand ambassadors as influencers to help us see the world in new ways--from Hawaii to anywhere around the world. <br/><br/>Our ambassadors are passionate about living aloha and practice aloha each and every day. A life of aloha is when the heart is full of mutual regard and affection and extends warmth in caring with no obligation in return. The view's better from there."
      }
    },
    {
      "component": "ambassadors-form",
      "variant": "default"
    }
  ]
}
  • Content:
    .l-secondary-accordion-tabs,
    .l-secondary-big-card {
      @include breakpoint($breakpoint-md) {
        margin: 30px $gutter-width-half;
      }
    }
    
    .main--secondary-ambassadors {
      .patterned-text {
        margin: 0;
    
        @include breakpoint($page-width-max) {
          margin: 0 10px;
        }
      }
    }
    
    .main--secondary-corporate {
      .secondary-hero__calls-to-action-wrapper {
        @include breakpoint($breakpoint-md) {
          display: flex;
          align-items: center;
          justify-content: center;
    
          button.secondary-hero__call-to-action {
            margin-right: 24px;
            margin-left: 0;
          }
        }
      }
    }
    
    .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-secondary-hero .secondary-hero {
      @include breakpoint($breakpoint-xl) {
        .call-to-action__button {
          width: auto;
        }
      }
    }
    
    .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: 1.6 KB

There are no notes for this item.