<div class="services-map__container" id="servicesMapContainer">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-md-3 col-lg-2 col-sm-offset-0">
        <a href="./" class="tana-logo-alternate">
          <img class="img-responsive" src="./assets/images/tana-logo-alternate.png" alt="Tana logotip">
        </a>
      </div>
    </div>
  </div>
  <div class="visible-xs services-map__map-mobile">
    <img src="./assets/images/services-map-mobile.png" alt="Karta regije" class="img-responsive">
  </div>
  <div class="container">
    <div class="row hidden-xs">
      <div class="col-xs-12">
        <figure id="servicesMap" class="services-map__map-desktop">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2240 1263"
            preserveAspectRatio="xMinYMin meet">
            <image width="2220" height="1263" xlink:href="./assets/images/services-map.png">
            </image>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Slovenia" xlink:href="#slovenia">
              <text class="services-map__link-text" x="385" y="460">Slovenia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Croatia" xlink:href="#croatia">
              <text class="services-map__link-text" x="420" y="565">Croatia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Bosnia-Herzegovina" xlink:href="#bosnia-herzegovina">
              <text class="services-map__link-text" x="0" y="670">Bosnia-Herzegovina</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Montenegro" xlink:href="#montenegro">
              <text class="services-map__link-text" x="250" y="780">Montenegro</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Serbia" xlink:href="#serbia">
              <text class="services-map__link-text" x="1880" y="625">Serbia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Kosovo" xlink:href="#kosovo">
              <text class="services-map__link-text" x="1880" y="730">Kosovo</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Macedonia" xlink:href="#macedonia">
              <text class="services-map__link-text" x="1880" y="840">Macedonia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Albania" xlink:href="#albania">
              <text class="services-map__link-text" x="1880" y="940">Albania</text>
            </a>
          </svg>
        </figure>
      </div>
    </div>
    <div class="row visible-xs">
      <div class="col-xs-12">
        <ul class="list list--unstyled services-map__list">
          <li class="services-map__list-item">
            <a href="#slovenia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Slovenia">Slovenia</a>
          </li>
          <li class="services-map__list-item" data-name="Croatia">
            <a href="#croatia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Croatia">Croatia</a>
          </li>
          <li class="services-map__list-item" data-name="Bosnia-Herzegovina">
            <a href="#bosnia-herzegovina" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Bosnia-Herzegovina">Bosnia-Herzegovina</a>
          </li>
          <li class="services-map__list-item" data-name="Montenegro">
            <a href="#montenegro" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Montenegro">Montenegro</a>
          </li>
          <li class="services-map__list-item" data-name="Serbia">
            <a href="#serbia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Serbia">Serbia</a>
          </li>
          <li class="services-map__list-item" data-name="Kosovo">
            <a href="#kosovo" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Kosovo">Kosovo</a>
          </li>
          <li class="services-map__list-item" data-name="Macedonia">
            <a href="#macedonia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Macedonia">Macedonia</a>
          </li>
          <li class="services-map__list-item" data-name="Albania">
            <a href="#albania" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Albania">Albania</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="services">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-lg-1-5">
        <div class="service faded">
          <h3 class="service__title">Patents</h3>
          <p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
            erat ut turpis.</p>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-1-5">
        <div class="service faded">
          <h3 class="service__title">Trade marks</h3>
          <p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
            erat ut turpis.</p>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-1-5">
        <div class="service faded">
          <h3 class="service__title">Designs</h3>
          <p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
            erat ut turpis.</p>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-1-5">
        <div class="service faded">
          <h3 class="service__title">Copyright</h3>
          <p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
            erat ut turpis.</p>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-1-5">
        <div class="service faded">
          <h3 class="service__title">Litigation</h3>
          <p class="service__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
            erat ut turpis.</p>
        </div>
      </div>
    </div>
  </div>
</div>