.inline-block, .select, .checkbox, .radio, .radio-box, .radio-link, .button {
  display: inline-block;
  display: -moz-inline-stack;
  zoom: 1;
  *display: inline;
}

.truncate, .input input + label, .select label, .textarea textarea + label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-select, .button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
     ========================================================================== */
/**
   * Remove the margin in all browsers.
   */
body {
  margin: 0;
}

/**
   * Render the `main` element consistently in IE.
   */
main {
  display: block;
}

/**
   * 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;
}

/* Grouping content
     ========================================================================== */
/**
   * 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 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
     ========================================================================== */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
  background-color: transparent;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 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 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
strong {
  font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
   * 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;
}

/* Forms
     ========================================================================== */
/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
   * 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;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
   * 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;
}

/**
   * Correct the padding in Firefox.
   */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
   * 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 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
  vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */
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 in Chrome and Safari on macOS.
   */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
   * 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 */
}

/* Interactive
     ========================================================================== */
/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
details {
  display: block;
}

/*
   * Add the correct display in all browsers.
   */
summary {
  display: list-item;
}

/* Misc
     ========================================================================== */
/**
   * Add the correct display in IE 10+.
   */
template {
  display: none;
}

/**
   * Add the correct display in IE 10.
   */
[hidden] {
  display: none;
}

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

@keyframes spin360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

html {
  /* Load system fonts */
  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  /* Make type rendering look crisper */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Deactivate auto-enlargement of small text in Safari */
  text-size-adjust: 100%;
  /* Enable kerning and optional ligatures */
  text-rendering: optimizeLegibility;
}

/**
* Form elements render using OS defaults,
* so font-family inheritance must be specifically declared
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

.color-black {
  color: #000;
}

.color-white {
  color: #fff;
}

.color-light-grey {
  color: #666;
}

.color-grey {
  color: #666;
}

.color-dark-grey {
  color: #666;
}

.color-red {
  color: #de2a2a;
}

@media all and (min-width: 1px) and (max-width: 767px) {
  html {
    font-size: 14px;
  }
}

@media all and (min-width: 768px) {
  html {
    font-size: 14px;
  }
}

.font-xs {
  font-size: 10px;
}

.font-s {
  font-size: 14px;
}

.font-m, .button {
  font-size: 16px;
}

.font-l {
  font-size: 20px;
}

.font-xl {
  font-size: 24px;
}

.font-xxl {
  font-size: 48px;
}

@media all and (min-width: 1px) and (max-width: 767px) {
  .device-s-font-xs {
    font-size: 10px;
  }
  .device-s-font-s {
    font-size: 14px;
  }
  .device-s-font-m {
    font-size: 16px;
  }
  .device-s-font-l {
    font-size: 20px;
  }
  .device-s-font-xl {
    font-size: 24px;
  }
  .device-s-font-xxl {
    font-size: 48px;
  }
}

@media all and (min-width: 768px) and (max-width: 1199px) {
  .device-m-font-xs {
    font-size: 10px;
  }
  .device-m-font-s {
    font-size: 14px;
  }
  .device-m-font-m {
    font-size: 16px;
  }
  .device-m-font-l {
    font-size: 20px;
  }
  .device-m-font-xl {
    font-size: 24px;
  }
  .device-m-font-xxl {
    font-size: 48px;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  .device-l-font-xs {
    font-size: 10px;
  }
  .device-l-font-s {
    font-size: 14px;
  }
  .device-l-font-m {
    font-size: 16px;
  }
  .device-l-font-l {
    font-size: 20px;
  }
  .device-l-font-xl {
    font-size: 24px;
  }
  .device-l-font-xxl {
    font-size: 48px;
  }
}

@media all and (min-width: 1600px) {
  .device-xl-font-xs {
    font-size: 10px;
  }
  .device-xl-font-s {
    font-size: 14px;
  }
  .device-xl-font-m {
    font-size: 16px;
  }
  .device-xl-font-l {
    font-size: 20px;
  }
  .device-xl-font-xl {
    font-size: 24px;
  }
  .device-xl-font-xxl {
    font-size: 48px;
  }
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.strike {
  text-decoration: line-through;
}

.underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}

.bold {
  font-weight: bold;
}

.weight-normal {
  font-weight: normal;
}

.input {
  position: relative;
}

.input[data-prepend-value]:before {
  content: attr(data-prepend-value);
  pointer-events: none;
  z-index: 2;
  position: absolute;
  left: 8px;
  top: 22px;
  font-size: 16px;
  line-height: 1;
}

.input[data-prepend-value] input {
  padding-left: 16px;
}

.input input {
  outline: none;
  -webkit-appearance: none;
  position: relative;
  width: 100%;
  padding: 20px 16px 8px 8px;
  /* Extra padding-top for when input is filled, and label moves up */
  border-radius: 1px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 16px;
}

.input input:placeholder-shown {
  padding: 14px 16px;
}

.input input:placeholder-shown {
  z-index: 3;
  padding-left: 8px;
}

.input input:placeholder-shown + label {
  top: 16px;
  left: 16px;
  font-size: 16px;
  color: #666;
}

.input input + label {
  width: calc(100% - 32px);
  transition-duration: 0.25s;
  transition-delay: 0.001s;
  transition-property: top, left, font-size, color;
  will-change: top, left, font-size, color;
  transform: translateZ(0);
  pointer-events: none;
  z-index: 5;
  position: absolute;
  left: 8px;
  top: 8px;
  color: #000;
  font-size: 12px;
}

.select {
  vertical-align: middle;
  position: relative;
  -webkit-appearance: none;
  overflow: hidden;
  border-radius: 1px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.select:before {
  content: '';
  z-index: 2;
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 8px;
  margin-top: -6px;
  width: 12px;
  height: 12px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAApElEQVRIie3PvQnCQByH4UdsbC3SOkwaGy0DrmDhPjqC7iJOIFiooHYuEJsUZ0guiWB3L1xx8Pv6k0gk/s649p9hgwnOA7PmWOGCd5vohLJ6e2Q9gjMcAt8xJr4FwhJPFBF9UWlCzzVWkONRM5TVwvCa+upwUB4r6DIXLaubRnSywL0hqK34J6bYRcIHr25j6fua3qtHA0oyrKuCLV7DNiYSv/IB3T5GOZllTQ4AAAAASUVORK5CYII=") no-repeat center center;
  background-size: cover;
}

.select select {
  -webkit-appearance: none;
  outline: none;
  width: 100%;
  padding: 4px 28px 4px 8px;
  border: 1px solid red;
  border: none;
  background: #fff;
}

.select label {
  width: calc(100% - 32px);
  pointer-events: none;
  position: absolute;
  left: 8px;
  top: 8px;
  color: #000;
  font-size: 12px;
}

.select label + select {
  padding: 24px 28px 4px 8px;
  /* Extra padding-top for when input is filled, and label moves up */
}

@-moz-document url-prefix() {
  .select select {
    padding-left: 4px;
    /* Firefox applies padding to options, so counter this by reducing padding on select element */
  }
}

.textarea {
  position: relative;
}

.textarea textarea {
  outline: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 120px;
  padding: 20px 16px 8px 8px;
  /* Extra padding-top for when input is filled, and label moves up */
  border-radius: 1px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.textarea textarea:placeholder-shown {
  padding: 14px 16px;
}

.textarea textarea:placeholder-shown + label {
  top: 16px;
  left: 16px;
  font-size: 16px;
  color: #666;
}

.textarea textarea + label {
  width: calc(100% - 32px);
  transition-duration: 0.25s;
  transition-delay: 0.001s;
  transition-property: top, left, font-size, color;
  will-change: top, left, font-size, color;
  transform: translateZ(0);
  pointer-events: none;
  position: absolute;
  left: 8px;
  top: 8px;
  color: #000;
  font-size: 12px;
}

.checkbox {
  position: relative;
  overflow: hidden;
  padding-left: 24px;
  line-height: 1.4;
}

.checkbox input {
  position: absolute;
  right: 200%;
  bottom: 200%;
}

.checkbox input + * {
  cursor: pointer;
}

.checkbox input + *:after {
  content: '';
  transition: background-size 0.25s 0.001s;
  will-change: background-size, background-image, border-color;
  transform: translateZ(0);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 1px;
  border: 1px solid #666;
  background: #fff no-repeat center center;
  background-size: 0% 0%;
}

.checkbox input:disabled + * {
  color: #666;
}

.checkbox input:disabled + *:after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAABDElEQVRoge3ZXQqCQBSG4a8WUdIWbbmBtRq70A8kxBw9fzOc96oukvOg6QwCWZZlLdUD6LyHwDRDf/THTwAjgAG+mG6eYZxnKu4G4DUf4APgITba/u6LGd5nZvDEiCGYB0YcwSwxaghmgVFHME2MGYJpYMwRTBLjhmASGHcEO4MJg2BHMOEQrAQTFsH2YMIj2BamGgRbw1SHYMs9xPDzOcJGrajlmVE/E1etAwO4/PleRU1cWmt/7Ajb5qK27k7VYPbcYsNjSp4TYTFHHnbhMGee2GEwEssOd4zk2skNo7EANMdormLNMBZLcXWM5X5CDeOxKRLHeO7sxDARtqcimGZevQGNvAzNsiyL1xcbE8X3wv0coQAAAABJRU5ErkJggg==");
  background-size: 100% 100%;
}

.checkbox input:checked + *:after {
  border-color: #000;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAA+0lEQVRIie3UvS5EQRQH8N/62AgRvAGJQiIRjWyiEU+xj6DddgvJhpZa7S0UQqFRiMpHIVFSi8iKLKuYc2MjEYu5Df7lPTO/MzO5Ofznt2Ude6iWga/gBXcYy42P4gpdrOXGYTvwQ1Ry4zV08IDZ3HgVZ9LpG7lx2Az8GIO58QU84RHzufEhnEinb/a7aVx6zx0Mf7K2GfhpNOsrE7iJjfuY/GDdHNrS8yz2ixeZwUU0Ocf0u/oAjqK+8VW8yBQOArnFUk+tEd8vMfLdBqT/ezewNurSbe7xjOWf4EUqaEkDrONt1mzlwHtTl27RxbUSJiWsSoOsVgb+x/MKABw1Rk/ufmUAAAAASUVORK5CYII=");
  background-size: 100% 100%;
}

.radio {
  position: relative;
  overflow: hidden;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.4;
}

.radio input {
  position: absolute;
  right: 200%;
  bottom: 200%;
}

.radio input + * {
  cursor: pointer;
}

.radio input + *:after {
  content: '';
  transition: background-size 0.25s 0.001s;
  will-change: background-size, background-image, border-color;
  transform: translateZ(0);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #666;
  background: #fff no-repeat center center;
  background-size: 0% 0%;
}

.radio input:disabled + * {
  color: #666;
}

.radio input:disabled + *:after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAABDElEQVRoge3ZXQqCQBSG4a8WUdIWbbmBtRq70A8kxBw9fzOc96oukvOg6QwCWZZlLdUD6LyHwDRDf/THTwAjgAG+mG6eYZxnKu4G4DUf4APgITba/u6LGd5nZvDEiCGYB0YcwSwxaghmgVFHME2MGYJpYMwRTBLjhmASGHcEO4MJg2BHMOEQrAQTFsH2YMIj2BamGgRbw1SHYMs9xPDzOcJGrajlmVE/E1etAwO4/PleRU1cWmt/7Ajb5qK27k7VYPbcYsNjSp4TYTFHHnbhMGee2GEwEssOd4zk2skNo7EANMdormLNMBZLcXWM5X5CDeOxKRLHeO7sxDARtqcimGZevQGNvAzNsiyL1xcbE8X3wv0coQAAAABJRU5ErkJggg==");
  background-size: 100% 100%;
}

.radio input:checked + *:after {
  border-color: #000;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAA+0lEQVRIie3UvS5EQRQH8N/62AgRvAGJQiIRjWyiEU+xj6DddgvJhpZa7S0UQqFRiMpHIVFSi8iKLKuYc2MjEYu5Df7lPTO/MzO5Ofznt2Ude6iWga/gBXcYy42P4gpdrOXGYTvwQ1Ry4zV08IDZ3HgVZ9LpG7lx2Az8GIO58QU84RHzufEhnEinb/a7aVx6zx0Mf7K2GfhpNOsrE7iJjfuY/GDdHNrS8yz2ixeZwUU0Ocf0u/oAjqK+8VW8yBQOArnFUk+tEd8vMfLdBqT/ezewNurSbe7xjOWf4EUqaEkDrONt1mzlwHtTl27RxbUSJiWsSoOsVgb+x/MKABw1Rk/ufmUAAAAASUVORK5CYII=");
  background-size: 100% 100%;
}

.radio-box {
  position: relative;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.4;
}

.radio-box input {
  position: absolute;
  right: 200%;
  bottom: 200%;
}

.radio-box input + * {
  padding: 8px;
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
}

.radio-box input:disabled + *, .radio-box input.disabled-visually + * {
  opacity: 0.7;
  cursor: default;
}

.radio-box input:disabled + *:before, .radio-box input:disabled + *:after, .radio-box input.disabled-visually + *:before, .radio-box input.disabled-visually + *:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center center;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAABTUlEQVR4nO3RIU4DUQBF0V82VMVUwvi2i2gQINgPgl2AB01SwX5Iim8wmM4lnCOfeskdAwD4U6Z5u/5pv7r0EcaYbnd347Q6/hRFkAvbzPvDGOPpdFo9fry9fi7951/bzPvDdLv7ur7ZPyz95d8TI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SMEDFCxAgRI0SM5azOh2nersdpdRxj3H+8vzwv8Ilz07xdL/0BAPidb5v0dTcMt762AAAAAElFTkSuQmCC");
  background-size: 100% 100%;
}

.radio-box input:disabled + *:after, .radio-box input.disabled-visually + *:after {
  transform: scaleX(-1);
}

.radio-box input:checked + * {
  background: #000;
  color: #fff;
}

/*
    Like a radio button in that only 1 can be selected at a time.
    
    However: 

        - no radio button appears
        - Instead, display as if it were a link.
        - Clicking a "link" changes the selected radio button, and highlights the link as being selecred
 */
.radio-link {
  position: relative;
  overflow: hidden;
  line-height: 1.4;
}

.radio-link input {
  position: absolute;
  right: 200%;
  bottom: 200%;
}

.radio-link input + * {
  cursor: pointer;
}

.radio-link input:disabled + * {
  color: #666;
}

.radio-link input:checked + * {
  text-decoration: underline;
}

.range-slider {
  --padding-top-px: 8;
  --padding-right-px: 8;
  --padding-bottom-px: 8;
  --padding-left-px: 8;
  --range-bar-border-radius-px: 4;
  --range-bar-height-px: 8;
  --range-bar-background-color: #c6c6c6;
  --handle-size-px: 20;
  --handle-background-color: #222;
  --handle-border-color: #222;
  --handle-background-color-hover: #666;
  --handle-border-color-hover: #666;
  --markers-gap-px: 16;
  padding: calc(var(--padding-top-px) * 1px) calc(var(--padding-right-px) * 1px) calc(var(--padding-bottom-px) * 1px) calc(var(--padding-left-px) * 1px);
}

.range-slider .range-slider-input-wrap {
  position: relative;
  min-height: calc(var(--handle-size-px) * 1px);
}

.range-slider input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  -webkit-appearance: none;
  width: calc(var(--handle-size-px) * 1px);
  height: calc(var(--handle-size-px) * 1px);
  background-color: var(--handle-background-color);
  border: 1px solid var(--handle-border-color);
  border-radius: 50%;
  cursor: pointer;
}

.range-slider input[type=range]::-webkit-slider-thumb:hover {
  background: var(--handle-background-color-hover);
  border-color: var(--handle-border-color-hover);
}

.range-slider input[type=range]::-moz-range-thumb {
  pointer-events: all;
  -webkit-appearance: none;
  width: calc(var(--handle-size-px) * 1px);
  height: calc(var(--handle-size-px) * 1px);
  background-color: var(--handle-background-color);
  border: 1px solid var(--handle-border-color);
  border-radius: 50%;
  cursor: pointer;
}

.range-slider input[type=range]::-moz-range-thumb:hover {
  background: var(--handle-background-color-hover);
  border-color: var(--handle-border-color-hover);
}

.range-slider input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: calc(var(--range-bar-height-px)/2 * -1px);
  width: 100%;
  height: calc(var(--range-bar-height-px) * 1px);
  border-radius: calc(var(--range-bar-border-radius-px) * 1px);
  background: var(--range-bar-background-color);
  pointer-events: none;
}

.range-slider input[type=range]:nth-child(odd) {
  background: transparent;
  z-index: 1;
}

.range-slider .range-slider-handle-accessible {
  z-index: 2;
}

.range-slider .range-slider-markers {
  margin-top: calc(var(--markers-gap-px) * 1px);
  border-top: 1px solid #ccc;
}

.range-slider .range-slider-markers > * {
  padding-top: calc(var(--markers-gap-px) * 1px);
}

.range-slider .range-slider-markers .range-slider-marker-from:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 8px;
  border-right: 1px solid #ccc;
}

.range-slider .range-slider-markers .range-slider-marker-to:before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 8px;
  border-left: 1px solid #ccc;
}

.range-slider .range-slider-markers .range-slider-marker-from > div,
.range-slider .range-slider-markers .range-slider-marker-value > div,
.range-slider .range-slider-markers .range-slider-marker-to > div {
  padding-top: 16px;
}

div.table {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

div.table table {
  table-layout: fixed;
}

div.table.alternate-rows table tbody tr:nth-child(even) {
  background: #eee;
}

table.data {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  text-align: center;
}

table.data thead th {
  padding: 8px;
  background: #fff;
  border: 1px solid #ccc;
}

table.data tbody th {
  padding: 8px;
  background: #fff;
  border: 1px solid #ccc;
  text-align: left;
}

table.data tbody td {
  padding: 8px;
  background: #fff;
  border: 1px solid #ccc;
}

/* Transparent */
table.transparent thead th,
table.transparent tbody th,
table.transparent tbody td {
  background: none;
}

.button {
  -webkit-appearance: none;
  padding: 16px;
  border-radius: 1px;
  border: 1px solid transparent;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.button:disabled {
  opacity: 0.4;
}

.button.main {
  background: #000;
  color: #fff;
}

.button.secondary {
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
}

.button.black {
  border-color: #000;
  background: #000;
  color: #fff;
}

.button.white {
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
}

.button.grey {
  border: 1px solid #ccc;
  background: #ccc;
  color: #000;
}

.button.red {
  border: 1px solid #de2a2a;
  background: #de2a2a;
  color: #fff;
}

.button.light-grey {
  border: 1px solid #eee;
  background: #eee;
  color: #000;
}

.button.transparent {
  border-color: transparent;
  background: transparent;
}

.pointer {
  cursor: pointer;
}

body {
  overflow-x: hidden;
}

.auto-width {
  width: auto;
}

.full-width {
  width: 100%;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

@media all and (max-width: 767px) {
  .device-s-auto-width {
    width: auto;
  }
  .device-s-full-width {
    width: 100%;
  }
}

@media all and (min-width: 768px) and (max-width: 1199px) {
  .device-m-auto-width {
    width: auto;
  }
  .device-m-full-width {
    width: 100%;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  .device-l-auto-width {
    width: auto;
  }
  .device-l-full-width {
    width: 100%;
  }
}

@media all and (min-width: 1600px) {
  .device-xl-auto-width {
    width: auto;
  }
  .device-xl-full-width {
    width: 100%;
  }
}

.restrict-width-s {
  max-width: 480px;
  margin: 0 auto;
}

.restrict-width-m {
  max-width: 768px;
  margin: 0 auto;
}

.restrict-width-l {
  max-width: 1200px;
  margin: 0 auto;
}

.restrict-width-xl {
  max-width: 1600px;
  margin: 0 auto;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

@media all and (max-width: 767px) {
  .device-s-left {
    text-align: left;
  }
  .device-s-center {
    text-align: center;
  }
  .device-s-right {
    text-align: right;
  }
}

@media all and (min-width: 768px) and (max-width: 1199px) {
  .device-m-left {
    text-align: left;
  }
  .device-m-center {
    text-align: center;
  }
  .device-m-right {
    text-align: right;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  .device-l-left {
    text-align: left;
  }
  .device-l-center {
    text-align: center;
  }
  .device-l-right {
    text-align: right;
  }
}

@media all and (min-width: 1600px) {
  .device-xl-left {
    text-align: left;
  }
  .device-xl-center {
    text-align: center;
  }
  .device-xl-right {
    text-align: right;
  }
}

.cols.cols-1 {
  --colCount: 1;
}

.cols.cols-2 {
  --colCount: 2;
}

.cols.cols-3 {
  --colCount: 3;
}

.cols.cols-4 {
  --colCount: 4;
}

.cols.cols-5 {
  --colCount: 5;
}

.cols.cols-6 {
  --colCount: 6;
}

.cols.cols-7 {
  --colCount: 7;
}

.cols.cols-8 {
  --colCount: 8;
}

.cols.cols-9 {
  --colCount: 9;
}

.cols.cols-10 {
  --colCount: 10;
}

.cols.cols-11 {
  --colCount: 11;
}

.cols.cols-12 {
  --colCount: 12;
}

.cols.cols-13 {
  --colCount: 13;
}

.cols.cols-14 {
  --colCount: 14;
}

.cols.cols-15 {
  --colCount: 15;
}

.cols.cols-16 {
  --colCount: 16;
}

.cols {
  --gap: 0px;
  --colCount: 1;
  --gapCount: calc(var(--colCount) - 1);
  --gapTotal: calc(var(--gap) * var(--gapCount));
  --childWidthPc: calc(100% / var(--colCount));
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: calc(var(--gap)/2) 0;
  gap: var(--gap);
}

.cols.cols-1 > *,
.cols.cols-2 > *,
.cols.cols-3 > *,
.cols.cols-4 > *,
.cols.cols-5 > *,
.cols.cols-6 > *,
.cols.cols-7 > *,
.cols.cols-8 > *,
.cols.cols-9 > *,
.cols.cols-10 > *,
.cols.cols-11 > *,
.cols.cols-12 > *,
.cols.cols-13 > *,
.cols.cols-14 > *,
.cols.cols-15 > *,
.cols.cols-16 > * {
  flex-basis: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
  max-width: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
  width: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
}

.cols.space-between-0 {
  --gap: 0px;
}

.cols.space-between-xs {
  --gap: 8px;
}

.cols.space-between-s {
  --gap: 16px;
}

.cols.space-between-m {
  --gap: 32px;
}

.cols.space-between-l {
  --gap: 64px;
}

.cols.space-between-xl {
  --gap: 128px;
}

.cols.wrap {
  flex-wrap: wrap;
  padding: calc(var(--gap)/2) 0;
}

.cols.no-wrap {
  flex-wrap: nowrap;
  padding-top: 0;
  padding-bottom: 0;
}

.cols.valign-top > * {
  align-self: flex-start;
}

.cols.valign-middle > * {
  align-self: center;
}

.cols.valign-bottom > * {
  align-self: flex-end;
}

.cols.halign-left {
  justify-content: flex-start;
}

.cols.halign-center {
  justify-content: center;
}

.cols.halign-right {
  justify-content: flex-end;
}

.cols.row-reverse {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  flex-direction: row-reverse;
}

.cols.column-reverse {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  flex-direction: column-reverse;
}

.cols.equal-width > * {
  flex: 1 1 auto;
}

.cols > * {
  position: relative;
}

.cols > *.expand {
  flex: 1 1 auto;
}

.cols > *.valign-top {
  align-self: flex-start;
}

.cols > *.valign-middle {
  align-self: center;
}

.cols > *.valign-bottom {
  align-self: flex-end;
}

.cols.bordered {
  overflow: hidden;
}

.cols.bordered > div:before {
  content: '';
  position: absolute;
  right: calc(var(--gap)/2*-1);
  bottom: calc(var(--gap)/2*-1);
  width: calc(100% + var(--gap));
  margin-bottom: -1px;
  height: 1px;
  background: #ccc;
}

.cols.bordered > div:after {
  content: '';
  position: absolute;
  right: calc(var(--gap)/2*-1);
  bottom: calc(var(--gap)/2*-1);
  width: 1px;
  height: calc(100% + var(--gap));
  background: #ccc;
}

@media all and (min-width: 1px) and (max-width: 767px) {
  .device-s-cols-1 {
    --colCount: 1;
  }
  .cols > .device-s-span-1 {
    --childWidthPc: calc(1/16*100%);
  }
  .device-s-cols-2 {
    --colCount: 2;
  }
  .cols > .device-s-span-2 {
    --childWidthPc: calc(2/16*100%);
  }
  .device-s-cols-3 {
    --colCount: 3;
  }
  .cols > .device-s-span-3 {
    --childWidthPc: calc(3/16*100%);
  }
  .device-s-cols-4 {
    --colCount: 4;
  }
  .cols > .device-s-span-4 {
    --childWidthPc: calc(4/16*100%);
  }
  .device-s-cols-5 {
    --colCount: 5;
  }
  .cols > .device-s-span-5 {
    --childWidthPc: calc(5/16*100%);
  }
  .device-s-cols-6 {
    --colCount: 6;
  }
  .cols > .device-s-span-6 {
    --childWidthPc: calc(6/16*100%);
  }
  .device-s-cols-7 {
    --colCount: 7;
  }
  .cols > .device-s-span-7 {
    --childWidthPc: calc(7/16*100%);
  }
  .device-s-cols-8 {
    --colCount: 8;
  }
  .cols > .device-s-span-8 {
    --childWidthPc: calc(8/16*100%);
  }
  .device-s-cols-9 {
    --colCount: 9;
  }
  .cols > .device-s-span-9 {
    --childWidthPc: calc(9/16*100%);
  }
  .device-s-cols-10 {
    --colCount: 10;
  }
  .cols > .device-s-span-10 {
    --childWidthPc: calc(10/16*100%);
  }
  .device-s-cols-11 {
    --colCount: 11;
  }
  .cols > .device-s-span-11 {
    --childWidthPc: calc(11/16*100%);
  }
  .device-s-cols-12 {
    --colCount: 12;
  }
  .cols > .device-s-span-12 {
    --childWidthPc: calc(12/16*100%);
  }
  .device-s-cols-13 {
    --colCount: 13;
  }
  .cols > .device-s-span-13 {
    --childWidthPc: calc(13/16*100%);
  }
  .device-s-cols-14 {
    --colCount: 14;
  }
  .cols > .device-s-span-14 {
    --childWidthPc: calc(14/16*100%);
  }
  .device-s-cols-15 {
    --colCount: 15;
  }
  .cols > .device-s-span-15 {
    --childWidthPc: calc(15/16*100%);
  }
  .device-s-cols-16 {
    --colCount: 16;
  }
  .cols > .device-s-span-16 {
    --childWidthPc: calc(16/16*100%);
  }
  .cols[class*="device-s-cols-"] > *,
  .cols > *[class*="device-s-span-"] {
    flex-basis: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
    max-width: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
    width: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
  }
  .cols.device-s-space-between-0 {
    --gap: 0px;
  }
  .cols.device-s-space-between-xs {
    --gap: 8px;
  }
  .cols.device-s-space-between-s {
    --gap: 16px;
  }
  .cols.device-s-space-between-m {
    --gap: 32px;
  }
  .cols.device-s-space-between-l {
    --gap: 64px;
  }
  .cols.device-s-space-between-xl {
    --gap: 128px;
  }
  .cols.device-s-wrap {
    flex-wrap: wrap;
    padding: calc(var(--gap)/2) 0;
  }
  .cols.device-s-no-wrap {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
  }
  .cols.device-s-row-reverse {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    flex-direction: row-reverse;
  }
  .cols.device-s-column-reverse {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    flex-direction: column-reverse;
  }
}

@media all and (min-width: 768px) and (max-width: 1199px) {
  .device-m-cols-1 {
    --colCount: 1;
  }
  .cols > .device-m-span-1 {
    --childWidthPc: calc(1/16*100%);
  }
  .device-m-cols-2 {
    --colCount: 2;
  }
  .cols > .device-m-span-2 {
    --childWidthPc: calc(2/16*100%);
  }
  .device-m-cols-3 {
    --colCount: 3;
  }
  .cols > .device-m-span-3 {
    --childWidthPc: calc(3/16*100%);
  }
  .device-m-cols-4 {
    --colCount: 4;
  }
  .cols > .device-m-span-4 {
    --childWidthPc: calc(4/16*100%);
  }
  .device-m-cols-5 {
    --colCount: 5;
  }
  .cols > .device-m-span-5 {
    --childWidthPc: calc(5/16*100%);
  }
  .device-m-cols-6 {
    --colCount: 6;
  }
  .cols > .device-m-span-6 {
    --childWidthPc: calc(6/16*100%);
  }
  .device-m-cols-7 {
    --colCount: 7;
  }
  .cols > .device-m-span-7 {
    --childWidthPc: calc(7/16*100%);
  }
  .device-m-cols-8 {
    --colCount: 8;
  }
  .cols > .device-m-span-8 {
    --childWidthPc: calc(8/16*100%);
  }
  .device-m-cols-9 {
    --colCount: 9;
  }
  .cols > .device-m-span-9 {
    --childWidthPc: calc(9/16*100%);
  }
  .device-m-cols-10 {
    --colCount: 10;
  }
  .cols > .device-m-span-10 {
    --childWidthPc: calc(10/16*100%);
  }
  .device-m-cols-11 {
    --colCount: 11;
  }
  .cols > .device-m-span-11 {
    --childWidthPc: calc(11/16*100%);
  }
  .device-m-cols-12 {
    --colCount: 12;
  }
  .cols > .device-m-span-12 {
    --childWidthPc: calc(12/16*100%);
  }
  .device-m-cols-13 {
    --colCount: 13;
  }
  .cols > .device-m-span-13 {
    --childWidthPc: calc(13/16*100%);
  }
  .device-m-cols-14 {
    --colCount: 14;
  }
  .cols > .device-m-span-14 {
    --childWidthPc: calc(14/16*100%);
  }
  .device-m-cols-15 {
    --colCount: 15;
  }
  .cols > .device-m-span-15 {
    --childWidthPc: calc(15/16*100%);
  }
  .device-m-cols-16 {
    --colCount: 16;
  }
  .cols > .device-m-span-16 {
    --childWidthPc: calc(16/16*100%);
  }
  .cols[class*="device-m-cols-"] > *,
  .cols > *[class*="device-m-span-"] {
    flex-basis: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
    max-width: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
    width: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
  }
  .cols.device-m-space-between-0 {
    --gap: 0px;
  }
  .cols.device-m-space-between-xs {
    --gap: 8px;
  }
  .cols.device-m-space-between-s {
    --gap: 16px;
  }
  .cols.device-m-space-between-m {
    --gap: 32px;
  }
  .cols.device-m-space-between-l {
    --gap: 64px;
  }
  .cols.device-m-space-between-xl {
    --gap: 128px;
  }
  .cols.device-m-wrap {
    flex-wrap: wrap;
    padding: calc(var(--gap)/2) 0;
  }
  .cols.device-m-no-wrap {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
  }
  .cols.device-m-row-reverse {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    flex-direction: row-reverse;
  }
  .cols.device-m-column-reverse {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    flex-direction: column-reverse;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  .device-l-cols-1 {
    --colCount: 1;
  }
  .cols > .device-l-span-1 {
    --childWidthPc: calc(1/16*100%);
  }
  .device-l-cols-2 {
    --colCount: 2;
  }
  .cols > .device-l-span-2 {
    --childWidthPc: calc(2/16*100%);
  }
  .device-l-cols-3 {
    --colCount: 3;
  }
  .cols > .device-l-span-3 {
    --childWidthPc: calc(3/16*100%);
  }
  .device-l-cols-4 {
    --colCount: 4;
  }
  .cols > .device-l-span-4 {
    --childWidthPc: calc(4/16*100%);
  }
  .device-l-cols-5 {
    --colCount: 5;
  }
  .cols > .device-l-span-5 {
    --childWidthPc: calc(5/16*100%);
  }
  .device-l-cols-6 {
    --colCount: 6;
  }
  .cols > .device-l-span-6 {
    --childWidthPc: calc(6/16*100%);
  }
  .device-l-cols-7 {
    --colCount: 7;
  }
  .cols > .device-l-span-7 {
    --childWidthPc: calc(7/16*100%);
  }
  .device-l-cols-8 {
    --colCount: 8;
  }
  .cols > .device-l-span-8 {
    --childWidthPc: calc(8/16*100%);
  }
  .device-l-cols-9 {
    --colCount: 9;
  }
  .cols > .device-l-span-9 {
    --childWidthPc: calc(9/16*100%);
  }
  .device-l-cols-10 {
    --colCount: 10;
  }
  .cols > .device-l-span-10 {
    --childWidthPc: calc(10/16*100%);
  }
  .device-l-cols-11 {
    --colCount: 11;
  }
  .cols > .device-l-span-11 {
    --childWidthPc: calc(11/16*100%);
  }
  .device-l-cols-12 {
    --colCount: 12;
  }
  .cols > .device-l-span-12 {
    --childWidthPc: calc(12/16*100%);
  }
  .device-l-cols-13 {
    --colCount: 13;
  }
  .cols > .device-l-span-13 {
    --childWidthPc: calc(13/16*100%);
  }
  .device-l-cols-14 {
    --colCount: 14;
  }
  .cols > .device-l-span-14 {
    --childWidthPc: calc(14/16*100%);
  }
  .device-l-cols-15 {
    --colCount: 15;
  }
  .cols > .device-l-span-15 {
    --childWidthPc: calc(15/16*100%);
  }
  .device-l-cols-16 {
    --colCount: 16;
  }
  .cols > .device-l-span-16 {
    --childWidthPc: calc(16/16*100%);
  }
  .cols[class*="device-l-cols-"] > *,
  .cols > *[class*="device-l-span-"] {
    flex-basis: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
    max-width: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
    width: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
  }
  .cols.device-l-space-between-0 {
    --gap: 0px;
  }
  .cols.device-l-space-between-xs {
    --gap: 8px;
  }
  .cols.device-l-space-between-s {
    --gap: 16px;
  }
  .cols.device-l-space-between-m {
    --gap: 32px;
  }
  .cols.device-l-space-between-l {
    --gap: 64px;
  }
  .cols.device-l-space-between-xl {
    --gap: 128px;
  }
  .cols.device-l-wrap {
    flex-wrap: wrap;
    padding: calc(var(--gap)/2) 0;
  }
  .cols.device-l-no-wrap {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
  }
  .cols.device-l-row-reverse {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    flex-direction: row-reverse;
  }
  .cols.device-l-column-reverse {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    flex-direction: column-reverse;
  }
}

@media all and (min-width: 1600px) {
  .device-xl-cols-1 {
    --colCount: 1;
  }
  .cols > .device-xl-span-1 {
    --childWidthPc: calc(1/16*100%);
  }
  .device-xl-cols-2 {
    --colCount: 2;
  }
  .cols > .device-xl-span-2 {
    --childWidthPc: calc(2/16*100%);
  }
  .device-xl-cols-3 {
    --colCount: 3;
  }
  .cols > .device-xl-span-3 {
    --childWidthPc: calc(3/16*100%);
  }
  .device-xl-cols-4 {
    --colCount: 4;
  }
  .cols > .device-xl-span-4 {
    --childWidthPc: calc(4/16*100%);
  }
  .device-xl-cols-5 {
    --colCount: 5;
  }
  .cols > .device-xl-span-5 {
    --childWidthPc: calc(5/16*100%);
  }
  .device-xl-cols-6 {
    --colCount: 6;
  }
  .cols > .device-xl-span-6 {
    --childWidthPc: calc(6/16*100%);
  }
  .device-xl-cols-7 {
    --colCount: 7;
  }
  .cols > .device-xl-span-7 {
    --childWidthPc: calc(7/16*100%);
  }
  .device-xl-cols-8 {
    --colCount: 8;
  }
  .cols > .device-xl-span-8 {
    --childWidthPc: calc(8/16*100%);
  }
  .device-xl-cols-9 {
    --colCount: 9;
  }
  .cols > .device-xl-span-9 {
    --childWidthPc: calc(9/16*100%);
  }
  .device-xl-cols-10 {
    --colCount: 10;
  }
  .cols > .device-xl-span-10 {
    --childWidthPc: calc(10/16*100%);
  }
  .device-xl-cols-11 {
    --colCount: 11;
  }
  .cols > .device-xl-span-11 {
    --childWidthPc: calc(11/16*100%);
  }
  .device-xl-cols-12 {
    --colCount: 12;
  }
  .cols > .device-xl-span-12 {
    --childWidthPc: calc(12/16*100%);
  }
  .device-xl-cols-13 {
    --colCount: 13;
  }
  .cols > .device-xl-span-13 {
    --childWidthPc: calc(13/16*100%);
  }
  .device-xl-cols-14 {
    --colCount: 14;
  }
  .cols > .device-xl-span-14 {
    --childWidthPc: calc(14/16*100%);
  }
  .device-xl-cols-15 {
    --colCount: 15;
  }
  .cols > .device-xl-span-15 {
    --childWidthPc: calc(15/16*100%);
  }
  .device-xl-cols-16 {
    --colCount: 16;
  }
  .cols > .device-xl-span-16 {
    --childWidthPc: calc(16/16*100%);
  }
  .cols[class*="device-xl-cols-"] > *,
  .cols > *[class*="device-xl-span-"] {
    flex-basis: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
    max-width: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
    width: calc(var(--childWidthPc) - calc(var(--gapTotal)/var(--colCount)));
  }
  .cols.device-xl-space-between-0 {
    --gap: 0px;
  }
  .cols.device-xl-space-between-xs {
    --gap: 8px;
  }
  .cols.device-xl-space-between-s {
    --gap: 16px;
  }
  .cols.device-xl-space-between-m {
    --gap: 32px;
  }
  .cols.device-xl-space-between-l {
    --gap: 64px;
  }
  .cols.device-xl-space-between-xl {
    --gap: 128px;
  }
  .cols.device-xl-wrap {
    flex-wrap: wrap;
    padding: calc(var(--gap)/2) 0;
  }
  .cols.device-xl-no-wrap {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
  }
  .cols.device-xl-row-reverse {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    flex-direction: row-reverse;
  }
  .cols.device-xl-column-reverse {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    flex-direction: column-reverse;
  }
}

.spacing-0 {
  clear: both;
  height: 0;
}

.spacing-xs {
  clear: both;
  height: 4px;
}

.spacing-s {
  clear: both;
  height: 8px;
}

.spacing-m {
  clear: both;
  height: 16px;
}

.spacing-l {
  clear: both;
  height: 32px;
}

.spacing-xl {
  clear: both;
  height: 64px;
}

.padding-0 {
  padding: 0;
}

.padding-xs {
  padding: 4px;
}

.padding-s {
  padding: 8px;
}

.padding-m {
  padding: 16px;
}

.padding-l {
  padding: 32px;
}

.padding-xl {
  padding: 64px;
}

.padding-10pc {
  padding: 0 10%;
}

.padding-top-0 {
  padding-top: 0;
}

.padding-top-xs {
  padding-top: 4px;
}

.padding-top-s {
  padding-top: 8px;
}

.padding-top-m {
  padding-top: 16px;
}

.padding-top-l {
  padding-top: 32px;
}

.padding-top-xl {
  padding-top: 64px;
}

.padding-bottom-0 {
  padding-bottom: 0;
}

.padding-bottom-xs {
  padding-bottom: 4px;
}

.padding-bottom-s {
  padding-bottom: 8px;
}

.padding-bottom-m {
  padding-bottom: 16px;
}

.padding-bottom-l {
  padding-bottom: 32px;
}

.padding-bottom-xl {
  padding-bottom: 64px;
}

.padding-left-0 {
  padding-left: 0;
}

.padding-left-xs {
  padding-left: 4px;
}

.padding-left-s {
  padding-left: 8px;
}

.padding-left-m {
  padding-left: 16px;
}

.padding-left-l {
  padding-left: 32px;
}

.padding-left-xl {
  padding-left: 64px;
}

.padding-right-0 {
  padding-right: 0;
}

.padding-right-xs {
  padding-right: 4px;
}

.padding-right-s {
  padding-right: 8px;
}

.padding-right-m {
  padding-right: 16px;
}

.padding-right-l {
  padding-right: 32px;
}

.padding-right-xl {
  padding-right: 64px;
}

.margin-0 {
  margin: 0;
}

.margin-xs {
  margin: 4px;
}

.margin-s {
  margin: 8px;
}

.margin-m {
  margin: 16px;
}

.margin-l {
  margin: 32px;
}

.margin-xl {
  margin: 64px;
}

.margin-10pc {
  margin: 0 10%;
}

.margin-top-0 {
  margin-top: 0;
}

.margin-top-xs {
  margin-top: 4px;
}

.margin-top-s {
  margin-top: 8px;
}

.margin-top-m {
  margin-top: 16px;
}

.margin-top-l {
  margin-top: 32px;
}

.margin-top-xl {
  margin-top: 64px;
}

.margin-bottom-0 {
  margin-bottom: 0;
}

.margin-bottom-xs {
  margin-bottom: 4px;
}

.margin-bottom-s {
  margin-bottom: 8px;
}

.margin-bottom-m {
  margin-bottom: 16px;
}

.margin-bottom-l {
  margin-bottom: 32px;
}

.margin-bottom-xl {
  margin-bottom: 64px;
}

.margin-left-0 {
  margin-left: 0;
}

.margin-left-xs {
  margin-left: 4px;
}

.margin-left-s {
  margin-left: 8px;
}

.margin-left-m {
  margin-left: 16px;
}

.margin-left-l {
  margin-left: 32px;
}

.margin-left-xl {
  margin-left: 64px;
}

.margin-right-0 {
  margin-right: 0;
}

.margin-right-xs {
  margin-right: 4px;
}

.margin-right-s {
  margin-right: 8px;
}

.margin-right-m {
  margin-right: 16px;
}

.margin-right-l {
  margin-right: 32px;
}

.margin-right-xl {
  margin-right: 64px;
}

@media all and (max-width: 767px) {
  .device-s-spacing-0 {
    clear: both;
    height: 0;
  }
  .device-s-spacing-xs {
    clear: both;
    height: 4px;
  }
  .device-s-spacing-s {
    clear: both;
    height: 8px;
  }
  .device-s-spacing-m {
    clear: both;
    height: 16px;
  }
  .device-s-spacing-l {
    clear: both;
    height: 32px;
  }
  .device-s-spacing-xl {
    clear: both;
    height: 64px;
  }
  .device-s-padding-0 {
    padding: 0;
  }
  .device-s-padding-xs {
    padding: 4px;
  }
  .device-s-padding-s {
    padding: 8px;
  }
  .device-s-padding-m {
    padding: 16px;
  }
  .device-s-padding-l {
    padding: 32px;
  }
  .device-s-padding-xl {
    padding: 64px;
  }
  .device-s-padding-top-0 {
    padding-top: 0;
  }
  .device-s-padding-top-xs {
    padding-top: 4px;
  }
  .device-s-padding-top-s {
    padding-top: 8px;
  }
  .device-s-padding-top-m {
    padding-top: 16px;
  }
  .device-s-padding-top-l {
    padding-top: 32px;
  }
  .device-s-padding-top-xl {
    padding-top: 64px;
  }
  .device-s-padding-bottom-0 {
    padding-bottom: 0;
  }
  .device-s-padding-bottom-xs {
    padding-bottom: 4px;
  }
  .device-s-padding-bottom-s {
    padding-bottom: 8px;
  }
  .device-s-padding-bottom-m {
    padding-bottom: 16px;
  }
  .device-s-padding-bottom-l {
    padding-bottom: 32px;
  }
  .device-s-padding-bottom-xl {
    padding-bottom: 64px;
  }
  .device-s-padding-left-0 {
    padding-left: 0;
  }
  .device-s-padding-left-xs {
    padding-left: 4px;
  }
  .device-s-padding-left-s {
    padding-left: 8px;
  }
  .device-s-padding-left-m {
    padding-left: 16px;
  }
  .device-s-padding-left-l {
    padding-left: 32px;
  }
  .device-s-padding-left-xl {
    padding-left: 64px;
  }
  .device-s-padding-right-0 {
    padding-right: 0;
  }
  .device-s-padding-right-xs {
    padding-right: 4px;
  }
  .device-s-padding-right-s {
    padding-right: 8px;
  }
  .device-s-padding-right-m {
    padding-right: 16px;
  }
  .device-s-padding-right-l {
    padding-right: 32px;
  }
  .device-s-padding-right-xl {
    padding-right: 64px;
  }
}

@media all and (min-width: 768px) and (max-width: 1199px) {
  .device-m-spacing-0 {
    clear: both;
    height: 0;
  }
  .device-m-spacing-xs {
    clear: both;
    height: 4px;
  }
  .device-m-spacing-s {
    clear: both;
    height: 8px;
  }
  .device-m-spacing-m {
    clear: both;
    height: 16px;
  }
  .device-m-spacing-l {
    clear: both;
    height: 32px;
  }
  .device-m-spacing-xl {
    clear: both;
    height: 64px;
  }
  .device-m-padding-0 {
    padding: 0;
  }
  .device-m-padding-xs {
    padding: 4px;
  }
  .device-m-padding-s {
    padding: 8px;
  }
  .device-m-padding-m {
    padding: 16px;
  }
  .device-m-padding-l {
    padding: 32px;
  }
  .device-m-padding-xl {
    padding: 64px;
  }
  .device-m-padding-top-0 {
    padding-top: 0;
  }
  .device-m-padding-top-xs {
    padding-top: 4px;
  }
  .device-m-padding-top-s {
    padding-top: 8px;
  }
  .device-m-padding-top-m {
    padding-top: 16px;
  }
  .device-m-padding-top-l {
    padding-top: 32px;
  }
  .device-m-padding-top-xl {
    padding-top: 64px;
  }
  .device-m-padding-bottom-0 {
    padding-bottom: 0;
  }
  .device-m-padding-bottom-xs {
    padding-bottom: 4px;
  }
  .device-m-padding-bottom-s {
    padding-bottom: 8px;
  }
  .device-m-padding-bottom-m {
    padding-bottom: 16px;
  }
  .device-m-padding-bottom-l {
    padding-bottom: 32px;
  }
  .device-m-padding-bottom-xl {
    padding-bottom: 64px;
  }
  .device-m-padding-left-0 {
    padding-left: 0;
  }
  .device-m-padding-left-xs {
    padding-left: 4px;
  }
  .device-m-padding-left-s {
    padding-left: 8px;
  }
  .device-m-padding-left-m {
    padding-left: 16px;
  }
  .device-m-padding-left-l {
    padding-left: 32px;
  }
  .device-m-padding-left-xl {
    padding-left: 64px;
  }
  .device-m-padding-right-0 {
    padding-right: 0;
  }
  .device-m-padding-right-xs {
    padding-right: 4px;
  }
  .device-m-padding-right-s {
    padding-right: 8px;
  }
  .device-m-padding-right-m {
    padding-right: 16px;
  }
  .device-m-padding-right-l {
    padding-right: 32px;
  }
  .device-m-padding-right-xl {
    padding-right: 64px;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  .device-l-spacing-0 {
    clear: both;
    height: 0;
  }
  .device-l-spacing-xs {
    clear: both;
    height: 4px;
  }
  .device-l-spacing-s {
    clear: both;
    height: 8px;
  }
  .device-l-spacing-m {
    clear: both;
    height: 16px;
  }
  .device-l-spacing-l {
    clear: both;
    height: 32px;
  }
  .device-l-spacing-xl {
    clear: both;
    height: 64px;
  }
  .device-l-padding-0 {
    padding: 0;
  }
  .device-l-padding-xs {
    padding: 4px;
  }
  .device-l-padding-s {
    padding: 8px;
  }
  .device-l-padding-m {
    padding: 16px;
  }
  .device-l-padding-l {
    padding: 32px;
  }
  .device-l-padding-xl {
    padding: 64px;
  }
  .device-l-padding-top-0 {
    padding-top: 0;
  }
  .device-l-padding-top-xs {
    padding-top: 4px;
  }
  .device-l-padding-top-s {
    padding-top: 8px;
  }
  .device-l-padding-top-m {
    padding-top: 16px;
  }
  .device-l-padding-top-l {
    padding-top: 32px;
  }
  .device-l-padding-top-xl {
    padding-top: 64px;
  }
  .device-l-padding-bottom-0 {
    padding-bottom: 0;
  }
  .device-l-padding-bottom-xs {
    padding-bottom: 4px;
  }
  .device-l-padding-bottom-s {
    padding-bottom: 8px;
  }
  .device-l-padding-bottom-m {
    padding-bottom: 16px;
  }
  .device-l-padding-bottom-l {
    padding-bottom: 32px;
  }
  .device-l-padding-bottom-xl {
    padding-bottom: 64px;
  }
  .device-l-padding-left-0 {
    padding-left: 0;
  }
  .device-l-padding-left-xs {
    padding-left: 4px;
  }
  .device-l-padding-left-s {
    padding-left: 8px;
  }
  .device-l-padding-left-m {
    padding-left: 16px;
  }
  .device-l-padding-left-l {
    padding-left: 32px;
  }
  .device-l-padding-left-xl {
    padding-left: 64px;
  }
  .device-l-padding-right-0 {
    padding-right: 0;
  }
  .device-l-padding-right-xs {
    padding-right: 4px;
  }
  .device-l-padding-right-s {
    padding-right: 8px;
  }
  .device-l-padding-right-m {
    padding-right: 16px;
  }
  .device-l-padding-right-l {
    padding-right: 32px;
  }
  .device-l-padding-right-xl {
    padding-right: 64px;
  }
}

@media all and (min-width: 1600px) {
  .device-xl-spacing-0 {
    clear: both;
    height: 0;
  }
  .device-xl-spacing-xs {
    clear: both;
    height: 4px;
  }
  .device-xl-spacing-s {
    clear: both;
    height: 8px;
  }
  .device-xl-spacing-m {
    clear: both;
    height: 16px;
  }
  .device-xl-spacing-l {
    clear: both;
    height: 32px;
  }
  .device-xl-spacing-xl {
    clear: both;
    height: 64px;
  }
  .device-xl-padding-0 {
    padding: 0;
  }
  .device-xl-padding-xs {
    padding: 4px;
  }
  .device-xl-padding-s {
    padding: 8px;
  }
  .device-xl-padding-m {
    padding: 16px;
  }
  .device-xl-padding-l {
    padding: 32px;
  }
  .device-xl-padding-xl {
    padding: 64px;
  }
  .device-xl-padding-top-0 {
    padding-top: 0;
  }
  .device-xl-padding-top-xs {
    padding-top: 4px;
  }
  .device-xl-padding-top-s {
    padding-top: 8px;
  }
  .device-xl-padding-top-m {
    padding-top: 16px;
  }
  .device-xl-padding-top-l {
    padding-top: 32px;
  }
  .device-xl-padding-top-xl {
    padding-top: 64px;
  }
  .device-xl-padding-bottom-0 {
    padding-bottom: 0;
  }
  .device-xl-padding-bottom-xs {
    padding-bottom: 4px;
  }
  .device-xl-padding-bottom-s {
    padding-bottom: 8px;
  }
  .device-xl-padding-bottom-m {
    padding-bottom: 16px;
  }
  .device-xl-padding-bottom-l {
    padding-bottom: 32px;
  }
  .device-xl-padding-bottom-xl {
    padding-bottom: 64px;
  }
  .device-xl-padding-left-0 {
    padding-left: 0;
  }
  .device-xl-padding-left-xs {
    padding-left: 4px;
  }
  .device-xl-padding-left-s {
    padding-left: 8px;
  }
  .device-xl-padding-left-m {
    padding-left: 16px;
  }
  .device-xl-padding-left-l {
    padding-left: 32px;
  }
  .device-xl-padding-left-xl {
    padding-left: 64px;
  }
  .device-xl-padding-right-0 {
    padding-right: 0;
  }
  .device-xl-padding-right-xs {
    padding-right: 4px;
  }
  .device-xl-padding-right-s {
    padding-right: 8px;
  }
  .device-xl-padding-right-m {
    padding-right: 16px;
  }
  .device-xl-padding-right-l {
    padding-right: 32px;
  }
  .device-xl-padding-right-xl {
    padding-right: 64px;
  }
}

.show {
  display: block;
}

.hide {
  display: none;
}

.force-hide {
  display: none !important;
}

@media all and (max-width: 767px) {
  .device-s-show {
    display: block;
  }
  .device-s-hide {
    display: none;
  }
}

@media all and (min-width: 768px) and (max-width: 1199px) {
  .device-m-show {
    display: block;
  }
  .device-m-hide {
    display: none;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  .device-l-show {
    display: block;
  }
  .device-l-hide {
    display: none;
  }
}

@media all and (min-width: 1600px) {
  .device-xl-show {
    display: block;
  }
  .device-xl-hide {
    display: none;
  }
}

.disable-scroll {
  overflow: hidden;
}

.disable-scroll-y {
  overflow-y: hidden;
}

.disable-scroll-x {
  overflow-y: hidden;
}

.shadow-s {
  -webkit-box-shadow: 0px 8px 8px -8px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 8px 8px -8px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 8px 8px -8px rgba(0, 0, 0, 0.25);
}

.shadow-m {
  -webkit-box-shadow: 0px 16px 16px -16px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 16px 16px -16px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 16px 16px -16px rgba(0, 0, 0, 0.25);
}

.shadow-l {
  -webkit-box-shadow: 0px 32px 32px -32px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 32px 32px -32px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 32px 32px -32px rgba(0, 0, 0, 0.25);
}

.shadow-xl {
  -webkit-box-shadow: 0px 64px 64px -64px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 64px 64px -64px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 64px 64px -64px rgba(0, 0, 0, 0.25);
}

.radius-xs {
  border-radius: 2px;
}

.radius-s {
  border-radius: 4px;
}

.radius-m {
  border-radius: 8px;
}

.radius-l {
  border-radius: 16px;
}

.radius-xl {
  border-radius: 32px;
}

.radius-50pc {
  border-radius: 50%;
}

a {
  color: inherit;
}

hr {
  border: none;
  margin: 0;
  padding: 0;
  height: 1px;
  background: #ccc;
}

hr.xs {
  height: 1px;
}

hr.s {
  height: 2px;
}

hr.m {
  height: 8px;
}

hr.l {
  height: 32px;
}

hr.xl {
  height: 64px;
}

hr.black {
  background: #000;
}

hr.white {
  background: #fff;
}

hr.grey {
  background: #ccc;
}

hr.light-grey {
  background: #eee;
}

hr.rounded.s {
  border-radius: 2px;
}

hr.rounded.m {
  border-radius: 4px;
}

hr.rounded.l {
  border-radius: 16px;
}

hr.rounded.xl {
  border-radius: 32px;
}

hr.rounded-s.s {
  border-radius: 2px;
}

hr.rounded-s.m, hr.rounded-s.l, hr.rounded-s.xl {
  border-radius: 3px;
}

hr.rounded-m.s {
  border-radius: 2px;
}

hr.rounded-m.m, hr.rounded-m.l, hr.rounded-m.xl {
  border-radius: 8px;
}

hr.rounded-l.s {
  border-radius: 2px;
}

hr.rounded-l.m {
  border-radius: 8px;
}

hr.rounded-l.l, hr.rounded-l.xl {
  border-radius: 16px;
}

hr.rounded-xl.s {
  border-radius: 2px;
}

hr.rounded-xl.m {
  border-radius: 8px;
}

hr.rounded-xl.l, hr.rounded-xl.xl {
  border-radius: 32px;
}

.heading-focused {
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: center;
  color: #000;
}

.heading-focused > * {
  padding: 0 16px;
}

.heading-focused:before,
.heading-focused:after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  border-top: 1px solid currentColor;
}

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

ol.no-style > li,
ul.no-style > li {
  list-style: none;
}

ol.inside,
ul.inside {
  padding-left: 0;
  list-style-position: inside;
}

ol.outside,
ul.outside {
  list-style-position: outside;
}

ol > li,
ul > li {
  margin-top: 8px;
  margin-bottom: 8px;
}

ol.space-between-0 > li,
ul.space-between-0 > li {
  margin-top: 0;
  margin-bottom: 0;
}

ol.space-between-xs > li,
ul.space-between-xs > li {
  margin-top: 4px;
  margin-bottom: 4px;
}

ol.space-between-s > li,
ul.space-between-s > li {
  margin-top: 8px;
  margin-bottom: 8px;
}

ol.space-between-m > li,
ul.space-between-m > li {
  margin-top: 16px;
  margin-bottom: 16px;
}

ol.space-between-l > li,
ul.space-between-l > li {
  margin-top: 32px;
  margin-bottom: 32px;
}

ol.space-between-xl > li,
ul.space-between-xl > li {
  margin-top: 64px;
  margin-bottom: 64px;
}

@media all and (min-width: 1px) and (max-width: 767px) {
  ol.device-s-space-between-0 > li,
  ul.device-s-space-between-0 > li {
    margin-top: 0;
    margin-bottom: 0;
  }
  ol.device-s-space-between-xs > li,
  ul.device-s-space-between-xs > li {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  ol.device-s-space-between-s > li,
  ul.device-s-space-between-s > li {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  ol.device-s-space-between-m > li,
  ul.device-s-space-between-m > li {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  ol.device-s-space-between-l > li,
  ul.device-s-space-between-l > li {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  ol.device-s-space-between-xl > li,
  ul.device-s-space-between-xl > li {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}

@media all and (min-width: 768px) and (max-width: 1199px) {
  ol.device-m-space-between-0 > li,
  ul.device-m-space-between-0 > li {
    margin-top: 0;
    margin-bottom: 0;
  }
  ol.device-m-space-between-xs > li,
  ul.device-m-space-between-xs > li {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  ol.device-m-space-between-s > li,
  ul.device-m-space-between-s > li {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  ol.device-m-space-between-m > li,
  ul.device-m-space-between-m > li {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  ol.device-m-space-between-l > li,
  ul.device-m-space-between-l > li {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  ol.device-m-space-between-xl > li,
  ul.device-m-space-between-xl > li {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  ol.device-l-space-between-0 > li,
  ul.device-l-space-between-0 > li {
    margin-top: 0;
    margin-bottom: 0;
  }
  ol.device-l-space-between-xs > li,
  ul.device-l-space-between-xs > li {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  ol.device-l-space-between-s > li,
  ul.device-l-space-between-s > li {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  ol.device-l-space-between-m > li,
  ul.device-l-space-between-m > li {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  ol.device-l-space-between-l > li,
  ul.device-l-space-between-l > li {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  ol.device-l-space-between-xl > li,
  ul.device-l-space-between-xl > li {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}

@media all and (min-width: 1600px) {
  ol.device-xl-space-between-0 > li,
  ul.device-xl-space-between-0 > li {
    margin-top: 0;
    margin-bottom: 0;
  }
  ol.device-xl-space-between-xs > li,
  ul.device-xl-space-between-xs > li {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  ol.device-xl-space-between-s > li,
  ul.device-xl-space-between-s > li {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  ol.device-xl-space-between-m > li,
  ul.device-xl-space-between-m > li {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  ol.device-xl-space-between-l > li,
  ul.device-xl-space-between-l > li {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  ol.device-xl-space-between-xl > li,
  ul.device-xl-space-between-xl > li {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}

img.rounded {
  overflow: hidden;
  border-radius: 4px;
}

img.padded {
  padding: 4px;
  background: #fff;
}

img.padded-s, img.padded-xs {
  padding: 4px;
  background: #fff;
}

img.padded-m, img.padded-l, img.padded-xl {
  padding: 8px;
  background: #fff;
}

img.bordered {
  border: 1px solid #ccc;
}

img.bordered.black {
  border-color: #000;
}

img.bordered.light-grey {
  border-color: #eee;
}

.triggered-content {
  z-index: 5;
  position: relative;
  padding-right: 16px;
}

.triggered-content:hover > .trigger:before {
  left: 0;
  width: 100%;
}

.triggered-content.active {
  z-index: 10;
}

.triggered-content.active .box {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
  display: flex;
  padding-top: 8px;
}

.triggered-content > .trigger {
  display: flex;
  align-items: center;
  position: relative;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.triggered-content > .trigger:before {
  content: '';
  transition-duration: 0.4s;
  transition-delay: 0.001s;
  transition-property: left, width;
  will-change: left, width;
  transform: translateZ(0);
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 4px;
  width: 0;
  height: 1px;
  background: #000;
}

.triggered-content > .trigger img {
  position: absolute;
  left: 100%;
  margin-left: 4px;
  max-width: 12px;
}

.triggered-content > .box {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition-duration: 0.4s;
  transition-delay: 0.001s;
  transition-property: opacity, padding-top;
  will-change: opacity, padding-top;
  transform: translateZ(0);
  z-index: 3;
  position: absolute;
  left: 0;
  top: 100%;
  padding-top: -8px;
}

.triggered-content > .box > .content {
  display: flex;
  flex-direction: column;
  width: 350px;
  margin: -4px 0;
  border-radius: 1px;
  border: 1px solid #ccc;
  background: #fff;
}

/*
    NOTES:

    Tabs should be "stackable". At mobile sizes for example, it's best to stack the tabs, 
    and show the content directly beneath the active tab.  On desktop devices the tabs can run alongside eachother 
    with the active tab's content showing underneath all of the tabs.

    The intention is to allow class names to specify which style to use at any given size.
*/
.tabbed-content .tab {
  cursor: pointer;
}

.tabbed-content.normal .tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 16px;
}

.tabbed-content.normal .tabs > .tab {
  position: relative;
  padding: 16px 8px;
  flex: 1 1 auto;
  text-decoration: underline;
  text-align: center;
}

.tabbed-content.normal .tabs > .tab.normal-active {
  text-decoration: none;
  background: #eee;
}

.tabbed-content.normal .tabs > .tab.normal-active:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #eee;
}

.tabbed-content.normal > .content > div {
  display: none;
}

.tabbed-content.normal > .content > div.normal-active {
  display: block;
}

.tabbed-content.normal > .content > div > .tab {
  display: none;
}

.tabbed-content.stacked > .tabs {
  display: none;
}

.tabbed-content.stacked > .content {
  border-top: 1px solid #ccc;
}

.tabbed-content.stacked > .content > div {
  border-bottom: 1px solid #ccc;
}

.tabbed-content.stacked > .content > div.stacked-active > .tab:before {
  transform: rotate(180deg);
}

.tabbed-content.stacked > .content > div.stacked-active > .text {
  display: block;
}

.tabbed-content.stacked > .content > div > .tab {
  position: relative;
  padding: 16px 0;
  font-weight: bold;
}

.tabbed-content.stacked > .content > div > .tab:before {
  content: '';
  z-index: 2;
  position: absolute;
  top: 50%;
  right: 8px;
  margin-top: -6px;
  width: 12px;
  height: 12px;
  background: transparent no-repeat center center;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAApElEQVRIie3PvQnCQByH4UdsbC3SOkwaGy0DrmDhPjqC7iJOIFiooHYuEJsUZ0guiWB3L1xx8Pv6k0gk/s649p9hgwnOA7PmWOGCd5vohLJ6e2Q9gjMcAt8xJr4FwhJPFBF9UWlCzzVWkONRM5TVwvCa+upwUB4r6DIXLaubRnSywL0hqK34J6bYRcIHr25j6fua3qtHA0oyrKuCLV7DNiYSv/IB3T5GOZllTQ4AAAAASUVORK5CYII=");
  background-size: cover;
}

.tabbed-content.stacked > .content > div > .text {
  display: none;
  padding-bottom: 16px;
}

@media all and (min-width: 1px) and (max-width: 767px) {
  .tabbed-content.device-s-normal .tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 16px;
  }
  .tabbed-content.device-s-normal .tabs > .tab {
    position: relative;
    padding: 16px 8px;
    flex: 1 1 auto;
    text-decoration: underline;
    text-align: center;
  }
  .tabbed-content.device-s-normal .tabs > .tab.normal-active {
    text-decoration: none;
    background: #eee;
  }
  .tabbed-content.device-s-normal .tabs > .tab.normal-active:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #eee;
  }
  .tabbed-content.device-s-normal > .content > div {
    display: none;
  }
  .tabbed-content.device-s-normal > .content > div.normal-active {
    display: block;
  }
  .tabbed-content.device-s-normal > .content > div > .tab {
    display: none;
  }
  .tabbed-content.device-s-stacked > .tabs {
    display: none;
  }
  .tabbed-content.device-s-stacked > .content {
    border-top: 1px solid #ccc;
  }
  .tabbed-content.device-s-stacked > .content > div {
    border-bottom: 1px solid #ccc;
  }
  .tabbed-content.device-s-stacked > .content > div.stacked-active > .tab:before {
    transform: rotate(180deg);
  }
  .tabbed-content.device-s-stacked > .content > div.stacked-active > .text {
    display: block;
  }
  .tabbed-content.device-s-stacked > .content > div > .tab {
    position: relative;
    padding: 16px 0;
    font-weight: bold;
  }
  .tabbed-content.device-s-stacked > .content > div > .tab:before {
    content: '';
    z-index: 2;
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    background: transparent no-repeat center center;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAApElEQVRIie3PvQnCQByH4UdsbC3SOkwaGy0DrmDhPjqC7iJOIFiooHYuEJsUZ0guiWB3L1xx8Pv6k0gk/s649p9hgwnOA7PmWOGCd5vohLJ6e2Q9gjMcAt8xJr4FwhJPFBF9UWlCzzVWkONRM5TVwvCa+upwUB4r6DIXLaubRnSywL0hqK34J6bYRcIHr25j6fua3qtHA0oyrKuCLV7DNiYSv/IB3T5GOZllTQ4AAAAASUVORK5CYII=");
    background-size: cover;
  }
  .tabbed-content.device-s-stacked > .content > div > .text {
    display: none;
    padding-bottom: 16px;
  }
}

@media all and (min-width: 768px) and (max-width: 1199px) {
  .tabbed-content.device-m-normal .tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 16px;
  }
  .tabbed-content.device-m-normal .tabs > .tab {
    position: relative;
    padding: 16px 8px;
    flex: 1 1 auto;
    text-decoration: underline;
    text-align: center;
  }
  .tabbed-content.device-m-normal .tabs > .tab.normal-active {
    text-decoration: none;
    background: #eee;
  }
  .tabbed-content.device-m-normal .tabs > .tab.normal-active:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #eee;
  }
  .tabbed-content.device-m-normal > .content > div {
    display: none;
  }
  .tabbed-content.device-m-normal > .content > div.normal-active {
    display: block;
  }
  .tabbed-content.device-m-normal > .content > div > .tab {
    display: none;
  }
  .tabbed-content.device-m-stacked > .tabs {
    display: none;
  }
  .tabbed-content.device-m-stacked > .content {
    border-top: 1px solid #ccc;
  }
  .tabbed-content.device-m-stacked > .content > div {
    border-bottom: 1px solid #ccc;
  }
  .tabbed-content.device-m-stacked > .content > div.stacked-active > .tab:before {
    transform: rotate(180deg);
  }
  .tabbed-content.device-m-stacked > .content > div.stacked-active > .text {
    display: block;
  }
  .tabbed-content.device-m-stacked > .content > div > .tab {
    position: relative;
    padding: 16px 0;
    font-weight: bold;
  }
  .tabbed-content.device-m-stacked > .content > div > .tab:before {
    content: '';
    z-index: 2;
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    background: transparent no-repeat center center;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAApElEQVRIie3PvQnCQByH4UdsbC3SOkwaGy0DrmDhPjqC7iJOIFiooHYuEJsUZ0guiWB3L1xx8Pv6k0gk/s649p9hgwnOA7PmWOGCd5vohLJ6e2Q9gjMcAt8xJr4FwhJPFBF9UWlCzzVWkONRM5TVwvCa+upwUB4r6DIXLaubRnSywL0hqK34J6bYRcIHr25j6fua3qtHA0oyrKuCLV7DNiYSv/IB3T5GOZllTQ4AAAAASUVORK5CYII=");
    background-size: cover;
  }
  .tabbed-content.device-m-stacked > .content > div > .text {
    display: none;
    padding-bottom: 16px;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  .tabbed-content.device-l-normal .tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 16px;
  }
  .tabbed-content.device-l-normal .tabs > .tab {
    position: relative;
    padding: 16px 8px;
    flex: 1 1 auto;
    text-decoration: underline;
    text-align: center;
  }
  .tabbed-content.device-l-normal .tabs > .tab.normal-active {
    text-decoration: none;
    background: #eee;
  }
  .tabbed-content.device-l-normal .tabs > .tab.normal-active:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #eee;
  }
  .tabbed-content.device-l-normal > .content > div {
    display: none;
  }
  .tabbed-content.device-l-normal > .content > div.normal-active {
    display: block;
  }
  .tabbed-content.device-l-normal > .content > div > .tab {
    display: none;
  }
  .tabbed-content.device-l-stacked > .tabs {
    display: none;
  }
  .tabbed-content.device-l-stacked > .content {
    border-top: 1px solid #ccc;
  }
  .tabbed-content.device-l-stacked > .content > div {
    border-bottom: 1px solid #ccc;
  }
  .tabbed-content.device-l-stacked > .content > div.stacked-active > .tab:before {
    transform: rotate(180deg);
  }
  .tabbed-content.device-l-stacked > .content > div.stacked-active > .text {
    display: block;
  }
  .tabbed-content.device-l-stacked > .content > div > .tab {
    position: relative;
    padding: 16px 0;
    font-weight: bold;
  }
  .tabbed-content.device-l-stacked > .content > div > .tab:before {
    content: '';
    z-index: 2;
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    background: transparent no-repeat center center;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAApElEQVRIie3PvQnCQByH4UdsbC3SOkwaGy0DrmDhPjqC7iJOIFiooHYuEJsUZ0guiWB3L1xx8Pv6k0gk/s649p9hgwnOA7PmWOGCd5vohLJ6e2Q9gjMcAt8xJr4FwhJPFBF9UWlCzzVWkONRM5TVwvCa+upwUB4r6DIXLaubRnSywL0hqK34J6bYRcIHr25j6fua3qtHA0oyrKuCLV7DNiYSv/IB3T5GOZllTQ4AAAAASUVORK5CYII=");
    background-size: cover;
  }
  .tabbed-content.device-l-stacked > .content > div > .text {
    display: none;
    padding-bottom: 16px;
  }
}

@media all and (min-width: 1600px) {
  .tabbed-content.device-xl-normal .tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 16px;
  }
  .tabbed-content.device-xl-normal .tabs > .tab {
    position: relative;
    padding: 16px 8px;
    flex: 1 1 auto;
    text-decoration: underline;
    text-align: center;
  }
  .tabbed-content.device-xl-normal .tabs > .tab.normal-active {
    text-decoration: none;
    background: #eee;
  }
  .tabbed-content.device-xl-normal .tabs > .tab.normal-active:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #eee;
  }
  .tabbed-content.device-xl-normal > .content > div {
    display: none;
  }
  .tabbed-content.device-xl-normal > .content > div.normal-active {
    display: block;
  }
  .tabbed-content.device-xl-normal > .content > div > .tab {
    display: none;
  }
  .tabbed-content.device-xl-stacked > .tabs {
    display: none;
  }
  .tabbed-content.device-xl-stacked > .content {
    border-top: 1px solid #ccc;
  }
  .tabbed-content.device-xl-stacked > .content > div {
    border-bottom: 1px solid #ccc;
  }
  .tabbed-content.device-xl-stacked > .content > div.stacked-active > .tab:before {
    transform: rotate(180deg);
  }
  .tabbed-content.device-xl-stacked > .content > div.stacked-active > .text {
    display: block;
  }
  .tabbed-content.device-xl-stacked > .content > div > .tab {
    position: relative;
    padding: 16px 0;
    font-weight: bold;
  }
  .tabbed-content.device-xl-stacked > .content > div > .tab:before {
    content: '';
    z-index: 2;
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    background: transparent no-repeat center center;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAApElEQVRIie3PvQnCQByH4UdsbC3SOkwaGy0DrmDhPjqC7iJOIFiooHYuEJsUZ0guiWB3L1xx8Pv6k0gk/s649p9hgwnOA7PmWOGCd5vohLJ6e2Q9gjMcAt8xJr4FwhJPFBF9UWlCzzVWkONRM5TVwvCa+upwUB4r6DIXLaubRnSywL0hqK34J6bYRcIHr25j6fua3qtHA0oyrKuCLV7DNiYSv/IB3T5GOZllTQ4AAAAASUVORK5CYII=");
    background-size: cover;
  }
  .tabbed-content.device-xl-stacked > .content > div > .text {
    display: none;
    padding-bottom: 16px;
  }
}

.generic-content-popup {
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #000;
  background: rgba(1, 1, 1, 0.6);
}

.generic-content-popup.hide {
  display: none !important;
}

.generic-content-popup .generic-content-popup-box {
  width: 100%;
  max-width: 780px;
  max-height: 100%;
  border-radius: 2px;
  background: #fff;
  overflow: auto;
}

.message {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 4px 8px;
  border-left: 4px solid #000;
}

.message > * {
  flex-flow: 1 1 auto;
}

.message i.icon ~ .text {
  padding-left: 8px;
}

.message.red, .message.error {
  border-color: #de2a2a;
}

.message.black {
  border-color: #000;
}

.message.grey {
  border-color: #ccc;
}

.message.light-grey {
  border-color: #eee;
}

.background-white {
  background: #fff;
}

.background-white-5 {
  background: rgba(255, 255, 255, 0.05);
}

.background-white-10 {
  background: rgba(255, 255, 255, 0.1);
}

.background-white-15 {
  background: rgba(255, 255, 255, 0.15);
}

.background-white-20 {
  background: rgba(255, 255, 255, 0.2);
}

.background-white-25 {
  background: rgba(255, 255, 255, 0.25);
}

.background-white-30 {
  background: rgba(255, 255, 255, 0.3);
}

.background-white-35 {
  background: rgba(255, 255, 255, 0.35);
}

.background-white-40 {
  background: rgba(255, 255, 255, 0.4);
}

.background-white-45 {
  background: rgba(255, 255, 255, 0.45);
}

.background-white-50 {
  background: rgba(255, 255, 255, 0.5);
}

.background-white-55 {
  background: rgba(255, 255, 255, 0.55);
}

.background-white-60 {
  background: rgba(255, 255, 255, 0.6);
}

.background-white-65 {
  background: rgba(255, 255, 255, 0.65);
}

.background-white-70 {
  background: rgba(255, 255, 255, 0.7);
}

.background-white-75 {
  background: rgba(255, 255, 255, 0.75);
}

.background-white-80 {
  background: rgba(255, 255, 255, 0.8);
}

.background-white-85 {
  background: rgba(255, 255, 255, 0.85);
}

.background-white-90 {
  background: rgba(255, 255, 255, 0.9);
}

.background-white-95 {
  background: rgba(255, 255, 255, 0.95);
}

.background-black {
  background: #000;
}

.background-black-5 {
  background: rgba(0, 0, 0, 0.05);
}

.background-black-10 {
  background: rgba(0, 0, 0, 0.1);
}

.background-black-15 {
  background: rgba(0, 0, 0, 0.15);
}

.background-black-20 {
  background: rgba(0, 0, 0, 0.2);
}

.background-black-25 {
  background: rgba(0, 0, 0, 0.25);
}

.background-black-30 {
  background: rgba(0, 0, 0, 0.3);
}

.background-black-35 {
  background: rgba(0, 0, 0, 0.35);
}

.background-black-40 {
  background: rgba(0, 0, 0, 0.4);
}

.background-black-45 {
  background: rgba(0, 0, 0, 0.45);
}

.background-black-50 {
  background: rgba(0, 0, 0, 0.5);
}

.background-black-55 {
  background: rgba(0, 0, 0, 0.55);
}

.background-black-60 {
  background: rgba(0, 0, 0, 0.6);
}

.background-black-65 {
  background: rgba(0, 0, 0, 0.65);
}

.background-black-70 {
  background: rgba(0, 0, 0, 0.7);
}

.background-black-75 {
  background: rgba(0, 0, 0, 0.75);
}

.background-black-80 {
  background: rgba(0, 0, 0, 0.8);
}

.background-black-85 {
  background: rgba(0, 0, 0, 0.85);
}

.background-black-90 {
  background: rgba(0, 0, 0, 0.9);
}

.background-black-95 {
  background: rgba(0, 0, 0, 0.95);
}

.background-dark-grey {
  background: #666;
}

.background-grey {
  background: #ccc;
}

.background-light-grey {
  background: #eee;
}

.background-red {
  background: #de2a2a;
}

.background-red-5 {
  background: rgba(222, 42, 42, 0.05);
}

.background-red-10 {
  background: rgba(222, 42, 42, 0.1);
}

.background-red-15 {
  background: rgba(222, 42, 42, 0.15);
}

.background-red-20 {
  background: rgba(222, 42, 42, 0.2);
}

.background-red-25 {
  background: rgba(222, 42, 42, 0.25);
}

.background-red-30 {
  background: rgba(222, 42, 42, 0.3);
}

.background-red-35 {
  background: rgba(222, 42, 42, 0.35);
}

.background-red-40 {
  background: rgba(222, 42, 42, 0.4);
}

.background-red-45 {
  background: rgba(222, 42, 42, 0.45);
}

.background-red-50 {
  background: rgba(222, 42, 42, 0.5);
}

.background-red-55 {
  background: rgba(222, 42, 42, 0.55);
}

.background-red-60 {
  background: rgba(222, 42, 42, 0.6);
}

.background-red-65 {
  background: rgba(222, 42, 42, 0.65);
}

.background-red-70 {
  background: rgba(222, 42, 42, 0.7);
}

.background-red-75 {
  background: rgba(222, 42, 42, 0.75);
}

.background-red-80 {
  background: rgba(222, 42, 42, 0.8);
}

.background-red-85 {
  background: rgba(222, 42, 42, 0.85);
}

.background-red-90 {
  background: rgba(222, 42, 42, 0.9);
}

.background-red-95 {
  background: rgba(222, 42, 42, 0.95);
}

.faux-video {
  position: relative;
  padding-bottom: 56.25%;
  background: #eee;
  font-size: 0;
}

.faux-video:before {
  content: '';
  pointer-events: none;
  z-index: 3;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  background: no-repeat center center;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAGrElEQVR4nO2dTWwVVRTHf0BbKuIHYEyMrS0gVBMNQmKiEYOUB2GDrvzChTvjZ8SoMTHGNH4QE1YmxmhEkQ9duDJq4kIIUSSoCxUFpSyw6LK0FEoLLfTVxZnG+jrvvXtn7r1n3nvzS/5pF32d/z13Zu7MveeeBzk5OTk5OcmYpW3AgFagK9Jy4GZgCXB5pAXRT4AR4HT08xxwAjgG9ALHo9/HAnq3Josd0gSsAAqRViOd4oJLwGFgb6QDZLyDtJgNrAN2AmeByUA6A+wA1kYeGp52YCvwN+E6oZxOAm8CbV5bnFEWA28D59HviFKNA7uQ8aruWQx8gtzLtQNfTReB3UCHl0go0ww8CwyjH2hbjQI9wFznUVGigDx2agc2rf4Euh3HJihNyJk1gX4wXamIjH0tDuMUhHbgIPoB9KWfkPGwJtgIDKIfNN86Bax3FDNvPII8NmoHK5TGgIedRM4Dz1Bf44WpisALDuLnlNfQD4y2elJH0RFPoR+MrOi5lLFMzWYa8zZVTkXg0VQRTcFGGmsAN9UYCk9f7chjn3bjs6pBAs6BNVPfL32u9EMUKyvm2H4A2AY8kOBzjUYbMsWy1+dBCsjApX321YqKwD2JIm1ACzLjqd3IWlMvFlP3Nresl4H7Lf4+R1iEZMAcdPlPO6J/qn221apGgE7rqFfg00DGTwGPA/2BjhdSO62jXoalyPpyCNP90TGvBt4CLgQ6bghdAm60CXw5tgc0fark2MuAzwIe37feMwt5edqRqYBQhgfK+FgH/BbQhy+NAzdUCni1bL0nCLt+XC61dR+wCllzGQxnxznNwGNJPzyb8BmFpw18LUDGl5BXrkv1kTBttaBgdsjCXxfwlYJHF0r09r5TweiZBD4LwBEFr2n0oW0jWwibhT6ls7ZGI5qR1brTCp6TnnhWM8F3KxkdtjEZw0IkkS3Ue1Ma3RnXgHKDy1rbSDgi7QaiQSSH+Fbg6/R2vGKVlrofnbNmJHn7YikAR5XaUk3G6ySt6E1ZjJqatGAu8CJy39buhOk6j+G0/Aplk75YhIwvWdqbckupybgxpCtdu1PhcxPqADK+3A586/E4NsyIdVyH3BTASDlC7Ar+BXkxuxfZNq3JjFg30hVSypfInvctJH//SYtRrDVTfC6mbmIyrkO2R4fOwjxgYu73wKam65KJQY+sAr4jXHsPm5jqC2ioVBNGYfPPJuAv/LfXaAwbCGCknIqGAQvBZcBL+J3T68cA7XWGrNGG7K330dYLpQfL63tU51qUiwdo3rImyU6FohBv9ka3LM1BfRL9q7YJeaMfwn9bZwzqTTGG0q5JpEXzCulGrooZc0yemBHruLMxyTKqSzSukKXA50h2S6jOgJgZgrjG9wUwkhXmIbtnjwD3KRzf6JbVG8BIJULdsjYB71Alcc0zM2Idd4XUe4esROaQvkC3M8Aw1poLVJO4K3hZylQCRKYXqOJoRbf03jwTkxZMFU/LWorQKBY7q7SSHFx3SDfZTdL+Js5wuUfM/Ula7wgXY0g7UshyH5ISlEWsYrwavTNnfuIm/vcYm8Vqp6W6w6Zhzeikkk4CV9oYjZiF1K36R8mzrYaIf+WoyMdKZm07ZCVhV/lcaLtlGwHZtaRh9ipDf1l8jDXVGsM2/g+NDTuTyIbPSjQhu5BqdaduxQ07lSbyisCeKsHxQaWnrHXAr8D7wDVh7DhnNymWqtsIv6S7sIyPXYF9+NAF4PqqUa/CB4FNL5p27Fp6jDXRu8ZRr8ASwm6AmeqQUKk4oTSOw+LLewIaX48kQ2sH0LV2WEe9Ap3IZpoQxuuxHtcwMp1TFdPyTEPI00+IbwfIStaJS17Bwxa7FuAP9M+2WtNREtReNKWb+ryl+NIECd/KbdiWgYbWirYmjLEVTcD3Co2rNR3C462qlLyQcmUNoJAPvIG81HicxpA5NxUeIi/GP10TwIOpIuqAJ9EPRFa0JWUsndGDfjC09WrqKDrmaRrz9lUEnncQPy9sprEG+jFkHM00G2iMR+J+FJ+mbGmnvl8ef8Rx6fAQ1PNXrwZ7A/fBWurjay6OEmCiMBS1/PXdI9TZ13dPpwPJHqmFIpXjSPam0UpfrdOJ3IuzmE0yhpw0y7y1PsO0AW8AJ9HviD7gdRzkTdUDs5Eqbx8RtljlEFJleg0ZWcvPhIkS5gC3ISVeC8BdSGUeF5wHfkbekfYiWfPjjv63E7LYIaW0ILUJlyMl8bqQ5L35wBVIcvbUJp9zyFk/HP1+AjgGHEd2vPaSsQ7IycnJyclxxb/PwFq4dLAGywAAAABJRU5ErkJggg==");
  background-size: cover;
}

.faux-video:after {
  content: '';
  pointer-events: none;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  border-radius: 50%;
  background: white;
}

.faux-video img {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.faux-video iframe {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.faux-video.iframe-loaded img, .faux-video.iframe-loaded:before, .faux-video.iframe-loaded:after {
  display: none;
}