/**
 * if you need some suit css components, import them in your respective file via
 * @import "suitcss-components-COMPONENTNAME";
 */

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio, canvas, progress, video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, [hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active, a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b, strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b, strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code, kbd, pre, samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button, input, optgroup, select, textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button, input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button, select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"], [type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

/**
 * Prevent margin and border from affecting element width.
 * https://goo.gl/pYtbK7
 *
 */

html {
  box-sizing: border-box;
}

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

/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, figure, p, pre {
  margin: 0;
}

button {
  background: transparent;
  border: 0;
  padding: 0;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Suppress the focus outline on elements that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
  outline: none !important;
}

/**
 * @define utilities
 * Vertical alignment utilities
 * Depends on an appropriate `display` value.
 */

.u-alignBaseline {
  vertical-align: baseline !important;
}

.u-alignBottom {
  vertical-align: bottom !important;
}

.u-alignMiddle {
  vertical-align: middle !important;
}

.u-alignTop {
  vertical-align: top !important;
}

/**
 * @define utilities
 * Display-type utilities
 */

.u-block {
  display: block !important;
}

.u-hidden {
  display: none !important;
}

/**
 * Completely remove from the flow but leave available to screen readers.
 */

.u-hiddenVisually, .u-switchState:not(:checked) ~ * .u-switchOn, .u-switchState:not(:checked) ~ .u-switchOn, .u-switchState:checked ~ * .u-switchOff, .u-switchState:checked ~ .u-switchOff {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.u-inline {
  display: inline !important;
}

/**
 * 1. Fix for Firefox bug: an image styled `max-width:100%` within an
 * inline-block will display at its default size, and not limit its width to
 * 100% of an ancestral container.
 */

.u-inlineBlock {
  display: inline-block !important;
  max-width: 100%; /* 1 */
}

.u-table {
  display: table !important;
}

.u-tableCell {
  display: table-cell !important;
}

.u-tableRow {
  display: table-row !important;
}

/**
 * @define utilities
 * Contain floats
 *
 * Make an element expand to contain floated children.
 * Uses pseudo-elements (micro clearfix).
 *
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of the
 *    element.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.u-cf::before, .u-cf::after, .CMS-DotNav::before, .CMS-DotNav::after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.u-cf::after, .CMS-DotNav::after {
  clear: both;
}

/**
 * New block formatting context
 *
 * This affords some useful properties to the element. It won't wrap under
 * floats. Will also contain any floated children.

 * N.B. This will clip overflow. Use the alternative method below if this is
 * problematic.
 */

.u-nbfc {
  overflow: hidden !important;
}

/**
 * New block formatting context (alternative)
 *
 * Alternative method when overflow must not be clipped.
 *
 * 1. Create a new block formatting context (NBFC).
 * 2. Avoid shrink-wrap behaviour of table-cell.
 *
 * N.B. This breaks down in some browsers when elements within this element
 * exceed its width.
 */

.u-nbfcAlt {
  display: table-cell !important; /* 1 */
  width: 10000px !important; /* 2 */
}

/**
 * Floats
 */

.u-floatLeft {
  float: left !important;
}

.u-floatRight {
  float: right !important;
}

/**
 * @define utilities
 * Clean link
 *
 * A link without any text-decoration at all.
 */

.u-linkClean, .u-linkClean:hover, .u-linkClean:focus, .u-linkClean:active {
  text-decoration: none !important;
}

/**
 * Link complex
 *
 * A common pattern is to have a link with several pieces of text and/or an
 * icon, where only one piece of text should display the underline when the
 * link is the subject of user interaction.
 *
 * Example HTML:
 *
 * <a class="u-linkComplex" href="#">
 *   Link complex
 *   <span class="u-linkComplexTarget">target</span>
 * </a>
 */

.u-linkComplex, .u-linkComplex:hover, .u-linkComplex:focus, .u-linkComplex:active {
  text-decoration: none !important;
}

.u-linkComplex:hover .u-linkComplexTarget, .u-linkComplex:focus .u-linkComplexTarget, .u-linkComplex:active .u-linkComplexTarget {
  text-decoration: underline !important;
}

/**
 * Block-level link
 *
 * Combination of traits commonly used in vertical navigation lists.
 */

.u-linkBlock, .u-linkBlock:hover, .u-linkBlock:focus, .u-linkBlock:active {
  display: block !important;
  text-decoration: none !important;
}

/**
 * @define utilities
 * Specify the proportional offset after an element.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 4, 5, 6, 8, 10, 12 section
 */

.u-after1of12 {
  margin-right: 8.33333% !important;
}

.u-after1of10 {
  margin-right: 10% !important;
}

.u-after1of8 {
  margin-right: 12.5% !important;
}

.u-after1of6, .u-after2of12 {
  margin-right: 16.66667% !important;
}

.u-after1of5, .u-after2of10 {
  margin-right: 20% !important;
}

.u-after1of4, .u-after2of8, .u-after3of12 {
  margin-right: 25% !important;
}

.u-after3of10 {
  margin-right: 30% !important;
}

.u-after1of3, .u-after2of6, .u-after4of12 {
  margin-right: 33.33333% !important;
}

.u-after3of8 {
  margin-right: 37.5% !important;
}

.u-after2of5, .u-after4of10 {
  margin-right: 40% !important;
}

.u-after5of12 {
  margin-right: 41.66667% !important;
}

.u-after1of2, .u-after2of4, .u-after3of6, .u-after4of8, .u-after5of10, .u-after6of12 {
  margin-right: 50% !important;
}

.u-after7of12 {
  margin-right: 58.33333% !important;
}

.u-after3of5, .u-after6of10 {
  margin-right: 60% !important;
}

.u-after5of8 {
  margin-right: 62.5% !important;
}

.u-after2of3, .u-after4of6, .u-after8of12 {
  margin-right: 66.66667% !important;
}

.u-after7of10 {
  margin-right: 70% !important;
}

.u-after3of4, .u-after6of8, .u-after9of12 {
  margin-right: 75% !important;
}

.u-after4of5, .u-after8of10 {
  margin-right: 80% !important;
}

.u-after5of6, .u-after10of12 {
  margin-right: 83.33333% !important;
}

.u-after7of8 {
  margin-right: 87.5% !important;
}

.u-after9of10 {
  margin-right: 90% !important;
}

.u-after11of12 {
  margin-right: 91.66667% !important;
}

/**
 * @define utilities
 * Offset: breakpoint 1 (small)
 *
 * Specify the proportional offset after an element.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 4, 5, 6, 8, 10, 12 section
 */

@media (min-width: 320px) and (max-width: 640px) {

  .u-sm-afterNone {
    margin-right: 0 !important;
  }

  .u-sm-after1of12 {
    margin-right: 8.33333% !important;
  }

  .u-sm-after1of10 {
    margin-right: 10% !important;
  }

  .u-sm-after1of8 {
    margin-right: 12.5% !important;
  }

  .u-sm-after1of6, .u-sm-after2of12 {
    margin-right: 16.66667% !important;
  }

  .u-sm-after1of5, .u-sm-after2of10 {
    margin-right: 20% !important;
  }

  .u-sm-after1of4, .u-sm-after2of8, .u-sm-after3of12 {
    margin-right: 25% !important;
  }

  .u-sm-after3of10 {
    margin-right: 30% !important;
  }

  .u-sm-after1of3, .u-sm-after2of6, .u-sm-after4of12 {
    margin-right: 33.33333% !important;
  }

  .u-sm-after3of8 {
    margin-right: 37.5% !important;
  }

  .u-sm-after2of5, .u-sm-after4of10 {
    margin-right: 40% !important;
  }

  .u-sm-after5of12 {
    margin-right: 41.66667% !important;
  }

  .u-sm-after1of2, .u-sm-after2of4, .u-sm-after3of6, .u-sm-after4of8, .u-sm-after5of10, .u-sm-after6of12 {
    margin-right: 50% !important;
  }

  .u-sm-after7of12 {
    margin-right: 58.33333% !important;
  }

  .u-sm-after3of5, .u-sm-after6of10 {
    margin-right: 60% !important;
  }

  .u-sm-after5of8 {
    margin-right: 62.5% !important;
  }

  .u-sm-after2of3, .u-sm-after4of6, .u-sm-after8of12 {
    margin-right: 66.66667% !important;
  }

  .u-sm-after7of10 {
    margin-right: 70% !important;
  }

  .u-sm-after3of4, .u-sm-after6of8, .u-sm-after9of12 {
    margin-right: 75% !important;
  }

  .u-sm-after4of5, .u-sm-after8of10 {
    margin-right: 80% !important;
  }

  .u-sm-after5of6, .u-sm-after10of12 {
    margin-right: 83.33333% !important;
  }

  .u-sm-after7of8 {
    margin-right: 87.5% !important;
  }

  .u-sm-after9of10 {
    margin-right: 90% !important;
  }

  .u-sm-after11of12 {
    margin-right: 91.66667% !important;
  }

}

/**
 * @define utilities
 * Offset: breakpoint 2 (medium)
 *
 * Specify the proportional offset after an element.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 4, 5, 6, 8, 10, 12 section
 */

@media (min-width: 640px) and (max-width: 960px) {

  .u-md-afterNone {
    margin-right: 0 !important;
  }

  .u-md-after1of12 {
    margin-right: 8.33333% !important;
  }

  .u-md-after1of10 {
    margin-right: 10% !important;
  }

  .u-md-after1of8 {
    margin-right: 12.5% !important;
  }

  .u-md-after1of6, .u-md-after2of12 {
    margin-right: 16.66667% !important;
  }

  .u-md-after1of5, .u-md-after2of10 {
    margin-right: 20% !important;
  }

  .u-md-after1of4, .u-md-after2of8, .u-md-after3of12 {
    margin-right: 25% !important;
  }

  .u-md-after3of10 {
    margin-right: 30% !important;
  }

  .u-md-after1of3, .u-md-after2of6, .u-md-after4of12 {
    margin-right: 33.33333% !important;
  }

  .u-md-after3of8 {
    margin-right: 37.5% !important;
  }

  .u-md-after2of5, .u-md-after4of10 {
    margin-right: 40% !important;
  }

  .u-md-after5of12 {
    margin-right: 41.66667% !important;
  }

  .u-md-after1of2, .u-md-after2of4, .u-md-after3of6, .u-md-after4of8, .u-md-after5of10, .u-md-after6of12 {
    margin-right: 50% !important;
  }

  .u-md-after7of12 {
    margin-right: 58.33333% !important;
  }

  .u-md-after3of5, .u-md-after6of10 {
    margin-right: 60% !important;
  }

  .u-md-after5of8 {
    margin-right: 62.5% !important;
  }

  .u-md-after2of3, .u-md-after4of6, .u-md-after8of12 {
    margin-right: 66.66667% !important;
  }

  .u-md-after7of10 {
    margin-right: 70% !important;
  }

  .u-md-after3of4, .u-md-after6of8, .u-md-after9of12 {
    margin-right: 75% !important;
  }

  .u-md-after4of5, .u-md-after8of10 {
    margin-right: 80% !important;
  }

  .u-md-after5of6, .u-md-after10of12 {
    margin-right: 83.33333% !important;
  }

  .u-md-after7of8 {
    margin-right: 87.5% !important;
  }

  .u-md-after9of10 {
    margin-right: 90% !important;
  }

  .u-md-after11of12 {
    margin-right: 91.66667% !important;
  }

}

/**
 * @define utilities
 * Offset: breakpoint 3 (large)
 *
 * Specify the proportional offset after an element.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 4, 5, 6, 8, 10, 12 section
 */

@media (min-width: 960px) {

  .u-lg-afterNone {
    margin-right: 0 !important;
  }

  .u-lg-after1of12 {
    margin-right: 8.33333% !important;
  }

  .u-lg-after1of10 {
    margin-right: 10% !important;
  }

  .u-lg-after1of8 {
    margin-right: 12.5% !important;
  }

  .u-lg-after1of6, .u-lg-after2of12 {
    margin-right: 16.66667% !important;
  }

  .u-lg-after1of5, .u-lg-after2of10 {
    margin-right: 20% !important;
  }

  .u-lg-after1of4, .u-lg-after2of8, .u-lg-after3of12 {
    margin-right: 25% !important;
  }

  .u-lg-after3of10 {
    margin-right: 30% !important;
  }

  .u-lg-after1of3, .u-lg-after2of6, .u-lg-after4of12 {
    margin-right: 33.33333% !important;
  }

  .u-lg-after3of8 {
    margin-right: 37.5% !important;
  }

  .u-lg-after2of5, .u-lg-after4of10 {
    margin-right: 40% !important;
  }

  .u-lg-after5of12 {
    margin-right: 41.66667% !important;
  }

  .u-lg-after1of2, .u-lg-after2of4, .u-lg-after3of6, .u-lg-after4of8, .u-lg-after5of10, .u-lg-after6of12 {
    margin-right: 50% !important;
  }

  .u-lg-after7of12 {
    margin-right: 58.33333% !important;
  }

  .u-lg-after3of5, .u-lg-after6of10 {
    margin-right: 60% !important;
  }

  .u-lg-after5of8 {
    margin-right: 62.5% !important;
  }

  .u-lg-after2of3, .u-lg-after4of6, .u-lg-after8of12 {
    margin-right: 66.66667% !important;
  }

  .u-lg-after7of10 {
    margin-right: 70% !important;
  }

  .u-lg-after3of4, .u-lg-after6of8, .u-lg-after9of12 {
    margin-right: 75% !important;
  }

  .u-lg-after4of5, .u-lg-after8of10 {
    margin-right: 80% !important;
  }

  .u-lg-after5of6, .u-lg-after10of12 {
    margin-right: 83.33333% !important;
  }

  .u-lg-after7of8 {
    margin-right: 87.5% !important;
  }

  .u-lg-after9of10 {
    margin-right: 90% !important;
  }

  .u-lg-after11of12 {
    margin-right: 91.66667% !important;
  }

}

/**
 * @define utilities
 * Specify the proportional offset before an object.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
 */

.u-before1of12 {
  margin-left: 8.33333% !important;
}

.u-before1of10 {
  margin-left: 10% !important;
}

.u-before1of8 {
  margin-left: 12.5% !important;
}

.u-before1of6, .u-before2of12 {
  margin-left: 16.66667% !important;
}

.u-before1of5, .u-before2of10 {
  margin-left: 20% !important;
}

.u-before1of4, .u-before2of8, .u-before3of12 {
  margin-left: 25% !important;
}

.u-before3of10 {
  margin-left: 30% !important;
}

.u-before1of3, .u-before2of6, .u-before4of12 {
  margin-left: 33.33333% !important;
}

.u-before3of8 {
  margin-left: 37.5% !important;
}

.u-before2of5, .u-before4of10 {
  margin-left: 40% !important;
}

.u-before5of12 {
  margin-left: 41.66667% !important;
}

.u-before1of2, .u-before2of4, .u-before3of6, .u-before4of8, .u-before5of10, .u-before6of12 {
  margin-left: 50% !important;
}

.u-before7of12 {
  margin-left: 58.33333% !important;
}

.u-before3of5, .u-before6of10 {
  margin-left: 60% !important;
}

.u-before5of8 {
  margin-left: 62.5% !important;
}

.u-before2of3, .u-before4of6, .u-before8of12 {
  margin-left: 66.66667% !important;
}

.u-before7of10 {
  margin-left: 70% !important;
}

.u-before3of4, .u-before6of8, .u-before9of12 {
  margin-left: 75% !important;
}

.u-before4of5, .u-before8of10 {
  margin-left: 80% !important;
}

.u-before5of6, .u-before10of12 {
  margin-left: 83.33333% !important;
}

.u-before7of8 {
  margin-left: 87.5% !important;
}

.u-before9of10 {
  margin-left: 90% !important;
}

.u-before11of12 {
  margin-left: 91.66667% !important;
}

/**
 * @define utilities
 * Offset: breakpoint 1 (small)
 *
 * Specify the proportional offset before an element.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
 */

@media (min-width: 320px) and (max-width: 640px) {

  .u-sm-beforeNone {
    margin-left: 0 !important;
  }

  .u-sm-before1of12 {
    margin-left: 8.33333% !important;
  }

  .u-sm-before1of10 {
    margin-left: 10% !important;
  }

  .u-sm-before1of8 {
    margin-left: 12.5% !important;
  }

  .u-sm-before1of6, .u-sm-before2of12 {
    margin-left: 16.66667% !important;
  }

  .u-sm-before1of5, .u-sm-before2of10 {
    margin-left: 20% !important;
  }

  .u-sm-before1of4, .u-sm-before2of8, .u-sm-before3of12 {
    margin-left: 25% !important;
  }

  .u-sm-before3of10 {
    margin-left: 30% !important;
  }

  .u-sm-before1of3, .u-sm-before2of6, .u-sm-before4of12 {
    margin-left: 33.33333% !important;
  }

  .u-sm-before3of8 {
    margin-left: 37.5% !important;
  }

  .u-sm-before2of5, .u-sm-before4of10 {
    margin-left: 40% !important;
  }

  .u-sm-before5of12 {
    margin-left: 41.66667% !important;
  }

  .u-sm-before1of2, .u-sm-before2of4, .u-sm-before3of6, .u-sm-before4of8, .u-sm-before5of10, .u-sm-before6of12 {
    margin-left: 50% !important;
  }

  .u-sm-before7of12 {
    margin-left: 58.33333% !important;
  }

  .u-sm-before3of5, .u-sm-before6of10 {
    margin-left: 60% !important;
  }

  .u-sm-before5of8 {
    margin-left: 62.5% !important;
  }

  .u-sm-before2of3, .u-sm-before4of6, .u-sm-before8of12 {
    margin-left: 66.66667% !important;
  }

  .u-sm-before7of10 {
    margin-left: 70% !important;
  }

  .u-sm-before3of4, .u-sm-before6of8, .u-sm-before9of12 {
    margin-left: 75% !important;
  }

  .u-sm-before4of5, .u-sm-before8of10 {
    margin-left: 80% !important;
  }

  .u-sm-before5of6, .u-sm-before10of12 {
    margin-left: 83.33333% !important;
  }

  .u-sm-before7of8 {
    margin-left: 87.5% !important;
  }

  .u-sm-before9of10 {
    margin-left: 90% !important;
  }

  .u-sm-before11of12 {
    margin-left: 91.66667% !important;
  }

}

/**
 * @define utilities
 * Offset: breakpoint 2 (medium)
 *
 * Specify the proportional offset before an element.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
 */

@media (min-width: 640px) and (max-width: 960px) {

  .u-md-beforeNone {
    margin-left: 0 !important;
  }

  .u-md-before1of12 {
    margin-left: 8.33333% !important;
  }

  .u-md-before1of10 {
    margin-left: 10% !important;
  }

  .u-md-before1of8 {
    margin-left: 12.5% !important;
  }

  .u-md-before1of6, .u-md-before2of12 {
    margin-left: 16.66667% !important;
  }

  .u-md-before1of5, .u-md-before2of10 {
    margin-left: 20% !important;
  }

  .u-md-before1of4, .u-md-before2of8, .u-md-before3of12 {
    margin-left: 25% !important;
  }

  .u-md-before3of10 {
    margin-left: 30% !important;
  }

  .u-md-before1of3, .u-md-before2of6, .u-md-before4of12 {
    margin-left: 33.33333% !important;
  }

  .u-md-before3of8 {
    margin-left: 37.5% !important;
  }

  .u-md-before2of5, .u-md-before4of10 {
    margin-left: 40% !important;
  }

  .u-md-before5of12 {
    margin-left: 41.66667% !important;
  }

  .u-md-before1of2, .u-md-before2of4, .u-md-before3of6, .u-md-before4of8, .u-md-before5of10, .u-md-before6of12 {
    margin-left: 50% !important;
  }

  .u-md-before7of12 {
    margin-left: 58.33333% !important;
  }

  .u-md-before3of5, .u-md-before6of10 {
    margin-left: 60% !important;
  }

  .u-md-before5of8 {
    margin-left: 62.5% !important;
  }

  .u-md-before2of3, .u-md-before4of6, .u-md-before8of12 {
    margin-left: 66.66667% !important;
  }

  .u-md-before7of10 {
    margin-left: 70% !important;
  }

  .u-md-before3of4, .u-md-before6of8, .u-md-before9of12 {
    margin-left: 75% !important;
  }

  .u-md-before4of5, .u-md-before8of10 {
    margin-left: 80% !important;
  }

  .u-md-before5of6, .u-md-before10of12 {
    margin-left: 83.33333% !important;
  }

  .u-md-before7of8 {
    margin-left: 87.5% !important;
  }

  .u-md-before9of10 {
    margin-left: 90% !important;
  }

  .u-md-before11of12 {
    margin-left: 91.66667% !important;
  }

}

/**
 * @define utilities
 * Offset: breakpoint 3 (large)
 *
 * Specify the proportional offset before an element.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
 */

@media (min-width: 960px) {

  .u-lg-beforeNone {
    margin-left: 0 !important;
  }

  .u-lg-before1of12 {
    margin-left: 8.33333% !important;
  }

  .u-lg-before1of10 {
    margin-left: 10% !important;
  }

  .u-lg-before1of8 {
    margin-left: 12.5% !important;
  }

  .u-lg-before1of6, .u-lg-before2of12 {
    margin-left: 16.66667% !important;
  }

  .u-lg-before1of5, .u-lg-before2of10 {
    margin-left: 20% !important;
  }

  .u-lg-before1of4, .u-lg-before2of8, .u-lg-before3of12 {
    margin-left: 25% !important;
  }

  .u-lg-before3of10 {
    margin-left: 30% !important;
  }

  .u-lg-before1of3, .u-lg-before2of6, .u-lg-before4of12 {
    margin-left: 33.33333% !important;
  }

  .u-lg-before3of8 {
    margin-left: 37.5% !important;
  }

  .u-lg-before2of5, .u-lg-before4of10 {
    margin-left: 40% !important;
  }

  .u-lg-before5of12 {
    margin-left: 41.66667% !important;
  }

  .u-lg-before1of2, .u-lg-before2of4, .u-lg-before3of6, .u-lg-before4of8, .u-lg-before5of10, .u-lg-before6of12 {
    margin-left: 50% !important;
  }

  .u-lg-before7of12 {
    margin-left: 58.33333% !important;
  }

  .u-lg-before3of5, .u-lg-before6of10 {
    margin-left: 60% !important;
  }

  .u-lg-before5of8 {
    margin-left: 62.5% !important;
  }

  .u-lg-before2of3, .u-lg-before4of6, .u-lg-before8of12 {
    margin-left: 66.66667% !important;
  }

  .u-lg-before7of10 {
    margin-left: 70% !important;
  }

  .u-lg-before3of4, .u-lg-before6of8, .u-lg-before9of12 {
    margin-left: 75% !important;
  }

  .u-lg-before4of5, .u-lg-before8of10 {
    margin-left: 80% !important;
  }

  .u-lg-before5of6, .u-lg-before10of12 {
    margin-left: 83.33333% !important;
  }

  .u-lg-before7of8 {
    margin-left: 87.5% !important;
  }

  .u-lg-before9of10 {
    margin-left: 90% !important;
  }

  .u-lg-before11of12 {
    margin-left: 91.66667% !important;
  }

}

/** @define utilities */

.u-posFit, .u-posAbsoluteCenter, .u-posAbsolute {
  position: absolute !important;
}

/**
 * Element will be centered to its nearest relatively-positioned
 * ancestor.
 */

.u-posFixedCenter, .u-posAbsoluteCenter {
  left: 50% !important;
  top: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
          transform: translate(-50%, -50%) !important;
}

.u-posFit, .u-posFullScreen, .ImageViewer {
  bottom: 0 !important;
  left: 0 !important;
  margin: auto !important;
  right: 0 !important;
  top: 0 !important;
}

/**
 * 1. Make sure fixed elements are promoted into a new layer, for performance
 *    reasons.
 */

.u-posFullScreen, .u-posFixedCenter, .u-posFixed, .ImageViewer {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; /* 1 */
  position: fixed !important;
}

.u-posRelative {
  position: relative !important;
}

.u-posStatic {
  position: static !important;
}

/**
 * @define utilities
 * Sizing utilities
 */

/* Proportional widths
   ========================================================================== */

/**
 * Specify the proportional width of an object.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
 *
 * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
 *    http://git.io/vllMD
 */

.u-size1of12 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 8.33333% !important;
}

.u-size1of10 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 10% !important;
}

.u-size1of8 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 12.5% !important;
}

.u-size1of6, .u-size2of12 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 16.66667% !important;
}

.u-size1of5, .u-size2of10 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 20% !important;
}

.u-size1of4, .u-size2of8, .u-size3of12 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 25% !important;
}

.u-size3of10 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 30% !important;
}

.u-size1of3, .u-size2of6, .u-size4of12 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 33.33333% !important;
}

.u-size3of8 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 37.5% !important;
}

.u-size2of5, .u-size4of10 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 40% !important;
}

.u-size5of12 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 41.66667% !important;
}

.u-size1of2, .u-size2of4, .u-size3of6, .u-size4of8, .u-size5of10, .u-size6of12 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 50% !important;
}

.u-size7of12 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 58.33333% !important;
}

.u-size3of5, .u-size6of10 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 60% !important;
}

.u-size5of8 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 62.5% !important;
}

.u-size2of3, .u-size4of6, .u-size8of12 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 66.66667% !important;
}

.u-size7of10 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 70% !important;
}

.u-size3of4, .u-size6of8, .u-size9of12 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 75% !important;
}

.u-size4of5, .u-size8of10 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 80% !important;
}

.u-size5of6, .u-size10of12 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 83.33333% !important;
}

.u-size7of8 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 87.5% !important;
}

.u-size9of10 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 90% !important;
}

.u-size11of12 {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
  width: 91.66667% !important;
}

/* Intrinsic widths
   ========================================================================== */

/**
 * Make an element shrink wrap its content.
 */

.u-sizeFit {
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
}

/**
 * Make an element fill the remaining space.
 *
 * 1. Be explicit to work around IE10 bug with shorthand flex
 *    http://git.io/vllC7
 * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
 *    http://git.io/vllMt
 */

.u-sizeFill {
  -webkit-flex: 1 1 0% !important;
      -ms-flex: 1 1 0% !important;
          flex: 1 1 0% !important; /* 1 */
  -webkit-flex-basis: 0% !important;
      -ms-flex-preferred-size: 0% !important;
          flex-basis: 0% !important; /* 2 */
}

/**
 * An alternative method to make an element fill the remaining space.
 * Distributes space based on the initial width and height of the element
 *
 * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
 */

.u-sizeFillAlt {
  -webkit-flex: 1 1 auto !important;
      -ms-flex: 1 1 auto !important;
          flex: 1 1 auto !important;
  -webkit-flex-basis: auto !important;
      -ms-flex-preferred-size: auto !important;
          flex-basis: auto !important;
}

/**
 * Make an element the width of its parent.
 */

.u-sizeFull {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
}

/**
 * @define utilities
 * Size: breakpoint 1 (small)
 */

@media (min-width: 320px) and (max-width: 640px) {

  /* Proportional widths: breakpoint 1 (small)
     ======================================================================== */

  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   */

  .u-sm-size1of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 8.33333% !important;
  }

  .u-sm-size1of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 10% !important;
  }

  .u-sm-size1of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-sm-size1of6, .u-sm-size2of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 16.66667% !important;
  }

  .u-sm-size1of5, .u-sm-size2of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 20% !important;
  }

  .u-sm-size1of4, .u-sm-size2of8, .u-sm-size3of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 25% !important;
  }

  .u-sm-size3of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 30% !important;
  }

  .u-sm-size1of3, .u-sm-size2of6, .u-sm-size4of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 33.33333% !important;
  }

  .u-sm-size3of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-sm-size2of5, .u-sm-size4of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 40% !important;
  }

  .u-sm-size5of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 41.66667% !important;
  }

  .u-sm-size1of2, .u-sm-size2of4, .u-sm-size3of6, .u-sm-size4of8, .u-sm-size5of10, .u-sm-size6of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 50% !important;
  }

  .u-sm-size7of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 58.33333% !important;
  }

  .u-sm-size3of5, .u-sm-size6of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 60% !important;
  }

  .u-sm-size5of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-sm-size2of3, .u-sm-size4of6, .u-sm-size8of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 66.66667% !important;
  }

  .u-sm-size7of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 70% !important;
  }

  .u-sm-size3of4, .u-sm-size6of8, .u-sm-size9of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 75% !important;
  }

  .u-sm-size4of5, .u-sm-size8of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 80% !important;
  }

  .u-sm-size5of6, .u-sm-size10of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 83.33333% !important;
  }

  .u-sm-size7of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-sm-size9of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 90% !important;
  }

  .u-sm-size11of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 91.66667% !important;
  }

  /* Intrinsic widths
     ======================================================================== */

  /**
   * Make an element shrink wrap its content.
   */

  .u-sm-sizeFit {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
  }

  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex
   *    http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
   *    http://git.io/vllMt
   */

  .u-sm-sizeFill {
    -webkit-flex: 1 1 0% !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important; /* 1 */
    -webkit-flex-basis: 0% !important;
        -ms-flex-preferred-size: 0% !important;
            flex-basis: 0% !important; /* 2 */
  }

  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */

  .u-sm-sizeFillAlt {
    -webkit-flex: 1 1 auto !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
  }

  /**
   * Make an element the width of its parent.
   */

  .u-sm-sizeFull {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
  }

}

/**
 * @define utilities
 * Size: breakpoint 2 (medium)
 */

@media (min-width: 640px) and (max-width: 960px) {

  /* Proportional widths: breakpoint 2 (medium)
     ======================================================================== */

  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   */

  /* postcss-bem-linter: ignore */

  .u-md-size1of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 8.33333% !important;
  }

  .u-md-size1of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 10% !important;
  }

  .u-md-size1of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-md-size1of6, .u-md-size2of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 16.66667% !important;
  }

  .u-md-size1of5, .u-md-size2of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 20% !important;
  }

  .u-md-size1of4, .u-md-size2of8, .u-md-size3of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 25% !important;
  }

  .u-md-size3of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 30% !important;
  }

  .u-md-size1of3, .u-md-size2of6, .u-md-size4of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 33.33333% !important;
  }

  .u-md-size3of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-md-size2of5, .u-md-size4of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 40% !important;
  }

  .u-md-size5of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 41.66667% !important;
  }

  .u-md-size1of2, .u-md-size2of4, .u-md-size3of6, .u-md-size4of8, .u-md-size5of10, .u-md-size6of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 50% !important;
  }

  .u-md-size7of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 58.33333% !important;
  }

  .u-md-size3of5, .u-md-size6of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 60% !important;
  }

  .u-md-size5of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-md-size2of3, .u-md-size4of6, .u-md-size8of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 66.66667% !important;
  }

  .u-md-size7of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 70% !important;
  }

  .u-md-size3of4, .u-md-size6of8, .u-md-size9of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 75% !important;
  }

  .u-md-size4of5, .u-md-size8of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 80% !important;
  }

  .u-md-size5of6, .u-md-size10of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 83.33333% !important;
  }

  .u-md-size7of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-md-size9of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 90% !important;
  }

  .u-md-size11of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 91.66667% !important;
  }

  /* Intrinsic widths
     ======================================================================== */

  /**
   * Make an element shrink wrap its content.
   */

  .u-md-sizeFit {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
  }

  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex
   *    http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
   *    http://git.io/vllMt
   */

  .u-md-sizeFill {
    -webkit-flex: 1 1 0% !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important; /* 1 */
    -webkit-flex-basis: 0% !important;
        -ms-flex-preferred-size: 0% !important;
            flex-basis: 0% !important; /* 2 */
  }

  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */

  .u-md-sizeFillAlt {
    -webkit-flex: 1 1 auto !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
  }

  /**
   * Make an element the width of its parent.
   */

  .u-md-sizeFull {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
  }

}

/**
 * @define utilities
 * Size: breakpoint 3 (large)
 */

@media (min-width: 960px) {

  /* Proportional widths: breakpoint 3 (large)
     ======================================================================== */

  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   */

  .u-lg-size1of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 8.33333% !important;
  }

  .u-lg-size1of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 10% !important;
  }

  .u-lg-size1of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-lg-size1of6, .u-lg-size2of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 16.66667% !important;
  }

  .u-lg-size1of5, .u-lg-size2of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 20% !important;
  }

  .u-lg-size1of4, .u-lg-size2of8, .u-lg-size3of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 25% !important;
  }

  .u-lg-size3of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 30% !important;
  }

  .u-lg-size1of3, .u-lg-size2of6, .u-lg-size4of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 33.33333% !important;
  }

  .u-lg-size3of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-lg-size2of5, .u-lg-size4of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 40% !important;
  }

  .u-lg-size5of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 41.66667% !important;
  }

  .u-lg-size1of2, .u-lg-size2of4, .u-lg-size3of6, .u-lg-size4of8, .u-lg-size5of10, .u-lg-size6of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 50% !important;
  }

  .u-lg-size7of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 58.33333% !important;
  }

  .u-lg-size3of5, .u-lg-size6of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 60% !important;
  }

  .u-lg-size5of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-lg-size2of3, .u-lg-size4of6, .u-lg-size8of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 66.66667% !important;
  }

  .u-lg-size7of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 70% !important;
  }

  .u-lg-size3of4, .u-lg-size6of8, .u-lg-size9of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 75% !important;
  }

  .u-lg-size4of5, .u-lg-size8of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 80% !important;
  }

  .u-lg-size5of6, .u-lg-size10of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 83.33333% !important;
  }

  .u-lg-size7of8 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-lg-size9of10 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 90% !important;
  }

  .u-lg-size11of12 {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
    width: 91.66667% !important;
  }

  /* Intrinsic widths
     ======================================================================== */

  /**
   * Make an element shrink wrap its content.
   */

  .u-lg-sizeFit {
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
  }

  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex
   *    http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
   *    http://git.io/vllMt
   */

  .u-lg-sizeFill {
    -webkit-flex: 1 1 0% !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important; /* 1 */
    -webkit-flex-basis: 0% !important;
        -ms-flex-preferred-size: 0% !important;
            flex-basis: 0% !important; /* 2 */
  }

  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */

  .u-lg-sizeFillAlt {
    -webkit-flex: 1 1 auto !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    -webkit-flex-basis: auto !important;
        -ms-flex-preferred-size: auto !important;
            flex-basis: auto !important;
  }

  /**
   * Make an element the width of its parent.
   */

  .u-lg-sizeFull {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
  }

}

/**
 * Word breaking
 *
 * Break strings when their length exceeds the width of their container.
 */

.u-textBreak {
  word-wrap: break-word !important;
}

/**
 * Horizontal text alignment
 */

.u-textCenter {
  text-align: center !important;
}

.u-textLeft {
  text-align: left !important;
}

.u-textRight {
  text-align: right !important;
}

/**
 * Inherit the ancestor's text color.
 */

.u-textInheritColor {
  color: inherit !important;
}

/**
 * Enables font kerning in all browsers.
 * http://blog.typekit.com/2014/02/05/kerning-on-the-web/
 *
 * 1. Chrome (not Windows), Firefox, IE 10+
 * 2. Safari 7 and future browsers
 * 3. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
 */

.u-textKern {
  -webkit-font-feature-settings: "kern" 1;
          font-feature-settings: "kern" 1; /* 1 */
  -webkit-font-kerning: normal;
          font-kerning: normal; /* 2 */
  text-rendering: optimizeLegibility; /* 3 */
}

/**
 * Prevent whitespace wrapping
 */

.u-textNoWrap {
  white-space: nowrap !important;
}

/**
 * Text truncation
 *
 * Prevent text from wrapping onto multiple lines, and truncate with an
 * ellipsis.
 *
 * 1. Ensure that the node has a maximum width after which truncation can
 *    occur.
 * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
 *    nodes.
 */

.u-textTruncate {
  max-width: 100%; /* 1 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important; /* 2 */
}

/** @define utilities */

/* Applies to flex container
   ========================================================================== */

/**
 * Container
 */

.u-flex {
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.u-flexInline {
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

/**
 * Direction: row
 */

.u-flexRow {
  -webkit-flex-direction: row !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
}

.u-flexRowReverse {
  -webkit-flex-direction: row-reverse !important;
      -ms-flex-direction: row-reverse !important;
          flex-direction: row-reverse !important;
}

/**
 * Direction: column
 */

.u-flexCol {
  -webkit-flex-direction: column !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
}

.u-flexColReverse {
  -webkit-flex-direction: column-reverse !important;
      -ms-flex-direction: column-reverse !important;
          flex-direction: column-reverse !important;
}

/**
 * Wrap
 */

.u-flexWrap {
  -webkit-flex-wrap: wrap !important;
      -ms-flex-wrap: wrap !important;
          flex-wrap: wrap !important;
}

.u-flexNoWrap {
  -webkit-flex-wrap: nowrap !important;
      -ms-flex-wrap: nowrap !important;
          flex-wrap: nowrap !important;
}

.u-flexWrapReverse {
  -webkit-flex-wrap: wrap-reverse !important;
      -ms-flex-wrap: wrap-reverse !important;
          flex-wrap: wrap-reverse !important;
}

/**
 * Align items along the main axis of the current line of the flex container
 */

.u-flexJustifyStart {
  -webkit-justify-content: flex-start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important;
}

.u-flexJustifyEnd {
  -webkit-justify-content: flex-end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
}

.u-flexJustifyCenter {
  -webkit-justify-content: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
}

.u-flexJustifyBetween {
  -webkit-justify-content: space-between !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important;
}

.u-flexJustifyAround {
  -webkit-justify-content: space-around !important;
      -ms-flex-pack: distribute !important;
          justify-content: space-around !important;
}

/**
 * Align items in the cross axis of the current line of the flex container
 * Similar to `justify-content` but in the perpendicular direction
 */

.u-flexAlignItemsStart {
  -webkit-align-items: flex-start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important;
}

.u-flexAlignItemsEnd {
  -webkit-align-items: flex-end !important;
      -ms-flex-align: end !important;
          align-items: flex-end !important;
}

.u-flexAlignItemsCenter {
  -webkit-align-items: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

.u-flexAlignItemsStretch {
  -webkit-align-items: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
}

.u-flexAlignItemsBaseline {
  -webkit-align-items: baseline !important;
      -ms-flex-align: baseline !important;
          align-items: baseline !important;
}

/**
 * Aligns items within the flex container when there is extra
 * space in the cross-axis
 *
 * Has no effect when there is only one line of flex items.
 */

.u-flexAlignContentStart {
  -webkit-align-content: flex-start !important;
      -ms-flex-line-pack: start !important;
          align-content: flex-start !important;
}

.u-flexAlignContentEnd {
  -webkit-align-content: flex-end !important;
      -ms-flex-line-pack: end !important;
          align-content: flex-end !important;
}

.u-flexAlignContentCenter {
  -webkit-align-content: center !important;
      -ms-flex-line-pack: center !important;
          align-content: center !important;
}

.u-flexAlignContentStretch {
  -webkit-align-content: stretch !important;
      -ms-flex-line-pack: stretch !important;
          align-content: stretch !important;
}

.u-flexAlignContentBetween {
  -webkit-align-content: space-between !important;
      -ms-flex-line-pack: justify !important;
          align-content: space-between !important;
}

.u-flexAlignContentAround {
  -webkit-align-content: space-around !important;
      -ms-flex-line-pack: distribute !important;
          align-content: space-around !important;
}

/**
 * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
 */

/* postcss-bem-linter: ignore */

.u-flex > *, .u-flexInline > * {
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1; /* 1 */
}

/* Applies to flex items
   ========================================================================== */

/**
 * Override default alignment of single item when specified by `align-items`
 */

.u-flexAlignSelfStart {
  -webkit-align-self: flex-start !important;
      -ms-flex-item-align: start !important;
          align-self: flex-start !important;
}

.u-flexAlignSelfEnd {
  -webkit-align-self: flex-end !important;
      -ms-flex-item-align: end !important;
          align-self: flex-end !important;
}

.u-flexAlignSelfCenter {
  -webkit-align-self: center !important;
      -ms-flex-item-align: center !important;
              -ms-grid-row-align: center !important;
          align-self: center !important;
}

.u-flexAlignSelfStretch {
  -webkit-align-self: stretch !important;
      -ms-flex-item-align: stretch !important;
              -ms-grid-row-align: stretch !important;
          align-self: stretch !important;
}

.u-flexAlignSelfBaseline {
  -webkit-align-self: baseline !important;
      -ms-flex-item-align: baseline !important;
          align-self: baseline !important;
}

.u-flexAlignSelfAuto {
  -webkit-align-self: auto !important;
      -ms-flex-item-align: auto !important;
              -ms-grid-row-align: auto !important;
          align-self: auto !important;
}

/**
 * Change order without editing underlying HTML
 */

.u-flexOrderFirst {
  -webkit-order: -1 !important;
      -ms-flex-order: -1 !important;
          order: -1 !important;
}

.u-flexOrderLast {
  -webkit-order: 1 !important;
      -ms-flex-order: 1 !important;
          order: 1 !important;
}

.u-flexOrderNone {
  -webkit-order: 0 !important;
      -ms-flex-order: 0 !important;
          order: 0 !important;
}

/**
 * Specify the flex grow factor, which determines how much the flex item will
 * grow relative to the rest of the flex items in the flex container.
 *
 * Supports 1-5 proportions
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex
 *    - http://git.io/vllC7
 *
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
 *    instead of `auto` as this matches what the default would be with `flex`
 *    shorthand - http://git.io/vllWx
 */

.u-flexGrow1 {
  -webkit-flex: 1 1 0% !important;
      -ms-flex: 1 1 0% !important;
          flex: 1 1 0% !important; /* 1 */
}

.u-flexGrow2 {
  -webkit-flex: 2 1 0% !important;
      -ms-flex: 2 1 0% !important;
          flex: 2 1 0% !important;
}

.u-flexGrow3 {
  -webkit-flex: 3 1 0% !important;
      -ms-flex: 3 1 0% !important;
          flex: 3 1 0% !important;
}

.u-flexGrow4 {
  -webkit-flex: 4 1 0% !important;
      -ms-flex: 4 1 0% !important;
          flex: 4 1 0% !important;
}

.u-flexGrow5 {
  -webkit-flex: 5 1 0% !important;
      -ms-flex: 5 1 0% !important;
          flex: 5 1 0% !important;
}

/**
 * Aligning with `auto` margins
 * http://www.w3.org/TR/css-flexbox-1/#auto-margins
 */

.u-flexExpand {
  margin: auto !important;
}

.u-flexExpandLeft {
  margin-left: auto !important;
}

.u-flexExpandRight {
  margin-right: auto !important;
}

.u-flexExpandTop {
  margin-top: auto !important;
}

.u-flexExpandBottom {
  margin-bottom: auto !important;
}

/**
 * @define utilities
 * Size: breakpoint 1 (small)
 */

@media (min-width: 320px) and (max-width: 640px) {

  /* Applies to flex container
     ======================================================================== */

  /**
   * Container
   */

  .u-sm-flex {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .u-sm-flexInline {
    display: -webkit-inline-flex !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }

  /**
   * Direction: row
   */

  .u-sm-flexRow {
    -webkit-flex-direction: row !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }

  .u-sm-flexRowReverse {
    -webkit-flex-direction: row-reverse !important;
        -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
  }

  /**
   * Direction: column
   */

  .u-sm-flexCol {
    -webkit-flex-direction: column !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }

  .u-sm-flexColReverse {
    -webkit-flex-direction: column-reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
  }

  /**
   * Wrap
   */

  .u-sm-flexWrap {
    -webkit-flex-wrap: wrap !important;
        -ms-flex-wrap: wrap !important;
            flex-wrap: wrap !important;
  }

  .u-sm-flexNoWrap {
    -webkit-flex-wrap: nowrap !important;
        -ms-flex-wrap: nowrap !important;
            flex-wrap: nowrap !important;
  }

  .u-sm-flexWrapReverse {
    -webkit-flex-wrap: wrap-reverse !important;
        -ms-flex-wrap: wrap-reverse !important;
            flex-wrap: wrap-reverse !important;
  }

  /**
   * Align items along the main axis of the current line of the flex container
   */

  .u-sm-flexJustifyStart {
    -webkit-justify-content: flex-start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }

  .u-sm-flexJustifyEnd {
    -webkit-justify-content: flex-end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }

  .u-sm-flexJustifyCenter {
    -webkit-justify-content: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }

  .u-sm-flexJustifyBetween {
    -webkit-justify-content: space-between !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
  }

  .u-sm-flexJustifyAround {
    -webkit-justify-content: space-around !important;
        -ms-flex-pack: distribute !important;
            justify-content: space-around !important;
  }

  /**
   * Align items in the cross axis of the current line of the flex container
   * Similar to `justify-content` but in the perpendicular direction
   */

  .u-sm-flexAlignItemsStart {
    -webkit-align-items: flex-start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }

  .u-sm-flexAlignItemsEnd {
    -webkit-align-items: flex-end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
  }

  .u-sm-flexAlignItemsCenter {
    -webkit-align-items: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }

  .u-sm-flexAlignItemsStretch {
    -webkit-align-items: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
  }

  .u-sm-flexAlignItemsBaseline {
    -webkit-align-items: baseline !important;
        -ms-flex-align: baseline !important;
            align-items: baseline !important;
  }

  /**
   * Aligns items within the flex container when there is extra
   * space in the cross-axis
   *
   * Has no effect when there is only one line of flex items.
   */

  .u-sm-flexAlignContentStart {
    -webkit-align-content: flex-start !important;
        -ms-flex-line-pack: start !important;
            align-content: flex-start !important;
  }

  .u-sm-flexAlignContentEnd {
    -webkit-align-content: flex-end !important;
        -ms-flex-line-pack: end !important;
            align-content: flex-end !important;
  }

  .u-sm-flexAlignContentCenter {
    -webkit-align-content: center !important;
        -ms-flex-line-pack: center !important;
            align-content: center !important;
  }

  .u-sm-flexAlignContentStretch {
    -webkit-align-content: stretch !important;
        -ms-flex-line-pack: stretch !important;
            align-content: stretch !important;
  }

  .u-sm-flexAlignContentBetween {
    -webkit-align-content: space-between !important;
        -ms-flex-line-pack: justify !important;
            align-content: space-between !important;
  }

  .u-sm-flexAlignContentAround {
    -webkit-align-content: space-around !important;
        -ms-flex-line-pack: distribute !important;
            align-content: space-around !important;
  }

  /**
   * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
   */

  /* postcss-bem-linter: ignore */

  .u-sm-flex > *, .u-sm-flexInline > * {
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1; /* 1 */
  }

  /* Applies to flex items
     ======================================================================== */

  /**
   * Override default alignment of single item when specified by `align-items`
   */

  .u-sm-flexAlignSelfStart {
    -webkit-align-self: flex-start !important;
        -ms-flex-item-align: start !important;
            align-self: flex-start !important;
  }

  .u-sm-flexAlignSelfEnd {
    -webkit-align-self: flex-end !important;
        -ms-flex-item-align: end !important;
            align-self: flex-end !important;
  }

  .u-sm-flexAlignSelfCenter {
    -webkit-align-self: center !important;
        -ms-flex-item-align: center !important;
                -ms-grid-row-align: center !important;
            align-self: center !important;
  }

  .u-sm-flexAlignSelfStretch {
    -webkit-align-self: stretch !important;
        -ms-flex-item-align: stretch !important;
                -ms-grid-row-align: stretch !important;
            align-self: stretch !important;
  }

  .u-sm-flexAlignSelfBaseline {
    -webkit-align-self: baseline !important;
        -ms-flex-item-align: baseline !important;
            align-self: baseline !important;
  }

  .u-sm-flexAlignSelfAuto {
    -webkit-align-self: auto !important;
        -ms-flex-item-align: auto !important;
                -ms-grid-row-align: auto !important;
            align-self: auto !important;
  }

  /**
   * Change order without editing underlying HTML
   */

  .u-sm-flexOrderFirst {
    -webkit-order: -1 !important;
        -ms-flex-order: -1 !important;
            order: -1 !important;
  }

  .u-sm-flexOrderLast {
    -webkit-order: 1 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
  }

  .u-sm-flexOrderNone {
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
  }

  /**
   * Specify the flex grow factor, which determines how much the flex item will
   * grow relative to the rest of the flex items in the flex container.
   *
   * Supports 1-5 proportions
   *
   * 1. Provide all values to avoid IE10 bug with shorthand flex
   *    http://git.io/vllC7
   *
   *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
   *    http://git.io/vllWx
   */

  .u-sm-flexGrow1 {
    -webkit-flex: 1 1 0% !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important; /* 1 */
  }

  .u-sm-flexGrow2 {
    -webkit-flex: 2 1 0% !important;
        -ms-flex: 2 1 0% !important;
            flex: 2 1 0% !important;
  }

  .u-sm-flexGrow3 {
    -webkit-flex: 3 1 0% !important;
        -ms-flex: 3 1 0% !important;
            flex: 3 1 0% !important;
  }

  .u-sm-flexGrow4 {
    -webkit-flex: 4 1 0% !important;
        -ms-flex: 4 1 0% !important;
            flex: 4 1 0% !important;
  }

  .u-sm-flexGrow5 {
    -webkit-flex: 5 1 0% !important;
        -ms-flex: 5 1 0% !important;
            flex: 5 1 0% !important;
  }

  /**
   * Aligning with `auto` margins
   * http://www.w3.org/TR/css-flexbox-1/#auto-margins
   */

  .u-sm-flexExpand {
    margin: auto !important;
  }

  .u-sm-flexExpandLeft {
    margin-left: auto !important;
  }

  .u-sm-flexExpandRight {
    margin-right: auto !important;
  }

  .u-sm-flexExpandTop {
    margin-top: auto !important;
  }

  .u-sm-flexExpandBottom {
    margin-bottom: auto !important;
  }

}

/**
 * @define utilities
 * Size: breakpoint 1 (medium)
 */

@media (min-width: 640px) and (max-width: 960px) {

  /* Applies to flex container
     ======================================================================== */

  /**
   * Container
   */

  .u-md-flex {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .u-md-flexInline {
    display: -webkit-inline-flex !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }

  /**
   * Direction: row
   */

  .u-md-flexRow {
    -webkit-flex-direction: row !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }

  .u-md-flexRowReverse {
    -webkit-flex-direction: row-reverse !important;
        -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
  }

  /**
   * Direction: column
   */

  .u-md-flexCol {
    -webkit-flex-direction: column !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }

  .u-md-flexColReverse {
    -webkit-flex-direction: column-reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
  }

  /**
   * Wrap
   */

  .u-md-flexWrap {
    -webkit-flex-wrap: wrap !important;
        -ms-flex-wrap: wrap !important;
            flex-wrap: wrap !important;
  }

  .u-md-flexNoWrap {
    -webkit-flex-wrap: nowrap !important;
        -ms-flex-wrap: nowrap !important;
            flex-wrap: nowrap !important;
  }

  .u-md-flexWrapReverse {
    -webkit-flex-wrap: wrap-reverse !important;
        -ms-flex-wrap: wrap-reverse !important;
            flex-wrap: wrap-reverse !important;
  }

  /**
   * Align items along the main axis of the current line of the flex container
   */

  .u-md-flexJustifyStart {
    -webkit-justify-content: flex-start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }

  .u-md-flexJustifyEnd {
    -webkit-justify-content: flex-end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }

  .u-md-flexJustifyCenter {
    -webkit-justify-content: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }

  .u-md-flexJustifyBetween {
    -webkit-justify-content: space-between !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
  }

  .u-md-flexJustifyAround {
    -webkit-justify-content: space-around !important;
        -ms-flex-pack: distribute !important;
            justify-content: space-around !important;
  }

  /**
   * Align items in the cross axis of the current line of the flex container
   * Similar to `justify-content` but in the perpendicular direction
   */

  .u-md-flexAlignItemsStart {
    -webkit-align-items: flex-start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }

  .u-md-flexAlignItemsEnd {
    -webkit-align-items: flex-end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
  }

  .u-md-flexAlignItemsCenter {
    -webkit-align-items: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }

  .u-md-flexAlignItemsStretch {
    -webkit-align-items: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
  }

  .u-md-flexAlignItemsBaseline {
    -webkit-align-items: baseline !important;
        -ms-flex-align: baseline !important;
            align-items: baseline !important;
  }

  /**
   * Aligns items within the flex container when there is extra
   * space in the cross-axis
   *
   * Has no effect when there is only one line of flex items.
   */

  .u-md-flexAlignContentStart {
    -webkit-align-content: flex-start !important;
        -ms-flex-line-pack: start !important;
            align-content: flex-start !important;
  }

  .u-md-flexAlignContentEnd {
    -webkit-align-content: flex-end !important;
        -ms-flex-line-pack: end !important;
            align-content: flex-end !important;
  }

  .u-md-flexAlignContentCenter {
    -webkit-align-content: center !important;
        -ms-flex-line-pack: center !important;
            align-content: center !important;
  }

  .u-md-flexAlignContentStretch {
    -webkit-align-content: stretch !important;
        -ms-flex-line-pack: stretch !important;
            align-content: stretch !important;
  }

  .u-md-flexAlignContentBetween {
    -webkit-align-content: space-between !important;
        -ms-flex-line-pack: justify !important;
            align-content: space-between !important;
  }

  .u-md-flexAlignContentAround {
    -webkit-align-content: space-around !important;
        -ms-flex-line-pack: distribute !important;
            align-content: space-around !important;
  }

  /**
   * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
   */

  /* postcss-bem-linter: ignore */

  .u-md-flex > *, .u-md-flexInline > * {
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1; /* 1 */
  }

  /* Applies to flex items
     ======================================================================== */

  /**
   * Override default alignment of single item when specified by `align-items`
   */

  .u-md-flexAlignSelfStart {
    -webkit-align-self: flex-start !important;
        -ms-flex-item-align: start !important;
            align-self: flex-start !important;
  }

  .u-md-flexAlignSelfEnd {
    -webkit-align-self: flex-end !important;
        -ms-flex-item-align: end !important;
            align-self: flex-end !important;
  }

  .u-md-flexAlignSelfCenter {
    -webkit-align-self: center !important;
        -ms-flex-item-align: center !important;
                -ms-grid-row-align: center !important;
            align-self: center !important;
  }

  .u-md-flexAlignSelfStretch {
    -webkit-align-self: stretch !important;
        -ms-flex-item-align: stretch !important;
                -ms-grid-row-align: stretch !important;
            align-self: stretch !important;
  }

  .u-md-flexAlignSelfBaseline {
    -webkit-align-self: baseline !important;
        -ms-flex-item-align: baseline !important;
            align-self: baseline !important;
  }

  .u-md-flexAlignSelfAuto {
    -webkit-align-self: auto !important;
        -ms-flex-item-align: auto !important;
                -ms-grid-row-align: auto !important;
            align-self: auto !important;
  }

  /**
   * Change order without editing underlying HTML
   */

  .u-md-flexOrderFirst {
    -webkit-order: -1 !important;
        -ms-flex-order: -1 !important;
            order: -1 !important;
  }

  .u-md-flexOrderLast {
    -webkit-order: 1 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
  }

  .u-md-flexOrderNone {
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
  }

  /**
   * Specify the flex grow factor, which determines how much the flex item will
   * grow relative to the rest of the flex items in the flex container.
   *
   * Supports 1-5 proportions
   *
   * 1. Provide all values to avoid IE10 bug with shorthand flex
   *    http://git.io/vllC7
   *
   *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
   *    http://git.io/vllWx
   */

  .u-md-flexGrow1 {
    -webkit-flex: 1 1 0% !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important; /* 1 */
  }

  .u-md-flexGrow2 {
    -webkit-flex: 2 1 0% !important;
        -ms-flex: 2 1 0% !important;
            flex: 2 1 0% !important;
  }

  .u-md-flexGrow3 {
    -webkit-flex: 3 1 0% !important;
        -ms-flex: 3 1 0% !important;
            flex: 3 1 0% !important;
  }

  .u-md-flexGrow4 {
    -webkit-flex: 4 1 0% !important;
        -ms-flex: 4 1 0% !important;
            flex: 4 1 0% !important;
  }

  .u-md-flexGrow5 {
    -webkit-flex: 5 1 0% !important;
        -ms-flex: 5 1 0% !important;
            flex: 5 1 0% !important;
  }

  /**
   * Aligning with `auto` margins
   * http://www.w3.org/TR/css-flexbox-1/#auto-margins
   */

  .u-md-flexExpand {
    margin: auto !important;
  }

  .u-md-flexExpandLeft {
    margin-left: auto !important;
  }

  .u-md-flexExpandRight {
    margin-right: auto !important;
  }

  .u-md-flexExpandTop {
    margin-top: auto !important;
  }

  .u-md-flexExpandBottom {
    margin-bottom: auto !important;
  }

}

/**
 * @define utilities
 * Size: breakpoint 1 (large)
 */

@media (min-width: 960px) {

  /* Applies to flex container
     ======================================================================== */

  /**
   * Container
   */

  .u-lg-flex {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .u-lg-flexInline {
    display: -webkit-inline-flex !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }

  /**
   * Direction: row
   */

  .u-lg-flexRow {
    -webkit-flex-direction: row !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }

  .u-lg-flexRowReverse {
    -webkit-flex-direction: row-reverse !important;
        -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
  }

  /**
   * Direction: column
   */

  .u-lg-flexCol {
    -webkit-flex-direction: column !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }

  .u-lg-flexColReverse {
    -webkit-flex-direction: column-reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
  }

  /**
   * Wrap
   */

  .u-lg-flexWrap {
    -webkit-flex-wrap: wrap !important;
        -ms-flex-wrap: wrap !important;
            flex-wrap: wrap !important;
  }

  .u-lg-flexNoWrap {
    -webkit-flex-wrap: nowrap !important;
        -ms-flex-wrap: nowrap !important;
            flex-wrap: nowrap !important;
  }

  .u-lg-flexWrapReverse {
    -webkit-flex-wrap: wrap-reverse !important;
        -ms-flex-wrap: wrap-reverse !important;
            flex-wrap: wrap-reverse !important;
  }

  /**
   * Align items along the main axis of the current line of the flex container
   */

  .u-lg-flexJustifyStart {
    -webkit-justify-content: flex-start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }

  .u-lg-flexJustifyEnd {
    -webkit-justify-content: flex-end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }

  .u-lg-flexJustifyCenter {
    -webkit-justify-content: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }

  .u-lg-flexJustifyBetween {
    -webkit-justify-content: space-between !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
  }

  .u-lg-flexJustifyAround {
    -webkit-justify-content: space-around !important;
        -ms-flex-pack: distribute !important;
            justify-content: space-around !important;
  }

  /**
   * Align items in the cross axis of the current line of the flex container
   * Similar to `justify-content` but in the perpendicular direction
   */

  .u-lg-flexAlignItemsStart {
    -webkit-align-items: flex-start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }

  .u-lg-flexAlignItemsEnd {
    -webkit-align-items: flex-end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
  }

  .u-lg-flexAlignItemsCenter {
    -webkit-align-items: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }

  .u-lg-flexAlignItemsStretch {
    -webkit-align-items: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
  }

  .u-lg-flexAlignItemsBaseline {
    -webkit-align-items: baseline !important;
        -ms-flex-align: baseline !important;
            align-items: baseline !important;
  }

  /**
   * Aligns items within the flex container when there is extra
   * space in the cross-axis
   *
   * Has no effect when there is only one line of flex items.
   */

  .u-lg-flexAlignContentStart {
    -webkit-align-content: flex-start !important;
        -ms-flex-line-pack: start !important;
            align-content: flex-start !important;
  }

  .u-lg-flexAlignContentEnd {
    -webkit-align-content: flex-end !important;
        -ms-flex-line-pack: end !important;
            align-content: flex-end !important;
  }

  .u-lg-flexAlignContentCenter {
    -webkit-align-content: center !important;
        -ms-flex-line-pack: center !important;
            align-content: center !important;
  }

  .u-lg-flexAlignContentStretch {
    -webkit-align-content: stretch !important;
        -ms-flex-line-pack: stretch !important;
            align-content: stretch !important;
  }

  .u-lg-flexAlignContentBetween {
    -webkit-align-content: space-between !important;
        -ms-flex-line-pack: justify !important;
            align-content: space-between !important;
  }

  .u-lg-flexAlignContentAround {
    -webkit-align-content: space-around !important;
        -ms-flex-line-pack: distribute !important;
            align-content: space-around !important;
  }

  /**
   * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
   */

  /* postcss-bem-linter: ignore */

  .u-lg-flex > *, .u-lg-flexInline > * {
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1; /* 1 */
  }

  /* Applies to flex items
     ======================================================================== */

  /**
   * Override default alignment of single item when specified by `align-items`
   */

  .u-lg-flexAlignSelfStart {
    -webkit-align-self: flex-start !important;
        -ms-flex-item-align: start !important;
            align-self: flex-start !important;
  }

  .u-lg-flexAlignSelfEnd {
    -webkit-align-self: flex-end !important;
        -ms-flex-item-align: end !important;
            align-self: flex-end !important;
  }

  .u-lg-flexAlignSelfCenter {
    -webkit-align-self: center !important;
        -ms-flex-item-align: center !important;
                -ms-grid-row-align: center !important;
            align-self: center !important;
  }

  .u-lg-flexAlignSelfStretch {
    -webkit-align-self: stretch !important;
        -ms-flex-item-align: stretch !important;
                -ms-grid-row-align: stretch !important;
            align-self: stretch !important;
  }

  .u-lg-flexAlignSelfBaseline {
    -webkit-align-self: baseline !important;
        -ms-flex-item-align: baseline !important;
            align-self: baseline !important;
  }

  .u-lg-flexAlignSelfAuto {
    -webkit-align-self: auto !important;
        -ms-flex-item-align: auto !important;
                -ms-grid-row-align: auto !important;
            align-self: auto !important;
  }

  /**
   * Change order without editing underlying HTML
   */

  .u-lg-flexOrderFirst {
    -webkit-order: -1 !important;
        -ms-flex-order: -1 !important;
            order: -1 !important;
  }

  .u-lg-flexOrderLast {
    -webkit-order: 1 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
  }

  .u-lg-flexOrderNone {
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
  }

  /**
   * Specify the flex grow factor, which determines how much the flex item will
   * grow relative to the rest of the flex items in the flex container.
   *
   * Supports 1-5 proportions
   *
   * 1. Provide all values to avoid IE10 bug with shorthand flex
   *    http://git.io/vllC7
   *
   *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
   *    http://git.io/vllWx
   */

  .u-lg-flexGrow1 {
    -webkit-flex: 1 1 0% !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important; /* 1 */
  }

  .u-lg-flexGrow2 {
    -webkit-flex: 2 1 0% !important;
        -ms-flex: 2 1 0% !important;
            flex: 2 1 0% !important;
  }

  .u-lg-flexGrow3 {
    -webkit-flex: 3 1 0% !important;
        -ms-flex: 3 1 0% !important;
            flex: 3 1 0% !important;
  }

  .u-lg-flexGrow4 {
    -webkit-flex: 4 1 0% !important;
        -ms-flex: 4 1 0% !important;
            flex: 4 1 0% !important;
  }

  .u-lg-flexGrow5 {
    -webkit-flex: 5 1 0% !important;
        -ms-flex: 5 1 0% !important;
            flex: 5 1 0% !important;
  }

  /**
   * Aligning with `auto` margins
   * http://www.w3.org/TR/css-flexbox-1/#auto-margins
   */

  .u-lg-flexExpand {
    margin: auto !important;
  }

  .u-lg-flexExpandLeft {
    margin-left: auto !important;
  }

  .u-lg-flexExpandRight {
    margin-right: auto !important;
  }

  .u-lg-flexExpandTop {
    margin-top: auto !important;
  }

  .u-lg-flexExpandBottom {
    margin-bottom: auto !important;
  }

}

/**
 * base styles
 */

/**
 * Globals
 */

/**
 * CI colors
 *
 * To update the styleguide please edit colors.json for the color definitions
 * and pattern-scaffolding.css for the class definitions
 */

:root {

  /* blue */

  /* green */

  /* red */

  /* orange */

  /* turquois */

  /* yellow */

  /* velvet */

  /* pink */

  /* grey */
}

/**
 * Element colors
 */

/**
 * Font families
 */

/**
 * Font sizes
 */

/**
 * Sizes
 */

:root { /* -> 1024px / 102.4rem */
}

/**
 * z-Indexes
 */

html {
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: rgb(243, 243, 243);
  color: rgb(34, 34, 35);
  font: 1.6rem/1.4 "Roboto", sans-serif;

  min-width: 320px;
}

/* reset anchors to look like normal text */

a {
  color: inherit;
  text-decoration: inherit;
}

/* don't allow tracking pixel to influence layout */

img[width="1"][height="1"] {
  position: absolute;
}

/* disabled state for buttons and links */

a, button {
  cursor: pointer;
}

a.is-disabled, a[disabled], button.is-disabled, button[disabled] {
  cursor: not-allowed;
  opacity: 0.5 !important;
}

/**
 * Headings
 */

h1, h2, h3, h4, h5, h6, .H1, .H2, .H3, .H4, .H5, .H6 {
  font-family: "Roboto Slab", serif;
}

h1, .H1 {
  font-size: 2rem;
  font-weight: bold;
}

h2, .H2 {
  font-size: 1.8rem;
  font-weight: bold;
}

h3, .H3 {
  font-size: 1.8rem;
  font-weight: normal;
}

h4, .H4 {
  font-size: 1.6rem;
  font-weight: bold;
}

h5, .H5 {
  font-size: 1.6rem;
  font-weight: normal;
}

h6, .H6 {
  font-size: 1.4rem;
  font-weight: normal;
}

.H1--alternative, .H2--alternative, .H3--alternative, .H4--alternative, .H5--alternative {
  font-family: "Roboto", sans-serif;
}

.H1--muted, .H2--muted, .H3--muted, .H4--muted, .H5--muted {
  color: #a8acad;
}

/**
 * Paragraph
 */

p {
  margin: 1.4rem 0;
}

/**
 * HR
 */

hr {
  background: currentColor;
  border: 0;
  height: 1px;
  margin: 4rem auto;
}

.text-default {
  font: 1.6rem/1.4 "Roboto", sans-serif !important;
}

/**
 * CMS styles
 */

/**
 * CI colors
 */

:root {

  /* cms-aegean */

  /* cms-cloud */

  /* charcoal */

  /* cms-pearl */

  /* cms-white-smoke */

  /* cms-gray67 */

  /* cms-oslo-grey */

  /* cms-sandstone */

  /* cms-apple */

  /* cms-bubblegum */

  /* cms-crow */
}

/**
 * Font sizes
 */

/**
 * Sizes
 */

/**
 * Font families
 */

/**
 * Headings
 */

.CMS-H1, .CMS-Section h1 {
  font-size: 6.4rem;
}

.CMS-H2, .CMS-Section h2 {
  color: #212222;
  font-size: 5.4rem;
}

.CMS-H3, .CMS-Section h3 {
  color: #212222;
  font-size: 4.6rem;
  font-weight: bold;
  line-height: normal;
}

.CMS-H4, .CMS-Section h4 {
  font-size: 3.6rem;
  font-weight: bold;
}

.CMS-H4 .CMS-smaller, .CMS-Section h4 .CMS-smaller {
  font-size: 2.4rem;
}

.CMS-H5, .CMS-Section h5 {
  font-size: 2.4rem;
  font-weight: normal;
  line-height: normal;
}

/*
 * new headline font sizes, limited to CMS-ContentSection to not create confusion; TODO revisit these sizes
 * initially this was taken from base/text.css in NMMS (or rather our copy of that, respectively)
 */

.CMS-ContentSection h1 {
  font-size: 3.8rem;
}

.CMS-ContentSection h2 {
  font-size: 3.5rem;
}

.CMS-ContentSection h3 {
  font-size: 3rem;
}

.CMS-ContentSection h4, .CMS-ContentSection h2.CMS-smaller {
  font-size: 2.5rem;
}

.CMS-ContentSection h5 {
  font-size: 2rem;
}

.CMS-headline--regular {
  font-weight: normal;
}

/* special styling for the jobs pages menu */

.frame-layout-10 h5 {
  font-weight: bold;
  text-align: center;
}

.CMS-paragraph, .CMS-Section p {
  color: #212222;
  font-size: 1.6rem;
  line-height: 1.4;
}

.CMS-paragraph .CMS-small, .CMS-Section p .CMS-small {
  font-size: 1.4rem;
}

.CMS-paragraph .CMS-smaller, .CMS-Section p .CMS-smaller {
  font-size: 1.4rem;
  font-weight: bold;
}

p.CMS-overline {
  color: #49a0cc;
  font-weight: 500;
  margin: 0;
}

/*
TODO this rule must be revisited as it keeps us from restyling links, e.g. assigning a darker color to a currently
enabled section link (on the FAQ page) */

*[class^="CMS-"] a {
  color: #49a0cc;
  font-weight: 500;
}

.CMS-left {
  text-align: left;
}

.CMS-center {
  text-align: center;
}

.CMS-right {
  text-align: right;
}

.CMS-justify {
  text-align: justify;
}

/**
 * These classes act as modifiers. In Typo3 it's not possible to add multiple classes to the paragraphs,
 * so in order to change the properties of a paragraph we need to add a span with a specific class inside
 * of it; eg <p class="CMS-paragraph"><span class="CMS-white">white paragraph</span></p>
 *
 * deprecated These should be removed after upgrading to TYPO3v9 (where the above is possible with CKeditor)
 */

.CMS-white {
  color: white;
}

.CMS-grey {
  color: #a8acad;
}

span.CMS-right {
  display: inline-block;
  text-align: right;
  width: 100%;
}

span.CMS-center {
  display: inline-block;
  text-align: center;
  width: 100%;
}

a.CMS-right {
  float: right;
}

a.CMS-center {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

/**
 * Lists; although normalize.css has reset the style globally, we only set it for CMS-* classes to not creep into
 * NMMS's scope
 */

.CMS-ul, .CMS-ContentSection ul, .CMS-ol, .CMS-ContentSection ol {
  list-style-type: disc;
  margin: 1em 0;
  padding-left: 4rem;
}

.CMS-ol, .CMS-ContentSection ol {
  list-style-type: decimal;
}

@media (max-width: 991px) {

  .CMS-H2 {
    font-size: 3rem;
  }

  .CMS-H3 {
    font-size: 3rem;
  }

  .CMS-H4 {
    font-size: 2.4rem;
  }

  .CMS-H4 .CMS-smaller {
    font-size: 2rem;
  }

  .CMS-paragraph {
    margin: 1rem 0;
  }

  .CMS-paragraph .CMS-small {
    font-size: 1.4rem;
  }
}

/**
 * Center all texts on mobile
 */

@media (max-width: 767px) {

  a.CMS-right, a.CMS-Button {
    display: table;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* This rule only exists for legacy reasons, new buttons will be centered by centering the surrounding paragraph (see
     next rule) */

  a.CMS-center--mobileonly, span.CMS-center--mobileonly {
    display: block;
    text-align: center;
  }

  .CMS-center--mobileonly {
    text-align: center;
  }
}

/* TODO the following media queries contradict the "mobile first" approach… :-/ */

/*
 these are TYPO3 default styles from
 cms/public/typo3/sysext/fluid_styled_content/Configuration/TypoScript/Styling/setup.typoscript
 the only adjustment is prefixing "CMS-"
*/

:root {

  /* These values were copied from
     cms/public/typo3/sysext/fluid_styled_content/Configuration/TypoScript/constants.typoscript
  */
}

.CMS-ce-align-left {
  text-align: left;
}

.CMS-ce-align-center {
  text-align: center;
}

.CMS-ce-align-right {
  text-align: right;
}

.CMS-ce-table td, .CMS-ce-table th {
  vertical-align: top;
}

.CMS-ce-textpic, .CMS-ce-image, .CMS-ce-nowrap .CMS-ce-bodytext, .CMS-ce-gallery, .CMS-ce-row, .CMS-ce-uploads li, .CMS-ce-uploads div {
  overflow: hidden;
}

.CMS-ce-left .CMS-ce-gallery, .CMS-ce-column {
  float: left;
}

.CMS-ce-center .CMS-ce-outer {
  float: right;
  position: relative;
  right: 50%;
}

.CMS-ce-center .CMS-ce-inner {
  float: right;
  position: relative;
  right: -50%;
}

.CMS-ce-right .CMS-ce-gallery {
  float: right;
}

.CMS-ce-gallery figure {
  display: table;
  margin: 0;
}

.CMS-ce-gallery figcaption {
  caption-side: bottom;
  display: table-caption;
}

.CMS-ce-gallery img {
  display: block;
}

.CMS-ce-gallery iframe {
  border-width: 0;
}

.CMS-ce-border img, .CMS-ce-border iframe {
  border: 10 px solid #000;
  padding: 0 px;
}

.CMS-ce-intext.CMS-ce-right .CMS-ce-gallery, .CMS-ce-intext.CMS-ce-left .CMS-ce-gallery, .CMS-ce-above .CMS-ce-gallery {
  margin-bottom: 10 px;
}

.CMS-ce-intext.CMS-ce-right .CMS-ce-gallery {
  margin-left: 10 px;
}

.CMS-ce-intext.CMS-ce-left .CMS-ce-gallery {
  margin-right: 10 px;
}

.CMS-ce-below .CMS-ce-gallery {
  margin-top: 10 px;
}

.CMS-ce-column {
  margin-right: 10 px;
}

.CMS-ce-column:last-child {
  margin-right: 0;
}

.CMS-ce-row {
  margin-bottom: 10 px;
}

.CMS-ce-row:last-child {
  margin-bottom: 0;
}

.CMS-ce-above .CMS-ce-bodytext {
  clear: both;
}

.CMS-ce-intext.CMS-ce-left ol, .CMS-ce-intext.CMS-ce-left ul {
  overflow: auto;
  padding-left: 40px;
}

/* Headline */

.CMS-ce-headline-left {
  text-align: left;
}

.CMS-ce-headline-center {
  text-align: center;
}

.CMS-ce-headline-right {
  text-align: right;
}

/* Uploads */

.CMS-ce-uploads {
  margin: 0;
  padding: 0;
}

.CMS-ce-uploads li {
  list-style: none outside none;
  margin: 1em 0;
}

.CMS-ce-uploads img {
  float: left;
  padding-right: 1em;
  vertical-align: top;
}

.CMS-ce-uploads span {
  display: block;
}

/* Table */

.CMS-ce-table {
  max-width: 100%;
  width: 100%;
}

.CMS-ce-table th, .CMS-ce-table td {
  padding: 0.5em 0.75em;
  vertical-align: top;
}

.CMS-ce-table thead th {
  border-bottom: 2px solid #dadada;
}

.CMS-ce-table th, .CMS-ce-table td {
  border-top: 1px solid #dadada;
}

.CMS-ce-table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.CMS-ce-table-bordered th, .CMS-ce-table-bordered td {
  border: 1px solid #dadada;
}

// .frame-space-* was removed since we implemented that differently already

/* Frame */
.CMS-frame-ruler-before::before {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  content: "";
  display: block;
  margin-bottom: 2em;
}

.CMS-frame-ruler-after::after {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  content: "";
  display: block;
  margin-top: 2em;
}

.CMS-frame-indent {
  margin-left: 15%;
  margin-right: 15%;
}

.CMS-frame-indent-left {
  margin-left: 33%;
}

.CMS-frame-indent-right {
  margin-right: 33%;
}

/*
 * These are custom styles for TYPO3 elements that are added to e.g. fix certain behaviour of default
 + content elements
 */

.CMS-ce-gallery img {

  /* make images auto-scale on mobile; see SMP-82 */
  max-width: 100%;
}

/* TODO this should probably be moved to a different folder */

/* https://jweiland.net/typo3/codebeispiele/typoscript/responsive-videos.html */

.responsive-video {
  height: 0;
  overflow: hidden;
  padding-bottom: 55%;
  padding-top: 15px;
  position: relative;
}

.responsive-video iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/**
 * utils
 */

/** @define utilities */

/**
 * Some helper classes for using CSS only on/off switch behaviour
 *
 * Example:
 * ========
 * <input type="checkbox" class="u-switchState" id="mySwitch" />
 * <label for="mySwitch" class="u-switchButton">
 *   Switch
 *   <span class="u-switchOn">Off</span>
 *   <span class="u-switchOff">On</span>
 * </label>
 * <div class="u-switchOn">The Content you see when switch is ON</div>
 */

/* the checkbox */

.u-switchState {
  display: none;
}

/* inactive content / off */

/* the label */

.u-switchButton {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/** @define utilities */

/**
 * Helper classes for using CSS only soft on/off switch behaviour. "Soft" means
 * that the element is hidden via opacity, visibility: hidden or relative
 * offsets as opposed to display: none in u-switch. You have to implement the
 * hiding yourself.
 *
 * Example:
 * ========
 * <input type="checkbox" class="u-softSwitchState" id="mySwitch" />
 * <label for="mySwitch" u-softSwitchButton">Switch it!</label>
 * <div class="u-softSwitchOn">The Content you see when switch is ON</div>
 */

/* the checkbox */

.u-softSwitchState {
  display: none;
}

/* the label */

.u-softSwitchButton {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/** @define utilities */

.u-smaller {
  font-size: 0.85em !important;
}

.u-bigger {
  font-size: 1.2em !important;
}

.u-textMuted {
  color: rgb(101, 103, 104) !important;
}

.u-textBold {
  font-weight: bold;
}

/** @define utilities */

/*
Margins

position (shorthand):
- Top (t)
- Bottom (b)
- Left (l)
- Right (r)
- All (a)

size (shorthand):
- Small (s)
- Medium (m)
- Large (l)
- Huge (h)
- Giant (g)

Format: u-margin{position}{size}
Format (shorthand): u-m{position:shorthand}{size:shorthand}
*/

/* small */

.u-mts, .u-marginTopSmall {
  margin-top: 0.5rem !important;
}

.u-mbs, .u-marginBottomSmall {
  margin-bottom: 0.5rem !important;
}

.u-mls, .u-marginLeftSmall {
  margin-left: 0.5rem !important;
}

.u-mrs, .u-marginRightSmall {
  margin-right: 0.5rem !important;
}

.u-mas, .u-marginAllSmall {
  margin: 0.5rem !important;
}

/* medium */

.u-mtm, .u-marginTopMedium {
  margin-top: 1rem !important;
}

.u-mbm, .u-marginBottomMedium {
  margin-bottom: 1rem !important;
}

.u-mlm, .u-marginLeftMedium {
  margin-left: 1rem !important;
}

.u-mrm, .u-marginRightMedium {
  margin-right: 1rem !important;
}

.u-mam, .u-marginAllMedium {
  margin: 1rem !important;
}

/* large */

.u-mtl, .u-marginTopLarge {
  margin-top: 1.5rem !important;
}

.u-mbl, .u-marginBottomLarge {
  margin-bottom: 1.5rem !important;
}

.u-mll, .u-marginLeftLarge {
  margin-left: 1.5rem !important;
}

.u-mrl, .u-marginRightLarge {
  margin-right: 1.5rem !important;
}

.u-mal, .u-marginAllLarge {
  margin: 1.5rem !important;
}

/* huge */

.u-mth, .u-marginTopHuge {
  margin-top: 2rem !important;
}

.u-mbh, .u-marginBottomHuge {
  margin-bottom: 2rem !important;
}

.u-mlh, .u-marginLeftHuge {
  margin-left: 2rem !important;
}

.u-mrh, .u-marginRightHuge {
  margin-right: 2rem !important;
}

.u-mah, .u-marginAllHuge {
  margin: 2rem !important;
}

/* giant */

.u-mtg, .u-marginTopGiant {
  margin-top: 3rem !important;
}

.u-mbg, .u-marginBottomGiant {
  margin-bottom: 3rem !important;
}

.u-mlg, .u-marginLeftGiant {
  margin-left: 3rem !important;
}

.u-mrg, .u-marginRightGiant {
  margin-right: 3rem !important;
}

.u-mag, .u-marginAllGiant {
  margin: 3rem !important;
}

/* margin-top below search form */

.u-mtBelowSearchForm {
  margin-top: 5rem !important;
}

/** @define utilities */

.u-colorCycle {
  -webkit-animation: colorCycle 10s infinite;
          animation: colorCycle 10s infinite;
}

.u-fadeIn {
  -webkit-animation: fadein 1s linear forwards;
          animation: fadein 1s linear forwards;
}

.u-fadeOut {
  -webkit-animation: fadeout 1s linear forwards;
          animation: fadeout 1s linear forwards;
}

@-webkit-keyframes colorCycle {
  0% { color: red; }
  25% { color: yellow; }
  50% { color: blue; }
  75% { color: green; }
  100% { color: red; }
}

@keyframes colorCycle {
  0% { color: red; }
  25% { color: yellow; }
  50% { color: blue; }
  75% { color: green; }
  100% { color: red; }
}

@-webkit-keyframes loadingIndicator {

  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

@keyframes loadingIndicator {

  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

@-webkit-keyframes fadein {

  0% { opacity: 0.1; }

  50% { opacity: 0.7; }

  100% { opacity: 1; }
}

@keyframes fadein {

  0% { opacity: 0.1; }

  50% { opacity: 0.7; }

  100% { opacity: 1; }
}

@-webkit-keyframes fadeout {

  0% { opacity: 1; }

  50% { opacity: 0.3; }

  100% {
    display: none;
    opacity: 0;
  }
}

@keyframes fadeout {

  0% { opacity: 1; }

  50% { opacity: 0.3; }

  100% {
    display: none;
    opacity: 0;
  }
}

@-webkit-keyframes bounce {

  0%, 100% {
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
  }

  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

@keyframes bounce {

  0%, 100% {
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
  }

  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

/** @define utilities */

.u-pinnable {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.u-pinnable-pinToBottom {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/** @define utilities */

/**
 * Helper classes for using CSS only state behaviors.
 * Example:
 * ========
 * <span class="u-isActionable">Clickable</span>
 */

.u-isActionable {
  cursor: pointer;
}

/**
 * components
 */

/* atoms */

:root {

  /** these factors give a system of 10, 20, 40 (default), 60, 80px */

  /* the default for margins */
}

/* none */

.CMS-spaceBefore-none {
  margin-top: 0;
}

.CMS-spaceAfter-none {
  margin-bottom: 0;
}

/* extra-small */

.CMS-spaceBefore-extra-small {
  margin-top: 10px;
}

@media (min-width: 768px) {

  .CMS-spaceBefore-extra-small {
    margin-top: 20px;
  }
}

.CMS-spaceAfter-extra-small {
  margin-bottom: 10px;
}

@media (min-width: 768px) {

  .CMS-spaceAfter-extra-small {
    margin-bottom: 20px;
  }
}

.CMS-spaceInsideBefore-extra-small > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideBefore-extra-small > .CMS-MultiCol {
  margin-top: 10px;
}

@media (min-width: 768px) {

  .CMS-spaceInsideBefore-extra-small > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideBefore-extra-small > .CMS-MultiCol {
    margin-top: 20px;
  }
}

.CMS-spaceInsideAfter-extra-small > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideAfter-extra-small > .CMS-MultiCol {
  margin-bottom: 10px;
}

@media (min-width: 768px) {

  .CMS-spaceInsideAfter-extra-small > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideAfter-extra-small > .CMS-MultiCol {
    margin-bottom: 20px;
  }
}

/* small */

.CMS-spaceBefore-small {
  margin-top: 20px;
}

@media (min-width: 768px) {

  .CMS-spaceBefore-small {
    margin-top: 40px;
  }
}

.CMS-spaceAfter-small {
  margin-bottom: 20px;
}

@media (min-width: 768px) {

  .CMS-spaceAfter-small {
    margin-bottom: 40px;
  }
}

.CMS-spaceInsideBefore-small > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideBefore-small > .CMS-MultiCol {
  margin-top: 20px;
}

@media (min-width: 768px) {

  .CMS-spaceInsideBefore-small > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideBefore-small > .CMS-MultiCol {
    margin-top: 40px;
  }
}

.CMS-spaceInsideAfter-small > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideAfter-small > .CMS-MultiCol {
  margin-bottom: 20px;
}

@media (min-width: 768px) {

  .CMS-spaceInsideAfter-small > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideAfter-small > .CMS-MultiCol {
    margin-bottom: 40px;
  }
}

/* medium */

.CMS-spaceBefore-medium {
  margin-top: 40px;
}

@media (min-width: 768px) {

  .CMS-spaceBefore-medium {
    margin-top: 80px;
  }
}

.CMS-spaceAfter-medium {
  margin-bottom: 40px;
}

@media (min-width: 768px) {

  .CMS-spaceAfter-medium {
    margin-bottom: 80px;
  }
}

.CMS-spaceInsideBefore-medium > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideBefore-medium > .CMS-MultiCol {
  margin-top: 40px;
}

@media (min-width: 768px) {

  .CMS-spaceInsideBefore-medium > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideBefore-medium > .CMS-MultiCol {
    margin-top: 80px;
  }
}

.CMS-spaceInsideAfter-medium > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideAfter-medium > .CMS-MultiCol {
  margin-bottom: 40px;
}

@media (min-width: 768px) {

  .CMS-spaceInsideAfter-medium > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideAfter-medium > .CMS-MultiCol {
    margin-bottom: 80px;
  }
}

/* large */

.CMS-spaceBefore-large {
  margin-top: 60px;
}

@media (min-width: 768px) {

  .CMS-spaceBefore-large {
    margin-top: 120px;
  }
}

.CMS-spaceAfter-large {
  margin-bottom: 60px;
}

@media (min-width: 768px) {

  .CMS-spaceAfter-large {
    margin-bottom: 120px;
  }
}

.CMS-spaceInsideBefore-large > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideBefore-large > .CMS-MultiCol {
  margin-top: 60px;
}

@media (min-width: 768px) {

  .CMS-spaceInsideBefore-large > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideBefore-large > .CMS-MultiCol {
    margin-top: 120px;
  }
}

.CMS-spaceInsideAfter-large > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideAfter-large > .CMS-MultiCol {
  margin-bottom: 60px;
}

@media (min-width: 768px) {

  .CMS-spaceInsideAfter-large > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideAfter-large > .CMS-MultiCol {
    margin-bottom: 120px;
  }
}

/* extra-large */

.CMS-spaceBefore-extra-large {
  margin-top: 80px;
}

@media (min-width: 768px) {

  .CMS-spaceBefore-extra-large {
    margin-top: 160px;
  }
}

.CMS-spaceAfter-extra-large {
  margin-bottom: 80px;
}

@media (min-width: 768px) {

  .CMS-spaceAfter-extra-large {
    margin-bottom: 160px;
  }
}

.CMS-spaceInsideBefore-extra-large > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideBefore-extra-large > .CMS-MultiCol {
  margin-top: 80px;
}

@media (min-width: 768px) {

  .CMS-spaceInsideBefore-extra-large > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideBefore-extra-large > .CMS-MultiCol {
    margin-top: 160px;
  }
}

.CMS-spaceInsideAfter-extra-large > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideAfter-extra-large > .CMS-MultiCol {
  margin-bottom: 80px;
}

@media (min-width: 768px) {

  .CMS-spaceInsideAfter-extra-large > .CMS-ContentSection > .CMS-ContentSection-Content, .CMS-spaceInsideAfter-extra-large > .CMS-MultiCol {
    margin-bottom: 160px;
  }
}

.CMS-Icon {
  height: 100%;
  width: 100%;
}

.CMS-Icon--small {
  height: 1rem;
  width: 1rem;
}

.CMS-Icon--medium {
  height: 2rem;
  width: 2rem;
}

.CMS-Icon--big {
  height: 3rem;
  width: 3rem;
}

.CMS-Icon--huge {
  height: 4rem;
  width: 4rem;
}

.CMS-Plate {
  background-color: white;
  border: 0.1rem solid rgb(238, 238, 239);
  border-radius: 0.4rem;
  padding: 2rem;
}

.CMS-Plate--comment {
  background-color: rgb(246, 247, 247);
  border: none;
}

.CMS-Plate--answer {
  padding-bottom: 3rem;
}

.CMS-Plate-likeButton {
  height: 2.4rem;
  margin-bottom: 0.2rem;
  width: 2.4rem;
}

.CMS-Link {
  color: #49a0cc;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}

.CMS-Link.is-visited, .CMS-Link:visited {
  color: #49a0cc;
}

.CMS-Link.is-hovered, .CMS-Link:hover {
  color: rgb(58, 128, 163);
}

.CMS-Link.is-active, .CMS-Link:active {
  color: rgb(58, 128, 163);
}

.CMS-Link-dark {
  color: rgb(101, 103, 104);
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}

.CMS-Link-dark.is-visited, .CMS-Link-dark:visited {
  color: rgb(101, 103, 104);
}

.CMS-Link-dark.is-hovered, .CMS-Link-dark:hover, .CMS-Link-dark.is-active, .CMS-Link-dark:active {
  color: rgb(34, 34, 35);
}

.CMS-Link--noHover.is-hovered, .CMS-Link--noHover:hover {
  text-decoration: none;
}

a.CMS-Button, .CMS-Button {

  /**
   * defaults
   */
  border-radius: 0.4rem;
  display: inline-block;
  font-weight: 700;
}

a.CMS-Button, a.CMS-Button:focus, .CMS-Button, .CMS-Button:focus {
  outline: none;
}

/**
   * variants

   For historical reasons, we still have some old, deprecated class names here. Current class names are (old alias names
   in brackets):

     - ghostBlue  (borderOnly)
     - ghostWhite (borderOnlyWhite)
     - flatBlue   (darkFat)
     - flatWhite  (lightFat)
   */

a.CMS-Button:not(.is-disabled):hover, a.CMS-Button:not(.is-disabled):focus, .CMS-Button:not(.is-disabled):hover, .CMS-Button:not(.is-disabled):focus {
  background-color: rgb(58, 128, 163);
  border-color: rgb(58, 128, 163);
  color: white;
}

a.CMS-Button, a.CMS-Button--ghostBlue, .CMS-Button, .CMS-Button--ghostBlue {
  background-color: transparent;
  border-color: #49a0cc;
  color: #49a0cc;
}

a.CMS-Button--flatBlue, .CMS-Button--flatBlue {
  background-color: #49a0cc;
  border-color: #49a0cc;
  color: white;
}

a.CMS-Button--ghostWhite, .CMS-Button--ghostWhite {
  background-color: transparent;
  border-color: white;
  color: white;
}

a.CMS-Button--flatWhite, .CMS-Button--flatWhite {
  background-color: white;
  border-color: white;
  color: #49a0cc;
}

/* deprecated variants TODO remove once they’re not used anymore, merge with definitions above first */

a.CMS-Button, a.CMS-Button--darkFat:hover, a.CMS-Button--darkThin, .CMS-Button, .CMS-Button--darkFat:hover, .CMS-Button--darkThin {/* darkThin/lightThin is deprecated */
  border-color: #49a0cc;
}

a.CMS-Button--darkThin:hover, a.CMS-Button--darkFat, a.CMS-Button--flatBlue, .CMS-Button--darkThin:hover, .CMS-Button--darkFat, .CMS-Button--flatBlue {
  background-color: #49a0cc;
  border-color: #49a0cc;
  color: white;
}

a.CMS-Button--lightFat:hover, a.CMS-Button--lightThin, .CMS-Button--lightFat:hover, .CMS-Button--lightThin {/* darkThin/lightThin is deprecated */
  border-color: white;
  color: white;
}

a.CMS-Button--lightThin:hover, a.CMS-Button--lightFat, a.CMS-Button--flatWhite, .CMS-Button--lightThin:hover, .CMS-Button--lightFat, .CMS-Button--flatWhite {
  background-color: white;
  border-color: white;
  color: #49a0cc;
}

a.CMS-Buttona.CMS-Button--borderOnly, a.CMS-Button--ghostBlue, .CMS-Button.CMS-Button--borderOnly, .CMS-Button--ghostBlue {
  background-color: transparent;
  border: solid 0.2rem #49a0cc;
  border-radius: 0.4rem;
  color: #49a0cc;
}

a.CMS-Buttona.CMS-Button--borderOnlyWhite, a.CMS-Button--ghostWhite, .CMS-Button.CMS-Button--borderOnlyWhite, .CMS-Button--ghostWhite {
  background-color: transparent;
  border: solid 0.2rem white;
  border-radius: 0.4rem;
  color: white;
}

a.CMS-Buttona.CMS-Button--borderRadiusOnly, .CMS-Button.CMS-Button--borderRadiusOnly {/* deprecated */
  background-color: transparent;
  border: solid 0.2rem #646767;
  border-radius: 10rem;
  color: #646767;
}

a.CMS-Buttona.CMS-Button--borderRadiusOnlyWhite, .CMS-Button.CMS-Button--borderRadiusOnlyWhite {/* deprecated */
  background-color: transparent;
  border: solid 0.2rem white;
  border-radius: 10rem;
  color: white;
}

/**
   * sizes
   */

a.CMS-Button, a.CMS-Button--medium, .CMS-Button, .CMS-Button--medium {
  font-size: 1.6rem;
  line-height: 1.8rem;
  min-width: 7.5rem;
  padding: 1rem 1.9rem;
}

/* --large was not defined in v7, but erroneously added for v9 */

a.CMS-Button--big, a.CMS-Button--large, .CMS-Button--big, .CMS-Button--large {
  font-size: 1.8rem;
  line-height: 2rem;
  min-width: 10rem;
  padding: 1.3rem 2.7rem;
}

a.CMS-Button--huge, .CMS-Button--huge {
  font-size: 2rem;
  line-height: 2.4rem;
  min-width: 11rem;
  padding: 1.5rem 2.9rem;
}

a.CMS-Button--small, .CMS-Button--small {
  font-size: 1.4rem;
  line-height: 1.4rem;
  min-width: 5.8rem;
  padding: 0.8rem 1.4rem;
}

@media (max-width: 991px) {

  a.CMS-Button--huge, .CMS-Button--huge {
    border-radius: 0.4rem;
  }
}

.CMS-Input {
  display: block;
  padding: 0.2rem;
  width: 100%;
}

.CMS-Label {
  display: block;
  font-size: 80%;
  text-transform: uppercase;
}

.CMS-Note {
  font-size: 70%;
}

.CMS-Thumbnail {
  background-color: rgb(246, 247, 247);
  border: 0.1rem solid rgb(238, 238, 239);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.CMS-PollVote {
  background-color: rgb(246, 247, 247);
  border: 0.1rem solid rgb(238, 238, 239);
  border-radius: 0.4rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  padding: 0.4rem 0.8rem;
  position: relative;
}

.CMS-PollVote-bar {
  background-color: #a8acad;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
}

.CMS-PollVote-title {
  position: relative;
}

.CMS-PollVote-value {
  float: right;
  position: relative;
}

.CMS-PollVote--pos0 {
  color: rgb(44, 96, 122);
}

.CMS-PollVote-bar--pos0 {
  background-color: rgb(146, 198, 224);
}

.CMS-PollVote--pos1 {
  color: rgb(131, 75, 37);
}

.CMS-PollVote-bar--pos1 {
  background-color: rgb(233, 177, 139);
}

.CMS-PollVote--pos2 {
  color: rgb(61, 104, 56);
}

.CMS-PollVote-bar--pos2 {
  background-color: rgb(163, 206, 158);
}

.CMS-PollVote--pos3 {
  color: rgb(122, 54, 81);
}

.CMS-PollVote-bar--pos3 {
  background-color: rgb(224, 156, 183);
}

.CMS-PollVote--pos4 {
  color: rgb(86, 64, 107);
}

.CMS-PollVote-bar--pos4 {
  background-color: rgb(188, 166, 209);
}

.CMS-PollVote--pos5 {
  color: rgb(137, 119, 50);
}

.CMS-PollVote-bar--pos5 {
  background-color: rgb(239, 221, 152);
}

.CMS-PollVote--pos6 {
  color: rgb(116, 44, 42);
}

.CMS-PollVote-bar--pos6 {
  background-color: rgb(218, 146, 144);
}

.CMS-PollChoice {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.CMS-PollChoice--pos0 .CMS-PollChoice-icon {
  background-color: rgb(146, 198, 224);
}

.CMS-PollChoice--pos1 .CMS-PollChoice-icon {
  background-color: rgb(233, 177, 139);
}

.CMS-PollChoice--pos2 .CMS-PollChoice-icon {
  background-color: rgb(163, 206, 158);
}

.CMS-PollChoice--pos3 .CMS-PollChoice-icon {
  background-color: rgb(224, 156, 183);
}

.CMS-PollChoice--pos4 .CMS-PollChoice-icon {
  background-color: rgb(188, 166, 209);
}

.CMS-PollChoice--pos5 .CMS-PollChoice-icon {
  background-color: rgb(239, 221, 152);
}

.CMS-PollChoice--pos6 .CMS-PollChoice-icon {
  background-color: rgb(218, 146, 144);
}

.CMS-PollChoice-icon {
  border-radius: 0.4rem;
  color: white;
  height: 2.4rem !important;
  margin-right: 1rem;
  padding: 0.5rem;
  width: 2.4rem !important;
}

.CMS-ol li, .CMS-ul li {
  margin-bottom: 1em;
}

/* molecules */

.CMS-LinkPreview {
  background-color: rgb(246, 247, 247);
  border: 0.1rem solid rgb(238, 238, 239);
  border-radius: 0.4rem;
  font-size: 1.4rem;
  padding: 1rem;
}

/*
  &-description {
  }
  */

.CMS-LinkPreview-link {
  display: block;
}

.CMS-LinkPreview-thumbnail {
  float: right;
}

.CMS-IconButton, .CMS-IconButton > .CMS-IconButton-icon {
  display: inline-block;
}

/* default */

.CMS-IconButton, .CMS-IconButton--current {
  color: currentColor;
  text-decoration: none;
}

.CMS-IconButton:hover, .CMS-IconButton--current:hover {
  opacity: 0.8;
}

/* sizes */

.CMS-IconButton--small {
  height: 1rem;
  width: 1rem;
}

.CMS-IconButton--small > .CMS-IconButton-icon {
  padding: 0.1rem;
}

.CMS-IconButton--medium {
  height: 2rem;
  width: 2rem;
}

.CMS-IconButton--medium > .CMS-IconButton-icon {
  padding: 0.2rem;
}

.CMS-IconButton--big {
  height: 3rem;
  width: 3rem;
}

.CMS-IconButton--big > .CMS-IconButton-icon {
  padding: 0.4rem;
}

.CMS-IconButton--huge {
  height: 4rem;
  width: 4rem;
}

.CMS-IconButton--huge > .CMS-IconButton-icon {
  padding: 0.8rem;
}

/* variants */

.CMS-IconButton--neutral {
  color: rgb(203, 205, 206);
}

.CMS-IconButton--neutral:hover {
  color: #a8acad;
  opacity: 1;
}

.CMS-IconButton--light {
  color: white;
}

.CMS-IconButton--light:hover {
  color: rgb(246, 247, 247);
  opacity: 1;
}

.CMS-IconButton--dark {
  color: #49a0cc;
}

.CMS-IconButton--dark:hover {
  color: rgb(109, 179, 214);
  opacity: 1;
}

.CMS-IconButton--circle {
  background-color: rgba(0, 0, 0, 0.4);
  border: 0.1rem solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: white;
}

.CMS-IconButton--circle.is-bouncing {
  background-color: white;
  border-radius: 50%;
  color: #a8acad;
}

/* postcss-bem-linter: ignore */

.CMS-IconButton--circle.is-bouncing > .CMS-IconButton-icon {
  -webkit-animation: bounce 1s infinite ease-in-out;
          animation: bounce 1s infinite ease-in-out;
}

.CMS-ImageGallery {

  /* All items have a right margin of 0.5rem and because they are inline-block
   * elements, empty text nodes in between will take approx. 0.5rem space
   * additionally, so that's why I shifted the right margin of the container
   * by -1rem ... just to make sure that we can use the whole width of the
   * parent container / tile.
   */
  margin-right: -1rem;
}

.CMS-ImageGallery-item {
  display: inline-block;
  margin-right: 0.5rem;
}

.CMS-TagList {

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.CMS-TagList-item {
  margin-bottom: 0.5rem;
  margin-right: 0.4rem;
  max-width: 20rem;
}

.CMS-TagList-item:last-child {
  margin-right: 0;
}

.CMS-TagList-text {
  background: white;
  border: 0.1rem solid rgb(238, 238, 239);
  border-radius: 3rem;
  display: block;
  font-size: 85%;
  overflow-x: hidden;
  padding: 0.6rem 1.1rem 0.5rem 1.1rem;
  text-overflow: ellipsis;
}

.CMS-Checklist-item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 0.8rem 0;
}

.CMS-Checklist-item-icon {
  color: #c24a46;
}

.CMS-Checklist-item-icon.is-checked {
  color: #66ad5e;
}

.CMS-Checklist-item-text {
  padding-left: 1rem;
}

.CMS-DotNav-item {
  float: left;
  line-height: 1rem;
  opacity: 0.4;
  transition: opacity 200ms;
}

.CMS-DotNav-item.is-active {
  opacity: 1;
}

.CMS-DotNav-button {
  color: inherit;
}

.CMS-DotNav-button::after {
  background-color: currentColor;
  border-radius: 50%;
  content: "";
  display: block;
  height: 1rem;
  margin: 0.5rem;
  width: 1rem;
}

.CMS-Breadcrumb {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  overflow-x: scroll;
  position: relative;
}

.CMS-Breadcrumb-item {
  margin-right: 2.5rem;
  white-space: nowrap;
}

.CMS-Breadcrumb-item::after {
  background-color: rgb(44, 96, 122);
  content: "";
  height: 2rem;
  margin-left: 0.75rem;
  margin-top: 0.25em;/* ! will not work live -> /nmms prefix needed
       -> install https://github.com/postcss/postcss-url or something similar
      */
  -webkit-mask: url("/images/icon_arrow_right.svg") no-repeat;
          mask: url("/images/icon_arrow_right.svg") no-repeat;
  position: absolute;
  width: 2rem;
}

.CMS-Breadcrumb-item:last-child::after {
  content: none;
}

.CMS-Breadcrumb-item--home {
  margin-left: 2rem;
}

.CMS-Breadcrumb-item--home::before {
  background-color: rgb(44, 96, 122);
  content: "";
  height: 2rem;
  left: 0;
  margin-left: 0;
  margin-top: 0.25em;/* ! will not work live -> /nmms prefix needed
         -> install https://github.com/postcss/postcss-url or something similar
        */
  -webkit-mask: url("/images/icon_home.svg") no-repeat;
          mask: url("/images/icon_home.svg") no-repeat;
  position: absolute;
  width: 2rem;
}

.CMS-Breadcrumb-link {
  color: rgb(44, 96, 122);
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

.CMS-Hero {
  background-position: center;
  background-size: cover;
  height: 100vh;
  position: relative;
}

/* the dedicated hero content element */

.CMS-Hero-content {
  text-align: center;
}

.CMS-Hero-content .CMS-H1 {
  color: white;
  text-shadow: 0 0.2rem 0.2rem rgba(33, 34, 34, 0.15);
}

.CMS-Hero-content .CMS-H3 {
  color: #fff;
}

.CMS-Hero-content .CMS-Hero-cta {
  margin-top: 30px;
}

.CMS-Hero-text {
  margin: 0 auto;
  max-width: 65.5rem;
  position: relative;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.CMS-Hero-text > .CMS-H1 {
  margin-bottom: 3rem;
}

.CMS-Hero-text > .CMS-paragraph {
  color: white;
  line-height: 1.35;
  margin-bottom: 3rem;
  margin-top: 3rem;
  text-align: center;
  text-shadow: 0 0.2rem 0.2rem rgba(33, 34, 34, 0.15);
}

.CMS-Hero-text > .CMS-Button {
  display: inline-block;
  margin-top: 0.3rem;
}

.CMS-Hero-overrideColor > .CMS-paragraph, .CMS-Hero-overrideColor > .CMS-H1, .CMS-Hero-overrideColor > .CMS-H2, .CMS-Hero-overrideColor > .CMS-H3, .CMS-Hero-overrideColor > .CMS-H4, .CMS-Hero-overrideColor > .CMS-H5, .CMS-Hero-overrideColor > .CMS-H6 {
  color: inherit;
}

.CMS-Hero-anchor {
  bottom: 4rem;
  position: absolute;
  text-align: center;
  width: 100%;
}

.CMS-Hero-anchor .CMS-Link {
  color: white;
  font-size: 1.2rem;
}

@media (max-width: 991px) {

  .CMS-Hero-text {
    max-width: 61.3rem;
  }

  .CMS-Hero-text > .CMS-H1 {
    font-size: 5.6rem;
    line-height: normal;
    margin-bottom: 3.7rem;
  }

  .CMS-Hero-text > .CMS-paragraph {
    font-size: 1.6rem;
    line-height: 1.17;
    margin-bottom: 7.2rem;
  }

  .CMS-Hero-text > .CMS-Button {
    font-size: 1.6rem;
    margin-top: 0;
  }
}

@media (max-width: 767px) {

  .CMS-Hero-text {
    max-width: 31.8rem;
  }

  .CMS-Hero-text > .CMS-H1 {
    font-size: 3.2rem;
  }

  .CMS-Hero-text > .CMS-paragraph {
    font-size: 1.6rem;
    line-height: 1.31;
    margin-bottom: 3.2rem;
  }

  .CMS-Hero-text > .CMS-Button {
    font-size: 1.6rem;
    margin-top: 0;
  }

  .CMS-Hero-anchor {
    bottom: 2.5rem;
  }
}

.CMS-Hero-search {
  height: calc(100vh - 8.8rem);
  max-height: 160rem;
  overflow: hidden;
  position: relative;
}

.CMS-Hero-search--video {
  height: 100vh;
  max-height: 160rem;
  min-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  right: 0;
  width: auto;
}

@media (max-width: 991px) {

  .CMS-Hero-search--video {/* do not show (and load) the video on mobile to save bandwidth */
    display: none;
  }
}

.CMS-Hero-search--text {
  height: calc(50vh - 4.4rem);
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.CMS-Hero-search .CMS-content {
  height: 100%;
}

.CMS-Hero-search .CMS-content > div {
  height: 100%;
}

.CMS-Hero-search .CMS-H1 {
  bottom: 0;
  font-size: 4.6rem;
  line-height: 1.39;
  margin-bottom: 2.1rem;
  position: absolute;
  text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15);
  width: 100%;
}

.CMS-Hero-search .CMS-Link {
  font-size: 1.6rem;
  font-weight: 500;
}

.CMS-Hero-search .CMS-Link .CMS-Icon {
  margin-top: 1rem;
}

@media (max-width: 991px) {

  .CMS-Hero-search {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .CMS-Hero-search .CMS-H1 {
    font-size: 5.6rem;
  }
}

@media (max-width: 767px) {

  .CMS-Hero-search .CMS-H1 {
    font-size: 3rem;
  }
}

.CMS-Section {
  margin: 12rem auto;
  max-width: 117rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.CMS-Section.CMS-no_margin_top {
  margin-top: 0;
}

.CMS-Section.CMS-no_margin_bottom {
  margin-bottom: 0;
}

.CMS-Section-row {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.CMS-Section::before, .CMS-Section::after, .CMS-Section-row::before, .CMS-Section-row::after {
  content: " ";
  display: table;
}

.CMS-Section::after, .CMS-Section-row::after {
  clear: both;
}

.CMS-Section-col {
  float: left;
  min-height: 0.1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
}

.CMS-Section-col.CMS-col--25 {
  width: 25%;
}

.CMS-Section-col.CMS-col--33 {
  width: 33.33%;
}

.CMS-Section-col.CMS-col--50 {
  width: 50%;
}

.CMS-Section-col.CMS-col--66 {
  width: 66.66%;
}

.CMS-Section-col.CMS-col--75 {
  width: 75%;
}

.CMS-Section-col.CMS-col--100 {
  width: 100%;
}

.CMS-Section--show_mobile {
  display: none;
}

.CMS-Section img {
  height: auto;
  max-width: 100%;
}

.CMS-Section iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

@media (max-width: 991px) {

  .CMS-Section {
    margin-bottom: 8rem;
    margin-top: 8rem;
    max-width: 72.8rem;
  }

  .CMS-Section.CMS-1col .CMS-H2 {
    font-size: 3rem;
  }
}

@media (max-width: 767px) {

  .CMS-Section {
    margin-bottom: 6rem;
    margin-top: 6rem;
    max-width: 36rem;/**
     * Special case when displaying a 3-column section with 3 images
     */
  }

  .CMS-Section-col.CMS-col--25, .CMS-Section-col.CMS-col--33, .CMS-Section-col.CMS-col--50, .CMS-Section-col.CMS-col--66, .CMS-Section-col.CMS-col--75, .CMS-Section-col.CMS-col--100 {
    width: 100%;
  }

  .CMS-Section--show_mobile {
    display: block;
  }

  .CMS-Section--hide_mobile {
    display: none;
  }

  .CMS-Section.CMS-3col .CMS-Section-col:not(:first-child) img {
    margin-top: 4.5rem;
  }

  .CMS-Section.CMS-3col .CMS-Section-col img {
    margin-bottom: 4.5rem;
  }
}

.CMS-Background {
  background-position: center;
  background-size: cover;
}

.CMS-Background::before, .CMS-Background::after {
  content: " ";
  display: table;
}

.CMS-Background::after {
  clear: both;
}

.CMS-ContentSection {

  background-position: center;
  background-size: cover;

  /* break margin collapsing with the next/previous section */
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;

  /* fix crappy floating on some elements, e.g. the question carousel */
  clear: both;
  padding: 0 20px;
}

.CMS-ContentSection-Content {
  margin: 40px auto;
  max-width: 102.4rem;
}

@media(min-width: 768px) {

  .CMS-ContentSection-Content {
    margin: 80px auto;
  }
}

.CMS-ContentSection--DropShadow {
  text-shadow: 1px 1px 6px #fff;
}

.CMS-ContentSection--White {
  color: #fff;
}

.CMS-ContentSection--WhiteDropShadow {
  color: #fff;
  text-shadow: 1px 1px 4px #212222;
}

.CMS-ContentSection--Blue {
  color: #49a0cc;
}

.CMS-ContentSection--BlueDropShadow {
  color: #49a0cc;
  text-shadow: 1px 1px 4px #212222;
}

.CMS-ContentSection--noTopPadding {
  padding-top: 0;
}

.CMS-ContentSection--noBottomPadding {
  padding-bottom: 0;
}

.CMS-MultiCol {
  /* stylelint-enable */

}

/* stylelint-disable */

@media all and (-ms-high-contrast: none) {

  .CMS-MultiCol .CMS-MultiCol-column-left {
    margin-right: 5px;
  }

  .CMS-MultiCol .CMS-MultiCol-column-center {
    -ms-grid-row: 1;
        grid-row: 1;
    margin-left: 5px;
    margin-right: 5px;
  }

  .CMS-MultiCol .CMS-MultiCol-column-right {
    -ms-grid-row: 1;
        grid-row: 1;
    margin-left: 5px;
  }
}

/* stylelint doesn't like the -ms- prefixes */

@media (min-width: 768px) and (-ms-high-contrast: none) {

  .CMS-MultiCol {/** 2-col elements *//** 3-col elements */
  }

  .CMS-MultiCol .CMS-MultiCol-row--50-50 .CMS-MultiCol-column-right {
    -ms-grid-column: 7;
  }

  .CMS-MultiCol .CMS-MultiCol-row--33-66 .CMS-MultiCol-column-right {
    -ms-grid-column: 5;
  }

  .CMS-MultiCol .CMS-MultiCol-row--66-33 .CMS-MultiCol-column-right {
    -ms-grid-column: 9;
  }

  .CMS-MultiCol .CMS-MultiCol-row--25-75 .CMS-MultiCol-column-right {
    -ms-grid-column: 4;
  }

  .CMS-MultiCol .CMS-MultiCol-row--75-25 .CMS-MultiCol-column-right {
    -ms-grid-column: 10;
  }

  .CMS-MultiCol .CMS-MultiCol-row--33-33-33 .CMS-MultiCol-column-center {
    -ms-grid-column: 5;
  }

  .CMS-MultiCol .CMS-MultiCol-row--33-33-33 .CMS-MultiCol-column-right {
    -ms-grid-column: 9;
  }

  .CMS-MultiCol .CMS-MultiCol-row--25-25-50 .CMS-MultiCol-column-center {
    -ms-grid-column: 4;
  }

  .CMS-MultiCol .CMS-MultiCol-row--25-25-50 .CMS-MultiCol-column-right {
    -ms-grid-column: 7;
  }

  .CMS-MultiCol .CMS-MultiCol-row--25-50-25 .CMS-MultiCol-column-center {
    -ms-grid-column: 4;
  }

  .CMS-MultiCol .CMS-MultiCol-row--25-50-25 .CMS-MultiCol-column-right {
    -ms-grid-column: 10;
  }

  .CMS-MultiCol .CMS-MultiCol-row--50-25-25 .CMS-MultiCol-column-center {
    -ms-grid-column: 7;
  }

  .CMS-MultiCol .CMS-MultiCol-row--50-25-25 .CMS-MultiCol-column-right {
    -ms-grid-column: 10;
  }
}

/** Special layout properties for IE11 */

@media (max-width: 767px) and (-ms-high-contrast: none) {

  .CMS-MultiCol .CMS-MultiCol-column-center {
    -ms-grid-row: 2;
        grid-row: 2;
  }

  .CMS-MultiCol .CMS-MultiCol-column-right {
    -ms-grid-row: 3;
        grid-row: 3;
  }
}

.CMS-MultiCol-row {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
}

@media(min-width: 768px) {

  .CMS-MultiCol-row {
    grid-auto-flow: row;
    -ms-grid-columns: (1fr)[12];
        grid-template-columns: repeat(12, 1fr);
  }
}

.CMS-MultiCol--inverseCollapsedOrder {
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

@media(min-width: 768px) {

  .CMS-MultiCol--inverseCollapsedOrder {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

/*
    column definitions
    all "grows" are based on a 12-column grid
  */

@media(min-width: 768px) {

  .CMS-MultiCol-col25 {
    -ms-grid-column: span 3;
        grid-column: span 3;
    -ms-grid-column-span: 3;/* stylelint-disable-line */
  }

  .CMS-MultiCol-col33 {
    -ms-grid-column: span 4;
        grid-column: span 4;
    -ms-grid-column-span: 4;/* stylelint-disable-line */
  }

  .CMS-MultiCol-col50 {
    -ms-grid-column: span 6;
        grid-column: span 6;
    -ms-grid-column-span: 6;/* stylelint-disable-line */
  }

  .CMS-MultiCol-col66 {
    -ms-grid-column: span 8;
        grid-column: span 8;
    -ms-grid-column-span: 8;/* stylelint-disable-line */
  }

  .CMS-MultiCol-col75 {
    -ms-grid-column: span 9;
        grid-column: span 9;
    -ms-grid-column-span: 9;/* stylelint-disable-line */
  }
}

/**
    order definitions for 3-column elements
    using this max-width viewport here because otherwise we have to reset everything again on larger screens
  */

@media(max-width: 767px) {

  .CMS-MultiCol-multicol3 .CMS-MultiCol-column-left {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol-column-center {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol-column-right {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-3-2-1 > .CMS-MultiCol-column-left {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-3-2-1 > .CMS-MultiCol-column-right {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-3-1-2 > .CMS-MultiCol-column-left {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-3-1-2 > .CMS-MultiCol-column-center {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-3-1-2 > .CMS-MultiCol-column-right {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-2-1-3 > .CMS-MultiCol-column-left {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-2-1-3 > .CMS-MultiCol-column-center {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-2-1-3 > .CMS-MultiCol-column-right {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-2-3-1 > .CMS-MultiCol-column-left {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-2-3-1 > .CMS-MultiCol-column-center {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-2-3-1 > .CMS-MultiCol-column-right {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-1-3-2 > .CMS-MultiCol-column-center {
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }

  .CMS-MultiCol-multicol3 .CMS-MultiCol--order-1-3-2 > .CMS-MultiCol-column-right {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
}

/**
 * Font sizes for bubble-related styles
 */

.CMS-bubble {
  background-color: #4db8af;
  border-radius: 7rem;
  height: 13.8rem;
  margin-bottom: 2.1rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6.2rem;
  width: 13.8rem;
}

.CMS-bubble--grey {
  background-color: #edeeee;
}

.CMS-bubble--grey .CMS-paragraph {
  color: #a8acad;
}

.CMS-bubble .CMS-paragraph {
  color: white;
  display: inline-block;
  font-family: "Roboto Slab", serif;
  font-size: 5.4rem;
  font-weight: bold;
  line-height: 13.8rem;
  margin: 0;
  text-align: center;
  width: 100%;
}

@media (max-width: 991px) {

  .CMS-bubble {
    height: 10.4rem;
    margin-bottom: 1.1rem;
    margin-top: 5.3rem;
    width: 10.3rem;
  }

  .CMS-bubble .CMS-paragraph {
    font-size: 4.05rem;
    line-height: 10.4rem;
  }
}

@media (max-width: 767px) {

  .CMS-bubble {
    height: 6.9rem;
    margin-bottom: 0.1rem;
    margin-top: 2.8rem;
    width: 6.9rem;
  }

  .CMS-bubble .CMS-paragraph {
    font-size: 2.7rem;
    line-height: 6.9rem;
  }
}

.CMS-bubble-img {
  background-color: transparent;
  height: auto;
  margin-bottom: 3.5rem;
  max-width: 18.7rem;
  width: auto;
}

@media (max-width: 991px) {

  .CMS-bubble-img {
    margin-bottom: 3rem;
    margin-top: 0;
    max-width: 14rem;
  }
}

@media (max-width: 767px) {

  .CMS-bubble-img {
    margin-bottom: 2rem;
    margin-top: 0;
    max-width: 18.7rem;
  }
}

.CMS-gallery {
  margin-bottom: 8.2rem;
  margin-top: 6rem;
  overflow: hidden;
  width: 100%;
}

.CMS-gallery-img {
  float: left;
  height: auto;
  width: 25%;
}

.CMS-gallery-img img {
  display: block;
  height: auto;
  width: 100%;
}

@media (max-width: 991px) {

  .CMS-gallery {
    margin-top: 4rem;
  }
}

@media (max-width: 767px) {

  .CMS-gallery {
    margin-top: 3rem;
  }

  .CMS-gallery-img {
    width: 50%;
  }
}

.CMS-followusIcons {
  margin-top: 3rem;
  text-align: center;
}

.CMS-followusIcons > div {
  display: inline-block;
}

.CMS-followusIcons-link {
  border-radius: 50%;
  display: inline-block;
  height: 9.5rem;
  line-height: 9.5rem;
  margin-bottom: 2rem;
  margin-left: 4.5rem;
  margin-right: 4.5rem;
  width: 9.5rem;
}

.CMS-followusIcons-link--instagram {
  background-color: #d77d35;
}

.CMS-followusIcons-link--facebook {
  background-color: #49a0cc;
}

.CMS-followusIcons-link--twitter {
  background-color: #4db8af;
}

.CMS-followusIcons-link--youtube {
  background-color: #bd4b45;
}

.CMS-followusIcons-link--pinterest {
  background-color: #c65c89;
}

img.CMS-followusIcons-link-image {
  height: 3.4rem;
  vertical-align: middle;
  width: auto;
}

@media (max-width: 991px) {

  .CMS-followusIcons-link {
    height: 7.1rem;
    line-height: 7.1rem;
    margin-left: 3.2rem;
    margin-right: 3.2rem;
    width: 7.1rem;
  }

  img.CMS-followusIcons-link-image {
    height: 2.5rem;
  }
}

@media (max-width: 767px) {

  .CMS-followusIcons-link {
    height: 5.9rem;
    line-height: 5.9rem;
    margin-left: 2.4rem;
    margin-right: 2.4rem;
    width: 5.9rem;
  }

  img.CMS-followusIcons-link-image {
    height: 2rem;
  }
}

.CMS-Welcome-message {
  height: 5.6rem;
  padding: 1.8rem 0;
  text-align: center;
}

.CMS-Welcome-message--center {
  margin: 0 auto;
  max-width: 90rem;
}

.CMS-Welcome-message--link {
  color: white;
  display: inline-block;
  font-size: 1.6rem;
  margin-left: 2.5rem;
}

.CMS-Welcome-message--close {
  float: right;
  margin-right: 1.5rem;
  opacity: 0.4;
}

.CMS-Welcome-message .CMS-paragraph {
  color: white;
  font-size: 1.6rem;
  margin: 0;
}

.CMS-Welcome-message-mobile {
  display: none;
}

@media (max-width: 991px) {

  .CMS-Welcome-message--link {
    font-size: 1.5rem;
  }
}

@media (max-width: 767px) {

  .CMS-Welcome-message {
    height: 4rem;
    padding: 1rem 0;
  }

  .CMS-Welcome-message--link {
    font-size: 1.4rem;
  }

  .CMS-Welcome-message-mobile {
    display: block;
  }

  .CMS-Welcome-message-desktop {
    display: none;
  }
}

.CMS-ContentSection .CMS-Question-carousel--wrap {/* within a content section, the width is already limited by the section content wrap, so we don't need the limit
       here */
  width: auto;
}

.CMS-Question-carousel {
  margin: 0 auto 2rem;
  position: relative;
  width: 100%;
}

.CMS-Question-carousel--wrap {
  margin: auto;
  max-width: 98.2rem;
  width: 69%;
}

.CMS-Question-carousel-framewrap {
  position: relative;
}

.CMS-Question-carousel .CMS-H5 {
  color: #212222;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.4rem;
  margin-bottom: 0.7rem;
  margin-top: 0.9rem;
  text-align: left;
  white-space: pre-line;
}

.CMS-Question-carousel .CMS-H6 {
  float: left;
  font-family: "Roboto", sans-serif;
  padding-bottom: 0.8rem;
  text-align: left;
}

.CMS-Question-carousel .CMS-H6 a {
  color: rgb(58, 128, 163);
  font-weight: 500;
  margin-left: 0.5rem;
}

.CMS-Question-carousel-frame {
  font-size: 0;
  line-height: 0;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: 100%;
}

.CMS-Question-carousel-slide {
  display: inline-table;
  height: auto;
  margin-right: 2rem;
  max-height: 20rem;
  max-width: 31rem;
  min-width: 18.5rem;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: auto;
}

.CMS-Question-carousel-slide img {
  height: auto;
  width: 100%;
}

.CMS-Question-carousel-slide picture {
  display: block;
}

.CMS-Question-carousel-prev, .CMS-Question-carousel-next {
  background: transparent;
  display: block;
  height: 4.9rem;
  margin-top: -2.45rem;
  position: absolute;
  top: 13rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 15%;
  z-index: 1;
}

.CMS-Question-carousel-next {
  right: 0;
}

.CMS-Question-carousel-prev {
  left: 0;
}

.CMS-Question-carousel-next svg:hover, .CMS-Question-carousel-prev svg:hover {
  background-color: #49a0cc;
  color: white;
}

.CMS-Question-carousel-next svg {
  float: right;
  margin-right: -2.6rem;
}

.CMS-Question-carousel-prev svg {
  float: left;
  margin-left: -2.6rem;
}

.CMS-Question-carousel-next svg, .CMS-Question-carousel-prev svg {
  background: white;
  border-radius: 50%;
  color: rgb(103, 103, 103);
  height: 4.9rem;
  padding: 1.7rem;
  width: 4.9rem;
}

@media (max-width: 991px) {

  .CMS-Question-carousel {
    width: 96%;
  }

  .CMS-Question-carousel .CMS-H5 {
    font-size: 1.6rem;
    line-height: 2.1rem;
    margin-bottom: 0.5rem;
    margin-top: 1.1rem;
  }

  .CMS-Question-carousel-prev, .CMS-Question-carousel-next {
    display: none;
  }

  .CMS-Question-carousel-frame {
    -ms-overflow-style: none;
    overflow-y: hidden;
    position: relative;
    -ms-scroll-chaining: none;
    white-space: nowrap;
    width: 100%;
  }

  .CMS-Question-carousel-slide {
    display: inline-table;
    width: 22.3rem;
  }

  .CMS-Question-carousel-slide img {
    height: 20.8rem;
    width: 22.3rem;
  }

  .CMS-Question-carousel--wrap {
    margin: 0;
    padding-left: 3%;
    width: 100%;
  }
}

@media (max-width: 767px) {

  .CMS-Question-carousel .CMS-H5 {
    line-height: 2rem;
  }

  .CMS-Question-carousel .CMS-H6 {
    font-size: 1.2rem;
  }

  .CMS-Question-carousel-slide {
    width: 21rem;
  }

  .CMS-Question-carousel-slide img {
    height: 20.8rem;
    width: 21rem;
  }
}

.CMS-Profile-carousel {
  height: 41rem;
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: 100%;
}

.CMS-Profile-carousel-swiperContainer {
  background-position: top center;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  max-width: 125.4rem;
  min-height: 40rem;
  overflow: hidden;
  padding-bottom: 2rem;
  position: relative;
  width: 100%;
  z-index: 1;
}

.CMS-Profile-carousel-swiperWrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 1;
}

.CMS-Profile-carousel-swiperSlide {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  font-size: 1.8rem;
  height: 33.8rem;
  margin: 0 auto;
  opacity: 0;
  position: relative;
  text-align: center;
  top: 2.3rem;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  transition: 0.5s opacity ease-in-out, 0.3s -webkit-transform ease-in-out;
  transition: 0.5s opacity ease-in-out, 0.3s transform ease-in-out;
  transition: 0.5s opacity ease-in-out, 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out;
  width: 39.7rem;
}

.CMS-Profile-carousel-swiperSlide-innerLink {
  background-color: white;
  border-radius: 0.4rem;
  box-shadow: 0 0.8rem 3rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
  width: 100%;
}

.CMS-Profile-carousel-swiperSlide.CMS-Profile-carousel-swiperSlide-prev, .CMS-Profile-carousel-swiperSlide.CMS-Profile-carousel-swiperSlide-next {
  transition: 0.8s;
}

.CMS-Profile-carousel-swiperSlide-active {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.CMS-Profile-carousel-swiperSlide-images {
  height: 8rem;
  overflow: hidden;
  width: 100%;
}

.CMS-Profile-carousel-swiperSlide-backgroundImage {
  height: auto;
  width: 100%;
}

.CMS-Profile-carousel-swiperSlide-avatarImage {
  border: solid 0.1rem #dcdfe0;
  border-radius: 5rem;
  height: 7.55rem;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 6%;
  width: 7.55rem;
  z-index: 10;
}

.CMS-Profile-carousel-swiperSlide-labelExperte, .CMS-Profile-carousel-swiperSlide-labelBusiness {
  color: white;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  font-stretch: normal;
  font-style: normal;
  font-weight: bold;
  left: 0;
  letter-spacing: 0.09rem;
  line-height: normal;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 22%;
  z-index: 20;
}

.CMS-Profile-carousel-swiperSlide-labelInner {
  background-color: #66ad5e;
  padding: 0.2rem 1.7rem;
}

.CMS-Profile-carousel-swiperSlide-labelBusiness-labelInnerBusiness {
  background-color: #646767;
}

.CMS-Profile-carousel-swiperSlide-data {
  display: inline-block;
  margin-top: 2.8rem;
  width: 100%;
}

.CMS-Profile-carousel-swiperSlide-userRegistration {
  color: #a8acad;
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  height: 2rem;
  letter-spacing: normal;
  line-height: 1.67;
  text-align: center;
  width: 100%;
}

.CMS-Profile-carousel-swiperSlide-shortDescription {
  color: #191a1a;
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1.25;
  margin: 0 auto;
  margin-top: 1.9rem;
  padding: 0 3rem;
  text-align: center;
  width: 32.2rem;
}

.CMS-Profile-carousel-swiperSlide-shortText {
  color: #a8acad;
  font-size: 1.2rem;
  font-stretch: normal;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0.2rem;
  line-height: 1.67;
  margin-top: 2.5rem;
  text-align: center;
  text-transform: uppercase;
}

.CMS-Profile-carousel-swiperSlide-tags {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  height: 3.5rem;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 0.6rem;
  overflow: hidden;
  padding: 0 3rem;
}

.CMS-Profile-carousel-swiperSlide-tag {
  background-color: #f6f6f6;
  border: solid 0.1rem #edeeee;
  border-radius: 7.5rem;
  color: #646767;
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 1rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding: 0.8rem 1.4rem;
  white-space: nowrap;
}

.CMS-Profile-carousel-swiperSlide-tag:last-child {
  margin-right: 0;
}

.CMS-Profile-carousel-swiperPagination {
  bottom: -1rem;
  left: 0;
  margin: 1rem auto;
  position: absolute;
  right: 0;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition: 0.3s;
  z-index: 10;
}

.CMS-Profile-carousel-swiperPagination-bullet {
  background: black;
  border-radius: 100%;
  cursor: pointer;
  display: inline-block;
  height: 0.8rem;
  margin: 0.5rem;
  opacity: 0.2;
  width: 0.8rem;
}

.CMS-Profile-carousel-swiperPagination-bullet-active {
  background: #646767;
  opacity: 1;
}

.CMS-Profile-carousel-swiperButtonNext::before, .CMS-Profile-carousel-swiperButtonPrev::before {
  border-right: 0.2rem solid #646767;
  border-top: 0.2rem solid #646767;
  content: "";
  display: inline-block;
  height: 1rem;
  left: 0.3rem;
  margin-right: 0.5em;
  position: relative;
  top: 1.5rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 1rem;
}

.CMS-Profile-carousel-swiperButtonNext:hover, .CMS-Profile-carousel-swiperButtonPrev:hover {
  background-color: #49a0cc;
}

.CMS-Profile-carousel-swiperButtonNext:hover::before, .CMS-Profile-carousel-swiperButtonPrev:hover::before {
  border-right: 0.2rem solid white;
  border-top: 0.2rem solid white;
}

.CMS-Profile-carousel-swiperButtonPrev::before {
  -webkit-transform: translateX(0.4rem) scale(-1, 1) rotate(45deg);
          transform: translateX(0.4rem) scale(-1, 1) rotate(45deg);
}

.CMS-Profile-carousel-swiperButtonNext, .CMS-Profile-carousel-swiperButtonPrev {
  background-color: white;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 2.7rem 4.4rem;
  border-radius: 5rem;
  bottom: 0;
  cursor: pointer;
  height: 5rem;
  margin: auto;
  position: absolute;
  top: 0;
  transition: 0.1s all ease-in-out;
  width: 5rem;
  z-index: 10;
}

.CMS-Profile-carousel-buttonDisabled {
  cursor: auto;
  opacity: 0.35;
  pointer-events: none;
}

.CMS-Profile-carousel-swiperButtonPrev {
  left: 28%;
}

.CMS-Profile-carousel-swiperButtonNext {
  right: 28%;
}

.CMS-Profile-carousel-swiperButtonPrev:hover, .CMS-Profile-carousel-swiperButtonNext:hover {
  box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.15);
}

@media (max-width: 991px) {

  .CMS-Profile-carousel {
    height: 39rem;
  }

  .CMS-Profile-carousel-swiperContainer {
    min-height: 39rem;
  }

  .CMS-Profile-carousel-swiperSlide {
    height: auto;
    max-height: 38.7rem;
    top: 1.2rem;
  }

  .CMS-Profile-carousel-swiperSlide-active {
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  .CMS-Profile-carousel-swiperSlide-shortDescription {
    width: 100%;
  }

  .CMS-Profile-carousel-swiperSlide-tags {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    display: block;
    line-height: 3.3rem;
    margin-bottom: 3rem;
  }

  .CMS-Profile-carousel-swiperSlide-tag {
    display: inline-block;
    float: none;
    margin: auto;
    padding-bottom: 0.4rem;
    padding-top: 0.4rem;
  }

  .CMS-Profile-carousel-swiperSlide-labelBusiness, .CMS-Profile-carousel-swiperSlide-labelExperte {
    top: 20%;
  }

  .CMS-Profile-carousel-swiperButtonPrev {
    left: 18%;
  }

  .CMS-Profile-carousel-swiperButtonNext {
    right: 18%;
  }

  .CMS-Profile-carousel-swiperPagination {
    bottom: -2rem;
  }
}

@media (max-width: 767px) {

  .CMS-Profile-carousel {
    height: auto;
  }

  .CMS-Profile-carousel-swiperContainer {
    min-height: 61rem;
  }

  .CMS-Profile-carousel-swiperSlide {
    top: 9.2rem;
  }

  .CMS-Profile-carousel-swiperSlide-active {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }

  .CMS-Profile-carousel-swiperSlide-labelBusiness, .CMS-Profile-carousel-swiperSlide-labelExperte {
    top: 19%;
  }

  .CMS-Profile-carousel-tags {
    margin-bottom: 2rem;
  }

  .CMS-Profile-carousel-swiperButtonNext, .CMS-Profile-carousel-swiperButtonPrev {
    display: none;
  }

  .CMS-Profile-carousel-swiperPagination {
    bottom: -1rem;
  }
}

@media (max-width: 423px) {

  .CMS-Profile-carousel-swiperContainer {
    min-height: 42rem;
  }

  .CMS-Profile-carousel-swiperSlide {
    padding: 0 2.6rem;
  }

  .CMS-Profile-carousel-swiperSlide-active {
    top: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  .CMS-Profile-carousel-swiperSlide-labelBusiness, .CMS-Profile-carousel-swiperSlide-labelExperte {
    top: 18%;
  }
}

.CMS-ContentSection h2.CMS-Profile-carousel-username {
  color: #191a1a;
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-stretch: normal;
  font-style: normal;
  font-weight: bold;
  letter-spacing: normal;
  line-height: 1.4;
  margin: 0 0 -1rem 0;
  text-align: center;
}

.CMS-Logo-carousel {
  margin: 0 auto 2rem;
  position: relative;
  width: 100%;
}

.CMS-Logo-carousel--wrap {
  margin: auto;
  max-width: 98.2rem;
  width: 69%;
}

.CMS-Logo-carousel .CMS-H5 {
  color: #212222;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.4rem;
  margin-bottom: 0.7rem;
  margin-top: 0.9rem;
  text-align: left;
  white-space: pre-line;
}

.CMS-Logo-carousel .CMS-H6 {
  float: left;
  font-family: "Roboto", sans-serif;
  padding-bottom: 0.8rem;
  text-align: left;
}

.CMS-Logo-carousel .CMS-H6 a {
  color: rgb(58, 128, 163);
  font-weight: 500;
  margin-left: 0.5rem;
}

.CMS-Logo-carousel-frame {
  font-size: 0;
  line-height: 0;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: 100%;
}

.CMS-Logo-carousel-slide {
  display: inline-table;
  height: auto;
  margin-right: 2rem;
  max-height: 20rem;
  max-width: 31rem;
  min-width: 18.5rem;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: auto;
}

.CMS-Logo-carousel-slide img {
  height: auto;
  width: 100%;
}

.CMS-Logo-carousel-slide picture {
  display: block;
}

.CMS-Logo-carousel-prev, .CMS-Logo-carousel-next {
  background: transparent;
  display: block;
  height: 4.9rem;
  margin-top: -2.45rem;
  position: absolute;
  top: 13rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 15%;
  z-index: 1;
}

.CMS-Logo-carousel-next {
  right: 0;
}

.CMS-Logo-carousel-prev {
  left: 0;
}

.CMS-Logo-carousel-next svg:hover, .CMS-Logo-carousel-prev svg:hover {
  background-color: #49a0cc;
  color: white;
}

.CMS-Logo-carousel-next svg {
  float: right;
  margin-right: -2.6rem;
}

.CMS-Logo-carousel-prev svg {
  float: left;
  margin-left: -2.6rem;
}

.CMS-Logo-carousel-next svg, .CMS-Logo-carousel-prev svg {
  background: white;
  border-radius: 50%;
  color: rgb(103, 103, 103);
  height: 4.9rem;
  padding: 1.7rem;
  width: 4.9rem;
}

@media (max-width: 991px) {

  .CMS-Logo-carousel {
    width: 96%;
  }

  .CMS-Logo-carousel .CMS-H5 {
    font-size: 1.6rem;
    line-height: 2.1rem;
    margin-bottom: 0.5rem;
    margin-top: 1.1rem;
  }

  .CMS-Logo-carousel-prev, .CMS-Logo-carousel-next {
    display: none;
  }

  .CMS-Logo-carousel-frame {
    -ms-overflow-style: none;
    overflow-y: hidden;
    position: relative;
    -ms-scroll-chaining: none;
    white-space: nowrap;
    width: 100%;
  }

  .CMS-Logo-carousel-slide {
    display: inline-table;
    width: 22.3rem;
  }

  .CMS-Logo-carousel-slide img {
    height: 20.8rem;
    width: 22.3rem;
  }

  .CMS-Logo-carousel--wrap {
    margin: 0;
    padding-left: 3%;
    width: 100%;
  }
}

@media (max-width: 767px) {

  .CMS-Logo-carousel .CMS-H5 {
    line-height: 2rem;
  }

  .CMS-Logo-carousel .CMS-H6 {
    font-size: 1.2rem;
  }

  .CMS-Logo-carousel-slide {
    width: 21rem;
  }

  .CMS-Logo-carousel-slide img {
    height: 20.8rem;
    width: 21rem;
  }
}

.CMS-LogoMatrix {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;

  /* this breaks correct height scaling of elements at least on Chrome; to "fix" it visually, we set overflow: hidden on
     the elements. */
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.CMS-LogoMatrix-element {
  margin: 0.5rem;/* 117rem is the maximum width of the content area; this is a bit arbitrarily chosen here */
  max-height: 21.4rem;/* If an image is higher than it's wide, at least crop it so it's not totally ugly. */
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  width: 21.4rem;
}

.CMS-LogoMatrix-element img {
  margin: auto;
  max-height: 100%;
  max-width: 100%;
}

.CMS-Embedded-pages {
  background: white;
  border: solid 0.1rem rgb(238, 238, 239);
  border-radius: 0.4rem;
  margin: 3rem auto;
  max-width: 98.8rem;
  padding: 4rem;
  word-break: break-word;
}

.CMS-Embedded-pages .CMS-H1 {
  color: #212222;
  font-family: "Roboto Slab", serif;
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 2.4rem;
  margin-bottom: 4rem;
  text-shadow: none;
}

.CMS-Embedded-pages .CMS-H2 {
  font-family: "Roboto Slab", serif;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 3.6rem;
}

.CMS-Embedded-pages .CMS-paragraph {
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin-bottom: 2.5rem;
}

.CMS-Embedded-pages .CMS-ol {
  list-style-type: decimal;
  padding-left: 1.7rem;
}

.CMS-Embedded-pages .CMS-ol .CMS-paragraph {
  margin-left: -1.7rem;
  text-indent: 1.7rem;
}

@media (max-width: 991px) {

  .CMS-Embedded-pages {
    margin-bottom: 2.2rem;
    margin-top: 2.2rem;
    max-width: 72.4rem;
    padding: 2rem;
  }

  .CMS-Embedded-pages .CMS-H1 {
    font-size: 3rem;
    line-height: 4.5rem;
    margin-bottom: 2rem;
  }

  .CMS-Embedded-pages .CMS-H2 {
    font-size: 2rem;
  }

  .CMS-Embedded-pages .CMS-paragraph {
    font-size: 1.5rem;
    line-height: 2.3rem;
  }
}

@media (max-width: 767px) {

  .CMS-Embedded-pages {
    margin: 1rem;
    padding: 2rem;
  }

  .CMS-Embedded-pages .CMS-H1 {
    font-size: 2.4rem;
    line-height: 3.6rem;
    margin-bottom: 1.5rem;
  }

  .CMS-Embedded-pages .CMS-H1, .CMS-Embedded-pages .CMS-H2, .CMS-Embedded-pages .CMS-H3, .CMS-Embedded-pages .CMS-H4, .CMS-Embedded-pages .CMS-H5, .CMS-Embedded-pages .CMS-H6, .CMS-Embedded-pages .CMS-paragraph {
    text-align: left;
  }
}

.CMS-giphy-element-mediaLink {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: inline-block;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  font-family: "Helvetica Neue", helvetica, sans-serif;
  font-size: 1.3rem;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 0.6rem 0.6rem 0.6rem;
  text-align: left;
  width: 100%;
}

a.CMS-giphy-element-mediaLink-anchor {
  color: inherit;
  display: inline-block;
}

.CMS-giphy-element-mediaLinkLogo {
  margin-bottom: 0 !important;
  margin-right: 0.6rem;
  margin-top: 0;
  vertical-align: middle;
}

.CMS-giphy-element-image {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-position: center;
  background-size: cover;
  color: inherit;
  display: inline-block;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  position: relative;
  text-decoration: none;
  width: 100%;
}

.CMS-giphy-element-image::before {
  content: " ";
  display: block;
  padding-top: 62.5%;
}

.CMS-Special {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  padding: 11.5rem 0 9.7rem 0;
  text-align: center;
  width: 100%;
}

.CMS-Special-row {
  margin: 0 auto;
  max-width: 65rem;
  text-align: center;
}

.CMS-Special-normal-text {
  font-weight: normal;
}

.CMS-Special .CMS-paragraph {
  color: white;
  font-size: 1.6rem;
  margin: 0;
}

.CMS-Special .CMS-H1 {
  font-family: "Roboto Slab", serif;
  font-size: 4rem;
  margin-bottom: 2.8rem;
}

@media (max-width: 991px) {

  .CMS-Special {
    padding: 6.9rem 0 5rem 0;
  }

  .CMS-Special-row {
    max-width: 59rem;
  }

  .CMS-Special .CMS-paragraph {
    font-size: 1.4rem;
  }

  .CMS-Special .CMS-H1 {
    font-size: 3rem;
  }
}

@media (max-width: 767px) {

  .CMS-Special {
    padding: 8.4rem 0 7.3rem 0;
  }

  .CMS-Special-row {
    max-width: 24rem;
  }

  .CMS-Special .CMS-paragraph {
    margin-bottom: 1rem;
  }

  .CMS-Special .CMS-H1 {
    font-size: 2.4rem;
  }
}

.CMS-PlatformFact {
  /* stylelint-enable */
}

/* stylelint-disable */

@media all and (-ms-high-contrast: none) {

  .CMS-PlatformFact img {
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
  }

  .CMS-PlatformFact h3 {
    -ms-grid-column: 2;
  }

  .CMS-PlatformFact p {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
}

/* stylelint doesn't like the -ms- prefixes */

@media (min-width: 768px) and (-ms-high-contrast: none) {

  .CMS-PlatformFact img {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
  }

  .CMS-PlatformFact h3 {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  .CMS-PlatformFact p {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
}

.CMS-PlatformFact {

  display: -ms-grid;

  display: grid;
  grid-column-gap: 10px;
  grid-template-areas: "icon headline" "icon text";
  -ms-grid-columns: 96px 1fr;
      grid-template-columns: 96px 1fr;
  text-align: left;
}

@media (min-width: 768px) {

  .CMS-PlatformFact {
    grid-template-areas: "icon" "headline" "text";
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    text-align: center;
  }
}

.CMS-PlatformFact h3 {
  color: #49a0cc;
  font-size: 1.8rem;
  font-weight: bold;
  grid-area: headline;
  margin-top: 1rem;
}

.CMS-PlatformFact img {
  border-radius: 100px;
  grid-area: icon;
  margin: auto;
}

.CMS-PlatformFact p {
  grid-area: text;
  margin: 1rem 0;
}

.CMS-AnswerCarousel {

  position: relative;
}

.CMS-AnswerCarousel-Headline {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-bottom: 1rem;
}

.CMS-AnswerCarousel-ContentMeta {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.CMS-AnswerCarousel-Avatar {
  margin-right: 0.5rem;
}

.CMS-AnswerCarousel-Avatar img {
  border-radius: 50%;
  width: 6rem;
}

.CMS-AnswerCarousel-frame {
  overflow-x: hidden;
}

.CMS-AnswerCarousel-slides {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  list-style: none !important;
  padding: 1rem 0;/* make sure the shadows are all visible */
}

.CMS-AnswerCarousel-slide {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  -webkit-flex: 1 0 100%;
      -ms-flex: 1 0 100%;
          flex: 1 0 100%;/* for usage with Lory, the margin needs to be slightly larger than what we substract below */
  margin-left: 1.25rem;
  padding: 2.5rem;/* Lory moves the first element exactly to the left border of the slides container, which makes the
       shadow disappear */
  -webkit-transform: translate3d(6px, 0, 0);
          transform: translate3d(6px, 0, 0);
}

/* subtract the space between items from the width so the items don't flow out of the frame */

@media (min-width: 768px) {

  .CMS-AnswerCarousel-slide {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
  }
}

@media (min-width: 992px) {

  .CMS-AnswerCarousel-slide {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
  }
}

.CMS-AnswerCarousel-prev, .CMS-AnswerCarousel-next {
  background: white;
  border-radius: 50%;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
  color: rgb(103, 103, 103);
  display: block;
  height: 4.9rem;
  position: absolute;
  top: calc(50% - 2.45rem);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 4.9rem;
  z-index: 1;
}

.CMS-AnswerCarousel-next {
  right: -1.96rem;
}

@media (min-width: 992px) {

  .CMS-AnswerCarousel-next {
    right: -3.43rem;
  }
}

.CMS-AnswerCarousel-prev {
  left: -1.96rem;
}

@media (min-width: 992px) {

  .CMS-AnswerCarousel-prev {
    left: -3.43rem;
  }
}

.CMS-AnswerCarousel-next:hover, .CMS-AnswerCarousel-prev:hover {
  background-color: #49a0cc;
  color: white;
}

.CMS-AnswerCarousel-next svg {
  right: calc(50% - 1.5rem / 2);
}

.CMS-AnswerCarousel-prev svg {
  left: calc(50% - 1.5rem / 2);
}

.CMS-AnswerCarousel-next svg, .CMS-AnswerCarousel-prev svg {
  height: 1.5rem;
  position: absolute;
  top: calc(50% - 1.5rem / 2);
}

.CMS-AuthorBox {
  -webkit-align-items: initial;
      -ms-flex-align: initial;
          align-items: initial;
  color: #646767;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  font-size: 85%;
}

@media (min-width: 768px) {

  .CMS-AuthorBox {
    -webkit-align-items: self-end;
        -ms-flex-align: self-end;
            align-items: self-end;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.CMS-AuthorBox-Author {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.CMS-AuthorBox-Author a {
  font-size: 115%;
}

.CMS-AuthorBox-Author img {
  border-radius: 2.5rem;
  height: auto;
  margin-right: 0.5rem;
  width: 4rem;
}

.CMS-AuthorBox-AuthorName {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.CMS-AuthorBox-Date {
  margin-bottom: 1rem;
}

.CMS-ArticleTeaser h3 a {
  font-weight: bold;
}

.CMS-ArticleTeaser a {
  color: #212222;
}

.CMS-ArticleTeaser-Image {
  margin-bottom: 1rem;
}

/* organisms */

.CMS-Masthead {
  height: 4.8rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* postcss-bem-linter: ignore */

.CMS-Masthead + * {
  padding-top: 4.8rem;
}

.CMS-Masthead.is-affixed {
  -webkit-animation: 0.2s ease-in-out slideDown;
          animation: 0.2s ease-in-out slideDown;
  position: fixed;
}

.CMS-Masthead.is-slidingUp {
  -webkit-animation: 0.2s ease-in-out slideUp forwards;
          animation: 0.2s ease-in-out slideUp forwards;
  position: fixed;
}

.CMS-Masthead-banner {
  background: #49a0cc;
  color: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  max-height: 100%;
  overflow: hidden;
}

.CMS-Masthead-hamburger {
  background: #49a0cc;
  cursor: pointer;
  display: block;
  height: 4.8rem;
  padding: 1.2rem;
  width: 4.8rem;
}

.CMS-Masthead-hamburgerPlaceholder {
  height: 4.8rem;
  width: 4.8rem;
}

.CMS-Masthead-logo {
  color: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: auto;
  padding-top: 1.3rem;
  width: 17rem;
}

.CMS-Masthead-logoGfx {/* fix for Chromium 28.x */
  max-height: 2.5rem;
  width: 12.5rem;
}

.CMS-Masthead-betaLabel {
  height: 2rem;
  margin-left: 0.5rem;
  width: 4rem;
}

.CMS-Masthead-logoGfx, .CMS-Masthead-betaLabel {
  overflow: visible;
}

.CMS-Masthead-searchButton {
  cursor: pointer;
  height: 4.8rem;
  width: 4.8rem;
}

.CMS-Masthead-searchForm {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.25) 0 0.2rem 0.2rem;
  display: block;
  padding: 1rem 3rem;
}

.CMS-Masthead-searchIcon {
  padding: 1.1rem;
}

.CMS-Masthead-searchInput {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  line-height: 1.8rem;
  outline: none;
  width: 100%;
}

@-webkit-keyframes slideDown {

  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideDown {

  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes slideUp {

  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes slideUp {

  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

/* component */

.CMS-Bigfoot {
  background-color: #212222;
  color: #f6f6f6;
}

.CMS-Bigfoot-info, .CMS-Bigfoot-navigation-list, .CMS-Bigfoot-social {
  min-height: 22.3rem;
}

.CMS-Bigfoot-logo {
  max-height: 4rem;
}

.CMS-Bigfoot-logo-svg {
  color: white;
  max-height: 4rem;
  max-width: 20.5rem;
}

.CMS-Bigfoot .CMS-Section {
  margin: 10rem auto;
}

.CMS-Bigfoot-paragraph, .CMS-Bigfoot .CMS-Section p {
  color: #f6f6f6;
  font-family: "Roboto Slab", serif;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: normal;
  margin: 1.8rem 0 0 0;
}

.CMS-Bigfoot-paragraph.CMS-small, .CMS-Bigfoot-paragraph-small, .CMS-Bigfoot .CMS-Section p.CMS-small, .CMS-Bigfoot .CMS-Section p-small {
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 0;
  margin-top: 2.4rem;
}

.CMS-Bigfoot-footerList {
  color: white;
}

.CMS-Bigfoot-footerList-left {
  padding-right: 6rem;
}

.CMS-Bigfoot-footerList-left, .CMS-Bigfoot-footerList-right {
  float: left;
}

.CMS-Bigfoot-footerList-element {
  line-height: 1.31;
  margin-bottom: 1.1rem;
}

.CMS-Bigfoot-socialButton {
  display: inline-block;
  margin-right: 2rem;
}

.CMS-Bigfoot-go-up {
  bottom: 0;
  color: white;
  position: absolute;
  right: 3.4rem;
  text-transform: uppercase;
}

.CMS-Bigfoot-copyright {
  line-height: 1.5;
  margin-top: 1.2rem;
  text-align: left;
}

.CMS-Bigfoot-copyright-text {
  font-size: 1.4rem;
}

.CMS-Bigfoot-navigation {
  display: inherit;
  font-family: "Roboto Slab", serif;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0.04rem;
  line-height: 1.5;
  margin-bottom: 1.1rem;
  text-transform: uppercase;
}

.CMS-Bigfoot-container {
  float: right;
}

.CMS-Bigfoot a {
  color: inherit;
}

@media(max-width: 991px) {

  .CMS-Bigfoot {
    padding-bottom: 5rem;
    padding-top: 5.5rem;
  }

  .CMS-Bigfoot-navigation-list.CMS--tabletHalfWidthFooter, .CMS-Bigfoot-info.CMS--tabletHalfWidthFooter {
    width: 50%;
  }

  .CMS-Bigfoot-navigation-list {
    padding-left: 6rem;
  }

  .CMS-Bigfoot-container {
    float: left;
  }

  .CMS-Bigfoot-social {
    margin-top: 5.7rem;
    min-height: auto;
  }

  .CMS-Bigfoot-social.CMS--tabletFullWidthFooter {
    width: 100%;
  }

  .CMS-Bigfoot-social, .CMS-Bigfoot-navigation-list, .CMS-Bigfoot-info {
    min-height: auto;
  }

  .CMS-Bigfoot-paragraph {
    font-size: 1.6rem;
    margin: 2rem 0 0 0;
  }

  .CMS-Bigfoot-paragraph-small {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 0;
  }

  .CMS-Bigfoot-copyright {
    line-height: 1.75;
  }

  .CMS-Bigfoot-copyright-text {
    font-size: 1.2rem;
  }

  .CMS-Bigfoot-navigation {
    font-size: 1.2rem;
    line-height: 1.75;
    text-transform: uppercase;
  }

  .CMS-Bigfoot-footerList {
    font-size: 1.4rem;
  }

  .CMS-Bigfoot-go-up {
    float: right;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.04rem;
    margin-top: 4rem;
    position: static;
  }
}

@media (max-width: 767px) {

  .CMS-Bigfoot {
    padding-bottom: 3.4rem;
    padding-left: 4rem;
    padding-right: 7rem;
    padding-top: 4.7rem;
  }

  .CMS-Bigfoot .CMS-Section--Bigfoot {
    max-width: 100%;
  }

  .CMS-Bigfoot-info.CMS--tabletHalfWidthFooter, .CMS-Bigfoot-info.CMS--tabletFullWidthFooter, .CMS-Bigfoot-navigation-list.CMS--tabletHalfWidthFooter, .CMS-Bigfoot-navigation-list.CMS--tabletFullWidthFooter, .CMS-Bigfoot-social.CMS--tabletHalfWidthFooter, .CMS-Bigfoot-social.CMS--tabletFullWidthFooter {
    width: 100%;
  }

  .CMS-Bigfoot-footerList-left {
    width: 50%;
  }

  .CMS-Bigfoot-footerList-right {
    width: 50%;
  }

  .CMS-Bigfoot-footerList-element {
    font-weight: 500;
    line-height: 1.5;
  }

  .CMS-Bigfoot-paragraph {
    font-size: 1.8rem;
    margin-top: 1.8rem;
  }

  .CMS-Bigfoot-paragraph-small {
    margin-top: 2.3rem;
  }

  .CMS-Bigfoot-copyright {
    margin-top: 1.3rem;
  }

  .CMS-Bigfoot-container {
    width: 100%;
  }

  .CMS-Bigfoot-navigation-list {
    margin-top: 3.6rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .CMS-Bigfoot-social {
    margin-top: 3.7rem;
  }

  .CMS-Bigfoot-go-up {
    float: left;
    letter-spacing: 0.03rem;
    margin-top: 4.3rem;
    position: static;
    width: 100%;
  }
}

@media (max-width: 423px) {

  .CMS-Bigfoot {
    padding-left: 0;
    padding-right: 0;
  }
}

.SearchResult-meta {
  color: rgb(101, 103, 104);
  font-size: 1.4rem;
}

.SearchResult-more {
  font-size: 1.4rem;
}

.AskQuestionTeaser {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 18rem;

  /* need to overwrite Plate padding */
  padding: 0.5rem 1.5rem 0.5rem 11rem !important;

  position: relative;
}

.AskQuestionTeaser-skater {
  bottom: 0;
  height: 19rem;
  left: -1rem;
  position: absolute;
}

.AskQuestionTeaser-copy {
  text-align: center;
}

.AskQuestionTeaser-button {
  white-space: nowrap;
}

.ImageViewer {

  background: black;
  color: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 10100;
}

/* postcss-bem-linter: ignore */

.ImageViewer button {
  -webkit-tap-highlight-color: transparent;
  transition: opacity 200ms;
}

/* postcss-bem-linter: ignore */

.ImageViewer button:focus {
  outline: none;
}

/* header */

.ImageViewer-header {
  height: 4.4rem;
  padding: 1.2rem;
  position: relative;
  text-align: center;
}

/* no focus outline /  no tap color / opacity transition */

.ImageViewer-nav {
  display: inline-block;
}

.ImageViewer-closeBtn {
  height: 2.4rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2.4rem;
}

/* content */

.ImageViewer-content {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  position: relative;
}

.ImageViewer-nextBtn, .ImageViewer-prevBtn {
  margin-top: -2rem;
  position: absolute;
  top: 50%;
  z-index: 10110;
}

.ImageViewer-nextBtn {
  right: 1rem;
}

.ImageViewer-prevBtn {
  left: 1rem;
}

.ImageViewer-scroller {
  height: calc(100vh - 4.4rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overflow-y: hidden;
  -webkit-scroll-snap-destination: 0% 100%;
      -ms-scroll-snap-destination: 0% 100%;
          scroll-snap-destination: 0% 100%;
  -webkit-scroll-snap-points-x: repeat(100%);
      -ms-scroll-snap-points-x: repeat(100%);
          scroll-snap-points-x: repeat(100%);
  -webkit-scroll-snap-type: mandatory;
      -ms-scroll-snap-type: mandatory;
          scroll-snap-type: mandatory;
  white-space: nowrap;
  width: 100%;
}

.ImageViewer-page {
  display: inline-block;
  height: 100%;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

/* postcss-bem-linter: ignore */

.ImageViewer-page > img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

/* footer */

.ImageViewer-footer {
  position: absolute;
  top: 100%;
  -webkit-transform: translateY(-4rem);
          transform: translateY(-4rem);
  transition: 200ms -webkit-transform;
  transition: 200ms transform;
  transition: 200ms transform, 200ms -webkit-transform;
  width: 100%;
}

.ImageViewer-toggleTitleBtn {
  margin: 0 0 1rem 1rem;
  transition: 200ms -webkit-transform;
  transition: 200ms transform;
  transition: 200ms transform, 200ms -webkit-transform;
}

.ImageViewer-titleToggleState:checked + .ImageViewer-footer .ImageViewer-toggleTitleBtn {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.ImageViewer-titleToggleState:checked + .ImageViewer-footer {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.ImageViewer-title {
  background: rgba(0, 0, 0, 0.6);
  padding: 2rem 3rem 2rem 1rem;
}

/**
 * This element is a special case and we need extra styles for it
 */

.CMS-fullwidth .CMS-Section {
  max-width: none;
}

.CMS-fullwidth .CMS-Section-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.CMS-fullwidth .CMS-Section-col {
  background-position: center;
  background-size: cover;
  padding-bottom: 16rem;
  padding-top: 16rem;
}

.CMS-fullwidth .CMS-Section-col.CMS-text-right, .CMS-fullwidth .CMS-Section-col.CMS-text-left {
  margin: 0 auto;
  max-width: 40%;
}

@media (max-width: 991px) {

  .CMS-fullwidth .CMS-Section-col {
    padding-bottom: 7rem;
    padding-top: 7rem;
  }
}

@media (max-width: 767px) {

  .CMS-fullwidth .CMS-Section-row {
    display: block;
  }

  .CMS-fullwidth .CMS-Section-col {
    min-height: 26.5rem;
    padding-bottom: 4.5rem;
    padding-top: 6rem;
  }

  .CMS-fullwidth .CMS-Section-col.CMS-text-right, .CMS-fullwidth .CMS-Section-col.CMS-text-left {
    max-width: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .CMS-fullwidth .CMS-Section-col.CMS-text-right *, .CMS-fullwidth .CMS-Section-col.CMS-text-left * {
    float: none;
    max-width: none;
  }
}

/* this pseudo element accounts for the height of the navigation bar, since it's absolutely positioned and thus does not
   move the elements after it in the page flow */

.CMS-ContentWrap--withNavigation > .CMS-frame-type-gfcms_contentsection:first-child > .CMS-ContentSection::before {
  content: "";
  display: block;
  height: 4.8rem;
}

@media (min-width: 768px) {

  .CMS-ContentWrap--withNavigation > .CMS-frame-type-gfcms_contentsection:first-child > .CMS-ContentSection::before {
    height: 6rem;
  }
}

@media (min-width: 768px) {

  .CMS-ContentWrap--withNavigation > .CMS-frame-type-gfcms_contentsection:first-child > .CMS-ContentSection::before {
    height: 7.2rem;
  }
}

.CMS-Navigation {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
  max-width: 117rem;
  min-width: 99.2rem;
  padding: 0 2.4rem;
}

.CMS-Navigation-Wrapper {
  background: #212222;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

.CMS-Navigation-Wrapper--sticky {
  position: fixed;
  top: 0;
}

.CMS-Navigation-Wrapper--transition {
  transition: background-color 0.25s linear;
}

.CMS-Navigation-Wrapper--transparent .CMS-Navigation-Menu {
  margin-top: 2rem;
}

.CMS-Navigation-Wrapper--transparent .CMS-Navigation-Menu--Mobile {
  margin-top: 0;
}

.CMS-Navigation-Logo {
  padding-bottom: 1.5rem;
  padding-top: 1.9rem;
}

.CMS-Navigation-Logo-Image {
  height: 3.6rem;
  width: auto;
}

.CMS-Navigation-Hamburger {
  display: none;
}

.CMS-Navigation-Menu {
  margin-top: 0.8rem;
  z-index: 1000;
}

.CMS-Navigation-Menu--Mobile {
  display: none;
}

.CMS-Navigation-Menu--Desktop {
  display: block;
}

.CMS-Navigation-Menu ul {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 1.4rem 0;
}

.CMS-Navigation-Menu ul li {
  color: white;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  font-family: "Roboto", sans-serif;
  font-size: 1.8rem;
  margin-right: 4rem;
  padding: 0 1rem;
}

.CMS-Navigation a {
  color: inherit;
}

@media(max-width: 991px) {

  .CMS-Navigation {
    min-width: 100%;
    position: relative;
  }

  .CMS-Navigation-Logo {
    padding-bottom: 1.9rem;
    padding-top: 2.3rem;
  }

  .CMS-Navigation--Desktop {
    display: none;
  }

  .CMS-Navigation-Hamburger {
    display: block;
    height: 2.1rem;
    margin-left: auto;
    margin-top: 1rem;
    width: 3rem;
  }

  .CMS-Navigation-Hamburger > * {
    height: 2.1rem;
    width: 3rem;
  }

  .CMS-Navigation-navbarVisibility:checked ~ .CMS-Navigation-Wrapper .CMS-Navigation-MenuWrap {
    display: block;
  }

  .CMS-Navigation-navbarVisibility:checked ~ .CMS-Navigation-Wrapper .CMS-Navigation-iconClose {
    display: block;
  }

  .CMS-Navigation-navbarVisibility:checked ~ .CMS-Navigation-Wrapper .CMS-PrimaryNav-iconHamburger {
    display: none;
  }

  .CMS-Navigation-navbarVisibility:not(:checked) ~ .CMS-Navigation-Wrapper .CMS-Navigation-MenuWrap {
    display: none;
  }

  .CMS-Navigation-navbarVisibility:not(:checked) ~ .CMS-Navigation-Wrapper .CMS-Navigation-iconClose {
    display: none;
  }

  .CMS-Navigation-navbarVisibility:not(:checked) ~ .CMS-Navigation-Wrapper .CMS-Navigation-Hamburger {
    display: block;
  }

  .CMS-Navigation-Menu {
    display: none;
    margin-top: 0;
  }

  .CMS-Navigation-Menu--Mobile {
    display: block;
    padding: 0 2.4rem;
    transition: max-height 0.3s ease-in-out;
  }

  .CMS-Navigation-Menu--Mobile > ul {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .CMS-Navigation-Menu--Mobile > ul > li {
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.05);
    font-weight: 500;
    padding: 1.4rem 0;
    width: 100%;
  }

  .CMS-Navigation-Menu--Mobile .CMS-Button {
    margin-top: 0.4rem;
  }

  .CMS-Navigation-Menu--Mobile > *:last-child {
    margin-bottom: 3.3rem;
  }
}

@media(max-width: 767px) {

  .CMS-Navigation-Wrapper {
    width: 100%;
  }

  .CMS-Navigation-Logo {
    padding-bottom: 1.1rem;
    padding-top: 1.5rem;
  }

  .CMS-Navigation-Logo-Image {
    height: 2.5rem;
  }

  .CMS-Navigation--Desktop {
    display: none;
  }

  .CMS-Navigation-Hamburger {
    height: 1.7rem;
    margin-top: 0;
    width: 2.4rem;
  }

  .CMS-Navigation-Hamburger > * {
    height: 1.7rem;
    width: 2.4rem;
  }

  .CMS-Navigation-Menu {
    top: 4.8rem;
  }

  .CMS-Navigation-Menu > ul {
    padding-top: 1rem;
  }

  .CMS-Navigation-Menu .CMS-Button {
    font-size: 1.6rem;
    margin-left: initial;
  }
}

@media (max-width: 991px) {

  .CMS-Navigation a.CMS-Button {
    margin: initial;
    padding: 0.8rem 1.2rem;
  }
}

/* Jobs menu */

.CMS-frame-layout-10 ul {

  margin-top: 15px;

}

.CMS-frame-layout-10 ul li {
  color: #212222;
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 10px;
  text-align: center;
}

@media (min-width: 992px) {

  .CMS-frame-layout-10 ul li {
    font-size: 2rem;
  }
}

.CMS-slider {
  height: 100vh;
  position: relative;
}

.CMS-slider-item {
  bottom: 0;
  height: 100vh;
  left: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.5s ease-in-out;
}

.CMS-slider-item-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  padding: 0.1rem 1.5rem;
}

.CMS-slider-item-img .CMS-H3 {
  color: #fff;
  font-size: 5.4rem;
  font-weight: bold;
  margin-top: 12.9rem;
  text-align: center;
}

.CMS-slider-item-img .CMS-paragraph {
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  margin-top: 3rem;
  text-align: center;
}

.CMS-slider-item .CMS-arrow {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

.CMS-slider-item .CMS-arrow-arrow-prev, .CMS-slider-item .CMS-arrow-arrow-next {
  background-image: url("../../images/icon_arrow@2x.png");
  background-position: center;
  background-repeat: no-repeat;
  border: solid 0.2rem white;
  border-radius: 4rem;
  height: 4.9rem;
  padding: 2rem;
  position: absolute;
  top: 50%;
  width: 4.9rem;
}

.CMS-slider-item .CMS-arrow-arrow-next {
  margin-right: 4.3rem;
  right: 0;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.CMS-slider-item .CMS-arrow-arrow-prev {
  left: 0;
  margin-left: 4.3rem;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.CMS-slider-item--light {
  color: white;
}

.CMS-slider-navigation {
  bottom: 3.8rem;
  height: 1rem;
  position: absolute;
  text-align: center;
  width: 100%;
}

.CMS-slider-navi {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.14902);
  display: inline-table;
  height: 1rem;
  margin-left: 0.6rem;
  margin-right: 0.6rem;
  opacity: 0.4;
  position: relative;
  width: 1rem;
  z-index: 999;
}

.CMS-slider .is-active {
  opacity: 1;
  z-index: 99;
}

.CMS-slider-min-height {
  height: auto;
  min-height: 42rem;
}

.CMS-slider-min-height .CMS-slider-item {
  bottom: 0;
  height: auto;
}

.CMS-slider-min-height .CMS-slider-item .CMS-slider-item-img {
  height: auto;
  min-height: 42rem;
}

.CMS-slider-min-height .CMS-slider-item .CMS-slider-item-img .CMS-paragraph {
  margin-bottom: 7rem;
}

.CMS-slider-min-height .CMS-slider-item .CMS-arrow-arrow-prev, .CMS-slider-min-height .CMS-slider-item .CMS-arrow-arrow-next {
  height: 3rem;
  margin-top: -16%;
  position: static;
  width: 3rem;
}

.CMS-slider-min-height .CMS-slider-item .CMS-arrow-arrow-prev {
  float: left;
}

.CMS-slider-min-height .CMS-slider-item .CMS-arrow-arrow-next {
  float: right;
}

.CMS-slider-min-height .CMS-slider-navigation {
  margin-top: -5.4rem;
  position: static;
}

@media (max-width: 991px) {

  .CMS-slider-item .CMS-H3 {
    font-size: 3rem !important;
    margin-top: 9.8rem !important;
  }

  .CMS-slider-item .CMS-paragraph {
    font-size: 1.2rem !important;
    letter-spacing: 0.07rem !important;
    margin-top: 1.6rem !important;
  }

  .CMS-slider-item .CMS-arrow-arrow-next, .CMS-slider-item .CMS-arrow-arrow-prev {
    display: none;
  }
}

@media (max-width: 767px) {

  .CMS-slider-item .CMS-H3 {
    margin-top: 12.6rem !important;
  }

  .CMS-slider-item .CMS-paragraph {
    letter-spacing: 0.09rem !important;
  }
}

.CMS-slider [id^="target-item"] {
  display: none;
}

.CMS-Carousel-basic {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.CMS-Carousel-basic-no_padding_top {
  padding-top: 0;
}

.CMS-Carousel-basic .CMS-H2 {
  color: #212222;
  font-family: "Roboto", sans-serif;
  font-size: 4rem;
  font-weight: 300;
  line-height: 1.38;
  margin-top: 10rem;
  text-shadow: none;
}

.CMS-Carousel-basic .CMS-H2 strong {
  font-family: "Roboto Slab", serif;
  font-weight: bold;
}

.CMS-Carousel-basic .CMS-paragraph {
  color: #212222;
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 2.4rem;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

@media (max-width: 991px) {

  .CMS-Carousel-basic .CMS-H2 {
    font-size: 3.6rem;
    line-height: 5.5rem;
    padding: 0 1rem;
  }

  .CMS-Carousel-basic .CMS-paragraph {
    font-size: 1.8rem;
    margin-bottom: 1.1rem;
    padding: 0 1rem;
  }
}

@media (max-width: 767px) {

  .CMS-Carousel-basic .CMS-H2 {
    font-size: 2.4rem;
    line-height: 3rem;
  }

  .CMS-Carousel-basic .CMS-paragraph {
    font-size: 1.6rem;
    line-height: 2.2rem;
    margin-bottom: 0.1rem;
  }
}

#CMS--cyberweek-deals {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;

}

#CMS--cyberweek-deals article {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px;
  width: 100%;
}

#CMS--cyberweek-deals article h3 {
  margin-bottom: 10px;
}

#CMS--cyberweek-deals article a.cta-button {
  margin-top: 10px;
  text-align: center;
  width: 100%;
}

#CMS--cyberweek-deals article img {
  display: block;
  margin: 0 auto 15px auto;
  max-height: 250px;
  max-width: 100%;
  width: auto;
}

@media(min-width: 500px) {

  #CMS--cyberweek-deals article {
    width: 50%;
  }
}

@media(min-width: 768px) {

  #CMS--cyberweek-deals article {
    width: 33%;
  }
}

@media(min-width: 992px) {

  #CMS--cyberweek-deals article {
    width: 20%;
  }
}

/* This class is applied to the body tag once we open the FAQ navigation
   see https://stackoverflow.com/questions/9280258 for more information on this technique */

.CMS-noscroll {
  overflow: hidden;
}

@media(min-width: 768px) {

  #CMS-Faq-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  #cms-faq-nav {
    -webkit-flex: 1 0;
        -ms-flex: 1 0;
            flex: 1 0;
  }

  #cms-faq-nav gf-sticky-content {/* The impact of not having this is only visible if the NMMS stylesheets and JS are loaded; within TYPO3 only,
         this will work out fine */
    max-width: 32.93333rem;
    width: 30%;
  }

  #cms-faq-content {
    -webkit-flex: 2 0;
        -ms-flex: 2 0;
            flex: 2 0;
  }
}

#cms-faq-nav {

  background: #fff;

  /* this is required for correct positioning of the left bar once we scroll below the content area */
  position: static;

  /* TODO this was arbitrarily chosen; we should define a hierarchy of z-indices */
  z-index: 200;
}

@media(max-width: 767px) {

  #cms-faq-nav {/* position: must only be defined for mobile viewport, for tablet and desktop the sticky content element will take
       over (and that does not define a */
  }

  #cms-faq-nav gf-sticky-content {
    position: absolute;
    width: 100%;
  }
}

#cms-faq-nav .CMS-Faq-section--topics {
  overflow-y: scroll;/* The z-index must also be set here as the surrounding container is "fixed" once it is opened on the mobile view */
  z-index: 200;
}

@media(min-width: 768px) {

  #cms-faq-nav .CMS-Faq-section--topics {
    overflow-y: inherit;
    z-index: inherit;
  }
}

@media(min-width: 768px) {

  #cms-faq-nav {
    background: none;
  }
}

.CMS-Faq-section {
  font-family: "Roboto", sans-serif;
  margin: 0 auto;
  max-width: 98.8rem;

  @-webkit-keyframes flipdown {

    0% {
      opacity: 0;
      -webkit-transform: rotateX(-90deg);
              transform: rotateX(-90deg);
      -webkit-transform-origin: top center;
              transform-origin: top center;
    }

    5% {
      opacity: 1;
    }

    80% {
      -webkit-transform: rotateX(8deg);
              transform: rotateX(8deg);
    }

    83% {
      -webkit-transform: rotateX(6deg);
              transform: rotateX(6deg);
    }

    92% {
      -webkit-transform: rotateX(-3deg);
              transform: rotateX(-3deg);
    }

    100% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top center;
              transform-origin: top center;
    }
  }

  @keyframes flipdown {

    0% {
      opacity: 0;
      -webkit-transform: rotateX(-90deg);
              transform: rotateX(-90deg);
      -webkit-transform-origin: top center;
              transform-origin: top center;
    }

    5% {
      opacity: 1;
    }

    80% {
      -webkit-transform: rotateX(8deg);
              transform: rotateX(8deg);
    }

    83% {
      -webkit-transform: rotateX(6deg);
              transform: rotateX(6deg);
    }

    92% {
      -webkit-transform: rotateX(-3deg);
              transform: rotateX(-3deg);
    }

    100% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top center;
              transform-origin: top center;
    }
  }
}

.CMS-Faq-section .CMS-H2 {
  font-size: 3.6rem;
  margin-bottom: 2rem;
}

.CMS-Faq-section .CMS-H3 {
  font-size: 2.8rem;/* This font size is not defined in one of the variables, but the defined ones are either too
                          large or too small */
  margin-bottom: 2rem;
}

.CMS-Faq-section .CMS-H4, .CMS-Faq-section .CMS-H5 {
  margin-bottom: 1rem;
}

.CMS-Faq-section .CMS-H4 {
  font-size: 2rem;
}

.CMS-Faq-section .CMS-H5 {
  font-size: 1.8rem;/** TODO check if we should adjust the global font sizes to contain this one */
  font-weight: bold;
}

.CMS-Faq-section .CMS-Faq-question {
  margin-top: 2rem;
  position: relative;
}

/* required to place e.g. anchors absolutely */

.CMS-Faq-section .CMS-Faq-question--anchor, .CMS-Faq-section .CMS-Faq-question--headlineAnchor {
  position: absolute;
  top: -150px;
}

.CMS-Faq-section--link {
  display: none;
}

.CMS-Faq-section #cms-faq-nav h3.CMS-Faq-topic {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 4rem;
  text-align: left;
}

.CMS-Faq-section #cms-faq-nav a, .CMS-Faq-section--asked-top a {
  color: #49a0cc;
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9rem;
  margin: 1.3rem 0;
}

.CMS-Faq-section--link:hover {
  color: rgb(35, 77, 98);
}

.CMS-Faq-section-is-active {/* TODO this is a hack because there is a global rule that targets all <a> tags with a CMS-* class; we should get
            rid of this rule if possible, or apply it to all <a> tags regardless of the class. */
  color: rgb(35, 77, 98) !important;
  font-weight: bold;
}

.CMS-Faq-section--top-message {
  color: #a8acad;
  float: left;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 2.2rem;
  margin-top: 4rem;
  width: 100%;
}

.CMS-Faq-section .CMS-H1 {
  color: #212222;
  font-size: 4.6rem;
  margin-bottom: 2rem;
  text-shadow: none;
}

.CMS-Faq-section .CMS-paragraph {
  line-height: 2.4rem;
  margin-bottom: 1.2rem;
  margin-top: 0;
}

.CMS-Faq-section--category {
  list-style: none;
  margin-top: 6rem;
  padding: 0;
  position: relative;
}

.CMS-Faq-section--category .CMS-paragraph {
  font-size: 1.6rem;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.CMS-Faq-section--category .CMS-Button {
  box-shadow: none;
}

.CMS-Faq-section--category-jumpArrow {
  background-color: #a8acad;
  border-radius: 50%;
  height: 2rem;
  position: absolute;
  right: -1rem;
  top: 1rem;
  width: 2rem;
}

.CMS-Faq-section--category-jumpArrow::before, .CMS-Faq-section--category-jumpArrow::after {
  background-color: white;
  content: "";/* to align these perfectly, the left position has to equal the height, but apparently the same is not true
           for top/width */
  height: 0.9rem;
  left: 0.9rem;
  position: absolute;
  top: 0.5rem;
  width: 0.3rem;
}

.CMS-Faq-section--category-jumpArrow::before {
  -webkit-transform: translate(-0.2rem, 0) rotate(45deg);
          transform: translate(-0.2rem, 0) rotate(45deg);
}

.CMS-Faq-section--category-jumpArrow::after {
  -webkit-transform: translate(0.2rem, 0) rotate(-45deg);
          transform: translate(0.2rem, 0) rotate(-45deg);
}

.CMS-Faq-section--category-jumpArrow i::before, .CMS-Faq-section ul li i::after {
  background-color: white;
  content: "";
  height: 0.9rem;
  left: 1.3rem;
  position: absolute;
  top: 0.9rem;
  width: 0.3rem;
}

.CMS-Faq-section--topic {/* required so we get the jump anchor correctly aligned */
  position: relative;
}

.CMS-Faq-section--presentationArea .CMS-paragraph {
  font-size: 1.6rem;
}

.CMS-Faq-section--link i {
  transition: -webkit-transform 150ms ease;
  transition: transform 150ms ease;
  transition: transform 150ms ease, -webkit-transform 150ms ease;
}

@media (max-width: 991px) {

  .CMS-Faq-section .CMS-paragraph {
    text-align: left;
  }

  .CMS-Faq-section #cms-faq-nav .CMS-H3 {
    font-size: 1.6rem;
    margin-top: 3rem;
  }

  .CMS-Faq-section--top-message {
    font-size: 1.4rem;
    margin-top: 3rem;
  }

  .CMS-Faq-section--category {
    margin-top: 4.4rem;/* &-jumpArrow {
        height: 2rem;
        top: 3.9rem;
        width: 2rem;
      } */
  }

  .CMS-Faq-section--sectionList .CMS-Faq-section--sectionList-item i::before, .CMS-Faq-section ul li i::after {
    left: 0.9rem;
    top: 0.5rem;
  }
}

/* FAQ paddings (mobile first, then change them to display nav and content side-by-side on tablet and desktop */

.CMS-Faq-section #cms-faq-nav {
  padding: 0;/* necessary reset for the standard column padding */
}

.CMS-Faq-section #cms-faq-nav .CMS-Faq-section--topics {
  left: 0;/* required because the surrounding HTML in the NMMS pages adds an additional margin */
  padding: 2rem 1rem 0;
}

@media (min-width: 768px) {

  .CMS-Faq-section #cms-faq-content {
    padding: 0;
  }

  .CMS-Faq-section #cms-faq-nav .CMS-Faq-section--topics {
    padding: 4rem 2rem 0 0;
  }
}

@media (max-width: 767px) {

  .CMS-Faq-section #cms-faq-nav {
    background-color: #f6f6f6;
    height: auto;/* automatic height requires the content to be hidden by default */
    left: 0;/* required because the surrounding HTML in the NMMS pages adds an additional margin */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 210;
  }

  .CMS-Faq-section #cms-faq-nav .CMS-Faq-nav-content {
    display: none;
  }

  .CMS-Faq-section #cms-faq-nav.u-open {
    height: 100%;
  }

  .CMS-Faq-section #cms-faq-nav.u-open .CMS-Faq-nav-content {
    display: block;
  }

  .CMS-Faq-section .u-hidden {
    display: none !important;
  }

  .CMS-Faq-section--topics {
    padding-top: 6rem;
  }

  .CMS-Faq-section #cms-faq-nav h3.CMS-Faq-topic {
    font-size: 1.6rem;
    font-weight: bold;
    margin-top: 0.5rem;
  }

  .CMS-Faq-section--link.is-toggledOff {
    background: #f6f6f6;
    border-bottom: 0.1rem solid rgba(201, 201, 201, 0.31999999999999995);
    display: inherit;
    line-height: 2.2rem;
    margin-top: 0;
    padding: 1.5rem;
  }

  .CMS-Faq-section i.CMS-Faq-nav--open {
    background-color: transparent;
    border-radius: 50%;
    height: 2.9rem;
    margin-top: 1rem;
    position: absolute;
    right: 1rem;
    top: 0;
    width: 2.9rem;
  }

  .CMS-Faq-section i.CMS-Faq-nav--open::before, .CMS-Faq-section i.CMS-Faq-nav--open::after {
    background-color: #49a0cc;
    content: "";
    height: 0.9rem;
    left: 1.3rem;
    position: absolute;
    top: 0.9rem;
    width: 0.3rem;
  }

  .CMS-Faq-section i.CMS-Faq-nav--open::before {
    -webkit-transform: translate(-0.2rem, 0) rotate(45deg);
            transform: translate(-0.2rem, 0) rotate(45deg);
  }

  .CMS-Faq-section i.CMS-Faq-nav--open::after {
    -webkit-transform: translate(0.2rem, 0) rotate(-45deg);
            transform: translate(0.2rem, 0) rotate(-45deg);
  }

  .CMS-Faq-section .u-open i.CMS-Faq-nav--open {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  .CMS-Faq-section--sectionList {
    margin-top: 10.8rem;
  }
}

/* templates */

.CMS-Landingpage {
  background: rgb(246, 247, 247);
}

.CMS-Landingpage-cancelLink {
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
}

.CMS-Landingpage-headingTop {
  font-size: 3rem;
}

.CMS-Landingpage-headingLabel {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0;
  text-transform: uppercase;
}

.CMS-Landingpage-top {
  min-height: 42rem;
  position: relative;
}

.CMS-Landingpage-top--illustrationJoin {
  bottom: 0;
  position: absolute;
  right: 0;
  z-index: 0;
}

.CMS-Landingpage-topFooter {
  height: 4rem;
  margin-top: auto;
}

.CMS-Landingpage-topFooterButton {
  bottom: -2rem;
  position: relative;
}

.CMS-Landingpage-list {
  background-color: white;
  padding: 3rem;
}

.CMS-Landingpage-listIcon {
  max-height: 1.4rem;
}

.CMS-Landingpage-bottom {
  min-height: 31rem;
}

.CMS-Landingpage-bottomCopy {
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.CMS-Landingpage-feedback {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 3rem;
  text-align: center;
}

.CMS-Landingpage-feedback--title {
  background-color: rgb(148, 212, 207);
  border-radius: 3rem;
  color: white;
  font-size: 1.8rem;
  font-weight: 600;
  padding: 0.4rem 1.5rem;
  text-transform: uppercase;
}

.CMS-Landingpage-feedback--slack {
  height: 2.5rem;
  width: 2.5rem;
}