<footer class="np-footer">
  <div class="mizuno-logo">
    <a href="https://www.mizunousa.com" target="_blank">
      <img
        alt="{{ current_school.name }}"
        class="np-footer-logo-image"
        src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/MIZUNO_no_background_logo.svg"
      />
    </a>
    <div class="logo-links">
      <a href="https://corp.mizuno.com/en" target="_blank">About Us</a>
      <a href="https://www2.mizunousa.com/help" target="_blank">Contact Us</a>
      <a href="https://corp.mizuno.com/en/sustainability?ad=msiteus" target="_blank">Sustainability</a>
    </div>
  </div>

  <nav class="np-footer-social-links">
    {% if website_footer.show_social_media_links? %}
      <ul class="np-footer-social-links-list">
        {% for social_media_link in website_footer.social_media_links %}
          {% unless social_media_link.name == 'linkedin' %}
            <li class="np-footer-social-links-item">
              <a
                class="np-footer-social-links-link np-button-color"
                href="{{ social_media_link.link }}"
                target="_blank" title="{{ social_media_link.name }}"
              >
                <i class="np-footer-social-links-icon
                  np-button-color
                  fab fa-{{ social_media_link.name }}"
                ></i>
              </a>
            </li>
          {% endunless %}
        {% endfor %}
      </ul>
    {% endif %}
  </nav>
</footer>

<style>
.np-footer {
  padding: 0 5px 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
}

.mizuno-logo{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.np-footer-logo-image{
  display: flex;
  filter: none;
  opacity: 1;
  margin-right: 10px;
  height: 45px;
}

.logo-links{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.logo-links a{
  color: #001588;
  text-decoration: none;
}

.np-footer-social-links {
  margin-top: -25px;
  z-index: 1;
}

@media (min-width:768px) {
  .np-footer {
    padding: 50px 30px 0px;
  }

  .np-footer-logo-image{
    height: 60px;
  }

  .np-footer-social-links {
    margin-top: 0;
    z-index: 1;
  }
}

</style>
