Country Select

v0.0.0

The Country Select combines the following components:

These components make up country switch and work in close conjunction.

Select your country website

Provide instructions to inform users what to do when the IP they connect from, is not from a country with a country site.

North America

United States
Canada

International Markets

Europe

Austria
Belgium
Bosnia And Herzegovina
Bulgaria
Croatia
Czech Republic
Denmark
Estonia
Finland
France
Germany
Greece
Hungary
Iceland
Ireland
Italy
Latvia
Lithuania
Macedonia
Monaco
Netherlands
Norway
Poland
Portugal
Romania
Serbia
Slovakia
Spain
Sweden
Switzerland
United Kingdom

United States
Canada

Austria
Belgium
Bosnia And Herzegovina
Bulgaria
Croatia
Czech Republic
Denmark
Estonia
Finland
France
Germany
Greece
Hungary
Iceland
Ireland
Italy
Latvia
Lithuania
Macedonia
Monaco
Netherlands
Norway
Poland
Portugal
Romania
Serbia
Slovakia
Spain
Sweden
Switzerland
United Kingdom

<!-- contained within: -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Country Select Layout  -->
  <div class="vi-country-select-layout">
    <div class="vi-country-select-layout__section--title">
      <!-- Use h1-h6 depending page hierarchy -->
      <h1 class="vi-country-select-layout__title">Select your country website</h1>
    </div>
    <div class="vi-country-select-layout__section--lookup">
      <!-- Country Select Lookup  -->
      <div class="vi-country-select-lookup vi-typesystem" data-countries='[{"cc":"US","name":"United States","url":"#url-to-US","flag":"/assets/images/flags/square/us_80x80.png"},{"cc":"CA","name":"Canada","url":"#url-to-CA","flag":"/assets/images/flags/square/ca_80x80.png"},{"cc":"AR","name":"Argentina","url":"#url-to-AR","flag":"/assets/images/flags/square/ar_80x80.png"},{"cc":"AZ","name":"Azerbaijan","url":"#url-to-AZ","flag":"/assets/images/flags/square/az_80x80.png"},{"cc":"AU","name":"Australia","url":"#url-to-AU","flag":"/assets/images/flags/square/au_80x80.png"},{"cc":"BY","name":"Belarus","url":"#url-to-BY","flag":"/assets/images/flags/square/by_80x80.png"},{"cc":"BR","name":"Brazil","url":"#url-to-BR","flag":"/assets/images/flags/square/br_80x80.png"},{"cc":"CL","name":"Chile","url":"#url-to-CL","flag":"/assets/images/flags/square/cl_80x80.png"},{"cc":"CN","name":"China","url":"#url-to-CN","flag":"/assets/images/flags/square/cn_80x80.png"},{"cc":"IN","name":"India","url":"#url-to-IN","flag":"/assets/images/flags/square/in_80x80.png"},{"cc":"IL","name":"Israel","url":"#url-to-IL","flag":"/assets/images/flags/square/il_80x80.png"},{"cc":"JP","name":"Japan","url":"#url-to-JP","flag":"/assets/images/flags/square/jp_80x80.png"},{"cc":"KZ","name":"Kazakstan","url":"#url-to-KZ","flag":"/assets/images/flags/square/kz_80x80.png"},{"cc":"KG","name":"Kyrgyzstan","url":"#url-to-KG","flag":"/assets/images/flags/square/kg_80x80.png"},{"cc":"MX","name":"Mexico","url":"#url-to-MX","flag":"/assets/images/flags/square/mx_80x80.png"},{"cc":"PE","name":"Peru","url":"#url-to-PE","flag":"/assets/images/flags/square/pe_80x80.png"},{"cc":"RU","name":"Russian Federation","url":"#url-to-RU","flag":"/assets/images/flags/square/ru_80x80.png"},{"cc":"SG","name":"Singapore","url":"#url-to-SG","flag":"/assets/images/flags/square/sg_80x80.png"},{"cc":"ZA","name":"South Africa","url":"#url-to-ZA","flag":"/assets/images/flags/square/za_80x80.png"},{"cc":"KR","name":"Korea","url":"#url-to-KR","flag":"/assets/images/flags/square/kr_80x80.png"},{"cc":"TH","name":"Thailand","url":"#url-to-TH","flag":"/assets/images/flags/square/th_80x80.png"},{"cc":"TR","name":"Turkey","url":"#url-to-TR","flag":"/assets/images/flags/square/tr_80x80.png"},{"cc":"UA","name":"Ukraine","url":"#url-to-UA","flag":"/assets/images/flags/square/ua_80x80.png"},{"cc":"UY","name":"Uruguay","url":"#url-to-UY","flag":"/assets/images/flags/square/uy_80x80.png"},{"cc":"UZ","name":"Uzbekistan","url":"#url-to-UZ","flag":"/assets/images/flags/square/uz_80x80.png"},{"cc":"AT","name":"Austria","url":"#url-to-AT","flag":"/assets/images/flags/square/at_80x80.png"},{"cc":"BE","name":"Belgium","url":"#url-to-BE","flag":"/assets/images/flags/square/be_80x80.png"},{"cc":"BA","name":"Bosnia And Herzegovina","url":"#url-to-BA","flag":"/assets/images/flags/square/ba_80x80.png"},{"cc":"BG","name":"Bulgaria","url":"#url-to-BG","flag":"/assets/images/flags/square/bg_80x80.png"},{"cc":"HR","name":"Croatia","url":"#url-to-HR","flag":"/assets/images/flags/square/hr_80x80.png"},{"cc":"CZ","name":"Czech Republic","url":"#url-to-CZ","flag":"/assets/images/flags/square/cz_80x80.png"},{"cc":"DK","name":"Denmark","url":"#url-to-DK","flag":"/assets/images/flags/square/dk_80x80.png"},{"cc":"EE","name":"Estonia","url":"#url-to-EE","flag":"/assets/images/flags/square/ee_80x80.png"},{"cc":"FI","name":"Finland","url":"#url-to-FI","flag":"/assets/images/flags/square/fi_80x80.png"},{"cc":"FR","name":"France","url":"#url-to-FR","flag":"/assets/images/flags/square/fr_80x80.png"},{"cc":"DE","name":"Germany","url":"#url-to-DE","flag":"/assets/images/flags/square/de_80x80.png"},{"cc":"GR","name":"Greece","url":"#url-to-GR","flag":"/assets/images/flags/square/gr_80x80.png"},{"cc":"HU","name":"Hungary","url":"#url-to-HU","flag":"/assets/images/flags/square/hu_80x80.png"},{"cc":"IS","name":"Iceland","url":"#url-to-IS","flag":"/assets/images/flags/square/is_80x80.png"},{"cc":"IE","name":"Ireland","url":"#url-to-IE","flag":"/assets/images/flags/square/ie_80x80.png"},{"cc":"IT","name":"Italy","url":"#url-to-IT","flag":"/assets/images/flags/square/it_80x80.png"},{"cc":"LV","name":"Latvia","url":"#url-to-LV","flag":"/assets/images/flags/square/lv_80x80.png"},{"cc":"LT","name":"Lithuania","url":"#url-to-LT","flag":"/assets/images/flags/square/lt_80x80.png"},{"cc":"MK","name":"Macedonia","url":"#url-to-MK","flag":"/assets/images/flags/square/mk_80x80.png"},{"cc":"MC","name":"Monaco","url":"#url-to-MC","flag":"/assets/images/flags/square/mc_80x80.png"},{"cc":"NL","name":"Netherlands","url":"#url-to-NL","flag":"/assets/images/flags/square/nl_80x80.png"},{"cc":"NO","name":"Norway","url":"#url-to-NO","flag":"/assets/images/flags/square/no_80x80.png"},{"cc":"PL","name":"Poland","url":"#url-to-PL","flag":"/assets/images/flags/square/pl_80x80.png"},{"cc":"PT","name":"Portugal","url":"#url-to-PT","flag":"/assets/images/flags/square/pt_80x80.png"},{"cc":"RO","name":"Romania","url":"#url-to-RO","flag":"/assets/images/flags/square/ro_80x80.png"},{"cc":"RS","name":"Serbia","url":"#url-to-RS","flag":"/assets/images/flags/square/rs_80x80.png"},{"cc":"SK","name":"Slovakia","url":"#url-to-SK","flag":"/assets/images/flags/square/sk_80x80.png"},{"cc":"ES","name":"Spain","url":"#url-to-ES","flag":"/assets/images/flags/square/es_80x80.png"},{"cc":"SE","name":"Sweden","url":"#url-to-SE","flag":"/assets/images/flags/square/se_80x80.png"},{"cc":"CH","name":"Switzerland","url":"#url-to-CH","flag":"/assets/images/flags/square/ch_80x80.png"},{"cc":"GB","name":"United Kingdom","url":"#url-to-GB","flag":"/assets/images/flags/square/gb_80x80.png"}]' data-ipstack-key="6751675a13e2f097805aa47e57aa73bf">
        <!-- Content Layout  -->
        <div class="vi-content-layout">
          <div class="vi-content-layout__main">
            <div class="vi-typesystem vi-typesystem--content vi-typesystem--collapse-last">
              <!-- WYSIWYG -->
              <p>Provide instructions to <a href="#sample">inform users</a> what to do when
                the IP they connect from, is not from a country with a country site.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-country-select-layout__section--countries">
      <div class="vi-country-select-countries">
        <!-- Utility classes for hiding and showing -->
        <div class="d-none d-xl-block">
          <div class="vi-grid">
            <div class="vi-grid__row vi-grid__row--vgap-30">
              <div class="col-lg-4 col-xxl-2">
                <!-- Use h1-h6 depending page hierarchy -->
                <h2 class="vi-country-select-countries__title">North America</h2>
                <ul class="vi-country-select-countries__list vi-country-select-countries__list--north-america-expanded">
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#us-08b4a5" hreflang="us">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/us_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">United States</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#ca-56c331" hreflang="ca">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ca_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Canada</div>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="col-lg-8 col-xxl-4">
                <!-- Use h1-h6 depending page hierarchy -->
                <h2 class="vi-country-select-countries__title">International Markets</h2>
                <ul class="vi-country-select-countries__list vi-country-select-countries__list--international-expanded">
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#ar-9e12ad" hreflang="ar">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ar_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Argentina</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#az-eea408" hreflang="az">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/az_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Azerbaijan</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#au-0e4b57" hreflang="au">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/au_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Australia</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#by-517c73" hreflang="by">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/by_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Belarus</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#br-19b00e" hreflang="br">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/br_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Brazil</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#cl-cc5cc6" hreflang="cl">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cl_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Chile</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#cn-b1dc2d" hreflang="cn">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cn_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">China</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#in-a29313" hreflang="in">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/in_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">India</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#il-58426a" hreflang="il">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/il_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Israel</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#jp-ccdec6" hreflang="jp">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/jp_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Japan</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#kz-5c9a80" hreflang="kz">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kz_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Kazakstan</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#kg-e0c727" hreflang="kg">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kg_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Kyrgyzstan</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#mx-37d9e7" hreflang="mx">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mx_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Mexico</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#pe-eeaa0e" hreflang="pe">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pe_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Peru</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#ru-86a514" hreflang="ru">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ru_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Russian Federation</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#sg-b7098b" hreflang="sg">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/sg_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Singapore</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#za-309dd2" hreflang="za">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/za_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">South Africa</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#kr-2b5d7e" hreflang="kr">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kr_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Korea</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#th-c1ad77" hreflang="th">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/th_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Thailand</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#tr-2452bb" hreflang="tr">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/tr_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Turkey</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#ua-1a1a72" hreflang="ua">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ua_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Ukraine</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#uy-497b3c" hreflang="uy">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/uy_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Uruguay</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#uz-6aace6" hreflang="uz">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/uz_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Uzbekistan</div>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="col-lg-12 col-xxl-6">
                <!-- Use h1-h6 depending page hierarchy -->
                <h2 class="vi-country-select-countries__title">Europe</h2>
                <ul class="vi-country-select-countries__list vi-country-select-countries__list--europe-expanded">
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#at-2b199d" hreflang="at">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/at_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Austria</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#be-a643db" hreflang="be">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/be_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Belgium</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#ba-92998c" hreflang="ba">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ba_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Bosnia And Herzegovina</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#bg-21e33b" hreflang="bg">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/bg_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Bulgaria</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#hr-0141e1" hreflang="hr">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/hr_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Croatia</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#cz-76ca6b" hreflang="cz">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cz_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Czech Republic</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#dk-ac850c" hreflang="dk">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/dk_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Denmark</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#ee-0e6700" hreflang="ee">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ee_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Estonia</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#fi-c1ddcc" hreflang="fi">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/fi_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Finland</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#fr-97083e" hreflang="fr">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/fr_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">France</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#de-97e226" hreflang="de">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/de_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Germany</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#gr-e8066e" hreflang="gr">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/gr_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Greece</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#hu-eb0d25" hreflang="hu">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/hu_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Hungary</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#is-a03d10" hreflang="is">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/is_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Iceland</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#ie-0d67b2" hreflang="ie">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ie_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Ireland</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#it-429d6d" hreflang="it">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/it_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Italy</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#lv-7aacca" hreflang="lv">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/lv_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Latvia</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#lt-26447c" hreflang="lt">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/lt_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Lithuania</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#mk-59c91a" hreflang="mk">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mk_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Macedonia</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#mc-7ab746" hreflang="mc">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mc_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Monaco</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#nl-c3d9c9" hreflang="nl">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/nl_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Netherlands</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#no-560009" hreflang="no">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/no_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Norway</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#pl-4850e1" hreflang="pl">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pl_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Poland</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#pt-360a64" hreflang="pt">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pt_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Portugal</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#ro-874e6a" hreflang="ro">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ro_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Romania</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#rs-692865" hreflang="rs">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/rs_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Serbia</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#sk-35d046" hreflang="sk">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/sk_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Slovakia</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#es-e65a08" hreflang="es">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/es_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Spain</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#se-a38495" hreflang="se">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/se_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Sweden</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#ch-33ed94" hreflang="ch">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ch_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">Switzerland</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="vi-country-select-countries__item">
                    <!-- Country Select Link  -->
                    <a class="vi-country-select-link" href="#gb-a1e335" hreflang="gb">
                      <!-- Media object (mods: --gap-10) -->
                      <div class="vi-media-object vi-media-object--gap-10">
                        <!-- Media object figure with (mods: --w-20) -->
                        <div class="vi-media-object__figure vi-media-object__figure--w-20">
                          <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/gb_80x80.png"></div>
                        </div>
                        <div class="align-self-center vi-media-object__body">
                          <div class="vi-country-select-link__label">United Kingdom</div>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="d-block d-xl-none">
          <!-- Accordion type: refine -->
          <div class="vi-accordion-refine vi-accordion" data-autoclose="false">
            <div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-e30e2c">
              <div class="vi-accordion-refine__header vi-accordion__header">
                <!-- Use h1-h6 depending page hierarchy -->
                <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-ded776">North America</h4>
                <a aria-controls="region-b86b14" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-e30e2c" role="button">
                  <!-- Button type: generic  -->
                  <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
                      North America</span></div>
                </a>
              </div>
              <div aria-labelledby="heading-ded776" class="vi-accordion-refine__main vi-accordion__main" id="region-b86b14" role="region">
                <div class="vi-accordion-refine__content vi-accordion__content">
                  <ul class="vi-country-select-countries__list vi-country-select-countries__list--north-america-collapsed">
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#us-08b4a5" hreflang="us">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/us_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">United States</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#ca-56c331" hreflang="ca">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ca_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Canada</div>
                          </div>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-33d9ab">
              <div class="vi-accordion-refine__header vi-accordion__header">
                <!-- Use h1-h6 depending page hierarchy -->
                <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-744127">International Markets</h4>
                <a aria-controls="region-45c8ec" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-33d9ab" role="button">
                  <!-- Button type: generic  -->
                  <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
                      International Markets</span></div>
                </a>
              </div>
              <div aria-labelledby="heading-744127" class="vi-accordion-refine__main vi-accordion__main" id="region-45c8ec" role="region">
                <div class="vi-accordion-refine__content vi-accordion__content">
                  <ul class="vi-country-select-countries__list vi-country-select-countries__list--international-collapsed">
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#ar-9e12ad" hreflang="ar">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ar_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Argentina</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#az-eea408" hreflang="az">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/az_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Azerbaijan</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#au-0e4b57" hreflang="au">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/au_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Australia</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#by-517c73" hreflang="by">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/by_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Belarus</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#br-19b00e" hreflang="br">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/br_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Brazil</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#cl-cc5cc6" hreflang="cl">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cl_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Chile</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#cn-b1dc2d" hreflang="cn">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cn_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">China</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#in-a29313" hreflang="in">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/in_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">India</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#il-58426a" hreflang="il">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/il_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Israel</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#jp-ccdec6" hreflang="jp">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/jp_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Japan</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#kz-5c9a80" hreflang="kz">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kz_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Kazakstan</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#kg-e0c727" hreflang="kg">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kg_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Kyrgyzstan</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#mx-37d9e7" hreflang="mx">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mx_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Mexico</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#pe-eeaa0e" hreflang="pe">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pe_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Peru</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#ru-86a514" hreflang="ru">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ru_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Russian Federation</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#sg-b7098b" hreflang="sg">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/sg_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Singapore</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#za-309dd2" hreflang="za">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/za_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">South Africa</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#kr-2b5d7e" hreflang="kr">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/kr_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Korea</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#th-c1ad77" hreflang="th">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/th_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Thailand</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#tr-2452bb" hreflang="tr">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/tr_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Turkey</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#ua-1a1a72" hreflang="ua">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ua_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Ukraine</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#uy-497b3c" hreflang="uy">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/uy_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Uruguay</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#uz-6aace6" hreflang="uz">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/uz_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Uzbekistan</div>
                          </div>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-8c343a">
              <div class="vi-accordion-refine__header vi-accordion__header">
                <!-- Use h1-h6 depending page hierarchy -->
                <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-816e66">Europe</h4>
                <a aria-controls="region-383d5a" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-8c343a" role="button">
                  <!-- Button type: generic  -->
                  <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
                      Europe</span></div>
                </a>
              </div>
              <div aria-labelledby="heading-816e66" class="vi-accordion-refine__main vi-accordion__main" id="region-383d5a" role="region">
                <div class="vi-accordion-refine__content vi-accordion__content">
                  <ul class="vi-country-select-countries__list vi-country-select-countries__list--europe-collapsed">
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#at-2b199d" hreflang="at">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/at_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Austria</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#be-a643db" hreflang="be">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/be_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Belgium</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#ba-92998c" hreflang="ba">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ba_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Bosnia And Herzegovina</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#bg-21e33b" hreflang="bg">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/bg_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Bulgaria</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#hr-0141e1" hreflang="hr">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/hr_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Croatia</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#cz-76ca6b" hreflang="cz">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/cz_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Czech Republic</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#dk-ac850c" hreflang="dk">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/dk_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Denmark</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#ee-0e6700" hreflang="ee">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ee_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Estonia</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#fi-c1ddcc" hreflang="fi">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/fi_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Finland</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#fr-97083e" hreflang="fr">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/fr_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">France</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#de-97e226" hreflang="de">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/de_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Germany</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#gr-e8066e" hreflang="gr">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/gr_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Greece</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#hu-eb0d25" hreflang="hu">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/hu_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Hungary</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#is-a03d10" hreflang="is">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/is_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Iceland</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#ie-0d67b2" hreflang="ie">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ie_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Ireland</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#it-429d6d" hreflang="it">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/it_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Italy</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#lv-7aacca" hreflang="lv">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/lv_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Latvia</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#lt-26447c" hreflang="lt">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/lt_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Lithuania</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#mk-59c91a" hreflang="mk">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mk_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Macedonia</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#mc-7ab746" hreflang="mc">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/mc_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Monaco</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#nl-c3d9c9" hreflang="nl">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/nl_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Netherlands</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#no-560009" hreflang="no">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/no_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Norway</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#pl-4850e1" hreflang="pl">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pl_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Poland</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#pt-360a64" hreflang="pt">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/pt_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Portugal</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#ro-874e6a" hreflang="ro">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ro_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Romania</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#rs-692865" hreflang="rs">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/rs_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Serbia</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#sk-35d046" hreflang="sk">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/sk_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Slovakia</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#es-e65a08" hreflang="es">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/es_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Spain</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#se-a38495" hreflang="se">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/se_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Sweden</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#ch-33ed94" hreflang="ch">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/ch_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">Switzerland</div>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li class="vi-country-select-countries__item">
                      <!-- Country Select Link  -->
                      <a class="vi-country-select-link" href="#gb-a1e335" hreflang="gb">
                        <!-- Media object (mods: --gap-10) -->
                        <div class="vi-media-object vi-media-object--gap-10">
                          <!-- Media object figure with (mods: --w-20) -->
                          <div class="vi-media-object__figure vi-media-object__figure--w-20">
                            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/square/gb_80x80.png"></div>
                          </div>
                          <div class="align-self-center vi-media-object__body">
                            <div class="vi-country-select-link__label">United Kingdom</div>
                          </div>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Added

  Adjustments to support IP lookup version of Country Select Lookup
  Initial draft