{# Settings #}
{% set root = "../../../" %}
{% set mainNavActive_1 = "features-shortcode-blocks-footer-maps" %}
{% set sidebarNavActive_1 = "shortcode-blocks-footer-maps" %}
{% set title = "Footers Maps" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

{% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %}

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-block.njk" %}

    <section>
      <!-- Footer #01 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Footer
              <span class="g-color-primary g-ml-5">#01</span>
            </h2>
          </div>
        </div>

        <div id="shortcode1">
          <div class="shortcode-html">
            <!-- Footer -->
            <div class="g-pos-rel">
              <!-- Google Map -->
              <div id="gMap5" class="js-g-map g-min-height-70vh h-100"
                   data-type="custom"
                   data-lat="40.674"
                   data-lng="-73.946"
                   data-zoom="12"
                   data-title="Travel"
                   data-styles='[
                       ["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]],
                       ["", "labels", [{"visibility":"on"}]],
                       ["water", "", [{"color":"#bac6cb"}]]
                     ]'
                   data-pin="true"
                   data-pin-icon="{{ root }}assets/img/icons/pin/green.png">
              </div>
              <!-- End Google Map -->

              <!-- Footer Content -->
              <div class="g-absolute-centered--y g-right-0 g-width-600 g-px-30">
                <div class="row no-gutters">
                  <div class="col-sm g-bg-img-hero g-hidden-xs-down" style="background-image: url({{ root }}assets/img-temp/500x600/img4.jpg);"></div>

                  <div class="col-sm text-center g-bg-primary-opacity-0_9 g-color-white">
                    <address class="g-pa-60 mb-0">
                      <div class="g-mb-20">
                        <p class="text-uppercase g-font-size-12 g-mb-5">Address</p>
                        <strong>Orange California, US</strong>
                      </div>

                      <div class="g-mb-20">
                        <p class="text-uppercase g-font-size-12 g-mb-5">Phone number</p>
                        <strong>+1 800 123 3456</strong>
                      </div>

                      <div class="g-mb-20">
                        <p class="text-uppercase g-font-size-12 g-mb-5">Email</p>
                        <a class="g-color-white" href="mailto:info@unify.com"><strong>info@htmlstream.com</strong>
                        </a>
                      </div>

                      <div>
                        <p class="text-uppercase g-font-size-12 g-mb-5">Toll Free</p>
                        <strong>+1 (777) 123 3457</strong>
                      </div>
                    </address>
                  </div>
                </div>
              </div>
              <!-- End Footer Content -->
            </div>
            <!-- Footer -->

            <!-- Copyright -->
            <footer class="text-center g-pt-40 g-pb-30">
              <div class="container">
                <a class="d-block g-mb-30" href="index.html">
                  <img class="img-fluid" src="{{ root }}assets/img/logo/logo-7.png" alt="Logo">
                </a>

                <small class="d-block g-font-size-default">&copy; 2018 All right reserved. By the folks behind
                  <a class="g-color-primary g-color-primary--hover" href="#!">Htmlstream</a>
                </small>
              </div>
            </footer>
            <!-- End Copyright -->
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              // initialization of google map
              function initMap() {
                $.HSCore.components.HSGMap.init('.js-g-map');
              }
            </script>

            <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAtt1z99GtrHZt_IcnK-wryNsQ30A112J0&callback=initMap" async defer></script>
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode1" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Footer #01 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Footer #02 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Footer
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>
        </div>

        <div id="shortcode2">
          <div class="shortcode-html">
            <!-- Footer -->
            <footer class="container-fluid px-0">
              <div class="row no-gutters g-min-height-80vh">
                <!-- Footer Content -->
                <div class="col-lg d-flex g-bg-black-opacity-0_9 g-color-white-opacity-0_8">
                  <div class="align-self-center g-pa-60">
                    <div class="u-heading-v2-2--bottom g-brd-primary g-mb-30">
                      <h2 class="u-heading-v2__title h1 g-color-white text-uppercase g-font-weight-600">Get in touch</h2>
                    </div>

                    <div class="lead g-font-weight-400 g-mb-40">
                      <p>Aliquam dapibus quis sapien id pharetra. Vivamus iaculis est vitae libero tempus, in sollicitudin est consectetur porttitor iaculis pretium</p>
                    </div>

                    <address class="text-uppercase display-6">
                      <ul class="list-unstyled mb-0">
                        <li class="d-flex align-items-baseline g-mb-10">
                          <i class="fa fa-map-marker g-color-primary g-mr-10"></i>
                          <p>Address:
                            <span class="g-color-white">25, Lorem Lis Street, Orange California, US</span>
                          </p>
                        </li>
                        <li class="d-flex align-items-baseline g-mb-10">
                          <i class="fa fa-phone g-color-primary g-mr-10"></i>
                          <p>Phone Number:
                            <span class="g-color-white">800 123 3456</span>
                          </p>
                        </li>
                        <li class="d-flex align-items-baseline g-mb-10">
                          <i class="fa fa-envelope g-color-primary g-mr-10"></i>
                          <p>Email:
                            <a class="g-color-white" href="mailto:inof@htmlstream.com">inof@htmlstream.com</a>
                          </p>
                        </li>
                        <li class="d-flex align-items-baseline">
                          <i class="fa fa-phone-square g-color-primary g-mr-10"></i>
                          <p>Tall Free:
                            <span class="g-color-white">800 123 3456</span>
                          </p>
                        </li>
                      </ul>
                    </address>
                  </div>
                </div>
                <!-- End Footer Content -->

                <!-- Google Map -->
                <div class="col-lg g-min-height-400">
                  <div id="gMap4" class="js-g-map h-100"
                       data-type="custom"
                       data-lat="40.674"
                       data-lng="-73.946"
                       data-zoom="12"
                       data-title="Travel"
                       data-styles='[
                           ["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]],
                           ["", "labels", [{"visibility":"on"}]],
                           ["water", "", [{"color":"#bac6cb"}]]
                         ]'
                       data-pin="true"
                       data-pin-icon="{{ root }}assets/img/icons/pin/green.png">
                  </div>
                </div>
                <!-- End Google Map -->
              </div>
            </footer>
            <!-- Footer -->
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              // initialization of google map
              function initMap() {
                $.HSCore.components.HSGMap.init('.js-g-map');
              }
            </script>

            <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAtt1z99GtrHZt_IcnK-wryNsQ30A112J0&callback=initMap" async defer></script>
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode2" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Footer #02 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Footer #03 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Footer
              <span class="g-color-primary g-ml-5">#03</span>
            </h2>
          </div>
        </div>

        <div id="shortcode3">
          <div class="shortcode-html">
            <!-- Footer -->
            <div class="container-fluid text-center g-color-white-opacity-0_8 px-0">
              <div class="row no-gutters g-min-height-80vh">
                <!-- Google Map -->
                <div class="col-md-12 col-lg-4 g-min-height-400">
                  <div id="gMap1" class="js-g-map h-100"
                       data-type="custom"
                       data-lat="40.674"
                       data-lng="-73.946"
                       data-zoom="12"
                       data-title="Travel"
                       data-styles='[
                           ["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]],
                           ["", "labels", [{"visibility":"on"}]],
                           ["water", "", [{"color":"#bac6cb"}]]
                         ]'
                       data-pin="true"
                       data-pin-icon="{{ root }}assets/img/icons/pin/green.png">
                  </div>
                </div>
                <!-- End Google Map -->

                <!-- Footer Content -->
                <div class="col-md-6 col-lg-4 d-flex g-bg-primary g-pa-40">
                  <div class="align-self-center">
                    <header class="u-heading-v8-2 g-mb-40">
                      <h2 class="u-heading-v8__title g-color-white text-uppercase g-font-weight-700 g-mb-0">
                        <strong class="g-font-size-12 g-bg-black-opacity-0_9 g-mb-20">Our Contacts</strong>
                        <br>
                        <span class="g-color-black-opacity-0_9">Get in</span>
                        touch
                      </h2>
                    </header>

                    <div class="lead g-font-weight-400 g-mb-40">
                      <p>Aliquam dapibus quis sapien id pharetra. Vivamus iaculis est vitae libero tempus, in sollicitudin est consectetur porttitor iaculis pretium</p>
                    </div>

                    <address class="text-uppercase g-line-height-2 g-mb-40">
                      <p>Email:
                        <a class="g-color-white" href="mailto:marketing@unify.com">
                          <strong>info@htmlstream.com</strong></a>
                      </p>
                      <p>Phone number: <strong class="g-color-white">+48 555 2566 112</strong></p>
                      <p>Address: <strong class="g-color-white">In sed lectus tincidunt</strong></p>
                    </address>

                    <ul class="list-inline mb-0">
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-primary g-bg-white g-bg-black-opacity-0_9--hover" href="#!">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-primary g-bg-white g-bg-black-opacity-0_9--hover" href="#!">
                          <i class="fa fa-instagram"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-primary g-bg-white g-bg-black-opacity-0_9--hover" href="#!">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-primary g-bg-white g-bg-black-opacity-0_9--hover" href="#!">
                          <i class="fa fa-youtube"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- End Footer Content -->

                <!-- Footer Content -->
                <div class="col-md-6 col-lg-4 d-flex g-bg-black-opacity-0_9 g-pa-40">
                  <div class="align-self-center w-100">
                    <h2 class="g-color-white text-uppercase g-font-weight-700 g-mb-50"> Have a
                      <span class="g-color-primary">Question?</span>
                    </h2>

                    <form>
                      <div class="form-group g-mb-10">
                        <input class="form-control g-color-white g-bg-black-opacity-0_4 g-brd-black-opacity-0_4 g-brd-primary--focus rounded-0 g-pa-15" type="text" placeholder="Your name">
                      </div>
                      <div class="form-group g-mb-10">
                        <input class="form-control g-color-white g-bg-black-opacity-0_4 g-brd-black-opacity-0_4 g-brd-primary--focus rounded-0 g-pa-15" type="tel" placeholder="Your phone">
                      </div>
                      <div class="form-group g-mb-10">
                        <input class="form-control g-color-white g-bg-black-opacity-0_4 g-brd-black-opacity-0_4 g-brd-primary--focus rounded-0 g-pa-15" type="text" placeholder="Subject">
                      </div>
                      <div class="form-group g-mb-40">
                        <textarea class="form-control g-resize-none g-color-white g-bg-black-opacity-0_4 g-brd-black-opacity-0_4 g-brd-primary--focus rounded-0 g-pa-15" rows="5" placeholder="Message"></textarea>
                      </div>
                      <button class="btn btn-md u-btn-primary g-font-size-12 text-uppercase rounded-0 g-py-11 g-px-30" type="submit" role="button">Send Message</button>
                    </form>
                  </div>
                </div>
                <!-- End Footer Content -->
              </div>
            </div>
            <!-- Footer -->

            <!-- Copyright -->
            <footer class="text-center g-py-40">
              <div class="container">
                <div class="row">
                  <div class="col-md-6 text-md-left g-mb-20 g-mb-0--md">
                    <a href="index.html">
                      <img class="img-fluid" src="{{ root }}assets/img/logo/logo-7.png" alt="Logo">
                    </a>
                  </div>

                  <div class="col-md-6 align-self-center text-md-right">
                    <small class="g-font-size-default">&copy; 2018 All right reserved. By the folks behind
                      <a class="g-color-primary g-color-primary--hover" href="#!">Htmlstream</a>
                    </small>
                  </div>
                </div>
              </div>
            </footer>
            <!-- End Copyright -->
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              // initialization of google map
              function initMap() {
                $.HSCore.components.HSGMap.init('.js-g-map');
              }
            </script>

            <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAtt1z99GtrHZt_IcnK-wryNsQ30A112J0&callback=initMap" async defer></script>
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode3" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Footer #03 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Footer #04 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Footer
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>
        </div>

        <div id="shortcode4">
          <div class="shortcode-html">
            <!-- Footer Background -->
            <div class="u-bg-overlay text-center g-color-white g-bg-black-opacity-0_5--after g-bg-img-hero g-pt-100 g-pb-200" style="background-image: url({{ root }}assets/img-temp/1920x1080/img2.jpg);">
              <div class="container u-bg-overlay__inner">
                <div class="u-heading-v8-2 g-mb-30">
                  <h2 class="u-heading-v8__title text-uppercase g-font-weight-700 g-color-white">Contact
                    <span class="g-font-size-40">|</span>
                    <span class="g-color-primary">information</span>
                  </h2>
                </div>

                <div class="lead g-font-weight-400 g-width-80x--md mx-auto g-mb-60">
                  <p>Nam sed erat aliquet libero aliquet commodo. Donec euismod augue non quam finibus, nec iaculis tellus gravida. Integer efficitur eros ut dui laoreet, ut blandit turpis tincidunt.</p>
                </div>

                <address class="text-uppercase g-width-80x--md mx-auto g-mb-50">
                  <div class="row">
                    <div class="col-md-4 g-px-5 g-mb-20 g-mb-0--md">
                      <p>Email:
                        <a class="g-color-white" href="mailto:marketing@unify.com">
                          <strong>info@htmlstream.com</strong></a>
                      </p>
                    </div>

                    <div class="col-md-4 g-px-5 g-mb-20 g-mb-0--md">
                      <p>Phone number: <strong>+44 555 2566 112</strong></p>
                    </div>

                    <div class="col-md-4 g-px-5">
                      <p>Address: <strong>Orange California, US</strong></p>
                    </div>
                  </div>
                </address>
              </div>
            </div>
            <!-- End Footer Background -->

            <!-- Footer Map and Form -->
            <div class="container text-center g-color-white-opacity-0_8 g-mt-minus-200">
              <div class="row no-gutters g-min-height-60vh">
                <!-- Google Map -->
                <div class="col-lg-6 g-min-height-400">
                  <div id="gMap2" class="js-g-map h-100"
                       data-type="custom"
                       data-lat="40.674"
                       data-lng="-73.946"
                       data-zoom="12"
                       data-title="Travel"
                       data-styles='[
                           ["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]],
                           ["", "labels", [{"visibility":"on"}]],
                           ["water", "", [{"color":"#bac6cb"}]]
                         ]'
                       data-pin="true"
                       data-pin-icon="{{ root }}assets/img/icons/pin/green.png">
                  </div>
                </div>
                <!-- End Google Map -->

                <!-- Footer Content -->
                <div class="col-lg-6 d-flex g-bg-gray-dark-v1 g-pa-40">
                  <div class="align-self-center w-100">
                    <h2 class="g-color-white text-uppercase g-font-weight-700 g-mb-50"> Get in
                      <span class="g-color-primary">Touch</span>
                    </h2>

                    <form>
                      <div class="form-group g-mb-10">
                        <input class="form-control g-color-white g-bg-black-opacity-0_6 g-bg-black-opacity-0_4--focus g-brd-black-opacity-0_4 g-brd-primary--focus rounded-0 g-pa-15" type="tel" placeholder="Your Email">
                      </div>
                      <div class="form-group g-mb-10">
                        <input class="form-control g-color-white g-bg-black-opacity-0_6 g-bg-black-opacity-0_4--focus g-brd-black-opacity-0_4 g-brd-primary--focus rounded-0 g-pa-15" type="text" placeholder="Subject">
                      </div>
                      <div class="form-group g-mb-40">
                        <textarea class="form-control g-resize-none g-color-white g-bg-black-opacity-0_6 g-bg-black-opacity-0_4--focus g-brd-black-opacity-0_4 g-brd-primary--focus rounded-0 g-pa-15" rows="5" placeholder="Message"></textarea>
                      </div>
                      <button class="btn btn-md u-btn-primary g-font-size-12 text-uppercase rounded-0 g-py-11 g-px-30" type="submit" role="button">Send Message</button>
                    </form>
                  </div>
                </div>
                <!-- End Footer Content -->
              </div>
            </div>
            <!-- Footer Map and Form -->

            <!-- Copyright -->
            <footer class="text-center g-pt-60 g-pb-30">
              <div class="container">
                <a class="d-block g-mb-30" href="index.html">
                  <img class="img-fluid" src="{{ root }}assets/img/logo/logo-7.png" alt="Logo">
                </a>

                <small class="d-block g-font-size-default g-mb-20">&copy; 2018 All right reserved. By the folks behind
                  <a class="g-color-primary g-color-primary--hover" href="#!">Htmlstream</a>
                </small>

                <ul class="list-inline mb-0">
                  <li class="list-inline-item g-mx-5">
                    <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-primary g-color-white--hover g-bg-transparent g-bg-primary--hover" href="#!">
                      <i class="fa fa-facebook"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-5">
                    <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-primary g-color-white--hover g-bg-transparent g-bg-primary--hover" href="#!">
                      <i class="fa fa-instagram"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-5">
                    <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-primary g-color-white--hover g-bg-transparent g-bg-primary--hover" href="#!">
                      <i class="fa fa-twitter"></i>
                    </a>
                  </li>
                  <li class="list-inline-item g-mx-5">
                    <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-primary g-color-white--hover g-bg-transparent g-bg-primary--hover" href="#!">
                      <i class="fa fa-youtube"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </footer>
            <!-- End Copyright -->
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              // initialization of google map
              function initMap() {
                $.HSCore.components.HSGMap.init('.js-g-map');
              }
            </script>

            <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAtt1z99GtrHZt_IcnK-wryNsQ30A112J0&callback=initMap" async defer></script>
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode4" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Footer #04 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Footer #05 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Footer
              <span class="g-color-primary g-ml-5">#05</span>
            </h2>
          </div>
        </div>

        <div id="shortcode5">
          <div class="shortcode-html">
            <!-- Footer -->
            <div class="container-fluid text-center g-color-white px-0">
              <div class="row no-gutters g-min-height-70vh">
                <!-- Google Map -->
                <div class="col-md-12 col-lg-4 g-min-height-400">
                  <div id="gMap3" class="js-g-map h-100"
                       data-type="custom"
                       data-lat="40.674"
                       data-lng="-73.946"
                       data-zoom="12"
                       data-title="Travel"
                       data-styles='[
                           ["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]],
                           ["", "labels", [{"visibility":"on"}]],
                           ["water", "", [{"color":"#bac6cb"}]]
                         ]'
                       data-pin="true"
                       data-pin-icon="{{ root }}assets/img/icons/pin/green.png">
                  </div>
                </div>
                <!-- End Google Map -->

                <!-- Footer Content -->
                <div class="col-lg-8 g-bg-img-hero" style="background-image: url({{ root }}assets/img-temp/1920x800/img4.jpg);">
                  <div class="row h-100 mx-0">
                    <div class="col-lg-7 d-flex g-bg-primary-opacity-0_9 g-pa-40">
                      <div class="align-self-center w-100">
                        <header class="u-heading-v7-3 g-mb-50">
                          <h2 class="u-heading-v7__title display-5 g-font-weight-400 g-mb-20">Contact Us</h2>
                          <div class="u-heading-v7-divider g-height-20 g-mb-10">
                            <i class="fa fa-star u-heading-v7-divider__icon g-font-size-70x"></i>
                            <i class="fa fa-star u-heading-v7-divider__icon g-font-size-95x"></i>
                            <i class="fa fa-star u-heading-v7-divider__icon"></i>
                            <i class="fa fa-star u-heading-v7-divider__icon g-font-size-95x"></i>
                            <i class="fa fa-star u-heading-v7-divider__icon g-font-size-70x"></i>
                          </div>
                        </header>

                        <address class="text-uppercase">
                          <div class="g-mb-30">
                            <p class="g-mb-5">Address</p>
                            <strong>Orange California, US</strong>
                          </div>

                          <div class="g-mb-30">
                            <p class="g-mb-5">Phone number</p>
                            <strong>+4586 585 4580</strong>
                          </div>

                          <div class="g-mb-30">
                            <p class="g-mb-5">Email</p>
                            <a class="g-color-white" href="mailto:info@unify.com">
                              <strong>info@htmlstream.com</strong></a>
                          </div>

                          <div>
                            <p class="g-mb-5">Toll Free</p>
                            <strong>+4416 581 2340</strong>
                          </div>
                        </address>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Footer Content -->
              </div>

              <!-- Instagram Images -->
              <div class="d-flex">
                <a class="g-pos-rel g-color-white" href="#!">
                  <figure class="u-bg-overlay g-bg-primary-opacity-0_8--after">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/230x230/img1.jpg" alt="Image description">
                  </figure>
                  <div class="text-center g-absolute-centered g-px-20">
                    <h6 class="h5 g-color-white-opacity-0_8 g-mb-5">Follow Us On</h6>
                    <h5 class="h3 mb-0">Instagram</h5>
                  </div>
                </a>
                <a href="#!">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/230x230/img2.jpg" alt="Image description">
                </a>
                <a href="#!">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/230x230/img3.jpg" alt="Image description">
                </a>
                <a class="g-hidden-sm-down" href="#!">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/230x230/img4.jpg" alt="Image description">
                </a>
                <a class="g-hidden-sm-down" href="#!">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/230x230/img5.jpg" alt="Image description">
                </a>
                <a class="g-hidden-md-down" href="#!">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/230x230/img6.jpg" alt="Image description">
                </a>
                <a class="g-hidden-lg-down" href="#!">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/230x230/img7.jpg" alt="Image description">
                </a>
                <a class="g-hidden-lg-down" href="#!">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/230x230/img8.jpg" alt="Image description">
                </a>
              </div>
              <!-- End Instagram Images -->
            </div>
            <!-- Footer -->

            <!-- Copyright -->
            <footer class="text-center g-py-40">
              <div class="container-fluid">
                <div class="row">
                  <!-- Footer Logo -->
                  <div class="col-md-4 order-md-2 g-mb-20 g-mb-0--md">
                    <a href="index.html">
                      <img class="img-fluid" src="{{ root }}assets/img/logo/logo-7.png" alt="Logo">
                    </a>
                  </div>
                  <!-- End Footer Logo -->

                  <!-- Copyright Info -->
                  <div class="col-md-4 order-md-1 align-self-center text-md-left g-mb-20 g-mb-0--md">
                    <small class="g-font-size-default">&copy; 2018 All right reserved. By the folks behind
                      <a class="g-color-primary g-color-primary--hover" href="#!">Htmlstream</a>
                    </small>
                  </div>
                  <!-- End Copyright Info -->

                  <!-- Socal Links -->
                  <div class="col-md-4 order-md-3 align-self-center text-md-right">
                    <ul class="list-inline mb-0">
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-black-opacity-0_3 g-color-white--hover g-bg-gray-light-v5 g-bg-primary--hover rounded-circle" href="#!">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-black-opacity-0_3 g-color-white--hover g-bg-gray-light-v5 g-bg-primary--hover rounded-circle" href="#!">
                          <i class="fa fa-instagram"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-black-opacity-0_3 g-color-white--hover g-bg-gray-light-v5 g-bg-primary--hover rounded-circle" href="#!">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-5">
                        <a class="u-icon-v3 u-icon-size--sm g-font-size-default g-color-black-opacity-0_3 g-color-white--hover g-bg-gray-light-v5 g-bg-primary--hover rounded-circle" href="#!">
                          <i class="fa fa-youtube"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Socal Links -->
                </div>
              </div>
            </footer>
            <!-- End Copyright -->
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              // initialization of google map
              function initMap() {
                $.HSCore.components.HSGMap.init('.js-g-map');
              }
            </script>

            <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAtt1z99GtrHZt_IcnK-wryNsQ30A112J0&callback=initMap" async defer></script>
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode5" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Footer #05 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #06 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#06</span>
            </h2>
          </div>
        </div>

        <div id="shortcode6">
          <div class="shortcode-html">
            <!-- Contact Info -->
            <div class="g-bg-black-opacity-0_9 g-color-white text-center g-py-100">
              <div class="container">
                <header class="u-heading-v8-2 text-center g-width-70x--md mx-auto g-mb-80">
                  <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-mb-25">Contact us</h2>
                  <p class="lead mb-0">We do things differently company providing key digital services. Focused on helping our clients to build a successful business on web and mobile.</p>
                </header>

                <address class="row g-color-white-opacity-0_8 mb-0">
                  <div class="col-sm-6 col-md-3 g-brd-right--md g-brd-white-opacity-0_3 g-mb-60 g-mb-0--md">
                    <i class="icon-line icon-map d-inline-block display-5 g-color-primary g-mb-25"></i>
                    <h4 class="small text-uppercase g-mb-5">Address</h4>
                    <strong>Orange California, US</strong>
                  </div>

                  <div class="col-sm-6 col-md-3 g-brd-right--md g-brd-white-opacity-0_3 g-mb-60 g-mb-0--md">
                    <i class="icon-call-in d-inline-block display-5 g-color-primary g-mb-25"></i>
                    <h4 class="small text-uppercase g-mb-5">Phone number</h4>
                    <strong>+1 555 2342 111</strong>
                  </div>

                  <div class="col-sm-6 col-md-3 g-brd-right--md g-brd-white-opacity-0_3 g-mb-60 g-mb-0--md">
                    <i class="icon-envelope d-inline-block display-5 g-color-primary g-mb-25"></i>
                    <h4 class="small text-uppercase g-mb-5">Email</h4>
                    <a class="g-color-white-opacity-0_8" href="mailto:hello@unify-gym.com">
                      <strong>info@htmlstream.com</strong></a>
                  </div>

                  <div class="col-sm-6 col-md-3">
                    <i class="icon-earphones-alt d-inline-block display-5 g-color-primary g-mb-25"></i>
                    <h4 class="small text-uppercase g-mb-5">Toll free</h4>
                    <strong>100 302 2302</strong>
                  </div>
                </address>
              </div>
            </div>
            <!-- End Contact Info -->

            <!-- Social Links -->
            <ul class="row no-gutters list-inline g-mb-0">
              <li class="col list-inline-item g-mr-0">
                <a class="d-block g-bg-primary-dark-v1 g-color-white-opacity-0_8 g-bg-twitter--hover g-color-white--hover g-font-size-16 text-center g-transition-0_2 g-pa-15" href="#!">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li class="col list-inline-item g-mr-0">
                <a class="d-block g-bg-primary-dark-v2 g-color-white-opacity-0_8 g-bg-linkedin--hover g-color-white--hover g-font-size-16 text-center g-transition-0_2 g-pa-15" href="#!">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
              <li class="col list-inline-item g-mr-0">
                <a class="d-block g-bg-primary-dark-v1 g-color-white-opacity-0_8 g-bg-facebook--hover g-color-white--hover g-font-size-16 text-center g-transition-0_2 g-pa-15" href="#!">
                  <i class="fa fa-facebook"></i>
                </a>
              </li>
              <li class="col list-inline-item g-mr-0">
                <a class="d-block g-bg-primary-dark-v2 g-color-white-opacity-0_8 g-bg-instagram--hover g-color-white--hover g-font-size-16 text-center g-transition-0_2 g-pa-15" href="#!">
                  <i class="fa fa-instagram"></i>
                </a>
              </li>
              <li class="col list-inline-item">
                <a class="d-block g-bg-primary-dark-v1 g-color-white-opacity-0_8 g-bg-dribbble--hover g-color-white--hover g-font-size-16 text-center g-transition-0_2 g-pa-15" href="#!">
                  <i class="fa fa-dribbble"></i>
                </a>
              </li>
            </ul>
            <!-- End Social Links -->

            <!-- Google Map -->
            <div id="gMap6" class="js-g-map g-min-height-60vh h-100"
                 data-type="custom"
                 data-lat="40.674"
                 data-lng="-73.946"
                 data-zoom="12"
                 data-title="Travel"
                 data-styles='[
                     ["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]],
                     ["", "labels", [{"visibility":"on"}]],
                     ["water", "", [{"color":"#bac6cb"}]]
                   ]'
                 data-pin="true"
                 data-pin-icon="{{ root }}assets/img/icons/pin/green.png">
            </div>
            <!-- End Google Map -->

            <!-- Copyright and Subscribe -->
            <footer class="text-center g-pt-40 g-pb-30">
              <div class="container">
                <form>
                  <div class="form-group g-width-60x--md mx-auto g-mb-20">
                    <label class="h5 text-uppercase g-mb-20">Subscribe on Our Offers</label>
                    <div class="input-group g-pos-rel">
                      <input class="form-control form-control-md g-brd-gray-light-v2 g-brd-primary--focus rounded-0 g-pr-40" type="text" placeholder="Your Email">
                      <div class="input-group-addon d-flex align-items-center h-100 g-pos-abs g-top-0 g-right-0 g-bg-transparent g-color-gray-light-v2 g-bg-white rounded-0">
                        <i class="icon-envelope"></i>
                      </div>
                    </div>
                  </div>
                </form>

                <small class="d-block g-font-size-default">&copy; 2018 All right reserved. By the folks behind
                  <a class="g-color-primary g-color-primary--hover" href="#!">Htmlstream</a>
                </small>
              </div>
            </footer>
            <!-- End Copyright and Subscribe -->
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/helpers/hs.focus-state.js"></script>
            <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              // initialization of google map
              function initMap() {
                $.HSCore.components.HSGMap.init('.js-g-map');
              }

              $(document).on('ready', function () {
                // initialization of forms
                $.HSCore.helpers.HSFocusState.init();
              });
            </script>

            <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAtt1z99GtrHZt_IcnK-wryNsQ30A112J0&callback=initMap" async defer></script>
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode6" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Contact Forms #06 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #07 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#07</span>
            </h2>
          </div>
        </div>

        <div id="shortcode7">
          <div class="shortcode-html">
            <!-- Footer Info -->
            <div class="container g-mb-60">
              <header class="u-heading-v8-2 text-center g-width-70x--md mx-auto g-mb-80">
                <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-mb-25">Contact us</h2>
                <p class="lead mb-0">We do things differently company providing key digital services. Focused on helping our clients to build a successful business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-md-5">
                  <div class="u-heading-v2-2--bottom g-brd-gray-dark-v2 g-mb-15">
                    <h2 class="u-heading-v2__title g-font-size-12 text-uppercase g-font-weight-600 g-color-gray-dark-v2 g-mb-minus-10">Contact us</h2>
                  </div>

                  <p class="text-uppercase g-letter-spacing-1_5 g-font-weight-600 g-mb-40">Wertdf sdfgsga etgr et accusamus</p>

                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x300/img2.jpg" alt="Image description">
                </div>

                <div class="col-md-6">
                  <div class="lead g-mb-40">
                    <p>Want to get more information? Contact us by using the form or call directly for more info.</p>
                  </div>

                  <address class="text-uppercase mb-0">
                    <div class="d-flex g-mb-20">
                      <div class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-gray-dark-v2 g-color-white-opacity-0_8 rounded-circle g-mr-15">
                        <i class="icon-user"></i>
                      </div>
                      <div class="align-self-center g-font-weight-600 g-font-size-12">
                        Address:
                        <br>
                        <strong class="g-color-gray-dark-v2">Orange California, US </strong>
                      </div>
                    </div>

                    <div class="d-flex g-mb-20">
                      <div class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-gray-dark-v2 g-color-white-opacity-0_8 rounded-circle g-mr-15">
                        <i class="icon-speech"></i>
                      </div>
                      <div class="align-self-center g-font-weight-600 g-font-size-12">
                        Email:
                        <br>
                        <a class="g-color-gray-dark-v2 g-color-gray-dark-v2--hover" href="mailto:marketing@unify.com">
                          <strong>info@htmlstream.com</strong></a>
                      </div>
                    </div>

                    <div class="d-flex">
                      <div class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-gray-dark-v2 g-color-white-opacity-0_8 rounded-circle g-mr-15">
                        <i class="icon-screen-smartphone"></i>
                      </div>
                      <div class="align-self-center g-font-weight-600 g-font-size-12">
                        Phone number:
                        <br>
                        <strong class="g-color-gray-dark-v2">+1 555 2566 112</strong>
                      </div>
                    </div>
                  </address>
                </div>
              </div>
            </div>
            <!-- End Footer Info -->

            <!-- Google Map -->
            <div id="gMap7" class="js-g-map g-min-height-60vh h-100"
                 data-type="custom"
                 data-lat="40.674"
                 data-lng="-73.946"
                 data-zoom="12"
                 data-title="Travel"
                 data-styles='[
                     ["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]],
                     ["", "labels", [{"visibility":"on"}]],
                     ["water", "", [{"color":"#bac6cb"}]]
                   ]'
                 data-pin="true"
                 data-pin-icon="{{ root }}assets/img/icons/pin/green.png">
            </div>
            <!-- End Google Map -->

            <!-- Footer -->
            <footer class="text-center g-pt-40 g-pb-30">
              <div class="container">
                <a class="d-block g-mb-30" href="index.html">
                  <img class="img-fluid" src="{{ root }}assets/img/logo/logo-7.png" alt="Logo">
                </a>

                <small class="d-block g-font-size-default">&copy; 2018 All right reserved. By the folks behind
                  <a class="g-color-primary g-color-primary--hover" href="#!">Htmlstream</a>
                </small>
              </div>
            </footer>
            <!-- End Footer -->
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script type="text/plain" src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/gmap/hs.map.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              // initialization of google map
              function initMap() {
                $.HSCore.components.HSGMap.init('.js-g-map');
              }
            </script>

            <script type="text/plain" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAtt1z99GtrHZt_IcnK-wryNsQ30A112J0&callback=initMap" async defer></script>
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode7" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Contact Forms #07 -->
    </section>

    {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
  </main>

  {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

  {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
  <script src="{{ root }}assets/vendor/gmaps/gmaps.min.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}

  <!-- jQuery UI Helpers -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>

  <!-- jQuery UI Widgets -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>
  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.header-side.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.focus-state.js"></script>
  <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
  <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>
  <script src="{{ root }}assets/js/components/gmap/hs.map.js"></script>
  <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}

  <!-- JS Custom -->
  <script src="{{ root }}assets/js/custom.js"></script>

  <!-- JS Plugins Init. -->
  <script>
    // initialization of google map
    function initMap() {
      $.HSCore.components.HSGMap.init('.js-g-map');
    }

    $(document).on('ready', function () {
      // initialization of forms
      $.HSCore.helpers.HSFocusState.init();

      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');
    });

    $(window).on('load', function () {
      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

      // initialization of header
      $.HSCore.components.HSHeader.init($('#js-header'));
      $.HSCore.helpers.HSHamburgers.init('.hamburger');
      $.HSCore.components.HSHeaderSide.init($('#sideNav'));

      // initialization of HSMegaMenu component
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>

  <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAtt1z99GtrHZt_IcnK-wryNsQ30A112J0&callback=initMap" async defer></script>
</body>
</html>
