<div class="modal-window modal-video" data-video="vid1">
  <div class="modal-inner">
    <div class="close-modal close-video-modal">
      <svg class="icon-close">
        <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-close"></use>
      </svg>
    </div>
    <div class="modal-content">

      <div class="video-container" id="video-container">
        <div class="playback-animation" id="playback-animation">
          <svg class="playback-icons">
            <use class="hidden" href="#play-icon"></use>
            <use href="#pause"></use>
          </svg>
        </div>

        <video controls class="video" id="video" preload="metadata" poster="">
          <source src="" type="video/mp4">
          </source>
        </video>

        <div class="video-controls hidden" id="video-controls">
          <div class="bottom-controls">
            <div class="left-controls">
              <button data-title="Play (p)" id="play">
                <div class="playback-icons">
                  <svg class="icon-play">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-play"></use>
                  </svg>
                  <svg class="icon-pause hidden">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-pause"></use>
                  </svg>
                </div>
              </button>
            </div>

            <div class="center-controls">
              <div class="video-progress">
                <progress id="progress-bar" value="0" min="0"></progress>
                <input class="seek" id="seek" value="0" min="0" type="range" step="1">
                <div class="seek-tooltip" id="seek-tooltip">00:00</div>
                <time class="time-elapsed h6" id="time-elapsed">00:00</time>
                <time class="time-duration h6" id="duration">00:00</time>
              </div>
            </div>

            <div class="right-controls">
              <div class="volume-controls">
                <button data-title="Mute (m)" class="volume-button" id="volume-button">
                  <div class="volume-icons">
                    <svg class="icon-sound-off hidden">
                      <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-sound-off"></use>
                    </svg>
                    <svg class="icon-sound-low hidden">
                      <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-sound-low"></use>
                    </svg>
                    <svg class="icon-sound-on">
                      <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-sound-on"></use>
                    </svg>
                  </div>
                </button>
                <div class="volume-slider">
                  <div class="volume-value"></div>
                  <input class="volume" id="volume" value="1" data-mute="0.5" type="range" max="1" min="0" step="0.01">
                </div>
              </div>
              <button data-title="Full screen (f)" class="fullscreen-button" id="fullscreen-button">
                <div class="fullscreen-icons">
                  <svg class="icon-fullscreen">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-fullscreen"></use>
                  </svg>
                  <svg class="icon-exit-fullscreen hidden">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-exit-fullscreen"></use>
                  </svg>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="site-footer">
    <div class="site-footer__container">
      <div class="site-footer__top-content">
        <h3 class="site-footer__tagline">{{ footer_tagline }}</h3>
        <nav>
          <ul class="site-footer__list">
            {% for item in menu.footer.get_items %}
              <li>
                <a href="{{ item.link }}" class="site-footer__link">{{ item.title }}</a>
              </li>
            {% endfor %}
          </ul>
        </nav>
      </div>
      <div class="site-footer__bottom-content">
        <div>{{ footer_text }}</div>
        <div class="site-footer__social">
          {% for item in social_icons %}
            <a href="{{ item.url }}" target="_blank">
              <img src="{{ item.icon["url"] }}" alt="{{ item.icon["alt"] }}" />
            </a>
          {% endfor %}
        </div>
      </div>
    </div>
  </footer>

  <!-- Form modal -->
  <div class="modal-window modal-form">
    <div class="modal-inner">
      <div class="close-modal">
        <svg class="icon-close">
          <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-close"></use>
        </svg>
      </div>
        <div class="modal-content">
          <h2>Send Inquiry</h2>
          <p class="modal-window__text">Please kindly note, that this contact form is only for virtual reality training inquiries.
          In case you are interested in other offerings by Linde Engineering please visit our global website: <a href="https://www.linde-engineering.com" target="_blank">www.linde-engineering.com</a>.
          General information about our leading global industrial gases and engineering company,
          Linde plc, you can find here: <a href="https://www.linde.com" target="_blank">www.linde.com</a>.</p>
            {% include "templates/partials/contact-form.twig" %}  
        </div>


    </div>
  </div>

  <!-- Cookies -->
  <div class="cookie" style="display: none" data-cookie-bar>
    <div class="container">
      <div class="row">
        <h2>Cookie Preferences</h2>
        <p>By clicking “Accept All Cookies”, you agree to the storing of cookies and similar technologies on your device to enhance site navigation, analyze site usage, offer certain functionalities and assist in our marketing efforts. Strictly necessary cookies are always active. You can read more about our policy in the <br /><a href="{{ data_protection_page_link }}">Privacy Policy.</a>.
        </p>
      </div>
      <div class="row">
        <div class="cookie__inline-buttons">
          <button class="btn btn--gradient-small" data-cookies-accept-all-btn>Accept All Cookies</button>
          <div class="cookie__mobile-inline-buttons">
            <button class="btn btn--light small text-dark" data-cookies-accept-necessary-btn>Accept necessary</button>
            <button class="btn btn--light small text-dark" data-cookies-settings-btn>Settings</button>
          </div>
      </div>
      </div>
      <div class="row cookie__settings" data-cookies-settings>   
        <h2>Cookie settings</h2>
        <form data-cookies-settings-form>
          <div class="form-group full-width">
            <div class="checkbox-styled">
              <label for="necessary" class="" required>
                Strictly Necessary cookies (always active)
                <input name="necessary" type="checkbox" id="necessary" value="Yes" checked disabled>
                <span class="checkmark"></span>
              </label>
              <p>
                These cookies are necessary for the website to function and cannot be  switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as  setting your privacy preferences or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.
              </p>
            </div>
          </div>
          <div class="form-group full-width">
            <div class="checkbox-styled">
              <label for="performance" class="" required>
                Performance cookies
                <input name="performance" type="checkbox" id="performance" value="Yes">
                <span class="checkmark"></span>
              </label>
              <p>
                These cookies - aka Analytics Cookies - allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance. This cookie category includes Google Analytics, which shares user-consented data with other Google services: Search, Shopping, Maps, Play, YouTube and Ads.
              </p>
            </div>
          </div>
          <button class="btn btn--gradient-small" type="submit" data-cookies-save-preferences-btn>Save preferences</button>
        </form>
      </div>
    </div>
  </div>
  {{ function('wp_footer') }}
</body>
</html>