/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
  box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* layout */
.container {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* cookie banner */
.cookie-banner-old {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  padding: 1rem;
  background-color: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: .875rem;
  display: flex;
  align-items: center;
  z-index: 60;
}

.cookie-banner {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;

  width: calc(100% - 2rem);
  max-width: 400px;
  padding: 1rem;

  display: flex;
  align-items: center;

  background-color: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: .875rem;
}

@media (min-width: 768px) {
  .cookie-banner {
    right: 3rem;
    bottom: 3rem;
  }
}

.cookie-banner p {
  flex: 1;
}

.cookie-banner p a {
  color: inherit;
}

.cookie-banner img {
  max-width: 1rem;
  cursor: pointer;
}

/* breadcrumb */
.breadcrumb:not(.simple) {
  width: 100%;
  background-color: #282828;
  color: #fff;
}

.breadcrumb:not(.simple) .circle {
  display: none;
}

.breadcrumb h2 {
  font-size: 1.5rem;
  z-index: 2;
}

@media (min-width: 768px) {
  .breadcrumb:not(.simple) {
    height: 50vw;
    max-height: 500px;
    background-color: #101010;
    color: #fff;
    text-align: center;
    padding: 0 1rem;
    box-sizing: border-box;
    position: relative;
  }
  .breadcrumb:not(.simple),
  .breadcrumb:not(.simple) .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .breadcrumb:not(.simple) .circle {
    display: initial;
    height: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    position: absolute;
    background-color: #282828;
    z-index: 0;
  }
  .breadcrumb:not(.simple) h2 {
    font-size: 4vw;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
  }
}

.breadcrumb.simple {
  width: 100%;
  background-color: #282828;
  color: #fff;
}

.breadcrumb.simple .navigation {
  background-color: #eee;
  color: #000;
}

.breadcrumb.simple .navigation ul {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.breadcrumb.simple .navigation li {
  padding: .5rem 0;
}

.breadcrumb.simple .navigation ul li.separator {
  margin: 0 .5rem;
}

.breadcrumb.simple .navigation ul li a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb.simple .navigation ul li a.active,
.breadcrumb.simple .navigation ul li span.active {
  font-weight: bold;
}

.breadcrumb.simple .navigation ul li span {
  color: #666;
}/* typography */
body {
  font-family: Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

h1 { font-size: 2.125rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
/* navbar */
.navbar {
  height: 3.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid #ebebeb;
  background-color: #fff;
  color: #555;

  width: 100%;
  position: fixed;
  top: 0;
  z-index: 50;
  opacity: .9;

  display: flex;
}

.navbar .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}

.navbar .container .toggle {
  display: flex;
}

.navbar .container .toggle button {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: transparent;
  background-image: url("/images/icons/hamburger.svg");
}

.navbar .container .brand {
  text-align: center;
}

.navbar .container .brand a {
  padding: 1rem 0;
}

.navbar .container .brand a img {
  max-width: 120px;
  vertical-align: middle;
}

.navbar .container ul {
  display: none;
  justify-content: center;
  flex: 1;
}

.navbar .container ul li {
  padding: 0 .5rem;
  font-size: 0.875rem;
}

.navbar .container ul li a {
  text-decoration: none;
  color: inherit;
}

.navbar .container ul li a:hover,
.navbar .container ul li.active a {
  color: #000;
}

.navbar .container .i18n {
  display: none;
  font-size: 0.875rem;
  justify-self: end;
  cursor: pointer;

  align-items: center;
}

.navbar .container .i18n span {
  margin: 0 .5rem;
}

.navbar .container .i18n img {
  vertical-align: middle;
  max-width: 0.875rem;
  max-height: 0.875rem;
}

.navbar + main {
  padding-top: calc(3.75rem + 1rem);
}

.navbar + .breadcrumb {
  margin-top: 3.75rem;
}

.navbar + .breadcrumb + main {
  padding-top: 0rem;
}

@media (min-width: 768px) {
  .navbar .container .toggle {
    display: none;
  }

  .navbar .container .brand {
    text-align: initial;
  }

  .navbar .container ul {
    display: flex;
  }

  .navbar .container .i18n {
    display: flex;
  }

  .navbar .container {
    grid-template-columns: 1fr 2fr 1fr;
  }
}/* overlay visibility */
.sidebar-overlay[data-hidden="true"] {
  transform: translateX(100%);
  background-color: rgba(0, 0, 0, 0);
}

.sidebar-overlay:not([data-hidden]),
.sidebar-overlay[data-hidden="false"] {
  transform: translateX(0);
  background-color: rgba(0, 0, 0, .75);
}

/* country sidebar visibility */
.sidebar.country[data-hidden="true"] {
  transform: translateX(100%);
}

.sidebar.country[data-hidden="true"]:dir(rtl) {
  transform: translateX(-100%);
}

.sidebar.country:not([data-hidden]),
.sidebar.country[data-hidden="false"] {
  transform: translateX(0);
}

/* navigation sidebar visibility */
.sidebar.navigation[data-hidden="true"] {
  transform: translateX(-100%);
}

.sidebar.navigation[data-hidden="true"]:dir(rtl) {
  transform: translateX(100%);
}

.sidebar.navigation:not([data-hidden]),
.sidebar.navigation[data-hidden="false"] {
  transform: translateX(0);
}

/* styling */
.sidebar-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

  display: flex;
  flex-direction: column;
  transition: background-color linear .2s;
}

/* common */
.sidebar {
  width: 90%;
  max-width: 400px;
  height: 100%;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;

  display: flex;
  flex-direction: column;

  background-color: #fff;

  transition: transform linear .2s;
}

/* navigation sidebar */
.sidebar.navigation {
  right: unset;
  left: 0;
}

.sidebar.navigation:dir(rtl) {
  right: 0;
  left: unset;
}

.sidebar.navigation {
  background-color: #222;
  color: #fff;
}

.sidebar.navigation .content {
  padding: 2rem 1rem;
  overflow-y: scroll;

  display: flex;
  flex-direction: column;
  flex: 1;
}

.sidebar.navigation .content .close img {
  width: 2rem;
}

.sidebar.navigation .content .close {
  margin-bottom: 1rem;
}

.sidebar.navigation .content .close img {
  width: 2rem;
}

.sidebar.navigation .content ul li {
  font-weight: 300;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.sidebar.navigation .content ul li:last-child {
  border-bottom: none;
}

.sidebar.navigation .content ul li a {
  padding: 1rem 0;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.sidebar.navigation .content .country {
  display: flex;
  flex-direction: column;
  justify-content: end;
  flex: 1;
}

.sidebar.navigation .content .country p {
  padding: 2rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  font-weight: bold;
  text-align: center;
}

/* country sidebar */
.sidebar.country {
  right: 0;
  left: unset;
}

.sidebar.country:dir(rtl) {
  left: 0;
  right: unset;
}

/* country: content */
.sidebar.country .content {
  padding: 2rem 1rem;
  overflow-y: scroll;
}

.sidebar.country .content .close {
  margin-bottom: 1rem;
  text-align: end;
}

.sidebar.country .content .close img {
  width: 2rem;
}

.sidebar.country .content section .title {
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem;
  cursor: pointer;
}

.sidebar.country .content section .title .back {
  align-content: center;
}

.sidebar.country .content section .title .back img {
  width: 1.5rem;
  vertical-align: middle;
}

.sidebar.country .content section .title h4 {
  font-weight: 300;
}

.sidebar.country .content section[aria-hidden="true"] {
  display: none;
}

.sidebar.country .content section.countries:not([aria-hidden]),
.sidebar.country .content section.countries[aria-hidden="false"] {
  display: initial;
}

.sidebar.country .content section ul li {
  font-weight: 300;
  flex: 1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.sidebar.country .content section ul li:last-child {
  border-bottom: none;
}

.sidebar.country .content section ul li .label {
  flex: 1;
  padding: 1rem 0;
}

.sidebar.country .content section ul li .handle {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.sidebar.country .content section ul li a {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  padding: 1rem 0;
}

.sidebar.country .content section ul li a img {
  width: .875rem;
  vertical-align: middle;
  margin-inline-end: .5rem;
}/* footer */
.footer {
  color: #555;
}

.footer a {
  text-decoration: none;
  color: inherit;
}

.footer section {
  border-top: 1px solid #ebebeb;
  padding: 1rem 0;
}

/* footer navigation */
.footer section.navigation {
  font-size: 0.875rem;
}

.footer section.navigation .container {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.footer section.navigation .container ul {
  margin-top: 1rem;

  display: grid;
  column-gap: .5rem;
  row-gap: .5rem;
}

.footer section.navigation .container .lead {
  font-weight: bold;
  font-size: 1rem;
}

.footer section.navigation .container .brands {
  display: none;
}

.footer section.navigation .container .brands ul {
  grid-template-columns: 1fr 1fr 1fr;
}

.footer section.navigation .container .company,
.footer section.navigation .container .contact {
  text-align: center;
}

@media (min-width: 768px) {
  .footer section.navigation .container {
    grid-template-columns: 1fr 1fr;
  }

  .footer section.navigation .container .company,
  .footer section.navigation .container .contact {
    text-align: initial;
  }
}

@media (min-width: 992px) {
  .footer section.navigation .container .brands {
    display: block;
  }

  .footer section.navigation .container {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* footer legal */
.footer section.legal .container {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  justify-content: center;
}

.footer section.legal {
  font-size: 0.75rem;
}

.footer section.legal .container .copyright,
.footer section.legal .container .privacy {
  text-align: center;
  justify-self: center;
}

.footer section.legal .container .privacy {
  display: flex;
  column-gap: .5rem;
}

.footer section.legal .container .privacy a {
  text-decoration: underline;
}

@media (min-width: 576px) {
  .footer section.legal .container {
    grid-template-columns: 2fr 1fr;
  }

  .footer section.legal .container .copyright {
    text-align: initial;
    justify-self: initial;
  }

  .footer section.legal .container .privacy {
    text-align: initial;
    justify-self: end;
  }
}/* button */
.route-home a.btn {
  display: inline-block;
  border: 1px solid #777777;
  border-radius: 2rem;
  padding: .5rem 2rem;
  text-decoration: none;
  color: inherit;
}

.route-home a.btn:hover {
  background-color: #333;
  border-color: #000;
  color: #fff;
}

/* route: home */
.route-home .cover section {
  text-align: center;
  margin-bottom: 4rem;
}

.route-home .cover section img {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}

.route-home .cover section h3 {
  font-weight: 300;
}

.route-home .cover section a {
  margin-top: 1rem;
}

.route-home .coverage {
  border-top: 1px solid #ebebeb;
  padding: 5rem 0 4rem;
  text-align: center;
}

.route-home .coverage h3 {
  font-weight: 300;
}

.route-home .coverage .grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 1rem;

  margin: 3rem auto;
  max-width: 1000px;

  justify-content: center;
  align-items: center;
}

.route-home .coverage .grid .item {
  flex: 1;
  width: 20%;
  min-width: 8rem;
}

.route-home .coverage .grid .item p {
  font-weight: bold;
}

.route-home .coverage .grid .item img {
  width: 100%;
  max-width: 4rem;
}/* route: brands */
.route-brands .grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 3rem;
}

.route-brands .grid .item {
  text-align: center;
}

.route-brands .grid .item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  max-width: 120px;
  margin: 0 auto;
}

@media (min-width: 576px) {
  .route-brands .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .route-brands .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}/* route: services */

/* hero */
.route-services .hero {
  width: 100%;
  height: 500px;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
}

.route-services .hero img,
.route-services .hero picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

.route-services .hero .info {
  width: 80%;
  z-index: 2;
  position: relative;
  padding: 2rem;
  color: #fff;

  text-align: center;
}

.route-services .hero .info h2 {
  font-weight: 300;
  margin-bottom: 1rem;

  font-size: 2.5rem;
}

@media (min-width: 768px) {
  .route-services .hero {
    height: 400px;
    align-items: normal;
    justify-content: center;
  }

  .route-services .hero .info {
    text-align: initial;
  }
}

/* sections */
.route-services .sections {
  margin: 1rem 0 0;
}

.route-services .sections section {
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
}

.route-services .sections section:last-child {
  border-bottom: 0;
}

.route-services .sections section .info {
  text-align: center;
  margin-bottom: 1rem;
}

.route-services .sections section .info h3 {
  font-size: 1.75rem;
  font-weight: 300;
}

.route-services .sections section .grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1rem;
  column-gap: 1rem;
  align-items: center;
  justify-items: center;

  overflow-x: hidden;
}

@media (min-width: 768px) {
  .route-services .sections section .grid {
    grid-template-columns: 1fr 1fr;
  }
}

.route-services .sections section .grid .col {
  max-width: 100%;
  overflow-x: hidden;
}

.route-services .sections section .grid .col video {
  max-height: 300px;
}

.route-services .sections section .grid .col .card {
  text-align: center;
}

.route-services .sections section .grid .col .card img {
  max-height: 4rem;
  margin-bottom: .5rem;
}

.route-services .sections section .grid .col .card p {
  margin: .5rem 0;
  font-size: .875rem;
}

.route-services .sections section .grid .col .card a.btn {
  display: inline-block;
  border: 1px solid #777777;
  border-radius: 2rem;
  padding: .5rem 2rem;
  text-decoration: none;
  color: inherit;

  margin-top: .5rem;
}

.route-services .sections section .grid .col .card a.btn:hover {
  background-color: #333;
  border-color: #000;
  color: #fff;
}

/* gallery */
.route-services .sections section .grid .col .gallery {
  display: flex;
  align-items: center;
  overflow-x: hidden;
  width: 100%;
}

.route-services .sections section .grid .col .gallery .inner {
  overflow-x: hidden;
}

.route-services .sections section .grid .col .gallery .arrow {
  padding: 0 .5rem;
  cursor: pointer;
}

.route-services .sections section .grid .col .gallery .arrow img {
  width: 2.5rem;
}

.route-services .sections section .grid .col .gallery .cards {
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
}

.route-services .sections section .grid .col .gallery .cards .card {
  width: 100%;
  flex: 0 0 100%;
}

.route-services .sections section .grid .col .gallery ul.indicator {
  display: flex;
  margin: 1rem 0;
  justify-content: center;
  column-gap: 1rem;
}

.route-services .sections section .grid .col .gallery ul.indicator li {
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
  border: 1px solid #000;
  cursor: pointer;
  transition: all .2s linear;
}

.route-services .sections section .grid .col .gallery ul.indicator li.active {
  background-color: #EE7E36;
}/* route: face-shape */
.route-face-shape {
  margin-top: 1rem;
}

.route-face-shape .intro {
  text-align: center;
  padding: 0 4vw;
  margin-bottom: 3rem;
  margin-top: 2rem;
}

.route-face-shape .intro p {
  font-size: 1.5rem;
  font-weight: 300;
}

.route-face-shape .wizard[data-step="select-gender"],
.route-face-shape .wizard[data-step="select-shape"] {
  display: grid;
}

.route-face-shape .wizard[data-step="select-gender"] {
  grid-template-columns: 1fr 1fr;
}

.route-face-shape .wizard[data-step="select-shape"] {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .route-face-shape .wizard[data-step="select-shape"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

.route-face-shape .wizard[data-step="select-gender"] .gender,
.route-face-shape .wizard[data-step="select-shape"] .shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.route-face-shape .wizard[data-step="select-gender"] .gender hr,
.route-face-shape .wizard[data-step="select-shape"] .shape hr {
  width: 0;
  opacity: 0;
  transition: all .2s linear;
  border: 1px solid #000;
}

.route-face-shape .wizard[data-step="select-gender"] .gender:hover hr,
.route-face-shape .wizard[data-step="select-shape"] .shape:hover hr {
  width: 100%;
  opacity: 1;
}

.route-face-shape .wizard[data-step="select-gender"] .gender img {
  width: 100%;
  max-width: 400px;
}

.route-face-shape .wizard[data-step="select-shape"] .shape img {
  width: 100%;
  max-width: 100%;
}

.route-face-shape .wizard[data-step="result"] .result,
.route-face-shape .wizard[data-step="result"] .styles {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .route-face-shape .wizard[data-step="result"] .result {
    grid-template-columns: 7fr 8fr;
  }
  .route-face-shape .wizard[data-step="result"] .styles {
    grid-template-columns: 8fr 7fr;
  }
}

.route-face-shape .wizard[data-step="result"] .result img,
.route-face-shape .wizard[data-step="result"] .styles img {
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 0 auto;
}

.route-face-shape .wizard[data-step="result"] .result .text,
.route-face-shape .wizard[data-step="result"] .styles .text {
  margin-top: 1rem;
}

.route-face-shape .wizard[data-step="result"] .result .text h4,
.route-face-shape .wizard[data-step="result"] .styles .text h4 {
  border-bottom: 2px solid #000;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
}

.route-face-shape .wizard[data-step="result"] .styles .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1rem;
  row-gap: 1rem;
  text-align: center;
  margin-top: 1rem;
}

.route-face-shape .wizard[data-step="result"] .styles .gallery .item img {
  width: 100%;
  max-width: 100px;
}/* route: onesight */
.route-onesight .hero {
  height: 50vw;
  max-height: 500px;
  position: relative;

  display: flex;
  justify-content: flex-end;
}

.route-onesight .hero:dir(rtl) {
  justify-content: flex-start;
}

.route-onesight .hero img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;

  position: absolute;
  top: 0;
  left: 0;
}

.route-onesight .hero .info {
  position: relative;
  padding: min(3vw, 2rem);
  text-align: end;
  color: #fff;
}

.route-onesight .hero .info:dir(rtl) {
  text-align: start;
}

.route-onesight .hero .info h5 {
  font-size: min(3vw, 1.125rem);
  text-transform: uppercase;
  margin: min(3vw, 1rem) 0;
}

.route-onesight .hero .info a {
  display: inline-block;
  border: 3px solid #fff;
  padding: min(1vw, .5rem);
  color: inherit;
  font-weight: bold;
  font-size: min(3vw, 1.125rem);
  text-decoration: none;
}

.route-onesight .hero .info a:hover {
  background-color: #fff;
  color: #000;
}

.route-onesight .hero .info img.logo {
  max-width: 40%;
}

/* impact */
.route-onesight .impact {
  margin: 2rem 0;

  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
  justify-items: center;
  align-items: center;
}

.route-onesight .impact img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  object-position: top;
  flex: 1;
  margin-bottom: 1rem;
  justify-content: center;
}

.route-onesight .impact h4:not(:first-child) {
  margin-top: 1rem;
}

/* work */
.route-onesight .work {
  margin-bottom: 2rem;
}

.route-onesight .work h3.separator {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  text-align: center;
}

.route-onesight .work h3.separator::before,
.route-onesight .work h3.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.route-onesight .work h3.separator:not(:empty)::before {
  margin-right: 1em;
}

.route-onesight .work h3.separator:not(:empty)::after {
  margin-left: 1em;
}

.route-onesight .work .slide {
  position: relative;
  height: 350px;
  padding: 2rem;

  display: flex;
  flex-direction: column;
  justify-content: end;
}

.route-onesight .work .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;

  top: 0;
  left: 0;
  position: absolute;

  opacity: 0;
  transition: opacity .5s linear;
}

.route-onesight .work .slide img.active {
  opacity: 1;
}

.route-onesight .work .slide .info {
  width: 90%;
  position: relative;
  color: #fff;
  text-align: center;
  text-shadow: 0px 1px 4px #23430C;
}

@media (min-width: 768px) {
  .route-onesight .work .slide .info {
    max-width: 300px;
    text-align: initial;
  }
}

.route-onesight .banner {
  padding: 1rem 1.5rem;
  background-color: #4ec3e0;
  color: #fff;

  display: grid;
  flex-direction: row;
  align-items: center;
  grid-template-columns: 1fr;
  column-gap: 1rem;
  row-gap: 1rem;
}

.route-onesight .banner h3 {
  flex: 1;
  text-align: center;
}

.route-onesight .banner a {
  display: inline-block;
  background-color: #fff;
  padding: min(1vw, .5rem);
  color: #4ec3e0;
  font-weight: bold;
  font-size: min(3vw, 1.125rem);
  text-decoration: none;
  border-radius: 2rem;
  text-align: center;
}

@media (min-width: 768px) {
  .route-onesight .impact {
    grid-template-columns: 1fr 2fr;
  }
  .route-onesight .impact img {
    margin-bottom: 0;
  }
  .route-onesight .banner {
    grid-template-columns: 3fr 1fr;
  }
  .route-onesight .banner h3 {
    text-align: initial;
  }
}

@media (min-width: 992px) {
  .route-onesight .banner {
    grid-template-columns: 4fr 1fr;
  }
}

/* social */
.route-onesight .social {
  color: #4ec3e0;
  text-align: center;
  margin: 2rem 0 0;
}

.route-onesight .social ul {
  width: 300px;
  max-width: 90%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 1rem auto;
}

.route-onesight .social ul li {
  background-color: #4ec3e0;
  width: 2.5rem;
  height: 2.5rem;
}

.route-onesight .social ul li a {
  display: block;
  padding: .5rem;
}

.route-onesight .social ul li img {
  width: 1.5rem;
  vertical-align: middle;
}/* blankslate */
.route-stores .blankslate {
  text-align: center;
}

.route-stores .blankslate h2 {
  text-align: center;
}

.route-stores .blankslate img {
  width: 100%;
  max-width: 250px;
  height: 250px;
}

/* leaflet rtl support */
.route-stores .leaflet-popup-content-wrapper {
  text-align: start;
}

.route-stores .leaflet-container a.leaflet-popup-close-button:dir(rtl) {
  right: unset;
  left: 0;
}

/* leaflet */
.route-stores #map {
  width: 100%;
  height: max(70vh, 450px);
  z-index: 10;
}

.route-stores .leaflet-popup-content-wrapper {
  border-radius: 0;
}

/* leaflet popup */
.route-stores .leaflet-popup-content {
  margin: .5rem 1rem;
  line-height: initial;

  font-family: Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.route-stores .leaflet-popup-content p {
  margin: initial;
}

.route-stores .leaflet-container a.leaflet-popup-close-button {
  font-family: Roboto, system-ui, sans-serif;

  font-size: 24px;
  margin: .5rem .5rem;
}

.route-stores .leaflet-popup-content .popup .title {
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid #ddd;
}

.route-stores .leaflet-popup-content .popup .title h6 {
  width: 90%;
}

.route-stores .leaflet-popup-content .popup .title p {
  font-size: .75rem;
  color: #666;
  font-style: italic;
}

.route-stores .leaflet-popup-content .popup table {
  width: 100%;
  margin-bottom: .5rem;
  font-size: .875rem;
}

.route-stores .leaflet-popup-content .popup table tr th,
.route-stores .leaflet-popup-content .popup table tr td {
  padding: .05rem 0;
}

.route-stores .leaflet-popup-content .popup table tr th {
  text-align: start;
  font-weight: bold;
  text-transform: capitalize;
}

.route-stores .leaflet-popup-content .popup table tr td {
  text-align: end;
}

.route-stores .leaflet-popup-content .popup table + .links {
  border-top: 1px solid #ddd;
  padding-top: .5rem;
  margin-top: .5rem;
}

.route-stores .leaflet-popup-content .popup .links {
  margin: 1rem 0 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: .75rem;
}

.route-stores .leaflet-popup-content .popup .links a:not(:first-child) {
  margin-inline-start: .5rem;
}

.route-stores .leaflet-marker-icon.marker-cluster {
  color: #fff;
  border-radius: 100%;
  display: flex;
  align-items: center;
  box-shadow: 0 0 0 6px rgba(40, 40, 40, .75);
  font-weight: bold;
}

.route-stores .leaflet-marker-icon.marker-cluster div {
  width: 100%;
  height: 100%;
  background-color: rgba(40, 40, 40, .75);
  background-color: #000;
  border-radius: 100%;
  box-shadow: 0 0 0 12px rgba(40, 40, 40, .25);

  display: flex;
  align-items: center;
  justify-content: center;
}

.route-stores .leaflet-control-home {
  border-radius: 2px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 22px;
  background-color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.route-stores .leaflet-control-home:hover {
  background-color: #f4f4f4;
}

.route-stores .leaflet-control-home img {
  width: 75%;
  vertical-align: middle;
  cursor: pointer;
}

/* cities */
.route-stores .cities {
  margin: 2rem 0 0;
}

.route-stores .cities section h4 {
  text-transform: uppercase;
}

.route-stores .cities section ul {
  margin: 1rem 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
}

@media (min-width: 768px) {
  .route-stores .cities section ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.route-stores .cities section ul li {
  width: 100%;
  border: 1px solid #ebebeb;
  margin: .5rem 0;
  padding: .5rem 1rem;

  display: flex;
  flex-direction: column;
}

.route-stores .cities section ul li:hover,
.route-stores .cities section ul li.active {
  background-color: #000;
  border-color: #000;
  color: #fff;
  cursor: pointer;
}

.route-stores .cities section ul li .address {
  font-size: .75rem;
}/* route: history */
.route-history img {
  width: 100%;
  margin: 0 auto;
}

.route-history .img-card {
  position: relative;
}

.route-history .img-card .lead {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 90%;
  text-align: center;
  font-size: min(max(3vw, .875rem), 1.5rem);
}/* route: coverage */
.route-coverage {
  margin-top: 1rem;
}

.route-coverage .intro {
  text-align: center;
  padding: 0 4vw;
  margin-bottom: 2rem;
}

.route-coverage .intro h1 {
  text-transform: uppercase;
}

.route-coverage .intro p {
  font-size: 1.5rem;
  margin-top: 3rem;
  font-weight: 300;
}

.route-coverage .accordion:not(.basic) {
  margin-bottom: 2rem;
}

.route-coverage .accordion .item {
  margin-bottom: .5rem;
  display: grid;
}

.route-coverage .accordion .item .toggle {
  display: grid;
  grid-template-columns: fit-content(8ch) 10fr fit-content(8ch);
  column-gap: 1rem;
  align-items: center;
  cursor: pointer;
}

.route-coverage .accordion .item .toggle[data-disabled="true"] {
  cursor: default;
}

.accordion:not(.basic) .item .toggle {
  background-color: #c3c4c5;
  padding: 1.5rem 1rem;
}

.route-coverage .accordion .item .toggle img {
  width: 4rem;
  height: 4rem;
}

.route-coverage .accordion .item .toggle .handle img {
  width: 2.5rem;
  height: 2.05rem;
}

.route-coverage .accordion .item .content {
  display: none;
  margin: .5rem .5rem 0;
  margin-top: 1rem;
}

.accordion:not(.basic) .item .content {
  background-color: #eee;
  padding: 1.5rem 1rem;
  margin-top: initial;
}

.route-coverage .accordion .item.active .content {
  display: block;
}

.route-coverage .accordion .item.active .content p {
  margin-bottom: 1rem;
}

.route-coverage .accordion .item.active .content p:last-child {
  margin-bottom: 0;
}/* route: privacy */
.route-privacy {
  margin-top: 3rem;
}

.route-privacy h6 {
  margin: 1rem 0;
}

.route-privacy p {
  margin: 0 0 1rem;
}

.route-privacy ul {
  display: block;
  margin: 0 0 1rem;
}

.route-privacy ul li {
  display: block;
}/* route: terms */
.route-terms {
  margin-top: 3rem;
}

.route-terms h6 {
  margin: 1rem 0;
}

.route-terms p {
  margin: 0 0 1rem;
}

.route-terms ul {
  display: block;
  margin: 0 0 1rem;
}

.route-terms ul li {
  display: block;
}
body[data-sidebar-visible="true"] {
  overflow-y: hidden;
}

body:not([data-sidebar-visible]),
body[data-sidebar-visible="false"] {
  overflow-y: initial;
}

/* main */
main {
  padding: 1rem 0;
}

/* route: error */
.error {
  text-align: center;
  padding: 2rem 4rem;
  max-width: 800px;
  margin: 0 auto;
}

.error img {
  width: 100%;
  max-width: 250px;
  height: 250px;
}

.error .btn {
  display: inline-block;
  border: 1px solid #777777;
  border-radius: 2rem;
  padding: .5rem 2rem;
  text-decoration: none;
  color: inherit;
  margin: 1rem 0;
}

/* route: country */
.route-country {
  padding: 1rem 0;
}

.route-country .list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: .5rem;
  row-gap: 1rem;
  text-align: center;
}

@media (min-width: 576px) {
  .route-country .list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .route-country .list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .route-country .list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .route-country .list {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

.route-country .list .item {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: .5rem;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.route-country .list .item a {
  color: inherit;
  text-decoration: none;
}

.route-country .list .item .code {
  width: 3rem;
  height: 3rem;
  border-radius: 10rem;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin: 0 auto;
}