@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/*** Breakpoints ***/
/*** Page Widths ***/
:root {
  --font-family: 'Montserrat';
  --logo: url('../assets/images/logo.svg');
  --space-8: 8px;
  --space-10: 10px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-96: 96px;
  --box-shadow-round: 0px 0px 8px rgba(0, 0, 0, 0.08);
}
.icon {
  display: inline-block;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  background: black;
}
.icon.icon-arrow-right-light {
  mask-image: url('../assets/icons/icon-arrow-right-light.svg');
}
.icon.icon-open {
  mask-image: url('../assets/icons/icon-chevron-right.svg');
}
.icon.icon-close {
  mask-image: url('../assets/icons/icon-chevron-down.svg');
}
.header {
  width: 100%;
  padding-block: var(--space-14);
  box-shadow: var(--box-shadow-round);
  font-size: 12px;
}
@media (min-width: 768px) {
  .header {
    padding-block: var(--space-20);
    font-size: 14px;
  }
}
.header .container-header {
  padding: 0 var(--space-10);
}
@media (min-width: 768px) {
  .header .container-header {
    padding: 0 var(--space-24);
  }
}
.header > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header > div .site-logo {
  width: 75px;
  height: 36px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--logo);
}
@media (min-width: 768px) {
  .header > div .site-logo {
    width: 100px;
    height: 48px;
  }
}
.header > div span.label {
  max-width: 63px;
  text-align: right;
}
@media (min-width: 768px) {
  .header > div span.label {
    max-width: none;
  }
}
.country-selector-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.country-selector-content .title {
  text-align: center;
  font-size: 24px;
  line-height: 26px;
  font-style: normal;
  font-weight: 700;
  margin-bottom: var(--space-16);
}
@media (min-width: 768px) {
  .country-selector-content .title {
    font-size: 40px;
    line-height: 42px;
    color: #4C4639;
    margin-bottom: var(--space-24);
  }
}
.country-selector-content .subtitle {
  font-size: 18px;
  line-height: 22px;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  margin-bottom: var(--space-64);
}
@media (min-width: 768px) {
  .country-selector-content .subtitle {
    font-size: 20px;
    line-height: 24px;
    color: #4C4639;
    margin-bottom: var(--space-96);
  }
}
.country-selector-content .country-selector {
  width: max-content;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border: 0px solid #e1e1e1;
  box-shadow: 0 2px 8px 0px #00000029;
  font-size: 14px;
  line-height: 22px;
  width: 340px;
  position: relative;
}
.country-selector-content .country-selector.active {
  border-bottom: none;
}
.country-selector-content .country-selector.active .country-list {
  visibility: visible;
  height: max-content;
}
.country-selector-content .country-selector.active .label .icon {
  transform: rotate(90deg);
}
.country-selector-content .country-selector .label {
  display: flex;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding: var(--space-16) var(--space-16);
}
.country-selector-content .country-selector .label .icon {
  width: 16px;
  height: 16px;
  background-color: #265488;
}
.country-selector-content .country-selector .country-list {
  visibility: hidden;
  height: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 var(--space-16);
  border: 0px solid #e1e1e1;
  border-top: none;
  box-shadow: 0 2px 8px 0px #00000029;
  position: absolute;
  top: 54px;
}
.country-selector-content .country-selector .country-list li {
  width: 100%;
  padding: var(--space-16) 0px;
}
.country-selector-content .country-selector .country-list li a.country-list-item {
  color: black;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.country-selector-content .country-selector .country-list li a.country-list-item .flag-container {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  overflow: hidden;
  justify-content: center;
  align-items: flex-start;
}
.country-selector-content .country-selector .country-list li a.country-list-item .flag {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 38px;
  height: 22px;
  margin-top: -1px;
}
.country-selector-content .country-selector .country-list li a.country-list-item .flag.flag-uk {
  background-image: url(../assets/images/flag-uk.svg);
}
.country-selector-content .country-selector .country-list li a.country-list-item .flag.flag-de {
  background-image: url(../assets/images/flag-de.svg);
}
.country-selector-content .country-selector .country-list li a.country-list-item .flag.flag-se {
  background-image: url(../assets/images/flag-se.svg);
}
.country-selector-content .country-selector .country-list li a.country-list-item .flag.flag-at {
  background-image: url(../assets/images/flag-at.svg);
}
.country-selector-content .active::after {
  display: block;
  background-color: white;
  width: 340px;
  height: 15px;
  content: " ";
  position: absolute;
  top: 48px;
  right: 0px;
}
.sites-description-content {
  text-align: center;
  margin-top: 280px;
  margin-bottom: var(--space-24);
}
@media (min-width: 768px) {
  .sites-description-content {
    margin-top: 332px;
    margin-bottom: var(--space-48);
  }
}
.sites-description-content h3.title {
  font-size: 20px;
  line-height: 22px;
}
@media (min-width: 768px) {
  .sites-description-content h3.title {
    font-size: 24px;
    line-height: 26px;
  }
}
.sites-description-content .sites-grid {
  font-size: 14px;
  line-height: 20px;
  display: grid;
  margin: auto;
  margin-top: var(--space-48);
  row-gap: var(--space-32);
}
@media (min-width: 768px) {
  .sites-description-content .sites-grid {
    font-size: 16px;
    line-height: 22px;
    width: max-content;
    margin-top: var(--space-64);
    padding: 0 40px;
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-48);
    column-gap: var(--space-64);
  }
}
.sites-description-content .sites-grid h4.site-name {
  font-size: 16px;
  line-height: 18px;
  margin: 0px 0px var(--space-16);
}
@media (min-width: 768px) {
  .sites-description-content .sites-grid h4.site-name {
    font-size: 18px;
    line-height: 20px;
    margin: 0px 0px var(--space-24);
  }
}
.sites-description-content .sites-grid .site-item {
  margin: auto;
}
@media (min-width: 768px) {
  .sites-description-content .sites-grid .site-item {
    max-width: 500px;
  }
}
footer {
  display: block;
  overflow: hidden;
  background-color: #f3f3f3;
  color: #000000;
}
footer .footer-grid {
  display: grid;
  grid-template-areas: 'info' 'nav-menu' 'site-logo';
  text-align: center;
  margin: -1px;
}
footer .footer-grid .footer-site-logo {
  grid-area: site-logo;
}
footer .footer-grid .info {
  grid-area: info;
}
footer .footer-grid .menu {
  grid-area: nav-menu;
}
@media (min-width: 768px) {
  footer .footer-grid {
    max-width: 1170px;
    margin: auto;
    grid-template-areas: 'site-logo' 'info' 'nav-menu';
  }
}
footer .footer-grid .info {
  text-align: center;
  padding: var(--space-24);
}
@media (min-width: 768px) {
  footer .footer-grid .info {
    padding: 0px;
  }
}
footer .footer-grid .info .name {
  display: inline-block;
  margin-bottom: var(--space-20);
  font-size: 16px;
  font-weight: 700;
}
@media (min-width: 768px) {
  footer .footer-grid .info .name {
    display: none;
  }
}
footer .footer-grid .info .description {
  display: block;
  font-size: 12px;
  line-height: 14px;
}
@media (min-width: 768px) {
  footer .footer-grid .info .description {
    font-size: 14px;
    line-height: 18px;
  }
}
footer .footer-grid .footer-site-logo {
  padding: var(--space-10) 0;
  background-color: #002069;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  footer .footer-grid .footer-site-logo {
    padding: var(--space-36) 0 var(--space-16);
    background-color: #f3f3f3;
  }
}
footer .footer-grid .footer-site-logo .logo-footer {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  background-image: url(../assets/images/logo-mainbrand.svg);
  width: 100px;
  height: 20px;
}
@media (min-width: 768px) {
  footer .footer-grid .footer-site-logo .logo-footer {
    filter: invert(1);
  }
}
footer .footer-grid .menu {
  padding: var(--space-32) 0 var(--space-36);
}
@media (min-width: 768px) {
  footer .footer-grid .menu {
    display: grid;
    padding-top: var(--space-48);
    grid-auto-columns: 1fr;
    gap: 3px;
  }
  footer .footer-grid .menu .icon {
    display: none;
  }
}
footer .footer-grid .menu .menu-section {
  margin: 0;
  padding-bottom: var(--space-16);
  text-align: center;
  list-style: inside;
}
@media (min-width: 768px) {
  footer .footer-grid .menu .menu-section {
    padding-bottom: 0;
    grid-row: 1;
    margin: 0 auto;
  }
}
footer .footer-grid .menu .menu-section:last-child {
  padding-bottom: 0;
}
footer .footer-grid .menu .menu-section .icon {
  width: 10px;
  height: 10px;
}
footer .footer-grid .menu .menu-section .icon-close {
  display: none;
}
footer .footer-grid .menu .menu-section .menu-item {
  display: none;
  padding: 0 0 var(--space-20) 0;
  font-size: 12px;
  line-height: 14px;
}
@media (min-width: 768px) {
  footer .footer-grid .menu .menu-section .menu-item {
    display: block;
    font-size: 14px;
    line-height: 18px;
    vertical-align: text-top;
  }
}
footer .footer-grid .menu .menu-section .menu-item a {
  color: #000000;
  text-decoration: none;
  white-space: break-spaces;
}
@media (max-width: 768px) {
  footer .footer-grid .menu .menu-section.active .icon-close {
    display: inline-block;
  }
  footer .footer-grid .menu .menu-section.active .icon-open {
    display: none;
  }
  footer .footer-grid .menu .menu-section.active .menu-item {
    display: block;
  }
}
footer .footer-grid .menu .menu-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-16);
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  padding-bottom: var(--space-20);
}
@media (min-width: 768px) {
  footer .footer-grid .menu .menu-header {
    display: block;
    padding-bottom: var(--space-16);
    font-size: 16px;
    line-height: 18px;
  }
}
footer .footer-grid .menu .icon-open {
  background: #000000;
}
footer .footer-grid .menu .icon-close {
  background: #000000;
}
footer .company-info {
  background-color: #002069;
  color: #ffffff;
  width: 100%;
  display: block;
  text-align: center;
  padding: var(--space-20) 0;
  margin: auto;
  font-size: 10px;
  line-height: 14px;
}
@media (min-width: 768px) {
  footer .company-info {
    padding: var(--space-16) 0;
    font-size: 12px;
  }
}
html,
body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  font-family: var(--font-family);
}
html *,
body *,
html *::before,
body *::before,
html *::after,
body *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html button,
body button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
html ul,
body ul,
html li,
body li {
  margin: 0;
  padding: 0;
}
html ul,
body ul {
  list-style-type: none;
}
html .container,
body .container {
  margin: 0 auto 0;
  padding: 0 var(--space-20);
  width: 100%;
}
@media (min-width: 1100px) {
  html .container,
  body .container {
    margin: 0 auto 0;
    max-width: 1920px;
  }
}
