Page layout
v0.0.1-alpha.0
The Page Layout component privides a structure to enable the off-canvas navigation when in collapsed state (on smaller devises).
In expanded state the markup follows normal document flow.
In collapsed state the markup creates two layers. One for the page content and one for the header, which in its turn contains the navigational elements.
The .vi-page-layout__search element contains the Page Search.
The Page Countries overlay is specific to the global website. It can be rendered in place or loaded with AJAX.
To load the Page Countries overlay with AJAX, add the data-attribute data-source to the .vi-page-layout__countries element
with the location to the Page Countries source html.
Page Layout is part of the Page component.
Skip to main content
WhatsApp
Our policies
Gentrify carry venmo farm-to-table vice migas
Seitan occupy
Truffaut phlogiston yuccie wayfarers freegan
Intelligentsia flexitarian
Semiotics squid health paleo fixie
Taxidermy hoodie
Lomo distillery banjo brooklyn cliche post-ironic
Poutine paleo
Your privacy choices
Visit
www.tapi.com
Active Pharmaceutical Ingredients
Follow us
© 2023 - Teva Pharmaceutical Industries Ltd
<!-- Page Layout -->
<div class="vi-page-layout">
<a class="vi-page-layout__skip-to-content" href="#vi-content">Skip to main content</a>
<div class="vi-page-layout__search">
<!-- Page Search -->
<div class="gw-page-search" data-endpoint="/api/page-search/results.json">
<div class="gw-page-search__bar">
<form action="#sample" class="gw-page-search__form" method="get" novalidate role="search">
<fieldset class="gw-page-search__set">
<label class="sr-only" for="sg-9de1d7">Search</label>
<input autocomplete="off" class="gw-page-search__input" data-tabindex-collapsed="4" id="sg-9de1d7" name="search" placeholder="What are you searching for?" required="" type="search" value="">
<div class="gw-page-search__btn">
<!-- Button type: search -->
<button type="submit" data-tabindex-collapsed="4" class="vi-btn-search vi-btn">Search</button>
</div>
</fieldset>
<div class="gw-page-search__clear">
<div class="gw-page-search__clear-inset">
<div class="gw-page-search__clear-btn">
<!-- Button type: search -->
<button type="reset" class="vi-btn-search vi-btn-search--clear vi-btn">Clear</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="vi-page-layout__set">
<div class="vi-page-layout__panel vi-page-layout__panel--master">
<div class="vi-page-layout__countries" data-source="/teva_global/components/page-layout/content/page-countries.html" role="dialog" tabindex="-1">
<!-- --- Will be replaced on load --- -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-typesystem my-30">
<!-- Loading Indicator -->
<label class="text-muted vi-loading-indicator" role="status">Loading
<progress class="vi-loading-indicator__progress text-muted"></progress>
</label>
</div>
</div>
<!-- --- Will be replaced on load --- -->
</div>
<div class="vi-page-layout__trigger">
<div class="vi-page-layout__trigger-button">
<!-- Button type: layout -->
<button data-trigger="layout" data-tabindex-collapsed="1" aria-label="Close main menu" type="button" class="vi-btn-layout vi-btn-layout--close vi-btn">Close</button>
</div>
</div>
<!-- Page Masthead -->
<div class="vi-page-masthead">
<div class="vi-page-masthead__main">
<ul class="vi-page-masthead__navigation">
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Media</a>
</li>
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Investors</a>
</li>
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Shop</a>
</li>
</ul>
<div class="vi-page-masthead__actions">
<div class="vi-page-masthead__action vi-page-masthead__action--country-select">
<!-- Button type: masthead -->
<button data-trigger="countries" data-tabindex-collapsed="11" type="button" class="vi-btn-masthead vi-btn-masthead--countries vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--countries vi-btn__label"><!-- -->
<!-- Use display helper classes at own discretion. -->
Select
<span class="d-none d-sm-inline">your</span>
country
<span class="d-none d-xl-inline">website</span></span></button>
</div>
<div class="vi-page-masthead__action vi-page-masthead__action--session">
<!-- Button type: masthead -->
<a data-tabindex-collapsed="10" href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--session vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--session vi-btn__label">Login</span></a>
</div>
<div class="vi-page-masthead__action vi-page-masthead__action--search">
<!-- Button type: masthead -->
<button data-trigger="search" data-tabindex-collapsed="5" aria-label="Toggle search" aria-expanded="false" type="button" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--search vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--search vi-btn__label">Toggle search</span></button>
</div>
</div>
</div>
</div>
<!-- Page Navigation -->
<nav class="gw-page-navigation">
<div aria-label="main menu" class="gw-page-navigation__menu" role="navigation">
<ul class="gw-page-navigation__list gw-page-navigation__list--level-0" id="sg-d0512b">
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Our Company" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-7bea61">
Our Company
<span aria-label="Toggle our company submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-0" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
<span class="sr-only">Toggle Our Company Submenu</span>
</span>
</a>
<div class="gw-page-navigation__next gw-page-navigation__next--level-0">
<ul class="gw-page-navigation__list gw-page-navigation__list--level-1" id="sg-bec84e">
<li class="gw-page-navigation__item gw-page-navigation__item--level-1">
<a aria-label="First submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-66a141">
First submenu item
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-1">
<a aria-label="Second submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-88d66d">
Second submenu item
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-1">
<a aria-label="Third submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-729d80">
Third submenu item
</a>
</li>
</ul>
<div class="gw-page-navigation__pitch">
<div class="gw-page-navigation__pitch-visual">
<img src="/assets/images/static/test-480x300.jpg" alt="">
</div>
<div class="gw-page-navigation__pitch-content">
<p>A simplified unified approach in Teva is leading to more agile and affordable solutions for patients</p>
</div>
</div>
</div>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Our Impact" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-04b871">
Our Impact
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Product Focus" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-ee4cca">
Product Focus
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Careers" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-8dba1c">
Careers
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Contact" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-0de80a">
Contact
</a>
</li>
</ul>
</div>
<div class="gw-page-navigation__logo">
<a class="gw-page-navigation__logo-link" href="#">
<img src="/assets/images/logos/logo_teva.svg" alt="Teva">
</a>
</div>
</nav>
</div>
<div class="vi-page-layout__panel vi-page-layout__panel--detail">
<div class="vi-page-layout__trigger">
<div class="vi-page-layout__trigger-button">
<!-- Button type: layout -->
<button data-trigger="layout" aria-label="Open main menu" type="button" class="vi-btn-layout vi-btn-layout--open vi-btn">Menu</button>
</div>
</div>
<!-- Page Branding -->
<div class="vi-page-branding">
<div class="vi-page-branding__main">
<a class="vi-page-branding__link" href="#home-8ec451" rel="home">
<div class="vi-page-branding__logo">
<img src="/assets/images/logos/logo_teva.svg" alt="Teva">
</div>
</a>
</div>
</div>
<div class="vi-page-layout__main" id="vi-content">
<!-- Container -->
<div class="vi-container">
...
</div>
<!-- Page Footer -->
<div class="vi-page-footer">
<div class="vi-page-footer__body" role="contentinfo">
<div class="vi-page-footer__main">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-page-footer__content">
<div class="vi-page-footer__section">
<!-- Display Header type: dash (mods: --sm) -->
<div class="vi-display-header mb-30 vi-display-header-dash vi-display-header-dash--sm vi-typesystem vi-typesystem--inversed">
<!-- Use h1-h6 depending page hierarchy -->
<h2 class="h3">Our policies
</h2>
</div>
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-30">
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">Gentrify carry venmo farm-to-table vice migas</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-8cb9a0">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Seitan occupy</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">Truffaut phlogiston yuccie wayfarers freegan</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-db7b38">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Intelligentsia flexitarian</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">Semiotics squid health paleo fixie</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-8dacd1">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Taxidermy hoodie</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">Lomo distillery banjo brooklyn cliche post-ironic</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-72d81a">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Poutine paleo</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vi-page-footer__section">
<div class="vi-grid mb-30 mb-lg-60">
<div class="vi-grid__row vi-grid__row--grid-30">
<div class="col-md-6 col-lg-3">
<div class="vi-typesystem vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<!-- example of paragraph -->
<p>
<a href="#sample">Sitemap</a>
<br>
<a href="#sample">Legal Notes</a>
</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="vi-typesystem vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<!-- example of list (.list-unstyled provided by Bootstrap) -->
<ul class="list-unstyled">
<li>
<a href="#sample">PhV privacy Notice</a>
</li>
<li>
<a href="#sample">
<img src="/assets/images/misc/privacyoptions.svg" alt="California Consumer Privacy Act (CCPA) Opt-Out Icon" width="29" height="14">
Your privacy choices
</a>
</li>
<li>
<a href="#sample">Data Privacy</a>
</li>
<li>
<a href="#your-javascript-here">Cookie settings</a>
</li>
</ul>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="vi-typesystem vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<!-- example of paragraph -->
<p>
Visit
<a href="https://www.tapi.com" target="_blank">www.tapi.com</a>
<br>
Active Pharmaceutical Ingredients
</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<!-- Type (mods: --text-regular) -->
<h6 class="text-white mb-20 vi-type vi-type--text-regular">Follow us
</h6>
<!-- Share Buttons -->
<div class="vi-share-buttons">
<ul class="vi-share-buttons__list">
<li class="vi-share-buttons__item">
<a href="https://facebook.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--page-footer-links"><!-- Icon facebook-monochrome -->
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="facebook-monochrome"><path fill-rule="evenodd" d="M30,15 C30,6.71572266 23.2842773,0 15,0 C6.71572266,0 0,6.71572266 0,15 C0,22.4869336 5.4852832,28.6924805 12.65625,29.8177148 L12.65625,19.3359375 L8.84765625,19.3359375 L8.84765625,15 L12.65625,15 L12.65625,11.6953125 C12.65625,7.9359375 14.8956738,5.859375 18.3219434,5.859375 C19.963125,5.859375 21.6796875,6.15234375 21.6796875,6.15234375 L21.6796875,9.84375 L19.7881934,9.84375 C17.9248535,9.84375 17.34375,11 17.34375,12.1862402 L17.34375,15 L21.5039062,15 L20.8388672,19.3359375 L17.34375,19.3359375 L17.34375,29.8177148 C24.5147168,28.6924805 30,22.4869336 30,15" transform="translate(2 2)"></path></svg>
<span class="sr-only">Facebook</span>
</a>
</li>
<li class="vi-share-buttons__item">
<a href="https://twitter.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--page-footer-links"><!-- Icon twitter-monochrome -->
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="twitter-monochrome"><path fill-rule="evenodd" d="M29.7244391,10.4727174 C29.7436804,10.7543155 29.7436804,11.0372137 29.7436804,11.321282 C29.7436804,19.9971305 23.1388652,30.0016646 11.0632978,30.0016646 L11.0632978,29.9964642 C7.49586817,30.0012746 4.00241328,28.9792788 1,27.0525547 C1.51860339,27.1145687 2.04045698,27.1462908 2.56283061,27.1472008 C5.51974096,27.150191 8.39162584,26.1583572 10.7164355,24.3312195 C7.90760468,24.2784361 5.442776,22.4463582 4.58277064,19.771826 C5.56654397,19.9613782 6.58060925,19.9228958 7.54722148,19.6592388 C4.48383427,19.0403989 2.28084245,16.3487057 2.2800624,13.2234345 L2.2800624,13.1402291 C3.19298117,13.6492119 4.21497696,13.93107 5.25985423,13.962012 C2.3747085,12.035418 1.4846712,8.19770095 3.22717337,5.19788783 C6.56097799,9.29939187 11.4791946,11.7926924 16.7580544,12.0573894 C16.2287904,9.77730263 16.9522869,7.38787881 18.6573467,5.78435559 C21.3011969,3.29807553 25.4601646,3.42561374 27.9465747,6.06946394 C29.4168393,5.77967529 30.8267801,5.24066059 32.1154231,4.47595136 C31.6254215,5.99626923 30.5996555,7.2867323 29.2291072,8.10721512 C30.530621,7.95341522 31.8017129,7.60525281 33,7.07429863 C32.1185433,8.39258349 31.0093118,9.54328757 29.7244391,10.4727174"></path></svg>
<span class="sr-only">Twitter</span>
</a>
</li>
<li class="vi-share-buttons__item">
<a href="https://linkedin.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--page-footer-links"><!-- Icon linkedin-monochrome -->
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="linkedin-monochrome"><path fill-rule="evenodd" d="M26.8823529,18.8776471 C26.8823529,14.9164706 24.3623529,13.3764706 21.8588235,13.3764706 C20.1903529,13.2932941 18.6042353,14.102 17.6917647,15.5011765 L17.5764706,15.5011765 L17.5764706,13.7058824 L13.7058824,13.7058824 L13.7058824,26.8823529 L17.8235294,26.8823529 L17.8235294,19.8741176 C17.7,18.3802353 18.8018824,17.0650588 20.2941176,16.9258824 L20.4505882,16.9258824 C21.76,16.9258824 22.7317647,17.7494118 22.7317647,19.8247059 L22.7317647,26.8823529 L26.8494118,26.8823529 L26.8823529,18.8776471 Z M11.6058824,9.17647059 C11.6149412,7.86623529 10.5608235,6.79729412 9.25058824,6.78823529 L9.25058824,6.78823529 L9.17647059,6.78823529 C7.85717647,6.78905882 6.78905882,7.85882353 6.78905882,9.17729412 C6.78988235,10.4957647 7.858,11.5638824 9.17647059,11.5647059 C10.4858824,11.5968235 11.5737647,10.5616471 11.6058824,9.25223529 C11.6058824,9.25141176 11.6058824,9.25141176 11.6058824,9.25058824 L11.6058824,9.17647059 Z M7.11764706,26.8823529 L11.2352941,26.8823529 L11.2352941,13.7058824 L7.11764706,13.7058824 L7.11764706,26.8823529 Z M31,5.05882353 L31,28.9411765 C31,30.0784706 30.0784706,31 28.9411765,31 L5.05882353,31 C3.92152941,31 3,30.0784706 3,28.9411765 L3,5.05882353 C3,3.92152941 3.92152941,3 5.05882353,3 L28.9411765,3 C30.0784706,3 31,3.92152941 31,5.05882353 L31,5.05882353 Z"></path></svg>
<span class="sr-only">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="vi-typesystem w-75 vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<p>© 2023 - Teva Pharmaceutical Industries Ltd</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page Back To Top -->
<button class="vi-page-back-to-top" title="Back to top">
<span class="sr-only">Back to Top</span>
</button>
<!-- Button type: whatsapp -->
<a href="#" class="vi-btn-whatsapp vi-btn"><span class="vi-btn-whatsapp__label vi-btn__label">WhatsApp</span></a>
</div>
</div>
</div>
</div>Full width layout #
To have full width on layout, remove the .vi-container class from the element holding
the page content.
To have full width on layout, change the .vi-container class from the element holding
the page content to .vi-container--screen to have a screen-wide container.
When doing this. The individual page sections should be wrapped by .vi-container. This is
new and experimental for use on the Digital Commercial website.
Skip to main content
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
International Markets
North America
Toggle
North America
International Markets
Toggle
International Markets
Europe
Toggle
Europe
Our policies
Farm-to-table 8-bit lumbersexual loko kombucha letterpress
Mustache thundercats
Typewriter listicle actually echo readymade pabst
Cardigan synth
Post-ironic chartreuse flexitarian yolo +1
Schlitz roof
Narwhal intelligentsia sustainable wayfarers kinfolk
Gastropub yr
Visit
www.tapi.com
Active Pharmaceutical Ingredients
Follow us
© 2023 - Teva Pharmaceutical Industries Ltd
<!-- Page Layout -->
<div class="vi-page-layout">
<a class="vi-page-layout__skip-to-content" href="#vi-content">Skip to main content</a>
<div class="vi-page-layout__search">
<!-- Page Search -->
<div class="gw-page-search" data-endpoint="/api/page-search/results.json">
<div class="gw-page-search__bar">
<form action="#sample" class="gw-page-search__form" method="get" novalidate role="search">
<fieldset class="gw-page-search__set">
<label class="sr-only" for="sg-274369">Search</label>
<input autocomplete="off" class="gw-page-search__input" data-tabindex-collapsed="4" id="sg-274369" name="search" placeholder="What are you searching for?" required="" type="search" value="">
<div class="gw-page-search__btn">
<!-- Button type: search -->
<button type="submit" data-tabindex-collapsed="4" class="vi-btn-search vi-btn">Search</button>
</div>
</fieldset>
<div class="gw-page-search__clear">
<div class="gw-page-search__clear-inset">
<div class="gw-page-search__clear-btn">
<!-- Button type: search -->
<button type="reset" class="vi-btn-search vi-btn-search--clear vi-btn">Clear</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="vi-page-layout__set">
<div class="vi-page-layout__panel vi-page-layout__panel--master">
<div class="vi-page-layout__countries" data-source="/teva_global/components/page-layout/content/page-countries.html">
<!-- Page Countries -->
<div class="vi-page-countries">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-page-countries__head">
<div class="vi-page-countries__trigger">
<!-- Button type: close -->
<button data-trigger="countries" type="button" class="vi-btn-close vi-btn"><span class="vi-btn-close__label vi-btn__label">Press to close the select your country window or navigate to it's content.</span></button>
</div>
</div>
</div>
<div class="vi-page-countries__main">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-page-countries__content">
<!-- 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" data-page-layout="true">
<!-- 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-cdb33b" 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-94c114" 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-6e57bc" 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-811d95" 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-432009" 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-de3d85" 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-e01dbb" 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-c21abd" 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-c3d4a5" 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-637ebd" 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-e3cc1b" 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-1d7ca6" 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-e2d58e" 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-2d0b04" 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-a5b581" 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-54c622" 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-4eb1c8" 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-24e66d" 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-21d484" 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-8c66c9" 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-598b3c" 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-192593" 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-5c03d2" 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-66ac42" 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-9531a1" 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-97ecaa" 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-aa0424" 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-34d4e2" 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-0a2028" 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-1ce692" 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-b3b68d" 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-107b6c" 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-3261e1" 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-7ee0b4" 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-0dd078" 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-532150" 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-9c22ca" 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-4d1735" 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-4b7a31" 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-d470d5" 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-c53c40" 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-4a5312" 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-083d8e" 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-c06729" 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-554d2e" 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-eaca41" 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-0081e7" 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-34b91b" 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-43a4e9" 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-288e4b" 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-445ac9" 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-773496" 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-46d70e" 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-d4766c" 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-2b6a67" 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-e85923" 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)-ae6b38">
<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-5799d1">North America</h4>
<a aria-controls="region-b4d8a5" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-ae6b38" 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-5799d1" class="vi-accordion-refine__main vi-accordion__main" id="region-b4d8a5" 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-cdb33b" 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-94c114" 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)-cb4a3c">
<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-96c5b7">International Markets</h4>
<a aria-controls="region-d28423" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-cb4a3c" 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-96c5b7" class="vi-accordion-refine__main vi-accordion__main" id="region-d28423" 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-6e57bc" 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-811d95" 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-432009" 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-de3d85" 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-e01dbb" 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-c21abd" 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-c3d4a5" 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-637ebd" 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-e3cc1b" 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-1d7ca6" 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-e2d58e" 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-2d0b04" 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-a5b581" 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-54c622" 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-4eb1c8" 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-24e66d" 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-21d484" 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-8c66c9" 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-598b3c" 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-192593" 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-5c03d2" 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-66ac42" 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-9531a1" 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)-788339">
<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-91489b">Europe</h4>
<a aria-controls="region-a0d9d8" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-788339" 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-91489b" class="vi-accordion-refine__main vi-accordion__main" id="region-a0d9d8" 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-97ecaa" 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-aa0424" 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-34d4e2" 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-0a2028" 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-1ce692" 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-b3b68d" 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-107b6c" 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-3261e1" 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-7ee0b4" 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-0dd078" 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-532150" 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-9c22ca" 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-4d1735" 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-4b7a31" 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-d470d5" 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-c53c40" 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-4a5312" 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-083d8e" 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-c06729" 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-554d2e" 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-eaca41" 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-0081e7" 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-34b91b" 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-43a4e9" 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-288e4b" 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-445ac9" 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-773496" 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-46d70e" 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-d4766c" 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-2b6a67" 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-e85923" 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>
</div>
</div>
</div>
</div>
<div class="vi-page-layout__trigger">
<div class="vi-page-layout__trigger-button">
<!-- Button type: layout -->
<button data-trigger="layout" data-tabindex-collapsed="1" aria-label="Close main menu" type="button" class="vi-btn-layout vi-btn-layout--close vi-btn">Close</button>
</div>
</div>
<!-- Page Masthead -->
<div class="vi-page-masthead">
<div class="vi-page-masthead__main">
<ul class="vi-page-masthead__navigation">
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Media</a>
</li>
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Investors</a>
</li>
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Shop</a>
</li>
</ul>
<div class="vi-page-masthead__actions">
<div class="vi-page-masthead__action vi-page-masthead__action--country-select">
<!-- Button type: masthead -->
<button data-trigger="countries" data-tabindex-collapsed="11" type="button" class="vi-btn-masthead vi-btn-masthead--countries vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--countries vi-btn__label"><!-- -->
<!-- Use display helper classes at own discretion. -->
Select
<span class="d-none d-sm-inline">your</span>
country
<span class="d-none d-xl-inline">website</span></span></button>
</div>
<div class="vi-page-masthead__action vi-page-masthead__action--session">
<!-- Button type: masthead -->
<a data-tabindex-collapsed="10" href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--session vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--session vi-btn__label">Login</span></a>
</div>
<div class="vi-page-masthead__action vi-page-masthead__action--search">
<!-- Button type: masthead -->
<button data-trigger="search" data-tabindex-collapsed="5" aria-label="Toggle search" aria-expanded="false" type="button" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--search vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--search vi-btn__label">Toggle search</span></button>
</div>
</div>
</div>
</div>
<!-- Page Navigation -->
<nav class="gw-page-navigation">
<div aria-label="main menu" class="gw-page-navigation__menu" role="navigation">
<ul class="gw-page-navigation__list gw-page-navigation__list--level-0" id="sg-c512a9">
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Our Company" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-1a0295">
Our Company
<span aria-label="Toggle our company submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-0" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
<span class="sr-only">Toggle Our Company Submenu</span>
</span>
</a>
<div class="gw-page-navigation__next gw-page-navigation__next--level-0">
<ul class="gw-page-navigation__list gw-page-navigation__list--level-1" id="sg-119b4e">
<li class="gw-page-navigation__item gw-page-navigation__item--level-1">
<a aria-label="First submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-1eb378">
First submenu item
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-1">
<a aria-label="Second submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-98d010">
Second submenu item
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-1">
<a aria-label="Third submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-b8bd07">
Third submenu item
</a>
</li>
</ul>
<div class="gw-page-navigation__pitch">
<div class="gw-page-navigation__pitch-visual">
<img src="/assets/images/static/test-480x300.jpg" alt="">
</div>
<div class="gw-page-navigation__pitch-content">
<p>A simplified unified approach in Teva is leading to more agile and affordable solutions for patients</p>
</div>
</div>
</div>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Our Impact" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-768d8a">
Our Impact
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Product Focus" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-953248">
Product Focus
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Careers" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-c93280">
Careers
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Contact" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-b755d6">
Contact
</a>
</li>
</ul>
</div>
<div class="gw-page-navigation__logo">
<a class="gw-page-navigation__logo-link" href="#">
<img src="/assets/images/logos/logo_teva.svg" alt="Teva">
</a>
</div>
</nav>
</div>
<div class="vi-page-layout__panel vi-page-layout__panel--detail">
<div class="vi-page-layout__trigger">
<div class="vi-page-layout__trigger-button">
<!-- Button type: layout -->
<button data-trigger="layout" aria-label="Open main menu" type="button" class="vi-btn-layout vi-btn-layout--open vi-btn">Menu</button>
</div>
</div>
<!-- Page Branding -->
<div class="vi-page-branding">
<div class="vi-page-branding__main">
<a class="vi-page-branding__link" href="#home-9444a2" rel="home">
<div class="vi-page-branding__logo">
<img src="/assets/images/logos/logo_teva.svg" alt="Teva">
</div>
</a>
</div>
</div>
<div class="vi-page-layout__main" id="vi-content">
<!-- Container (mods: --screen) -->
<div class="vi-container vi-container--screen">
...
</div>
<!-- Page Footer -->
<div class="vi-page-footer">
<div class="vi-page-footer__body" role="contentinfo">
<div class="vi-page-footer__main">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-page-footer__content">
<div class="vi-page-footer__section">
<!-- Display Header type: dash (mods: --sm) -->
<div class="vi-display-header mb-30 vi-display-header-dash vi-display-header-dash--sm vi-typesystem vi-typesystem--inversed">
<!-- Use h1-h6 depending page hierarchy -->
<h2 class="h3">Our policies
</h2>
</div>
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-30">
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">Farm-to-table 8-bit lumbersexual loko kombucha letterpress</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-e1611e">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Mustache thundercats</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">Typewriter listicle actually echo readymade pabst</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-2dca32">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Cardigan synth</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">Post-ironic chartreuse flexitarian yolo +1</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-ed078e">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Schlitz roof</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">Narwhal intelligentsia sustainable wayfarers kinfolk</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-064389">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Gastropub yr</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vi-page-footer__section">
<div class="vi-grid mb-30 mb-lg-60">
<div class="vi-grid__row vi-grid__row--grid-30">
<div class="col-md-6 col-lg-3">
<div class="vi-typesystem vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<!-- example of paragraph -->
<p>
<a href="#sample">Sitemap</a>
<br>
<a href="#sample">Legal Notes</a>
</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="vi-typesystem vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<!-- example of list (.list-unstyled provided by Bootstrap) -->
<ul class="list-unstyled">
<li>
<a href="#sample">PhV privacy Notice</a>
</li>
<li>
<a href="#sample">
<img src="/assets/images/misc/privacyoptions.svg" alt="California Consumer Privacy Act (CCPA) Opt-Out Icon" width="29" height="14">
Your privacy choices
</a>
</li>
<li>
<a href="#sample">Data Privacy</a>
</li>
<li>
<a href="#your-javascript-here">Cookie settings</a>
</li>
</ul>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="vi-typesystem vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<!-- example of paragraph -->
<p>
Visit
<a href="https://www.tapi.com" target="_blank">www.tapi.com</a>
<br>
Active Pharmaceutical Ingredients
</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<!-- Type (mods: --text-regular) -->
<h6 class="text-white mb-20 vi-type vi-type--text-regular">Follow us
</h6>
<!-- Share Buttons -->
<div class="vi-share-buttons">
<ul class="vi-share-buttons__list">
<li class="vi-share-buttons__item">
<a href="https://facebook.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--page-footer-links"><!-- Icon facebook-monochrome -->
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="facebook-monochrome"><path fill-rule="evenodd" d="M30,15 C30,6.71572266 23.2842773,0 15,0 C6.71572266,0 0,6.71572266 0,15 C0,22.4869336 5.4852832,28.6924805 12.65625,29.8177148 L12.65625,19.3359375 L8.84765625,19.3359375 L8.84765625,15 L12.65625,15 L12.65625,11.6953125 C12.65625,7.9359375 14.8956738,5.859375 18.3219434,5.859375 C19.963125,5.859375 21.6796875,6.15234375 21.6796875,6.15234375 L21.6796875,9.84375 L19.7881934,9.84375 C17.9248535,9.84375 17.34375,11 17.34375,12.1862402 L17.34375,15 L21.5039062,15 L20.8388672,19.3359375 L17.34375,19.3359375 L17.34375,29.8177148 C24.5147168,28.6924805 30,22.4869336 30,15" transform="translate(2 2)"></path></svg>
<span class="sr-only">Facebook</span>
</a>
</li>
<li class="vi-share-buttons__item">
<a href="https://twitter.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--page-footer-links"><!-- Icon twitter-monochrome -->
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="twitter-monochrome"><path fill-rule="evenodd" d="M29.7244391,10.4727174 C29.7436804,10.7543155 29.7436804,11.0372137 29.7436804,11.321282 C29.7436804,19.9971305 23.1388652,30.0016646 11.0632978,30.0016646 L11.0632978,29.9964642 C7.49586817,30.0012746 4.00241328,28.9792788 1,27.0525547 C1.51860339,27.1145687 2.04045698,27.1462908 2.56283061,27.1472008 C5.51974096,27.150191 8.39162584,26.1583572 10.7164355,24.3312195 C7.90760468,24.2784361 5.442776,22.4463582 4.58277064,19.771826 C5.56654397,19.9613782 6.58060925,19.9228958 7.54722148,19.6592388 C4.48383427,19.0403989 2.28084245,16.3487057 2.2800624,13.2234345 L2.2800624,13.1402291 C3.19298117,13.6492119 4.21497696,13.93107 5.25985423,13.962012 C2.3747085,12.035418 1.4846712,8.19770095 3.22717337,5.19788783 C6.56097799,9.29939187 11.4791946,11.7926924 16.7580544,12.0573894 C16.2287904,9.77730263 16.9522869,7.38787881 18.6573467,5.78435559 C21.3011969,3.29807553 25.4601646,3.42561374 27.9465747,6.06946394 C29.4168393,5.77967529 30.8267801,5.24066059 32.1154231,4.47595136 C31.6254215,5.99626923 30.5996555,7.2867323 29.2291072,8.10721512 C30.530621,7.95341522 31.8017129,7.60525281 33,7.07429863 C32.1185433,8.39258349 31.0093118,9.54328757 29.7244391,10.4727174"></path></svg>
<span class="sr-only">Twitter</span>
</a>
</li>
<li class="vi-share-buttons__item">
<a href="https://linkedin.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--page-footer-links"><!-- Icon linkedin-monochrome -->
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="linkedin-monochrome"><path fill-rule="evenodd" d="M26.8823529,18.8776471 C26.8823529,14.9164706 24.3623529,13.3764706 21.8588235,13.3764706 C20.1903529,13.2932941 18.6042353,14.102 17.6917647,15.5011765 L17.5764706,15.5011765 L17.5764706,13.7058824 L13.7058824,13.7058824 L13.7058824,26.8823529 L17.8235294,26.8823529 L17.8235294,19.8741176 C17.7,18.3802353 18.8018824,17.0650588 20.2941176,16.9258824 L20.4505882,16.9258824 C21.76,16.9258824 22.7317647,17.7494118 22.7317647,19.8247059 L22.7317647,26.8823529 L26.8494118,26.8823529 L26.8823529,18.8776471 Z M11.6058824,9.17647059 C11.6149412,7.86623529 10.5608235,6.79729412 9.25058824,6.78823529 L9.25058824,6.78823529 L9.17647059,6.78823529 C7.85717647,6.78905882 6.78905882,7.85882353 6.78905882,9.17729412 C6.78988235,10.4957647 7.858,11.5638824 9.17647059,11.5647059 C10.4858824,11.5968235 11.5737647,10.5616471 11.6058824,9.25223529 C11.6058824,9.25141176 11.6058824,9.25141176 11.6058824,9.25058824 L11.6058824,9.17647059 Z M7.11764706,26.8823529 L11.2352941,26.8823529 L11.2352941,13.7058824 L7.11764706,13.7058824 L7.11764706,26.8823529 Z M31,5.05882353 L31,28.9411765 C31,30.0784706 30.0784706,31 28.9411765,31 L5.05882353,31 C3.92152941,31 3,30.0784706 3,28.9411765 L3,5.05882353 C3,3.92152941 3.92152941,3 5.05882353,3 L28.9411765,3 C30.0784706,3 31,3.92152941 31,5.05882353 L31,5.05882353 Z"></path></svg>
<span class="sr-only">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="vi-typesystem w-75 vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<p>© 2023 - Teva Pharmaceutical Industries Ltd</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page Back To Top -->
<button class="vi-page-back-to-top" title="Back to top">
<span class="sr-only">Back to Top</span>
</button>
</div>
</div>
</div>
</div>Country Select In Place #
In the following example the country select is rendered 'in place'
Skip to main content
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
International Markets
North America
Toggle
North America
International Markets
Toggle
International Markets
Europe
Toggle
Europe
Our policies
Keytar synth mumblecore aesthetic typewriter
Gentrify banjo
Pbr&b aesthetic synth kickstarter shoreditch meggings
Synth gentrify
8-bit synth gluten-free everyday keffiyeh
Vice normcore
Gluten-free tacos authentic typewriter distillery
Retro sustainable
Visit
www.tapi.com
Active Pharmaceutical Ingredients
Follow us
© 2023 - Teva Pharmaceutical Industries Ltd
<!-- Page Layout -->
<div class="vi-page-layout">
<a class="vi-page-layout__skip-to-content" href="#vi-content">Skip to main content</a>
<div class="vi-page-layout__search">
<!-- Page Search -->
<div class="gw-page-search" data-endpoint="/api/page-search/results.json">
<div class="gw-page-search__bar">
<form action="#sample" class="gw-page-search__form" method="get" novalidate role="search">
<fieldset class="gw-page-search__set">
<label class="sr-only" for="sg-457196">Search</label>
<input autocomplete="off" class="gw-page-search__input" data-tabindex-collapsed="4" id="sg-457196" name="search" placeholder="What are you searching for?" required="" type="search" value="">
<div class="gw-page-search__btn">
<!-- Button type: search -->
<button type="submit" data-tabindex-collapsed="4" class="vi-btn-search vi-btn">Search</button>
</div>
</fieldset>
<div class="gw-page-search__clear">
<div class="gw-page-search__clear-inset">
<div class="gw-page-search__clear-btn">
<!-- Button type: search -->
<button type="reset" class="vi-btn-search vi-btn-search--clear vi-btn">Clear</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="vi-page-layout__set">
<div class="vi-page-layout__panel vi-page-layout__panel--master">
<div class="vi-page-layout__countries" data-source="/teva_global/components/page-layout/content/page-countries.html">
<!-- Page Countries -->
<div class="vi-page-countries">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-page-countries__head">
<div class="vi-page-countries__trigger">
<!-- Button type: close -->
<button data-trigger="countries" type="button" class="vi-btn-close vi-btn"><span class="vi-btn-close__label vi-btn__label">Press to close the select your country window or navigate to it's content.</span></button>
</div>
</div>
</div>
<div class="vi-page-countries__main">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-page-countries__content">
<!-- 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" data-page-layout="true">
<!-- 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-cdb33b" 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-94c114" 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-6e57bc" 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-811d95" 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-432009" 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-de3d85" 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-e01dbb" 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-c21abd" 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-c3d4a5" 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-637ebd" 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-e3cc1b" 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-1d7ca6" 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-e2d58e" 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-2d0b04" 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-a5b581" 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-54c622" 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-4eb1c8" 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-24e66d" 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-21d484" 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-8c66c9" 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-598b3c" 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-192593" 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-5c03d2" 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-66ac42" 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-9531a1" 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-97ecaa" 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-aa0424" 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-34d4e2" 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-0a2028" 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-1ce692" 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-b3b68d" 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-107b6c" 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-3261e1" 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-7ee0b4" 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-0dd078" 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-532150" 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-9c22ca" 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-4d1735" 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-4b7a31" 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-d470d5" 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-c53c40" 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-4a5312" 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-083d8e" 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-c06729" 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-554d2e" 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-eaca41" 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-0081e7" 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-34b91b" 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-43a4e9" 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-288e4b" 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-445ac9" 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-773496" 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-46d70e" 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-d4766c" 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-2b6a67" 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-e85923" 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)-14e782">
<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-eb6e74">North America</h4>
<a aria-controls="region-b5e903" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-14e782" 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-eb6e74" class="vi-accordion-refine__main vi-accordion__main" id="region-b5e903" 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-cdb33b" 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-94c114" 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)-ab9edd">
<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-3b35a4">International Markets</h4>
<a aria-controls="region-b24c06" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-ab9edd" 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-3b35a4" class="vi-accordion-refine__main vi-accordion__main" id="region-b24c06" 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-6e57bc" 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-811d95" 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-432009" 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-de3d85" 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-e01dbb" 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-c21abd" 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-c3d4a5" 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-637ebd" 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-e3cc1b" 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-1d7ca6" 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-e2d58e" 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-2d0b04" 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-a5b581" 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-54c622" 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-4eb1c8" 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-24e66d" 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-21d484" 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-8c66c9" 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-598b3c" 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-192593" 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-5c03d2" 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-66ac42" 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-9531a1" 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)-72eea2">
<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-60c1b4">Europe</h4>
<a aria-controls="region-695e58" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-72eea2" 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-60c1b4" class="vi-accordion-refine__main vi-accordion__main" id="region-695e58" 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-97ecaa" 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-aa0424" 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-34d4e2" 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-0a2028" 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-1ce692" 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-b3b68d" 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-107b6c" 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-3261e1" 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-7ee0b4" 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-0dd078" 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-532150" 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-9c22ca" 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-4d1735" 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-4b7a31" 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-d470d5" 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-c53c40" 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-4a5312" 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-083d8e" 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-c06729" 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-554d2e" 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-eaca41" 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-0081e7" 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-34b91b" 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-43a4e9" 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-288e4b" 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-445ac9" 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-773496" 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-46d70e" 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-d4766c" 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-2b6a67" 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-e85923" 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>
</div>
</div>
</div>
</div>
<div class="vi-page-layout__trigger">
<div class="vi-page-layout__trigger-button">
<!-- Button type: layout -->
<button data-trigger="layout" data-tabindex-collapsed="1" aria-label="Close main menu" type="button" class="vi-btn-layout vi-btn-layout--close vi-btn">Close</button>
</div>
</div>
<!-- Page Masthead -->
<div class="vi-page-masthead">
<div class="vi-page-masthead__main">
<ul class="vi-page-masthead__navigation">
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Media</a>
</li>
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Investors</a>
</li>
<li class="vi-page-masthead__navigation-item">
<a class="vi-page-masthead__navigation-link" data-tabindex-collapsed="12" href="#sample">Shop</a>
</li>
</ul>
<div class="vi-page-masthead__actions">
<div class="vi-page-masthead__action vi-page-masthead__action--country-select">
<!-- Button type: masthead -->
<button data-trigger="countries" data-tabindex-collapsed="11" type="button" class="vi-btn-masthead vi-btn-masthead--countries vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--countries vi-btn__label"><!-- -->
<!-- Use display helper classes at own discretion. -->
Select
<span class="d-none d-sm-inline">your</span>
country
<span class="d-none d-xl-inline">website</span></span></button>
</div>
<div class="vi-page-masthead__action vi-page-masthead__action--session">
<!-- Button type: masthead -->
<a data-tabindex-collapsed="10" href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--session vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--session vi-btn__label">Login</span></a>
</div>
<div class="vi-page-masthead__action vi-page-masthead__action--search">
<!-- Button type: masthead -->
<button data-trigger="search" data-tabindex-collapsed="5" aria-label="Toggle search" aria-expanded="false" type="button" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--search vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--search vi-btn__label">Toggle search</span></button>
</div>
</div>
</div>
</div>
<!-- Page Navigation -->
<nav class="gw-page-navigation">
<div aria-label="main menu" class="gw-page-navigation__menu" role="navigation">
<ul class="gw-page-navigation__list gw-page-navigation__list--level-0" id="sg-517d89">
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Our Company" class="gw-page-navigation__link gw-page-navigation__link--level-0 gw-page-navigation__link--next" data-tabindex-collapsed="15" href="#sample-cee02a">
Our Company
<span aria-label="Toggle our company submenu" class="gw-page-navigation__trigger gw-page-navigation__trigger--level-0" data-tabindex-collapsed="15" data-tabindex-expanded="0" role="button">
<span class="sr-only">Toggle Our Company Submenu</span>
</span>
</a>
<div class="gw-page-navigation__next gw-page-navigation__next--level-0">
<ul class="gw-page-navigation__list gw-page-navigation__list--level-1" id="sg-d74aa3">
<li class="gw-page-navigation__item gw-page-navigation__item--level-1">
<a aria-label="First submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-6b3984">
First submenu item
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-1">
<a aria-label="Second submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-b97269">
Second submenu item
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-1">
<a aria-label="Third submenu item" class="gw-page-navigation__link gw-page-navigation__link--level-1" data-tabindex-collapsed="15" href="#sample-393459">
Third submenu item
</a>
</li>
</ul>
<div class="gw-page-navigation__pitch">
<div class="gw-page-navigation__pitch-visual">
<img src="/assets/images/static/test-480x300.jpg" alt="">
</div>
<div class="gw-page-navigation__pitch-content">
<p>A simplified unified approach in Teva is leading to more agile and affordable solutions for patients</p>
</div>
</div>
</div>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Our Impact" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-a8997a">
Our Impact
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Product Focus" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-ad9260">
Product Focus
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Careers" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-b03591">
Careers
</a>
</li>
<li class="gw-page-navigation__item gw-page-navigation__item--level-0">
<a aria-label="Contact" class="gw-page-navigation__link gw-page-navigation__link--level-0" data-tabindex-collapsed="15" href="#sample-d2da88">
Contact
</a>
</li>
</ul>
</div>
<div class="gw-page-navigation__logo">
<a class="gw-page-navigation__logo-link" href="#">
<img src="/assets/images/logos/logo_teva.svg" alt="Teva">
</a>
</div>
</nav>
</div>
<div class="vi-page-layout__panel vi-page-layout__panel--detail">
<div class="vi-page-layout__trigger">
<div class="vi-page-layout__trigger-button">
<!-- Button type: layout -->
<button data-trigger="layout" aria-label="Open main menu" type="button" class="vi-btn-layout vi-btn-layout--open vi-btn">Menu</button>
</div>
</div>
<!-- Page Branding -->
<div class="vi-page-branding">
<div class="vi-page-branding__main">
<a class="vi-page-branding__link" href="#home-c11c94" rel="home">
<div class="vi-page-branding__logo">
<img src="/assets/images/logos/logo_teva.svg" alt="Teva">
</div>
</a>
</div>
</div>
<div class="vi-page-layout__main" id="vi-content">
<!-- Container -->
<div class="vi-container">
...
</div>
<!-- Page Footer -->
<div class="vi-page-footer">
<div class="vi-page-footer__body" role="contentinfo">
<div class="vi-page-footer__main">
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<div class="vi-page-footer__content">
<div class="vi-page-footer__section">
<!-- Display Header type: dash (mods: --sm) -->
<div class="vi-display-header mb-30 vi-display-header-dash vi-display-header-dash--sm vi-typesystem vi-typesystem--inversed">
<!-- Use h1-h6 depending page hierarchy -->
<h2 class="h3">Our policies
</h2>
</div>
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-30">
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">Keytar synth mumblecore aesthetic typewriter</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-06c9b0">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Gentrify banjo</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">Pbr&b aesthetic synth kickstarter shoreditch meggings</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-aeb5ce">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Synth gentrify</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">8-bit synth gluten-free everyday keffiyeh</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-81e04c">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Vice normcore</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Card type: tiny -->
<div class="vi-card-tiny vi-card">
<div class="vi-card-tiny__body vi-card__body">
<div class="vi-card-tiny__head vi-card__head">
<div class="vi-card-tiny__visual vi-card__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
<div class="vi-card-tiny__main vi-card__main">
<div class="vi-card-tiny__content vi-typesystem vi-typesystem--inversed vi-card__content">
<!-- Use h1-h6 depending page hierarchy -->
<h6 class="vi-card-tiny__title vi-card__title">Gluten-free tacos authentic typewriter distillery</h6>
</div>
<a class="vi-card-tiny__trigger vi-card__trigger" href="#sample-d972a4">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Retro sustainable</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vi-page-footer__section">
<div class="vi-grid mb-30 mb-lg-60">
<div class="vi-grid__row vi-grid__row--grid-30">
<div class="col-md-6 col-lg-3">
<div class="vi-typesystem vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<!-- example of paragraph -->
<p>
<a href="#sample">Sitemap</a>
<br>
<a href="#sample">Legal Notes</a>
</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="vi-typesystem vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<!-- example of list (.list-unstyled provided by Bootstrap) -->
<ul class="list-unstyled">
<li>
<a href="#sample">PhV privacy Notice</a>
</li>
<li>
<a href="#sample">
<img src="/assets/images/misc/privacyoptions.svg" alt="California Consumer Privacy Act (CCPA) Opt-Out Icon" width="29" height="14">
Your privacy choices
</a>
</li>
<li>
<a href="#sample">Data Privacy</a>
</li>
<li>
<a href="#your-javascript-here">Cookie settings</a>
</li>
</ul>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="vi-typesystem vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<!-- example of paragraph -->
<p>
Visit
<a href="https://www.tapi.com" target="_blank">www.tapi.com</a>
<br>
Active Pharmaceutical Ingredients
</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<!-- Type (mods: --text-regular) -->
<h6 class="text-white mb-20 vi-type vi-type--text-regular">Follow us
</h6>
<!-- Share Buttons -->
<div class="vi-share-buttons">
<ul class="vi-share-buttons__list">
<li class="vi-share-buttons__item">
<a href="https://facebook.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--page-footer-links"><!-- Icon facebook-monochrome -->
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="facebook-monochrome"><path fill-rule="evenodd" d="M30,15 C30,6.71572266 23.2842773,0 15,0 C6.71572266,0 0,6.71572266 0,15 C0,22.4869336 5.4852832,28.6924805 12.65625,29.8177148 L12.65625,19.3359375 L8.84765625,19.3359375 L8.84765625,15 L12.65625,15 L12.65625,11.6953125 C12.65625,7.9359375 14.8956738,5.859375 18.3219434,5.859375 C19.963125,5.859375 21.6796875,6.15234375 21.6796875,6.15234375 L21.6796875,9.84375 L19.7881934,9.84375 C17.9248535,9.84375 17.34375,11 17.34375,12.1862402 L17.34375,15 L21.5039062,15 L20.8388672,19.3359375 L17.34375,19.3359375 L17.34375,29.8177148 C24.5147168,28.6924805 30,22.4869336 30,15" transform="translate(2 2)"></path></svg>
<span class="sr-only">Facebook</span>
</a>
</li>
<li class="vi-share-buttons__item">
<a href="https://twitter.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--page-footer-links"><!-- Icon twitter-monochrome -->
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="twitter-monochrome"><path fill-rule="evenodd" d="M29.7244391,10.4727174 C29.7436804,10.7543155 29.7436804,11.0372137 29.7436804,11.321282 C29.7436804,19.9971305 23.1388652,30.0016646 11.0632978,30.0016646 L11.0632978,29.9964642 C7.49586817,30.0012746 4.00241328,28.9792788 1,27.0525547 C1.51860339,27.1145687 2.04045698,27.1462908 2.56283061,27.1472008 C5.51974096,27.150191 8.39162584,26.1583572 10.7164355,24.3312195 C7.90760468,24.2784361 5.442776,22.4463582 4.58277064,19.771826 C5.56654397,19.9613782 6.58060925,19.9228958 7.54722148,19.6592388 C4.48383427,19.0403989 2.28084245,16.3487057 2.2800624,13.2234345 L2.2800624,13.1402291 C3.19298117,13.6492119 4.21497696,13.93107 5.25985423,13.962012 C2.3747085,12.035418 1.4846712,8.19770095 3.22717337,5.19788783 C6.56097799,9.29939187 11.4791946,11.7926924 16.7580544,12.0573894 C16.2287904,9.77730263 16.9522869,7.38787881 18.6573467,5.78435559 C21.3011969,3.29807553 25.4601646,3.42561374 27.9465747,6.06946394 C29.4168393,5.77967529 30.8267801,5.24066059 32.1154231,4.47595136 C31.6254215,5.99626923 30.5996555,7.2867323 29.2291072,8.10721512 C30.530621,7.95341522 31.8017129,7.60525281 33,7.07429863 C32.1185433,8.39258349 31.0093118,9.54328757 29.7244391,10.4727174"></path></svg>
<span class="sr-only">Twitter</span>
</a>
</li>
<li class="vi-share-buttons__item">
<a href="https://linkedin.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--page-footer-links"><!-- Icon linkedin-monochrome -->
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="linkedin-monochrome"><path fill-rule="evenodd" d="M26.8823529,18.8776471 C26.8823529,14.9164706 24.3623529,13.3764706 21.8588235,13.3764706 C20.1903529,13.2932941 18.6042353,14.102 17.6917647,15.5011765 L17.5764706,15.5011765 L17.5764706,13.7058824 L13.7058824,13.7058824 L13.7058824,26.8823529 L17.8235294,26.8823529 L17.8235294,19.8741176 C17.7,18.3802353 18.8018824,17.0650588 20.2941176,16.9258824 L20.4505882,16.9258824 C21.76,16.9258824 22.7317647,17.7494118 22.7317647,19.8247059 L22.7317647,26.8823529 L26.8494118,26.8823529 L26.8823529,18.8776471 Z M11.6058824,9.17647059 C11.6149412,7.86623529 10.5608235,6.79729412 9.25058824,6.78823529 L9.25058824,6.78823529 L9.17647059,6.78823529 C7.85717647,6.78905882 6.78905882,7.85882353 6.78905882,9.17729412 C6.78988235,10.4957647 7.858,11.5638824 9.17647059,11.5647059 C10.4858824,11.5968235 11.5737647,10.5616471 11.6058824,9.25223529 C11.6058824,9.25141176 11.6058824,9.25141176 11.6058824,9.25058824 L11.6058824,9.17647059 Z M7.11764706,26.8823529 L11.2352941,26.8823529 L11.2352941,13.7058824 L7.11764706,13.7058824 L7.11764706,26.8823529 Z M31,5.05882353 L31,28.9411765 C31,30.0784706 30.0784706,31 28.9411765,31 L5.05882353,31 C3.92152941,31 3,30.0784706 3,28.9411765 L3,5.05882353 C3,3.92152941 3.92152941,3 5.05882353,3 L28.9411765,3 C30.0784706,3 31,3.92152941 31,5.05882353 L31,5.05882353 Z"></path></svg>
<span class="sr-only">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="vi-typesystem w-75 vi-typesystem--small vi-typesystem--inversed vi-typesystem--collapse-last vi-typesystem--offset-underline">
<p>© 2023 - Teva Pharmaceutical Industries Ltd</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page Back To Top -->
<button class="vi-page-back-to-top" title="Back to top">
<span class="sr-only">Back to Top</span>
</button>
</div>
</div>
</div>
</div>Reading Progress Bar #
To display the Reading Progress Bar add data attribute data-reading-progress-bar="true"
The example is full page, since positioning is relative to the viewport.
<div class="vi-page-layout" data-reading-progress-bar="true">
<!-- ... -->
</div>Stylesheets #
The following stylesheets are required to display this component.
JavaScript #
The following javascripts are required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- 27 Feb 2023 - iOs Safari 16 regression causing horizontal scroll
- 30 Nov 2022 - Stack reading time indicator under modal backdrop.
- 30 Nov 2022 - Fix top offset troubles on after injected alert close.
- 21 Nov 2022 - Reading progress indicator not reaching end of page (!IE11).
- 7 Nov 2022 - Reading progress indicator position when alerts are cramped in.
- 26 Sept 2022 - Fix top offset parent difference.
- 19 Sept 2022 - Fix top offset caching issue
- 28 June 2022 - Fix scrollparent detector
- Remove overscroll iOs safari with force.
- Fix vw issue when layout collapsed
- Minimal layout did needs to scroll too.
- Fix vh issue.
- Accessibility: Change tabfocus back to search toggle, when layout expanded. (js)
Changed
- Whatsapp button can be part of page-layout
- Add calculated vw unit to header, needed for browsers from vendors with different opinions.
- Print: css adjustments
- Country Select
.vi-page-layout__countries element to show country switch.
Added
- 08 Mar 2023 - Sticky mode, by adding
data-sticky="true".
- 14 Dec 2022 - Landing Layout for Site Split Landing page.
- 25 Nov 2022 - Documentation on full width layout.
- Javascript emits event for Country Select Lookup
- Accessibility: Tabindex collapsed state when viewed at 200%;
- Accessibility: Add area-expanded collapsed menu buttons
- Accessibility: Changed text of menu buttons.
- Accessibility: Add visibility hidden / aria-hidden to menu.
- Accessibility: Country select ‘logic navigation sequence’.
- Accessibility: Add
aria-expanded and aria-label to search toggle button.
- RTL support
- Accessibility: css/js changes to show outline on links and have a better tab order flow.
- Accessibility: added id
#vi-content to .vi-page-layout__main.
- Accessibility: added
<a class="vi-page-layout__skip-to-content" href="#vi-content">Skip to main content</a> link.
- Adjustments to support IP lookup version of Country Select Lookup
- Ability to load Page Countries with AJAX.
- Initial draft