.caption-list__list-item, .link-list, .flyout__list, .footer-nav__list, .tabbable-dl, .price-table__list, .tooltip__list, .legal__list, .tag-list__list, .flyout, .main-nav__flyout, .main-nav__list, .sys-nav__list, .sys-nav__item, .social-nav__list, .auto-complete__dropdown, .auto-complete__list, .auto-complete__list-item, .auto-complete___label, .tabs__list, .pager__list, .sub-nav__list, .colors .colors__list, .reseller-list, .material-list, dl, dt, dd {
    border: 0;
    padding: 0;
    margin: 0;
}

.caption-list__list-item, .link-list, .flyout__list, .footer-nav__list, .tabbable-dl, .price-table__list, .tooltip__list, .legal__list, .tag-list__list, .flyout, .main-nav__flyout, .main-nav__list, .sys-nav__list, .sys-nav__item, .social-nav__list, .auto-complete__dropdown, .auto-complete__list, .auto-complete__list-item, .auto-complete___label, .tabs__list, .pager__list, .sub-nav__list, .colors .colors__list, .reseller-list, .material-list {
    list-style: none;
}

.list__item, .hero--text .content--rich ul li, .link-list__item, .flyout__list-item, .footer-nav__item, .tooltip__list-item, .legal__item, .tag-list__item, .flyout__section, .social-nav__item, .pager__page, .pager__active-page, .colors .colors__list-item {
    margin: 0 0 6px 0;
    padding: 0;
}

    .block > :last-child, .card > :last-child, .card__content > :last-child, .tooltip > :last-child, .tooltip__list > :last-child, .flyout__section > :last-child, .flyout__list-item > :last-child, .notification--small .notification__content > :last-child, .notification--small .preferences-bar__content > :last-child, .notification__content > :last-child, .preferences-bar__content > :last-child, .reseller-card__description > :last-child, .materials-card > :last-child, .hero--basic > :last-child, .hero--products > :last-child, .hero--products-application > :last-child, .hero--basic .hero__description > :last-child, .hero--products .hero__description > :last-child, .hero--products-application .hero__description > :last-child, .hero--basic .hero__tab-panel > :last-child, .hero--products .hero__tab-panel > :last-child, .hero--products-application .hero__tab-panel > :last-child, .hero--basic .hero__link-list > :last-child, .hero--products .hero__link-list > :last-child, .hero--products-application .hero__link-list > :last-child, .hero--text .content--rich > :last-child, .hero--video > :last-child, .ubr > :last-child, .ubr .ubr__description > :last-child, .ubr .ubr__list > :last-child, .colors .colors__swatches > :last-child, .resellers > :last-child, .materials > :last-child {
        margin-bottom: 0;
    }

.hero--basic .hero__link--large,
.hero--products .hero__link--large,
.hero--products-application .hero__link--large, .examples .examples__link--large, .colors .colors__link--large {
    margin-bottom: 0;
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.hidden {
    display: none;
}

.ir,
.clear {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

h4,
h5, .link-list__headline, .flyout__title, .footer-nav__title, .notification__title,
h6,
.headline--quaternary,
.headline--quinary,
.headline--senary,
strong, .tablist__section .tablist__item, .examples .examples__tabs .tablist__item, .resellers__tooltip {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.fonts--stage-one h4,
.fonts--stage-one h5, .fonts--stage-one .link-list__headline, .fonts--stage-one .flyout__title, .fonts--stage-one .footer-nav__title, .fonts--stage-one .notification__title,
.fonts--stage-one h6,
.fonts--stage-one .headline--quaternary,
.fonts--stage-one .headline--quinary,
.fonts--stage-one .headline--senary,
.fonts--stage-one strong, .fonts--stage-one .tablist__section .tablist__item, .tablist__section .fonts--stage-one .tablist__item, .fonts--stage-one .examples .examples__tabs .tablist__item, .examples .examples__tabs .fonts--stage-one .tablist__item, .fonts--stage-one .resellers__tooltip {
    font-family: "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.fonts--stage-two h4,
.fonts--stage-two h5, .fonts--stage-two .link-list__headline, .fonts--stage-two .flyout__title, .fonts--stage-two .footer-nav__title, .fonts--stage-two .notification__title,
.fonts--stage-two h6,
.fonts--stage-two .headline--quaternary,
.fonts--stage-two .headline--quinary,
.fonts--stage-two .headline--senary,
.fonts--stage-two strong, .fonts--stage-two .tablist__section .tablist__item, .tablist__section .fonts--stage-two .tablist__item, .fonts--stage-two .examples .examples__tabs .tablist__item, .examples .examples__tabs .fonts--stage-two .tablist__item, .fonts--stage-two .resellers__tooltip {
    font-family: "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

button, .button, input[type="button"], input[type="submit"], h1,
h2,
h3, q, .hero--basic .hero__subtitle, .hero--products-application .hero__subtitle, .icon-button--underline-large, .link--large, .currency, .main-nav__link, .search__input {
    font-family: "Microsoft YaHei",Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.fonts--stage-one button, .fonts--stage-one .button, .fonts--stage-one input[type="button"], .fonts--stage-one input[type="submit"], .fonts--stage-one h1,
.fonts--stage-one h2,
.fonts--stage-one h3, .fonts--stage-one q, .fonts--stage-one .hero--basic .hero__subtitle, .hero--basic .fonts--stage-one .hero__subtitle, .fonts--stage-one .hero--products-application .hero__subtitle, .hero--products-application .fonts--stage-one .hero__subtitle, .fonts--stage-one .icon-button--underline-large, .fonts--stage-one .link--large, .fonts--stage-one .currency, .fonts--stage-one .main-nav__link, .fonts--stage-one .search__input {
    font-family: "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.fonts--stage-two button, .fonts--stage-two .button, .fonts--stage-two input[type="button"], .fonts--stage-two input[type="submit"], .fonts--stage-two h1,
.fonts--stage-two h2,
.fonts--stage-two h3, .fonts--stage-two q, .fonts--stage-two .hero--basic .hero__subtitle, .hero--basic .fonts--stage-two .hero__subtitle, .fonts--stage-two .hero--products-application .hero__subtitle, .hero--products-application .fonts--stage-two .hero__subtitle, .fonts--stage-two .icon-button--underline-large, .fonts--stage-two .link--large, .fonts--stage-two .currency, .fonts--stage-two .main-nav__link, .fonts--stage-two .search__input {
    font-family: "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* Picked an accessible color from colorsafe.co to try out some time */
button:focus, .button:focus, input[type="button"]:focus, input[type="submit"]:focus, a:not(.hit-area):focus:not(:hover), a:not(.hit-area):focus:not(:active), .nav-assist:focus:not(:hover),
.nav-assist--close:focus:not(:hover), .price-table--tabs .price-table__item:focus:not(:hover), .price-table--tabs .price-table__item:focus:not(:active), .price-table--tabs .tablist__section .tablist__item:focus:not(:active), .tablist__section .price-table--tabs .tablist__item:focus:not(:active), .price-table--tabs .examples .examples__tabs .tablist__item:focus:not(:active), .examples .examples__tabs .price-table--tabs .tablist__item:focus:not(:active), .auto-complete__list-item:focus:not(:hover), .auto-complete__list-item:focus:not(:active), .tablist__section .tablist__item:focus:not(:hover), .examples .examples__tabs .tablist__item:focus:not(:hover), .reseller-card:focus, .reseller-card:hover:focus, .reseller-card:focus:active, .materials-card:focus .materials-card__content, .materials-card:hover:focus .materials-card__content, .materials-card:focus:active .materials-card__content {
    color: #FFFFFF;
    background-color: #24bcf3;
}

p a:focus:not(:hover), strong a:focus:not(:hover), .tablist__section .tablist__item a:focus:not(:hover), .examples .examples__tabs .tablist__item a:focus:not(:hover), p a:focus:not(:active), strong a:focus:not(:active), .tablist__section .tablist__item a:focus:not(:active), .examples .examples__tabs .tablist__item a:focus:not(:active),
small a:focus:not(:hover),
h6 a:focus:not(:hover),
.caption-list__headline a:focus:not(:hover),
.caption-list__list-item a:focus:not(:hover),
.link.link--small a:focus:not(:hover),
.link--small.toggle a:focus:not(:hover),
.toggle.legal__link a:focus:not(:hover),
.link.legal__link a:focus:not(:hover),
.price-table__tagline a:focus:not(:hover),
.price-table__disclaimer a:focus:not(:hover),
.tooltip__list-item.tooltip__label a:focus:not(:hover),
.tag a:focus:not(:hover),
.settings-selector__label a:focus:not(:hover),
.auto-complete__label a:focus:not(:hover),
.tablist__section .tablist a:focus:not(:hover),
.examples .examples__tabs .tablist a:focus:not(:hover),
.tablist__section .tablist__headline a:focus:not(:hover),
.examples .examples__tabs .tablist__headline a:focus:not(:hover),
.hero--products-application .usp--icon .usp__label a:focus:not(:hover),
.sub-nav__label a:focus:not(:hover),
small a:focus:not(:active),
h6 a:focus:not(:active),
.caption-list__headline a:focus:not(:active),
.caption-list__list-item a:focus:not(:active),
.link.link--small a:focus:not(:active),
.link--small.toggle a:focus:not(:active),
.toggle.legal__link a:focus:not(:active),
.link.legal__link a:focus:not(:active),
.price-table__tagline a:focus:not(:active),
.price-table__disclaimer a:focus:not(:active),
.tooltip__list-item.tooltip__label a:focus:not(:active),
.tag a:focus:not(:active),
.settings-selector__label a:focus:not(:active),
.auto-complete__label a:focus:not(:active),
.tablist__section .tablist a:focus:not(:active),
.examples .examples__tabs .tablist a:focus:not(:active),
.tablist__section .tablist__headline a:focus:not(:active),
.examples .examples__tabs .tablist__headline a:focus:not(:active),
.hero--products-application .usp--icon .usp__label a:focus:not(:active),
.sub-nav__label a:focus:not(:active),
.content--rich li a:focus:not(:hover),
.content--rich li a:focus:not(:active), .link:focus:not(:hover), .toggle:focus:not(:hover), .link:focus:not(:active), .toggle:focus:not(:active), .home-link:focus:not(:hover), .home-link:focus:not(:active), input[type="text"]:focus:not(:hover), input[type="text"]:focus:not(:active), .branded-logo:focus, .main-nav__link:focus:not(:hover), .main-nav__link:focus:not(:active), .search__input:focus, .tabs__list_link:focus:not(:hover), .tabs__list_link:focus:not(:active), .sub-nav__link:focus:not(:hover), .sub-nav__link:focus:not(:active) {
    outline: 2px solid #24bcf3;
}

.color--selected, .auto-complete__dropdown {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);
}

/******************************************************************************

REMARK: Do not to output any CSS in the first 2 layers  (TOOLS/SETTINGS). This
        will destroy the specificity concept from ITCSS.

******************************************************************************/
/*! normalize.css v7.0.0 | 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
 *    IE on Windows Phone and in iOS.
 */
html {
    line-height: 1.15;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}


/**
 * 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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
    /* 1 */
    display: block;
}



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

/**
 * 1. Remove the bottom border in Chrome 57- and 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,
.tablist__section .tablist__item,
.examples .examples__tabs .tablist__item {
    font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong,
.tablist__section .tablist__item,
.examples .examples__tabs .tablist__item {
    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 style in Android 4.3-.
 */
dfn {
    font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
    background-color: #ff0;
    color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small,
h6, .caption-list__headline, .caption-list__list-item, .link.link--small, .link--small.toggle, .toggle.legal__link, .link.legal__link, .price-table__tagline,
.price-table__disclaimer, .tooltip__list-item.tooltip__label, .tag, .settings-selector__label, .auto-complete__label, .tablist__section .tablist, .examples .examples__tabs .tablist, .tablist__section .tablist__headline, .examples .examples__tabs .tablist__headline, .hero--products-application .usp--icon .usp__label, .sub-nav__label {
    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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
    display: inline-block;
}

    /**
 * Add the correct display in iOS 4-7.
 */
    audio:not([controls]) {
        display: none;
        height: 0;
    }

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
    border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
    overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif;
    /* 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;
}

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

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

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    display: inline-block;
    /* 1 */
    vertical-align: baseline;
    /* 2 */
}

/**
 * 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 macOS.
 */
    [type="search"]::-webkit-search-cancel-button,
    [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 IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
    display: block;
}

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

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
    display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
    display: none;
}

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

.content-container {
    will-change: transform;
}
html {
    box-sizing: border-box;
}

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

@media (min-width: 320px) and (max-width: ) {
    .hidden--xxs {
        display: none;
    }
}

@media (min-width: 569px) and (max-width: 767px) {
    .hidden--xs {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hidden--sm {
        display: none;
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .hidden--md {
        display: none;
    }
}

@media (min-width: 1201px) and (max-width: ) {
    .hidden--lg {
        display: none;
    }
}

button, .button, input[type="button"], input[type="submit"] {
    position: relative;
    display: inline-block;
    user-select: none;
    appearance: none;
    outline: none;
    border: none;
    border-radius: 0;
    padding: 9px 30px;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
    background-color: #fb203a;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

* + button, * + .button, * + input[type="button"], * + input[type="submit"] {
    margin-right: 12px;
    margin-bottom: 12px;
}

button:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    color: #FFFFFF;
    background-color: #24bcf3;
    outline: 0;
}

@media (min-width: 768px) {
    button, .button, input[type="button"], input[type="submit"] {
        font-size: 16px;
        line-height: 24px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

.button--primary {
    padding-right: 5px;
}

    .button--primary:before {
        content: '';
        position: absolute;
        top: 0;
        right: -25px;
        border-style: solid;
        border-width: 0 25px 12px 0;
        border-color: transparent transparent #fb203a transparent;
        transition: border-color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .button--primary:after {
        content: '';
        position: absolute;
        top: 12px;
        right: -25px;
        bottom: 0;
        width: 25px;
        background-color: inherit;
    }

* + .button--primary {
    margin-right: 37px;
    margin-bottom: 36px;
}

@media (min-width: 768px) {
    .button--primary {
        margin-bottom: 48px;
    }
}

.button--primary:hover:before, .button--primary:focus:before {
    border-color: transparent transparent #24bcf3 transparent;
}

.button--secondary {
    background: transparent;
    border: 2px solid #fb203a;
    padding-top: 7px;
    padding-bottom: 7px;
    color: #fb203a;
}

@media (min-width: 768px) {
    .button--secondary {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.button--secondary:hover, .button--secondary:focus {
    border: 2px solid transparent;
}

.button--close {
    position: absolute;
    top: 0;
    right: 0;
}

.drawer {
    position: relative;
    z-index: 1010;
}

.faux-vertical-scroll {
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}

    .faux-vertical-scroll .faux-vertical-scroll__bar {
        position: absolute;
        z-index: 1;
        bottom: 0;
        content: '';
        display: block;
        height: 1px;
        background-color: #fb203a;
        transition: opacity 1s;
    }

.faux-vertical-scroll__content {
    transform: translateX(0);
}

html {
    line-height: 21px;
    font-weight: 400;
    font-family: "Microsoft YaHei",Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #000000;
    background: #FFFFFF;
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}



.copy--intro {
    font-size: 16px;
    line-height: 24px;
    margin-top: -5px;
    margin-bottom: 29px;
}

@media (min-width: 768px) {
    .copy--intro {
        font-size: 18px;
        line-height: 30px;
        margin-top: -8px;
        margin-bottom: 38px;
    }
}

p,
strong, .tablist__section .tablist__item, .examples .examples__tabs .tablist__item {
    margin-top: -2px;
    margin-bottom: 23px;
}

@media (min-width: 768px) {
    p,
    strong, .tablist__section .tablist__item, .examples .examples__tabs .tablist__item {
        margin-top: -5px;
        margin-bottom: 29px;
    }
}


strong,
.tablist__section .tablist__item,
.examples .examples__tabs .tablist__item {
    display: block;
}

    p strong, strong strong, .tablist__section .tablist__item strong, .examples .examples__tabs .tablist__item strong, p .tablist__section .tablist__item, .tablist__section p .tablist__item, strong .tablist__section .tablist__item, .tablist__section strong .tablist__item, .tablist__section .tablist__item .tablist__item, p .examples .examples__tabs .tablist__item, .examples .examples__tabs p .tablist__item, strong .examples .examples__tabs .tablist__item, .examples .examples__tabs strong .tablist__item, .examples .examples__tabs .tablist__item .tablist__item {
        display: inline;
    }

q {
    display: block;
    text-align: center;
    color: #7F7F7F;
}

.copy--small,
h5, .link-list__headline, .flyout__title, .footer-nav__title, .notification__title, .link, .toggle, [type="checkbox"] + label, .notification__copy, .auto-complete__list-item, .reseller-card__showroom-count {
    font-size: 14px;
    line-height: 21px;
    margin-top: -2px;
    margin-bottom: 23px;
}

    small,
    h6, .caption-list__headline, .caption-list__list-item, .link.link--small, .link--small.toggle, .toggle.legal__link, .link.legal__link, .price-table__tagline,
    .price-table__disclaimer, .tooltip__list-item.tooltip__label, .tag, .settings-selector__label, .auto-complete__label, .tablist__section .tablist, .examples .examples__tabs .tablist, .tablist__section .tablist__headline, .examples .examples__tabs .tablist__headline, .hero--products-application .usp--icon .usp__label, .sub-nav__label {
        font-size: 12px;
        line-height: 18px;
        display: block;
        font-weight: 500;
        color: inherit;
    }

@media (min-width: 768px) {
    small,
    h6, .caption-list__headline, .caption-list__list-item, .link.link--small, .link--small.toggle, .toggle.legal__link, .link.legal__link, .price-table__tagline,
    .price-table__disclaimer, .tooltip__list-item.tooltip__label, .tag, .settings-selector__label, .auto-complete__label, .tablist__section .tablist, .examples .examples__tabs .tablist, .tablist__section .tablist__headline, .examples .examples__tabs .tablist__headline, .hero--products-application .usp--icon .usp__label, .sub-nav__label {
        font-size: 12px;
        line-height: 18px;
    }
}

h1,
h2,
h3,
q,
.hero--basic .hero__subtitle,
.hero--products-application .hero__subtitle {
    font-weight: 400;
}

h1,
.headline--primary {
    font-size: 20px;
    line-height: 26px;
    margin-top: -5px;
    margin-bottom: 59px;
}

@media (min-width: 768px) {
    h1,
    .headline--primary {
        font-size: 48px;
        line-height: 40px;
        margin-top: -4px;
        margin-bottom: 64px;
    }
}
@media (max-width: 768px) {
    h1,
    .headline--primary {
        font-size: 35px;
        line-height: 40px;
        margin-top: -4px;
        margin-bottom: 64px;
    }
}

h2,
h2,
.headline--secondary {
    font-size: 24px;
    line-height: 30px;
    margin-top: 1px;
    margin-bottom: 53px;
}

@media (min-width: 768px) {
    h2,
    .headline--secondary {
        font-size: 30px;
        line-height: 36px;
        margin-top: -5px;
        margin-bottom: 59px;
    }
}


h3,
q,
.hero--basic .hero__subtitle,
.hero--products-application .hero__subtitle,
.headline--tertiary {
    font-size: 18px;
    line-height: 24px;
    margin-top: 6px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {

    h3,
    q,
    .hero--basic .hero__subtitle,
    .hero--products-application .hero__subtitle,
    .headline--tertiary {
        font-size: 20px;
        line-height: 24px;
        margin-top: 5px;
        margin-bottom: 31px;
    }
}

h4,
h5,
.link-list__headline,
.flyout__title,
.footer-nav__title,
.notification__title,
h6,
.headline--quaternary,
.headline--quinary,
.headline--senary,
strong,
.tablist__section .tablist__item,
.examples .examples__tabs .tablist__item {
    font-weight: 600;
}

h4,
strong,
.tablist__section .tablist__item,
.examples .examples__tabs .tablist__item {
    font-size: 14px;
    line-height: 21px;
    margin-top: -2px;
    margin-bottom: 2px;
}

@media (min-width: 768px) {
    h4,
    strong,
    .tablist__section .tablist__item,
    .examples .examples__tabs .tablist__item {
        font-size: 16px;
        line-height: 24px;
        margin-top: 0px;
        margin-bottom: 5px;
    }
}


h5,
.link-list__headline,
.flyout__title,
.footer-nav__title,
.notification__title {
    margin-top: -2px;
    margin-bottom: 5px;
}

h6 {
    margin-top: 0;
    margin-bottom: 0;
}

.icon {
    width: 1em;
    height: 1em;
}

/* ------------------ Animations ------------------ */
@keyframes arrowLineAnimate {
    0% {
        transform: translate(0, 0) scaleX(0);
    }

    12.5% {
        transform: translate(0, 0) scaleX(1.075);
    }

    37.5% {
        transform: translate(0, 0) scaleX(1.075);
    }

    50% {
        transform: translate(-100%, 0) scaleX(1.075);
    }

    50.1% {
        transform: translate(0, 0) scaleX(0);
    }
}

@keyframes arrowLineAnimateRotated-2 {
    10% {
        transform: rotate(45deg) scaleX(0) translate(-5.65px, -5.15px);
    }

    15% {
        transform: rotate(45deg) scaleX(0.425) translate(-5.65px, -5.15px);
    }

    45% {
        transform: rotate(45deg) scaleX(0.425) translate(-5.65px, -5.15px);
    }

    60% {
        transform: rotate(45deg) scaleX(0) translate(-5.65px, -5.15px);
    }
}

@keyframes arrowLineAnimateRotated-3 {
    10% {
        transform: rotate(-45deg) scaleX(0) translate(-5px, 4.75px);
    }

    15% {
        transform: rotate(-45deg) scaleX(0.425) translate(-5px, 4.75px);
    }

    45% {
        transform: rotate(-45deg) scaleX(0.425) translate(-5px, 4.75px);
    }

    60% {
        transform: rotate(-45deg) scaleX(0) translate(-5px, 4.75px);
    }
}

/* ------------------ Presentation ------------------ */
.arrow__mask {
    transform-origin: center center;
    transform: scale(2) translateX(3.35px) rotate(45deg);
}

.arrow__line-1 {
    transform: scaleX(0);
    transform-origin: 110px 0%;
    animation: arrowLineAnimate 1.2s ease-in-out infinite;
}

.arrow__line-2 {
    transform: scaleX(0);
    transform-origin: 10px 50%;
    animation: arrowLineAnimateRotated-2 1.2s ease-in-out infinite;
}

.arrow__line-3 {
    transform: scaleX(0);
    transform-origin: 10px 50%;
    animation: arrowLineAnimateRotated-3 1.2s ease-in-out infinite;
}

.icon-button, .sys-nav__link, .search__button, .um-components .search__button {
    transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    font-size: 14px;
    line-height: 21px;
    display: inline-flex;
    justify-content: flex-end;
    padding: 12px;
    height: 48px;
    color: #000000;
    background-color: #FFFFFF;
    cursor: pointer;
}

    .icon-button:hover, .sys-nav__link:hover, .search__button:hover {
        color: #000000;
        background-color: #EAEAEA;
    }

.icon-button--light, .modal__close, .icon-button--light:hover, .modal__close:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

.icon-button__icon, .sys-nav__icon, .social-nav__icon {
    font-size: 24px;
}

.icon-button__label, .sys-nav__label {
    margin: 4px 6px 0 12px;
    white-space: nowrap;
    user-select: none;
}

.icon-button--small, .sys-nav__link, .search__button, .um-components .search__button, .social-nav__link {
    padding: 6px;
    height: 36px;
}

.icon-button--large {
    padding: 18px;
    width: 60px;
    height: 60px;
}

.icon-button--round {
    border-radius: 50% 50%;
    height: 48px;
    width: 48px;
}

.icon-button--drop-shadow {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

.icon-button--reversed {
    display: inline-flex;
    flex-direction: row-reverse;
}

    .icon-button--reversed .icon-button__label, .icon-button--reversed .sys-nav__label {
        margin-left: 6px;
        margin-right: 12px;
    }

    .icon-button--reversed .icon-button__icon, .icon-button--reversed .sys-nav__icon, .icon-button--reversed .social-nav__icon {
        margin-left: auto;
    }

.icon-button--underline-large {
    font-size: 18px;
    line-height: 24px;
    margin-top: 6px;
    margin-bottom: 24px;
    display: inline;
    position: relative;
    padding-left: 40px;
    color: #000000;
}

@media (min-width: 768px) {
    .icon-button--underline-large {
        font-size: 20px;
        line-height: 24px;
        margin-top: 5px;
        margin-bottom: 31px;
    }
}

.icon-button--underline-large, .icon-button--underline-large:hover {
    background-color: transparent;
}

    .icon-button--underline-large .icon-button__icon, .icon-button--underline-large .sys-nav__icon, .icon-button--underline-large .social-nav__icon {
        position: absolute;
        top: 12px;
        left: 8px;
        font-size: 24px;
    }

    .icon-button--underline-large .icon-button__label, .icon-button--underline-large .sys-nav__label {
        transition: background-size 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        margin: 0;
        width: calc(100% - 0.1px);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-image: linear-gradient(transparent calc(100% - 2px), currentColor 10px);
    }

    .icon-button--underline-large:hover .icon-button__label, .icon-button--underline-large:hover .sys-nav__label, .icon-button--underline-large:active .icon-button__label, .icon-button--underline-large:active .sys-nav__label, .icon-button--underline-large:visited .icon-button__label, .icon-button--underline-large:visited .sys-nav__label {
        background-size: 0 100%;
    }

ul, .hero--text .content--rich ul,
.list {
    font-size: 14px;
    line-height: 21px;
    margin-top: -2px;
    margin-bottom: 23px;
    padding-left: 1em;
}

@media (min-width: 768px) {
    ul, .hero--text .content--rich ul,
    .list {
        font-size: 16px;
        line-height: 24px;
        margin-top: -5px;
        margin-bottom: 29px;
    }
}

.list__item, .hero--text .content--rich ul li {
    padding-left: 10px;
}

@media (min-width: 768px) {
    .list__item, .hero--text .content--rich ul li {
        padding-left: 8px;
    }
}

.caption-list {
    display: inline-block;
    padding-left: 0;
    margin-bottom: 0;
}

.caption-list__headline {
    display: inline;
}

    .caption-list__headline:after {
        content: ' ';
        white-space: pre;
    }

.caption-list__list-item {
    display: inline;
}

    .caption-list__list-item:after {
        content: ",";
    }

    .caption-list__list-item:last-child:before {
        content: " and";
    }

    .caption-list__list-item:last-child:after {
        content: ".";
    }

dt {
    margin-bottom: 6px;
}

dd {
    margin-bottom: 12px;
}

    dd:last-of-type {
        margin-bottom: 0;
    }

a {
    font-size: inherit;
    color: #fb203a;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

    a:hover {
        color: #4bc8f5;
    }

p a, strong a, .tablist__section .tablist__item a, .examples .examples__tabs .tablist__item a,
small a,
h6 a,
.caption-list__headline a,
.caption-list__list-item a,
.link.link--small a,
.link--small.toggle a,
.toggle.legal__link a,
.link.legal__link a,
.price-table__tagline a,
.price-table__disclaimer a,
.tooltip__list-item.tooltip__label a,
.tag a,
.settings-selector__label a,
.auto-complete__label a,
.tablist__section .tablist a,
.examples .examples__tabs .tablist a,
.tablist__section .tablist__headline a,
.examples .examples__tabs .tablist__headline a,
.hero--products-application .usp--icon .usp__label a,
.sub-nav__label a,
.content--rich li a {
    font-weight: 400;
}

.link, .toggle {
    display: inline-block;
    margin-right: 12px;
    vertical-align: top;
    user-select: none;
    cursor: pointer;
    color: #000000;
}

    .link:hover, .toggle:hover, .link:active, .toggle:active, .link:visited, .toggle:visited {
        color: #000000;
    }

.link--large {
    display: inline-block;
    font-size: 18px;
    line-height: 24px;
    margin-top: 6px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .link--large {
        font-size: 20px;
        line-height: 24px;
        margin-top: 5px;
        margin-bottom: 31px;
    }
}

:not(.link--large) + .link--large {
    display: table;
    transform: translateY(-6px);
}

.button + .link--large,
.button--primary + .link--large {
    display: inline;
}

@media (max-width: 568px) {
    .button + .link--large,
    .button--primary + .link--large {
        display: table;
    }
}

.link .link__underline, .toggle .link__underline,
.link--large .link__underline {
    width: calc(100% - 0.1px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    transition: background-size 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.link--reversed .link__underline, .legal__link .link__underline, .flyout__link .link__underline, .footer-nav__link .link__underline {
    background-size: 0% 100%;
}

.link .link__underline, .toggle .link__underline {
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 10px);
}

.link--large .link__underline {
    background-image: linear-gradient(transparent calc(100% - 2px), currentColor 10px);
}

.link:hover .link__underline, .toggle:hover .link__underline,
.link:active .link__underline,
.toggle:active .link__underline,
.link:visited .link__underline,
.toggle:visited .link__underline {
    background-size: 0% 100%;
}

.link--reversed:hover .link__underline, .legal__link:hover .link__underline, .flyout__link:hover .link__underline, .footer-nav__link:hover .link__underline,
.link--reversed:active .link__underline,
.legal__link:active .link__underline,
.flyout__link:active .link__underline,
.footer-nav__link:active .link__underline,
.link--reversed:visited .link__underline,
.legal__link:visited .link__underline,
.flyout__link:visited .link__underline,
.footer-nav__link:visited .link__underline {
    background-size: 100% 100%;
}

.link:focus .link__underline, .toggle:focus .link__underline,
.link--reversed:focus .link__underline,
.legal__link:focus .link__underline,
.flyout__link:focus .link__underline,
.footer-nav__link:focus .link__underline {
    background-size: 0% 0%;
}

.link-list, .flyout__list, .footer-nav__list {
    margin-top: -2px;
    margin-bottom: 23px;
    word-wrap: break-word;
    hyphens: auto;
}

@media (min-width: 1025px) {
    .link-list--2-columns, .main-nav--large .flyout__section--2-columns > .flyout__list {
        column-count: 2;
        column-gap: 24px;
    }
}

@media (min-width: 1025px) and (min-width: 768px) {
    .link-list--2-columns, .main-nav--large .flyout__section--2-columns > .flyout__list {
        column-gap: 48px;
    }
}

@media (min-width: 1025px) {
    .link-list--2-columns > li, .main-nav--large .flyout__section--2-columns > .flyout__list > li {
        transform: translate3d(0, 2px, 0);
    }
}

@media (min-width: 1025px) {
    .link-list--3-columns, .main-nav--large .flyout__section--3-columns > .flyout__list {
        column-count: 3;
        column-gap: 24px;
    }
}

@media (min-width: 1025px) and (min-width: 768px) {
    .link-list--3-columns, .main-nav--large .flyout__section--3-columns > .flyout__list {
        column-gap: 48px;
    }
}

@media (min-width: 1025px) {
    .link-list--3-columns > li, .main-nav--large .flyout__section--3-columns > .flyout__list > li {
        transform: translate3d(0, 2px, 0);
    }
}

.link-list__headline, .flyout__title, .footer-nav__title {
    margin-bottom: 8px;
}

.link-list__item, .flyout__list-item, .footer-nav__item {
    font-size: 14px;
    line-height: 21px;
    position: relative;
    transform: translateY(2px);
}

    .link-list__item > *, .flyout__list-item > *, .footer-nav__item > *, .link-list__item:last-child, .flyout__list-item:last-child, .footer-nav__item:last-child {
        margin-bottom: 0;
    }

.link--icon, .toggle--icon,
.link--icon .link--reversed,
.toggle--icon .link--reversed,
.link--icon .legal__link,
.toggle--icon .legal__link,
.link--icon .flyout__link,
.toggle--icon .flyout__link,
.link--icon .footer-nav__link,
.toggle--icon .footer-nav__link {
    padding-left: 23.99999px;
    display: inline-block;
}

    .link--icon .icon, .toggle--icon .icon,
    .link--icon .link--reversed .icon,
    .toggle--icon .link--reversed .icon,
    .link--icon .legal__link .icon,
    .toggle--icon .legal__link .icon,
    .link--icon .flyout__link .icon,
    .toggle--icon .flyout__link .icon,
    .link--icon .footer-nav__link .icon,
    .toggle--icon .footer-nav__link .icon {
        font-size: 18px;
        position: absolute;
        transform: translateX(-24px);
    }

    .link--icon.link--large, .link--large.toggle--icon,
    .link--icon .link--reversed.link--large,
    .toggle--icon .link--reversed.link--large,
    .link--icon .link--large.legal__link,
    .toggle--icon .link--large.legal__link,
    .link--icon .link--large.flyout__link,
    .toggle--icon .link--large.flyout__link,
    .link--icon .link--large.footer-nav__link,
    .toggle--icon .link--large.footer-nav__link {
        padding-left: 31.99999px;
    }

        .link--icon.link--large .icon, .link--large.toggle--icon .icon,
        .link--icon .link--reversed.link--large .icon,
        .toggle--icon .link--reversed.link--large .icon,
        .link--icon .link--large.legal__link .icon,
        .toggle--icon .link--large.legal__link .icon,
        .link--icon .link--large.flyout__link .icon,
        .toggle--icon .link--large.flyout__link .icon,
        .link--icon .link--large.footer-nav__link .icon,
        .toggle--icon .link--large.footer-nav__link .icon {
            font-size: 24px;
            transform: translateX(-33px);
        }

.link-list .list--icon, .flyout__list .list--icon, .footer-nav__list .list--icon {
    margin-bottom: 0;
}

.tabbable-dl {
    overflow: hidden;
    position: relative;
}

.tabbable-dl__term {
    position: relative;
    display: table;
    cursor: pointer;
    outline: none;
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    margin-top: 6px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .tabbable-dl__term {
        font-size: 20px;
        line-height: 24px;
        margin-top: 5px;
        margin-bottom: 31px;
    }
}

@media (max-width: 568px) {
    .tabbable-dl__term--vue {
        position: absolute;
        top: 0;
    }
}

.tabbable-dl__title {
    margin: 0;
}

.tabbable-dl__icon {
    transform: translateY(3px);
}

.tabbable-dl__link {
    display: block;
    color: #000000;
}

    .tabbable-dl__link:hover {
        color: inherit;
    }

@media (min-width: 768px) {
    .tabbable-dl__link:hover {
        color: #939393;
    }
}

@media (max-width: 568px) {
    .tabbable-dl__link {
        cursor: default;
    }
}

.tabbable-dl__desc {
    margin-top: -2px;
    margin-bottom: 23px;
    position: relative;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .tabbable-dl__desc {
        margin-top: -5px;
        margin-bottom: 29px;
    }
}

@media (max-width: 568px) {
    .tabbable-dl__desc--vue {
        position: absolute;
        top: 48px;
    }
}

.toggle {
    color: #fb203a;
    font-weight: 400;
}

    .toggle:hover {
        color: #fb203a;
    }

.img--contain {
    object-fit: cover;
    font-family: "object-fit: cover";
    width: 100%;
    height: 100%;
}

.img--responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.img--lazy {
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

    .img--lazy.img--loading {
        opacity: 0;
    }

.cms-image {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
}

.cms-image__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.home-link {
    display: flex;
    flex: 0 1 auto;
    z-index: 1;
    align-items: stretch;
    margin: 0 12px 4px 0;
    color: currentColor;
}

    .home-link:hover {
        color: currentColor;
    }

.home-link__logo {
    height: 18px;
    width: 120px;
}

@media (min-width: 1201px) {
    .home-link__logo {
        height: 24px;
        width: 162px;
    }
}

@keyframes lineAnimate {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@keyframes lineAnimateReverse {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes xLineAnimate-4 {
    from {
        transform: rotate(-45deg) scaleX(1);
    }

    to {
        transform: rotate(-45deg) scaleX(0);
    }
}

@keyframes xLineAnimateReverse-4 {
    from {
        transform: rotate(-45deg) scaleX(0);
    }

    to {
        transform: rotate(-45deg) scaleX(1);
    }
}

@keyframes xLineAnimate-5 {
    from {
        transform: rotate(-45deg) scaleY(1);
    }

    to {
        transform: rotate(-45deg) scaleY(0);
    }
}

@keyframes xLineAnimateReverse-5 {
    from {
        transform: rotate(-45deg) scaleY(0);
    }

    to {
        transform: rotate(-45deg) scaleY(1);
    }
}

.nav-assist {
    width: 60px;
    height: 60px;
    padding: 18px;
    margin: 0;
    border-radius: 0;
    cursor: pointer;
    background-color: #000000;
    transition: background 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

    .nav-assist:hover {
        background-color: #3d3d3d;
    }

.nav-assist__line {
    fill: white;
    transform-origin: 50% 50%;
    transition: fill 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    /* Animate Menu icon to visible position */
    /* Animate 'X' icon to hidden position */
}

.nav-assist__line-1 {
    transform: scaleX(0);
    animation: lineAnimateReverse 0.3s 0.1s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
}

.nav-assist__line-2 {
    transform: scaleX(0);
    animation: lineAnimateReverse 0.3s 0.15s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
}

.nav-assist__line-3 {
    transform: scaleX(0);
    animation: lineAnimateReverse 0.3s 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
}

.nav-assist__line-4 {
    transform: rotate(-45deg) scaleX(1);
    animation: xLineAnimate-4 0.3s 0s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
}

.nav-assist__line-5 {
    transform: rotate(-45deg) scaleY(1);
    animation: xLineAnimate-5 0.3s 0.05s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
}

/* Hide X icon while initializing */
.nav-assist--initial-state .nav-assist__line-4,
.nav-assist--initial-state .nav-assist__line-5 {
    display: none;
}

.nav-assist--close {
    background-color: white;
    transition: background 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

    .nav-assist--close:hover {
        background-color: #ebebeb;
    }

    .nav-assist--close .nav-assist__line {
        fill: #000000;
        /* Animate Menu icon to hidden position */
        /* Animate 'X' icon to visible position */
    }

    .nav-assist--close .nav-assist__line-1 {
        transform: scaleX(1);
        animation: lineAnimate 0.3s 0s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
    }

    .nav-assist--close .nav-assist__line-2 {
        transform: scaleX(1);
        animation: lineAnimate 0.3s 0.05s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
    }

    .nav-assist--close .nav-assist__line-3 {
        transform: scaleX(1);
        animation: lineAnimate 0.3s 0.1s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
    }

    .nav-assist--close .nav-assist__line-4 {
        transform: rotate(45deg) scaleX(0);
        animation: xLineAnimateReverse-4 0.3s 0.15s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
    }

    .nav-assist--close .nav-assist__line-5 {
        transform: rotate(-45deg) scaleX(0);
        animation: xLineAnimateReverse-5 0.3s 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
    }

    .nav-assist:focus:not(:hover) .nav-assist__line,
    .nav-assist--close:focus:not(:hover) .nav-assist__line {
        fill: #FFFFFF;
    }

.show-assist-enter, .show-assist-leave-to {
    opacity: 0;
    transform: translateX(100%);
}

.show-assist-enter-active, .show-assist-leave-active {
    transition: transform 0.3s, opacity 0.3s;
}

input[type="text"] {
    position: relative;
    padding: 12.5px;
    border: 1px solid #E3E3E3;
    border-radius: 0;
    outline: 0;
    border: 1px solid #E3E3E3;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    input[type="text"]:not(.search__input) {
        background: #F5F5F5;
        font-size: 14px;
        line-height: 21px;
    }

.required:after {
    font-size: 14px;
    line-height: 21px;
    content: "*";
    position: absolute;
    left: 4px;
    top: 3px;
    color: #7F7F7F;
}

::placeholder {
    color: #7F7F7F;
}

[type="checkbox"] + label {
    display: inline-block;
    text-align: left;
    margin: 0 0 12px 0;
}

label + [type="checkbox"] {
    margin: 0 12px 12px 0;
}

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

    [type="checkbox"]:not(:checked) + label,
    [type="checkbox"]:checked + label {
        position: relative;
        padding-left: 30px;
        user-select: none;
        cursor: pointer;
    }

        /* checkbox aspect */
        [type="checkbox"]:not(:checked) + label:before,
        [type="checkbox"]:checked + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: -3px;
            width: 24px;
            height: 24px;
            border: 1px solid #E3E3E3;
            background: #FFFFFF;
        }

        /* checked mark aspect */
        [type="checkbox"]:not(:checked) + label:after,
        [type="checkbox"]:checked + label:after {
            content: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20120%20120%22%3E%3Cpolygon%20points=%22113%2029.1%20104.2%2020.2%2042.3%2082.1%2015.8%2055.6%207%2064.4%2033.5%2091%2033.5%2091%2042.3%2099.8%2042.3%2099.8%2042.3%2099.8%2051.1%2091%2051.1%2091%20%22%20fill=%22rgb(12,169,227)%22/%3E%3C/svg%3E");
            position: absolute;
            top: 0px;
            left: 3px;
            width: 18px;
            height: 18px;
        }

        /* checked mark aspect changes */
        [type="checkbox"]:not(:checked) + label:after {
            opacity: 0;
            transform: scale(0);
        }

        [type="checkbox"]:checked + label:after {
            opacity: 1;
            transform: scale(1);
        }

/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
    background-color: #F5F5F5;
}

[type="checkbox"]:disabled:checked + label:after {
    content: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20120%20120%22%3E%3Cpolygon%20points=%22113%2029.1%20104.2%2020.2%2042.3%2082.1%2015.8%2055.6%207%2064.4%2033.5%2091%2033.5%2091%2042.3%2099.8%2042.3%2099.8%2042.3%2099.8%2051.1%2091%2051.1%2091%20%22%20fill=%22rgb(178,178,178)%22/%3E%3C/svg%3E");
}

[type="checkbox"]:disabled + label {
    color: #7F7F7F;
    cursor: default;
}

/* accessibility */
[type="checkbox"]:checked:focus:not(:hover) + label:before,
[type="checkbox"]:not(:checked):focus:not(:hover) + label:before {
    border: 2px solid #fb203a;
}

table {
    margin-top: -2px;
    margin-bottom: 23px;
    height: auto;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid #000000;
}

@media (min-width: 768px) {
    table {
        margin-top: -5px;
        margin-bottom: 29px;
    }
}

table tbody tr,
table thead tr {
    border-bottom: 1px solid #000000;
}

    table tbody tr:last-child {
        border-bottom: none;
    }

table td,
table th {
    height: auto;
    width: 25%;
    padding: 12px;
    padding-top: 11px;
    vertical-align: top;
}

    table td small,
    table td h6, table td .caption-list__headline, table td .caption-list__list-item, table td .link.link--small, table td .link--small.toggle, table td .toggle.legal__link, table td .link.legal__link, table td .price-table__tagline,
    table td .price-table__disclaimer, table td .tooltip__list-item.tooltip__label, table td .tag, table td .settings-selector__label, table td .auto-complete__label, table td .tablist__section .tablist, .tablist__section table td .tablist, table td .examples .examples__tabs .tablist, .examples .examples__tabs table td .tablist, table td .tablist__section .tablist__headline, .tablist__section table td .tablist__headline, table td .examples .examples__tabs .tablist__headline, .examples .examples__tabs table td .tablist__headline, table td .hero--products-application .usp--icon .usp__label, .hero--products-application .usp--icon table td .usp__label, table td .sub-nav__label,
    table th small,
    table th h6,
    table th .caption-list__headline,
    table th .caption-list__list-item,
    table th .link.link--small,
    table th .link--small.toggle,
    table th .toggle.legal__link,
    table th .link.legal__link,
    table th .price-table__tagline,
    table th .price-table__disclaimer,
    table th .tooltip__list-item.tooltip__label,
    table th .tag,
    table th .settings-selector__label,
    table th .auto-complete__label,
    table th .tablist__section .tablist,
    .tablist__section table th .tablist,
    table th .examples .examples__tabs .tablist,
    .examples .examples__tabs table th .tablist,
    table th .tablist__section .tablist__headline,
    .tablist__section table th .tablist__headline,
    table th .examples .examples__tabs .tablist__headline,
    .examples .examples__tabs table th .tablist__headline,
    table th .hero--products-application .usp--icon .usp__label,
    .hero--products-application .usp--icon table th .usp__label,
    table th .sub-nav__label {
        display: block;
        color: #7F7F7F;
    }

table tfoot {
    font-size: 12px;
    line-height: 18px;
}

.youtube-video {
    position: relative;
}

    .youtube-video:before {
        content: '';
        display: block;
        padding-top: 56.25%;
    }

.youtube-video__frame {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.youtube-video--four-three:before {
    content: '';
    display: block;
    padding-top: 75%;
}

.youtube-video--eighteen-nine:before {
    content: '';
    display: block;
    padding-top: 50%;
}

.youtube-video--square:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.block {
    flex: 1;
    margin-bottom: 12px;
}

.modal {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    will-change: transform;
    z-index: 1000;
}

    .modal .modal__overlay {
        display: block;
        height: 100%;
        will-change: transform;
        transition: opacity cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.2s;
        opacity: 0.8;
        background-color: #000000;
    }

.modal__content {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    z-index: 1010;
    transform: translate(-50%, -50%) scaleY(1);
    box-sizing: border-box;
    padding: 20px 40px;
    max-width: 85vw;
    max-height: 75vh;
    background-color: #F5F5F5;
    overflow: hidden;
    overflow-y: auto;
}

.modal__close {
    position: absolute;
    z-index: 1020;
    top: 0px;
    right: 0px;
    background-color: transparent;
    color: #FFFFFF;
}

.modal--video .modal__content {
    width: 100%;
    max-width: 1200px;
    max-height: 100%;
    padding: 0;
}

.currency {
    font-size: 18px;
    line-height: 24px;
    margin-top: -1px;
}

@media (min-width: 768px) {
    .currency {
        font-size: 20px;
        line-height: 24px;
    }
}

.price-table {
    display: table;
    width: auto;
    margin-top: -12px;
    margin-bottom: 18px;
}

.price-table--tabs .price-table__item, .price-table--tabs .tablist__section .tablist__item, .tablist__section .price-table--tabs .tablist__item, .price-table--tabs .examples .examples__tabs .tablist__item, .examples .examples__tabs .price-table--tabs .tablist__item {
    transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    padding: 12px;
}

    .price-table--tabs .price-table__item:hover, .price-table--tabs .tablist__section .tablist__item:hover, .tablist__section .price-table--tabs .tablist__item:hover, .price-table--tabs .examples .examples__tabs .tablist__item:hover, .examples .examples__tabs .price-table--tabs .tablist__item:hover {
        color: #000000;
        outline: 0;
        background-color: #ebebeb;
    }

    .price-table--tabs .price-table__item:focus, .price-table--tabs .tablist__section .tablist__item:focus, .tablist__section .price-table--tabs .tablist__item:focus, .price-table--tabs .examples .examples__tabs .tablist__item:focus, .examples .examples__tabs .price-table--tabs .tablist__item:focus {
        outline: none;
    }

        .price-table--tabs .price-table__item:focus *, .price-table--tabs .tablist__section .tablist__item:focus *, .tablist__section .price-table--tabs .tablist__item:focus *, .price-table--tabs .examples .examples__tabs .tablist__item:focus *, .examples .examples__tabs .price-table--tabs .tablist__item:focus * {
            color: #FFFFFF;
        }

.price-table__list {
    display: flex;
}

.price-table__item, .tablist__section .tablist__item, .examples .examples__tabs .tablist__item {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    padding: 12px 0;
    padding-bottom: 7px;
    background-color: transparent;
    color: #000000;
}

.price-table__tagline,
.price-table__disclaimer {
    color: #7F7F7F;
}

.price-table__disclaimer {
    display: block;
    margin-top: 6px;
}

.price-table__item--inactive, .tablist__section .tablist__item--inactive, .examples .examples__tabs .tablist__item--inactive {
    color: #7F7F7F;
}

.price-table__item--active, .tablist__section .tablist__item:hover, .examples .examples__tabs .tablist__item:hover, .tablist__section .tablist__item--active, .examples .examples__tabs .tablist__item--active {
    background-color: whitesmoke;
}

.price-table__icon {
    font-size: 36px;
    margin-right: 12px;
}

.price-table__info {
    display: flex;
    flex-direction: column;
}

.flexgrid--justify-space-between [class*="flexgrid__cell"], .flexgrid--justify-space-around [class*="flexgrid__cell"], .flexgrid--justify-space-evenly [class*="flexgrid__cell"], .flexgrid--justify-right [class*="flexgrid__cell"] {
    flex-grow: 0;
}

.container, .footer__container {
    max-width: 1201px;
    margin: 0 auto;
    padding: 60px 12px;
}

@media (min-width: 768px) {
    .container, .footer__container {
        padding: 60px 24px;
    }
}

@media (min-width: 1025px) {
    .container, .footer__container {
        padding: 60px 48px;
    }
}

@media (min-width: 1201px) {
    .container, .footer__container {
        padding: 60px 60px;
    }
}

.flexgrid {
    display: flex;
    box-sizing: border-box;
    flex-flow: column wrap;
    flex: 1 0 auto;
    width: 100%;
}

@media (min-width: 320px) {
    .flexgrid {
        flex-direction: row;
    }
}

.flexgrid__cell,
[class*="flexgrid__cell"] {
    position: relative;
    display: block;
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
}

/*
 *  Responsive flexgrid
 *  Generate columns for each of the defined breakpoints
 */
@media (min-width: 320px) {
    [class*="flexgrid__cell--xxs"] {
        flex-basis: auto;
        max-width: 100%;
        flex-grow: 1;
    }

    .flexgrid__cell--xxs-1 {
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-1 {
        flex-basis: calc(8.33333% - 2px);
        max-width: calc(8.33333% - 2px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-1 {
        flex-basis: calc(8.33333% - 4px);
        max-width: calc(8.33333% - 4px);
    }
}

@media (min-width: 320px) {
    .flexgrid__cell--xxs-2 {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-2 {
        flex-basis: calc(16.66667% - 4px);
        max-width: calc(16.66667% - 4px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-2 {
        flex-basis: calc(16.66667% - 8px);
        max-width: calc(16.66667% - 8px);
    }
}

@media (min-width: 320px) {
    .flexgrid__cell--xxs-3 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-3 {
        flex-basis: calc(25% - 6px);
        max-width: calc(25% - 6px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-3 {
        flex-basis: calc(25% - 12px);
        max-width: calc(25% - 12px);
    }
}

@media (min-width: 320px) {
    .flexgrid__cell--xxs-4 {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-4 {
        flex-basis: calc(33.33333% - 8px);
        max-width: calc(33.33333% - 8px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-4 {
        flex-basis: calc(33.33333% - 16px);
        max-width: calc(33.33333% - 16px);
    }
}

@media (min-width: 320px) {
    .flexgrid__cell--xxs-5 {
        flex-basis: 41.66667%;
        max-width: 41.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-5 {
        flex-basis: calc(41.66667% - 10px);
        max-width: calc(41.66667% - 10px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-5 {
        flex-basis: calc(41.66667% - 20px);
        max-width: calc(41.66667% - 20px);
    }
}

@media (min-width: 320px) {
    .flexgrid__cell--xxs-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-6 {
        flex-basis: calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-6 {
        flex-basis: calc(50% - 24px);
        max-width: calc(50% - 24px);
    }
}

@media (min-width: 320px) {
    .flexgrid__cell--xxs-7 {
        flex-basis: 58.33333%;
        max-width: 58.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-7 {
        flex-basis: calc(58.33333% - 14px);
        max-width: calc(58.33333% - 14px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-7 {
        flex-basis: calc(58.33333% - 28px);
        max-width: calc(58.33333% - 28px);
    }
}

@media (min-width: 320px) {
    .flexgrid__cell--xxs-8 {
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-8 {
        flex-basis: calc(66.66667% - 16px);
        max-width: calc(66.66667% - 16px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-8 {
        flex-basis: calc(66.66667% - 32px);
        max-width: calc(66.66667% - 32px);
    }
}

@media (min-width: 320px) {
    .flexgrid__cell--xxs-9 {
        flex-basis: 75%;
        max-width: 75%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-9 {
        flex-basis: calc(75% - 18px);
        max-width: calc(75% - 18px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-9 {
        flex-basis: calc(75% - 36px);
        max-width: calc(75% - 36px);
    }
}

@media (min-width: 320px) {
    .flexgrid__cell--xxs-10 {
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-10 {
        flex-basis: calc(83.33333% - 20px);
        max-width: calc(83.33333% - 20px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-10 {
        flex-basis: calc(83.33333% - 40px);
        max-width: calc(83.33333% - 40px);
    }
}

@media (min-width: 320px) {
    .flexgrid__cell--xxs-11 {
        flex-basis: 91.66667%;
        max-width: 91.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-11 {
        flex-basis: calc(91.66667% - 22px);
        max-width: calc(91.66667% - 22px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-11 {
        flex-basis: calc(91.66667% - 44px);
        max-width: calc(91.66667% - 44px);
    }
}

@media (min-width: 320px) {
    .flexgrid__cell--xxs-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xxs-12 {
        flex-basis: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }
}

@media (min-width: 320px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xxs-12 {
        flex-basis: calc(100% - 48px);
        max-width: calc(100% - 48px);
    }
}

@media (min-width: 569px) {
    [class*="flexgrid__cell--xs"] {
        flex-basis: auto;
        max-width: 100%;
        flex-grow: 1;
    }

    .flexgrid__cell--xs-1 {
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-1 {
        flex-basis: calc(8.33333% - 2px);
        max-width: calc(8.33333% - 2px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-1 {
        flex-basis: calc(8.33333% - 4px);
        max-width: calc(8.33333% - 4px);
    }
}

@media (min-width: 569px) {
    .flexgrid__cell--xs-2 {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-2 {
        flex-basis: calc(16.66667% - 4px);
        max-width: calc(16.66667% - 4px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-2 {
        flex-basis: calc(16.66667% - 8px);
        max-width: calc(16.66667% - 8px);
    }
}

@media (min-width: 569px) {
    .flexgrid__cell--xs-3 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-3 {
        flex-basis: calc(25% - 6px);
        max-width: calc(25% - 6px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-3 {
        flex-basis: calc(25% - 12px);
        max-width: calc(25% - 12px);
    }
}

@media (min-width: 569px) {
    .flexgrid__cell--xs-4 {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-4 {
        flex-basis: calc(33.33333% - 8px);
        max-width: calc(33.33333% - 8px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-4 {
        flex-basis: calc(33.33333% - 16px);
        max-width: calc(33.33333% - 16px);
    }
}

@media (min-width: 569px) {
    .flexgrid__cell--xs-5 {
        flex-basis: 41.66667%;
        max-width: 41.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-5 {
        flex-basis: calc(41.66667% - 10px);
        max-width: calc(41.66667% - 10px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-5 {
        flex-basis: calc(41.66667% - 20px);
        max-width: calc(41.66667% - 20px);
    }
}

@media (min-width: 569px) {
    .flexgrid__cell--xs-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-6 {
        flex-basis: calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-6 {
        flex-basis: calc(50% - 24px);
        max-width: calc(50% - 24px);
    }
}

@media (min-width: 569px) {
    .flexgrid__cell--xs-7 {
        flex-basis: 58.33333%;
        max-width: 58.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-7 {
        flex-basis: calc(58.33333% - 14px);
        max-width: calc(58.33333% - 14px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-7 {
        flex-basis: calc(58.33333% - 28px);
        max-width: calc(58.33333% - 28px);
    }
}

@media (min-width: 569px) {
    .flexgrid__cell--xs-8 {
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-8 {
        flex-basis: calc(66.66667% - 16px);
        max-width: calc(66.66667% - 16px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-8 {
        flex-basis: calc(66.66667% - 32px);
        max-width: calc(66.66667% - 32px);
    }
}

@media (min-width: 569px) {
    .flexgrid__cell--xs-9 {
        flex-basis: 75%;
        max-width: 75%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-9 {
        flex-basis: calc(75% - 18px);
        max-width: calc(75% - 18px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-9 {
        flex-basis: calc(75% - 36px);
        max-width: calc(75% - 36px);
    }
}

@media (min-width: 569px) {
    .flexgrid__cell--xs-10 {
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-10 {
        flex-basis: calc(83.33333% - 20px);
        max-width: calc(83.33333% - 20px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-10 {
        flex-basis: calc(83.33333% - 40px);
        max-width: calc(83.33333% - 40px);
    }
}

@media (min-width: 569px) {
    .flexgrid__cell--xs-11 {
        flex-basis: 91.66667%;
        max-width: 91.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-11 {
        flex-basis: calc(91.66667% - 22px);
        max-width: calc(91.66667% - 22px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-11 {
        flex-basis: calc(91.66667% - 44px);
        max-width: calc(91.66667% - 44px);
    }
}

@media (min-width: 569px) {
    .flexgrid__cell--xs-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--xs-12 {
        flex-basis: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }
}

@media (min-width: 569px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--xs-12 {
        flex-basis: calc(100% - 48px);
        max-width: calc(100% - 48px);
    }
}

@media (min-width: 768px) {
    [class*="flexgrid__cell--sm"] {
        flex-basis: auto;
        max-width: 100%;
        flex-grow: 1;
    }

    .flexgrid__cell--sm-1 {
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-1 {
        flex-basis: calc(8.33333% - 2px);
        max-width: calc(8.33333% - 2px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-1 {
        flex-basis: calc(8.33333% - 4px);
        max-width: calc(8.33333% - 4px);
    }
}

@media (min-width: 768px) {
    .flexgrid__cell--sm-2 {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-2 {
        flex-basis: calc(16.66667% - 4px);
        max-width: calc(16.66667% - 4px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-2 {
        flex-basis: calc(16.66667% - 8px);
        max-width: calc(16.66667% - 8px);
    }
}

@media (min-width: 768px) {
    .flexgrid__cell--sm-3 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-3 {
        flex-basis: calc(25% - 6px);
        max-width: calc(25% - 6px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-3 {
        flex-basis: calc(25% - 12px);
        max-width: calc(25% - 12px);
    }
}

@media (min-width: 768px) {
    .flexgrid__cell--sm-4 {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-4 {
        flex-basis: calc(33.33333% - 8px);
        max-width: calc(33.33333% - 8px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-4 {
        flex-basis: calc(33.33333% - 16px);
        max-width: calc(33.33333% - 16px);
    }
}

@media (min-width: 768px) {
    .flexgrid__cell--sm-5 {
        flex-basis: 41.66667%;
        max-width: 41.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-5 {
        flex-basis: calc(41.66667% - 10px);
        max-width: calc(41.66667% - 10px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-5 {
        flex-basis: calc(41.66667% - 20px);
        max-width: calc(41.66667% - 20px);
    }
}

@media (min-width: 768px) {
    .flexgrid__cell--sm-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-6 {
        flex-basis: calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-6 {
        flex-basis: calc(50% - 24px);
        max-width: calc(50% - 24px);
    }
}

@media (min-width: 768px) {
    .flexgrid__cell--sm-7 {
        flex-basis: 58.33333%;
        max-width: 58.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-7 {
        flex-basis: calc(58.33333% - 14px);
        max-width: calc(58.33333% - 14px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-7 {
        flex-basis: calc(58.33333% - 28px);
        max-width: calc(58.33333% - 28px);
    }
}

@media (min-width: 768px) {
    .flexgrid__cell--sm-8 {
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-8 {
        flex-basis: calc(66.66667% - 16px);
        max-width: calc(66.66667% - 16px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-8 {
        flex-basis: calc(66.66667% - 32px);
        max-width: calc(66.66667% - 32px);
    }
}

@media (min-width: 768px) {
    .flexgrid__cell--sm-9 {
        flex-basis: 75%;
        max-width: 75%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-9 {
        flex-basis: calc(75% - 18px);
        max-width: calc(75% - 18px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-9 {
        flex-basis: calc(75% - 36px);
        max-width: calc(75% - 36px);
    }
}

@media (min-width: 768px) {
    .flexgrid__cell--sm-10 {
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-10 {
        flex-basis: calc(83.33333% - 20px);
        max-width: calc(83.33333% - 20px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-10 {
        flex-basis: calc(83.33333% - 40px);
        max-width: calc(83.33333% - 40px);
    }
}

@media (min-width: 768px) {
    .flexgrid__cell--sm-11 {
        flex-basis: 91.66667%;
        max-width: 91.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-11 {
        flex-basis: calc(91.66667% - 22px);
        max-width: calc(91.66667% - 22px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-11 {
        flex-basis: calc(91.66667% - 44px);
        max-width: calc(91.66667% - 44px);
    }
}

@media (min-width: 768px) {
    .flexgrid__cell--sm-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--sm-12 {
        flex-basis: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }
}

@media (min-width: 768px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--sm-12 {
        flex-basis: calc(100% - 48px);
        max-width: calc(100% - 48px);
    }
}

@media (min-width: 1025px) {
    [class*="flexgrid__cell--md"] {
        flex-basis: auto;
        max-width: 100%;
        flex-grow: 1;
    }

    .flexgrid__cell--md-1 {
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-1 {
        flex-basis: calc(8.33333% - 2px);
        max-width: calc(8.33333% - 2px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-1 {
        flex-basis: calc(8.33333% - 4px);
        max-width: calc(8.33333% - 4px);
    }
}

@media (min-width: 1025px) {
    .flexgrid__cell--md-2 {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-2 {
        flex-basis: calc(16.66667% - 4px);
        max-width: calc(16.66667% - 4px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-2 {
        flex-basis: calc(16.66667% - 8px);
        max-width: calc(16.66667% - 8px);
    }
}

@media (min-width: 1025px) {
    .flexgrid__cell--md-3 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-3 {
        flex-basis: calc(25% - 6px);
        max-width: calc(25% - 6px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-3 {
        flex-basis: calc(25% - 12px);
        max-width: calc(25% - 12px);
    }
}

@media (min-width: 1025px) {
    .flexgrid__cell--md-4 {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-4 {
        flex-basis: calc(33.33333% - 8px);
        max-width: calc(33.33333% - 8px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-4 {
        flex-basis: calc(33.33333% - 16px);
        max-width: calc(33.33333% - 16px);
    }
}

@media (min-width: 1025px) {
    .flexgrid__cell--md-5 {
        flex-basis: 41.66667%;
        max-width: 41.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-5 {
        flex-basis: calc(41.66667% - 10px);
        max-width: calc(41.66667% - 10px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-5 {
        flex-basis: calc(41.66667% - 20px);
        max-width: calc(41.66667% - 20px);
    }
}

@media (min-width: 1025px) {
    .flexgrid__cell--md-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-6 {
        flex-basis: calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-6 {
        flex-basis: calc(50% - 24px);
        max-width: calc(50% - 24px);
    }
}

@media (min-width: 1025px) {
    .flexgrid__cell--md-7 {
        flex-basis: 58.33333%;
        max-width: 58.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-7 {
        flex-basis: calc(58.33333% - 14px);
        max-width: calc(58.33333% - 14px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-7 {
        flex-basis: calc(58.33333% - 28px);
        max-width: calc(58.33333% - 28px);
    }
}

@media (min-width: 1025px) {
    .flexgrid__cell--md-8 {
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-8 {
        flex-basis: calc(66.66667% - 16px);
        max-width: calc(66.66667% - 16px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-8 {
        flex-basis: calc(66.66667% - 32px);
        max-width: calc(66.66667% - 32px);
    }
}

@media (min-width: 1025px) {
    .flexgrid__cell--md-9 {
        flex-basis: 75%;
        max-width: 75%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-9 {
        flex-basis: calc(75% - 18px);
        max-width: calc(75% - 18px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-9 {
        flex-basis: calc(75% - 36px);
        max-width: calc(75% - 36px);
    }
}

@media (min-width: 1025px) {
    .flexgrid__cell--md-10 {
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-10 {
        flex-basis: calc(83.33333% - 20px);
        max-width: calc(83.33333% - 20px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-10 {
        flex-basis: calc(83.33333% - 40px);
        max-width: calc(83.33333% - 40px);
    }
}

@media (min-width: 1025px) {
    .flexgrid__cell--md-11 {
        flex-basis: 91.66667%;
        max-width: 91.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-11 {
        flex-basis: calc(91.66667% - 22px);
        max-width: calc(91.66667% - 22px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-11 {
        flex-basis: calc(91.66667% - 44px);
        max-width: calc(91.66667% - 44px);
    }
}

@media (min-width: 1025px) {
    .flexgrid__cell--md-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--md-12 {
        flex-basis: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }
}

@media (min-width: 1025px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--md-12 {
        flex-basis: calc(100% - 48px);
        max-width: calc(100% - 48px);
    }
}

@media (min-width: 1201px) {
    [class*="flexgrid__cell--lg"] {
        flex-basis: auto;
        max-width: 100%;
        flex-grow: 1;
    }

    .flexgrid__cell--lg-1 {
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-1 {
        flex-basis: calc(8.33333% - 2px);
        max-width: calc(8.33333% - 2px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-1 {
        flex-basis: calc(8.33333% - 4px);
        max-width: calc(8.33333% - 4px);
    }
}

@media (min-width: 1201px) {
    .flexgrid__cell--lg-2 {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-2 {
        flex-basis: calc(16.66667% - 4px);
        max-width: calc(16.66667% - 4px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-2 {
        flex-basis: calc(16.66667% - 8px);
        max-width: calc(16.66667% - 8px);
    }
}

@media (min-width: 1201px) {
    .flexgrid__cell--lg-3 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-3 {
        flex-basis: calc(25% - 6px);
        max-width: calc(25% - 6px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-3 {
        flex-basis: calc(25% - 12px);
        max-width: calc(25% - 12px);
    }
}

@media (min-width: 1201px) {
    .flexgrid__cell--lg-4 {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-4 {
        flex-basis: calc(33.33333% - 8px);
        max-width: calc(33.33333% - 8px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-4 {
        flex-basis: calc(33.33333% - 16px);
        max-width: calc(33.33333% - 16px);
    }
}

@media (min-width: 1201px) {
    .flexgrid__cell--lg-5 {
        flex-basis: 41.66667%;
        max-width: 41.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-5 {
        flex-basis: calc(41.66667% - 10px);
        max-width: calc(41.66667% - 10px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-5 {
        flex-basis: calc(41.66667% - 20px);
        max-width: calc(41.66667% - 20px);
    }
}

@media (min-width: 1201px) {
    .flexgrid__cell--lg-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-6 {
        flex-basis: calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-6 {
        flex-basis: calc(50% - 24px);
        max-width: calc(50% - 24px);
    }
}

@media (min-width: 1201px) {
    .flexgrid__cell--lg-7 {
        flex-basis: 58.33333%;
        max-width: 58.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-7 {
        flex-basis: calc(58.33333% - 14px);
        max-width: calc(58.33333% - 14px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-7 {
        flex-basis: calc(58.33333% - 28px);
        max-width: calc(58.33333% - 28px);
    }
}

@media (min-width: 1201px) {
    .flexgrid__cell--lg-8 {
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-8 {
        flex-basis: calc(66.66667% - 16px);
        max-width: calc(66.66667% - 16px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-8 {
        flex-basis: calc(66.66667% - 32px);
        max-width: calc(66.66667% - 32px);
    }
}

@media (min-width: 1201px) {
    .flexgrid__cell--lg-9 {
        flex-basis: 75%;
        max-width: 75%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-9 {
        flex-basis: calc(75% - 18px);
        max-width: calc(75% - 18px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-9 {
        flex-basis: calc(75% - 36px);
        max-width: calc(75% - 36px);
    }
}

@media (min-width: 1201px) {
    .flexgrid__cell--lg-10 {
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-10 {
        flex-basis: calc(83.33333% - 20px);
        max-width: calc(83.33333% - 20px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-10 {
        flex-basis: calc(83.33333% - 40px);
        max-width: calc(83.33333% - 40px);
    }
}

@media (min-width: 1201px) {
    .flexgrid__cell--lg-11 {
        flex-basis: 91.66667%;
        max-width: 91.66667%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-11 {
        flex-basis: calc(91.66667% - 22px);
        max-width: calc(91.66667% - 22px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-11 {
        flex-basis: calc(91.66667% - 44px);
        max-width: calc(91.66667% - 44px);
    }
}

@media (min-width: 1201px) {
    .flexgrid__cell--lg-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .flexgrid--justify-space-between .flexgrid__cell--lg-12 {
        flex-basis: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }
}

@media (min-width: 1201px) and (min-width: 1025px) {
    .flexgrid--justify-space-between .flexgrid__cell--lg-12 {
        flex-basis: calc(100% - 48px);
        max-width: calc(100% - 48px);
    }
}

.flexgrid--gutter {
    margin: 0 -6px;
}

    .flexgrid--gutter [class*="flexgrid__cell"] {
        padding: 0 6px;
    }

@media (min-width: 768px) {
    .flexgrid--gutter {
        margin: 0 -12px;
    }

        .flexgrid--gutter [class*="flexgrid__cell"] {
            padding: 0 12px;
        }
}

.flexgrid--column-reversed {
    flex-direction: column-reverse;
    flex-flow: column-reverse;
}

.flexgrid--row-reversed {
    flex-direction: row-reverse;
}

@media (min-width: 569px) {
    .flexgrid--mobile-xl-row {
        flex-direction: row;
    }
}

.flexgrid--justify-space-between {
    justify-content: space-between;
}

@media (min-width: 1025px) {
    .flexgrid--justify-space-between [class*="flexgrid__cell"]:nth-child(3n+1):nth-last-child(-n+2) ~ [class*="flexgrid__cell"] {
        margin-right: auto;
        margin-left: 24px;
    }
}

.flexgrid--justify-space-around {
    justify-content: space-around;
}

.flexgrid--justify-space-evenly {
    justify-content: space-evenly;
}

.flexgrid--justify-right {
    justify-content: flex-end;
}

.card {
    max-width: 600px;
    margin-bottom: 12px;
}

@media (max-width: 1024px) {
    .card {
        margin-bottom: 48px;
    }
}

@media (min-width: 768px) {
    .card {
        margin-bottom: 24px;
    }
}

.card__visual {
    margin: 0 auto 18px;
    overflow: hidden;
}

@media (min-width: 569px) {
    .card__visual {
        margin: 0 auto 24px;
    }
}

.card__icon,
.card__image {
    width: 100%;
}

.card__icon {
    height: 100%;
}

.card__content {
    width: 100%;
}

.tooltip {
    position: absolute;
    background: #000000;
    color: #FFFFFF;
    padding: 12px;
    min-width: 96px;
    max-width: 150px;
    min-height: 36px;
    font-weight: 400;
    z-index: 200;
}

    .tooltip:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-top: 12px solid #000000;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid transparent;
        left: calc(50% - 12px);
        bottom: -24px;
    }

.tooltip__list-item.tooltip__label {
    display: block;
    margin-bottom: 0;
}

.tooltip__list {
    margin-top: 0;
    margin-left: 0;
    padding-left: 0;
}

.tooltip__list-item {
    width: 120px;
    margin: 0 0 12px 0;
    padding-left: 0;
}

.hit-area {
    display: block;
}

.color {
    cursor: pointer;
    margin: 0;
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07) 5px, transparent 5px, transparent 10px);
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07) 5px, transparent 5px, transparent 10px);
}

.color__spec {
    position: relative;
    margin: 0;
}

.color__spec--swatch {
    width: 48px;
    height: 48px;
}

.color__spec--show {
    opacity: 0;
    position: absolute;
    padding: 12px;
    color: #FFFFFF;
    font-size: 24px;
    z-index: 100;
    transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.color__spec--title,
.color__spec--code,
.color__spec--weight,
.color__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

.color--selected {
    outline: 2px solid #000000;
}

    .color--selected .color__spec--show {
        opacity: 0;
    }

.hit-area:hover .color__spec--show,
.hit-area:focus .color__spec--show {
    opacity: 1;
}

.hit-area:hover .color--selected .color__spec--show,
.hit-area:focus .color--selected .color__spec--show {
    opacity: 0;
}

.branded-logo {
    color: #000000;
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
}

    .branded-logo:hover {
        color: #939393;
    }

.branded-logo__robot {
    width: 51px;
    height: 72px;
}

.branded-logo__logo {
    display: block;
    margin-top: 9px;
    width: 101px;
    height: 15px;
}

@media (min-width: 1025px) {
    .branded-logo__logo {
        margin: 0 0 0 12px;
    }
}

.legal {
    margin-top: -5px;
}

.legal,
.legal__link {
    color: #7F7F7F;
}

    .legal *,
    .legal__link * {
        display: inline;
    }

.legal__copyright-label {
    color: #7F7F7F;
}

@media screen and (min-width: 480px) {
    .legal__copyright-label {
        margin: 0 12px 0 0;
    }
}

.legal__list {
    margin-top: 6px;
}

@media (max-width: 767px) {
    .legal__list {
        display: block;
    }
}

@media screen and (min-width: 480px) and (max-width: 569px -1) {
    .legal__list {
        display: inline;
    }
}

.legal__item {
    display: inline-block;
}

    .legal__item:not(:last-child) {
        margin: 0 12px 0 0;
    }

.legal__link {
    margin-right: 0;
    margin-bottom: 0;
    color: #7F7F7F;
}

    .legal__link:hover, .legal__link:focus, .legal__link:active, .legal__link:visited {
        color: #7F7F7F;
    }

    .legal__link .link__underline {
        background-image: linear-gradient(transparent calc(100% - 1px), #7F7F7F 10px);
    }

.scroll-hint, .tablist__section .tablist__scroll-hint, .examples .examples__tabs .tablist__scroll-hint {
    user-select: none;
    position: relative;
}

.scroll-hint__icon--left, .scroll-hint__icon--right, .scroll-hint__icon--bottom {
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

.scroll-hint__icon--left {
    margin-right: 0.33333em;
}

.scroll-hint__icon--right {
    margin-left: 0.33333em;
    transform: rotate(180deg);
}

.scroll-hint__icon--bottom {
    position: absolute;
    display: block;
    transform: rotate(-90deg);
    left: 50%;
}

.cta__block .button.button--primary + .link.link--large, .cta__block .button.button--primary + .link--large.toggle {
    margin-top: 24px;
    transform: none;
}

@media (min-width: 569px) {
    .cta__block .button.button--primary {
        margin-right: 48px;
    }

        .cta__block .button.button--primary + .link.link--large, .cta__block .button.button--primary + .link--large.toggle {
            display: inline-block;
            margin-top: 12px;
        }
}

.tag {
    display: flex;
    align-items: center;
    background-color: #F5F5F5;
    color: #7F7F7F;
    margin: 0 6px 0 0;
    padding: 3px 6px;
    border-radius: 2px;
    height: 18px;
}

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

.tag-list__item {
    display: inline-block;
    margin: 0;
}

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

.flyout, .main-nav__flyout {
    display: flex;
    flex-direction: column;
    padding: 12px;
    padding-bottom: 24px;
}

    .flyout:last-child, .main-nav__flyout:last-child {
        margin-bottom: -6px;
    }

@media (max-width: 1024px) {
    .flyout:last-child .flyout__link--cta-mini, .main-nav__flyout:last-child .flyout__link--cta-mini {
        margin-bottom: 6px;
    }
}

@media (min-width: 569px) {
    .flyout, .main-nav__flyout {
        flex-direction: row;
    }
}

.main-nav--large .flyout, .main-nav--large .main-nav__flyout {
    position: absolute;
    left: 0;
    right: 0;
    padding: 24px 12px;
    border-bottom: 1px solid #E3E3E3;
    background: #FFFFFF;
}

@media (min-width: 1201px) {
    .main-nav--large .flyout, .main-nav--large .main-nav__flyout {
        padding: 24px;
    }
}

.flyout__section {
    background: transparent;
    margin-bottom: 23px;
}

    .flyout__section:last-child {
        margin-bottom: 0;
    }

@media (min-width: 569px) {
    .flyout__section {
        width: calc((25% - 12px * 3/4));
        margin-bottom: 0;
        padding-right: 12px;
    }

        .flyout__section:not(:last-child) {
            margin-right: 12px;
            border-right: 1px solid #EAEAEA;
        }
}

.main-nav--large .flyout__section {
    width: calc((20% - 24px * 4/5));
    padding-right: 24px;
}

    .main-nav--large .flyout__section:not(:last-child) {
        margin-right: 24px;
    }

.main-nav--large .flyout__section--2-columns {
    width: calc(((20% - 24px * 4/5) * 2) + 24px);
}

.main-nav--large .flyout__section--3-columns {
    width: calc(((20% - 24px * 4/5) * 3) + 48px);
}

.flyout__title {
    color: initial;
}

.main-nav--large .flyout__list {
    margin-bottom: 0;
}

    .main-nav--large .flyout__list + .flyout__link--cta-mini {
        margin-top: 21px;
    }

.flyout__list-item {
    background: transparent;
}

.flyout__list-item--collapsed-sm {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

.main-nav--large .flyout__list-item--collapsed-sm {
    position: relative;
    width: auto;
    height: auto;
    overflow: initial;
    clip: initial;
}

.flyout__list-item--expanded {
    position: relative;
    width: auto;
    height: auto;
    overflow: initial;
    clip: initial;
}

.flyout__link {
    color: initial;
    margin-right: 0;
}

    .flyout__link:hover {
        color: initial;
    }

.flyout__link--cta-mini {
    display: table;
}

.main-nav--large .flyout__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

.main-nav {
    position: relative;
}

.main-nav--small {
    flex: 0 1 auto;
    order: 30;
    z-index: 0;
}

    .main-nav--small:before {
        transform: translateX(-100vw);
        content: '';
        height: calc(100vh - 60px);
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        opacity: 0;
        background-color: #000000;
        transition: opacity 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0s 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    }

.main-nav--large {
    order: 20;
    flex: 1 1 auto;
    margin-right: 60px;
}

    .main-nav--large:before {
        content: none;
        display: none;
    }

    .main-nav--large,
    .main-nav--large .main-nav__list,
    .main-nav--large .main-nav__item {
        display: flex;
        height: 100%;
        align-items: center;
    }

.main-nav__nav-assist {
    position: absolute;
    top: 0;
    right: 0;
}

@media (min-width: 1025px) {
    .main-nav--large .main-nav__nav-assist {
        display: none;
    }
}

.main-nav--small .main-nav__list {
    position: relative;
    top: 100%;
    left: 0;
    max-height: calc(100vh - 60px);
    border-right: 1px solid #E3E3E3;
    border-bottom: 1px solid #E3E3E3;
    width: calc(100% - 60px);
    overflow-y: scroll;
    background-color: #FFFFFF;
}

.main-nav--large .main-nav__list {
    position: static;
    margin-top: 7px;
    border-right: 0;
    width: auto;
    overflow-y: unset;
    opacity: 1;
    background-color: transparent;
}

.main-nav--small .main-nav__item {
    padding: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #E3E3E3;
}

    .main-nav--small .main-nav__item:last-child {
        border: none;
    }

.main-nav--large .main-nav__item {
    display: flex;
    flex-direction: row;
    padding: 0 6px;
    margin-bottom: 6px;
    border-right: 0;
    border-bottom: 0;
}

    .main-nav--large .main-nav__item:last-of-type {
        margin-right: 0;
    }

@media (min-width: 1201px) {
    .main-nav--large .main-nav__item {
        padding: 0 15px;
    }
}

.main-nav__link {
    display: block;
    z-index: 2;
    cursor: pointer;
    padding: 19px 12px 17px;
    position: relative;
    color: #000000;
    font-size: 16px;
    line-height: 24px;
    transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

    .main-nav__link:hover {
        color: #000000;
    }

.main-nav--large .main-nav__link {
    padding: 0;
}

    .main-nav--large .main-nav__link:after {
        content: '';
        display: inline;
        height: 3px;
        width: 0;
        background: #000000;
        position: absolute;
        left: 50%;
        bottom: -6px;
        transform: translateX(-50%);
        transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .main-nav--large .main-nav__link:hover:after {
        width: 100%;
    }

    .main-nav--large .main-nav__link:focus:after {
        width: 0;
    }

@media (min-width: 1201px) {
    .main-nav--large .main-nav__link {
        font-size: 18px;
        line-height: 24px;
    }
}

.main-nav__item--active {
    background-color: whitesmoke;
}

.main-nav--large .main-nav__item--active {
    background-color: transparent;
}

    .main-nav--large .main-nav__item--active .main-nav__link:after {
        width: 100%;
    }

.main-nav__item--active .flyout__toggle {
    color: #0ca2da;
}

.main-nav--open:before {
    transform: translateX(0vw);
    opacity: 0.8;
    transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.main-nav--open .main-nav__item {
    display: block;
}

.main-nav--large .main-nav--open .main-nav__item {
    display: inline-block;
}

.main-nav__flyout {
    z-index: 1;
}

@media (min-width: 1025px) {
    .main-nav .main-nav__flyout {
        top: 60px;
    }
}

.main-nav__toggle {
    position: relative;
    z-index: 10;
    display: none;
    margin-left: 3px;
    background-color: transparent;
}

.main-nav--large .main-nav__toggle {
    display: initial;
}

.menu-open-enter, .menu-open-leave-to {
    opacity: 0;
    transform: translateX(-100%);
}

.menu-open-enter-active, .menu-open-leave-active {
    transition: transform 0.3s, opacity 0.3s;
}

.menu-switch-enter, .menu-switch-leave-to {
    opacity: 0;
}

.menu-switch-enter-active, .menu-switch-leave-active {
    transition: opacity 0.3s;
}

.flyout-open-enter, .flyout-open-leave-to {
    opacity: 0;
}

.flyout-open-enter-active, .flyout-open-leave-active {
    transition: opacity 0.3s;
}

.sys-nav {
    order: 20;
    opacity: 1;
    transition: opacity 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0s 0s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

.main-nav--open + .sys-nav {
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0s 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    transform: scale(0);
}

@media (min-width: 1025px) {
    .sys-nav {
        flex: 0 1 auto;
        order: 30;
    }
}

.sys-nav__list {
    display: flex;
    height: 24px;
    text-align: right;
    vertical-align: middle;
}

.sys-nav__item {
    margin-top: -6px;
    flex: 0 1 auto;
    z-index: 1;
    margin-right: 12px;
    cursor: pointer;
}

    .sys-nav__item:last-child {
        margin-right: 0;
    }

.sys-nav__link, .search__button, .um-components .search__button {
    background: transparent;
}

.sys-nav__label--hidden-xs, .sys-nav__label--hidden-sm {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

@media (min-width: 1025px) {
    .sys-nav__label--hidden-xs {
        position: relative;
        width: auto;
        height: auto;
        overflow: initial;
        clip: initial;
    }
}

@media (min-width: 1201px) {
    .sys-nav__label--hidden-sm {
        position: relative;
        width: auto;
        height: auto;
        overflow: initial;
        clip: initial;
    }
}

.search {
    position: relative;
    height: 60px;
    z-index: 1010;
    border-bottom: 1px solid #EAEAEA;
}

.search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

.search__button, .um-components .search__button {
    position: absolute;
    display: block;
    font-size: 24px;
    padding: 18px;
    left: 0;
    width: 60px;
    height: 60px;
    margin: 0;
    background-color: #EAEAEA;
    transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

    .search__button:hover, .um-components .search__button:hover {
        background-color: #d6d6d6;
    }

.search__inputholder {
    position: absolute;
    left: 60px;
    right: 60px;
    display: block;
    height: 60px;
}

.search__input {
    width: 100%;
    height: 60px;
    margin: 0;
    background-color: #EAEAEA;
    padding: 0 12px;
    border-radius: 0;
    font-size: 20px;
    line-height: 24px;
    border: none;
    outline: none;
}

@media (min-width: 569px) {
    .search__input {
        font-size: 24px;
        line-height: 30px;
    }
}

.search__close-button {
    position: absolute;
    top: 0;
    right: 0;
}

.footer-nav__column {
    flex: 1 0 auto;
    position: relative;
}

@media (min-width: 569px) {
    .footer-nav__column {
        margin-right: 12px;
        padding-right: 18px;
    }

        .footer-nav__column:not(.footer-nav__column--last) {
            border-right: 1px solid #EAEAEA;
            margin-right: 18px;
        }
}

@media (min-width: 1025px) {
    .footer-nav__column {
        margin-right: 12px;
        padding-right: 24px;
    }

        .footer-nav__column:not(.footer-nav__column--last) {
            border-right: 1px solid #EAEAEA;
            margin-right: 24px;
        }
}

@media (min-width: 768px) {
    .footer-nav__column {
        padding-right: 24px;
    }

    .footer-nav__column--double .footer-nav__list {
        column-count: 2;
        column-gap: 24px;
    }
}

@media (min-width: 768px) and (min-width: 768px) {
    .footer-nav__column--double .footer-nav__list {
        column-gap: 48px;
    }
}

@media (min-width: 768px) {
    .footer-nav__column--double .footer-nav__list > li {
        transform: translate3d(0, 2px, 0);
    }
}

@media (min-width: 569px) {
    .footer-nav__list {
        margin-bottom: 0;
    }
}

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

    .footer-nav__link,
    .footer-nav__link:hover,
    .footer-nav__link:focus,
    .footer-nav__link:active,
    .footer-nav__link:visited {
        margin-bottom: 0;
        color: #000000;
    }

.social-nav__item {
    display: inline-block;
    margin-bottom: 0;
}

.notification, .preferences-bar {
    position: relative;
    background: #d8f3fd;
    /* disabled checkbox */
}

    .notification [type="checkbox"]:not(:checked) + label:before, .preferences-bar [type="checkbox"]:not(:checked) + label:before,
    .notification [type="checkbox"]:checked + label:before,
    .preferences-bar [type="checkbox"]:checked + label:before {
        border: 1px solid #c6dfe8;
    }

    .notification [type="checkbox"]:disabled:not(:checked) + label:before, .preferences-bar [type="checkbox"]:disabled:not(:checked) + label:before,
    .notification [type="checkbox"]:disabled:checked + label:before,
    .preferences-bar [type="checkbox"]:disabled:checked + label:before {
        background-color: #cfe9f3;
    }

    .notification [type="checkbox"]:disabled:checked + label:after, .preferences-bar [type="checkbox"]:disabled:checked + label:after {
        content: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20120%20120%22%3E%3Cpolygon%20points=%22113%2029.1%20104.2%2020.2%2042.3%2082.1%2015.8%2055.6%207%2064.4%2033.5%2091%2033.5%2091%2042.3%2099.8%2042.3%2099.8%2042.3%2099.8%2051.1%2091%2051.1%2091%20%22%20fill=%22rgb(150,170,177)%22/%3E%3C/svg%3E");
    }

    .notification [type="checkbox"]:disabled + label, .preferences-bar [type="checkbox"]:disabled + label {
        color: #6b797e;
    }

.notification--small .container, .notification--small .footer__container {
    padding-top: 30px;
    padding-bottom: 30px;
}

    .notification--small .container .notification__content, .notification--small .footer__container .notification__content, .notification--small .container .preferences-bar__content, .notification--small .footer__container .preferences-bar__content {
        padding-right: 48px;
    }

    .notification--small .container .notification__content--centered, .notification--small .footer__container .notification__content--centered {
        padding: 0 48px;
    }

@media (min-width: 1025px) {
    .notification--small .container, .notification--small .footer__container {
        padding: 12px 60px;
    }
}

.notification--small .notification__content, .notification--small .preferences-bar__content {
    max-width: 1200px;
}

@media (min-width: 1025px) {
    .notification--small .notification__content *, .notification--small .preferences-bar__content * {
        display: inline-block;
        margin-bottom: 0;
    }

    .notification--small .notification__content [type="checkbox"] + label, .notification--small .preferences-bar__content [type="checkbox"] + label {
        margin-left: 24px;
    }
}

.notification__content, .preferences-bar__content {
    max-width: 568px;
}

.notification__content--centered {
    text-align: center;
    margin: 0 auto;
}

.notification__content--columns {
    max-width: 1200px;
}

@media (min-width: 569px) {
    .notification__content--columns .notification__copy {
        column-count: 2;
    }
}

.notification__button, .preferences-bar__button, .preferences-bar .settings-selector__edit-button {
    background: #d8f3fd;
}

    .notification__button:hover, .preferences-bar__button:hover, .preferences-bar .settings-selector__edit-button:hover, .notification__button:focus, .preferences-bar__button:focus, .preferences-bar .settings-selector__edit-button:focus {
        color: #000000;
        background-color: #bfebfc;
    }

.notification__content--centered .button {
    margin: 0 6px 12px;
}

    .notification__content--centered .button:last-child {
        margin-bottom: 0;
    }

@media (min-width: 480px) {
    .notification__content--centered .button {
        margin-bottom: 0;
    }
}

.preferences-bar {
    transform: translateY(0);
}

    .preferences-bar .auto-complete.auto-complete--small {
        text-align: left;
        margin-top: 5px;
        margin-bottom: 0;
        width: 260px;
    }

        .preferences-bar .auto-complete.auto-complete--small .auto-complete__input {
            border-color: #c6dfe8;
        }

@media (min-width: 480px) {
    .preferences-bar .auto-complete.auto-complete--small {
        margin-top: 0;
    }
}

.preferences-bar .settings-selector__edit-button {
    color: #fb203a;
}

    .preferences-bar .settings-selector__edit-button:hover, .preferences-bar .settings-selector__edit-button:focus, .preferences-bar .settings-selector__edit-button:active {
        color: #fb203a;
    }

.settings {
    width: 100%;
    margin-bottom: 30px;
    border: 2px solid #c6dfe8;
    border-left: none;
    border-right: none;
}

@media (min-width: 480px) {
    .settings {
        margin-bottom: 36px;
    }
}

.notification__content--centered .settings {
    margin-left: auto;
    margin-right: auto;
}

.settings-selector {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    border-bottom: 1px solid #c6dfe8;
}

    .settings-selector .form-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

@media (min-width: 480px) {
    .settings-selector .form-group {
        flex-direction: row;
        align-items: center;
    }
}

.settings-selector__label {
    margin-bottom: 0;
    margin-left: 12px;
    margin-right: 12px;
    color: #6b797e;
}

@media (min-width: 480px) {
    .settings-selector__label {
        flex-direction: row;
        align-items: center;
        margin-top: 5px;
    }
}

.settings-selector__edit-button {
    font-weight: 400;
    margin-top: 5px;
}

@media (min-width: 480px) {
    .settings-selector__edit-button {
        margin-top: 0;
    }
}

.settings-selector:last-child {
    margin-bottom: 0;
    border: none;
}

.settings-panel {
    text-align: left;
    margin-top: 12px;
    padding: 12px;
}

.setting:not(:last-child) {
    margin-bottom: 18px;
}

.setting__description {
    padding-left: 30px;
    margin-top: -6px;
    color: #6b797e;
}

.selector-group {
    display: flex;
    flex-direction: row;
}

@media (min-width: 480px) {
    .selector-group {
        margin-left: auto;
    }
}

.auto-complete {
    position: relative;
    margin-bottom: 23px;
}

    .auto-complete * {
        margin: 0;
    }

.auto-complete__dropdown {
    position: absolute;
    background: #FFFFFF;
    width: 100%;
    border: 1px solid #E3E3E3;
    z-index: 1000;
}

.auto-complete__dropdown, .auto-complete__list, .auto-complete__list-item, .auto-complete___label {
    user-select: none;
}

.auto-complete__list-item, .auto-complete__label {
    padding-left: 12px;
    padding-right: 12px;
}

.auto-complete__list-item {
    padding-top: 12px;
    padding-bottom: 12px;
    cursor: pointer;
    outline: none;
    color: #000000;
}

    .auto-complete__list-item:hover, .auto-complete__list-item:active {
        background-color: #EAEAEA;
    }

    .auto-complete__list-item .auto-complete__value {
        font-weight: 600;
    }

.auto-complete__label {
    padding-top: 6px;
    padding-bottom: 6px;
    color: #7F7F7F;
    background-color: #F5F5F5;
}

.auto-complete__input {
    width: 100%;
}

.auto-complete--small .auto-complete__input {
    padding-top: 6.5px;
    padding-bottom: 6.5px;
}

.auto-complete--reversed .auto-complete__dropdown {
    bottom: 100%;
}

.country-selector {
    display: flex;
    flex: 1 1 auto;
    flex-flow: row nowrap;
}

.country-selector__auto-complete {
    flex-grow: 1;
}

.country-selector__icon-button {
    margin-top: 0;
}

.tablist__section .tablist, .examples .examples__tabs .tablist {
    display: inline-block;
    max-width: 100%;
    padding: 0;
    margin-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #E3E3E3;
}

.tablist__section .tablist__headline, .examples .examples__tabs .tablist__headline {
    position: relative;
    margin-bottom: 8px;
}

@media (min-width: 768px) {
    .tablist__section .tablist__headline, .examples .examples__tabs .tablist__headline {
        margin-bottom: 11px;
    }
}

.tablist__section .tablist__item, .examples .examples__tabs .tablist__item {
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    display: table-cell;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 5px;
    transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (min-width: 1025px) {
    .tablist__section .tablist__item, .examples .examples__tabs .tablist__item {
        padding-top: 6px;
        padding-bottom: 4px;
    }
}

.tablist__section .tablist__item:hover, .examples .examples__tabs .tablist__item:hover {
    color: #000000;
    background-color: #ebebeb;
}

.tablist__section .tablist__scroll-hint, .examples .examples__tabs .tablist__scroll-hint {
    color: #7F7F7F;
    position: absolute;
    right: 0;
}

@media screen and (min-width: 642px) {
    .tablist__section .tablist__scroll-hint, .examples .examples__tabs .tablist__scroll-hint {
        display: none;
    }
}

.tabs__nav {
    position: relative;
    display: flex;
    width: 100%;
    user-select: none;
    will-change: transform;
}

@media (min-width: 768px) {
    .tabs__nav {
        justify-content: center;
    }
}

.tabs__list {
    display: flex;
    padding: 24px 0 1px;
    border-bottom: 2px solid #EAEAEA;
}

@media (min-width: 768px) {
    .tabs__list {
        flex-wrap: wrap;
    }
}

.tabs__list_item {
    flex: 0 1 auto;
    text-align: center;
    padding: 0 12px 0;
    margin: 0 0 12px 0;
}

    .tabs__list_item:first-child {
        padding-left: 24px;
    }

    .tabs__list_item:last-child {
        padding-right: 24px;
    }

@media (min-width: 768px) {
    .tabs__list_item {
        display: inline-block;
    }

        .tabs__list_item:first-child {
            padding-left: 18px;
        }

        .tabs__list_item:last-child {
            padding-right: 18px;
        }
}

.tabs__list_link {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    min-width: 60px;
    margin-bottom: 6px;
    color: #000000;
}

    .tabs__list_link:hover, .tabs__list_link--active {
        color: #000000;
    }

        .tabs__list_link:hover .sub-nav__label:after, .tabs__list_link--active .sub-nav__label:after {
            width: 100%;
        }

.tabs__indicator {
    position: absolute;
    z-index: 1;
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: #000000;
}

.pager {
    position: relative;
    white-space: nowrap;
    overflow: visible;
}

.pager__page, .pager__active-page {
    font-size: 12px;
    cursor: pointer;
    line-height: 12px;
    margin-bottom: 6px;
}

    .pager__page:last-of-type, .pager__active-page:last-of-type {
        margin-bottom: 0;
    }

.pager__page-indicator,
.pager__active-page-indicator {
    display: block;
    color: #fb203a;
    transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

    .pager__page-indicator:hover, .pager__page-indicator:active,
    .pager__active-page-indicator:hover,
    .pager__active-page-indicator:active {
        color: #24bcf3;
    }

.pager__active-page {
    position: absolute;
    top: 0;
    left: 0;
}

.pager--horizontal .pager__page, .pager--horizontal .pager__active-page {
    display: inline-block;
}

.slider-reveal--dissolve .slider-reveal__mask:last-child {
    border-bottom: 2px solid #fb203a;
    box-shadow: 0px 0px 60px 30px rgba(12, 169, 227, 0.25);
}

.slider-reveal__image-wrapper {
    position: relative;
    width: 75%;
    margin: 0 auto 36px auto;
}

.slider-reveal__image-aspect {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
}

.slider-reveal__mask {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider-reveal__body:last-child {
    margin-bottom: 0;
}

.slider-reveal__image {
    object-fit: cover;
    object-position: center;
    font-family: "object-fit: cover; object-position: center";
    width: 100%;
}

@media (min-width: 569px) {
    .slider-reveal__image-wrapper {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (min-width: 1025px) {
    .slider-reveal__grid-cell {
        flex-basis: 33.33%;
        max-width: 33.33%;
    }

        .slider-reveal__grid-cell:nth-child(2) {
            flex-basis: 66.67%;
            max-width: 66.67%;
        }
}

.brand-card__image-wrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto 18px auto;
}

.brand-card__image {
    width: 100%;
}

.brand-card__quote {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 0 0 0 12px;
}

@media (min-width: 768px) {
    .brand-card__quote {
        width: auto;
        padding: 0 12px;
    }
}

.reseller-card {
    display: flex;
    flex-direction: column;
    max-width: 569px;
    margin-bottom: 12px;
    color: #000000;
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    box-sizing: border-box;
    transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (min-width: 768px) {
    .reseller-card {
        margin-bottom: 24px;
    }
}

.reseller-card:hover {
    color: inherit;
    background: #EAEAEA;
}

    .reseller-card:focus, .reseller-card:hover:focus, .reseller-card:focus:active {
        border-color: #24bcf3;
    }

        .reseller-card:focus *, .reseller-card:hover:focus *, .reseller-card:focus:active * {
            color: #FFFFFF;
        }

        .reseller-card:hover .faux-content-link .link__underline, .reseller-card:focus .faux-content-link .link__underline {
            background-image: linear-gradient(transparent calc(100% - 1px), currentColor 10px);
            background-size: 0% 100%;
        }

.reseller-card__header {
    display: flex;
    flex-direction: row;
    padding: 18px;
    padding-bottom: 0;
}

.reseller-card__image-wrapper {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    overflow: hidden;
    margin-right: 18px;
    align-items: center;
    display: flex;
}

.reseller-card__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.reseller-card__description {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reseller-card__showroom-count {
    color: #7F7F7F;
}

.reseller-card__footer {
    text-align: right;
    padding: 14px 18px 12px 18px;
}

@media (min-width: 768px) {
    .reseller-card__footer {
        padding-bottom: 10px;
    }
}

.reseller-card__link {
    margin: 0;
}

.materials-card {
    margin-right: 0;
    max-width: 600px;
    margin-bottom: 12px;
}

@media (max-width: 1024px) {
    .materials-card {
        margin-bottom: 24px;
    }
}

@media (min-width: 768px) {
    .materials-card {
        margin-bottom: 24px;
    }
}

.materials-card:hover {
    cursor: pointer;
    color: inherit;
    background: #EAEAEA;
}

> .materials-card:hover .tag {
    background-color: rgba(255, 255, 255, 0.4);
}

.materials-card:focus, .materials-card:hover:focus, .materials-card:focus:active {
    border-color: #24bcf3;
    outline: none;
}

    .materials-card:focus *, .materials-card:hover:focus *, .materials-card:focus:active * {
        color: #FFFFFF;
    }

    .materials-card:focus .tag, .materials-card:hover:focus .tag, .materials-card:focus:active .tag {
        background-color: rgba(255, 255, 255, 0.15);
        color: #FFFFFF;
    }

    .materials-card:focus .materials-card__visual, .materials-card:hover:focus .materials-card__visual, .materials-card:focus:active .materials-card__visual {
        outline: none;
    }

    .materials-card:focus .materials-card__content, .materials-card:hover:focus .materials-card__content, .materials-card:focus:active .materials-card__content {
        outline: none;
        border: none;
    }

    .materials-card:focus:not(:hover), .materials-card:focus:not(:active) {
        outline: 1px solid transparent;
    }

.materials-card__article {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.materials-card__visual {
    margin: 0 auto;
}

@media (min-width: 569px) {
    .materials-card__visual {
        margin: 0 auto;
    }
}

.materials-card__image {
    width: 100%;
}

.materials-card__content {
    height: 100%;
    padding: 12px;
    border-left: 1px solid #EAEAEA;
    border-right: 1px solid #EAEAEA;
    border-bottom: 1px solid #EAEAEA;
}

.materials-card__headline {
    margin-bottom: 12px;
}

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

main .organism:nth-child(even), main .slider-reveal:nth-child(even), main .hero--basic:nth-child(even),
main .hero--products:nth-child(even), main .hero--products-application:nth-child(even), main .hero--text:nth-child(even), main .hero--video:nth-child(even), main .ubr:nth-child(even), main .examples:nth-child(even), main .colors:nth-child(even), main .explore:nth-child(even), main .ecosystem:nth-child(even), main .case:nth-child(even), main .brands:nth-child(even), main .general-content:nth-child(even), main .resellers:nth-child(even), main .materials:nth-child(even) {
    background-color: #fafafa;
}

.hero--basic .hero__subtitle {
    color: #7F7F7F;
    margin-top: -48px;
}

@media (min-width: 768px) {
    .hero--basic .hero__subtitle {
        font-size: 30px;
        line-height: 36px;
        margin-top: -5px;
        margin-bottom: 59px;
        margin-top: -41px;
    }
}

@media (max-width: 568px) {
    .hero--basic .hero__container,
    .hero--products .hero__container,
    .hero--products-application .hero__container {
        padding-top: 12px;
    }
}

.hero--basic .hero__image--basic,
.hero--basic .hero__image--product,
.hero--products .hero__image--basic,
.hero--products-application .hero__image--basic,
.hero--products .hero__image--product,
.hero--products-application .hero__image--product {
    position: relative;
    width: 75%;
    margin: 0 auto 30px;
}

@media (min-width: 569px) {
    .hero--basic .hero__image--basic,
    .hero--basic .hero__image--product,
    .hero--products .hero__image--basic,
    .hero--products-application .hero__image--basic,
    .hero--products .hero__image--product,
    .hero--products-application .hero__image--product {
        width: 100%;
        margin: 0 auto 0 30px;
    }
}

.hero--basic .hero__image-link,
.hero--products .hero__image-link,
.hero--products-application .hero__image-link {
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    cursor: pointer;
    margin: 12px;
    width: 84px;
    height: 84px;
    color: #000000;
    transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

    .hero--basic .hero__image-link:hover, .hero--basic .hero__image-link:focus,
    .hero--products .hero__image-link:hover,
    .hero--products-application .hero__image-link:hover,
    .hero--products .hero__image-link:focus,
    .hero--products-application .hero__image-link:focus {
        color: #939393;
    }

@media (min-width: 1025px) {
    .hero--basic .hero__image-link,
    .hero--products .hero__image-link,
    .hero--products-application .hero__image-link {
        width: 120px;
        height: 120px;
    }
}

.hero--basic .hero__image-link--3d-kit,
.hero--products .hero__image-link--3d-kit,
.hero--products-application .hero__image-link--3d-kit {
    width: 100%;
    height: 100%;
}

.hero--basic .hero__button,
.hero--products .hero__button,
.hero--products-application .hero__button {
    display: table;
}

@media (min-width: 768px) {
    .hero--basic .hero__button,
    .hero--products .hero__button,
    .hero--products-application .hero__button {
        display: inline-block;
        margin-bottom: 0;
    }
}

.hero--basic .hero__link-list,
.hero--products .hero__link-list,
.hero--products-application .hero__link-list {
    margin-top: 33px;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .hero--basic .hero__link-list,
    .hero--products .hero__link-list,
    .hero--products-application .hero__link-list {
        margin-top: 46px;
    }
}

.hero--products-application .hero__container--top {
    position: relative;
    color: #FFFFFF;
}

    .hero--products-application .hero__container--top .container, .hero--products-application .hero__container--top .footer__container {
        position: relative;
    }

@media (max-width: 568px) {
    .hero--products-application .hero__container--top .container, .hero--products-application .hero__container--top .footer__container {
        padding-bottom: 0;
    }
}

.hero--products-application .hero__headline h1 {
    margin-bottom: 5px;
}

@media (min-width: 768px) {
    .hero--products-application .hero__headline h1 {
        margin-bottom: 28px;
    }
}

.hero--products-application .hero__subtitle {
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .hero--products-application .hero__subtitle {
        font-size: 30px;
        line-height: 36px;
        margin-top: -5px;
        margin-bottom: 59px;
    }
}

.hero--products-application .hero__usp-container {
    display: flex;
    align-items: flex-start;
    width: calc(100% - (12px * 3));
    margin: 0 auto;
}

@media (min-width: 569px) {
    .hero--products-application .hero__usp-container {
        width: unset;
        margin-top: 30px;
    }
}

@media (min-width: 768px) {
    .hero--products-application .hero__usp-container {
        margin-top: -6px;
    }
}

@media (max-width: 568px) {
    .hero--products-application .hero__usp-container {
        justify-content: center;
        color: #7F7F7F;
    }
}

.hero--products-application .hero__usp {
    width: calc((100% - (12px * 3)) / 3);
    max-width: 120px;
}

    .hero--products-application .hero__usp:not(:last-child) {
        margin-right: 18px;
    }

.hero--products-application .usp--icon {
    display: inline-block;
    text-align: center;
}

    .hero--products-application .usp--icon .usp__icon {
        font-size: 48px;
        margin-bottom: 5px;
    }

    .hero--products-application .usp--icon .usp__label {
        margin-bottom: -5px;
    }

@media (min-width: 569px) {
    .hero--products-application .hero__subtitle,
    .hero--products-application .hero__image--product {
        width: calc(50% - 12px);
    }
}

@media (min-width: 569px) {
    .hero--products-application .hero__image--product {
        position: absolute;
        top: 0;
        right: 0;
    }
}

.hero--products-application .hero__image--full {
    object-fit: cover;
    font-family: "object-fit: cover";
}

.hero--products-application .hero__image-overlay {
    background-color: rgba(0, 0, 0, 0.3);
}

.hero--products-application .hero__image--full, .hero--products-application .hero__image-overlay {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 320px;
}

@media (min-width: 569px) {
    .hero--products-application .hero__image--full, .hero--products-application .hero__image-overlay {
        height: 100%;
    }
}

.hero--text .content--rich p,
.hero--text .content--rich strong, .hero--text .content--rich .tablist__section .tablist__item, .tablist__section .hero--text .content--rich .tablist__item, .hero--text .content--rich .examples .examples__tabs .tablist__item, .examples .examples__tabs .hero--text .content--rich .tablist__item, .hero--text .content--rich ul, .hero--text .content--rich li {
    max-width: 768px;
}

.hero--text .content--rich * + h2 {
    margin-top: 30px;
    margin-bottom: 23px;
}

@media (min-width: 768px) {
    .hero--text .content--rich * + h2 {
        margin-top: 36px;
        margin-bottom: 29px;
    }
}

.hero--text .content--rich * + h3, .hero--text .content--rich * + q, .hero--text .content--rich .hero--basic * + .hero__subtitle, .hero--basic .hero--text .content--rich * + .hero__subtitle, .hero--text .content--rich .hero--products-application * + .hero__subtitle, .hero--products-application .hero--text .content--rich * + .hero__subtitle {
    margin-top: 30px;
}

@media (min-width: 768px) {
    .hero--text .content--rich * + h3, .hero--text .content--rich * + q, .hero--text .content--rich .hero--basic * + .hero__subtitle, .hero--basic .hero--text .content--rich * + .hero__subtitle, .hero--text .content--rich .hero--products-application * + .hero__subtitle, .hero--products-application .hero--text .content--rich * + .hero__subtitle {
        margin-top: 35px;
    }
}

.hero--video {
    position: relative;
}

.hero--video-reset p:last-child, .hero--video-reset strong:last-child, .hero--video-reset .tablist__section .tablist__item:last-child, .tablist__section .hero--video-reset .tablist__item:last-child, .hero--video-reset .examples .examples__tabs .tablist__item:last-child, .examples .examples__tabs .hero--video-reset .tablist__item:last-child {
    margin-bottom: 0;
}

.hero--video .copy--intro,
.hero--video .link--large {
    color: #FFFFFF;
}

.hero--video .link--large {
    margin: 0;
}

.hero-video__headline {
    color: #FFFFFF;
}

.hero-video__image--full {
    object-fit: cover;
    font-family: "object-fit: cover";
}

.hero-video__image--overlay {
    background-color: rgba(0, 0, 0, 0.3);
}

.hero-video__image--full,
.hero-video__image--overlay {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 320px;
}

@media (min-width: 569px) {
    .hero-video__image--full,
    .hero-video__image--overlay {
        height: 100%;
    }
}

.header {
    position: relative;
    width: 100%;
    z-index: 1000;
}

.header__top {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    height: 60px;
    padding-left: 12px;
    color: #000000;
    background-color: #FFFFFF;
}

    .header__top:before {
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        right: 60px;
        bottom: 0;
        left: 0;
        background-color: #000000;
        opacity: 0;
        transition: opacity 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    }

@media (min-width: 1025px) {
    .header__top {
        padding: 0 12px;
    }
}

@media (min-width: 1201px) {
    .header__top {
        padding: 0 24px;
    }
}

.header__top .main-nav {
    position: unset;
}

.header__top .main-nav--small {
    padding-bottom: 60px;
}

    .header__top .main-nav--small .main-nav__list {
        position: absolute;
    }

.header__top .sys-nav {
    margin-left: auto;
    transform: translateX(-72px);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (min-width: 1025px) {
    .header__top .sys-nav {
        transform: translateX(0);
    }
}

.header__search {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateX(0vw);
}

@media (min-width: 1025px) {
    .header__search {
        left: 144px;
    }
}

@media (min-width: 1201px) {
    .header__search {
        left: 210px;
    }
}

.header__top,
.header__search .search__close-button {
    border-bottom: 1px solid #EAEAEA;
}

.header--mobile-inverted {
    color: #FFFFFF;
}

    .header--mobile-inverted:before {
        opacity: 1;
    }

@media (min-width: 1025px) {
    .header--mobile-inverted {
        color: #000000;
    }

        .header--mobile-inverted:before {
            opacity: 0;
        }
}

.header--absolute {
    position: absolute;
}

.header--fixed {
    will-change: transform;
    transform: translateY(0);
    position: fixed;
    top: 0;
    width: 100vw;
}

.search-enter, .search-leave-to {
    transform: translateX(100vw);
}

.search-enter-active, .search-leave-active {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.sys-nav-slide-enter, .sys-nav-slide-leave-to {
    transform: translateX(100vw);
}

.sys-nav-slide-enter-active, .sys-nav-slide-leave-active {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.footer {
    border-top: 1px solid #F5F5F5;
    width: 100%;
}

.footer__container {
    padding-bottom: 30px;
}

.footer__primary {
    display: flex;
    flex-direction: column-reverse;
    flex-basis: 100%;
    min-width: 100%;
    margin-bottom: 60px;
}

@media (min-width: 569px) {
    .footer__primary {
        margin-bottom: 51px;
        flex-direction: row;
    }
}

@media (min-width: 569px) {
    .footer__branded-logo {
        align-self: flex-start;
        align-items: flex-start;
    }
}

@media (min-width: 1025px) {
    .footer__branded-logo {
        flex-flow: row wrap;
        align-self: flex-start;
        align-items: center;
    }
}

.footer__nav {
    text-align: left;
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-bottom: 30px;
}

@media (min-width: 569px) {
    .footer__nav {
        margin-bottom: 0;
    }
}

@media (min-width: 569px) {
    .footer__nav {
        width: 75%;
    }
}

@media (min-width: 768px) {
    .footer__nav {
        width: 80%;
        max-width: 600px;
    }
}

.footer__secondary {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 30px;
}

@media (min-width: 569px) {
    .footer__secondary {
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: space-between;
        height: 36px;
    }
}

.footer__social-nav {
    margin-bottom: 18px;
}

.footer__tertiary {
    width: 100%;
}

.footer__legal {
    text-align: center;
}

@media (min-width: 569px) {
    .footer__legal {
        text-align: left;
    }
}

.footer__locale-selector {
    display: flex;
    flex-direction: row;
}

.footer__country-selector {
    width: 320px;
    max-width: 100%;
}

.sub-nav {
    position: relative;
    display: flex;
    width: 100%;
    user-select: none;
    will-change: transform;
    transform: translateX(0);
    background-color: white;
}

@media (min-width: 768px) {
    .sub-nav {
        justify-content: center;
    }
}

.sub-nav:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #EAEAEA;
}

.sub-nav__wrapper {
    height: 150px;
    width: 100%;
}

.sub-nav__list {
    display: flex;
    padding: 24px 0 1px;
}

@media (min-width: 768px) {
    .sub-nav__list {
        flex-wrap: wrap;
    }
}

.sub-nav__item {
    flex: 0 1 auto;
    text-align: center;
    padding: 0 12px 0;
    margin: 0 0 12px 0;
}

    .sub-nav__item:first-child {
        padding-left: 24px;
    }

    .sub-nav__item:last-child {
        padding-right: 24px;
    }

@media (min-width: 768px) {
    .sub-nav__item {
        display: inline-block;
    }

        .sub-nav__item:first-child {
            padding-left: 18px;
        }

        .sub-nav__item:last-child {
            padding-right: 18px;
        }
}

.sub-nav__link {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    height: 96px;
    min-width: 60px;
    transition: height 0.1s cubic-bezier(0.23, 1, 0.32, 1);
    margin-bottom: 6px;
    color: #000000;
}

    .sub-nav__link:hover, .sub-nav__link--active {
        color: #000000;
    }

        .sub-nav__link:hover .sub-nav__label:after, .sub-nav__link--active .sub-nav__label:after {
            width: 100%;
        }

.sub-nav__image {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto 14px;
    width: 60px;
    height: 60px;
    transition: transform 0.1s 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (min-width: 768px) {
    .sub-nav__image {
        margin: 0 auto 12px;
    }
}

.sub-nav__label {
    display: inline-block;
    position: relative;
    bottom: 0;
    margin-bottom: 0;
    white-space: nowrap;
}

    .sub-nav__label:after {
        content: '';
        display: inline;
        height: 1px;
        width: 0;
        background: currentColor;
        position: absolute;
        left: 50%;
        bottom: -2px;
        transform: translateX(-50%);
        transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }

.sub-nav--collapsed .sub-nav__image {
    transform: scale(0);
    transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.sub-nav--collapsed .sub-nav__link {
    height: 18px;
    transition: height 0.2s 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

@media screen and (min-width: 568px) and (max-width: 768px) and (max-height: 420px) and (orientation: landscape) {
    .sub-nav__image {
        transform: scale(0);
        transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .sub-nav__link {
        height: 18px;
        transition: height 0.2s 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    }
}

svg text {
    font-size: 16px;
    line-height: 24px;
}

@media (max-width: 767px) {
    .ubr .ubr__image {
        margin-bottom: 30px;
    }
}

.examples .examples__card {
    display: flex;
    flex-direction: column;
}

    .examples .examples__card .card__visual {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

@media (min-width: 1025px) {
    .examples .examples__card .card__visual {
        width: 100%;
    }
}

@media screen and (min-width: 360px) and (max-width: 568px) {
    .examples .examples__card {
        flex-direction: row;
    }

        .examples .examples__card .card__visual {
            margin: 0 12px 0 0;
        }

        .examples .examples__card .card__content {
            margin: 0 0 0 12px;
        }
}

@media screen and (min-width: 320px) and (max-width: 479px) {
    .examples .examples__card .card__visual {
        flex: 0 1 50%;
    }

    .examples .examples__card .card__content {
        flex: 0 1 50%;
    }
}

@media screen and (min-width: 480px) and (max-width: 568px) {
    .examples .examples__card .card__visual {
        flex: 0 1 33.3333%;
    }

    .examples .examples__card .card__content {
        flex: 0 1 66.6666%;
    }
}

@media (min-width: 768px) {
    .examples .examples__card {
        margin-bottom: 0;
    }
}

.examples .examples__caption {
    margin-bottom: 48px;
}

.examples .examples__tabs {
    margin-bottom: 42px;
}

.examples .examples__link--large {
    margin-top: 47px;
}

[class^="flexgrid__cell"]:last-child .examples__card {
    margin-bottom: 0;
}

.colors .colors__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 18px;
}

@media (min-width: 768px) {
    .colors .colors__list {
        margin-bottom: 23px;
    }
}

.colors .colors__list-item {
    position: relative;
    margin: 0 12px 12px 0;
    padding-left: 0;
}

.colors .colors__image {
    transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 767px) {
    .colors .colors__image {
        margin-bottom: 36px;
    }
}

.colors .colors__image--loading {
    opacity: 0;
}

.colors .colors__tooltip {
    position: absolute;
    display: block;
    opacity: 0;
    left: -1000vw;
    transform: translate(calc((50% - 24px) * -1), calc(-100% - 15px));
    transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s, left 0s 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.colors .hit-area:hover .colors__tooltip,
.colors .hit-area:active .colors__tooltip,
.colors .hit-area:focus .colors__tooltip {
    opacity: 1;
    left: 0;
    transform: translate(calc((50% - 24px) * -1), calc(-100% - 9px));
    transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s, left 0s cubic-bezier(0.23, 1, 0.32, 1);
}

.colors .hit-area:hover .push--left,
.colors .hit-area:active .push--left,
.colors .hit-area:focus .push--left {
    left: -48px;
}

    .colors .hit-area:hover .push--left:after,
    .colors .hit-area:active .push--left:after,
    .colors .hit-area:focus .push--left:after {
        left: calc(100% - 36px);
    }

.colors .hit-area:hover .push--right,
.colors .hit-area:active .push--right,
.colors .hit-area:focus .push--right {
    left: 48px;
}

    .colors .hit-area:hover .push--right:after,
    .colors .hit-area:active .push--right:after,
    .colors .hit-area:focus .push--right:after {
        left: 12px;
    }

.colors .hit-area:focus {
    outline: none;
}

.explore__container {
    position: relative;
}

.explore__image-placeholder {
    position: relative;
    margin: 0 0 36px;
    overflow: hidden;
}

@media (min-width: 569px) {
    .explore__image-placeholder {
        position: absolute;
        margin: 0;
        left: 50%;
        top: 0;
        right: 0;
        bottom: 0;
    }
}

@media (max-width: 568px) {
    .explore__image-placeholder {
        padding-bottom: 60%;
    }
}

.explore__image {
    position: absolute;
    width: 100%;
    height: 100%;
}

.explore__pager {
    position: absolute;
    top: 50%;
    left: 12px;
    bottom: auto;
    transform: translateY(-50%);
}

    .explore__pager .pager__page, .explore__pager .pager__active-page {
        display: block;
    }

.explore__nav {
    background-color: transparent;
}

.explore__description {
    margin-top: -12px;
}

    .explore__description .tabbable-dl__icon {
        display: none;
    }

.explore__navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

@media (min-width: 569px) {
    .explore__description .tabbable-dl__icon {
        display: inline;
    }
}

.ecosystem__items {
    display: flex;
    flex-flow: column nowrap;
}

.ecosystem__card {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin: 0 12px 48px 12px;
}

    .ecosystem__card:last-child {
        margin-bottom: 0;
    }

    .ecosystem__card .card__visual {
        flex: 1 1 60px;
        width: 60px;
        height: 60px;
        min-width: 60px;
        max-height: 60px;
        margin: 0 24px 0 0;
    }

@media (min-width: 569px) {
    .ecosystem__items {
        flex-flow: row wrap;
        justify-content: space-around;
    }

    .ecosystem__card {
        flex: 1 1 240px;
        max-width: 240px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

        .ecosystem__card .card__visual {
            margin: 0 0 18px 0;
        }

        .ecosystem__card:last-child, .ecosystem__card:nth-last-child(2) {
            margin-bottom: 0;
        }
}

@media (min-width: 768px) {
    .ecosystem__items {
        flex-flow: row wrap;
    }

    .ecosystem__card {
        flex: 1 1 42%;
        max-width: 42%;
    }
}

@media (min-width: 1025px) {
    .ecosystem__card {
        flex: 1 1 20%;
        max-width: 20%;
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    .case {
        text-align: center;
        color: #FFFFFF;
    }
}

.case__description {
    position: absolute;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .case__description {
        position: relative;
    }
}

.case__media {
    margin: 0;
}

.case__media-placeholder {
    position: relative;
    padding-bottom: 56.25%;
    margin-bottom: 36px;
}

@media (min-width: 768px) {
    .case__media-placeholder {
        z-index: 1;
        margin-bottom: 0;
    }
}

.case__image {
    top: 0;
}

.case__image--full {
    object-fit: cover;
    font-family: "object-fit: cover";
    z-index: 1;
}

.case__image-overlay {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
}

.case__image--full, .case__image-overlay {
    position: absolute;
}

.case__link {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
}

    .case__link:hover {
        color: #FFFFFF;
    }

@media (min-width: 768px) {
    .case__link {
        z-index: unset;
        top: unset;
        left: unset;
        position: relative;
        transform: none;
        margin: 0 auto;
    }
}

.case__paragraph {
    position: relative;
}

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

.case__flex-grid--center {
    position: absolute;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
    .case__flex-grid--center {
        z-index: 3;
    }
}

.brands__grid:not(:last-child) {
    margin: 0 0 48px 0;
}

.brands__grid-cell {
    margin: 0 0 48px 0;
}

    .brands__grid-cell:last-child {
        margin: 0;
    }

.brands--large .brand-card__image-wrapper {
    width: 200px;
    height: 200px;
    margin: 0 auto 24px auto;
}

.brands--large .brands__body {
    margin-bottom: 48px;
}

@media (min-width: 768px) {
    .brands__grid-cell {
        margin: 0;
    }
}

.general-content__image-wrapper {
    max-width: 400px;
    margin: 36px auto -60px auto;
}

.general-content__image {
    width: 75%;
    margin: 0 auto;
}

.general-content__item:last-child {
    margin-bottom: 0;
}

@media (min-width: 569px) {
    .general-content__image-wrapper {
        position: absolute;
        left: 6px;
        right: 12px;
        bottom: -60px;
        margin: auto;
        padding: 0 6px;
    }

    .general-content__image {
        width: 100%;
        margin: auto;
    }
}

.resellers__title {
    text-align: center;
    position: relative;
}

.resellers__tooltip {
    font-size: 14px;
    line-height: 21px;
    max-width: 296px;
    position: absolute;
    opacity: 1;
    transform: translateY(calc(-100% - 36px));
}

    .resellers__tooltip:after {
        left: 12px;
    }

.tooltip-enter, .tooltip-leave-to {
    opacity: 0;
    transform: translateY(calc(-100% - 42px));
}

.tooltip-enter-active, .tooltip-leave-active {
    transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s, left 0s cubic-bezier(0.23, 1, 0.32, 1);
}

.reseller-section:not(:last-child) {
    margin-bottom: 53px;
}

.reseller-section:last-child {
    margin-bottom: -12px;
}

@media (min-width: 768px) {
    .reseller-section:last-child {
        margin-bottom: -24px;
    }
}

.reseller-section__header {
    font-size: 18px;
    line-height: 24px;
    margin-top: 6px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .reseller-section__header {
        font-size: 20px;
        line-height: 24px;
        margin-top: 5px;
        margin-bottom: 31px;
    }
}

.reseller-section__header .reseller-section__info-link {
    margin: 10px 0 0 0;
}

@media (min-width: 569px) {
    .reseller-section__header {
        flex-direction: row;
        display: flex;
        align-items: baseline;
    }

        .reseller-section__header .reseller-section__info-link {
            margin-left: 24px;
            margin-top: 0;
            margin-bottom: -4px;
        }
}

.reseller-section__title,
.reseller-section__info-link {
    margin: 0;
}

.reseller-section__count {
    color: #7F7F7F;
    font-size: .75em;
}

.reseller-list__button {
    margin: 24px 0 12px 0;
}

@media (min-width: 768px) {
    .reseller-list__button {
        margin: 24px 0 24px 0;
    }
}

.flexgrid__cell--reseller-list__button--center {
    text-align: center;
}

.materials__title {
    text-align: center;
    position: relative;
}

.material-section:not(:last-child) {
    margin-bottom: 53px;
}

.material-section:last-child {
    margin-bottom: -12px;
}

@media (min-width: 768px) {
    .material-section:last-child {
        margin-bottom: -24px;
    }
}

.material-section__header {
    font-size: 18px;
    line-height: 24px;
    margin-top: 6px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .material-section__header {
        font-size: 20px;
        line-height: 24px;
        margin-top: 5px;
        margin-bottom: 31px;
    }
}

.material-section__title {
    margin: 0;
}

.material-section__count {
    color: #7F7F7F;
    font-size: .75em;
}

.material-list__item {
    height: 100%;
    display: flex;
}

.material-list__button {
    margin: 24px 0 12px 0;
}

@media (min-width: 768px) {
    .material-list__button {
        margin: 24px 0 24px 0;
    }
}

.flexgrid__cell--material-list__button--center {
    text-align: center;
}

.hardcoded {
    color: red !important;
}

.validation--required {
    color: #EA5354 !important;
}

.disable-focus:focus, .disable-focus:active {
    color: inherit !important;
    background: inherit !important;
    outline: inherit !important;
    border: inherit !important;
}