@charset "UTF-8";

/*
 * GLOBALS
 */


html {
  color: #333;
  background: #fff;
  font-family: 'FF DIN', Arial, Helvetica, sans-serif;
  font-size: 100%;
  /* use alternate stylistic set for better @*/
  font-feature-settings: "ss04";
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

html.wf-loading {
  font-family: Arial, Helvetica, sans-serif;
}

/*
 * Box-model
 *
 * "Ugh. If I say the width is 200px, gosh darn it, it's gonna be a 200px wide
 * box even if I have 20px of padding." - Paul Irish
 *
 * Sources:
 * - http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * - http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}


/*
 * Vertical Rhythm
 *
 * To keep a harmonic vertical rhythm, all elements placed in text/content must
 * have the same bottom margin. Also, it's good to avoid that every element
 * comes with other margin values, so we set them here - the value is always
 * base font-size * line height.
 *
 * Add all site-specific elements you want to the selector, f.e. .box, .msg or
 * similar.
 */
h1, .alpha, h2, .beta, h3, .gamma, h4, .delta, h5, .epsilon h6, .zeta,
ul, ol, dl,
blockquote, p, address,
table,
fieldset, figure,
pre, hr,
.media-box,
.csc-default {
  margin: 0 0 1.5rem 0;
}


/*
 * Headings
 *
 * When we define a headering we also define a corresponding class to go with it.
 * This allows us to apply, say, class="alpha" to a h3; a double-stranded
 * headering hierarchy.
 * Source: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
 */
h1, .alpha,
h2, .beta,
h3, .gamma,
h4, .delta,
h5, .epsilon,
h6, .zeta {
  font-weight: 700;
  color: #222;
  line-height: 1.1;
}

h1, .alpha {
  text-transform: uppercase;
  font-size: 2em;
  margin-bottom: 2.5rem;
}

h2, .beta {
  font-size: 1.5em;
  margin-bottom: 2.5rem;
}

h3, .gamma {
  text-transform: uppercase;
  font-family: 'FF DIN', Arial, Helvetica, sans-serif;
  font-size: 1em;
}

h4, .delta {
  text-transform: uppercase;
  font-family: 'FF DIN Condensed', Arial, Helvetica, sans-serif;
  color: #FFEB00;
  font-size: 3.125em;
}

h5, .epsilon {
}

h6, .zeta {
}


/*
 * Media
 */
img,
video {
  max-width: 100%;
  height: auto;
}


/*
 * Lists
 */
ul {
}

ol {
}

li {
}

/* Remove unnecessary margins for nested lists */
ul ul,
ol ol {
  margin-bottom: 0;
}


/*
 * Quotes
 */
blockquote {
}

blockquote p {
}

cite {
}


/*
 * Tables
 */
table {
}

caption {
}

tr {
}

th {
}

td {
}


/*
 * Forms
 *
 * Form and inputs (text-like) elements get styled here, input[type="submit"] and
 * [type="button"] get their styles from the button class.
 */
fieldset {
}

legend {
}

label {
}

/* Placeholder */
::-webkit-input-placeholder {
}

:-moz-placeholder {
}

::-moz-placeholder {
}

:-ms-input-placeholder {
}

/* Global fields */
input,
textarea,
select {
}

/* Text input fields */
input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=email],
input[type=search] {
}

/* Turn off number spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* Radio buttons and checkboxes */
input[type=radio],
input[type=checkbox] {
  border: 0 none; /* remove square arround radio/check in IE */
}

input[type=radio] {
}

input[type=checkbox] {
}

/* Read-only and disabled input fields */
input[type=text][readonly],
input[type=url][readonly],
input[type=tel][readonly],
input[type=number][readonly],
input[type=color][readonly],
input[type=email][readonly],
input[type=search][readonly],
input[type=text][disabled],
input[type=url][disabled],
input[type=tel][disabled],
input[type=number][disabled],
input[type=color][disabled],
input[type=email][disabled],
input[type=search][disabled] {
}

/* Read-only and disabled radio buttons and checkboxes */
input[type=radio][readonly],
input[type=checkbox][readonly],
input[type=radio][disabled],
input[type=checkbox][disabled] {
}

/* Textarea */
textarea {
  width: 100%;
}

/* Select */
select {
}


/*
 * Text formatting
 */
a {
  color: #9D9D9C;
  text-decoration: none;
}

a:hover {
  color: #000;
}

a:focus {
  color: #FFEB00;
}

b,
strong {
}

i {
}


/*
 * css_styled_content
 */

/* Image Caption */
.csc-textpic-caption {
  padding-top: 18px;
}

/* In text left and right responsive hotfix */
@media (max-width: 768px) {
  .csc-textpic-intext-left-nowrap .csc-textpic-text {
    margin-left: 0;
  }

  .csc-textpic-intext-right-nowrap .csc-textpic-text {
    margin-right: 0;
  }
}


/*
 * HELPER & COMPONENTS
 *
 * Helpers and components are globally available elements that only need to be
 * defined/styled on time and than may be issued where ever needed. Examples
 * would be the often used "messaging system" and our container, row and width
 * classes. See Snippets.css for further examples.
 */

/*
 * Page layout
 */
.page {
  max-width: 1920px;
  margin: 0 auto;
}

.container {
  max-width: 1500px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}


/*
 * Width classes
 *
 * These classes are examples used in our standard to control the width of the
 * column-classes. Define them suited to your project, like so:
 * .w[num]p := [num]% (preferred)
 * .w[num]px := [num]px
 *
 * Append size modifiers to your width-classes like shown and define media query
 * sizes like "--xxl", "--l", "--m", "--s", "--xs"! With this scheme you're able
 * to switch widths based on media queries, i.e. a four column row gets a two
 * column and later a one column row. Only add things needed!
 *
 * See examples in the media query section at the end of this file.
 */
.f175px {
  -ms-flex-preferred-size: 175px;
  flex-basis: 175px;
}

.f250px {
  -ms-flex-preferred-size: 250px;
  flex-basis: 250px;
}

.f370px {
  -ms-flex-preferred-size: 370px;
  flex-basis: 370px;
}

.w20p {
  width: 20%;
}

.w25p {
  width: 25%;
}

.f33p {
  -ms-flex-preferred-size: 33.3333333333%;
  flex-basis: 33.3333333333%;
}

.w33p {
  width: 33.3333333333%;
}

.w50p {
  width: 50%;
}

.w60p {
  width: 60%;
}

.w75p {
  width: 75%;
}

.w80p {
  width: 80%;
}

.w100p {
  width: 100%;
}


/*
 * Height classes
 */
.h100p {
  height: 100%;
}

/*
 * Row gutter modifier
 */
.row--wideGutter {
  margin-left: -2.5em;
}

.row--wideGutter > .col {
  padding-left: 2.5em;
}

/*
 * Flex row gutter modifier
 */

/* 2px */
.flex-row--2px-gutter {
  margin-left: -2px;
}

.flex-row--2px-gutter > .flex-col {
  padding-left: 2px;
}

/* Wide */
.flex-row--wide-gutter {
  margin-left: -2.5rem;
}

.flex-row--wide-gutter > .flex-col {
  padding-left: 2.5rem;
}

@media (min-width: 1024px) {
  .flex-row--wide-gutter {
    margin-left: -5rem;
  }

  .flex-row--wide-gutter > .flex-col {
    padding-left: 5rem;
  }
}

@media (min-width: 1200px) {
  .flex-row--wide-gutter {
    margin-left: -7rem;
  }

  .flex-row--wide-gutter > .flex-col {
    padding-left: 7rem;
  }
}


/*
 * Flex grid modifiers
 */

/* Parent modifiers */
@media (min-width: 468px) {
  .f-direction-row--xs {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .f-direction-row--m {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

/* Child modifiers */
@media (min-width: 768px) {
  .f-0--m {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
}


/*
 * Logo
 */
.logo,
.logo__image {
  display: block;
  width: 170px;
}


/*
 * Dropdown component
 *
 * Example:
 * <ul>
 *   <li class="dropdown-item">
 *     <!-- Alternative: <a class="dropdown-item__link">Hover me.</a> -->
 *     <span class="dropdown-item__link">Hover me.</span>
 *     <ul class="dropdown-item__list">
 *       <li>
 *         <a href="">This is a dropdown. Madness!</a>
 *       </li>
 *     </ul>
 *   </li>
 * </ul>
 */
.dropdown-item {
  position: relative;
}

.dropdown-item__link {
  cursor: pointer;
}

.dropdown-item:hover > .dropdown-item__list {
  display: block;
}

.dropdown-item__list {
  display: none;
  position: absolute;
  left: 0;
  /* Set your own z-index as needed. */
}

/* Right aligned dropdown-item */
.dropdown-item--right > .dropdown-item__list {
  left: auto;
  right: 0;
}

/* Triggered by JS */
.dropdown-item--js:hover > .dropdown-item__list {
  display: none;
}


/*
 * Button component
 *
 * Allows us to style everything as buttons. We also use them
 * for input[type=submit]'s and input[type=buttons] as we don't want to
 * define button styles multiple times.
 *
 * Adjust and add design-stuff and modifiers like .button--full to your project
 * needs. Modifiers always complement the base class.
 *
 * Example:
 * <a class="button" href="#">...</a>
 * <a class="button button--full" href="#">...</a>
 */
.button {
  border: 1px solid;
  color: #333;
  display: inline-block;
  font: inherit;
  min-width: inherit;
  overflow: visible;
  padding: 0.5em 1em;
  text-align: center;
  vertical-align: middle;
  border-radius: 0;
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: background 150ms ease-in-out, border-color 150ms ease-in-out;
  transition: background 150ms ease-in-out, border-color 150ms ease-in-out;
}

.button:hover {
  cursor: pointer;
  opacity: .75;
}


/* Primary color */
.button--primary,
.button--primary:active,
.button--primary:visited {
  background: #FFEB00;
  border-color: #FFEB00;
  color: #000;
}

.button--primary:hover {
  background: #FFF69B;
  border-color: #FFED00;
  color: #808080;
}

/* Secondary color */
.button--secondary,
.button--secondary:active,
.button--secondary:visited {
  background: #000;
  border-color: #000;
  color: #fff;
}

.button--secondary:hover {
  background: #808080;
  border-color: #808080;
}

/* Ghost / grey */
.button--ghost-grey,
.button--ghost-grey:active,
.button--ghost-grey:visited {
  color: #000;
  background: #fff;
  font-weight: 400;
}

.button--ghost-grey:hover {
  border-color: #E5E5E5;
  color: #808080;
}

/* Ghost / black */
.button--ghost-black,
.button--ghost-black:active,
.button--ghost-black:visited {
  color: #000;
  background: #fff;
}

.button--ghost-black:hover {
  color: #808080;
  border-color: #808080;
}

/* Full width */
.button--full {
  width: 100%;
  text-align: center;
}


/*
 * Link + arrow component
 *
 * Glyph table:
 * RIGHTWARDS ARROW, GID: 993, Unicode: 2192
 * NORTH WEST ARROW, GID: 995, Unicode: 2196
 * NORTH EAST ARROW, GID: 996, Unicode: 2197
 * SOUTH EAST ARROW, GID: 997, Unicode: 2198
 * SOUTH WEST ARROW, GID: 998, Unicode: 2199
 */

/* Rightwards arrow */
.link-r-arrow::after {
  content: '\2192';
}

/* North west arrow */
.link-nw-arrow::after {
  content: '\2196';
}

/* North east arrow */
.link-ne-arrow::after {
  content: '\2197';
}

/* South east arrow */
.link-se-arrow::after {
  content: '\2198';
}

/* South west arrow */
.link-sw-arrow::after {
  content: '\2199';
}


/*
 * Position helper
 */
.p-rel {
  position: relative;
}

.p-abs {
  position: absolute;
}


/*
 * General drodpown style
 */
.dropdown {
  background: #fff;
  border: 1px solid #000;
  padding: 1rem;
  z-index: 100;
}



/*
 * HEAD
 */
.header {
  background: #FFEB00;
  padding: 0.75rem 0;
}

.header a {
  color: #000;
  text-decoration: none;
}

/*
 * Header dropdown
 */
.header-dropdown-wrap {
  z-index: 2;
}

.header-dropdown {
  width: 250px;
  top: 0px; /* Magic number */
  margin-top: 42px;
}

.header-dropdown a {
  display: block;
  padding: 0.25rem 0;
}


/*
 * Choose country, language and search
 */
.choose-country,
.choose-language,
.header-search {
/*  padding-left: 4rem; */
}

@media (min-width: 1024px) {
  .choose-country,
  .choose-language,
  .header-search {
/*    padding-left: 5rem; */
  }
}

/* Wraps */
.choose-country-wrap,
.choose-language-wrap {
  -webkit-transition: opacity 150ms ease-in-out;
  transition: opacity 150ms ease-in-out;
  opacity: 1;
  will-change: opacity;
  z-index: 10;
}

.choose-country__dropdown,
.choose-language__dropdown {
  display: none;
}

.choose-country--is-open .choose-country__dropdown.choose-country__dropdown,
.choose-language--is-open .choose-language__dropdown.choose-language__dropdown{
  display: block;
}



/*
 * Choose country
 */
.choose-country {
  padding-left: 0;
}

.choose-country__dropdown {
  width: 900px;
}

@media (max-width: 2300px) {
  .choose-country__dropdown {
    left: -250px;
  }
}

@media (max-width: 1800px) {
  .choose-country__dropdown {
    left: -550px;
  }
}

@media (max-width: 1200px) {
  .choose-country__dropdown {
    width: 750px;
    left: -300px;
  }
}

@media (max-width: 1000px) {
  .choose-country__dropdown {
    width: 550px;
    left: -100px;
  }
}


.choose-country__continent {
  text-transform: uppercase;
  margin-top: 2rem;
}

.choose-country__continent--first {
  margin-top: 0;
}

/*
 * Open mobile navigation
 */
.nav-button {
  font-size: 2rem;
  cursor: pointer;
}


/*
 * Global search
 */
.header-search__input,
.header-search__submit {
  border: 0 none;
  background: none;
  outline: none;
}

.header-search__input {
  width: 100px;
  -webkit-transition: width 250ms ease-in-out;
  transition: width 250ms ease-in-out;
  will-change: width;
}

.header-search__input::-webkit-input-placeholder {
  color: #000;
  font-weight: 700;
}

.header-search__input:-moz-placeholder {
  color: #000;
  font-weight: 700;
}

.header-search__input::-moz-placeholder {
  color: #000;
  font-weight: 700;
}

.header-search__input:-ms-input-placeholder {
  color: #000;
  font-weight: 700;
}

.header-search__submit {
  font-weight: 700;
}

/* State: Focus */
.header-search--is-focused .header-search__input {
  width: 400px;
}

.header-search--is-focused .choose-country-wrap,
.header-search--is-focused .choose-language-wrap {
  display: none;
}

@media (min-width: 1024px) {
  .header-search--is-focused .choose-country-wrap,
  .header-search--is-focused .choose-language-wrap {
    opacity: 0;
    display: block;
  }
}

.header-search--is-focused .header-search__input::-webkit-input-placeholder {
  color: #000;
  font-weight: 700;
}

.header-search--is-focused .header-search__input:-moz-placeholder {
  color: #000;
  font-weight: 700;
}

.header-search--is-focused .header-search__input::-moz-placeholder {
  color: #000;
  font-weight: 700;
}

.header-search--is-focused .header-search__input:-ms-input-placeholder {
  color: #000;
  font-weight: 700;
}

/*
 * MOBILE NAVIGATION
 */
.mobile-navigation {
  border-bottom: 1px solid #000;
  position: absolute;
  width: 100%;
  z-index: 10;
  display: none;
}

.mobile-navigation--is-open {
  display: block;
}


@media (min-width: 768px) {
  .mobile-navigation--is-open {
    display: none;
  }
}

.mobile-navigation__link {
  color: #000;
  padding: 1.25rem 1.5rem;
  display: block;
  background: #fff;
}

.mobile-navigation__link.is-active {
  font-weight: 700;
}

.mobile-navigation__link {
  text-transform: uppercase;
}


/*
 * TEASER
 */
.teaser {
  margin-bottom: 3rem;
}

/*
 * Teaser slider
 */
.teaser-slider {
  width: 100%;
  height: 200px;
  background: #000;
  font-size: 0.666rem;
  color: #fff;
}

@media (min-width: 640px) {
  .teaser-slider {
    height: 300px;
  }
}

@media (min-width: 768px) {
  .teaser-slider {
    height: 400px;
  }
}

@media (min-width: 1024px) {
  .teaser-slider {
    font-size: 1rem;
  }
}

.teaser-slider__item {
  width: 100%;
  height: 100%;
  background: no-repeat center center / cover;
}

.teaser-slider__item a {
  color: inherit;
}

.teaser-slider__header {
  margin-bottom: 0.75rem;
  font-size: 2.5em;
}
.teaser-slider__header--condensed {
  font-family: "FF DIN";
  font-weight: 400;
}

@media (min-width: 640px) {
  .teaser-slider__header {
    font-size: 3.125em;
  }
}

.teaser-slider__content {
  font-size: 1.5em;
}

.teaser-slider__content-wrap {
  z-index: 1;
}

/* Overlay image */
.teaser-slider__overlay-image {
  display: block;
  margin-left: auto;
  position: absolute;
  right: 0;
  width: auto;
  z-index: 0;
  height: 100%;
}

/* Pagination */
.teaser-slider .swiper-pagination {
  bottom: 1rem;
}

.teaser-slider>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 0.25rem;
}

.teaser-slider .swiper-pagination-bullet {
  -webkit-transition: background 200ms ease-in-out;
  transition: background 200ms ease-in-out;
  width: 10px;
  height: 10px;
  opacity: 1;
  background: #fff;
}

.teaser-slider .swiper-pagination-bullet-active {
  background: #FFEB00;
}


/*
 * LEFT SIDEBAR
 */
.sidebar--left {
}

/*
 * Contact search
 */
@media (min-width: 480px) {
  .contact-search__image {
    min-width: 50%;
    margin: 0 auto;
    display: block;
  }
}

@media (min-width: 768px) {
  .contact-search__image {
    max-width: 70%;
  }
}

.contact-search__or {
  padding: 0 .5rem;
  display: block;
}


/*
 * Sidebar navigation
 */
.sidebar-navigation {
  margin-bottom: 3rem;
}

.sidebar-navigation__link {
  color: #000;
  padding: .75rem 0;
  display: block;
  text-decoration: none;
}

.sidebar-navigation__link:hover,
.sidebar-navigation__link.is-active {
  font-weight: 700;
}

.sidebar-navigation__list--main > .sidebar-navigation__item:first-child > .sidebar-navigation__link {
  padding-top: 0;
}

.sidebar-navigation__list--main > .sidebar-navigation__item:last-child > .sidebar-navigation__link {
  padding-bottom: 0;
}

.sidebar-navigation__list--main > .sidebar-navigation__item > .sidebar-navigation__link {
  text-transform: uppercase;
}

/* Level: 2 */
.sidebar-navigation__list--sub {
  padding-left: 1rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.sidebar-navigation__list--sub .sidebar-navigation__link {
  text-transform: none;
  color: #9D9D9C;
  padding: 0.25rem 0;
}

.sidebar-navigation__list--sub .sidebar-navigation__link:hover,
.sidebar-navigation__list--sub .sidebar-navigation__link.is-active {
  color: #000;
  font-weight: 700;
}





/*
 * MAIN AREA
 */
.main-wrap {
  overflow-x: hidden;
}

.main {
}


/*
 * Mediabox
 */
.media-box__header {
  margin-bottom: 0.5rem;
}

.media-box__image {
  display: block;
  margin-bottom: 1.5rem;
  /* Uncomment later when vector graphics for media boxes are there
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #000;*/
}

/*
 * Buttonbox
 */
.button-box__button {
  font-size: 1.5rem;
}


/*
 * WRAP
 */
.wrap {
  margin-bottom: 8rem;
}


/*
 * FOOTER
 */
.footer {
  background: #FFEB00;
  color: #000;
  padding: 2rem 0 4rem;
  text-align: center;
}

@media (min-width: 768px) {
  .footer {
    padding: 2rem 0;
    text-align: left;
  }
}

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

.footer a:hover {
  font-weight: 700;
}

.footer__main-col {
  padding-bottom: 3rem;
}


/*
 * Worldwide
 */
.footer__worldwide-image {
  max-width: 80%;
/*  cursor: pointer; 地図押下時のリンク無効化 */
}

@media (min-width: 768px) {
  .footer__worldwide-image {
    max-width: none;
  }
}


/*
 * Social list
 */
.social-list {
  text-transform: uppercase;
}

.social-list__item {
  margin-bottom: 1.5rem;
}

.social-list__item:last-child {
  margin-bottom: 0;
}

.social-list__link {
  vertical-align: middle;
  display: block;
}

.social-list__link:hover {
}

.social-list__icon {
  font-size: 2.5rem;
  margin-right: 1rem;
}

@media (min-width: 768px) {
  .social-list__icon {
    margin-right: 3.375rem;
    vertical-align: middle;

  }
}


/*
 * Legal nav
 */
.legal-navigation {
  text-align: center;
  padding-top: 2rem;
}


@media (min-width: 768px) {
  .legal-navigation {
    padding-top: 0;
    text-align: right;
  }

  .legal-navigation__item:first-child {
    margin-left: 0;
  }

  .legal-navigation__item {
    margin-left: 2.5rem;
  }

  .legal-navigation__list > li {
    display: inline-block;
  }
}

/* Special legal nav treatment for a specific viewport */
@media (min-width: 768px) AND (max-width: 1130px) {
  .footer__legal {
    flex-direction:column;
  }

  .legal-navigation {
    text-align: left;
  }
}


/*
 * MOBILE UTILITIES
 */
.mobile-utilities {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background: #fff;
  z-index: 100;
  font-size: 0.7rem;
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  will-change: transform;
}

@media (min-width: 390px) {
  .mobile-utilities {
    font-size: 0.9rem;
  }
}

@media (min-width: 480px) {
  .mobile-utilities {
    font-size: 1rem;
  }
}

.mobile-utilities__link {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Disable hover and active CSS */
.mobile-utilities__link:hover,
.mobile-utilities__link:active {
  background: #000;
  border-color: #000;
  color: #fff;
  opacity: 1;
}

.mobile-utilities__link.is-active {
  background: #000;
  color: #FFEB00;
}

/* Dropdown */
.mobile-utilities__dropdown {
  bottom: 42px;
  width: 100%;
}

/* Overlay */
.mobile-utilities-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 2rem 2rem 74px; /* Magic number */
  overflow-y: scroll;
  display: none;
}

/* Choose language */
.mobile-choose-language--is-active.mobile-choose-language--is-active {
  display: block !important;
}

/* Choose country overlay */
.mobile-choose-country-container {
  height: 100%;
  overflow: hidden;
}
.mobile-choose-country {
  overflow-y: scroll;
  height: 100%;
}

.mobile-choose-country--is-active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mobile-search--is-active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Search overlay */





/*
 * HIDDEN & VISIBLE
 *
 * Must be last as it has to overwrite other display-rules.
 */
.hidden {
  display: none;
}

.visible {
  display: block;
}

.visible--inline {
  display: inline;
}



/*
 * MEDIA QUERY - XS
 */
@media (min-width: 480px) {
  /*
   * HELPER & COMPONENTS
   */

  /*
   * Width classes
   */
  .w20p--xs {
    width: 20%;
  }

  .w25p--xs {
    width: 25%;
  }

  .w33p--xs {
    width: 33.3333333333%;
  }

  .w50p--xs {
    width: 50%;
  }

  .w60p--xs {
    width: 60%;
  }

  .w75p--xs {
    width: 75%;
  }

  .w80p--xs {
    width: 80%;
  }

  .w100p--xs {
    width: 100%;
  }



  /*
   * HIDDEN & VISIBLE
   */
  .hidden--xs {
    display: none;
  }

  .visible--xs {
    display: block;
  }
}



/*
 * MEDIA QUERY - S
 */
@media (min-width: 640px) {
  /*
   * HELPER & COMPONENTS
   */

  /*
   * Min width classes
   */
  .mw150px--s {
    min-width: 150px;
  }

  /*
   * Width classes
   */
  .f175px--s {
    flex-basis: 175px;
  }

  .f290px--s {
    flex-basis: 290px;
  }

  .f250px--s {
    -ms-flex-preferred-size: 250px;
    flex-basis: 250px;
  }

  .f370px--s {
    -ms-flex-preferred-size: 370px;
    flex-basis: 370px;
  }

  .w20p--s {
    width: 20%;
  }

  .w25p--s {
    width: 25%;
  }

  .w33p--s {
    width: 33.3333333333%;
  }

  .w50p--s {
    width: 50%;
  }

  .w60p--s {
    width: 60%;
  }

  .w75p--s {
    width: 75%;
  }

  .w80p--s {
    width: 80%;
  }

  .w100p--s {
    width: 100%;
  }



  /*
   * HIDDEN & VISIBLE
   */
  .hidden--s {
    display: none;
  }

  .visible--s {
    display: block;
  }
}



/*
 * MEDIA QUERY - M
 */
@media (min-width: 768px) {
  /*
   * HELPER & COMPONENTS
   */

  /*
   * Width classes
   */
  .w250px--m {
    width: 250px;
  }

  .w20p--m {
    width: 20%;
  }

  .w25p--m {
    width: 25%;
  }

  .w33p--m {
    width: 33.3333333333%;
  }

  .w40p--m {
    width: 40%;
  }

  .w50p--m {
    width: 50%;
  }

  .w60p--m {
    width: 60%;
  }

  .w75p--m {
    width: 75%;
  }

  .w80p--m {
    width: 80%;
  }

  .w100p--m {
    width: 100%;
  }



  /*
   * HIDDEN & VISIBLE
   */
  .hidden--m {
    display: none;
  }

  .visible--m {
    display: block;
  }

  .visible-flex--m {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}



/*
 * MEDIA QUERY - L
 */
@media (min-width: 1024px) {
  /*
   * HELPER & COMPONENTS
   */

  /*
   * Width classes
   */
  .f380px--l {
    -ms-flex-preferred-size: 380px;
    flex-basis: 380px;
  }

  .f550px--l {
    -ms-flex-preferred-size: 550px;
    flex-basis: 550px;
  }

  .w370px--l {
    width: 370px;
  }


  .w20p--l {
    width: 20%;
  }

  .w25p--l {
    width: 25%;
  }

  .w33p--l {
    width: 33.3333333333%;
  }

  .w50p--l {
    width: 50%;
  }

  .w60p--l {
    width: 60%;
  }

  .w75p--l {
    width: 75%;
  }

  .w80p--l {
    width: 80%;
  }

  .w100p--l {
    width: 100%;
  }

  /*
   * Height classes
   */
  .h100p--l {
    height: 100%;
  }



  /*
   * HIDDEN & VISIBLE
   */
  .hidden--l {
    display: none;
  }

  .visible--l {
    display: block;
  }
}



/*
 * MEDIA QUERY - XL
 */
@media (min-width: 1200px) {
  /*
   * HELPER & COMPONENTS
   */


  /*
   * Width classes
   */
  .w20p--xl {
    width: 20%;
  }

  .w25p--xl {
    width: 25%;
  }

  .w33p--xl {
    width: 33.3333333333%;
  }

  .w50p--xl {
    width: 50%;
  }

  .w60p--xl {
    width: 60%;
  }

  .w75p--xl {
    width: 75%;
  }

  .w80p--xl {
    width: 80%;
  }

  .w100p--xl {
    width: 100%;
  }



  /*
   * HIDDEN & VISIBLE
   */
  .hidden--xl {
    display: none;
  }

  .visible--xl {
    display: block;
  }
}



/*
 * MEDIA QUERY - XXL
 */
@media (min-width: 1500px) {
  /*
   * HELPER & COMPONENTS
   */

  /*
   * Page layout
   */
  .container {
    padding-left: 0;
    padding-right: 0;
  }


  /*
   * Width classes
   */
  .w20p--xxl {
    width: 20%;
  }

  .w25p--xxl {
    width: 25%;
  }

  .w33p--xxl {
    width: 33.3333333333%;
  }

  .w50p--xxl {
    width: 50%;
  }

  .w60p--xxl {
    width: 60%;
  }

  .w75p--xxl {
    width: 75%;
  }

  .w80p--xxl {
    width: 80%;
  }

  .w100p--xxl {
    width: 100%;
  }



  /*
   * HIDDEN & VISIBLE
   */
  .hidden--xxl {
    display: none;
  }

  .visible--xxl {
    display: block;
  }
}



/*
 * PRINT
 */
@media print {
  /*
   * GENERAL
   */
  html {
    color: #000; /* Saves ink. */
  }
}

/*
 * CSC FIXES
 */