html,
html body,
body,
main,
h1,
hr,
pre,
a,
abbr[title],
b,
strong,
code,
kbd,
samp,
small,
sub,
sup,
sub,
sup,
img,
button,
input,
optgroup,
select,
textarea,
button,
input,
button,
select,
button,
[type='button'],
[type='reset'],
[type='submit'],
fieldset,
legend,
progress,
textarea,
[type='checkbox'],
[type='radio'],
[type='search'],
details,
summary,
template,
[hidden],
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
ul,
.layout-content a,
.layout-content a svg,
.visually-hidden,
pre,
code,
code span,
pre .hljs,
.page-error,
.page-error .messages,
.page-error .page-error__title,
.secondary-navigation,
.secondary-navigation .secondary-navigation__link,
.secondary-navigation .secondary-navigation__top-level,
.secondary-navigation .link-list,
.secondary-navigation .link-list .link-list__heading,
.secondary-navigation .link-list .link-list__list,
.secondary-navigation .secondary-navigation__down-arrow,
.secondary-navigation .secondary-navigation__arrow,
.subscribe-blog,
.subscribe-blog .subscribe-blog__button,
.subscribe-blog-fullwidth,
.subscribe-blog-fullwidth .subscribe-content,
.subscribe-blog-fullwidth .content-grid .content-grid__list,
.subscribe-blog-fullwidth .content-grid .content-grid__list .content-grid__item,
.subscribe-blog-fullwidth .sb-title,
.subscribe-blog-fullwidth .sb-description,
.subscribe-blog-individual,
.subscribe-blog-individual .subscribe-content,
.subscribe-blog-individual .subscribe-blog__button,
.subscribe-blog-individual .sb-title,
.subscribe-blog-individual .sb-description,
.subscribe-modal,
.subscribe-modal .modal-content,
.subscribe-modal .modal-title,
.subscribe-modal .close,
#subscribeModalButton,
.page,
.search .search__header,
.search .search__inner,
.search .search__form,
.search .search__icon,
.search .search__input,
.search #inbenta-search-container,
.search #inbenta-search-container .inbenta-search,
.search #inbenta-search-container .inbenta-search-autocompleter,
.search #inbenta-search-container .inbenta-search__wrapper,
.content-grid .content-grid__list,
.content-grid .content-grid__item,
.content-grid .content-grid__pager,
.content-strip,
.content-strip .content-strip__item,
.cta,
.cta .cta__title,
.cta .cta__title2,
.cta .cta__text,
.cta .cta__links,
.cta .cta__links,
.featured-video,
.featured-video .featured-video__element,
.featured-video .featured-video__content,
.featured-video .featured-video__element,
.featured-video .featured-video__element iframe,
.featured-video .featured-video__content,
.featured-video .featured-video__eyebrow,
.featured-video .featured-video__title,
.featured-video .featured-video__title,
.quote,
.quote .quote__text,
.quote .quote__icon,
.quote .quote__meta,
.quote .quote__author,
.rich-text .quote,
.rich-text .quote .quote__icon,
.statistic,
.statistic .statistic__title,
.statistic .statistic__description,
.teaser-header,
.teaser-header .teaser-header__top,
.video,
.video .video__iframe,
.video .video__button,
.video .video__button .video__button-icon,
.video .video__button .video__button-text,
.messages,
.messages__item,
.messages__icon,
.messages a,
.messages ul,
.tabs,
.tabs__list,
.tabs__item,
.tabs a,
.tabs a.is-active,
.layout-content .button,
.layout-content .icon-link,
.layout-content .icon-link .icon-link__icon,
.link-list__text,
.link-list__pointer,
.link-list__ac-logo,
.locale-switcher,
.pager,
.pager__items,
.pager__item,
.pager__item a,
.pager__text,
.pager__arrow,
.rich-text p,
.rich-text p,
.rich-text li,
.rich-text blockquote,
.rich-text blockquote p,
.rich-text img,
.rich-text .align-left,
.rich-text .align-right,
.rich-text .align-left,
.rich-text .align-right,
.rich-text figure,
.rich-text figure img,
.rich-text figure.align-left,
.rich-text figure.align-right,
.rich-text figcaption,
.rich-text div[data-embed-button='customer_quote'],
.rich-text div[data-embed-button='basic_cta'],
.layout-content .social-links__list,
.layout-content .social-links__item,
.layout-content .social-links__label,
.layout-content .social-links__link,
.layout-content .social-links .social-links__icon,
table,
table th,
table th,
table td,
table caption,
.tag-list__label,
.tag-list__list,
.tag-list .tag-list__list-item,
.tag-list .tag-list__list-item a,
.teaser,
.teaser .teaser__image,
.teaser .teaser__logo,
.teaser .teaser__title,
.teaser .teaser__abstract,
.teaser .teaser__meta,
.teaser .teaser__watch-video,
.teaser .teaser__arrow,
.teaser .teaser__title,
.teaser .teaser__abstract,
.teaser .teaser__meta,
.teaser .teaser__meta .teaser__readmore,
.teaser .teaser__watch-video,
.teaser .teaser__arrow,
.teaser .teaser__image,
.teaser .teaser__logo svg,
.footer .footer-navigation,
.footer__legal,
.footer__locale-switcher,
.footer-legal,
.footer-legal__inner,
.footer-legal__content,
.footer-legal__locale-switcher,
.footer-legal__copyright,
.footer-legal .link-list,
.footer-legal .link-list ul,
.footer-legal .link-list li,
.footer-legal .link-list a,
.footer-navigation,
.footer-navigation__inner,
.footer-navigation .link-list,
.layout-content .social,
.layout-content .social__inner,
.layout-content .social__links,
.layout-content .social__link,
.layout-content .social__link-icon,
.layout-content .social__apps,
.layout-content .social__app,
.layout-content .social__app-image,
.footer-trending,
.footer-trending__inner,
.footer-trending .link-list,
.navigation-control,
.navigation-control__hamburger,
.navigation-control__hamburger svg,
.navigation-control__hamburger .hamburger-icon,
.navigation-control__hamburger .hamburger-icon div,
.navigation-control__close,
.navigation-control__close svg,
.navigation-control__close .close-icon,
.navigation-control[aria-expanded='true'] .navigation-control__hamburger,
.navigation-control[aria-expanded='true'] .navigation-control__close,
.navigation-crown,
.navigation-crown__inner,
.navigation-crown ul,
.navigation-crown li,
.navigation-crown__text,
.navigation-crown__login,
.navigation-cta,
.navigation-cta__item,
.navigation-menu,
.navigation-menu ul,
.navigation-menu h1,
.navigation-menu .navigation-menu__logo,
.navigation-menu .navigation-menu__logo img,
.navigation-menu .navigation-menu__heading,
.navigation-menu .navigation-menu__heading-back,
.navigation-menu .navigation-menu__menu > ul,
.navigation-menu .navigation-menu__menu > ul li a,
.navigation,
.navigation .navigation-control,
.navigation .navigation__main,
.navigation .navigation__center,
.navigation .navigation-crown,
.navigation .navigation-cta,
body.menu-open,
body.menu-open .navigation,
body.menu-open .navigation.ios-only,
.navigation-search,
.navigation-search .search-button,
.navigation-search .navigation-form-icon,
.navigation-search .search-button,
.navigation-search .navigation-form-icon,
.navigation-search .navigation-search__form,
.navigation-search .navigation-search__form-wrapper,
.navigation-search .navigation-search__lens-icon,
.navigation-search .navigation-search__close,
.navigation-search .navigation-search__close-cross,
.navigation-search .navigation-search__close-pointer,
.navigation-search .navigation-search__close-text,
.navigation-search input[type='text'],
.navigation-search.search-visible,
.navigation-search.search-visible .navigation__main,
.navigation-search.search-visible .navigation-crown,
.navigation-search.search-visible .navigation-cta,
.navigation-search.search-visible .navigation-search__form-wrapper,
.navigation-search.search-visible .navigation-search__form,
.navigation-search.search-visible .navigation-search__form label,
.navigation-search-icon {
margin: 0;
padding: 0;
border: 0;
}
:root {
/* Basic settings for all transitions. */
--trans-time-m: 0.15s;
--trans-easing-m: ease-in-out;
}
:root {
--viewport-2xl-value: 90rem;
--viewport-2xl-column-width: calc(
(var(--viewport-2xl-value) - (15 * var(--gutter))) / 14
);
/* max width minus two columns and minus 6 gutters. */
--viewport-2xl-content-width: calc(
var(--viewport-2xl-value) - (var(--viewport-2xl-column-width) * 2) -
(var(--gutter) * 6)
);
}
/* 375px */
/* 540px, S in Abstract */
/* 720px, M in Abstract */
/* 960px */
/* 1024px, L in Abstract */
/* 1168px */
/* 1220px, XL in Abstract */
/* 1440px, XXL in Abstract */
/* 1640px */
:root {
/* Product Neutral */
--product-neutral--1-10: #f8f3f0;
--product-neutral--1-40: #ede9e4;
--product-neutral--1-90: #e2ddd6;
--product-neutral--2-50: #d5d2c9;
--product-neutral--3-22: #c4c2bb;
--product-neutral--4-51: #76748e;
--product-neutral--5-82: #65627f;
--product-neutral--9-18: #63625e;
--product-neutral--13-99: #474643;
--product-neutral--17-55: #130032;
--product-neutral: var(--product-neutral--17-55);
/* Marketing Neutral */
--marketing-neutral--1-06: #f6f8fa;
--marketing-neutral--1-37: #dadcde;
--marketing-neutral--1-88: #bcbdbf;
--marketing-neutral--2-49: #a3a4a6;
--marketing-neutral--3-2: #8f9092;
--marketing-neutral--4-54: #767677;
--marketing-neutral--5-82: #656566;
--marketing-neutral--9-14: #484849;
--marketing-neutral--13-95: #2c2c2d;
--marketing-neutral--17-58: #191919;
--marketing-neutral: var(--marketing-neutral--17-58);
/* Green */
--green--1-10: #d3ffdf;
--green--1-72: #13e280;
--green--2-50: #33ffb6;
--green--4-53: #08884b;
--green--5-79: #06753f;
--green--9-10: #004d30;
--dark-green: #2cbb54;
--green: var(--green--1-72);
/* Cobalt */
--cobalt-10: #ede5ff;
--cobalt-20: #cbc2ff;
--cobalt-30: #ab7fff;
--cobalt-40: #8a55ff;
--cobalt-50: #7a43fc;
--cobalt-60: #4c00ff;
--cobalt-70: #4000cc;
--cobalt-80: #330099;
--cobalt-90: #26065d;
--cobalt: var(--cobalt-60);
/* Indigo */
--indigo: var(--cobalt-80);
/* Teal */
--teal: var(--fuchsia);
/* Blue */
--blue--1-10: var(--cobalt-10);
--blue--1-39: var(--cobalt-20);
--blue--1-90: var(--cobalt-30);
--blue--2-49: var(--cobalt-40);
--blue--3-19: var(--cobalt-50);
--blue--4-52: var(--cobalt);
--blue--5-80: var(--cobalt-20);
--blue--9-19: var(--cobalt-80);
--blue--13-95: var(--cobalt-90);
--blue--17-69: var(--cobalt-90);
--blue: var(--blue--4-52);
/* Cool Red */
--cool-red--1-10: #ffebeb;
--cool-red--1-38: var(--fuchsia);
--cool-red--1-77: var(--fuchsia);
--cool-red--2-45: #f99;
--cool-red--3-15: #ff5252;
--cool-red--4-54: #de2d59;
--cool-red--5-79: #c1244b;
--cool-red--9-21: #9d0c0c;
--cool-red--14-02: var(--fuchsia);
--cool-red--17-60: var(--fuchsia);
--cool-red: var(--cool-red--4-54);
/* Warm Red */
--warm-red--1-10: var(--cool-red--1-10);
--warm-red--1-45: var(--fuchsia);
--warm-red--1-90: var(--fuchsia);
--warm-red--2-50: var(--cool-red--2-45);
--warm-red--3-19: var(--cool-red--3-15);
--warm-red--4-50: var(--fuchsia);
--warm-red--5-78: var(--fuchsia);
--warm-red--9-14: var(--cool-red--9-21);
--warm-red--13-95: var(--fuchsia);
--warm-red--17-60: var(--fuchsia);
--warm-red: var(--warm-red--3-19);
/* Yellow */
--yellow--1-08: #faffc5;
--yellow--1-40: var(--fuchsia);
--yellow--1-88: var(--fuchsia);
--yellow--2-37: #f0f990;
--yellow--3-09: var(--fuchsia);
--yellow--4-51: var(--fuchsia);
--yellow--5-93: var(--fuchsia);
--yellow--9-10: #434904;
--yellow--14-00: var(--fuchsia);
--yellow--17-57: var(--fuchsia);
--yellow: var(--yellow--1-40);
/* Pink */
--pink: #f09;
--fuchsia: #fb00e2;
/* Purple */
--purple: #983dd8;
/* White */
--white: #fff;
/* Mist */
--mist: #cbc2ff;
/* Ecru */
--ecru: #f8f4f0;
/* Inkwell */
--inkwell: #130032;
/* Inkwell */
--deep-violet: #26065d;
/* Agreement Cloud palete */
--ac-magenta: #ff3bdd;
--ac-blue: #0bc6ff;
--ac-green: #0e0;
--ac-yellow: #d6fb00;
/* Text Colors */
--text-white: #fff;
--text-black: #130032;
--text-dark: var(--marketing-neutral);
--text-dark-hover: var(--marketing-neutral--9-14);
--text-light: var(--marketing-neutral--5-82);
--text-accent: var(--blue);
--text-accent-hover: var(--cobalt);
--text-teal: var(--cobalt-60);
--text-small-teal: var(--cobalt-60);
--text-gray-lighter: var(--marketing-neutral--2-49);
--text-blue-dark: var(--blue--9-19);
--text-code-inline: var(--cool-red--4-54);
--text-secondary-dark: #130032;
--rich-text-color: rgba(#130032, 0.75);
/* Rules. */
--rule-on-white: #000;
--rule-on-light: var(--product-neutral--1-90);
--rule-on-dark: var(--marketing-neutral--1-06);
--rule-on-product-neutral: var(--product-neutral--17-55);
--rule-on-black-secondary: var(--marketing-neutral--2-49);
/* Backgrounds. */
--bg-black: #000;
--bg-white: #fff;
--bg-white-shade: #fff;
--bg-solid-accent: var(--cobalt-70);
--bg-gradient-accent: linear-gradient(
90deg,
var(--cobalt-70) 0%,
var(--cobalt-80) 35%,
var(--cobalt-90) 60%
);
/* Accessible backgrounds. */
--bg-green: var(--green--4-53);
--bg-dark-green: var(--dark-green);
--bg-blue: var(--blue--5-80);
--bg-light-blue: var(--blue);
--bg-indigo: var(--cobalt-60);
--bg-cool-red: var(--cool-red--4-54);
--bg-warm-red: var(--warm-red--4-50);
--bg-yellow: var(--yellow--4-51);
--bg-gray: var(--marketing-neutral);
--bg-gray-light: var(--marketing-neutral--1-06);
--bg-gray-middle-light: var(--marketing-neutral--5-82);
--bg-gray-dark: var(--marketing-neutral--13-95);
--bg-pink: var(--pink);
--bg-purple: var(--purple);
--bg-cobalt: var(--cobalt);
--bg-mist: var(--mist);
--bg-ecru: var(--ecru);
--bg-inkwell: var(--inkwell);
--bg-deep-violet: var(--deep-violet);
--bg-cobalt-40: var(--cobalt-40);
--bg-cobalt-50: var(--cobalt-50);
/* Borders. */
--border-color: var(--text-black);
--border-color-white: var(--bg-white);
--border-color-light: var(--marketing-neutral--1-37);
--border-on-black: var(--marketing-neutral--13-95);
--border-on-black-hover: var(--marketing-neutral--5-82);
--border-field-on-black: var(--marketing-neutral--9-14);
--border-color-blue: var(--blue);
--border-color-grey: var(--text-secondary-dark);
/* Box Shadow */
--box-shadow-color: rgba(17, 16, 25, 0.25);
--box-shadow-color-2: var(--text-secondary-dark);
}
:root {
/* Vertical spacing. */
--v-space-2xs: 0.5rem;
/* 8px */
--v-space-xs: 1rem;
/* 16px */
--v-space-s: 1.25rem;
/* 20px */
--v-space-2s: 1.5rem;
/* 24px */
--v-space-m: 2rem;
/* 32px */
--v-space-l: 2.25rem;
/* 36px */
--v-space-xl: 3rem;
/* 48px */
--v-space-2xl: 4rem;
/* 64px */
--v-space-3xl: 6.5rem;
/* 104px */
--v-space-4xl: 7rem;
/* 112px */
--v-space-5xl: 8rem;
/* 128px */
--v-space-huge: 11.875rem;
/* 190px */
/* Horizontal spacing. */
--gutter: 1.25rem;
/* 20px */
--h-space-xs: 1rem;
/* 16px */
--h-space-xl: 3rem;
/* 48px */
}
/*
* Don't use these, use the native CSS variables instead.
* This is here because the postcss-responsive-type plugin doesn't
* support CSS variables.
*/
/* 12px */
/* 14px */
/* 15px */
/* 16px */
/* 18px */
/* 20px */
/* 24px */
/* 30px */
/* 32px */
/* 36px */
/* 40px */
/* 48px */
/* 62px */
/* 80px */
/* 90px */
/* 120px */
:root {
/**
* Font sizes.
*/
--font-size-4xs: 0.75rem;
/* 12px */
--font-size-3xs: 0.875rem;
/* 14px */
--font-size-2xs: 0.937rem;
/* 15px */
--font-size-xs: 1rem;
/* 16px */
--font-size-2s: 1.125rem;
/* 18px */
--font-size-s: 1.25rem;
/* 20px */
--font-size-m: 1.5rem;
/* 24px */
--font-size-1m: 1.875rem;
/* 30px */
--font-size-2m: 2rem;
/* 32px */
--font-size-l: 2.25rem;
/* 36px */
--font-size-2l: 2.5rem;
/* 40px */
--font-size-xl: 3rem;
/* 48px */
--font-size-2xl: 3.875rem;
/* 62px */
--font-size-3xl: 5rem;
/* 80px */
--font-size-4xl: 5.625rem;
/* 90px */
--font-size-5xl: 7.5rem;
/* 120px */
/* Body Styles */
--font-size-s-body: var(--font-size-3xs);
/* 14px */
--font-size-m-body: var(--font-size-xs);
/* 16px */
--font-size-l-body: var(--font-size-s);
/* 20px */
/**
* Line height.
*/
--line-height-s: 1.0667;
--line-height-m: 1.1667;
--line-height-l: 1.333;
--line-height-xl: 1.5;
--line-height-2xl: 1.6;
}
:root {
/**
* Reusable transitions.
*/
--trans-bg-color: background-color var(--trans-time-m) var(--trans-easing-m);
--trans-color: color var(--trans-time-m) var(--trans-easing-m);
--trans-fill: fill var(--trans-time-m) var(--trans-easing-m);
--trans-opacity: opacity var(--trans-time-m) var(--trans-easing-m);
--trans-transform: transform var(--trans-time-m) var(--trans-easing-m);
--trans-filter: filter var(--trans-time-m) var(--trans-easing-m);
}
:root {
--border-base: 2px solid var(--border-color);
--border-base-white: 2px solid var(--border-color-white);
--border-light: 1px solid var(--border-color-light);
--border-light-on-black: 1px solid var(--border-on-black);
/* Border radius. */
--radius-s: 2px;
--radius-m: 4px;
--radius-l: 0.5rem;
--radius-xl: 1rem;
--radius-circle: 50%;
}
/**
* Extendable text styles.
*/
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
* 3. Set border-box https://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
box-sizing: border-box;
}
html body {
color: #130032;
color: var(--text-secondary-dark);
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
/* stylelint-disable-next-line font-family-no-duplicate-names */
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
/* stylelint-disable-next-line font-family-no-duplicate-names */
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type='checkbox'],
[type='radio'] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* Updates here might also need mirroring to services/inbenta/src/css/_fonts.scss */
@font-face {
font-family: 'DSIndigo';
src: url('https://docucdn-a.akamaihd.net/olive/fonts/2.8.0/DSIndigo-Bold.woff2')
format('woff2'),
url('https://docucdn-a.akamaihd.net/olive/fonts/2.8.0/DSIndigo-Bold.woff')
format('woff');
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'DSIndigo';
src: url('https://docucdn-a.akamaihd.net/olive/fonts/2.8.0/DSIndigo-Medium.woff2')
format('woff2'),
url('https://docucdn-a.akamaihd.net/olive/fonts/2.8.0/DSIndigo-Medium.woff')
format('woff');
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'DSIndigo';
src: url('https://docucdn-a.akamaihd.net/olive/fonts/2.8.0/DSIndigo-Regular.woff2')
format('woff2'),
url('https://docucdn-a.akamaihd.net/olive/fonts/2.8.0/DSIndigo-Regular.woff')
format('woff');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'DSIndigo';
src: url('https://docucdn-a.akamaihd.net/olive/fonts/2.8.0/DSIndigo-Semibold.woff2')
format('woff2'),
url('https://docucdn-a.akamaihd.net/olive/fonts/2.8.0/DSIndigo-Semibold.woff')
format('woff');
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'NotoMono';
src: url('/themes/custom/cubic/build/asset/font/NotoMono-Regular-webfont.woff')
format('woff');
font-weight: 400;
font-display: swap;
}
body {
font-family: 'DSIndigo', Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 1rem;
font-size: var(--font-size-m-body);
font-weight: 400;
line-height: 1.5;
line-height: var(--line-height-xl);
color: #130032;
color: var(--text-secondary-dark);
}
h1 {
margin: 2rem 0;
margin: var(--v-space-m) 0;
font-size: 1.5rem;
font-size: var(--font-size-m);
font-weight: 600;
line-height: 1.333;
line-height: var(--line-height-l);
}
@media (min-width: 60rem) {
h1 {
font-size: 3rem;
font-size: var(--font-size-xl);
line-height: 1.0667;
line-height: var(--line-height-s);
}
}
h2 {
margin: 1.25rem 0;
margin: var(--v-space-s) 0;
font-size: 1.25rem;
font-size: var(--font-size-s);
font-weight: 400;
line-height: 1.333;
line-height: var(--line-height-l);
}
@media (min-width: 60rem) {
h2 {
font-size: 2.25rem;
font-size: var(--font-size-l);
line-height: 1.1667;
line-height: var(--line-height-m);
}
}
h3 {
margin: 1rem 0;
margin: var(--v-space-xs) 0;
font-size: 1rem;
font-size: var(--font-size-xs);
font-weight: 600;
line-height: 1.333;
line-height: var(--line-height-l);
}
@media (min-width: 60rem) {
h3 {
font-size: 1.5rem;
font-size: var(--font-size-m);
}
}
h4 {
margin: 1rem 0;
margin: var(--v-space-xs) 0;
font-size: 0.937rem;
font-size: var(--font-size-2xs);
font-weight: 600;
line-height: 1.333;
line-height: var(--line-height-l);
}
@media (min-width: 60rem) {
h4 {
font-size: 1.25rem;
font-size: var(--font-size-s);
}
}
h5 {
margin: 1rem 0;
margin: var(--v-space-xs) 0;
font-size: 0.875rem;
font-size: var(--font-size-3xs);
font-weight: 600;
line-height: 1.333;
line-height: var(--line-height-l);
}
@media (min-width: 60rem) {
h5 {
font-size: 1rem;
font-size: var(--font-size-xs);
}
}
h6 {
margin-top: 1rem 0;
margin-top: var(--v-space-xs) 0;
font-size: 0.875rem;
font-size: var(--font-size-3xs);
font-weight: 600;
line-height: 1.333;
line-height: var(--line-height-l);
}
@media (min-width: 60rem) {
h6 {
font-size: 0.937rem;
font-size: var(--font-size-2xs);
}
}
p {
line-height: 1.5;
line-height: var(--line-height-xl);
margin: 1rem 0;
margin: var(--v-space-xs) 0;
}
@media (min-width: 45rem) {
p {
margin-top: 2rem;
margin-top: var(--v-space-m);
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
}
}
ul,
ol {
line-height: 1.5;
margin: 1rem 0;
margin: var(--v-space-xs) 0;
padding-left: 2rem;
padding-left: var(--v-space-m);
}
ul {
list-style: disc;
}
a {
line-height: 1.4;
text-decoration: none;
}
.layout-content a,
.layout-content a svg {
color: #4c00ff;
color: var(--text-accent);
fill: #4c00ff;
fill: var(--text-accent);
transition-property: color, fill;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
}
.layout-content a:hover,
.layout-content a:hover svg {
color: #4c00ff;
color: var(--text-accent-hover);
fill: #4c00ff;
fill: var(--text-accent-hover);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
:root {
/* Basic reusable full sub-grid settings for grid-template-columns. */
--subgrid-6col: repeat(6, 1fr);
--subgrid-12col: repeat(12, 1fr);
/* Basic reusable grid settings for grid-template-columns. */
--grid-6col: var(--gutter) var(--subgrid-6col) var(--gutter);
--grid-12col: var(--gutter) var(--subgrid-12col) var(--gutter);
--grid-14col: minmax(0, auto)
repeat(14, minmax(0, var(--viewport-2xl-column-width))) minmax(0, auto);
}
/* This is going to be deprecated. Use %layout--full-width-grid instead. */
@media (min-width: 73rem) {
}
@media (min-width: 76.25rem) {
}
@supports (font-size: calc(100vw)) {
@media (min-width: 64rem) {
}
@media (min-width: 76.25rem) {
}
}
/* This layout fully uses grid i.e. no margin: auto either side.
* Useful if you need to have a background image or horizontal border
* running the full width of the page.
*/
@supports (display: grid) {
}
@media (min-width: 45rem) {
}
@media (min-width: 64rem) {
}
@media (min-width: 76.25rem) {
}
@media (min-width: 76.25rem) {
}
@media (min-width: 64rem) {
}
@media (min-width: 64rem) {
}
.embeddedServiceHelpButton .embeddedServiceIcon::before {
font-family: 'embeddedserviceiconfont' !important;
}
/*
.hljs is the class that highlight.js adds.
Any styling that applies to code snippets that are added via the code snippet
plugin in the wysiwyg are delegated to highlight.js.
*/
pre,
code,
code span {
font-family: 'NotoMono', monospace;
}
pre,
code:not(.hljs) {
max-width: 100%;
overflow: hidden;
white-space: pre-wrap;
}
code:not(.hljs) {
color: #de2d59;
color: var(--text-code-inline);
}
pre {
background: #f6f8fa;
background: var(--marketing-neutral--1-06);
display: block;
margin: 4rem 0;
margin: var(--v-space-2xl) 0;
overflow: auto;
padding: 2.25rem 2rem;
padding: var(--v-space-l) var(--v-space-m);
}
pre .hljs {
background-color: #f6f8fa;
background-color: var(--marketing-neutral--1-06);
white-space: pre;
}
h1 + pre,
h1 + code:not(.hljs),
h2 + pre,
h2 + code:not(.hljs),
h3 + pre,
h3 + code:not(.hljs),
h4 + pre,
h4 + code:not(.hljs),
h5 + pre,
h5 + code:not(.hljs),
h6 + pre,
h6 + code:not(.hljs) {
margin-top: 2.25rem;
margin-top: var(--v-space-l);
}
.page-error {
max-width: 90rem;
margin-left: auto;
margin-right: auto;
padding-right: 1.25rem;
padding-right: var(--gutter);
padding-left: 1.25rem;
padding-left: var(--gutter);
}
@media (min-width: 73rem) {
.page-error {
padding-right: calc(2 * 1.25rem);
padding-right: calc(2 * var(--gutter));
padding-left: calc(2 * 1.25rem);
padding-left: calc(2 * var(--gutter));
}
}
@media (min-width: 76.25rem) {
.page-error {
padding-right: 1.25rem;
padding-right: var(--gutter);
padding-left: 1.25rem;
padding-left: var(--gutter);
}
}
@supports (font-size: calc(100vw)) {
.page-error {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
}
@supports (font-size: calc(100vw)) {
@media (min-width: 64rem) {
.page-error {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
}
@supports (font-size: calc(100vw)) {
@media (min-width: 76.25rem) {
.page-error {
grid-template-columns: repeat(14, minmax(0, 1fr));
}
}
}
.page-error {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
margin-bottom: 6.5rem;
margin-bottom: var(--v-space-3xl);
}
@media (min-width: 64rem) {
.page-error {
margin-top: 6.5rem;
margin-top: var(--v-space-3xl);
margin-bottom: 11.875rem;
margin-bottom: var(--v-space-huge);
}
}
.page-error .messages {
max-width: none;
grid-column: 1 / span 6;
padding: 0;
margin: 0 0 2rem 0;
margin: 0 0 var(--v-space-m) 0;
}
@media (min-width: 64rem) {
.page-error .messages {
grid-column: 2 / span 10;
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
}
@media (min-width: 76.25rem) {
.page-error .messages {
grid-column: 2 / span 12;
}
}
.page-error .page-error__title {
grid-column: 1 / span 6;
margin: 0;
font-size: 1.5rem;
font-size: var(--font-size-m);
line-height: 1.333;
line-height: var(--line-height-l);
}
@media (min-width: 33.75rem) {
.page-error .page-error__title {
grid-column: 1 / span 5;
font-size: 2.25rem;
font-size: var(--font-size-l);
line-height: 1.1667;
line-height: var(--line-height-m);
}
}
@media (min-width: 45rem) {
.page-error .page-error__title {
grid-column: 1 / span 4;
}
}
@media (min-width: 64rem) {
.page-error .page-error__title {
grid-column: 2 / span 10;
font-size: 3.875rem;
font-size: var(--font-size-2xl);
line-height: 1.0667;
line-height: var(--line-height-s);
}
}
@media (min-width: 76.25rem) {
.page-error .page-error__title {
grid-column: 2 / span 9;
}
}
@media (min-width: 90rem) {
.page-error .page-error__title {
grid-column: 2 / span 8;
}
}
.page-error .page-error__text--404 {
grid-column: 1 / span 6;
font-size: 1.25rem;
font-size: var(--font-size-s);
font-weight: 600;
line-height: 1.333;
line-height: var(--line-height-l);
}
@media (min-width: 33.75rem) {
.page-error .page-error__text--404 {
grid-column: 1 / span 5;
font-size: 1.5rem;
font-size: var(--font-size-m);
line-height: 1.333;
line-height: var(--line-height-l);
}
}
@media (min-width: 45rem) {
.page-error .page-error__text--404 {
grid-column: 1 / span 4;
}
}
@media (min-width: 64rem) {
.page-error .page-error__text--404 {
grid-column: 2 / span 6;
}
}
.page-error .page-error__cta--404 {
grid-column: 1 / span 6;
margin-top: 1rem;
margin-top: var(--v-space-xs);
}
@media (min-width: 64rem) {
.page-error .page-error__cta--404 {
grid-column: 2 / span 6;
}
}
.secondary-navigation {
border-top: 1px solid #dadcde;
border-top: var(--border-light);
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
display: flex;
justify-content: space-between;
}
.secondary-navigation .secondary-navigation__link {
padding: 1.25rem calc(1.25rem * 0.5);
padding: var(--gutter) calc(var(--gutter) * 0.5);
white-space: nowrap;
cursor: pointer;
background: #fff;
background: var(--text-white);
}
@media (min-width: 45rem) {
.secondary-navigation .secondary-navigation__link {
padding-left: 1.25rem;
padding-left: var(--gutter);
padding-right: 1.25rem;
padding-right: var(--gutter);
}
}
.secondary-navigation .secondary-navigation__link:first-child {
padding-left: 1.25rem;
padding-left: var(--gutter);
}
.secondary-navigation .secondary-navigation__link:last-child {
padding-right: 1.25rem;
padding-right: var(--gutter);
}
.secondary-navigation .secondary-navigation__link > a,
.secondary-navigation .secondary-navigation__link > a:visited,
.secondary-navigation
.secondary-navigation__link
.secondary-navigation__dropdown-text {
color: #130032;
color: var(--text-black);
font-size: 1rem;
font-size: var(--font-size-xs);
line-height: 1.5;
line-height: var(--line-height-xl);
font-weight: 600;
}
.secondary-navigation .secondary-navigation__link:hover,
.secondary-navigation .secondary-navigation__link:focus {
background: #f6f8fa;
background: var(--rule-on-dark);
}
/* Separate rule as IE11 will throw away the entire rule if it doesn't
understand all selectors */
.secondary-navigation .secondary-navigation__link:focus-within {
background: #f6f8fa;
background: var(--rule-on-dark);
}
.secondary-navigation .secondary-navigation__link--dropdown {
padding: 1.25rem;
padding: var(--gutter);
}
.secondary-navigation .secondary-navigation__top-level {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
list-style-type: none;
}
.secondary-navigation .link-list {
position: absolute;
left: 0;
width: 100%;
z-index: 10;
/* Can't use margin otherwise the menu will lose focus */
padding-top: 1.25rem;
padding-top: var(--gutter);
background: none;
}
@media (min-width: 45rem) {
.secondary-navigation .link-list {
left: inherit;
width: inherit;
padding-top: calc(1.25rem + 2px);
padding-top: calc(var(--gutter) + 2px);
margin-left: calc(1.25rem * -1);
margin-left: calc(var(--gutter) * -1);
}
}
.secondary-navigation .link-list .link-list__heading {
padding: 2.25rem 1.25rem 0;
padding: var(--v-space-l) var(--gutter) 0;
background: #130032;
background: var(--text-black);
}
@media (min-width: 45rem) {
.secondary-navigation .link-list .link-list__heading {
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
}
}
.secondary-navigation .link-list .link-list__list {
padding: 0 1.25rem 3rem;
padding: 0 var(--gutter) var(--v-space-xl);
background: #130032;
background: var(--text-black);
}
@media (min-width: 45rem) {
.secondary-navigation .link-list .link-list__list {
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
}
}
.secondary-navigation .secondary-navigation__down-arrow {
display: inline-block;
width: 7px;
height: 11px;
transform: rotate(-90deg);
transition: transform 0.15s ease-in-out;
transition: var(--trans-transform);
margin-left: 1em;
}
/* Dropdown Action */
.secondary-navigation .link-list {
display: none;
}
.secondary-navigation .secondary-navigation__link--dropdown-open .link-list {
display: block;
}
.secondary-navigation
.secondary-navigation__link--dropdown-open
.secondary-navigation__down-arrow {
transform: rotate(90deg);
}
/* JS Scrolling Menu */
.secondary-navigation .secondary-navigation__arrow {
display: none;
align-items: center;
padding: 1.25rem;
padding: var(--font-size-s);
background: #fff;
background: var(--text-white);
cursor: pointer;
transition: all 0.25s ease-in-out;
z-index: 1;
}
.secondary-navigation .secondary-navigation__arrow--left {
border-right: 1px solid #dadcde;
border-right: var(--border-light);
}
.secondary-navigation .secondary-navigation__arrow--left svg {
transform: rotate(180deg);
}
.secondary-navigation .secondary-navigation__arrow--right {
border-left: 1px solid #dadcde;
border-left: var(--border-light);
}
.secondary-navigation--with-fancy-scroll {
overflow-x: hidden;
}
.secondary-navigation--with-fancy-scroll .secondary-navigation__top-level {
justify-content: space-between;
flex-wrap: nowrap;
overflow-x: hidden;
transition: all 0.25s ease-in-out;
}
.secondary-navigation--with-fancy-scroll
.secondary-navigation__top-level
.secondary-navigation__link {
position: static;
}
.secondary-navigation--with-fancy-scroll.secondary-navigation--with-left-button
.secondary-navigation__arrow--left,
.secondary-navigation--with-fancy-scroll.secondary-navigation--with-right-button
.secondary-navigation__arrow--right {
display: flex;
}
/*
* IE 11
* Note: does not support nested media queries.
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.secondary-navigation .secondary-navigation__down-arrow {
display: none;
}
.secondary-navigation .secondary-navigation__dropdown-text:after,
.secondary-navigation .secondary-navigation__arrow--left:after,
.secondary-navigation .secondary-navigation__arrow--right:after {
display: inline-block;
font-size: 1rem;
font-size: var(--font-size-xs);
line-height: 1.5;
line-height: var(--line-height-xl);
font-weight: 600;
}
.secondary-navigation .secondary-navigation__dropdown-text:after {
margin-left: 0.5em;
content: 'v';
}
.secondary-navigation .secondary-navigation__arrow--left:after {
content: '<';
}
.secondary-navigation .secondary-navigation__arrow--right:after {
content: '>';
}
.secondary-navigation .secondary-navigation__arrow--left svg,
.secondary-navigation .secondary-navigation__arrow--left svg {
display: none;
}
}
.subscribe-blog {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.subscribe-blog {
grid-column: 3 / -3;
}
}
.subscribe-blog .subscribe-blog__button {
margin: 2rem 0;
margin: var(--v-space-m) 0;
}
.subscribe-blog-fullwidth {
background-color: #ede9e4;
background-color: var(--product-neutral--1-40);
}
.subscribe-blog-fullwidth {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.subscribe-blog-fullwidth {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.subscribe-blog-fullwidth {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.subscribe-blog-fullwidth {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.subscribe-blog-fullwidth {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.subscribe-blog-fullwidth .subscribe-content {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.subscribe-blog-fullwidth .subscribe-content {
grid-column: 3 / -3;
}
}
.subscribe-blog-fullwidth {
padding: 4rem 0;
padding: var(--v-space-2xl) 0;
}
@media (min-width: 64rem) {
.subscribe-blog-fullwidth {
padding: 8rem 0;
padding: var(--v-space-5xl) 0;
}
}
@media (min-width: 90rem) {
.subscribe-blog-fullwidth {
padding: 7rem 0;
padding: var(--v-space-4xl) 0;
}
}
.subscribe-blog-fullwidth .content-grid .content-grid__list {
border-bottom: 0;
}
.subscribe-blog-fullwidth
.content-grid
.content-grid__list
.content-grid__item {
border-left: 0;
}
.subscribe-blog-fullwidth
.content-grid
.content-grid__list
.content-grid__item:first-child {
padding-right: 60px;
}
.subscribe-blog-fullwidth .sb-title {
font-weight: 400;
font-size: 2.5rem;
font-size: var(--font-size-2l);
line-height: 1.1667;
line-height: var(--line-height-m);
margin-top: 10px;
margin-bottom: 1.5rem;
margin-bottom: var(--v-space-2s);
}
@media (min-width: 45rem) {
.subscribe-blog-fullwidth .sb-title {
font-size: 3rem;
font-size: var(--font-size-xl);
}
}
@media (min-width: 64rem) {
.subscribe-blog-fullwidth .sb-title {
font-size: 2.5rem;
font-size: var(--font-size-2l);
margin-bottom: 1rem;
margin-bottom: var(--v-space-xs);
}
}
@media (min-width: 90rem) {
.subscribe-blog-fullwidth .sb-title {
font-size: 3rem;
font-size: var(--font-size-xl);
}
}
.subscribe-blog-fullwidth .sb-description {
font-weight: 400;
font-size: 1.25rem;
font-size: var(--font-size-s);
line-height: 1.6;
line-height: var(--line-height-2xl);
}
.subscribe-blog-individual {
background-color: #ede9e4;
background-color: var(--product-neutral--1-40);
margin-top: 4rem;
margin-top: var(--v-space-2xl);
}
.subscribe-blog-individual .subscribe-content {
padding: 1.5rem;
padding: var(--v-space-2s);
}
.subscribe-blog-individual .subscribe-blog__button {
margin-top: 1rem;
margin-top: var(--v-space-xs);
}
.subscribe-blog-individual .sb-title {
font-weight: 600;
font-size: 1.25rem;
font-size: var(--font-size-s);
line-height: 1.333;
line-height: var(--line-height-l);
}
.subscribe-blog-individual .sb-description {
font-weight: 400;
font-size: 1rem;
font-size: var(--font-size-xs);
line-height: 1.5;
line-height: var(--line-height-xl);
}
/* Styles for the modal */
.subscribe-modal {
display: none;
position: fixed;
z-index: 11000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #fff;
background-color: var(--bg-white-shade);
}
.subscribe-modal .modal-content {
background-color: #fff;
background-color: var(--white);
margin: 15% auto;
max-width: 800px;
padding: 40px 48px;
border: 1px solid #130032;
border: 1px solid var(--border-color-grey);
box-shadow: 0px 32px 64px #130032;
box-shadow: 0px 32px 64px var(--box-shadow-color-2);
}
.subscribe-modal .modal-title {
max-width: 800px;
margin: 0 auto;
font-weight: 600;
font-size: 2rem;
font-size: var(--font-size-2m);
line-height: 1.333;
line-height: var(--line-height-l);
padding: 0 25px;
}
@media (min-width: 45rem) {
.subscribe-modal .modal-title {
padding: 0;
}
}
.subscribe-modal .close {
float: right;
cursor: pointer;
}
/* Style the button */
#subscribeModalButton {
padding: 0.62rem 0.93rem;
}
.page {
min-height: calc(100vh + 1px);
}
.content-type--blog {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.content-type--blog {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.content-type--blog {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.content-type--blog {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.content-type--blog {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.content-type--blog .content-type__top,
.content-type--blog .content-type__header,
.content-type--blog .content-type__content,
.content-type--blog .content-type__related-content {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.content-type--blog .content-type__top,
.content-type--blog .content-type__header,
.content-type--blog .content-type__content,
.content-type--blog .content-type__related-content {
grid-column: 3 / -3;
}
}
.content-type--blog .content-type__header {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.content-type--blog .content-type__header {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.content-type--blog .content-type__header {
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
padding: 1rem 0 3rem;
padding: var(--v-space-xs) 0 var(--v-space-xl);
border-top: 2px solid #130032;
border-top: var(--border-base);
border-bottom: 2px solid #130032;
border-bottom: 2px solid var(--text-black);
}
@media (min-width: 45rem) {
.content-type--blog .content-type__header {
padding-top: 2rem;
padding-top: var(--v-space-m);
}
}
@media (min-width: 64rem) {
.content-type--blog .content-type__header {
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
padding-top: 2.25rem;
padding-top: var(--v-space-l);
padding-bottom: 4rem;
padding-bottom: var(--v-space-2xl);
}
}
.content-type--blog .content-type__header .title {
grid-column: 1 / -1;
}
@media (min-width: 64rem) {
.content-type--blog .content-type__header .title {
grid-column: 1 / span 11;
grid-row: 1 / span 1;
}
}
.content-type--blog .content-type__header .content-type__subtitle {
grid-column: 1 / -1;
}
.content-type--blog .content-type__header .content-type__subtitle {
margin-top: 0.5rem;
margin-top: var(--v-space-2xs);
margin-bottom: 0;
font-size: 1rem;
font-size: var(--font-size-xs);
font-weight: 600;
line-height: 1.5;
line-height: var(--line-height-xl);
}
@media (min-width: 33.75rem) {
.content-type--blog .content-type__header .content-type__subtitle {
margin-top: 1.25rem;
margin-top: var(--v-space-s);
font-size: calc(1rem + 0.5 * ((100vw - 33.75rem) / 30.25));
line-height: calc(1.5rem + 0.5 * ((100vw - 33.75rem) / 30.25));
}
}
@media (min-width: 64rem) {
.content-type--blog .content-type__header .content-type__subtitle {
grid-column: 1 / span 8;
grid-row: 2 / span 1;
font-size: 1.5rem;
line-height: 2rem;
}
}
@media (min-width: 64rem) {
.content-type--blog .content-type__header .content-type__subtitle .title {
grid-row: 1 / span 1;
}
}
.content-type--blog .content-type__header--no-subtitle {
padding-bottom: 1.25rem;
padding-bottom: var(--v-space-s);
}
@media (min-width: 64rem) {
.content-type--blog .content-type__header--no-subtitle {
padding-bottom: 2.25rem;
padding-bottom: var(--v-space-l);
}
}
.content-type--blog .content-type__top {
padding: 1rem 0;
padding: var(--v-space-xs) 0;
}
.content-type--blog .content-type__label {
text-transform: uppercase;
font-size: 0.75rem;
font-size: var(--font-size-4xs);
font-weight: 600;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.content-type--blog .content-type__label {
text-transform: uppercase;
margin-bottom: 1rem;
margin-bottom: var(--v-space-xs);
}
.content-type--blog .content-type__content {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.content-type--blog .content-type__content {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.content-type--blog .content-type__content .content-type__main-content {
grid-column: 1 / -1;
}
.content-type--blog .content-type__content .content-type__main-content {
width: 100%;
}
@media (min-width: 64rem) {
.content-type--blog .content-type__content .content-type__main-content {
grid-column: 1 / span 8;
}
}
.content-type--blog .content-type__content .content-type__sidebar {
grid-column: 1 / span 6;
margin-top: 4rem;
margin-top: var(--v-space-2xl);
}
@media (min-width: 45rem) {
.content-type--blog .content-type__content .content-type__sidebar {
display: flex;
}
}
@media (min-width: 64rem) {
.content-type--blog .content-type__content .content-type__sidebar {
grid-column: 9 / span 4;
flex-direction: column;
justify-content: space-between;
margin-top: 0.5rem;
margin-top: var(--v-space-2xs);
margin-left: 1.25rem;
margin-left: var(--gutter);
}
}
@media (min-width: 73rem) {
.content-type--blog .content-type__content .content-type__sidebar {
margin-left: calc(2 * 1.25rem);
margin-left: calc(2 * var(--gutter));
}
}
.content-type--blog .content-type__content .content-type__sidebar-top {
flex-grow: 1;
}
@media (min-width: 45rem) {
.content-type--blog .content-type__content .content-type__sidebar-top {
width: 50%;
}
}
@media (min-width: 64rem) {
.content-type--blog .content-type__content .content-type__sidebar-top {
width: auto;
}
}
.content-type--blog .content-type__content .content-type__sidebar-bottom {
flex-grow: 1;
}
@media (min-width: 45rem) {
.content-type--blog .content-type__content .content-type__sidebar-bottom {
width: 50%;
padding-left: calc(1.25rem / 2);
padding-left: calc(var(--gutter) / 2);
}
}
@media (min-width: 64rem) {
.content-type--blog .content-type__content .content-type__sidebar-bottom {
width: auto;
padding-left: 0;
margin-top: 4rem;
margin-top: var(--v-space-2xl);
flex-grow: 0;
}
}
@media (min-width: 45rem) {
.content-type--blog .teaser--author-with-image + .content-type__date {
padding-left: 100px;
}
}
.content-type--blog .tag-list {
margin-top: 2rem;
margin-top: var(--v-space-m);
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
@media (min-width: 45rem) {
.content-type--blog .tag-list {
margin-top: 0;
}
}
@media (min-width: 45rem) {
.content-type--blog .tag-list__list-item {
display: block;
margin-right: 0;
}
}
.content-type--blog .social-links {
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
.content-type--blog
.content-type__related-content
.content-type__related-title {
font-size: 1.25rem;
font-size: var(--font-size-s);
line-height: 1.5;
line-height: var(--line-height-xl);
margin-bottom: 0;
margin-top: 2.25rem;
margin-top: var(--font-size-l);
padding-bottom: 2.25rem;
padding-bottom: var(--font-size-l);
}
@media (min-width: 45rem) {
.content-type--blog
.content-type__related-content
.content-type__related-title {
margin-top: 3rem;
margin-top: var(--font-size-xl);
}
}
@media (min-width: 64rem) {
.content-type--blog
.content-type__related-content
.content-type__related-title {
font-size: 1.5rem;
font-size: var(--font-size-m);
line-height: 1.333;
line-height: var(--line-height-l);
margin-top: 3rem;
margin-top: var(--font-size-xl);
}
}
.content-type--blog-author {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.content-type--blog-author {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.content-type--blog-author {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.content-type--blog-author {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.content-type--blog-author {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.content-type--blog-author .content-type__top,
.content-type--blog-author .content-type__header,
.content-type--blog-author .content-type__content {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.content-type--blog-author .content-type__top,
.content-type--blog-author .content-type__header,
.content-type--blog-author .content-type__content {
grid-column: 3 / -3;
}
}
.content-type--blog-author .content-type__top {
padding: 1rem 0;
padding: var(--v-space-xs) 0;
}
.content-type--blog-author .content-type__header {
padding: 0 0 1rem;
padding: 0 0 var(--v-space-xs);
border-top: 2px solid #130032;
border-top: var(--border-base);
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
}
.content-type--blog-author .content-type__header .title {
margin-right: 0;
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
margin-left: 0;
}
@media (min-width: 33.75rem) {
.content-type--blog-author .content-type__header .title {
margin: 2.25rem 0 2rem;
margin: var(--v-space-l) 0 var(--v-space-m);
}
}
.content-type--blog-author .content-type__content {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.content-type--blog-author .content-type__content {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.content-type--blog-author .content-type__content .content-type__main-content {
grid-column: 1 / -1;
}
.content-type--blog-author .content-type__content .content-type__main-content {
display: flex;
flex-wrap: wrap;
margin: 3rem 0 2.25rem;
margin: var(--v-space-xl) 0 var(--v-space-l);
}
@media (min-width: 64rem) {
.content-type--blog-author
.content-type__content
.content-type__main-content {
grid-column: 1 / span 3;
flex-wrap: nowrap;
flex-direction: column;
margin-top: 4rem;
margin-top: var(--v-space-2xl);
}
}
/* Forces the Bio and Tags elements to be in a new row. */
.content-type--blog-author
.content-type__content
.content-type__main-content::before {
order: 3;
content: '';
width: 100%;
}
.content-type--blog-author
.content-type__content
.content-type__related-content {
grid-column: 1 / -1;
}
.content-type--blog-author
.content-type__content
.content-type__related-content {
border-top: 2px solid #130032;
border-top: var(--border-base);
}
@media (min-width: 64rem) {
.content-type--blog-author
.content-type__content
.content-type__related-content {
grid-column: 5 / span 8;
border-top: 0;
}
}
.content-type--blog-author .content-type__related-content .content-grid {
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
}
/* @todo: Check if the sizes are correct once WOM-3218 is in. */
@media (min-width: 33.75rem) {
.content-type--blog-author .pager__item {
font-size: 1rem;
font-size: var(--font-size-m-body);
}
}
@media (min-width: 73rem) {
.content-type--blog-author .pager__item {
font-size: 1.25rem;
font-size: var(--font-size-l-body);
}
}
.content-type--blog-author .content-type__label {
text-transform: uppercase;
font-size: 0.75rem;
font-size: var(--font-size-4xs);
font-weight: 600;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.content-type--blog-author .content-type__label {
margin: 1.25rem 0 1rem;
margin: var(--v-space-s) 0 var(--v-space-xs);
}
@media (min-width: 33.75rem) {
.content-type--blog-author .content-type__label {
margin: 2.25rem 0 1.25rem;
margin: var(--v-space-l) 0 var(--v-space-s);
}
}
@media (min-width: 64rem) {
.content-type--blog-author .content-type__label {
grid-column: 6 / span 8;
margin-top: 2rem;
margin-top: var(--v-space-m);
}
}
.content-type--blog-author .content-type__value p {
max-width: 55ch;
}
.content-type--blog-author .content-type__value p:first-child {
margin-top: 0;
}
.content-type--blog-author .content-type__value p:last-child {
margin-bottom: 0;
}
.content-type--blog-author .content-type__bio .content-type__value {
font-weight: 500;
}
@media (min-width: 90rem) {
.content-type--blog-author .content-type__bio .content-type__value {
font-size: 1.25rem;
font-size: var(--font-size-l-body);
line-height: 1.6;
line-height: var(--line-height-2xl);
}
}
.content-type--blog-author .content-type__image {
order: 1;
width: 100px;
flex-shrink: 0;
}
.content-type--blog-author .content-type__image img {
display: block;
width: 80px;
height: 80px;
border-radius: 100%;
}
.content-type--blog-author .content-type__role {
order: 2;
}
.content-type--blog-author .content-type__role .content-type__label {
margin: 0.5rem 0 1rem;
margin: var(--v-space-2xs) 0 var(--v-space-xs);
}
@media (min-width: 64rem) {
.content-type--blog-author .content-type__role .content-type__label {
margin-top: 2rem;
margin-top: var(--v-space-m);
}
}
.content-type--blog-author .content-type__role .content-type__value {
font-weight: 700;
}
.content-type--blog-author .content-type__bio {
order: 4;
}
@media (min-width: 45rem) {
.content-type--blog-author .content-type__bio {
flex-basis: 50%;
padding-right: calc(1.25rem / 2);
padding-right: calc(var(--gutter) / 2);
}
}
@media (min-width: 64rem) {
.content-type--blog-author .content-type__bio {
flex-basis: auto;
padding-right: 0;
}
}
@media (min-width: 45rem) {
.content-type--blog-author .content-type__bio + .tag-list {
flex-basis: 50%;
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
padding-left: calc(1.25rem / 2);
padding-left: calc(var(--gutter) / 2);
}
}
@media (min-width: 64rem) {
.content-type--blog-author .content-type__bio + .tag-list {
flex-basis: 100%;
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
padding-left: 0;
}
}
.content-type--blog-author .tag-list {
order: 5;
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
.content-type--blog-author .tag-list__label {
margin: 1.25rem 0 1rem;
margin: var(--v-space-s) 0 var(--v-space-xs);
}
@media (min-width: 33.75rem) {
.content-type--blog-author .tag-list__label {
margin: 2.25rem 0 1.25rem;
margin: var(--v-space-l) 0 var(--v-space-s);
}
}
@media (min-width: 64rem) {
.content-type--blog-author .tag-list__label {
margin-top: 2rem;
margin-top: var(--v-space-m);
}
}
.content-type--blog-landing-page {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.content-type--blog-landing-page {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.content-type--blog-landing-page {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.content-type--blog-landing-page {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.content-type--blog-landing-page {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.content-type--blog-landing-page .content-type__header,
.content-type--blog-landing-page .content-type__featured,
.content-type--blog-landing-page .content-type__upper,
.content-type--blog-landing-page .content-type__cta,
.content-type--blog-landing-page .content-type__lower {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.content-type--blog-landing-page .content-type__header,
.content-type--blog-landing-page .content-type__featured,
.content-type--blog-landing-page .content-type__upper,
.content-type--blog-landing-page .content-type__cta,
.content-type--blog-landing-page .content-type__lower {
grid-column: 3 / -3;
}
}
.content-type--blog-landing-page .content-type__cta .cta {
padding: 3rem 0;
padding: var(--v-space-xl) 0;
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
}
@media (min-width: 33.75rem) {
.content-type--blog-landing-page .content-type__cta .cta {
padding: 4rem 0;
padding: var(--v-space-2xl) 0;
}
}
@media (min-width: 64rem) {
.content-type--blog-landing-page .content-type__cta .cta {
padding: 6.5rem 0;
padding: var(--v-space-3xl) 0;
}
}
.content-type--blog-landing-page .content-type__lower {
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
}
.content-type--customer-stories-landing-page--default {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.content-type--customer-stories-landing-page--default {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.content-type--customer-stories-landing-page--default {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.content-type--customer-stories-landing-page--default {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.content-type--customer-stories-landing-page--default {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.content-type--customer-stories-landing-page--default .title,
.content-type--customer-stories-landing-page--default .navigation,
.content-type--customer-stories-landing-page--default .content-strip,
.content-type--customer-stories-landing-page--default .featured-video,
.content-type--customer-stories-landing-page--default .secondary-navigation,
.content-type--customer-stories-landing-page--default .quote,
.content-type--customer-stories-landing-page--default
.content-type__content-grid-upper,
.content-type--customer-stories-landing-page--default
.content-type__content-grid-middle,
.content-type--customer-stories-landing-page--default
.content-type__content-grid-lower {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.content-type--customer-stories-landing-page--default .title,
.content-type--customer-stories-landing-page--default .navigation,
.content-type--customer-stories-landing-page--default .content-strip,
.content-type--customer-stories-landing-page--default .featured-video,
.content-type--customer-stories-landing-page--default .secondary-navigation,
.content-type--customer-stories-landing-page--default .quote,
.content-type--customer-stories-landing-page--default
.content-type__content-grid-upper,
.content-type--customer-stories-landing-page--default
.content-type__content-grid-middle,
.content-type--customer-stories-landing-page--default
.content-type__content-grid-lower {
grid-column: 3 / -3;
}
}
.content-type--customer-stories-landing-page--default .title {
margin-top: 3rem;
margin-top: var(--v-space-xl);
margin-bottom: 0;
}
@media (min-width: 64rem) {
.content-type--customer-stories-landing-page--default .title {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
}
}
.content-type--customer-stories-landing-page--default .content-strip {
grid-column: 2 / -2;
margin-top: 3rem;
margin-top: var(--v-space-xl);
}
@media (min-width: 64rem) {
.content-type--customer-stories-landing-page--default .content-strip {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
}
}
.content-type--customer-stories-landing-page--default .secondary-navigation {
margin-top: 3rem;
margin-top: var(--v-space-xl);
}
@media (min-width: 64rem) {
.content-type--customer-stories-landing-page--default .secondary-navigation {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
}
}
.content-type--customer-stories-landing-page--default .featured-video {
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
padding: 2.25rem 0;
padding: var(--v-space-l) 0;
}
@media (min-width: 64rem) {
.content-type--customer-stories-landing-page--default .featured-video {
padding: 3rem 0;
padding: var(--v-space-xl) 0;
}
}
.content-type--customer-stories-landing-page--default .quote {
padding: 3rem 0;
padding: var(--v-space-xl) 0;
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
}
@media (min-width: 45rem) {
.content-type--customer-stories-landing-page--default .quote {
padding: 4rem 0;
padding: var(--v-space-2xl) 0;
}
}
@media (min-width: 64rem) {
.content-type--customer-stories-landing-page--default .quote {
padding: 6.5rem 0;
padding: var(--v-space-3xl) 0;
}
}
@media (min-width: 76.25rem) {
.content-type--customer-stories-landing-page--default .quote {
padding-bottom: 3rem;
padding-bottom: var(--v-space-xl);
}
}
.content-type--customer-stories-landing-page--default
.content-type__content-grid-lower {
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
}
.content-type--customer-stories-landing-page--filtered {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.content-type--customer-stories-landing-page--filtered {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.content-type--customer-stories-landing-page--filtered {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.content-type--customer-stories-landing-page--filtered {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.content-type--customer-stories-landing-page--filtered {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.content-type--customer-stories-landing-page--filtered .title,
.content-type--customer-stories-landing-page--filtered .secondary-navigation,
.content-type--customer-stories-landing-page--filtered .content-type__featured,
.content-type--customer-stories-landing-page--filtered
.content-type__content-grid {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.content-type--customer-stories-landing-page--filtered .title,
.content-type--customer-stories-landing-page--filtered .secondary-navigation,
.content-type--customer-stories-landing-page--filtered
.content-type__featured,
.content-type--customer-stories-landing-page--filtered
.content-type__content-grid {
grid-column: 3 / -3;
}
}
.content-type--customer-stories-landing-page--filtered
.content-type__content-grid {
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
}
.content-type--customer-story {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.content-type--customer-story {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.content-type--customer-story {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.content-type--customer-story {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.content-type--customer-story {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.content-type--customer-story {
padding-bottom: 3rem;
padding-bottom: var(--v-space-xl);
}
.content-type--customer-story .content-type__video,
.content-type--customer-story .content-type__statistics,
.content-type--customer-story .content-type__body,
.content-type--customer-story .content-type__products,
.content-type--customer-story .cta {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.content-type--customer-story .content-type__video,
.content-type--customer-story .content-type__statistics,
.content-type--customer-story .content-type__body,
.content-type--customer-story .content-type__products,
.content-type--customer-story .cta {
grid-column: 3 / -3;
}
}
@media (min-width: 64rem) {
.content-type--customer-story .teaser--dark.teaser--compact {
min-height: 26rem;
/* 416px */
}
}
@media (min-width: 76.25rem) {
.content-type--customer-story .teaser--dark.teaser--compact {
min-height: 34rem;
/* 544px */
}
}
.content-type--customer-story .teaser--dark.teaser--compact .teaser__logo svg {
width: 6.5rem;
/* 104px */
max-height: 6.5rem;
}
/* 104px */
@media (min-width: 45rem) {
.content-type--customer-story
.teaser--dark.teaser--compact
.teaser__logo
svg {
width: 7.5rem;
/* 120px */
max-height: 7.5rem;
/* 120px */
}
}
@media (min-width: 76.25rem) {
.content-type--customer-story
.teaser--dark.teaser--compact
.teaser__logo
svg {
width: 10.375rem;
/* 120px */
max-height: 10.375rem;
/* 120px */
}
}
.content-type--customer-story .teaser-header {
grid-row: 1;
grid-column: 1 / -1;
margin-bottom: 0;
}
.content-type--customer-story .content-type__video {
grid-row: 2;
margin-top: 3rem;
margin-top: var(--v-space-xl);
}
@media (min-width: 45rem) {
.content-type--customer-story .content-type__video {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
}
}
@media (min-width: 64rem) {
.content-type--customer-story .content-type__video {
margin-top: 6.5rem;
margin-top: var(--v-space-3xl);
}
}
.content-type--customer-story .content-type__statistics {
grid-row: 3;
}
.content-type--customer-story .content-type__products {
grid-row: 5;
margin-top: 2rem;
margin-top: var(--v-space-m);
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
@media (min-width: 45rem) {
.content-type--customer-story .content-type__products {
margin-top: 3rem;
margin-top: var(--v-space-xl);
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
}
}
@media (min-width: 64rem) {
.content-type--customer-story .content-type__products {
grid-column: 10 / span 4;
grid-row: 4;
margin-bottom: 0;
margin-left: 1.25rem;
margin-left: var(--gutter);
}
}
@media (min-width: 76.25rem) {
.content-type--customer-story .content-type__products {
grid-column: 11 / span 4;
}
}
.content-type--customer-story .content-type__body {
grid-row: 4;
margin-top: 3rem;
margin-top: var(--v-space-xl);
}
@media (min-width: 45rem) {
.content-type--customer-story .content-type__body {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
}
}
@media (min-width: 64rem) {
.content-type--customer-story .content-type__body {
margin-bottom: 6.5rem;
margin-bottom: var(--v-space-3xl);
}
}
@media (min-width: 64rem) {
.content-type--customer-story .content-type__body,
.content-type--customer-story .content-type__products {
margin-top: 6.5rem;
margin-top: var(--v-space-3xl);
}
}
.content-type--customer-story .content-type__body .rich-text {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.content-type--customer-story .content-type__body .rich-text {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.content-type--customer-story .content-type__body .rich-text > * {
grid-column: 1 / -1;
}
@media (min-width: 64rem) {
.content-type--customer-story .content-type__body .rich-text > * {
grid-column: 1 / span 8;
}
}
@media (min-width: 64rem) {
.content-type--customer-story
.content-type__body
.rich-text
> [data-entity-embed-display='view_mode:microcontent.embedded'] {
grid-column: 1 / -1;
}
}
.content-type--customer-story .content-type__body .rich-text p {
margin-top: 0;
}
.content-type--customer-story .content-strip {
grid-row: 6;
grid-column: 2 / -2;
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
@media (min-width: 45rem) {
.content-type--customer-story .content-strip {
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
}
}
.content-type--customer-story .cta {
grid-row: 7;
}
.search .search__header {
background-color: #000;
background-color: var(--bg-black);
}
.search .search__inner {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.search .search__inner {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.search .search__inner {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.search .search__inner {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.search .search__inner {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.search .search__inner {
padding-bottom: 1.25rem;
padding-bottom: var(--gutter);
padding-top: 3rem;
padding-top: var(--v-space-xl);
}
@media (min-width: 45rem) {
.search .search__inner {
padding-bottom: calc(1.25rem * 2);
padding-bottom: calc(var(--gutter) * 2);
padding-top: 4rem;
padding-top: var(--v-space-2xl);
}
}
@media (min-width: 64rem) {
.search .search__inner {
padding-bottom: 3rem;
padding-bottom: var(--v-space-xl);
padding-top: 3rem;
padding-top: var(--v-space-xl);
}
}
.search .search__form {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.search .search__form {
grid-column: 3 / -3;
}
}
.search .search__form {
position: relative;
}
.search .search__icon {
display: block;
filter: invert();
height: 1rem;
height: var(--v-space-xs);
left: 0;
position: absolute;
top: 0.3125rem;
width: 1rem;
width: var(--v-space-xs);
}
.search .search__input {
background-color: #000;
background-color: var(--bg-black);
border-bottom: 1px solid #dadcde;
border-bottom: var(--border-light);
color: #fff;
color: var(--text-white);
font-size: 1.25rem;
font-size: var(--font-size-s);
line-height: 1.6;
line-height: var(--line-height-2xl);
padding: 0 0 0.5rem 2.25rem;
padding: 0 0 var(--v-space-2xs) var(--v-space-l);
width: 100%;
}
.search .search__input::-moz-placeholder {
color: #fff;
color: var(--text-white);
opacity: 1;
}
.search .search__input:-ms-input-placeholder {
color: #fff;
color: var(--text-white);
opacity: 1;
}
.search .search__input::placeholder {
color: #fff;
color: var(--text-white);
opacity: 1;
}
.search .search__input:focus {
outline: none;
}
/* Styles for Inbenta markup added via JS */
.search #inbenta-search-container {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.search #inbenta-search-container {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.search #inbenta-search-container {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.search #inbenta-search-container {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.search #inbenta-search-container {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.search #inbenta-search-container .inbenta-search {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.search #inbenta-search-container .inbenta-search {
grid-column: 3 / -3;
}
}
.search #inbenta-search-container .inbenta-search {
position: relative;
}
/* Adding !important here because I need to override inline styles added by JS */
.search #inbenta-search-container .inbenta-search-autocompleter {
transform: translateY(calc(-1 * 1rem)) !important;
transform: translateY(calc(-1 * var(--v-space-xs))) !important;
z-index: 1;
}
@media (min-width: 45rem) {
.search #inbenta-search-container .inbenta-search-autocompleter {
transform: translateY(calc(-1 * 2.25rem)) !important;
transform: translateY(calc(-1 * var(--v-space-l))) !important;
}
}
@media (min-width: 64rem) {
.search #inbenta-search-container .inbenta-search-autocompleter {
transform: translateY(calc(-1 * 3rem)) !important;
transform: translateY(calc(-1 * var(--v-space-xl))) !important;
}
}
.search #inbenta-search-container .inbenta-search__wrapper {
margin-top: 3rem;
margin-top: var(--v-space-xl);
}
.content-grid .content-grid__list {
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
list-style-type: none;
}
.content-grid .content-grid__item {
margin: 0;
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
padding: 0;
}
@media (min-width: 64rem) {
.content-grid .content-grid__item {
border-left: 1px solid #dadcde;
border-left: var(--border-light);
}
}
.content-grid .content-grid__item:last-child {
border-bottom: 0;
}
.content-grid .content-grid__pager {
padding-top: 2rem;
padding-top: var(--v-space-m);
}
.content-grid--100 .content-grid__list {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.content-grid--100 .content-grid__list {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.content-grid--100 .content-grid__item {
grid-column: 1 / -1;
}
@media (min-width: 64rem) {
.content-grid--100 .content-grid__item {
border-left: 0;
}
}
.content-grid--50-50 .content-grid__list {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.content-grid--50-50 .content-grid__list {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.content-grid--50-50 .content-grid__item {
grid-column: 1 / -1;
}
@media (min-width: 64rem) {
.content-grid--50-50 .content-grid__item {
grid-column: span 6;
border-bottom: none;
}
.content-grid--50-50 .content-grid__item:nth-child(2n) {
margin-left: calc(0px - (1.25rem / 2));
margin-left: calc(0px - (var(--gutter) / 2));
}
}
.content-grid--33-33-33 .content-grid__list {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.content-grid--33-33-33 .content-grid__list {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.content-grid--33-33-33 .content-grid__item {
grid-column: 1 / -1;
}
@supports (display: grid) {
@media (min-width: 64rem) {
.content-grid--33-33-33 {
grid-auto-rows: 1fr;
}
}
@media (min-width: 64rem) {
.content-grid--33-33-33 .content-grid__item {
/* Pull the item into the gutters */
margin-right: calc(-1 * 1.25rem);
margin-right: calc(-1 * var(--gutter));
}
}
@media (min-width: 64rem) {
.content-grid--33-33-33 .content-grid__item:nth-child(3n + 1) {
grid-column: 1 / span 4;
}
}
@media (min-width: 64rem) {
.content-grid--33-33-33 .content-grid__item:nth-child(3n + 2) {
grid-column: 5 / span 4;
}
}
@media (min-width: 64rem) {
.content-grid--33-33-33 .content-grid__item:nth-child(3n) {
grid-column: 9 / span 4;
margin-right: 0;
}
}
/* Last row */
@media (min-width: 64rem) {
.content-grid--33-33-33
.content-grid__item:nth-child(3n + 1):nth-last-child(-n + 3),
.content-grid--33-33-33
.content-grid__item:nth-child(3n + 1):nth-last-child(-n + 3)
~ .content-grid__item {
border-bottom: 0;
}
}
/* Last row, 1st && last item */
@media (min-width: 64rem) {
.content-grid--33-33-33
.content-grid__item:nth-child(3n + 1):nth-last-child(-n + 3):last-child,
.content-grid--33-33-33
.content-grid__item:nth-child(3n + 1):nth-last-child(-n + 3)
+ .content-grid__item:last-child {
/* sneaky little ~hobbitses~ sub-pixel rounding bugs */
margin-right: calc(-1 * (1.25rem + 0.5px));
margin-right: calc(-1 * (var(--gutter) + 0.5px));
border-right: 1px solid #dadcde;
border-right: var(--border-light);
}
}
}
.content-grid--33-33-subgrid-right .content-grid__list {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.content-grid--33-33-subgrid-right .content-grid__list {
grid-template-columns: repeat(8, 1fr);
}
}
.content-grid--33-33-subgrid-right .content-grid__item {
grid-column: 1 / -1;
}
@media (min-width: 64rem) {
.content-grid--33-33-subgrid-right {
grid-auto-rows: 1fr;
}
}
@media (min-width: 64rem) {
.content-grid--33-33-subgrid-right .content-grid__item {
border-left: 1px solid #dadcde;
border-left: var(--border-light);
}
}
@media (min-width: 64rem) {
.content-grid--33-33-subgrid-right .content-grid__item:nth-child(2n + 1) {
grid-column: 1 / 5;
/* Pull the item into the gutters */
margin-right: calc(-1 * 1.25rem);
margin-right: calc(-1 * var(--gutter));
}
}
@media (min-width: 64rem) {
.content-grid--33-33-subgrid-right .content-grid__item:nth-child(2n) {
grid-column: 5 / 9;
}
}
/* Last Row */
@media (min-width: 64rem) {
.content-grid--33-33-subgrid-right
.content-grid__item:nth-child(2n + 1):nth-last-child(-n + 2),
.content-grid--33-33-subgrid-right
.content-grid__item:nth-child(2n + 1):nth-last-child(-n + 2)
~ .content-grid__item {
border-bottom: 0;
}
}
/* Last row, 1st && last item */
@media (min-width: 64rem) {
.content-grid--33-33-subgrid-right
.content-grid__item:nth-child(2n + 1):nth-last-child(-n + 2):last-child {
/* sneaky little ~hobbitses~ sub-pixel rounding bugs */
margin-right: calc(-1 * (1.25rem + 0.5px));
margin-right: calc(-1 * (var(--gutter) + 0.5px));
border-right: 1px solid #dadcde;
border-right: var(--border-light);
}
}
.content-grid--60-40 .content-grid__list {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.content-grid--60-40 .content-grid__list {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.content-grid--60-40 .content-grid__list {
border-bottom: none;
}
@media (min-width: 45rem) {
.content-grid--60-40 .content-grid__list {
border-top: 2px solid #130032;
border-top: var(--border-base);
}
}
.content-grid--60-40 .content-grid__item {
border-bottom: none;
border-top: 2px solid #130032;
border-top: var(--border-base);
}
@media (min-width: 45rem) {
.content-grid--60-40 .content-grid__item {
border-top: none;
}
}
.content-grid--60-40 .content-grid__item:nth-child(odd) {
grid-column: 1 / -1;
}
@media (min-width: 45rem) {
.content-grid--60-40 .content-grid__item:nth-child(odd) {
grid-column: 1 / span 3;
}
}
@media (min-width: 64rem) {
.content-grid--60-40 .content-grid__item:nth-child(odd) {
grid-column: 1 / span 8;
border-left: none;
}
}
.content-grid--60-40 .content-grid__item:nth-child(even) {
grid-column: 1 / -1;
}
@media (min-width: 45rem) {
.content-grid--60-40 .content-grid__item:nth-child(even) {
border-left: 1px solid #dadcde;
border-left: var(--border-light);
grid-column: 4 / span 3;
margin-left: calc(-1 * 1.25rem / 2);
margin-left: calc(-1 * var(--gutter) / 2);
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
}
}
@media (min-width: 64rem) {
.content-grid--60-40 .content-grid__item:nth-child(even) {
grid-column: 9 / span 4;
margin-left: 0;
padding-left: 0;
}
}
/*
* IE 11
* Note: does not support nested media queries.
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.content-grid .content-grid__item {
margin: 0 1.25rem;
margin: 0 var(--gutter);
}
}
/*
* Teaser Specifics.
*/
@supports (display: grid) {
@media (min-width: 64rem) {
.content-grid--33-33-33 .teaser--image {
margin-left: -1px;
padding-left: 1px;
}
}
.content-grid--33-33-33 .teaser--image .teaser__image {
margin-left: -1px;
}
}
.content-strip {
list-style: none;
}
@media (min-width: 64rem) {
.content-strip {
display: grid;
grid-template-columns: repeat(12, 1fr);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
}
@media (min-width: 76.25rem) {
.content-strip {
grid-template-columns: repeat(3, 1fr);
}
}
.content-strip .content-strip__item {
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
.content-strip .content-strip__item:last-child {
margin-bottom: 0;
}
@media (min-width: 64rem) {
.content-strip .content-strip__item {
grid-column: span 4;
margin-bottom: 0;
}
}
@media (min-width: 76.25rem) {
.content-strip .content-strip__item {
grid-column: span 1;
}
}
.cta {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.cta {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.cta .cta__title,
.cta .cta__title2,
.cta .cta__text,
.cta .cta__links {
grid-column: 1 / -1;
}
.cta .cta__title,
.cta .cta__title2,
.cta .cta__text,
.cta .cta__links {
color: #130032;
color: var(--text-secondary-dark);
}
.cta .cta__links {
list-style-type: none;
}
.cta--two-title .cta__title,
.cta--two-title .cta__title2 {
font-size: 1.875rem;
line-height: 1.24;
font-weight: 400;
}
@media (min-width: 33.75rem) {
.cta--two-title .cta__title,
.cta--two-title .cta__title2 {
font-size: 2.5rem;
line-height: 1.2;
}
}
@media (min-width: 76.25rem) {
.cta--two-title .cta__title,
.cta--two-title .cta__title2 {
grid-column-start: 3;
}
}
.cta--two-title .cta__title {
color: #4c00ff;
color: var(--text-teal);
}
.cta--two-title .cta__text {
margin: 1.25rem 0;
margin: var(--v-space-s) 0;
font-size: 0.875rem;
font-size: var(--font-size-s-body);
font-weight: 400;
line-height: 1.5;
line-height: var(--line-height-xl);
}
@media (min-width: 33.75rem) {
.cta--two-title .cta__text {
margin: 2.25rem 0;
margin: var(--v-space-l) 0;
font-size: 1.25rem;
font-size: var(--font-size-l-body);
line-height: 1.6;
line-height: var(--line-height-2xl);
}
}
@media (min-width: 64rem) {
.cta--two-title .cta__text {
grid-column: 1 / span 7;
}
}
@media (min-width: 76.25rem) {
.cta--two-title .cta__text {
grid-column: 3 / span 5;
margin-bottom: 0;
}
}
@media (min-width: 64rem) {
.cta--two-title .cta__links {
grid-column: 10 / span 3;
justify-self: end;
margin-top: 2.25rem;
margin-top: var(--v-space-l);
}
}
@media (min-width: 76.25rem) {
.cta--two-title .cta__links {
grid-column: 9 / span 3;
}
}
.cta--two-title .cta__links .icon-link__icon {
top: 32%;
}
.cta--two-title .cta__links .icon-link__label {
font-size: 1.25rem;
font-size: var(--font-size-l-body);
line-height: 1.5;
line-height: var(--line-height-xl);
position: relative;
}
.cta--two-title .cta__links .icon-link__label::after {
position: absolute;
content: '';
background-color: #4c00ff;
background-color: var(--text-accent-hover);
left: 0px;
bottom: 0px;
width: 0px;
height: 1px;
transition: width 300ms ease-in-out 0s;
}
.cta--two-title .cta__links .icon-link:hover .icon-link__label::after {
width: 100%;
}
.cta--basic,
.cta--inline,
.cta--card {
position: relative;
}
.cta--basic .cta__title,
.cta--inline .cta__title,
.cta--card .cta__title {
font-size: 1.25rem;
font-size: var(--font-size-s);
line-height: 1.5;
line-height: var(--line-height-xl);
font-weight: 600;
margin-bottom: 1rem;
margin-bottom: var(--v-space-xs);
}
@media (min-width: 33.75rem) {
.cta--basic .cta__title,
.cta--inline .cta__title,
.cta--card .cta__title {
grid-column: 1 / span 3;
}
}
@media (min-width: 45rem) {
.cta--basic .cta__title,
.cta--inline .cta__title,
.cta--card .cta__title {
font-size: 1.5rem;
font-size: var(--font-size-m);
line-height: 1.333;
line-height: var(--line-height-l);
}
}
@media (min-width: 64rem) {
.cta--basic .cta__title,
.cta--inline .cta__title,
.cta--card .cta__title {
grid-column: 1 / span 7;
}
}
@media (min-width: 33.75rem) {
.cta--basic .cta__text,
.cta--inline .cta__text,
.cta--card .cta__text {
grid-column: 1 / span 3;
}
}
@media (min-width: 45rem) {
.cta--basic .cta__text,
.cta--inline .cta__text,
.cta--card .cta__text {
font-size: 1.25rem;
font-size: var(--font-size-s);
line-height: 1.6;
line-height: var(--line-height-2xl);
}
}
@media (min-width: 64rem) {
.cta--basic .cta__text,
.cta--inline .cta__text,
.cta--card .cta__text {
grid-column: 1 / span 7;
margin-bottom: calc(2rem);
margin-bottom: calc(var(--v-space-m));
}
}
.cta--basic .cta__links,
.cta--inline .cta__links,
.cta--card .cta__links {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-top: 1.25rem;
margin-top: var(--v-space-s);
}
@media (min-width: 33.75rem) {
.cta--basic .cta__links,
.cta--inline .cta__links,
.cta--card .cta__links {
flex-direction: unset;
grid-row: 1 / span 2;
grid-column: 4 / span 3;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-top: 0;
}
}
@media (min-width: 45rem) {
.cta--basic .cta__links,
.cta--inline .cta__links,
.cta--card .cta__links {
margin-left: 1.25rem;
margin-left: var(--gutter);
}
}
@media (min-width: 64rem) {
.cta--basic .cta__links,
.cta--inline .cta__links,
.cta--card .cta__links {
grid-column: 8 / span 5;
margin-top: calc(2.25rem - 2rem);
margin-top: calc(var(--v-space-l) - var(--v-space-m));
flex-direction: row-reverse;
justify-content: flex-start;
align-items: normal;
}
}
.cta--basic .cta__link,
.cta--inline .cta__link,
.cta--card .cta__link {
display: flex;
margin-bottom: 0.5rem;
margin-bottom: var(--v-space-2xs);
}
@media (min-width: 33.75rem) {
.cta--basic .cta__link,
.cta--inline .cta__link,
.cta--card .cta__link {
justify-content: center;
width: 100%;
}
}
@media (min-width: 64rem) {
.cta--basic .cta__link,
.cta--inline .cta__link,
.cta--card .cta__link {
display: block;
width: auto;
margin-left: 0.5rem;
margin-left: var(--v-space-2xs);
}
}
.cta--basic .cta__link:last-child,
.cta--inline .cta__link:last-child,
.cta--card .cta__link:last-child {
margin-bottom: 0;
}
@media (min-width: 45rem) {
.cta--basic .cta__link:last-child,
.cta--inline .cta__link:last-child,
.cta--card .cta__link:last-child {
margin-bottom: 0;
}
}
@media (min-width: 64rem) {
.cta--basic .cta__link:last-child,
.cta--inline .cta__link:last-child,
.cta--card .cta__link:last-child {
margin-left: 0;
}
}
.cta--basic .cta__link .button,
.cta--inline .cta__link .button,
.cta--card .cta__link .button {
width: 100%;
white-space: unset;
}
@media (min-width: 33.75rem) {
.cta--basic .cta__link .button,
.cta--inline .cta__link .button,
.cta--card .cta__link .button {
margin-left: auto;
}
}
@media (min-width: 33.75rem) {
.cta--basic .cta__title,
.cta--card .cta__title {
font-size: 1.5rem;
font-size: var(--font-size-m);
line-height: 1.333;
line-height: var(--line-height-l);
}
}
@media (min-width: 33.75rem) {
.cta--basic .cta__text,
.cta--card .cta__text {
grid-column: 1 / span 3;
font-size: 1.25rem;
font-size: var(--font-size-s);
line-height: 1.6;
line-height: var(--line-height-2xl);
margin-bottom: 0;
}
}
@media (min-width: 45rem) {
.cta--basic .cta__text,
.cta--card .cta__text {
margin-bottom: 0;
}
}
@media (min-width: 64rem) {
.cta--basic .cta__text,
.cta--card .cta__text {
grid-column: 1 / span 5;
}
}
.cta--card {
padding: 2rem 0;
padding: var(--v-space-m) 0;
background-color: #f8f3f0;
background-color: var(--product-neutral--1-10);
border-radius: 0.5rem;
border-radius: var(--radius-l);
}
@media (min-width: 45rem) {
.cta--card {
padding: 2.25rem 0;
padding: var(--v-space-l) 0;
}
}
.cta--card .cta__title {
padding: 0 1.25rem;
padding: 0 var(--gutter);
}
@media (min-width: 33.75rem) {
.cta--card .cta__title {
padding-left: 1.25rem;
padding-left: var(--gutter);
padding-right: 0;
}
}
@media (min-width: 45rem) {
.cta--card .cta__title {
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
}
}
.cta--card .cta__text {
font-size: 0.875rem;
font-size: var(--font-size-3xs);
padding: 0 1.25rem;
padding: 0 var(--gutter);
}
@media (min-width: 33.75rem) {
.cta--card .cta__text {
padding-left: 1.25rem;
padding-left: var(--gutter);
padding-right: 0;
}
}
@media (min-width: 45rem) {
.cta--card .cta__text {
font-size: 1rem;
font-size: var(--font-size-m-body);
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
}
}
.cta--card .cta__links {
padding: 0 1.25rem;
padding: 0 var(--gutter);
}
@media (min-width: 45rem) {
.cta--card .cta__links {
padding-left: 0;
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
}
}
/*
* IE 11
* Note: does not support nested media queries.
*/
@media all and (-ms-high-contrast: none) and (min-width: 33.75rem),
(-ms-high-contrast: active) and (min-width: 33.75rem) and all and (-ms-high-contrast: none) and (min-width: 45rem),
(-ms-high-contrast: active) and (min-width: 45rem) {
.cta--basic,
.cta--inline {
display: block;
}
.cta--basic .cta__title,
.cta--basic .cta__text,
.cta--basic .cta__links,
.cta--inline .cta__title,
.cta--inline .cta__text,
.cta--inline .cta__links {
display: block;
}
.cta--basic .cta__link,
.cta--inline .cta__link {
display: inline-block;
margin: 1.25rem calc(1.25rem * 0.5) 0.5rem 0;
margin: var(--v-space-s) calc(var(--gutter) * 0.5) var(--v-space-2xs) 0;
}
}
.featured-video {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.featured-video {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.featured-video .featured-video__element,
.featured-video .featured-video__content {
grid-column: 1 / -1;
}
.featured-video .featured-video__element {
position: relative;
padding-bottom: 56.25%;
}
/* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
@media (min-width: 45rem) {
.featured-video .featured-video__element {
grid-column: 4 / -1;
padding-left: 1.25rem;
padding-left: var(--gutter);
}
}
@media (min-width: 64rem) {
.featured-video .featured-video__element {
grid-column: 1 / span 8;
padding-left: 0;
}
}
.featured-video .featured-video__element:after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
transition: var(--trans-bg-color), var(--trans-opacity);
pointer-events: none;
}
.featured-video .featured-video__element iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: filter 0.15s ease-in-out;
transition: var(--trans-filter);
}
.featured-video .featured-video__content {
padding-top: 2rem;
padding-top: var(--v-space-m);
}
@media (min-width: 45rem) {
.featured-video .featured-video__content {
grid-column: 1 / span 3;
grid-row: 1 / -1;
padding-top: 1.25rem;
padding-top: var(--v-space-s);
}
}
@media (min-width: 64rem) {
.featured-video .featured-video__content {
grid-column: 9 / -1;
padding-top: 2.25rem;
padding-top: var(--v-space-l);
padding-left: 1.25rem;
padding-left: var(--gutter);
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
}
}
.featured-video .featured-video__eyebrow,
.featured-video .featured-video__title {
font-weight: 600;
margin: 0;
transition: color 0.15s ease-in-out;
transition: var(--trans-color);
}
.featured-video .featured-video__title {
font-size: 1.25rem;
font-size: var(--font-size-s);
margin-top: 1rem;
margin-top: var(--v-space-xs);
}
@media (min-width: 45rem) {
.featured-video .featured-video__title {
font-size: 1.5rem;
font-size: var(--font-size-m);
}
}
.quote {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.quote {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.quote {
grid-template-rows: max-content max-content auto;
}
.quote .quote__text {
grid-column: 1 / -1;
grid-row: 1;
margin: 0 0 2.25rem;
margin: 0 0 var(--v-space-l);
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
font-size: 1.5rem;
font-size: var(--font-size-m);
line-height: 1.333;
line-height: var(--line-height-l);
font-weight: 400;
}
@media (min-width: 33.75rem) {
.quote .quote__text {
grid-column-start: 2;
padding-left: 0;
font-size: 1.5rem;
font-size: var(--font-size-m);
}
}
@media (min-width: 45rem) {
.quote .quote__text {
font-size: 1.875rem;
font-size: var(--font-size-1m);
grid-column-start: 1;
padding-left: calc(3rem + (1.25rem * 2));
padding-left: calc(var(--v-space-xl) + (var(--gutter) * 2));
}
}
@media (min-width: 64rem) {
.quote .quote__text {
font-size: 2.25rem;
font-size: var(--font-size-l);
grid-column: 2 / -2;
padding-left: 0;
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
}
}
.quote .quote__icon {
grid-column: 1 / span 1;
grid-row: 1;
margin-top: calc(0.5rem / 2);
margin-top: calc(var(--v-space-2xs) / 2);
left: 1.25rem;
left: var(--gutter);
width: 1.25rem;
width: var(--gutter);
height: 1.25rem;
height: var(--gutter);
fill: #000;
fill: var(--bg-black);
}
@media (min-width: 33.75rem) {
.quote .quote__icon {
top: calc(3rem + 0.5rem);
top: calc(var(--v-space-xl) + var(--v-space-2xs));
width: calc(1.25rem * 2);
width: calc(var(--gutter) * 2);
height: calc(1.25rem * 2);
height: calc(var(--gutter) * 2);
}
}
@media (min-width: 45rem) {
.quote .quote__icon {
top: calc(4rem + 0.5rem);
top: calc(var(--v-space-2xl) + var(--v-space-2xs));
left: calc(1.25rem * 2);
left: calc(var(--gutter) * 2);
width: 3rem;
width: var(--v-space-xl);
height: 3rem;
height: var(--v-space-xl);
}
}
@media (min-width: 64rem) {
.quote .quote__icon {
margin-top: 0.5rem;
margin-top: var(--v-space-2xs);
}
}
.quote .quote__meta {
color: #130032;
color: var(--text-black);
grid-column: 1 / -1;
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
}
@media (min-width: 33.75rem) {
.quote .quote__meta {
grid-column-start: 2;
padding-left: 0;
}
}
@media (min-width: 45rem) {
.quote .quote__meta {
grid-column-start: 1;
padding-left: calc(3rem + (1.25rem * 2));
padding-left: calc(var(--v-space-xl) + (var(--gutter) * 2));
}
}
@media (min-width: 64rem) {
.quote .quote__meta {
grid-column: 2 / -2;
padding-left: 0;
}
}
.quote .quote__author {
margin-bottom: 0.5rem;
margin-bottom: var(--v-space-2xs);
font-weight: 500;
font-size: 1.125rem;
font-size: var(--font-size-2s);
}
@media (min-width: 45rem) {
.quote .quote__author {
font-size: 1.25rem;
font-size: var(--font-size-s);
}
}
@media (min-width: 76.25rem) {
.quote .quote__author {
font-size: 1.5rem;
font-size: var(--font-size-m);
}
}
/* Quote Color Variations */
.rich-text .quote {
color: #330099;
color: var(--text-blue-dark);
}
.rich-text .quote .quote__icon {
fill: #330099;
fill: var(--text-blue-dark);
}
.quote--featured .quote__icon {
grid-column-start: 1;
}
@media (min-width: 45rem) {
.quote--featured .quote__icon {
top: calc(4rem + 0.5rem);
top: calc(var(--v-space-2xl) + var(--v-space-2xs));
left: calc(1.25rem * 2);
left: calc(var(--gutter) * 2);
width: 3rem;
width: var(--v-space-xl);
height: 3rem;
height: var(--v-space-xl);
}
}
@media (min-width: 64rem) {
.quote--featured .quote__icon {
grid-column: 1 / span 1;
margin-top: 0.5rem;
margin-top: var(--v-space-2xs);
}
}
@media (min-width: 76.25rem) {
.quote--featured .quote__icon {
grid-column: 1 / span 1;
}
}
.quote--featured .quote__text {
grid-column: 1 / -1;
margin: 0 0 2.25rem;
margin: 0 0 var(--v-space-l);
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
font-weight: 600;
}
@media (min-width: 33.75rem) {
.quote--featured .quote__text {
grid-column: 2 / -1;
padding-left: 0;
}
}
@media (min-width: 45rem) {
.quote--featured .quote__text {
grid-column: 1 / -1;
padding-left: calc(3rem + (1.25rem * 2));
padding-left: calc(var(--v-space-xl) + (var(--gutter) * 2));
}
}
@media (min-width: 64rem) {
.quote--featured .quote__text {
grid-column-start: 2;
padding-left: 0;
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
}
}
@media (min-width: 76.25rem) {
.quote--featured .quote__text {
grid-column: 2 / span 8;
}
}
.quote--featured .quote__meta {
grid-column: 1 / -1;
}
@media (min-width: 33.75rem) {
.quote--featured .quote__meta {
grid-column-start: 2;
}
}
@media (min-width: 45rem) {
.quote--featured .quote__meta {
grid-column-start: 1;
}
}
@media (min-width: 64rem) {
.quote--featured .quote__meta {
grid-column: 2 / span 7;
padding-left: 0;
}
}
@media (min-width: 76.25rem) {
.quote--featured .quote__meta {
grid-column: 2 / span 8;
}
}
.quote--featured .quote__link-wrapper {
grid-column: 1 / -1;
grid-row: 3;
margin-top: 2.25rem;
margin-top: var(--v-space-l);
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
}
@media (min-width: 33.75rem) {
.quote--featured .quote__link-wrapper {
grid-column: 2 / span 3;
padding-left: 0;
}
}
@media (min-width: 45rem) {
.quote--featured .quote__link-wrapper {
grid-column-start: 1;
padding-left: calc(3rem + (1.25rem * 2));
padding-left: calc(var(--v-space-xl) + (var(--gutter) * 2));
}
}
@media (min-width: 64rem) {
.quote--featured .quote__link-wrapper {
grid-column: 9 / span 4;
grid-row: 2;
margin-top: 2rem;
margin-top: var(--v-space-m);
padding-left: 0;
}
}
@media (min-width: 76.25rem) {
.quote--featured .quote__link-wrapper {
grid-column: 10 / span 3;
}
}
.quote--featured .quote__link {
position: relative;
display: inline-block;
font-weight: 600;
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
}
@media (min-width: 64rem) {
.quote--featured .quote__link {
padding-right: calc(1.25rem * 4);
padding-right: calc(var(--gutter) * 4);
}
}
.quote--featured .quote__link svg {
position: absolute;
transition: transform 0.15s ease-in-out;
transition: var(--trans-transform);
right: 0;
top: calc(0.5rem / 2);
top: calc(var(--v-space-2xs) / 2);
}
@media (min-width: 64rem) {
.quote--featured .quote__link svg {
right: calc(1.25rem * 2);
right: calc(var(--gutter) * 2);
}
}
.quote--featured .quote__link:hover svg {
transform: translateX(5px);
}
.quote--image .quote__image {
grid-column: 1 / 3;
grid-row: 1 / 4;
}
@media (min-width: 64rem) {
.quote--image .quote__image {
grid-column: 1 / 5;
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
}
}
@media (min-width: 76.25rem) {
.quote--image .quote__image {
padding-right: calc(1.25rem * 3);
padding-right: calc(var(--gutter) * 3);
}
}
.quote--image .quote__image img {
margin-bottom: auto;
margin-top: auto;
max-width: 100%;
border-radius: 4px;
border-radius: var(--radius-m);
}
.quote--image .quote__icon {
position: absolute;
left: calc(0rem - (0.5rem * 2));
left: calc(0rem - (var(--v-space-2xs) * 2));
margin-top: 1rem;
margin-top: var(--v-space-xs);
width: 12px;
height: 11px;
}
@media (min-width: 33.75rem) {
.quote--image .quote__icon {
top: 0;
left: calc(0rem - (0.5rem / 2));
left: calc(0rem - (var(--v-space-2xs) / 2));
margin-top: 0;
}
}
@media (min-width: 45rem) {
.quote--image .quote__icon {
left: 1.25rem;
left: var(--gutter);
}
}
@media (min-width: 64rem) {
.quote--image .quote__icon {
left: calc(0rem - 1.25rem);
left: calc(0rem - var(--gutter));
}
}
.quote--image .quote__text {
position: relative;
grid-column: 3 / span 4;
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
padding-left: 0;
font-size: 1rem;
font-size: var(--font-size-xs);
}
@media (min-width: 33.75rem) {
.quote--image .quote__text {
padding-left: 1.25rem;
padding-left: var(--gutter);
font-size: 1.25rem;
font-size: var(--font-size-s);
line-height: 1.5;
line-height: var(--line-height-xl);
}
}
@media (min-width: 45rem) {
.quote--image .quote__text {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
font-size: 1.5rem;
font-size: var(--font-size-m);
}
}
@media (min-width: 64rem) {
.quote--image .quote__text {
grid-column: 5 / -2;
padding-left: 0;
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
font-size: 2.25rem;
font-size: var(--font-size-l);
}
}
@media (min-width: 76.25rem) {
.quote--image .quote__text {
grid-row: 1;
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
line-height: 1.1667;
line-height: var(--line-height-m);
}
}
.quote--image .quote__meta,
.quote--image .quote__link-wrapper {
grid-column: 3 / span 4;
padding-left: 0;
font-size: 0.875rem;
font-size: var(--font-size-3xs);
}
@media (min-width: 33.75rem) {
.quote--image .quote__meta,
.quote--image .quote__link-wrapper {
padding-left: 1.25rem;
padding-left: var(--gutter);
}
}
@media (min-width: 45rem) {
.quote--image .quote__meta,
.quote--image .quote__link-wrapper {
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
font-size: 1rem;
font-size: var(--font-size-xs);
}
}
@media (min-width: 64rem) {
.quote--image .quote__meta,
.quote--image .quote__link-wrapper {
grid-column: 5 / -2;
padding-left: 0;
}
}
@media (min-width: 76.25rem) {
.quote--image .quote__meta,
.quote--image .quote__link-wrapper {
grid-column: 4 / -2;
grid-row: 2;
margin-left: calc(1.25rem * 3);
margin-left: calc(var(--gutter) * 3);
}
}
.quote--image .quote__link-wrapper {
grid-row: 3;
margin-top: 2.25rem;
margin-top: var(--v-space-l);
}
@media (min-width: 45rem) {
.quote--image .quote__link-wrapper {
grid-column: 3 / span 2;
}
}
@media (min-width: 64rem) {
.quote--image .quote__link-wrapper {
grid-column: 5 / span 4;
}
}
@media (min-width: 76.25rem) {
.quote--image .quote__link-wrapper {
grid-column: 6 / span 3;
}
}
.statistic {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.statistic {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.statistic {
padding: 2.25rem 0;
padding: var(--v-space-l) 0;
}
@media (min-width: 45rem) {
.statistic {
padding-bottom: 3rem;
padding-bottom: var(--v-space-xl);
}
}
@media (min-width: 64rem) {
.statistic {
display: block;
padding: 2rem calc(1.25rem * 2) 3rem;
padding: var(--v-space-m) calc(var(--gutter) * 2) var(--v-space-xl);
}
}
@media (min-width: 64rem) {
.content-grid--100 .statistic {
display: grid;
padding: 4rem 0;
padding: var(--v-space-2xl) 0;
}
}
.statistic .statistic__title {
grid-column: 1 / -1;
}
.statistic .statistic__title {
font-weight: 400;
font-size: 2.25rem;
font-size: var(--font-size-l);
line-height: 1.1667;
line-height: var(--line-height-m);
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
@media (min-width: 33.75rem) {
.statistic .statistic__title {
font-size: 3rem;
font-size: var(--font-size-xl);
grid-column: 1 / span 3;
margin-bottom: 0;
}
}
@media (min-width: 45rem) {
.statistic .statistic__title {
font-size: 3.875rem;
font-size: var(--font-size-2xl);
line-height: 1.0667;
line-height: var(--line-height-s);
}
}
@media (min-width: 64rem) {
.statistic .statistic__title {
font-size: 5rem;
font-size: var(--font-size-3xl);
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
}
@media (min-width: 64rem) {
.content-grid--100 .statistic .statistic__title {
grid-column: 1 / span 6;
margin-bottom: 0;
font-size: 7.5rem;
font-size: var(--font-size-5xl);
}
}
.statistic .statistic__description {
grid-column: 1 / -1;
}
.statistic .statistic__description {
font-size: 1rem;
font-size: var(--font-size-xs);
}
@media (min-width: 33.75rem) {
.statistic .statistic__description {
align-self: end;
grid-column: 4 / span 2;
}
}
@media (min-width: 64rem) {
.statistic .statistic__description {
font-size: 1.25rem;
font-size: var(--font-size-s);
line-height: 1.6;
line-height: var(--line-height-2xl);
}
}
@media (min-width: 64rem) {
.content-grid--100 .statistic .statistic__description {
grid-column: 7 / span 3;
align-self: end;
}
}
/* This uses the full width grid as the blue background spans the full page */
.teaser-header {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.teaser-header {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.teaser-header {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.teaser-header {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.teaser-header {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.teaser-header {
background-color: #4c00ff;
background-color: var(--bg-cobalt);
}
.teaser-header .teaser-header__top,
.teaser-header .teaser--compact--highlighted {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.teaser-header .teaser-header__top,
.teaser-header .teaser--compact--highlighted {
grid-column: 3 / -3;
}
}
.teaser-header .teaser-header__top,
.teaser-header .teaser--compact--highlighted {
padding: 1rem 0;
padding: var(--v-space-xs) 0;
}
.teaser-header .teaser-header__top {
border-bottom: 2px solid #fff;
border-bottom: var(--border-base-white);
color: #fff;
color: var(--text-white);
}
.teaser-header .teaser--compact--highlighted .teaser__title,
.teaser-header .teaser--compact--highlighted .teaser__abstract {
color: #fff;
color: var(--text-white);
}
.title--short {
padding: 0;
margin: 2.25rem 0;
margin: var(--v-space-l) 0;
font-size: 3.625rem;
line-height: 1.08;
font-weight: 300;
letter-spacing: -1.25px;
animation: 1s ease 0s 1 normal forwards running fadeInAnimation;
}
@media (min-width: 33.75rem) {
.title--short {
margin: 3rem 0;
margin: var(--v-space-xl) 0;
font-size: 4rem;
letter-spacing: -1.5px;
}
}
@media (min-width: 64rem) {
.title--short {
margin: 2.25rem 0 3rem;
margin: var(--v-space-l) 0 var(--v-space-xl);
font-size: 5rem;
line-height: 8.00025rem;
}
}
/*
* IE 11
* Note: does not support nested media queries.
*/
@media all and (-ms-high-contrast: none) and (min-width: 33.75rem),
(-ms-high-contrast: active) and (min-width: 33.75rem) {
.title--short {
font-size: 3.875rem;
font-size: var(--font-size-2xl);
line-height: 1.0667;
line-height: var(--line-height-s);
}
}
@media all and (-ms-high-contrast: none) and (min-width: 45rem),
(-ms-high-contrast: active) and (min-width: 45rem) {
.title--short {
font-size: 5.625rem;
font-size: var(--font-size-4xl);
}
}
@media all and (-ms-high-contrast: none) and (min-width: 64rem),
(-ms-high-contrast: active) and (min-width: 64rem) {
.title--short {
font-size: 7.5rem;
font-size: var(--font-size-5xl);
}
}
.title--long {
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
font-size: 3.625rem;
line-height: 1.08;
font-weight: 300;
letter-spacing: -1.25px;
}
@media (min-width: 45rem) {
.title--long {
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
font-size: 4rem;
letter-spacing: -1.5px;
}
}
@media (min-width: 76.25rem) {
.title--long {
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
font-size: 5rem;
}
}
/*
* IE 11
* Note: does not support nested media queries.
*/
@media all and (-ms-high-contrast: none) and (min-width: 64rem),
(-ms-high-contrast: active) and (min-width: 64rem) {
.title--long {
font-size: 3.625rem;
line-height: 1.08;
}
}
@media all and (-ms-high-contrast: none) and (min-width: 76.25rem),
(-ms-high-contrast: active) and (min-width: 76.25rem) {
.title--long {
font-size: 5rem;
}
}
.video {
position: relative;
padding-bottom: 56.25%;
}
/* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
.video:after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
transition: var(--trans-bg-color), var(--trans-opacity);
pointer-events: none;
}
.video .video__iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: filter 0.15s ease-in-out;
transition: var(--trans-filter);
}
.video .video__button {
grid-column: 1 / -1;
}
.video .video__button {
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
transition: opacity 0.15s ease-in-out;
transition: var(--trans-opacity);
color: #fff;
color: var(--text-white);
font-size: 1.25rem;
font-size: var(--font-size-s);
line-height: 1.5;
line-height: var(--line-height-xl);
pointer-events: none;
}
.video .video__button .video__button-icon {
width: calc(1rem * 2);
width: calc(var(--h-space-xs) * 2);
/* 32px */
height: 2rem;
height: var(--v-space-m);
/* 32px */
margin-right: 1.25rem;
margin-right: var(--gutter);
fill: #fff;
fill: var(--text-white);
}
.video .video__button .video__button-text {
white-space: nowrap;
}
.video--is-playing .video__button {
opacity: 0;
transition: opacity 0.15s ease-in-out;
transition: var(--trans-opacity);
}
.messages {
max-width: 90rem;
margin-left: auto;
margin-right: auto;
padding-right: 1.25rem;
padding-right: var(--gutter);
padding-left: 1.25rem;
padding-left: var(--gutter);
}
@media (min-width: 73rem) {
.messages {
padding-right: calc(2 * 1.25rem);
padding-right: calc(2 * var(--gutter));
padding-left: calc(2 * 1.25rem);
padding-left: calc(2 * var(--gutter));
}
}
@media (min-width: 76.25rem) {
.messages {
padding-right: 1.25rem;
padding-right: var(--gutter);
padding-left: 1.25rem;
padding-left: var(--gutter);
}
}
@supports (font-size: calc(100vw)) {
.messages {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
}
@supports (font-size: calc(100vw)) {
@media (min-width: 64rem) {
.messages {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
}
@supports (font-size: calc(100vw)) {
@media (min-width: 76.25rem) {
.messages {
grid-template-columns: repeat(14, minmax(0, 1fr));
}
}
}
.messages__item {
position: relative;
margin-top: 1.25rem;
margin-top: var(--v-space-s);
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
padding: 1.25rem 1.25rem 1.25rem calc(3 * 1.25rem);
padding: var(--v-space-s) var(--gutter) var(--v-space-s)
calc(3 * var(--gutter));
grid-column: 1 / -1;
}
@media (min-width: 64rem) {
.messages__item {
padding-top: 2.25rem;
padding-top: var(--v-space-l);
padding-bottom: 2.25rem;
padding-bottom: var(--v-space-l);
}
}
.messages__item--status {
background-color: #13e280;
background-color: var(--green);
}
.messages__item--warning {
background-color: #fb00e2;
background-color: var(--yellow);
}
.messages__item--error {
background-color: #ff5252;
background-color: var(--warm-red);
}
.messages__icon {
position: absolute;
left: 1.25rem;
left: var(--gutter);
top: calc(3 * 0.5rem);
top: calc(3 * var(--v-space-2xs));
fill: #130032;
fill: var(--text-black);
}
@media (min-width: 64rem) {
.messages__icon {
top: calc(2 * 1.25rem);
top: calc(2 * var(--v-space-s));
}
}
.messages a {
color: #130032;
color: var(--text-black);
text-decoration: underline;
}
.messages ul {
padding-left: 1rem;
padding-left: var(--v-space-xs);
}
.tabs {
margin: 2rem 0;
margin: var(--v-space-m) 0;
}
.tabs__list {
max-width: 90rem;
margin-left: auto;
margin-right: auto;
padding-right: 1.25rem;
padding-right: var(--gutter);
padding-left: 1.25rem;
padding-left: var(--gutter);
}
@media (min-width: 73rem) {
.tabs__list {
padding-right: calc(2 * 1.25rem);
padding-right: calc(2 * var(--gutter));
padding-left: calc(2 * 1.25rem);
padding-left: calc(2 * var(--gutter));
}
}
@media (min-width: 76.25rem) {
.tabs__list {
padding-right: 1.25rem;
padding-right: var(--gutter);
padding-left: 1.25rem;
padding-left: var(--gutter);
}
}
@supports (font-size: calc(100vw)) {
.tabs__list {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
}
@supports (font-size: calc(100vw)) {
@media (min-width: 64rem) {
.tabs__list {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
}
@supports (font-size: calc(100vw)) {
@media (min-width: 76.25rem) {
.tabs__list {
grid-template-columns: repeat(14, minmax(0, 1fr));
}
}
}
.tabs__list {
max-width: 100%;
overflow-x: scroll;
list-style: none;
border-bottom: 1px solid #dadcde;
border-bottom: var(--border-light);
}
@media (min-width: 33.75rem) {
.tabs__list {
align-items: center;
display: flex;
}
}
.tabs__item {
display: inline-block;
}
.tabs a {
--text: var(--text-dark);
display: inline-block;
color: #191919;
color: var(--text-dark);
border-bottom: 2px solid transparent;
padding: 0.5rem 1.25rem;
padding: var(--v-space-2xs) var(--v-space-s);
}
.tabs a:hover {
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
}
.tabs a.is-active {
color: #130032;
color: var(--text-black);
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
}
/* Button. */
.layout-content .button {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-width: 125px;
padding: 0.62rem 0.93rem;
background-color: #4c00ff;
background-color: var(--text-accent);
outline-offset: 3px;
border-color: #4c00ff;
border-color: var(--text-accent);
border-style: solid;
border-radius: 0.5rem;
border-radius: var(--radius-l);
border-width: 1px;
color: #fff;
color: var(--text-white);
font-weight: 500;
font-size: 0.937rem;
font-size: var(--font-size-2xs);
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease-in-out;
transition: var(--trans-bg-color);
white-space: nowrap;
}
.layout-content .button:hover {
background-color: #26065d;
background-color: var(--cobalt-90);
border-color: #26065d;
border-color: var(--cobalt-90);
color: #fff;
}
.layout-content .button:focus,
.layout-content .button:active {
background-color: #4c00ff;
background-color: var(--text-accent-hover);
border-color: #4c00ff;
border-color: var(--text-accent-hover);
outline: 3px solid #767677;
outline: 3px solid var(--marketing-neutral--4-54);
text-decoration: none;
}
/* Variants */
.layout-content .button.button--secondary {
background-color: #fff;
border-color: #4c00ff;
border-color: var(--text-accent);
color: #4c00ff;
color: var(--text-accent);
}
.layout-content .button.button--secondary:hover,
.layout-content .button.button--secondary:focus {
border-color: #4c00ff;
border-color: var(--text-accent-hover);
color: #4c00ff;
color: var(--text-accent-hover);
}
.layout-content .button.button--ghost {
background-color: transparent;
border-color: #4c00ff;
border-color: var(--border-color-blue);
color: #4c00ff;
color: var(--text-accent);
transition-property: border;
}
@media (min-width: 45rem) {
.layout-content .button.button--ghost {
border-color: transparent;
}
}
.layout-content .button.button--ghost:hover,
.layout-content .button.button--ghost:focus {
border-color: #4c00ff;
border-color: var(--text-accent-hover);
}
.layout-content .button.button--secondary-ghost {
background-color: transparent;
border-color: transparent;
color: #4c00ff;
color: var(--text-accent);
transition-property: border;
}
.layout-content .button.button--secondary-ghost:hover,
.layout-content .button.button--secondary-ghost:focus {
border-color: #4c00ff;
border-color: var(--text-accent-hover);
}
.layout-content .button.button--dark {
background-color: #2c2c2d;
background-color: var(--bg-gray-dark);
border-color: transparent;
color: #fff;
color: var(--text-white);
transition-property: background-color;
}
.layout-content .button.button--dark:hover,
.layout-content .button.button--dark:focus {
background-color: #484849;
background-color: var(--text-dark-hover);
}
.layout-content .button.button--secondary-dark {
background-color: transparent;
border-color: #130032;
border-color: var(--border-color);
color: #130032;
color: var(--text-black);
}
.layout-content .button.button--secondary-dark:hover,
.layout-content .button.button--secondary-dark:focus {
border-color: #4c00ff;
border-color: var(--text-accent-hover);
}
/* Sizes */
.layout-content .button.button--full {
width: 100%;
}
.layout-content .button.button--large {
font-size: 1rem;
font-size: var(--font-size-xs);
font-weight: 500;
padding: 0.75rem 1.87rem;
}
.layout-content .icon-link {
transition: color 0.15s ease-in-out, fill 0.15s ease-in-out,
transform 0.15s ease-in-out;
transition: var(--trans-color), var(--trans-fill), var(--trans-transform);
position: relative;
display: inline-block;
padding-left: 1rem;
padding-left: var(--h-space-xs);
font-size: 0.875rem;
font-size: var(--font-size-s-body);
font-weight: 400;
}
.layout-content .icon-link .icon-link__icon {
transition: transform 0.15s ease-in-out;
transition: var(--trans-transform);
position: absolute;
left: 0;
top: 20%;
height: 0.875rem;
height: var(--font-size-s-body);
}
.layout-content .icon-link:hover .icon-link__icon,
.layout-content .icon-link:focus .icon-link__icon {
transform: translateX(-5px);
}
.layout-content .icon-link--right {
padding-left: 0;
padding-right: 1rem;
padding-right: var(--h-space-xs);
}
.layout-content .icon-link--right .icon-link__icon {
left: auto;
right: 0;
top: 20%;
transform: rotate(180deg);
}
.layout-content .icon-link--right:hover .icon-link__icon,
.layout-content .icon-link--right:focus .icon-link__icon {
transform: translateX(5px) rotate(180deg);
}
.layout-content .icon-link--teal {
color: #4c00ff;
color: var(--text-small-teal);
}
.layout-content .icon-link--teal .icon-link__icon {
fill: #4c00ff;
fill: var(--text-small-teal);
}
.layout-content .icon-link--teal:hover,
.layout-content .icon-link--teal:focus {
color: #4c00ff;
color: var(--text-small-teal);
}
.layout-content .icon-link--teal:hover .icon-link__icon,
.layout-content .icon-link--teal:focus .icon-link__icon {
fill: #4c00ff;
fill: var(--text-small-teal);
}
.layout-content .icon-link--white {
color: #fff;
color: var(--text-white);
}
.layout-content .icon-link--white .icon-link__icon {
fill: #fff;
fill: var(--text-white);
}
.layout-content .icon-link--white:hover,
.layout-content .icon-link--white:focus {
color: #fff;
color: var(--text-white);
}
.layout-content .icon-link--white:hover .icon-link__icon,
.layout-content .icon-link--white:focus .icon-link__icon {
fill: #fff;
fill: var(--text-white);
}
.link-list--content-collection .link-list__heading,
.link-list--content-collection-large .link-list__heading {
font-weight: 600;
display: inline-block;
margin-top: 0;
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
font-size: 1.25rem;
font-size: var(--font-size-s);
line-height: 1.5;
line-height: var(--line-height-xl);
}
.link-list--content-collection .link-list__list,
.link-list--content-collection-large .link-list__list {
margin: 0;
padding: 0;
list-style: none;
}
.link-list--content-collection
.link-list__list-item:first-child
.link-list__link,
.link-list--content-collection-large
.link-list__list-item:first-child
.link-list__link {
border-top: 2px solid #130032;
border-top: var(--border-base);
}
.link-list--content-collection
.link-list__list-item:last-child
.link-list__link,
.link-list--content-collection-large
.link-list__list-item:last-child
.link-list__link {
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
}
.link-list--content-collection .link-list__link,
.link-list--content-collection-large .link-list__link {
position: relative;
display: inline-block;
width: 100%;
padding-top: 1.25rem;
padding-top: var(--v-space-s);
padding-bottom: 1.25rem;
padding-bottom: var(--v-space-s);
border-top: 1px solid #dadcde;
border-top: var(--border-light);
color: #130032;
color: var(--text-black);
}
.link-list--content-collection .link-list__link .link-list__text,
.link-list--content-collection-large .link-list__link .link-list__text {
font-weight: 600;
}
.link-list--content-collection .link-list__link .link-list__pointer,
.link-list--content-collection-large .link-list__link .link-list__pointer {
position: absolute;
top: 2rem;
top: var(--v-space-m);
right: 0.5rem;
right: var(--v-space-2xs);
fill: #130032;
fill: var(--text-black);
transition: transform 0.15s ease-in-out;
transition: var(--trans-transform);
}
.link-list--content-collection .link-list__link:hover,
.link-list--content-collection-large .link-list__link:hover {
color: #4c00ff;
color: var(--text-accent);
}
.link-list--content-collection .link-list__link:hover .link-list__pointer,
.link-list--content-collection-large
.link-list__link:hover
.link-list__pointer {
fill: #4c00ff;
fill: var(--text-accent);
transition: transform 0.15s ease-in-out;
transition: var(--trans-transform);
}
.link-list--content-collection .link-list__link--more,
.link-list--content-collection-large .link-list__link--more {
position: relative;
display: inline-block;
width: 100%;
padding: 1.25rem 1.25rem 1.25rem 0;
padding: var(--v-space-s) var(--gutter) var(--v-space-s) 0;
border-top: 1px solid #dadcde;
border-top: var(--border-light);
border-bottom: none;
font-weight: 600;
}
.link-list--content-collection .link-list__link--more .link-list__pointer,
.link-list--content-collection-large
.link-list__link--more
.link-list__pointer {
display: none;
}
.link-list--content-collection .link-list__pointer {
transform: translateX(5px) translateY(1px) rotate(180deg);
}
.link-list--content-collection .link-list__link {
padding-right: 1.25rem;
padding-right: var(--gutter);
font-size: 1rem;
font-size: var(--font-size-xs);
line-height: 1.5;
line-height: var(--line-height-xl);
}
.link-list--content-collection .link-list__link:hover .link-list__pointer {
transform: translateX(10px) translateY(1px) rotate(180deg);
}
.link-list--content-collection-large .link-list__link {
font-size: 1.5rem;
font-size: var(--font-size-m);
line-height: 1.333;
line-height: var(--line-height-l);
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
}
.link-list--content-collection-large .link-list__link .link-list__pointer {
transform: translateX(5px) translateY(0) rotate(0deg);
}
.link-list--content-collection-large
.link-list__link:hover
.link-list__pointer {
transform: translateX(10px) translateY(0) rotate(0deg);
}
.link-list__text {
display: inline-block;
}
.link-list__pointer {
display: inline-block;
fill: #fff;
fill: var(--text-white);
transform: translateX(5px) translateY(1px) rotate(180deg);
transition: transform 0.15s ease-in-out;
transition: var(--trans-transform);
}
.link-list--navigation,
.link-list--navigation-large-text,
.link-list--navigation-horizontal {
background: #130032;
background: var(--text-black);
color: #fff;
color: var(--text-white);
}
.link-list--navigation .link-list__heading,
.link-list--navigation-large-text .link-list__heading,
.link-list--navigation-horizontal .link-list__heading {
font-size: 0.75rem;
font-size: var(--font-size-4xs);
font-weight: 600;
line-height: 1.333;
line-height: var(--line-height-l);
text-transform: uppercase;
color: #a3a4a6;
color: var(--marketing-neutral--2-49);
}
.link-list--navigation ul,
.link-list--navigation-large-text ul,
.link-list--navigation-horizontal ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.link-list--navigation li,
.link-list--navigation-large-text li,
.link-list--navigation-horizontal li {
margin: 0;
padding: 0.5rem 0 0 0;
padding: var(--v-space-2xs) 0 0 0;
}
.link-list--navigation li:first-child,
.link-list--navigation-large-text li:first-child,
.link-list--navigation-horizontal li:first-child {
padding-top: 1rem;
padding-top: var(--v-space-xs);
}
.link-list--navigation a,
.link-list--navigation a:visited,
.link-list--navigation-large-text a,
.link-list--navigation-large-text a:visited,
.link-list--navigation-horizontal a,
.link-list--navigation-horizontal a:visited {
display: inline-block;
color: #fff;
color: var(--text-white);
transition: color 0.15s ease-in-out;
transition: var(--trans-color);
font-size: 0.875rem;
font-size: var(--font-size-3xs);
font-weight: 600;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.link-list--navigation a .link-list__subtext,
.link-list--navigation a:visited .link-list__subtext,
.link-list--navigation-large-text a .link-list__subtext,
.link-list--navigation-large-text a:visited .link-list__subtext,
.link-list--navigation-horizontal a .link-list__subtext,
.link-list--navigation-horizontal a:visited .link-list__subtext {
color: #a3a4a6;
color: var(--rule-on-black-secondary);
}
.link-list--navigation a:hover,
.link-list--navigation a:focus,
.link-list--navigation a:visited:hover,
.link-list--navigation a:visited:focus,
.link-list--navigation-large-text a:hover,
.link-list--navigation-large-text a:focus,
.link-list--navigation-large-text a:visited:hover,
.link-list--navigation-large-text a:visited:focus,
.link-list--navigation-horizontal a:hover,
.link-list--navigation-horizontal a:focus,
.link-list--navigation-horizontal a:visited:hover,
.link-list--navigation-horizontal a:visited:focus {
color: #a3a4a6;
color: var(--rule-on-black-secondary);
}
.link-list--navigation a:hover .link-list__pointer,
.link-list--navigation a:focus .link-list__pointer,
.link-list--navigation a:visited:hover .link-list__pointer,
.link-list--navigation a:visited:focus .link-list__pointer,
.link-list--navigation-large-text a:hover .link-list__pointer,
.link-list--navigation-large-text a:focus .link-list__pointer,
.link-list--navigation-large-text a:visited:hover .link-list__pointer,
.link-list--navigation-large-text a:visited:focus .link-list__pointer,
.link-list--navigation-horizontal a:hover .link-list__pointer,
.link-list--navigation-horizontal a:focus .link-list__pointer,
.link-list--navigation-horizontal a:visited:hover .link-list__pointer,
.link-list--navigation-horizontal a:visited:focus .link-list__pointer {
fill: #a3a4a6;
fill: var(--rule-on-black-secondary);
transform: translateX(11px) translateY(-50%) rotate(180deg);
transition: transform 0.15s ease-in-out;
transition: var(--trans-transform);
}
.link-list--navigation-large-text a,
.link-list--navigation-large-text a:visited {
font-size: 1rem;
font-size: var(--font-size-xs);
line-height: 1.5;
line-height: var(--line-height-xl);
font-weight: 500;
}
.link-list--navigation-large-text .link-list__heading {
line-height: 1.5;
line-height: var(--line-height-xl);
}
@media (min-width: 64rem) {
.link-list--navigation-horizontal {
display: flex;
align-items: baseline;
}
}
@media (min-width: 64rem) {
.link-list--navigation-horizontal .link-list__heading {
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
}
@media (min-width: 64rem) {
.link-list--navigation-horizontal .link-list__heading {
margin-bottom: 0;
}
}
@media (min-width: 33.75rem) {
.link-list--navigation-horizontal ul {
-moz-columns: 2 auto;
columns: 2 auto;
-moz-column-gap: calc(1.25rem * 2);
column-gap: calc(1.25rem * 2);
-moz-column-gap: calc(var(--gutter) * 2);
column-gap: calc(var(--gutter) * 2);
}
}
@media (min-width: 64rem) {
.link-list--navigation-horizontal ul {
-moz-columns: unset;
columns: unset;
margin-top: calc(1rem * -1);
margin-top: calc(var(--v-space-xs) * -1);
display: flex;
flex-wrap: wrap;
}
}
@media (min-width: 64rem) {
.link-list--navigation-horizontal li {
margin: 1rem 1.25rem 0 0;
margin: var(--v-space-xs) var(--gutter) 0 0;
}
}
@media (min-width: 76.25rem) {
.link-list--navigation-horizontal li {
margin-bottom: 0;
}
}
@media (min-width: 33.75rem) {
.link-list--navigation-horizontal li:first-child {
margin-top: 0;
}
}
@media (min-width: 64rem) {
.link-list--navigation-horizontal li:first-child {
margin-top: 1rem;
margin-top: var(--v-space-xs);
}
}
.link-list__link--agreement-cloud {
margin: calc(0px - 3rem) calc(0px - (1.25rem * 2)) 2.25rem;
margin: calc(0px - var(--v-space-xl)) calc(0px - (var(--gutter) * 2))
var(--v-space-l);
padding: 3rem calc(1.25rem * 8) 3rem calc(1.25rem * 2);
padding: var(--v-space-xl) calc(var(--gutter) * 8) var(--v-space-xl)
calc(var(--gutter) * 2);
border-bottom: 1px solid #2c2c2d;
border-bottom: 1px solid var(--border-on-black);
color: #fff;
color: var(--text-white);
}
.link-list__link--agreement-cloud:hover::after {
width: 100%;
}
.link-list__link--agreement-cloud:hover .link-list__text {
color: #fff;
color: var(--text-white);
transition: none;
}
.link-list__link--agreement-cloud:hover .link-list__pointer {
fill: #d6fb00;
fill: var(--ac-yellow);
}
.link-list__link--agreement-cloud::after {
background-image: url('/themes/custom/cubic/build/asset/image/bg-grad-small.png');
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
content: '';
height: 5px;
left: 0;
position: absolute;
transition: width 0.15s ease-in-out;
width: 0;
}
.link-list__link--agreement-cloud .link-list__text {
font-size: 1.25rem;
font-size: var(--font-size-s);
font-weight: 600;
line-height: 1.5;
line-height: var(--line-height-xl);
transition: none;
}
.link-list__link--agreement-cloud .link-list__subtext {
margin-top: 0.5rem;
margin-top: var(--v-space-2xs);
font-size: 1rem;
font-size: var(--font-size-xs);
font-weight: 600;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.link-list__link--agreement-cloud .link-list__more {
display: inline-block;
margin-top: 1rem;
margin-top: var(--v-space-xs);
max-width: 60%;
font-size: 1rem;
font-size: var(--font-size-xs);
color: #d6fb00;
color: var(--ac-yellow);
padding-right: calc(1rem / 2);
padding-right: calc(var(--h-space-xs) / 2);
position: relative;
}
.link-list__link--agreement-cloud .link-list__pointer {
fill: #d6fb00;
fill: var(--ac-yellow);
}
.link-list__text {
display: inline-block;
margin-right: calc(1rem / 2);
margin-right: calc(var(--h-space-xs) / 2);
}
.link-list__pointer {
display: inline-block;
fill: #fff;
fill: var(--text-white);
margin-top: 1px;
position: absolute;
right: 0;
top: 50%;
transform: translateX(6px) translateY(-50%) rotate(180deg);
transition: transform 0.15s ease-in-out;
transition: var(--trans-transform);
}
.link-list__link--external::after {
content: '';
position: absolute;
top: 0;
right: 0;
vertical-align: middle;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23FFF' stroke-width='2' fill='none' fill-rule='evenodd'%3E%3Cpath d='M1 0v13h10V7M11 5V1H6.998M10.958 1L6 6'/%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 12px 14px;
width: 12px;
height: 14px;
}
.link-list__ac-logo {
position: absolute;
right: calc(1.25rem * 2);
right: calc(var(--gutter) * 2);
top: calc(1.25rem * 2);
top: calc(var(--gutter) * 2);
}
.locale-switcher {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #130032;
background-color: var(--text-black);
background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0h8L4 5z'/%3E%3C/svg%3E"),
url('/themes/custom/cubic/build/asset/image/select-globe-white.svg'),
linear-gradient(to bottom, #000 0%, #000 100%);
background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0h8L4 5z'/%3E%3C/svg%3E"),
url('/themes/custom/cubic/build/asset/image/select-globe-white.svg'),
linear-gradient(to bottom, var(--bg-black) 0%, var(--bg-black) 100%);
background-repeat: no-repeat, no-repeat, repeat;
background-position: right 0.7em top 50%, left 0.7em top 50%, 0 0;
background-size: 0.65em auto, 20px 20px, 100%;
border: 1px solid #484849;
border: 1px solid var(--border-field-on-black);
border-radius: 2px;
border-radius: var(--radius-s);
color: #f6f8fa;
color: var(--rule-on-dark);
display: block;
font-size: 1rem;
font-size: var(--font-size-m-body);
line-height: 1.2;
margin: 0;
max-width: 100%;
padding: 12px 40px;
}
@media (min-width: 45rem) {
.locale-switcher {
font-size: 0.875rem;
font-size: var(--font-size-s-body);
}
}
.locale-switcher::-ms-expand {
display: none;
}
.pager {
display: block;
width: 100%;
font-size: 1rem;
font-size: var(--font-size-m-body);
}
.pager__items {
list-style: none;
display: flex;
}
.pager__items--no-prev .pager__item:first-child {
flex-grow: 2;
text-align: right;
}
@media (min-width: 33.75rem) {
.pager__items--no-prev .pager__item:first-child {
flex-grow: 0;
}
}
.pager__item {
font-weight: 600;
font-size: 1.25rem;
font-size: var(--font-size-s);
}
@media (min-width: 33.75rem) {
.pager__item {
font-size: 1rem;
font-size: var(--font-size-xs);
}
}
.pager__item a {
padding: 0.5rem calc(1.25rem / 2);
padding: var(--v-space-2xs) calc(var(--gutter) / 2);
color: #130032;
color: var(--text-black);
}
.pager__item a:hover {
color: #4c00ff;
color: var(--text-accent);
}
.pager__items--no-prev .pager__item:first-child a {
padding-left: 0;
}
.pager__item--active a {
color: #656566;
color: var(--text-light);
}
.pager__item--active a:hover {
color: #656566;
color: var(--text-light);
}
.pager__item--previous {
order: -1;
}
@media (min-width: 33.75rem) {
.pager__item--previous {
order: 0;
text-align: right;
margin-right: calc(2 * 1.25rem);
margin-right: calc(2 * var(--gutter));
}
}
.pager__item--previous a {
padding-right: 0;
padding-left: 0;
}
.pager__item--previous .pager__arrow {
transform: rotate(180deg);
}
.pager__item--next {
flex-grow: 2;
text-align: right;
padding-right: 0;
}
@media (min-width: 33.75rem) {
.pager__item--next {
order: 1;
flex-grow: 0;
}
}
.pager__item--next a {
padding-right: 0;
padding-left: 0;
}
.pager__item--spacer {
flex-grow: 2;
}
.pager__text {
display: none;
}
@media (min-width: 33.75rem) {
.pager__text {
display: inline-block;
}
}
.pager__arrow {
fill: #130032;
fill: var(--text-black);
}
.pager__arrow:hover {
fill: #4c00ff;
fill: var(--text-accent);
}
@media (min-width: 33.75rem) {
.pager__arrow {
display: none;
}
}
.rich-text > :first-child {
margin-top: 0;
}
.rich-text p {
margin-top: 1.25rem;
margin-top: var(--v-space-s);
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
@media (min-width: 60rem) {
.rich-text p {
margin-top: 2rem;
margin-top: var(--v-space-m);
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
}
}
.rich-text p img:first-of-type {
margin-top: 0;
}
.rich-text p,
.rich-text li {
line-height: 1.5;
line-height: var(--line-height-xl);
font-size: 1rem;
font-size: var(--font-size-m-body);
color: rgba(#130032, 0.75);
color: var(--rich-text-color);
}
@media (min-width: 33.75rem) {
.rich-text p,
.rich-text li {
font-size: calc(1rem + 0.25 * ((100vw - 33.75rem) / 30.25));
line-height: calc(1.5rem + 0.5 * ((100vw - 33.75rem) / 30.25));
}
}
@media (min-width: 64rem) {
.rich-text p,
.rich-text li {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
.rich-text blockquote,
.rich-text blockquote p {
margin: 2.25rem 0 2.25rem 1.25rem;
margin: var(--v-space-l) 0 var(--v-space-l) var(--gutter);
clear: both;
font-size: 1.5rem;
font-size: var(--font-size-m);
font-weight: 600;
line-height: 1.333;
line-height: var(--line-height-l);
}
@media (min-width: 33.75rem) {
.rich-text blockquote,
.rich-text blockquote p {
font-size: calc(1.5rem + 1.5 * ((100vw - 33.75rem) / 30.25));
line-height: calc(
2.325rem + 1.1749999999999998 * ((100vw - 33.75rem) / 30.25)
);
}
}
@media (min-width: 64rem) {
.rich-text blockquote,
.rich-text blockquote p {
font-size: 3rem;
line-height: 3.5rem;
}
}
@media (min-width: 60rem) {
.rich-text blockquote,
.rich-text blockquote p {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
margin-left: calc(2rem * 2);
margin-left: calc(var(--v-space-m) * 2);
}
}
.rich-text img {
display: block;
max-width: 100%;
height: auto;
margin-top: 2rem;
margin-top: var(--v-space-m);
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
}
@media (min-width: 60rem) {
.rich-text img {
margin-top: 3rem;
margin-top: var(--v-space-xl);
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
}
.rich-text .align-left {
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
float: left;
}
.rich-text .align-right {
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
float: right;
}
.rich-text .align-left,
.rich-text .align-right {
display: block;
margin-top: 2rem;
margin-top: var(--v-space-m);
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
}
@media (min-width: 60rem) {
.rich-text .align-left,
.rich-text .align-right {
margin-top: 3rem;
margin-top: var(--v-space-xl);
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
}
.rich-text figure {
margin: 2.25rem 0;
margin: var(--v-space-l) 0;
}
.rich-text figure img {
margin: 0;
}
.rich-text figure.align-left {
padding-right: 0;
}
.rich-text figure.align-right {
padding-left: 0;
}
.rich-text figcaption {
font-size: 0.875rem;
font-size: var(--font-size-s-body);
font-weight: 500;
text-align: left;
color: #656566;
color: var(--text-light);
}
.rich-text figcaption {
display: inline-block;
max-width: 40ch;
clear: both;
margin-top: 2rem;
margin-top: var(--v-space-m);
}
/* Specific styles for Link collection embedded in a caption wrapper (figure) when inside WYSIWYG. */
.rich-text figure .link-list--content-collection {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
.rich-text div[data-embed-button='customer_quote'] {
margin-top: 3rem;
margin-top: var(--v-space-xl);
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
@media (min-width: 45rem) {
.rich-text div[data-embed-button='customer_quote'] {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
}
}
@media (min-width: 64rem) {
.rich-text div[data-embed-button='customer_quote'] {
margin-top: 6.5rem;
margin-top: var(--v-space-3xl);
margin-bottom: 6.5rem;
margin-bottom: var(--v-space-3xl);
}
}
.rich-text div[data-embed-button='basic_cta'] {
margin-top: 2.25rem;
margin-top: var(--v-space-l);
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
@media (min-width: 45rem) {
.rich-text div[data-embed-button='basic_cta'] {
margin-top: 3rem;
margin-top: var(--v-space-xl);
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
}
@media (min-width: 64rem) {
.rich-text div[data-embed-button='basic_cta'] {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
}
}
.rich-text .cta.cta--inline,
.rich-text .cta.cta--card {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.rich-text .cta.cta--inline,
.rich-text .cta.cta--card {
grid-template-columns: repeat(8, 1fr);
}
}
@media (min-width: 64rem) {
.rich-text .cta.cta--inline .cta__title,
.rich-text .cta.cta--inline .cta__text,
.rich-text .cta.cta--card .cta__title,
.rich-text .cta.cta--card .cta__text {
grid-column: 1 / span 5;
}
}
@media (min-width: 64rem) {
.rich-text .cta.cta--inline .cta__text,
.rich-text .cta.cta--card .cta__text {
margin-bottom: 0;
}
}
@media (min-width: 64rem) {
.rich-text .cta.cta--inline .cta__links,
.rich-text .cta.cta--card .cta__links {
display: block;
grid-column: 6 / span 3;
}
}
@media (min-width: 64rem) {
.rich-text .cta.cta--inline .cta__link,
.rich-text .cta.cta--card .cta__link {
margin-left: 0;
width: 100%;
}
}
.rich-text .cta.cta--inline {
border-top: 2px solid #130032;
border-top: var(--border-base);
padding-top: 2rem;
padding-top: var(--v-space-m);
}
@media (min-width: 64rem) {
.rich-text .cta.cta--card .cta__links {
margin: 0;
}
}
.layout-content .social-links__list {
margin: 0;
padding: 0;
}
.layout-content .social-links__item {
display: inline-block;
}
.layout-content .social-links__label {
font-size: 0.875rem;
font-size: var(--font-size-s-body);
font-weight: 500;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.layout-content .social-links__label {
margin-bottom: 1rem;
margin-bottom: var(--v-space-xs);
text-transform: uppercase;
}
.layout-content .social-links__link {
align-items: center;
background-color: #000;
background-color: var(--rule-on-white);
border-radius: 50%;
border-radius: var(--radius-circle);
font-size: 0;
display: inline-flex;
justify-content: center;
height: 2.375rem;
width: 2.375rem;
}
.layout-content .social-links__link:hover {
background-color: #4c00ff;
background-color: var(--text-accent);
}
.layout-content .social-links__link:not(:last-child) {
margin-right: calc(1rem / 2);
margin-right: calc(var(--h-space-xs) / 2);
}
.layout-content .social-links .social-links__icon {
fill: #fff;
fill: var(--text-white);
height: 1.5rem;
width: 1.5rem;
}
table {
margin: 3rem 0;
margin: var(--v-space-xl) 0;
width: 100%;
text-align: left;
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
font-size: 1rem;
font-size: var(--font-size-m-body);
border-collapse: collapse;
}
@media (min-width: 45rem) {
table {
margin: 4rem 0;
margin: var(--v-space-2xl) 0;
}
}
table th {
border-bottom: 2px solid #130032;
border-bottom: var(--border-base);
font-size: 1.25rem;
font-size: var(--font-size-l-body);
}
table th,
table td {
padding: 0.75rem 1.25rem 0.75rem 0;
padding: var(--font-size-4xs) var(--font-size-s) var(--font-size-4xs) 0;
}
table tr:not(:last-child) td {
border-bottom: 1px solid #dadcde;
border-bottom: var(--border-light);
}
table caption {
font-size: 0.875rem;
font-size: var(--font-size-s-body);
font-weight: 500;
text-align: left;
color: #656566;
color: var(--text-light);
}
.tag-list__label {
text-transform: uppercase;
font-size: 0.75rem;
font-size: var(--font-size-4xs);
font-weight: 600;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.tag-list__label {
margin-bottom: 1rem;
margin-bottom: var(--v-space-xs);
}
.tag-list__list {
margin: 0;
padding: 0;
}
.tag-list .tag-list__list-item {
display: inline-block;
margin-right: 0.5rem;
margin-right: var(--v-space-2xs);
margin-bottom: 0.5rem;
margin-bottom: var(--v-space-2xs);
padding-bottom: 0.5rem;
padding-bottom: var(--v-space-2xs);
}
@media (min-width: 33.75rem) {
.tag-list .tag-list__list-item {
margin-right: calc(0.5rem / 2);
margin-right: calc(var(--v-space-2xs) / 2);
}
}
.tag-list .tag-list__list-item a {
display: inline-block;
padding: 0.5rem 1rem;
padding: var(--v-space-2xs) var(--v-space-xs);
border-radius: 2px;
border-radius: var(--radius-s);
background-color: #f6f8fa;
background-color: var(--marketing-neutral--1-06);
color: #130032;
color: var(--text-black);
font-size: 1.25rem;
font-size: var(--font-size-l-body);
line-height: 1.333;
line-height: var(--line-height-l);
}
.tag-list .tag-list__list-item a:hover {
background-color: #4c00ff;
background-color: var(--text-accent);
color: #fff;
color: var(--text-white);
}
/*
* Content in these teasers will align with the main grid at certain
* breakpoints (540 - 767 and 768 - 1023), so this assumes that the teasers
* will always be full width on the page at those breakpoints e.g. if they are
* used in the content-grid component, then the content-grid won't have more
* than 1 item per row until 1024 / viewport-m.
*/
.teaser--author {
display: flex;
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
.teaser--author.teaser--author-with-image {
padding-left: 0;
}
.teaser--author .teaser__image {
width: 100px;
flex-shrink: 0;
}
.teaser--author .teaser__image img {
display: block;
width: 80px;
height: 80px;
border-radius: 100%;
}
.teaser--author .teaser__meta {
display: flex;
flex-direction: column;
}
.teaser--author .teaser__label {
text-transform: uppercase;
font-size: 0.75rem;
font-size: var(--font-size-4xs);
font-weight: 600;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.teaser--author .teaser__label {
margin-bottom: 1rem;
margin-bottom: var(--v-space-xs);
}
.teaser--author a {
color: #130032;
color: var(--text-black);
}
.teaser--author a:hover {
color: #4c00ff;
color: var(--text-accent);
}
.teaser--author .teaser__title {
grid-column: 2 / span 1;
font-size: 1rem;
font-size: var(--font-size-xs);
line-height: 1.5;
line-height: var(--line-height-xl);
font-weight: 600;
}
.teaser--author .teaser__role {
grid-column: 2 / span 1;
font-size: 1rem;
font-size: var(--font-size-xs);
line-height: 1.5;
line-height: var(--line-height-xl);
}
/*
* Content in these teasers will align with the main grid at certain
* breakpoints (540 - 767 and 768 - 1023), so this assumes that the teasers
* will always be full width on the page at those breakpoints e.g. if they are
* used in the content-grid component, then the content-grid won't have more
* than 1 item per row until 1024 / viewport-m.
*/
.teaser {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: var(--subgrid-6col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@media (min-width: 64rem) {
.teaser {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
}
}
.teaser {
--text-accent: var(--text-black);
--text-accent-hover: var(--cobalt);
grid-template-rows: min-content auto min-content;
height: 100%;
overflow-wrap: break-word;
}
.teaser .teaser__image,
.teaser .teaser__logo,
.teaser .teaser__title,
.teaser .teaser__abstract,
.teaser .teaser__meta,
.teaser .teaser__watch-video,
.teaser .teaser__arrow {
grid-column: 1 / -1;
}
.teaser .teaser__title {
margin-top: 2.25rem;
margin-top: var(--v-space-l);
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
line-height: 1.5;
line-height: var(--line-height-xl);
}
@media (min-width: 33.75rem) {
.teaser .teaser__title {
grid-column: 1 / span 4;
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
margin-right: 1.25rem;
margin-right: var(--gutter);
font-size: 1.25rem;
font-size: var(--font-size-s);
}
}
@media (min-width: 45rem) {
.teaser .teaser__title {
margin-top: 3rem;
margin-top: var(--v-space-xl);
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
font-size: 1.5rem;
font-size: var(--font-size-m);
line-height: 1.333;
line-height: var(--line-height-l);
}
}
@media (min-width: 90rem) {
.teaser .teaser__title {
font-size: 2.25rem;
font-size: var(--font-size-l);
line-height: 1.1667;
line-height: var(--line-height-m);
}
}
.teaser .teaser__abstract {
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
font-size: 0.875rem;
font-size: var(--font-size-s-body);
line-height: 1.5;
line-height: var(--line-height-xl);
}
@media (min-width: 33.75rem) {
.teaser .teaser__abstract {
grid-column: 1 / span 4;
margin-top: calc(1.25rem - 2.25rem);
margin-top: calc(var(--v-space-s) - var(--v-space-l));
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
margin-right: 1.25rem;
margin-right: var(--gutter);
}
}
@media (min-width: 45rem) {
.teaser .teaser__abstract {
margin-top: calc(2rem - 3rem);
margin-top: calc(var(--v-space-m) - var(--v-space-xl));
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
font-size: 1rem;
font-size: var(--font-size-m-body);
}
}
@media (min-width: 64rem) {
.teaser .teaser__abstract {
font-size: 1rem;
font-size: var(--font-size-m-body);
line-height: 1.5;
line-height: var(--line-height-xl);
}
}
@media (min-width: 90rem) {
.teaser .teaser__abstract {
font-size: 1.25rem;
font-size: var(--font-size-l-body);
line-height: 1.6;
line-height: var(--line-height-2xl);
}
}
.teaser .teaser__meta {
font-size: 0.875rem;
font-size: var(--font-size-s-body);
font-weight: 500;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.teaser .teaser__meta {
display: flex;
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
@media (min-width: 33.75rem) {
.teaser .teaser__meta {
grid-column: 5 / span 2;
grid-row: 1 / -1;
margin-top: 2.25rem;
margin-top: var(--v-space-l);
flex-direction: column;
}
}
@media (min-width: 45rem) {
.teaser .teaser__meta {
margin-top: 3rem;
margin-top: var(--v-space-xl);
}
}
.teaser .teaser__meta .teaser__readmore {
font-weight: 500;
}
.teaser .teaser__tag:after {
content: ' • ';
padding: 0.5rem;
padding: var(--v-space-2xs);
}
@media (min-width: 33.75rem) {
.teaser .teaser__tag:after {
display: none;
}
}
.teaser .teaser__watch-video,
.teaser .teaser__arrow {
display: none;
}
@supports (display: grid) {
.teaser--image {
min-height: 18rem;
grid-template-rows: min-content min-content auto;
}
@media (min-width: 33.75rem) {
.teaser--image {
min-height: auto;
}
}
.teaser--image .teaser__image {
grid-column: 1 / -1;
grid-row: 1 / -1;
z-index: -1;
position: relative;
overflow: hidden;
z-index: 2;
}
@media (min-width: 33.75rem) {
.teaser--image .teaser__image {
grid-column: 5 / span 2;
}
}
.teaser--image .teaser__image picture,
.teaser--image .teaser__image img {
position: absolute;
display: block;
width: 100%;
height: 100%;
max-width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.teaser--image .teaser__title,
.teaser--image .teaser__meta,
.teaser--image .teaser__arrow {
z-index: 3;
}
.teaser--image .teaser__title,
.teaser--image .teaser__meta {
grid-row: 1;
margin-left: 1.25rem;
margin-left: var(--gutter);
margin-right: 1.25rem;
margin-right: var(--gutter);
}
@media (min-width: 33.75rem) {
.teaser--image .teaser__title {
margin-left: 0;
}
}
.teaser--image .teaser__meta {
grid-row: 2;
}
@media (min-width: 33.75rem) {
.teaser--image .teaser__meta {
grid-row: 1;
}
}
}
@supports (display: grid) {
@media (min-width: 64rem) {
.teaser--compact {
min-height: 27rem;
grid-template-columns: 100%;
grid-template-rows: min-content auto min-content;
}
.teaser--compact .teaser__image {
grid-column: 1 / -1;
}
.teaser--compact .teaser__title {
grid-column: 1 / -1;
grid-row: 1;
margin: 2.25rem calc(1.25rem * 2) 0;
margin: var(--v-space-l) calc(var(--gutter) * 2) 0;
min-height: calc(1.5rem * 1.333 * 3);
min-height: calc(var(--font-size-m) * var(--line-height-l) * 3);
}
.teaser--compact .teaser__abstract {
grid-column: 1 / -1;
grid-row: 2;
margin: 1rem calc(1.25rem * 2) 0;
margin: var(--v-space-xs) calc(var(--gutter) * 2) 0;
min-height: calc(1rem * 1.5 * 7);
min-height: calc(var(--font-size-m-body) * var(--line-height-xl) * 7);
}
.teaser--compact .teaser__meta {
grid-column: 1 / -1;
grid-row: 3;
margin: 3rem calc(1.25rem * 2) 2.25rem;
margin: var(--v-space-xl) calc(var(--gutter) * 2) var(--v-space-l);
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
display: block;
}
.teaser--compact .teaser__tag,
.teaser--compact .teaser__tag:after,
.teaser--compact .teaser__date {
display: inline;
line-height: 1.333;
line-height: var(--line-height-l);
}
.teaser--compact .teaser__arrow {
grid-column: 1 / -1;
grid-row: -2;
margin: 3rem calc(1.25rem * 2) 2.25rem;
margin: var(--v-space-xl) calc(var(--gutter) * 2) var(--v-space-l);
padding-top: calc(0.5rem / 2);
padding-top: calc(var(--v-space-2xs) / 2);
display: flex;
justify-content: flex-end;
align-items: center;
}
}
}
@supports (display: grid) {
.teaser--compact.teaser--image:hover,
.teaser--compact.teaser--image:active {
--text-accent-hover: var(--text-white);
background: #4c00ff;
background: var(--cobalt);
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--image:hover,
.teaser--compact.teaser--image:active {
--text-accent-hover: var(--cobalt);
background: none;
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--image:hover,
.teaser--compact.teaser--image:active {
--text-accent-hover: var(--text-white);
background: #4c00ff;
background: var(--cobalt);
}
}
.teaser--compact.teaser--image:hover .teaser__image,
.teaser--compact.teaser--image:active .teaser__image {
opacity: 0;
transition: opacity 0.15s ease-in-out;
transition: var(--trans-opacity);
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--image:hover .teaser__image,
.teaser--compact.teaser--image:active .teaser__image {
opacity: 100%;
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--image:hover .teaser__image,
.teaser--compact.teaser--image:active .teaser__image {
opacity: 0;
}
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--image:hover .teaser__meta,
.teaser--compact.teaser--image:active .teaser__meta {
transition: color 0.15s ease-in-out;
transition: var(--trans-color);
color: #130032;
color: var(--text-black);
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--image:hover .teaser__meta,
.teaser--compact.teaser--image:active .teaser__meta {
color: #fff;
color: var(--text-white);
}
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--image .teaser__meta {
/* Prevents flash of blue when transitioning */
color: #130032;
color: var(--text-black);
}
}
}
@supports (display: grid) {
.teaser--compact.teaser--text-color-invert {
--text-accent: var(--text-white);
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--text-color-invert {
--text-accent: var(--text-black);
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--text-color-invert {
--text-accent: var(--text-white);
}
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--text-color-invert:hover,
.teaser--compact.teaser--text-color-invert:active {
transition: color 0.15s ease-in-out;
transition: var(--trans-color);
}
.teaser--compact.teaser--text-color-invert:hover .teaser__meta,
.teaser--compact.teaser--text-color-invert:active .teaser__meta {
color: #fff;
color: var(--text-white);
}
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--text-color-invert .teaser__meta {
color: #fff;
color: var(--text-white);
}
}
}
/* @todo: replace '.teaser--compact--highlighted' with '.teaser--highlighted'. */
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
) {
overflow: hidden;
grid-template-rows: auto min-content min-content min-content;
border-radius: 4px;
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
) {
grid-template-rows: min-content min-content min-content;
}
}
@media (min-width: 45rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
) {
grid-template-rows: auto auto min-content auto;
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
) {
min-height: 28rem;
grid-template-rows: auto min-content min-content min-content;
}
}
@media (min-width: 73rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
) {
min-height: 31.5rem;
grid-template-rows: auto min-content min-content min-content;
}
}
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__logo {
margin-top: 2.25rem;
margin-top: var(--v-space-l);
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
position: relative;
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__logo {
grid-column: 5 / span 2;
grid-row: 1 / span 3;
margin-left: 0;
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
}
@media (min-width: 45rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__logo {
margin-top: 3rem;
margin-top: var(--v-space-xl);
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__logo {
grid-column: 1 / -1;
grid-row: 1 / span 1;
justify-self: start;
align-self: start;
margin-top: 2.25rem;
margin-top: var(--v-space-l);
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
}
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__logo
svg {
/* Width needs to be defined so Chrome can print SVGs without width declared. */
width: 5.625rem;
/* 90px */
max-height: 5.625rem;
}
/* 90px */
@media (min-width: 33.75rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__logo
svg {
width: 9rem;
/* 144px */
max-height: 9rem;
/* 144px */
}
}
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__logo-name {
font-size: 1rem;
font-size: var(--font-size-xs);
font-weight: 600;
height: 5.625rem;
line-height: var(--line-height-xs);
}
@media (min-width: 64rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__logo-name {
display: flex;
flex-direction: column;
font-size: 1.25rem;
font-size: var(--font-size-s);
height: 9rem;
justify-content: center;
line-height: 1.0667;
line-height: var(--line-height-s);
}
}
@media (min-width: 76.25rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__logo-name {
font-size: 1.5rem;
font-size: var(--font-size-m);
}
}
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__eyebrow {
font-weight: 600;
grid-column: 1 / -1;
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__eyebrow {
align-self: baseline;
grid-column: 1 / span 4;
grid-row: 1;
margin-left: 0;
margin-right: 1.25rem;
margin-right: var(--gutter);
margin-top: 2.25rem;
margin-top: var(--v-space-l);
}
}
@media (min-width: 45rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__eyebrow {
margin-top: 3rem;
margin-top: var(--v-space-xl);
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__eyebrow {
grid-column: 1 / -1;
grid-row: 2 / span 1;
align-self: end;
min-height: auto;
margin-bottom: 0;
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
}
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__title {
margin-top: 1rem;
margin-top: var(--v-space-xs);
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__title {
grid-column: 1 / span 4;
grid-row: 2;
align-self: start;
margin-top: 1.25rem;
margin-top: var(--v-space-s);
margin-right: 1.25rem;
margin-right: var(--gutter);
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__title {
font-size: 1.25rem;
font-size: var(--font-size-s);
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__title {
grid-column: 1 / -1;
grid-row: 3 / span 1;
align-self: end;
margin-top: 1.25rem;
margin-top: var(--v-space-s);
min-height: auto;
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
}
@media (min-width: 76.25rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__title {
font-size: 1.5rem;
font-size: var(--font-size-m);
}
}
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__meta {
font-size: 1rem;
font-size: var(--font-size-xs);
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__meta {
grid-column: 1 / span 4;
grid-row: 3;
margin-top: 0;
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
margin-left: 0;
}
}
@media (min-width: 45rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__meta {
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__meta {
grid-column: 1 / -1;
grid-row: 4 / span 1;
align-self: end;
z-index: 3;
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
}
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__arrow {
display: none;
}
@media (min-width: 64rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
.teaser__arrow {
grid-row: 4;
display: block;
justify-self: end;
margin: 0 calc(1.25rem * 2) 2.25rem 0;
margin: 0 calc(var(--gutter) * 2) var(--v-space-l) 0;
}
}
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
svg,
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
svg
*,
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
)
path {
fill: #000;
fill: var(--bg-black);
transition-property: fill;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
}
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
):hover
svg,
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
):hover
svg
*,
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
):hover
path,
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
):active
svg,
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
):active
svg
*,
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(
.teaser--dark
):active
path {
fill: #4c00ff;
fill: var(--cobalt);
}
/* @todo: replace '.teaser--compact--highlighted' with '.teaser--highlighted'. */
.teaser--compact.teaser--compact--highlighted {
grid-template-rows: min-content auto;
/* Maintain taller aspect ratio at different widths */
min-height: 11rem;
height: auto;
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--compact--highlighted {
min-height: 16.5rem;
}
}
@media (min-width: 45rem) {
.teaser--compact.teaser--compact--highlighted {
min-height: 24rem;
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--compact--highlighted {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: var(--subgrid-12col);
min-height: 27rem;
}
}
@media (min-width: 73rem) {
.teaser--compact.teaser--compact--highlighted {
min-height: 30rem;
}
}
.teaser--compact.teaser--compact--highlighted .teaser__image,
.teaser--compact.teaser--compact--highlighted .teaser__title,
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
z-index: 1;
}
.teaser--compact.teaser--compact--highlighted .teaser__image,
.teaser--compact.teaser--compact--highlighted .teaser__logo {
grid-row: 2;
}
@media (min-width: 23.4375rem) {
.teaser--compact.teaser--compact--highlighted .teaser__image,
.teaser--compact.teaser--compact--highlighted .teaser__logo {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--compact--highlighted .teaser__image,
.teaser--compact.teaser--compact--highlighted .teaser__logo {
grid-column: 1 / 5;
min-height: 28rem;
/* 448px */
}
}
@media (min-width: 90rem) {
.teaser--compact.teaser--compact--highlighted .teaser__image,
.teaser--compact.teaser--compact--highlighted .teaser__logo {
margin-right: calc(1.25rem * 3);
margin-right: calc(var(--gutter) * 3);
}
}
.teaser--compact.teaser--compact--highlighted .teaser__image picture,
.teaser--compact.teaser--compact--highlighted .teaser__image img {
position: relative;
}
@media (min-width: 23.4375rem) {
.teaser--compact.teaser--compact--highlighted .teaser__image picture,
.teaser--compact.teaser--compact--highlighted .teaser__image img {
position: absolute;
}
}
.teaser--compact.teaser--compact--highlighted .teaser__logo {
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem calc(1.25rem * 0.5);
padding: var(--v-space-s) calc(var(--gutter) * 0.5);
}
/* 10px */
@media (min-width: 33.75rem) {
.teaser--compact.teaser--compact--highlighted .teaser__logo {
padding: 1.25rem 1.25rem;
padding: var(--v-space-s) var(--gutter);
/* 20px */
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--compact--highlighted .teaser__logo {
padding: 1.25rem calc(1.25rem * 2);
padding: var(--v-space-s) calc(var(--gutter) * 2);
}
}
.teaser--compact.teaser--compact--highlighted .teaser__logo svg {
width: 11.875rem;
width: var(--v-space-huge);
max-height: 11.875rem;
max-height: var(--v-space-huge);
}
.teaser--compact.teaser--compact--highlighted .teaser__logo svg,
.teaser--compact.teaser--compact--highlighted .teaser__logo path {
fill: #fff;
fill: var(--text-white);
}
.teaser--compact.teaser--compact--highlighted .teaser__title,
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
font-weight: 600;
margin: 0 0 2.25rem;
margin: 0 0 var(--v-space-l);
}
@media (min-width: 23.4375rem) {
.teaser--compact.teaser--compact--highlighted .teaser__title,
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
grid-column: 3 / -1;
margin: 0;
}
}
@media (min-width: 45rem) {
.teaser--compact.teaser--compact--highlighted .teaser__title,
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
padding-left: 1.25rem;
padding-left: var(--gutter);
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--compact--highlighted .teaser__title,
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
grid-column: 5 / span 8;
}
}
@media (min-width: 90rem) {
.teaser--compact.teaser--compact--highlighted .teaser__title,
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
padding-left: 0;
}
}
.teaser--compact.teaser--compact--highlighted .teaser__title {
grid-row: 1;
margin-top: 0.5rem;
margin-top: var(--v-space-2xs);
font-size: 1rem;
font-size: var(--font-size-xs);
line-height: 1.5;
line-height: var(--line-height-xl);
font-weight: 300;
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--compact--highlighted .teaser__title {
margin-top: 1.25rem;
margin-top: var(--v-space-s);
font-size: 1.5rem;
font-size: var(--font-size-m);
}
}
@media (min-width: 45rem) {
.teaser--compact.teaser--compact--highlighted .teaser__title {
margin-top: 2.25rem;
margin-top: var(--v-space-l);
font-size: 2.25rem;
font-size: var(--font-size-l);
}
}
@media (min-width: 73rem) {
.teaser--compact.teaser--compact--highlighted .teaser__title {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
font-size: 3rem;
font-size: var(--font-size-xl);
line-height: 1.1667;
line-height: var(--line-height-m);
}
}
@media (min-width: 76.25rem) {
.teaser--compact.teaser--compact--highlighted .teaser__title {
font-size: 3.875rem;
font-size: var(--font-size-2xl);
line-height: 1.1667;
line-height: var(--line-height-m);
}
}
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
grid-row: 2;
margin-top: 0.5rem;
margin-top: var(--v-space-2xs);
font-size: 1rem;
font-size: var(--font-size-xs);
line-height: 1.333;
line-height: var(--line-height-l);
text-transform: capitalize;
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
margin-top: 1.25rem;
margin-top: var(--v-space-s);
font-size: 1.5rem;
font-size: var(--font-size-m);
}
}
@media (min-width: 45rem) {
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
margin-top: 2rem;
margin-top: var(--v-space-m);
font-size: 2.25rem;
font-size: var(--font-size-l);
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
margin-top: 4rem;
margin-top: var(--v-space-2xl);
font-size: 3rem;
font-size: var(--font-size-xl);
line-height: 1.1667;
line-height: var(--line-height-m);
}
}
@media (min-width: 90rem) {
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
font-size: 3.875rem;
font-size: var(--font-size-2xl);
}
}
.teaser--compact.teaser--compact--highlighted .teaser__meta,
.teaser--compact.teaser--compact--highlighted .teaser__arrow {
display: none;
}
.teaser--compact.teaser--compact--highlighted:focus:not(a).teaser--image,
.teaser--compact.teaser--compact--highlighted:hover:not(a).teaser--image {
background-color: transparent;
}
.teaser--compact.teaser--compact--highlighted:focus:not(a).teaser--image
.teaser__image,
.teaser--compact.teaser--compact--highlighted:hover:not(a).teaser--image
.teaser__image {
opacity: 1;
}
@media (min-width: 64rem) {
.teaser--compact.teaser--compact--highlighted:focus:not(a).teaser--image
.teaser__image,
.teaser--compact.teaser--compact--highlighted:hover:not(a).teaser--image
.teaser__image {
opacity: 1;
}
}
@media (min-width: 64rem) {
.teaser--featured {
min-height: 31.5rem;
}
}
@supports (font-size: calc(100vw)) {
.teaser--featured .teaser__title {
font-size: calc(1.25rem + 1.75 * ((100vw - 33.75rem) / 30.25));
line-height: calc(1.66625rem + 1.53385 * ((100vw - 33.75rem) / 30.25));
}
}
@media (min-width: 64rem) {
.teaser--featured .teaser__title {
line-height: 1.2;
font-size: 2.5rem;
}
}
@media screen and (max-width: 33.75rem) {
.teaser--featured .teaser__title {
font-size: 1.875rem;
line-height: 1.24;
}
}
@media (min-width: 76.25rem) {
.teaser--featured .teaser__title {
font-size: 2.5rem;
line-height: 1.2;
}
}
@media (min-width: 64rem) {
.teaser--featured .teaser__meta {
margin-bottom: 0;
}
}
@supports (display: grid) {
@media (min-width: 64rem) {
.teaser--featured:not(.teaser--image) .teaser__title {
grid-column: 1 / span 7;
margin: 2rem 0 0;
margin: var(--v-space-m) 0 0;
}
.teaser--featured:not(.teaser--image) .teaser__abstract {
grid-column: 9 / span 4;
margin: 2.25rem calc(1.25rem * 2) 3rem 0;
margin: var(--v-space-l) calc(var(--gutter) * 2) var(--v-space-xl) 0;
font-size: 1.25rem;
font-size: var(--font-size-l-body);
line-height: 1.6;
line-height: var(--line-height-2xl);
}
.teaser--featured:not(.teaser--image) .teaser__meta {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-row: 1 / span 1;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
.teaser--featured:not(.teaser--image) .teaser__meta .teaser__tag {
grid-column: 1 / span 7;
}
.teaser--featured:not(.teaser--image) .teaser__meta .teaser__date {
grid-column: 9 / span 4;
}
.teaser--featured:not(.teaser--image) .teaser__arrow {
display: flex;
justify-content: flex-end;
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
}
}
@supports (display: grid) {
.teaser--featured.teaser--image:hover,
.teaser--featured.teaser--image:active {
background: #4c00ff;
background: var(--cobalt);
--text-accent-hover: var(--text-white);
}
.teaser--featured.teaser--image:hover .teaser__image,
.teaser--featured.teaser--image:active .teaser__image {
opacity: 0;
transition: opacity 0.15s ease-in-out;
transition: var(--trans-opacity);
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--image {
/* Prevents flash of blue when transitioning */
}
.teaser--featured.teaser--image:hover,
.teaser--featured.teaser--image:active {
--text-accent-hover: var(--cobalt);
background: none;
}
.teaser--featured.teaser--image:hover .teaser__image,
.teaser--featured.teaser--image:active .teaser__image {
opacity: 100%;
}
.teaser--featured.teaser--image:hover .teaser__meta,
.teaser--featured.teaser--image:active .teaser__meta {
color: #130032;
color: var(--text-black);
}
.teaser--featured.teaser--image .teaser__meta {
color: #130032;
color: var(--text-black);
}
}
@media (min-width: 64rem) {
.teaser--featured.teaser--image {
grid-template-rows: min-content min-content auto min-content;
}
.teaser--featured.teaser--image:hover .teaser__meta,
.teaser--featured.teaser--image:active .teaser__meta {
color: inherit;
}
.teaser--featured.teaser--image .teaser__image {
grid-column: 1 / span 4;
margin-right: calc(-1 * 1.25rem);
margin-right: calc(-1 * var(--gutter));
}
.teaser--featured.teaser--image .teaser__title {
grid-column: 5 / span 8;
grid-row: 2;
margin: 2rem 0 0 calc(1.25rem * 2);
margin: var(--v-space-m) 0 0 calc(var(--gutter) * 2);
}
.teaser--featured.teaser--image .teaser__meta {
grid-column: 5 / span 8;
grid-row: 1;
margin: 3rem 0 0 calc(1.25rem * 2);
margin: var(--v-space-xl) 0 0 calc(var(--gutter) * 2);
flex-direction: row;
justify-content: space-between;
color: inherit;
}
.teaser--featured.teaser--image .teaser__arrow {
grid-column: 1 / -1;
grid-row: -2;
margin: 3rem calc(1.25rem * 2) 3rem 0;
margin: var(--v-space-xl) calc(var(--gutter) * 2) var(--v-space-xl) 0;
display: flex;
justify-content: flex-end;
}
}
@media (min-width: 76.25rem) {
.teaser--featured.teaser--image .teaser__meta {
margin-left: 0;
margin-right: 0;
display: grid;
grid-template-columns: repeat(8, 1fr);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
.teaser--featured.teaser--image .teaser__meta .teaser__tag {
grid-column: 1 / span 4;
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
.teaser--featured.teaser--image .teaser__meta .teaser__date {
grid-column: 5 / span 4;
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
.teaser--featured.teaser--image .teaser__title {
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
.teaser--featured.teaser--image .teaser__arrow {
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
}
}
.teaser--featured.teaser--logo {
grid-template-rows: min-content max-content max-content min-content;
overflow: hidden;
min-height: 17.5rem;
}
/* 280px */
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo {
grid-template-rows: min-content auto min-content;
min-height: 12.25rem;
/* 228px */
}
}
@media (min-width: 45rem) {
.teaser--featured.teaser--logo {
min-height: 21.71rem;
/* 342px */
}
}
@media (min-width: 64rem) {
.teaser--featured.teaser--logo {
min-height: 31.56rem;
/* 505px */
}
}
.teaser--featured.teaser--logo .teaser__image {
grid-row: 1 / 6;
}
/* Special styles for smaller breakpoint to accommodate the "Watch video" element. */
@supports (filter: grayscale(100%)) {
.teaser--featured.teaser--logo .teaser__image img,
.teaser--featured.teaser--logo .teaser__image picture {
filter: grayscale(100%);
}
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo .teaser__image,
.teaser--featured.teaser--logo .teaser__logo {
grid-row: 1 / -1;
grid-column: 5 / -1;
}
}
@media (min-width: 64rem) {
.teaser--featured.teaser--logo .teaser__image,
.teaser--featured.teaser--logo .teaser__logo {
grid-column: 1 / span 4;
}
}
.teaser--featured.teaser--logo .teaser__logo {
grid-row: 1;
justify-self: start;
z-index: 3;
margin-top: 2.25rem;
margin-top: var(--v-space-l);
margin-left: 1.25rem;
margin-left: var(--gutter);
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo .teaser__logo {
grid-row: 1 / -1;
justify-self: center;
align-self: auto;
display: flex;
align-items: center;
margin-top: 0;
margin-left: 0;
}
}
.teaser--featured.teaser--logo .teaser__logo svg,
.teaser--featured.teaser--logo .teaser__logo path {
fill: #fff;
fill: var(--text-white);
}
.teaser--featured.teaser--logo .teaser__logo svg {
/* Width needs to be defined so Chrome can print SVGs without width declared. */
width: 6.5rem;
/* 104px */
max-height: 6.5rem;
}
/* 104px */
@media (min-width: 64rem) {
.teaser--featured.teaser--logo .teaser__logo svg {
width: 9rem;
/* 144px */
max-height: 9rem;
/* 144px */
}
}
@media (min-width: 76.25rem) {
.teaser--featured.teaser--logo .teaser__logo svg {
width: 10.375rem;
/* 166px */
max-height: 10.375rem;
/* 166px */
}
}
.teaser--featured.teaser--logo .teaser__title,
.teaser--featured.teaser--logo .teaser__meta,
.teaser--featured.teaser--logo .teaser__watch-video {
z-index: 3;
color: #fff;
color: var(--text-white);
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo .teaser__title,
.teaser--featured.teaser--logo .teaser__meta,
.teaser--featured.teaser--logo .teaser__watch-video {
grid-column: 1 / span 4;
margin-right: 1.25rem;
margin-right: var(--gutter);
margin-left: 0;
color: #130032;
color: var(--text-black);
}
}
@media (min-width: 64rem) {
.teaser--featured.teaser--logo .teaser__title,
.teaser--featured.teaser--logo .teaser__meta,
.teaser--featured.teaser--logo .teaser__watch-video {
grid-column: 5 / -1;
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
}
.teaser--featured.teaser--logo .teaser__meta {
grid-row: 2;
margin-top: 2.25rem;
margin-top: var(--v-space-l);
margin-bottom: 0;
font-size: 1rem;
font-size: var(--font-size-m-body);
font-weight: 500;
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo .teaser__meta {
grid-row: 1;
}
}
@media (min-width: 45rem) {
.teaser--featured.teaser--logo .teaser__meta {
margin-top: 3rem;
margin-top: var(--v-space-xl);
}
}
.teaser--featured.teaser--logo .teaser__meta .teaser__tag:after {
display: none;
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo .teaser__meta .teaser__tag {
color: #130032;
color: var(--text-black);
}
}
@media (min-width: 76.25rem) {
.teaser--featured.teaser--logo .teaser__meta .teaser__tag {
margin-left: 0;
}
}
@media (min-width: 76.25rem) {
.teaser--featured.teaser--logo .teaser__readmore {
grid-column: 1 / -1;
}
}
.teaser--featured.teaser--logo .teaser__title {
grid-row: 3;
align-self: flex-start;
margin-top: 1.25rem;
margin-top: var(--v-space-s);
margin-bottom: 0;
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo .teaser__title {
grid-row: 2;
}
}
@media (min-width: 45rem) {
.teaser--featured.teaser--logo .teaser__title {
margin-top: 2rem;
margin-top: var(--v-space-m);
font-size: 2.25rem;
font-size: var(--font-size-l);
}
}
@media (min-width: 64rem) {
.teaser--featured.teaser--logo .teaser__title {
font-size: 3rem;
font-size: var(--font-size-xl);
}
}
@media (min-width: 76.25rem) {
.teaser--featured.teaser--logo .teaser__title {
font-size: 3.875rem;
font-size: var(--font-size-2xl);
}
}
.teaser--featured.teaser--logo .teaser__watch-video,
.teaser--featured.teaser--logo .teaser__arrow {
grid-row: 4;
align-self: end;
margin-top: 1.25rem;
margin-top: var(--v-space-s);
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo .teaser__watch-video,
.teaser--featured.teaser--logo .teaser__arrow {
grid-row: 3;
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
}
@media (min-width: 45rem) {
.teaser--featured.teaser--logo .teaser__watch-video,
.teaser--featured.teaser--logo .teaser__arrow {
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
}
.teaser--featured.teaser--logo .teaser__watch-video {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 1.25rem;
margin-left: var(--gutter);
margin-right: 1.25rem;
margin-right: var(--gutter);
font-weight: 600;
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo .teaser__watch-video {
margin-left: 0;
}
}
@media (min-width: 45rem) {
.teaser--featured.teaser--logo .teaser__watch-video {
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
}
@media (min-width: 64rem) {
.teaser--featured.teaser--logo .teaser__watch-video {
grid-column: 5 / span 5;
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
}
.teaser--featured.teaser--logo .teaser__watch-video svg {
margin-right: calc(1.25rem / 2);
margin-right: calc(var(--gutter) / 2);
fill: #fff;
fill: var(--text-white);
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo .teaser__watch-video svg {
fill: #130032;
fill: var(--text-black);
}
}
.teaser--featured.teaser--logo .teaser__eyebrow {
font-weight: 600;
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo .teaser__eyebrow {
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
}
@media (min-width: 45rem) {
.teaser--featured.teaser--logo .teaser__eyebrow {
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
}
@media (min-width: 64rem) {
.teaser--featured.teaser--logo .teaser__eyebrow {
grid-row: 3;
grid-column: 5 / 9;
margin-top: 1.25rem;
margin-top: var(--v-space-s);
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
}
@media (min-width: 64rem) {
.teaser--featured.teaser--logo .teaser__arrow {
grid-column: 10 / -1;
display: flex;
align-items: flex-end;
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
padding-bottom: calc(0.5rem * 1.35);
padding-bottom: calc(var(--v-space-2xs) * 1.35);
}
.teaser--featured.teaser--logo .teaser__arrow svg,
.teaser--featured.teaser--logo .teaser__arrow path {
fill: #130032;
fill: var(--text-black);
}
}
.teaser--featured.teaser--logo:not(.teaser--video-text) .teaser__title {
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo:not(.teaser--video-text) .teaser__title {
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
}
@media (min-width: 45rem) {
.teaser--featured.teaser--logo:not(.teaser--video-text) .teaser__title {
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
}
.teaser--featured.teaser--logo:hover .teaser__logo svg,
.teaser--featured.teaser--logo:hover .teaser__logo path,
.teaser--featured.teaser--logo:active .teaser__logo svg,
.teaser--featured.teaser--logo:active .teaser__logo path {
fill: #fff;
fill: var(--text-white);
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--logo:hover .teaser__title,
.teaser--featured.teaser--logo:hover .teaser__tag,
.teaser--featured.teaser--logo:hover .teaser__watch-video,
.teaser--featured.teaser--logo:hover .teaser__arrow,
.teaser--featured.teaser--logo:hover .teaser__meta,
.teaser--featured.teaser--logo:active .teaser__title,
.teaser--featured.teaser--logo:active .teaser__tag,
.teaser--featured.teaser--logo:active .teaser__watch-video,
.teaser--featured.teaser--logo:active .teaser__arrow,
.teaser--featured.teaser--logo:active .teaser__meta {
color: #4c00ff;
color: var(--text-accent-hover);
}
}
.teaser--featured.teaser--logo:hover .teaser__watch-video svg,
.teaser--featured.teaser--logo:hover .teaser__watch-video path,
.teaser--featured.teaser--logo:hover .teaser__arrow svg,
.teaser--featured.teaser--logo:hover .teaser__arrow path,
.teaser--featured.teaser--logo:active .teaser__watch-video svg,
.teaser--featured.teaser--logo:active .teaser__watch-video path,
.teaser--featured.teaser--logo:active .teaser__arrow svg,
.teaser--featured.teaser--logo:active .teaser__arrow path {
fill: #4c00ff;
fill: var(--text-accent-hover);
}
@supports (display: grid) {
.teaser--featured.teaser--text-color-invert {
--text-accent: var(--text-white);
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--text-color-invert {
--text-accent: var(--text-black);
}
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--text-color-invert .teaser__meta {
color: #fff;
color: var(--text-white);
}
}
@media (min-width: 64rem) {
.teaser--featured.teaser--text-color-invert .teaser__meta {
color: inherit;
}
}
.teaser--featured.teaser--text-color-invert:hover .teaser__meta,
.teaser--featured.teaser--text-color-invert:active .teaser__meta {
transition: color 0.15s ease-in-out;
transition: var(--trans-color);
}
@media (min-width: 33.75rem) {
.teaser--featured.teaser--text-color-invert:hover .teaser__meta,
.teaser--featured.teaser--text-color-invert:active .teaser__meta {
color: #fff;
color: var(--text-white);
}
}
@media (min-width: 64rem) {
.teaser--featured.teaser--text-color-invert:hover .teaser__meta,
.teaser--featured.teaser--text-color-invert:active .teaser__meta {
color: #4c00ff;
color: var(--cobalt);
}
}
}
@supports (display: grid) {
@supports (mix-blend-mode: multiply) {
.teaser--color-underlay .teaser__image::after {
mix-blend-mode: multiply;
}
}
.teaser--color-underlay .teaser__image::after {
content: '';
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(255, 255, 255, 0) 100%
);
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
@supports (filter: grayscale(100%)) {
.teaser--color-underlay .teaser__image img,
.teaser--color-underlay .teaser__image picture {
filter: grayscale(100%);
}
}
.teaser--color-underlay.teaser--color-underlay--warm-red
> .teaser__image::after {
background-color: #fb00e2;
background-color: var(--bg-warm-red);
}
.teaser--color-underlay.teaser--color-underlay--cool-red
> .teaser__image::after {
background-color: #de2d59;
background-color: var(--bg-cool-red);
}
.teaser--color-underlay.teaser--color-underlay--indigo
> .teaser__image::after {
background-color: #4c00ff;
background-color: var(--bg-indigo);
}
.teaser--color-underlay.teaser--color-underlay--blue > .teaser__image::after {
background-color: #cbc2ff;
background-color: var(--bg-blue);
}
.teaser--color-underlay.teaser--color-underlay--gray > .teaser__image::after {
background-color: #656566;
background-color: var(--bg-gray-middle-light);
}
.teaser--color-underlay.teaser--color-underlay--dark-green
> .teaser__image::after {
background-color: #2cbb54;
background-color: var(--bg-dark-green);
}
.teaser--color-underlay.teaser--color-underlay--pink > .teaser__image::after {
background-color: #f09;
background-color: var(--bg-pink);
}
.teaser--color-underlay.teaser--color-underlay--purple
> .teaser__image::after {
background-color: #983dd8;
background-color: var(--bg-purple);
}
.teaser--color-underlay.teaser--color-underlay--light-blue
> .teaser__image::after {
background-color: #4c00ff;
background-color: var(--bg-light-blue);
}
.teaser--color-underlay.teaser--color-underlay--cobalt
> .teaser__image::after {
background-color: #4c00ff;
background-color: var(--bg-cobalt);
}
.teaser--color-underlay.teaser--color-underlay--mist > .teaser__image::after {
background-color: #cbc2ff;
background-color: var(--bg-mist);
}
.teaser--color-underlay.teaser--color-underlay--ecru > .teaser__image::after {
background-color: #f8f4f0;
background-color: var(--bg-ecru);
}
.teaser--color-underlay.teaser--color-underlay--inkwell
> .teaser__image::after {
background-color: #130032;
background-color: var(--bg-inkwell);
}
.teaser--color-underlay.teaser--color-underlay--deep-violet
> .teaser__image::after {
background-color: #26065d;
background-color: var(--bg-deep-violet);
}
.teaser--color-underlay.teaser--color-underlay--cobalt-40
> .teaser__image::after {
background-color: #8a55ff;
background-color: var(--bg-cobalt-40);
}
.teaser--color-underlay.teaser--color-underlay--cobalt-50
> .teaser__image::after {
background-color: #7a43fc;
background-color: var(--bg-cobalt-50);
}
}
@supports (display: grid) {
.teaser--dark.teaser--logo {
overflow: hidden;
min-height: 21.25rem;
grid-template-rows: min-content auto min-content;
border-radius: 4px;
background: #000;
background: var(--bg-black);
transition: opacity 0.15s ease-in-out;
transition: var(--trans-opacity);
--text-accent: var(--text-white);
--text-accent-hover: var(--text-accent);
}
@media (min-width: 33.75rem) {
.teaser--dark.teaser--logo {
min-height: 12.75rem;
grid-template-rows: auto auto auto;
}
}
@media (min-width: 45rem) {
.teaser--dark.teaser--logo {
grid-template-rows: auto min-content auto;
}
}
@media (min-width: 64rem) {
.teaser--dark.teaser--logo {
min-height: 30rem;
grid-template-rows: auto min-content min-content;
}
}
@media (min-width: 76.25rem) {
.teaser--dark.teaser--logo {
min-height: 42.5rem;
}
}
.teaser--dark.teaser--logo.teaser--color-underlay--warm-red {
background-color: #fb00e2;
background-color: var(--bg-warm-red);
}
.teaser--dark.teaser--logo.teaser--color-underlay--cool-red {
background-color: #de2d59;
background-color: var(--bg-cool-red);
}
.teaser--dark.teaser--logo.teaser--color-underlay--indigo {
background-color: #4c00ff;
background-color: var(--bg-indigo);
}
.teaser--dark.teaser--logo.teaser--color-underlay--blue {
background-color: #cbc2ff;
background-color: var(--bg-blue);
}
.teaser--dark.teaser--logo.teaser--color-underlay--dark-green {
background-color: #2cbb54;
background-color: var(--bg-dark-green);
}
.teaser--dark.teaser--logo.teaser--color-underlay--pink {
background-color: #f09;
background-color: var(--bg-pink);
}
.teaser--dark.teaser--logo.teaser--color-underlay--purple {
background-color: #983dd8;
background-color: var(--bg-purple);
}
.teaser--dark.teaser--logo.teaser--color-underlay--light-blue {
background-color: #4c00ff;
background-color: var(--bg-light-blue);
}
.teaser--dark.teaser--logo.teaser--color-underlay--cobalt {
background-color: #4c00ff;
background-color: var(--bg-cobalt);
}
.teaser--dark.teaser--logo.teaser--color-underlay--mist {
background-color: #cbc2ff;
background-color: var(--bg-mist);
}
.teaser--dark.teaser--logo.teaser--color-underlay--ecru {
background-color: #f8f4f0;
background-color: var(--bg-ecru);
}
.teaser--dark.teaser--logo.teaser--color-underlay--inkwell {
background-color: #130032;
background-color: var(--bg-inkwell);
}
.teaser--dark.teaser--logo.teaser--color-underlay--deep-violet {
background-color: #26065d;
background-color: var(--bg-deep-violet);
}
.teaser--dark.teaser--logo.teaser--color-underlay--cobalt-40 {
background-color: #8a55ff;
background-color: var(--bg-cobalt-40);
}
.teaser--dark.teaser--logo.teaser--color-underlay--cobalt-50 {
background-color: #7a43fc;
background-color: var(--bg-cobalt-50);
}
.teaser--dark.teaser--logo:not(.teaser--image) .teaser__title,
.teaser--dark.teaser--logo:not(.teaser--image) .teaser__meta {
margin-left: 1.25rem;
margin-left: var(--gutter);
margin-right: 1.25rem;
margin-right: var(--gutter);
}
@media (min-width: 33.75rem) {
.teaser--dark.teaser--logo:not(.teaser--image) .teaser__title,
.teaser--dark.teaser--logo:not(.teaser--image) .teaser__meta {
margin-left: 0;
}
}
@media (min-width: 64rem) {
.teaser--dark.teaser--logo:not(.teaser--image) .teaser__title,
.teaser--dark.teaser--logo:not(.teaser--image) .teaser__meta {
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
}
.teaser--dark.teaser--logo:hover,
.teaser--dark.teaser--logo:active {
background: #4c00ff;
background: var(--bg-cobalt);
transition: background-color 0.15s ease-in-out;
transition: var(--trans-bg-color);
}
.teaser--dark.teaser--logo:hover .teaser__logo svg,
.teaser--dark.teaser--logo:hover .teaser__logo path,
.teaser--dark.teaser--logo:active .teaser__logo svg,
.teaser--dark.teaser--logo:active .teaser__logo path {
fill: #fff;
fill: var(--text-white);
}
.teaser--dark.teaser--logo:hover .teaser__image,
.teaser--dark.teaser--logo:active .teaser__image {
opacity: 0;
transition: opacity 0.15s ease-in-out;
transition: var(--trans-opacity);
}
.teaser--dark.teaser--logo:hover .teaser__title,
.teaser--dark.teaser--logo:active .teaser__title {
color: #fff;
color: var(--text-white);
}
@media (min-width: 33.75rem) {
.teaser--dark.teaser--logo:hover .teaser__meta,
.teaser--dark.teaser--logo:active .teaser__meta {
color: #fff;
color: var(--text-white);
}
}
@media (min-width: 64rem) {
.teaser--dark.teaser--logo:hover .teaser__meta,
.teaser--dark.teaser--logo:active .teaser__meta {
color: #4c00ff;
color: var(--text-accent-hover);
}
}
.teaser--dark.teaser--logo .teaser__eyebrow {
display: none;
}
.teaser--dark.teaser--logo .teaser__image {
transition: opacity 0.15s ease-in-out;
transition: var(--trans-opacity);
}
@media (min-width: 33.75rem) {
.teaser--dark.teaser--logo .teaser__image {
grid-column: 1 / span 2;
margin-right: 1.25rem;
margin-right: var(--gutter);
}
}
@supports (filter: grayscale(100%)) {
.teaser--dark.teaser--logo .teaser__image img,
.teaser--dark.teaser--logo .teaser__image picture {
filter: grayscale(100%);
}
}
.teaser--dark.teaser--logo .teaser__logo {
grid-row: 1;
z-index: 3;
margin-top: 3rem;
margin-top: var(--v-space-xl);
margin-left: 1.25rem;
margin-left: var(--gutter);
justify-self: start;
}
@media (min-width: 33.75rem) {
.teaser--dark.teaser--logo .teaser__logo {
grid-column: 1 / span 2;
grid-row: 1 / span 3;
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
justify-self: center;
align-self: center;
}
}
@media (min-width: 64rem) {
.teaser--dark.teaser--logo .teaser__logo {
grid-column: 1 / -1;
grid-row: 1 / span 1;
justify-self: start;
align-self: start;
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
}
.teaser--dark.teaser--logo .teaser__logo svg,
.teaser--dark.teaser--logo .teaser__logo path {
fill: #fff;
fill: var(--text-white);
}
.teaser--dark.teaser--logo .teaser__logo svg {
/* Width needs to be defined so Chrome can print SVGs without width declared. */
width: 7.5rem;
/* 120px */
max-height: 7.5rem;
}
/* 120px */
@media (min-width: 33.75rem) {
.teaser--dark.teaser--logo .teaser__logo svg {
width: 5.625rem;
/* 90px */
max-height: 5.625rem;
/* 90 px */
}
}
@media (min-width: 45rem) {
.teaser--dark.teaser--logo .teaser__logo svg {
width: 9rem;
/* 144px */
max-height: 9rem;
/* 144px */
}
}
@media (min-width: 73rem) {
.teaser--dark.teaser--logo .teaser__logo svg {
width: 10.375rem;
/* 166px */
max-height: 10.375rem;
/* 166px */
}
}
.teaser--dark.teaser--logo .teaser__title {
grid-row: 2;
align-self: end;
margin-top: 1.25rem;
margin-top: var(--v-space-s);
font-size: 1.875rem;
font-weight: 400;
letter-spacing: -0.25px;
line-height: 1.24;
}
@media (min-width: 33.75rem) {
.teaser--dark.teaser--logo .teaser__title {
grid-column: 3 / span 4;
margin-top: 2rem;
margin-top: var(--v-space-m);
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
}
@media (min-width: 64rem) {
.teaser--dark.teaser--logo .teaser__title {
grid-column: 1 / -1;
grid-row: 2 / span 1;
align-self: end;
min-height: auto;
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
font-size: 2.25rem;
letter-spacing: -0.5px;
line-height: 1.2;
}
}
@media (min-width: 76.25rem) {
.teaser--dark.teaser--logo .teaser__title {
font-size: 2.5rem;
}
}
.teaser--dark.teaser--logo .teaser__meta {
grid-row: 3;
font-size: 1rem;
font-size: var(--font-size-m-body);
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
@media (min-width: 33.75rem) {
.teaser--dark.teaser--logo .teaser__meta {
grid-column: 3 / span 4;
margin-top: 0;
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
margin-left: 0;
}
}
@media (min-width: 64rem) {
.teaser--dark.teaser--logo .teaser__meta {
grid-column: 1 / -1;
grid-row: 3 / span 1;
align-self: end;
z-index: 3;
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
}
.teaser--dark.teaser--logo .teaser__arrow {
display: block;
grid-row: 3;
justify-self: end;
margin-right: 1.25rem;
margin-right: var(--gutter);
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
}
@media (min-width: 33.75rem) {
.teaser--dark.teaser--logo .teaser__arrow {
display: none;
}
}
@media (min-width: 64rem) {
.teaser--dark.teaser--logo .teaser__arrow {
display: block;
margin-top: 0;
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
}
}
/*
* IE 11
* Note: does not support nested media queries.
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.teaser {
display: block;
color: #000000;
}
.teaser .teaser__image {
display: none;
}
}
@media all and (-ms-high-contrast: none) and (min-width: 33.75rem),
(-ms-high-contrast: active) and (min-width: 33.75rem) {
.teaser .teaser__meta {
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
.teaser .teaser__logo svg {
fill: #130032;
fill: var(--text-black);
max-height: 3rem;
max-width: 6rem;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.teaser--featured.teaser--logo {
position: relative;
display: flex;
flex-flow: row wrap;
box-sizing: border-box;
}
.teaser--featured.teaser--logo .teaser__logo {
position: absolute;
top: 50%;
right: 0;
width: 40%;
margin: 0;
transform: translateY(-50%);
text-align: center;
}
.teaser--featured.teaser--logo .teaser__logo svg {
display: block;
margin: 0 0 0 auto;
}
.teaser--featured.teaser--logo .teaser__title,
.teaser--featured.teaser--logo .teaser__meta,
.teaser--featured.teaser--logo .teaser__watch-video,
.teaser--featured.teaser--logo .teaser__arrow {
flex-basis: 100%;
max-width: 100%;
box-sizing: border-box;
}
.teaser--featured.teaser--logo .teaser__title,
.teaser--featured.teaser--logo .teaser__meta {
padding-right: 40%;
}
.teaser--featured.teaser--logo .teaser__meta {
order: -1;
}
.teaser--featured.teaser--logo .teaser__watch-video,
.teaser--featured.teaser--logo .teaser__arrow {
align-self: flex-end;
flex-basis: calc(30% - 1.25rem);
flex-basis: calc(30% - var(--gutter));
}
.teaser--featured.teaser--logo .teaser__watch-video {
margin-right: 0;
}
.teaser--featured.teaser--logo .teaser__arrow {
margin-left: 0;
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
}
.teaser--featured.teaser--logo .teaser__arrow svg {
display: block;
margin: 0 0 0 auto;
}
.teaser--featured.teaser--logo .teaser__image {
position: absolute;
top: 0;
right: 0;
display: inherit;
flex-basis: 40%;
max-width: 40%;
}
}
@media all and (-ms-high-contrast: none) and (min-width: 64rem),
(-ms-high-contrast: active) and (min-width: 64rem) {
.teaser--featured.teaser--logo .teaser__logo,
.teaser--featured.teaser--logo .teaser__image {
right: initial;
left: 0;
}
.teaser--featured.teaser--logo .teaser__title,
.teaser--featured.teaser--logo .teaser__meta,
.teaser--featured.teaser--logo .teaser__watch-video {
padding-right: 0;
padding-left: calc(40% + 1.25rem);
padding-left: calc(40% + var(--gutter));
}
.teaser--featured.teaser--logo .teaser__arrow {
max-width: calc(30% - 3rem);
max-width: calc(30% - var(--h-space-xl));
margin-right: 0;
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
}
}
@media (min-width: 64rem) {
.teaser--related {
min-height: 0;
}
}
@media (min-width: 33.75rem) {
.teaser--related .teaser__title,
.teaser--related .teaser__abstract,
.teaser--related .teaser__meta {
grid-column: 1 / -1;
margin-right: 0;
}
}
@media (min-width: 64rem) {
.teaser--related .teaser__title,
.teaser--related .teaser__abstract,
.teaser--related .teaser__meta {
min-height: 0;
}
}
.teaser--related .teaser__title {
font-size: 1.5rem;
font-size: var(--font-size-m);
line-height: 1.333;
line-height: var(--line-height-l);
}
@media (min-width: 33.75rem) {
.teaser--related .teaser__title {
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
}
.teaser--related .teaser__abstract {
font-size: 1rem;
font-size: var(--font-size-m-body);
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
@media (min-width: 33.75rem) {
.teaser--related .teaser__abstract {
margin-top: 0;
}
}
@media (min-width: 64rem) {
.teaser--related .teaser__abstract {
font-size: 1.25rem;
font-size: var(--font-size-l-body);
}
}
.teaser--related .teaser__meta {
grid-row: 3;
}
@media (min-width: 33.75rem) {
.teaser--related .teaser__meta {
margin-top: 0;
}
}
.teaser--related .teaser__arrow {
display: block;
grid-row: 3;
justify-self: end;
}
@media (min-width: 64rem) {
.content-grid--60-40 .content-grid__item:nth-child(odd) .teaser--related {
grid-template-columns: repeat(8, 1fr);
}
}
@media (min-width: 45rem) {
.content-grid--60-40
.content-grid__item:nth-child(odd)
.teaser--related
.teaser__title,
.content-grid--60-40
.content-grid__item:nth-child(odd)
.teaser--related
.teaser__abstract,
.content-grid--60-40
.content-grid__item:nth-child(odd)
.teaser--related
.teaser__meta {
margin-right: calc(1.25rem * 3 / 2);
margin-right: calc(var(--gutter) * 3 / 2);
}
}
@media (min-width: 64rem) {
.content-grid--60-40
.content-grid__item:nth-child(odd)
.teaser--related
.teaser__title,
.content-grid--60-40
.content-grid__item:nth-child(odd)
.teaser--related
.teaser__abstract,
.content-grid--60-40
.content-grid__item:nth-child(odd)
.teaser--related
.teaser__meta {
margin-left: 0;
margin-right: 0;
grid-column: 1 / span 7;
}
}
@media (min-width: 64rem) {
.content-grid--60-40
.content-grid__item:nth-child(odd)
.teaser--related
.teaser__title {
font-size: 3rem;
font-size: var(--font-size-xl);
line-height: 1.1667;
line-height: var(--line-height-m);
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
}
}
@media (min-width: 64rem) {
.content-grid--60-40
.content-grid__item:nth-child(odd)
.teaser--related
.teaser__abstract {
line-height: 1.6;
line-height: var(--line-height-2xl);
}
}
@media (min-width: 45rem) {
.content-grid--60-40
.content-grid__item:nth-child(odd)
.teaser--related
.teaser__arrow {
margin: 0 1.25rem 0 0;
margin: 0 var(--gutter) 0 0;
}
}
@media (min-width: 45rem) {
.content-grid--60-40
.content-grid__item:nth-child(even)
.teaser--related
.teaser__arrow {
margin: 0;
}
}
.footer .footer-navigation {
border-bottom: 1px solid #2c2c2d;
border-bottom: 1px solid var(--border-on-black);
}
.footer__legal {
max-width: 90rem;
margin-left: auto;
margin-right: auto;
padding: 2.25rem 1.25rem;
padding: var(--v-space-l) var(--gutter);
}
.footer__locale-switcher {
display: flex;
flex-wrap: wrap;
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
.footer-legal {
background: #130032;
background: var(--text-black);
}
.footer-legal__inner {
max-width: 90rem;
max-width: var(--viewport-2xl-value);
margin: 0 auto;
padding: 2.25rem 1.25rem;
padding: var(--v-space-l) var(--gutter);
}
@media (min-width: 45rem) {
.footer-legal__inner {
padding: 2.25rem calc(2 * 1.25rem);
padding: var(--v-space-l) calc(2 * var(--gutter));
}
}
@media (min-width: 64rem) {
.footer-legal__inner {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@supports (display: grid) {
.footer-legal__inner {
display: grid;
margin: 0;
padding: 2.25rem 0;
padding: var(--v-space-l) 0;
max-width: none;
}
}
}
@media (min-width: 76.25rem) {
.footer-legal__inner {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
@media (min-width: 45rem) {
.footer-legal__content {
display: flex;
flex-wrap: wrap;
}
}
@media (min-width: 64rem) {
.footer-legal__content {
flex-wrap: no-wrap;
grid-column-start: 2;
grid-column-end: span 12;
}
}
@media (min-width: 76.25rem) {
.footer-legal__content {
grid-column-start: 3;
}
}
@media (min-width: 45rem) {
.footer-legal__locale-switcher {
margin-right: calc(2 * 1.25rem);
margin-right: calc(2 * var(--gutter));
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
}
@media (min-width: 64rem) {
.footer-legal__locale-switcher {
margin-bottom: 0;
}
}
.footer-legal__copyright {
font-size: 0.875rem;
font-size: var(--font-size-s-body);
font-weight: 600;
color: #a3a4a6;
color: var(--rule-on-black-secondary);
}
@media (min-width: 45rem) {
.footer-legal__copyright {
width: 100%;
}
}
@media (min-width: 60rem) {
.footer-legal__copyright {
width: auto;
padding-top: calc(1.25rem / 2);
padding-top: calc(var(--v-space-s) / 2);
flex-grow: 2;
text-align: right;
}
}
.footer-legal .link-list {
margin: 2.25rem 0;
margin: var(--v-space-l) 0;
}
@media (min-width: 45rem) {
.footer-legal .link-list {
margin: 0 0 2.25rem 0;
margin: 0 0 var(--v-space-l) 0;
}
}
@media (min-width: 64rem) {
.footer-legal .link-list {
margin-bottom: 0;
}
}
.footer-legal .link-list ul {
font-size: 0.875rem;
font-size: var(--font-size-s-body);
padding: 0;
margin: 0;
list-style: none;
}
@media (min-width: 33.75rem) {
.footer-legal .link-list ul {
-moz-columns: 2 auto;
columns: 2 auto;
-moz-column-gap: calc(1.25rem * 2);
column-gap: calc(1.25rem * 2);
-moz-column-gap: calc(var(--gutter) * 2);
column-gap: calc(var(--gutter) * 2);
}
}
@media (min-width: 45rem) {
.footer-legal .link-list ul {
-moz-columns: 1;
columns: 1;
}
}
@media (min-width: 45rem) {
.footer-legal .link-list li {
display: inline-block;
}
}
.footer-legal .link-list a {
display: inline-block;
padding-bottom: 0.5rem;
padding-bottom: var(--v-space-2xs);
font-weight: 600;
color: #a3a4a6;
color: var(--rule-on-black-secondary);
}
@media (min-width: 45rem) {
.footer-legal .link-list a {
padding-right: 1.25rem;
padding-right: var(--v-space-s);
padding-top: calc(1.25rem / 2);
padding-top: calc(var(--v-space-s) / 2);
}
}
.footer-navigation {
background: #130032;
background: var(--text-black);
}
.footer-navigation__inner {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.footer-navigation__inner {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.footer-navigation__inner {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.footer-navigation__inner {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.footer-navigation__inner {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.footer-navigation__inner {
padding: 4rem 0 0;
padding: var(--v-space-2xl) 0 0;
grid-template-rows: repeat(4, auto);
}
@media (min-width: 45rem) {
.footer-navigation__inner {
padding: 4rem 0 0.5rem;
padding: var(--v-space-2xl) 0 var(--v-space-2xs);
}
}
.footer-navigation .link-list {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.footer-navigation .link-list {
grid-column: 3 / -3;
}
}
.footer-navigation .link-list {
grid-column-end: span 3;
margin-bottom: 3rem;
margin-bottom: var(--v-space-xl);
padding-right: 1.25rem;
padding-right: var(--gutter);
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.footer-navigation .link-list:nth-child(5) {
grid-column-start: 5;
grid-row: 1 / span 1;
}
.footer-navigation .link-list:nth-child(6) {
grid-column-start: 5;
grid-row: 2 / span 1;
}
.footer-navigation .link-list:last-child {
grid-column-start: 5;
grid-row: 3 / span 2;
}
/* From Tablet / 3 cols. */
@media (min-width: 45rem) {
.footer-navigation .link-list {
grid-column-end: span 2;
}
.footer-navigation .link-list:nth-child(4) {
grid-column: 4 / 6;
grid-row: 3 / span 1;
}
.footer-navigation .link-list:nth-child(5) {
grid-column-start: 4;
}
.footer-navigation .link-list:nth-child(6) {
grid-column-start: 4;
}
.footer-navigation .link-list:nth-child(7) {
grid-column: 6 / 8;
grid-row: 1 / 3;
}
}
/* From Desktop */
@media (min-width: 64rem) {
.footer-navigation .link-list {
grid-column-end: span 2;
}
.footer-navigation .link-list:first-child {
grid-column: 2 / span 3;
grid-row: 1;
}
.footer-navigation .link-list:nth-child(2) {
grid-column: 2 / span 3;
grid-row: 2;
}
.footer-navigation .link-list:nth-child(3) {
grid-column-start: 5;
}
.footer-navigation .link-list:nth-child(4) {
grid-column: 5 / span 2;
grid-row: 2;
}
.footer-navigation .link-list:nth-child(5) {
grid-column-start: 7;
}
.footer-navigation .link-list:nth-child(6) {
grid-column-start: 9;
grid-row: 1;
}
.footer-navigation .link-list:last-child {
grid-column: 11 / span 3;
}
}
/* From Big Desktop (avoiding external column) */
@media (min-width: 76.25rem) {
.footer-navigation .link-list:first-child {
grid-column: 3 / span 3;
}
.footer-navigation .link-list:nth-child(2) {
grid-column: 3 / span 3;
}
.footer-navigation .link-list:nth-child(3) {
grid-column-start: 6;
}
.footer-navigation .link-list:nth-child(4) {
grid-column: 6 / span 2;
grid-row: 2;
}
.footer-navigation .link-list:nth-child(5) {
grid-column-start: 8;
}
.footer-navigation .link-list:nth-child(6) {
grid-column-start: 10;
}
.footer-navigation .link-list:last-child {
grid-column: 12 / span 3;
}
}
.layout-content .social {
padding: 2.25rem 0;
padding: var(--v-space-l) 0;
background-color: #191919;
background-color: var(--marketing-neutral--17-58);
}
.layout-content .social__inner {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@media (min-width: 45rem) {
.layout-content .social__inner {
justify-content: space-between;
padding: 0 calc(2 * 1.25rem);
padding: 0 calc(2 * var(--gutter));
}
}
@media (min-width: 64rem) {
.layout-content .social__inner {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@supports (display: grid) {
.layout-content .social__inner {
display: grid;
margin: 0;
padding: 0;
max-width: none;
justify-content: inherit;
}
}
}
@media (min-width: 76.25rem) {
.layout-content .social__inner {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.layout-content .social__links {
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
flex: 0 0 100%;
}
@media (min-width: 60rem) {
.layout-content .social__links {
flex: 0 0 auto;
margin-bottom: 0;
text-align: left;
}
}
@media (min-width: 64rem) {
.layout-content .social__links {
grid-column-start: 2;
grid-column-end: span 5;
}
}
@media (min-width: 76.25rem) {
.layout-content .social__links {
grid-column-start: 3;
}
}
.layout-content .social__link {
display: inline-flex;
justify-content: center;
align-items: center;
height: 2.375rem;
width: 2.375rem;
margin-right: 0.5rem;
margin-right: var(--v-space-2xs);
background-color: #fff;
background-color: var(--bg-white);
border-radius: 50%;
border-radius: var(--radius-circle);
font-size: 0;
transition: opacity 0.15s ease-in-out;
transition: var(--trans-opacity);
}
.layout-content .social__link:hover {
opacity: 0.5;
}
.layout-content .social__link-icon {
fill: #130032;
fill: var(--text-black);
height: 1.6rem;
width: 1.6rem;
}
.layout-content .social__apps {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
@media (min-width: 33.75rem) {
.layout-content .social__apps {
flex-direction: row;
}
}
@media (min-width: 64rem) {
.layout-content .social__apps {
grid-column-start: 7;
grid-column-end: span 7;
justify-self: end;
}
}
@media (min-width: 76.25rem) {
.layout-content .social__apps {
grid-column-start: 8;
}
}
.layout-content .social__app {
margin-top: 1.25rem;
margin-top: var(--v-space-s);
}
@media (min-width: 33.75rem) {
.layout-content .social__app {
margin-top: 0;
margin-left: 1.25rem;
margin-left: var(--v-space-s);
}
}
.layout-content .social__app:first-child {
margin-left: 0;
}
.layout-content .social__app-image {
width: 128px;
display: inherit;
}
.footer-trending {
background: #130032;
background: var(--text-black);
}
.footer-trending__inner {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.footer-trending__inner {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.footer-trending__inner {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.footer-trending__inner {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.footer-trending__inner {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.footer-trending__inner {
padding: 2.25rem 0;
padding: var(--v-space-l) 0;
}
.footer-trending .link-list {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.footer-trending .link-list {
grid-column: 3 / -3;
}
}
@media (min-width: 64rem) {
.footer-trending .link-list {
grid-column-start: 2;
grid-column-end: span 12;
}
}
@media (min-width: 76.25rem) {
.footer-trending .link-list {
grid-column-start: 3;
}
}
.navigation-control {
background: none;
border: none;
cursor: pointer;
}
.navigation-control__hamburger {
display: block;
width: 12px;
height: 11px;
}
.navigation-control__hamburger svg {
display: block;
width: 12px;
height: 11px;
fill: #130032;
fill: var(--text-black);
}
.navigation-control__hamburger .hamburger-icon {
display: none;
}
.navigation-control__hamburger .hamburger-icon div {
width: 12px;
height: 1px;
background-color: black;
margin: 4px 0;
}
.navigation-control__close {
display: none;
background: #130032;
background: var(--text-black);
height: 16px;
width: 16px;
}
.navigation-control__close svg {
height: 16px;
width: 16px;
fill: #fff;
fill: var(--text-white);
}
.navigation-control__close .close-icon {
display: none;
position: relative;
}
.navigation-control__close .close-icon:before,
.navigation-control__close .close-icon:after {
content: '';
position: absolute;
left: 0;
height: 16px;
border-left: 2px solid #fff;
border-left: 2px solid var(--border-color-white);
}
.navigation-control__close .close-icon:after {
transform: rotate(45deg);
}
.navigation-control__close .close-icon:before {
transform: rotate(-45deg);
}
.navigation-control[aria-expanded='true'] .navigation-control__hamburger {
display: none;
}
.navigation-control[aria-expanded='true'] .navigation-control__close {
display: block;
}
/*
* IE 11
* Note: does not support nested media queries.
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.navigation-control__hamburger svg {
display: none;
}
.navigation-control__hamburger .hamburger-icon {
display: block;
}
}
.navigation-control__close svg {
display: none;
}
.navigation-control__close .close-icon {
display: block;
}
.navigation-crown {
background: #130032;
background: var(--text-black);
font-size: 1rem;
font-size: var(--font-size-xs);
font-weight: 500;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.navigation-crown a,
.navigation-crown a:visited {
color: #fff;
color: var(--text-white);
}
.navigation-crown__inner {
padding: 0 1.25rem;
padding: 0 var(--gutter);
}
@media (min-width: 33.75rem) {
.navigation-crown__inner {
padding: 0 1.25rem;
padding: 0 var(--gutter);
}
}
@media (min-width: 45rem) {
.navigation-crown__inner {
padding: 0 calc(1.25rem * 2);
padding: 0 calc(var(--gutter) * 2);
}
}
.navigation-crown ul {
list-style-type: none;
}
.navigation-crown li {
margin-top: 1rem;
margin-top: var(--v-space-xs);
}
.navigation-crown li:first-child {
display: none;
}
.navigation-crown li:nth-child(2) {
margin-top: 0;
}
.navigation-crown__text {
display: none;
}
.navigation-crown__login {
margin-top: 2rem;
margin-top: var(--v-space-m);
}
.navigation-crown__login .button--dark {
width: 100%;
}
.navigation-crown--closed,
.navigation--closed .navigation-crown {
background-color: #fff;
background-color: var(--bg-white);
border-bottom: 1px solid #dadcde;
border-bottom: var(--border-light);
color: #130032;
color: var(--text-black);
}
@media (min-width: 64rem) {
.navigation-crown--closed,
.navigation--closed .navigation-crown {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
@supports (display: grid) {
.navigation-crown--closed,
.navigation--closed .navigation-crown {
display: grid;
padding: 0;
}
}
}
@media (min-width: 76.25rem) {
.navigation-crown--closed,
.navigation--closed .navigation-crown {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.navigation-crown--closed .navigation-crown__inner,
.navigation--closed .navigation-crown .navigation-crown__inner {
display: flex;
align-items: baseline;
padding: 0 calc(1.25rem * 2) calc(0.5rem / 2);
padding: 0 calc(var(--gutter) * 2) calc(var(--v-space-2xs) / 2);
}
@media (min-width: 45rem) {
.navigation-crown--closed .navigation-crown__inner,
.navigation--closed .navigation-crown .navigation-crown__inner {
padding-top: calc(1.333 * 0.75rem);
padding-top: calc(var(--line-height-l) * var(--font-size-4xs));
}
}
@media (min-width: 64rem) {
.navigation-crown--closed .navigation-crown__inner,
.navigation--closed .navigation-crown .navigation-crown__inner {
padding: calc(0.5rem / 2) calc(1.25rem * 2) 0.5rem;
padding: calc(var(--v-space-2xs) / 2) calc(var(--gutter) * 2)
var(--v-space-2xs);
margin: 0 auto;
max-width: 90rem;
max-width: var(--viewport-2xl-value);
grid-column: 2 / -2;
}
@supports (display: grid) {
.navigation-crown--closed .navigation-crown__inner,
.navigation--closed .navigation-crown .navigation-crown__inner {
margin: 0;
max-width: none;
padding-left: 0;
padding-right: 0;
}
}
}
@media (min-width: 76.25rem) {
.navigation-crown--closed .navigation-crown__inner,
.navigation--closed .navigation-crown .navigation-crown__inner {
padding-top: calc(0.5rem / 2);
padding-top: calc(var(--v-space-2xs) / 2);
padding-bottom: 0.5rem;
padding-bottom: var(--v-space-2xs);
grid-column: 3 / -3;
}
}
.navigation-crown--closed a:hover,
.navigation--closed .navigation-crown a:hover {
color: #4c00ff;
color: var(--text-accent-hover);
}
.navigation-crown--closed a,
.navigation-crown--closed a:visited,
.navigation-crown--closed .button--dark,
.navigation-crown--closed .navigation-crown__text,
.navigation--closed .navigation-crown a,
.navigation--closed .navigation-crown a:visited,
.navigation--closed .navigation-crown .button--dark,
.navigation--closed .navigation-crown .navigation-crown__text {
color: #130032;
color: var(--text-black);
font-size: 0.75rem;
font-size: var(--font-size-4xs);
font-weight: 600;
line-height: 1.333;
line-height: var(--line-height-l);
}
.navigation-crown--closed .button--dark,
.navigation--closed .navigation-crown .button--dark {
background-color: transparent;
}
.navigation-crown--closed .button--dark:focus,
.navigation-crown--closed .button--dark:hover,
.navigation--closed .navigation-crown .button--dark:focus,
.navigation--closed .navigation-crown .button--dark:hover {
background-color: transparent;
}
.navigation-crown--closed .button--dark:focus,
.navigation--closed .navigation-crown .button--dark:focus {
outline: auto;
outline-color: -webkit-focus-ring-color;
}
.navigation-crown--closed .navigation-crown__text,
.navigation--closed .navigation-crown .navigation-crown__text {
flex-grow: 1;
}
.navigation-crown--closed ul,
.navigation--closed .navigation-crown ul {
width: 100%;
}
@media (min-width: 45rem) {
.navigation-crown--closed ul,
.navigation--closed .navigation-crown ul {
width: auto;
}
}
@media (min-width: 64rem) {
.navigation-crown--closed ul,
.navigation--closed .navigation-crown ul {
padding-top: 0;
}
}
.navigation-crown--closed li,
.navigation--closed .navigation-crown li {
margin-top: 0;
}
.navigation-crown--closed li,
.navigation-crown--closed .button--dark,
.navigation-crown--closed .navigation-crown__text,
.navigation--closed .navigation-crown li,
.navigation--closed .navigation-crown .button--dark,
.navigation--closed .navigation-crown .navigation-crown__text {
display: none;
}
@media (min-width: 45rem) {
.navigation-crown--closed li,
.navigation-crown--closed .button--dark,
.navigation-crown--closed .navigation-crown__text,
.navigation--closed .navigation-crown li,
.navigation--closed .navigation-crown .button--dark,
.navigation--closed .navigation-crown .navigation-crown__text {
display: inline-block;
}
}
.navigation-crown--closed li:first-child,
.navigation--closed .navigation-crown li:first-child {
display: inline-block;
width: 100%;
text-align: center;
}
@media (min-width: 45rem) {
.navigation-crown--closed li:first-child,
.navigation--closed .navigation-crown li:first-child {
width: auto;
text-align: left;
position: absolute;
right: calc(1.25rem * 2);
right: calc(var(--gutter) * 2);
top: 0;
}
}
@media (min-width: 64rem) {
.navigation-crown--closed li:first-child,
.navigation--closed .navigation-crown li:first-child {
position: static;
}
}
@media (min-width: 45rem) {
.navigation-crown--closed li,
.navigation-crown--closed .navigation-crown__login,
.navigation--closed .navigation-crown li,
.navigation--closed .navigation-crown .navigation-crown__login {
margin-left: calc(1.25rem * 1.5);
margin-left: calc(var(--gutter) * 1.5);
}
}
.navigation-crown--closed .navigation-crown__login,
.navigation--closed .navigation-crown .navigation-crown__login {
margin-top: 0;
}
.navigation-crown--closed .navigation-crown__login .button--dark,
.navigation--closed .navigation-crown .navigation-crown__login .button--dark {
min-width: auto;
width: auto;
}
@media (min-width: 45rem) {
.navigation-crown--closed .navigation-crown__login .button--dark,
.navigation--closed .navigation-crown .navigation-crown__login .button--dark {
padding: 0;
border-width: 0;
}
}
@media (min-width: 45rem) {
.navigation-crown--closed.navigation-crown--accent,
.navigation-crown--closed.navigation-crown--dark,
.navigation--closed .navigation-crown.navigation-crown--accent,
.navigation--closed .navigation-crown.navigation-crown--dark {
border-bottom-width: 0;
}
.navigation-crown--closed.navigation-crown--accent .navigation-crown__text a,
.navigation-crown--closed.navigation-crown--accent li a,
.navigation-crown--closed.navigation-crown--accent .navigation-crown__login a,
.navigation-crown--closed.navigation-crown--dark .navigation-crown__text a,
.navigation-crown--closed.navigation-crown--dark li a,
.navigation-crown--closed.navigation-crown--dark .navigation-crown__login a,
.navigation--closed
.navigation-crown.navigation-crown--accent
.navigation-crown__text
a,
.navigation--closed .navigation-crown.navigation-crown--accent li a,
.navigation--closed
.navigation-crown.navigation-crown--accent
.navigation-crown__login
a,
.navigation--closed
.navigation-crown.navigation-crown--dark
.navigation-crown__text
a,
.navigation--closed .navigation-crown.navigation-crown--dark li a,
.navigation--closed
.navigation-crown.navigation-crown--dark
.navigation-crown__login
a {
color: #fff;
color: var(--text-white);
}
.navigation-crown--closed.navigation-crown--accent
.navigation-crown__text
a:focus,
.navigation-crown--closed.navigation-crown--accent
.navigation-crown__text
a:hover,
.navigation-crown--closed.navigation-crown--accent li a:focus,
.navigation-crown--closed.navigation-crown--accent li a:hover,
.navigation-crown--closed.navigation-crown--accent
.navigation-crown__login
a:focus,
.navigation-crown--closed.navigation-crown--accent
.navigation-crown__login
a:hover,
.navigation-crown--closed.navigation-crown--dark
.navigation-crown__text
a:focus,
.navigation-crown--closed.navigation-crown--dark
.navigation-crown__text
a:hover,
.navigation-crown--closed.navigation-crown--dark li a:focus,
.navigation-crown--closed.navigation-crown--dark li a:hover,
.navigation-crown--closed.navigation-crown--dark
.navigation-crown__login
a:focus,
.navigation-crown--closed.navigation-crown--dark
.navigation-crown__login
a:hover,
.navigation--closed
.navigation-crown.navigation-crown--accent
.navigation-crown__text
a:focus,
.navigation--closed
.navigation-crown.navigation-crown--accent
.navigation-crown__text
a:hover,
.navigation--closed .navigation-crown.navigation-crown--accent li a:focus,
.navigation--closed .navigation-crown.navigation-crown--accent li a:hover,
.navigation--closed
.navigation-crown.navigation-crown--accent
.navigation-crown__login
a:focus,
.navigation--closed
.navigation-crown.navigation-crown--accent
.navigation-crown__login
a:hover,
.navigation--closed
.navigation-crown.navigation-crown--dark
.navigation-crown__text
a:focus,
.navigation--closed
.navigation-crown.navigation-crown--dark
.navigation-crown__text
a:hover,
.navigation--closed .navigation-crown.navigation-crown--dark li a:focus,
.navigation--closed .navigation-crown.navigation-crown--dark li a:hover,
.navigation--closed
.navigation-crown.navigation-crown--dark
.navigation-crown__login
a:focus,
.navigation--closed
.navigation-crown.navigation-crown--dark
.navigation-crown__login
a:hover {
color: #fff;
color: var(--text-white);
}
}
@media (min-width: 45rem) {
.navigation-crown--closed.navigation-crown--accent,
.navigation--closed .navigation-crown.navigation-crown--accent {
background-color: #4000cc;
background-color: var(--bg-solid-accent);
background-image: linear-gradient(
90deg,
#4000cc 0%,
#330099 35%,
#26065d 60%
);
background-image: var(--bg-gradient-accent);
}
}
@media (min-width: 45rem) {
.navigation-crown--closed.navigation-crown--dark,
.navigation--closed .navigation-crown.navigation-crown--dark {
background-color: #000;
background-color: var(--bg-black);
}
}
.navigation-cta {
margin: 0;
padding: 0;
list-style-type: none;
}
.navigation-cta .button--dark,
.navigation-cta .button--primary,
.navigation-cta .button--ghost {
width: 100%;
min-width: 80px;
text-transform: uppercase;
}
@media (min-width: 33.75rem) {
.navigation-cta .button--dark,
.navigation-cta .button--primary,
.navigation-cta .button--ghost {
min-width: 125px;
}
}
.navigation-cta .button--ghost {
border-color: #2c2c2d;
border-color: var(--border-on-black);
color: #fff;
color: var(--text-white);
}
.navigation-cta .button--ghost:hover,
.navigation-cta .button--ghost:focus {
border-color: #656566;
border-color: var(--border-on-black-hover);
}
.navigation-cta__item {
max-width: 100%;
margin-top: 1rem;
margin-top: var(--v-space-xs);
}
/* Hides Search CTAs when the Search is not enabled. */
.navigation:not(.navigation--with-search) .navigation-cta__item:last-child {
display: none;
}
.navigation-cta--closed,
.navigation--closed .navigation-cta {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-start;
}
.navigation-cta--closed li,
.navigation--closed .navigation-cta li {
display: none;
margin: 0;
}
@media (min-width: 33.75rem) {
.navigation-cta--closed li,
.navigation--closed .navigation-cta li {
display: list-item;
}
}
.navigation-cta--closed li:first-child,
.navigation--closed .navigation-cta li:first-child {
display: list-item;
}
@media (min-width: 33.75rem) {
.navigation-cta--closed li:first-child,
.navigation--closed .navigation-cta li:first-child {
margin-left: 1.25rem;
margin-left: var(--gutter);
}
}
@media (min-width: 33.75rem) {
.navigation-cta--closed .button--ghost,
.navigation--closed .navigation-cta .button--ghost {
border-color: transparent;
color: #4c00ff;
color: var(--text-accent);
}
}
@media (min-width: 33.75rem) {
.navigation-cta--closed .button--ghost:hover,
.navigation-cta--closed .button--ghost:focus,
.navigation--closed .navigation-cta .button--ghost:hover,
.navigation--closed .navigation-cta .button--ghost:focus {
border-color: #4c00ff;
border-color: var(--text-accent-hover);
}
}
.navigation-menu {
background: #130032;
background: var(--text-black);
list-style-type: none;
}
.navigation-menu ul {
list-style-type: none;
}
.navigation-menu h1 {
margin: 0;
}
.navigation-menu .navigation-menu__logo {
display: none;
}
.navigation-menu .navigation-menu__logo img {
display: block;
height: 27px;
/* Needed for IE11. */
width: 117px;
}
.navigation-menu .navigation-menu__heading {
display: flex;
justify-content: space-between;
margin: 0.5rem 0 0;
margin: var(--v-space-2xs) 0 0;
color: #fff;
color: var(--text-white);
font-size: 1.25rem;
font-size: var(--font-size-s);
font-weight: 500;
line-height: 1.6;
line-height: var(--line-height-2xl);
cursor: pointer;
}
.navigation-menu .navigation-menu__heading:nth-child(2) {
margin-top: 0;
}
.navigation-menu .navigation-menu__heading-back {
display: none;
}
.navigation-menu .navigation-menu__menu > ul {
display: none;
background: #130032;
background: var(--text-black);
}
.navigation-menu .navigation-menu__menu > ul li a {
display: inline-block;
position: relative;
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.navigation-menu__heading {
margin-top: 2.25rem;
margin-top: var(--v-space-l);
border-bottom: 1px solid #191919;
border-bottom: 1px solid var(--marketing-neutral--17-58);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.navigation-menu__heading-back {
display: block;
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list {
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__heading {
margin-top: 0;
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__text,
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__subtext,
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__subheading {
font-size: 1rem;
font-size: var(--font-size-xs);
font-weight: 600;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__list-item {
margin-bottom: 0.5rem;
margin-bottom: var(--v-space-2xs);
padding-top: 0;
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__list-item:last-child {
margin-bottom: 0;
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__link
.link-list__subtext {
margin-bottom: 1rem;
margin-bottom: var(--v-space-xs);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__link--more {
margin-top: 1rem;
margin-top: var(--v-space-xs);
color: #a3a4a6;
color: var(--text-gray-lighter);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__link--more
svg {
fill: #a3a4a6;
fill: var(--text-gray-lighter);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__link--more:hover {
color: #fff;
color: var(--text-white);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__link--more:hover
svg {
fill: #fff;
fill: var(--text-white);
}
/* @todo: Refactor classes to avoid this override. */
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__link--agreement-cloud {
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
padding: 2rem calc(1.25rem * 6) 2rem 0;
padding: var(--v-space-m) calc(var(--gutter) * 6) var(--v-space-m) 0;
border-bottom: 1px solid #2c2c2d;
border-bottom: 1px solid var(--border-on-black);
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__link--agreement-cloud {
margin: calc(0px - 3rem) calc(0px - (1.25rem * 2)) 2.25rem;
margin: calc(0px - var(--v-space-xl)) calc(0px - (var(--gutter) * 2))
var(--v-space-l);
padding: 3rem calc(1.25rem * 8) 3rem calc(1.25rem * 2);
padding: var(--v-space-xl) calc(var(--gutter) * 8) var(--v-space-xl)
calc(var(--gutter) * 2);
}
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__link--agreement-cloud:hover
.link-list__pointer {
fill: #d6fb00;
fill: var(--ac-yellow);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.link-list__link--agreement-cloud
.link-list__text {
font-size: 1.25rem;
font-size: var(--font-size-s);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not([class*='-cols'])
> ul {
display: block;
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not([class*='-cols'])
> ul
> li {
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
padding-bottom: 2rem;
padding-bottom: var(--v-space-m);
border-bottom: 1px solid #191919;
border-bottom: 1px solid var(--marketing-neutral--17-58);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not([class*='-cols'])
> ul
> li:first-child {
padding-top: 2rem;
padding-top: var(--v-space-m);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not([class*='-cols'])
> ul
> li:last-child {
padding-bottom: 0;
border-bottom: none;
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not([class*='-cols'])
.link-list {
margin-bottom: 0;
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not([class*='-cols'])
.link-list__list-item {
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
padding-bottom: 0;
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not([class*='-cols'])
.link-list__list-item:last-child {
margin-bottom: 0;
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
> ul,
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
> ul {
display: flex;
margin: 0;
padding: 0;
}
@supports (display: grid) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
> ul,
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
> ul {
display: grid;
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--gutter) repeat(6, 1fr) var(--gutter);
}
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
> ul,
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
> ul {
max-width: 42rem;
}
}
@supports (display: grid) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group,
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group {
grid-column: 1 / -1;
}
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
> ul {
background-color: #191919;
background-color: var(--bg-gray);
}
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group {
margin: 0;
padding: 0;
}
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(1) {
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
background-color: #000;
background-color: var(--bg-black);
border-bottom: 1px solid #191919;
border-bottom: 1px solid var(--marketing-neutral--17-58);
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(1) {
margin-top: 0;
margin-bottom: 0;
border-bottom: none;
}
@supports (display: grid) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(1) {
grid-row: 1 / 3;
grid-column: 1 / 6;
}
}
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(1)
.link-list {
padding-top: 3rem;
padding-top: var(--v-space-xl);
padding-bottom: 2rem;
padding-bottom: var(--v-space-m);
}
}
@media (min-width: 45rem) {
@supports (display: grid) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(2) {
grid-column: 1 / 5;
}
}
}
@media (min-width: 45rem) {
@supports (display: grid) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(3) {
grid-column: 5 / -1;
}
}
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(2),
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(3) {
background-color: #191919;
background-color: var(--bg-gray);
}
@supports (display: grid) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(2),
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(3) {
grid-column: 6 / -1;
}
}
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(2)
.link-list,
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(3)
.link-list {
background-color: transparent;
}
}
@media (min-width: 73rem) {
@supports (display: grid) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(2) {
grid-row: 1 / 2;
}
}
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(2)
.link-list {
padding-top: 3rem;
padding-top: var(--v-space-xl);
}
}
@media (min-width: 73rem) {
@supports (display: grid) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(3) {
grid-row: 2 / 3;
}
}
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group
.link-list {
padding: 0 calc(1.25rem * 2);
padding: 0 calc(var(--gutter) * 2);
}
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group {
margin-bottom: 0;
padding: 3rem calc(1.25rem);
padding: var(--v-space-xl) calc(var(--gutter));
}
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(1)
.link-list {
margin-top: 2rem;
margin-top: var(--v-space-m);
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(1) {
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
}
@supports (display: grid) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(1) {
grid-column: 1 / 4;
}
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(1)
.link-list {
margin-top: 0;
}
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(2) {
padding-bottom: 2rem;
padding-bottom: var(--v-space-m);
border-bottom: 1px solid #191919;
border-bottom: 1px solid var(--marketing-neutral--17-58);
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(2)
> li:last-child
.link-list {
margin-bottom: 0;
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(2) {
padding-bottom: 0;
}
@supports (display: grid) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(2) {
grid-column: 4 / 6;
}
}
}
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(3) {
margin-top: 2rem;
margin-top: var(--v-space-m);
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(3) {
margin-top: 0;
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
background-color: #191919;
background-color: var(--bg-gray);
}
@supports (display: grid) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(3) {
grid-column: 6 / -1;
}
}
}
@media (min-width: 73rem) {
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group
.link-list {
background-color: transparent;
}
}
.navigation-menu .navigation-menu__menu.navigation-menu--other-submenu-is-open {
display: none;
}
@media (min-width: 73rem) {
.navigation-menu .navigation-menu__menu.navigation-menu__menu--large > ul {
width: auto;
max-width: 42rem;
}
}
@media (min-width: 73rem) {
.navigation-menu .navigation-menu__menu.navigation-menu__menu--medium > ul {
width: 28rem;
}
}
@media (min-width: 73rem) {
.navigation-menu .navigation-menu__menu.navigation-menu__menu--small > ul {
width: 19rem;
}
}
.navigation--closed .navigation-menu {
display: flex;
align-items: center;
background: #fff;
background: var(--text-white);
}
.navigation--closed .navigation-menu .navigation-menu__logo,
.navigation--closed .navigation-menu .navigation-menu__heading {
transition-property: padding;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.navigation--closed .navigation-menu .navigation-menu__logo {
display: block;
padding: 2rem 0;
padding: var(--v-space-m) 0;
}
@media (min-width: 23.4375rem) {
.navigation--closed .navigation-menu .navigation-menu__logo {
margin-right: 1.25rem;
margin-right: var(--gutter);
}
}
.navigation--closed .navigation-menu .navigation-menu__heading {
display: block;
margin: 0;
padding: 2rem 1.25rem;
padding: var(--v-space-m) var(--gutter);
font-size: 0.937rem;
font-size: var(--font-size-2xs);
line-height: 1.1667;
line-height: var(--line-height-m);
}
.navigation--closed .navigation-menu .navigation-menu__heading:nth-child(2) {
margin-top: 0;
}
.navigation--closed .navigation-menu .navigation-menu__heading,
.navigation--closed .navigation-menu .navigation-menu__heading a,
.navigation--closed .navigation-menu .navigation-menu__heading a:visited {
color: #130032;
color: var(--text-black);
}
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
> ul {
position: absolute;
border-top: 1px solid #dadcde;
border-top: var(--border-light);
z-index: 1000;
}
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not([class*='-cols'])
> ul {
display: block;
}
@media (min-width: 73rem) {
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not(
[class*='-cols']
)
> ul {
padding: 3rem 0;
padding: var(--v-space-xl) 0;
}
}
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not([class*='-cols'])
> ul
> li {
padding: 0 calc(1.25rem * 2);
padding: 0 calc(var(--gutter) * 2);
}
@media (min-width: 73rem) {
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not(
[class*='-cols']
)
> ul
> li {
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
padding-bottom: 3rem;
padding-bottom: var(--v-space-xl);
}
}
@media (min-width: 73rem) {
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not(
[class*='-cols']
)
> ul
> li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
@media (min-width: 73rem) {
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open:not(
[class*='-cols']
)
> ul
.link-list__list-item:last-child
.link-list__subtext {
margin-bottom: 0;
}
}
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.navigation-menu__heading {
margin-top: 0;
border: 0;
background-color: #f6f8fa;
background-color: var(--bg-gray-light);
}
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open
.navigation-menu__heading-back {
display: none;
}
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--other-submenu-is-open {
display: block;
}
.navigation--closed .navigation-menu.navigation-menu--other-submenu-is-open {
display: block;
}
.navigation-menu__menu--1-col.navigation-menu__menu--medium.navigation-menu--submenu-is-open
> ul
> li:first-child {
border-bottom: 1px solid #191919;
border-bottom: 1px solid var(--marketing-neutral--17-58);
}
.navigation-menu__menu--1-col.navigation-menu__menu--medium.navigation-menu--submenu-is-open
> ul
> li:first-child
li {
padding-bottom: 2rem;
padding-bottom: var(--v-space-m);
}
.navigation-menu__menu--1-col.navigation-menu__menu--medium.navigation-menu--submenu-is-open
> ul
> li:first-child
.link-list__text {
font-size: 1.25rem;
font-size: var(--font-size-s);
font-weight: 600;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.navigation-menu__menu--1-col.navigation-menu__menu--medium.navigation-menu--submenu-is-open
> ul
> li:first-child
.link-list__subtext {
margin-top: 0.5rem;
margin-top: var(--v-space-2xs);
font-size: 1rem;
font-size: var(--font-size-xs);
font-weight: 600;
line-height: 1.5;
line-height: var(--line-height-xl);
}
.navigation--sticky--change.navigation--closed .navigation-menu__logo {
padding-top: 1rem;
padding-top: var(--v-space-xs);
padding-bottom: 1rem;
padding-bottom: var(--v-space-xs);
}
.navigation--sticky--change.navigation--closed .navigation-menu__heading {
padding-top: 1.25rem;
padding-top: var(--v-space-s);
padding-bottom: 1.25rem;
padding-bottom: var(--v-space-s);
}
/*
* IE 11
* Note: does not support nested media queries.
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.navigation--closed .navigation-menu .navigation-menu__logo {
display: flex;
align-items: center;
height: 27px;
}
.navigation--closed .navigation-menu .navigation-menu__logo img {
width: 100%;
}
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(1) {
flex: 1 1 0;
}
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--2-cols
.navigation-menu__submenu__group:nth-child(2) {
flex: 0 0 auto;
width: 13.75rem;
}
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(3) {
flex-basis: 13.75rem;
max-width: 13.75rem;
}
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(1),
.navigation--closed
.navigation-menu
.navigation-menu__menu.navigation-menu--submenu-is-open.navigation-menu__menu--3-cols
.navigation-menu__submenu__group:nth-child(2) {
flex-basis: 14rem;
max-width: 14rem;
}
}
.navigation {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
min-height: 100%;
background: #130032;
background: var(--text-black);
color: #fff;
color: var(--text-white);
}
.navigation .navigation-control {
margin: 4rem 1.25rem 0;
margin: var(--v-space-2xl) var(--gutter) 0;
}
@media (min-width: 45rem) {
.navigation .navigation-control {
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
}
.navigation .navigation__main {
margin: 2rem 1.25rem 0;
margin: var(--v-space-m) var(--gutter) 0;
}
@media (min-width: 45rem) {
.navigation .navigation__main {
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
}
.navigation .navigation__center {
display: none;
}
.navigation .navigation-crown {
margin-top: 2rem;
margin-top: var(--v-space-m);
padding-top: 2rem;
padding-top: var(--v-space-m);
border-top: 1px solid #2c2c2d;
border-top: var(--border-light-on-black);
}
.navigation .navigation-cta {
margin: 1rem 1.25rem 4rem;
margin: var(--v-space-xs) var(--gutter) var(--v-space-2xl);
}
@media (min-width: 45rem) {
.navigation .navigation-cta {
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
}
.navigation--closed {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.navigation--closed {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.navigation--closed {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.navigation--closed {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.navigation--closed {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.navigation--closed {
position: static;
width: auto;
min-height: auto;
background: #fff;
background: var(--text-white);
color: #130032;
color: var(--text-black);
border-bottom: 1px solid #dadcde;
border-bottom: var(--border-light);
align-items: center;
}
.navigation--closed .navigation-control {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
margin: 0;
}
@media (min-width: 73rem) {
.navigation--closed .navigation-control {
display: none;
}
}
.navigation--closed .navigation__center {
display: block;
flex-grow: 1;
}
.navigation--closed .navigation__main {
grid-column: 2 / span 2;
grid-row: 2 / span 1;
margin: 0 0 0 calc(1.25rem * 1.5);
margin: 0 0 0 calc(var(--gutter) * 1.5);
}
@media (min-width: 73rem) {
.navigation--closed .navigation__main {
margin-left: 0;
}
@supports (display: grid) {
.navigation--closed .navigation__main {
grid-column-start: 2;
grid-column-end: span 8;
grid-row: 2;
}
}
}
@media (min-width: 76.25rem) {
.navigation--closed .navigation__main {
grid-column-start: 3;
}
}
.navigation--closed .navigation__main .navigation-menu h2 {
display: none;
}
@media (min-width: 73rem) {
.navigation--closed .navigation__main .navigation-menu h2 {
display: inline-block;
}
}
.navigation--closed .navigation-crown {
grid-column: 1 / -1;
grid-row: 1 / span 1;
margin: 0;
padding: 0;
border-top-width: 0;
}
@media (min-width: 73rem) {
.navigation--closed .navigation-crown {
grid-column-start: 1;
grid-column-end: span 14;
}
}
@media (min-width: 76.25rem) {
.navigation--closed .navigation-crown {
grid-column-end: span 16;
}
}
.navigation--closed .navigation-cta {
grid-column: 4 / span 4;
grid-row: 2 / span 1;
margin: 0;
pointer-events: none;
}
@media (min-width: 64rem) {
.navigation--closed .navigation-cta {
grid-column: 10 / span 4;
}
}
@media (min-width: 73rem) {
.navigation--closed .navigation-cta {
grid-column-start: 10;
grid-column-end: span 4;
grid-row: 2;
}
@supports (display: grid) {
.navigation--closed .navigation-cta {
margin-right: 0;
}
}
}
@media (min-width: 76.25rem) {
.navigation--closed .navigation-cta {
grid-column-start: 11;
}
}
.navigation--closed .navigation-cta li {
pointer-events: auto;
}
.navigation--sticky {
position: sticky;
}
body.menu-open {
overflow: hidden;
}
body.menu-open .navigation {
height: 100vh;
max-height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
body.menu-open .navigation.ios-only {
/* this is a standard size for the UIToolbar of iOS devices */
padding-bottom: 2.75rem;
}
body.menu-open .navigation--sticky--change {
height: calc(100vh + 1.75rem);
max-height: calc(100vh + 1.75rem);
}
@media (min-width: 45rem) {
body.menu-open .navigation--sticky--change {
height: calc(100vh + 2.75rem);
max-height: calc(100vh + 2.75rem);
}
}
/*
* IE 11
* Note: does not support nested media queries.
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.navigation--closed {
display: flex;
flex-wrap: wrap;
padding: 0;
}
.navigation--closed .navigation-control {
margin: 0 1.25rem;
margin: 0 var(--gutter);
}
.navigation--closed .navigation__main {
margin: 0;
}
.navigation--closed .navigation-crown {
order: -2;
flex: 1;
flex-basis: 100%;
}
.navigation--closed .navigation-cta {
margin: 1.25rem 1.25rem;
margin: var(--v-space-s) var(--gutter);
margin: 0 1.25rem 0 0;
margin: 0 var(--gutter) 0 0;
max-width: 38%;
}
.navigation--closed .navigation-search {
display: none;
}
}
@media all and (-ms-high-contrast: none) and (min-width: 60rem),
(-ms-high-contrast: active) and (min-width: 60rem) {
.navigation--closed .navigation-control {
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
}
@media all and (-ms-high-contrast: none) and (min-width: 64rem),
(-ms-high-contrast: active) and (min-width: 64rem) {
.navigation--closed .navigation-menu h2 {
display: inline-block;
}
}
@media all and (-ms-high-contrast: none) and (min-width: 73rem),
(-ms-high-contrast: active) and (min-width: 73rem) {
.navigation--closed .navigation__main {
margin-left: calc(1.25rem * 2);
margin-left: calc(var(--gutter) * 2);
}
.navigation--closed .navigation-cta {
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
}
@media all and (-ms-high-contrast: none) and (min-width: 76.25rem),
(-ms-high-contrast: active) and (min-width: 76.25rem) {
.navigation--closed {
margin: 0;
max-width: none;
}
.navigation--closed .navigation-crown .navigation-crown__inner {
/* IE11 can't have nested calc(). */
max-width: calc(90rem - (((90rem - (15 * 1.25rem)) / 14) * 2));
}
.navigation--closed .navigation__main {
margin-left: calc(
((100vw - 90rem) / 2) + ((90rem - (15 * 1.25rem)) / 14) + (1.25rem * 2)
);
}
.navigation--closed .navigation-cta {
margin-right: calc(
((100vw - 90rem) / 2) + ((90rem - (15 * 1.25rem)) / 14) + (1.25rem * 2)
);
}
}
.navigation-search {
display: none;
}
@media (min-width: 33.75rem) {
.navigation-search {
grid-column: 7 / span 1;
grid-row: 2 / span 1;
justify-self: end;
}
}
@media (min-width: 64rem) {
.navigation-search {
grid-column: 13 / span 1;
}
}
@media (min-width: 76.25rem) {
.navigation-search {
grid-column-start: 3;
grid-column-end: span 12;
grid-row: 2;
}
@supports (display: grid) {
.navigation-search {
margin-right: 0;
}
}
}
@media (min-width: 90rem) {
.navigation-search {
grid-column-start: 14;
grid-column-end: span 1;
}
}
@media (min-width: 33.75rem) {
.navigation--closed.navigation--with-search .navigation-search {
display: block;
}
}
.navigation-search .search-button,
.navigation-search .navigation-form-icon {
display: block;
height: 2rem;
}
.navigation-search .search-button {
background-color: transparent;
cursor: pointer;
width: 1rem;
}
.navigation-search .navigation-form-icon {
filter: invert();
width: 1rem;
}
.navigation-search .navigation-search__form {
position: relative;
}
.navigation-search .navigation-search__form-wrapper {
background-color: #130032;
background-color: var(--text-black);
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.navigation-search .navigation-search__lens-icon {
right: 0;
position: absolute;
top: 0;
}
@media (min-width: 33.75rem) {
.navigation-search .navigation-search__lens-icon {
top: 0;
right: auto;
left: 0;
}
}
.navigation-search .navigation-search__close {
cursor: pointer;
filter: invert();
height: 1.5rem;
position: absolute;
left: 0;
top: calc(0px - 4rem);
top: calc(0px - var(--v-space-2xl));
background-color: transparent;
}
@media (min-width: 33.75rem) {
.navigation-search .navigation-search__close {
width: 1rem;
left: auto;
right: 0;
top: 0;
}
}
@media (min-width: 45rem) {
.navigation-search .navigation-search__close {
top: 0;
right: 0;
}
}
.navigation-search .navigation-search__close-cross {
display: none;
}
@media (min-width: 33.75rem) {
.navigation-search .navigation-search__close-cross {
display: inline-block;
}
}
.navigation-search .navigation-search__close-pointer {
display: inline-block;
width: 0.437rem;
}
/* 7px*/
@media (min-width: 33.75rem) {
.navigation-search .navigation-search__close-pointer {
display: none;
}
}
.navigation-search .navigation-search__close-text {
display: inline-block;
padding-left: 0.5rem;
padding-left: var(--v-space-2xs);
font-size: 0.875rem;
font-size: var(--font-size-3xs);
font-weight: 500;
}
@media (min-width: 33.75rem) {
.navigation-search .navigation-search__close-text {
display: none;
}
}
.navigation-search input[type='text'] {
background-color: transparent;
width: 100%;
padding-bottom: calc(1.25rem / 2);
padding-bottom: calc(var(--gutter) / 2);
border: none;
border-bottom: 0.125rem solid #fff;
border-bottom: 0.125rem solid var(--text-white);
font-size: 1.25rem;
font-size: var(--font-size-s);
color: #fff;
color: var(--text-white);
}
@media (min-width: 33.75rem) {
.navigation-search input[type='text'] {
padding-right: calc(1.25rem * 2);
padding-right: calc(var(--gutter) * 2);
padding-left: calc(1.25rem * 2);
padding-left: calc(var(--gutter) * 2);
}
}
.navigation-search input[type='text']:focus {
outline: none;
}
.navigation-search.search-visible {
display: block;
position: fixed;
height: 100vh;
width: 100vw;
overflow-x: hidden;
overflow-y: scroll;
top: 0;
background: #000;
background: var(--bg-black);
}
@media (min-width: 33.75rem) {
.navigation-search.search-visible {
position: initial;
grid-column: 1 / -1;
height: auto;
}
}
.navigation-search.search-visible .navigation__main,
.navigation-search.search-visible .navigation-crown,
.navigation-search.search-visible .navigation-cta {
display: none;
}
.navigation-search.search-visible .navigation-search__form-wrapper {
display: grid;
grid-template-columns: 0 repeat(6, 1fr) 0;
grid-template-columns: 0 var(--subgrid-6col) 0;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
/*
* IE 11
*/
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 var(--gutter);
max-width: 90rem;
max-width: var(--viewport-2xl-value);
}
@supports (display: grid) {
.navigation-search.search-visible .navigation-search__form-wrapper {
margin: 0;
padding: 0;
max-width: none;
}
}
@media (min-width: 45rem) {
.navigation-search.search-visible .navigation-search__form-wrapper {
grid-template-columns: 1.25rem repeat(6, 1fr) 1.25rem;
grid-template-columns: var(--grid-6col);
}
}
@media (min-width: 64rem) {
.navigation-search.search-visible .navigation-search__form-wrapper {
grid-template-columns: 1.25rem repeat(12, 1fr) 1.25rem;
grid-template-columns: var(--grid-12col);
}
}
@media (min-width: 76.25rem) {
.navigation-search.search-visible .navigation-search__form-wrapper {
grid-template-columns: minmax(0, auto) repeat(
14,
minmax(0, calc((90rem - (15 * 1.25rem)) / 14))
) minmax(0, auto);
grid-template-columns: var(--grid-14col);
}
}
.navigation-search.search-visible .navigation-search__form-wrapper {
padding-top: calc(4rem * 2);
padding-top: calc(var(--v-space-2xl) * 2);
padding-bottom: 0;
}
@media (min-width: 33.75rem) {
.navigation-search.search-visible .navigation-search__form-wrapper {
display: grid;
padding-top: calc(1.25rem * 3);
padding-top: calc(var(--gutter) * 3);
padding-bottom: calc(1.25rem * 1.5);
padding-bottom: calc(var(--gutter) * 1.5);
}
}
@media (min-width: 45rem) {
.navigation-search.search-visible .navigation-search__form-wrapper {
padding-top: calc(1.25rem * 3.5);
padding-top: calc(var(--gutter) * 3.5);
padding-bottom: calc(1.25rem * 1.5);
padding-bottom: calc(var(--gutter) * 1.5);
}
}
.navigation-search.search-visible .navigation-search__form {
grid-column: 2 / -2;
}
@media (min-width: 76.25rem) {
.navigation-search.search-visible .navigation-search__form {
grid-column: 3 / -3;
}
}
.navigation-search.search-visible .navigation-search__form label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* Special styles for the Navigation when the Search is enabled. */
@media (min-width: 33.75rem) {
.navigation--with-search.navigation--closed .navigation-cta {
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
}
@media (min-width: 64rem) {
.navigation--with-search.navigation--closed .navigation-cta {
margin-left: calc(0px - (1.25rem * 2));
margin-left: calc(0px - (var(--gutter) * 2));
}
}
/* Leaves space into the right to place the Search icon. */
@media (min-width: 33.75rem) {
.navigation--with-search.navigation--closed .navigation-cta {
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
}
@media (min-width: 33.75rem) {
.navigation--with-search .navigation-cta__item:last-child {
display: none;
}
}
/*
* IE 11
* Note: does not support nested media queries.
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.navigation-search-icon {
width: 7px;
height: 11px;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.navigation--closed.navigation--with-search .navigation-search {
display: none;
}
}
@media all and (-ms-high-contrast: none) and (min-width: 33.75rem),
(-ms-high-contrast: active) and (min-width: 33.75rem) {
.navigation--closed.navigation--with-search .navigation-search {
display: block;
margin-right: 1.25rem;
margin-right: var(--gutter);
}
.navigation--closed.navigation--with-search .navigation-cta {
margin-right: 1.25rem;
margin-right: var(--gutter);
}
}
@media all and (-ms-high-contrast: none) and (min-width: 60rem),
(-ms-high-contrast: active) and (min-width: 60rem) {
.navigation--closed.navigation--with-search .navigation-search {
margin-right: calc(1.25rem * 2);
margin-right: calc(var(--gutter) * 2);
}
}
@media all and (-ms-high-contrast: none) and (min-width: 76.25rem),
(-ms-high-contrast: active) and (min-width: 76.25rem) {
.navigation--closed.navigation--with-search .navigation-cta {
margin-right: 1.25rem;
margin-right: var(--gutter);
}
.navigation--closed.navigation--with-search .navigation-search {
margin-right: calc(
((100vw - 90rem) / 2) + ((90rem - (15 * 1.25rem)) / 14) + (1.25rem * 2)
);
}
}