html,
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,
a,
a svg,
.visually-hidden,
pre,
code,
code span,
pre .hljs,
.contact-sales__top,
.contact-sales__info,
.contact-sales__info p,
.contact-sales__form,
.contact-sales__form .gcdc-gate,
.contact-sales__form .gcdc-gate .gcdc-form-render, .contact-sales__form .gcdc-gate .gcdc-content-render,
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-form-message p, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-form-message p,
.contact-sales__form .gcdc-gate .gcdc-form-render h2, .contact-sales__form .gcdc-gate .gcdc-content-render h2,
.contact-sales__form .gcdc-gate .gcdc-form-render p, .contact-sales__form .gcdc-gate .gcdc-content-render p,
.contact-sales__form .gcdc-gate .gcdc-form-render label,
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group label.gcdc-form-label,
.contact-sales__form .gcdc-gate .gcdc-content-render label,
.contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group label.gcdc-form-label,
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group *, .contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group *,
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group input.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group textarea.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group input.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group textarea.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group input.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group textarea.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group input.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group textarea.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-flag, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-flag,
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-form-group-TermsAndConditions, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-form-group-TermsAndConditions,
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-form-group-TermsAndConditions a, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-form-group-TermsAndConditions a,
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-form-group-button-wrapper, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-form-group-button-wrapper,
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-form-group-button-wrapper input.gcdc-form-button, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-form-group-button-wrapper input.gcdc-form-button,
.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,
.statistic,
.statistic .statistic__title,
.statistic .statistic__description,
.teaser-header,
.teaser-header .teaser-header__top,
.quote,
.quote .quote__text,
.quote .quote__icon,
.quote .quote__meta,
.quote .quote__author,
.rich-text .quote,
.rich-text .quote .quote__icon,
.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,
.button,
.icon-link,
.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"],
.social-links__list,
.social-links__item,
.social-links__label,
.social-links__link,
.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,
.social,
.social__inner,
.social__links,
.social__link,
.social__link-icon,
.social__apps,
.social__app,
.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));
} /* 400px */ /* 540px, S in Abstract */ /* 768px, M in Abstract */ /* 960px */ /* 1024px, L in Abstract */ /* 1168px */ /* 1280px, XL in Abstract */ /* 1440px, XXL in Abstract */ /* 1640px */
:root {
/* Product Neutral */
--product-neutral--1-10: #f4f4f6;
--product-neutral--1-40: #d9d9e0;
--product-neutral--1-90: #bcbbc8;
--product-neutral--2-50: #a4a2b4;
--product-neutral--3-22: #908da4;
--product-neutral--4-51: #76748e;
--product-neutral--5-82: #65627f;
--product-neutral--9-18: #48455e;
--product-neutral--13-99: #2c2a3b;
--product-neutral--17-55: #191823;
--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-36: #5cf999;
--green--1-72: #13e280;
--green--2-50: #11bc69;
--green--3-10: #0ba65c;
--green--4-53: #08884b;
--green--5-79: #06753f;
--green--9-10: #02542c;
--green--13-92: #023419;
--green--17-48: #001f0c;
--dark-green: #2cbb54;
--green: var(--green--1-72);
/* Teal */
--teal--1-07: #d2fffd;
--teal--1-42: #5eede7;
--teal--1-80: #19d7cf;
--teal--2-49: #0bb7b0;
--teal--3-16: #04a29a;
--teal--4-50: #01857f;
--teal--5-77: #02726e;
--teal--9-30: #02504d;
--teal--13-85: #003330;
--teal--17-61: #001d1c;
--dark-teal: #00b8a7;
--teal: var(--teal--1-80);
/* Blue */
--blue--1-10: #f0f4ff;
--blue--1-39: #d0d9ff;
--blue--1-90: #a7b9ff;
--blue--2-49: #81a0ff;
--blue--3-19: #5b8bff;
--blue--4-52: #006ff9;
--blue--5-80: #005fd7;
--blue--9-19: #01439c;
--blue--13-95: #022965;
--blue--17-69: #00163f;
--blue: var(--blue--4-52);
/* Indigo */
--indigo--1-09: #f4f3ff;
--indigo--1-39: #d8d6fd;
--indigo--1-82: #bdb4fc;
--indigo--2-51: #a596fb;
--indigo--3-19: #917efa;
--indigo--4-50: #795bf8;
--indigo--5-80: #683ef7;
--indigo--9-22: #4b12ce;
--indigo--13-95: #2e0987;
--indigo--17-62: #1a0356;
--indigo: var(--indigo--9-22);
/* Magenta */
--magenta--1-10: #fcf0fe;
--magenta--1-39: #f5cdfd;
--magenta--1-89: #eca1fc;
--magenta--2-49: #e777fa;
--magenta--3-18: #c523da;
--magenta--4-53: #ab19bf;
--magenta--5-79: #7c1089;
--magenta--9-16: #4f0758;
--magenta: var(--magenta--4-53);
/* Cool Red */
--cool-red--1-10: #fff0fc;
--cool-red--1-38: #f9d0e6;
--cool-red--1-77: #ffa9ce;
--cool-red--2-45: #f580a9;
--cool-red--3-15: #f45a85;
--cool-red--4-54: #de2d59;
--cool-red--5-79: #c1244b;
--cool-red--9-21: #8c1634;
--cool-red--14-02: #5a0a1e;
--cool-red--17-60: #380410;
--cool-red: var(--cool-red--4-54);
/* Warm Red */
--warm-red--1-10: #fff0f1;
--warm-red--1-45: #ffc9c7;
--warm-red--1-90: #fea4a1;
--warm-red--2-50: #ff7c76;
--warm-red--3-19: #ff5348;
--warm-red--4-50: #e72501;
--warm-red--5-78: #c81d01;
--warm-red--9-14: #911300;
--warm-red--13-95: #5d0900;
--warm-red--17-60: #3a0300;
--warm-red: var(--warm-red--3-19);
/* Yellow */
--yellow--1-08: #fff7c4;
--yellow--1-40: #ffd651;
--yellow--1-88: #f0b300;
--yellow--2-37: #df9b01;
--yellow--3-09: #c98400;
--yellow--4-51: #ac6600;
--yellow--5-93: #96530e;
--yellow--9-10: #6f3b0d;
--yellow--14-00: #4a2004;
--yellow--17-57: #300f02;
--yellow: var(--yellow--1-40);
/* Pink */
--pink: #ff0099;
/* Purple */
--purple: #983dd8;
/* White */
--white: #ffffff;
/* Agreement Cloud palete */
--ac-magenta: #ff3bdd;
--ac-blue: #0bc6ff;
--ac-green: #0e0;
--ac-yellow: #d6fb00;
/* Text Colors */
--text-white: #fff;
--text-black: #000;
--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(--blue--5-80);
--text-teal: var(--teal--3-16);
--text-small-teal: var(--teal--4-50);
--text-gray-lighter: var(--marketing-neutral--2-49);
--text-blue-dark: var(--blue--9-19);
--text-code-inline: var(--cool-red--4-54);
/* 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: rgba(255, 255, 255, 0.9);
--bg-solid-accent: var(--indigo--5-80);
--bg-gradient-accent: linear-gradient(90deg, var(--indigo--5-80) 0%, var(--indigo--9-22) 35%, var(--indigo--17-62) 60%);
/* Accessible backgrounds. */
--bg-green: var(--green--4-53);
--bg-dark-green: var(--dark-green);
--bg-dark-teal: var(--dark-teal);
--bg-teal: var(--teal--4-50);
--bg-blue: var(--blue--5-80);
--bg-light-blue: var(--blue);
--bg-indigo: var(--indigo--4-50);
--bg-magenta: var(--magenta--4-53);
--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);
/* 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: rgba(25, 24, 35, 0.15);
/* Box Shadow */
--box-shadow-color: rgba(17, 16, 25, 0.25);
--box-shadow-color-2: rgba(25, 24, 35, 0.15);
}
: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 */ /* 20px */ /* 24px */ /* 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-s: 1.25rem; /* 20px */
--font-size-m: 1.5rem; /* 24px */
--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-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;
}
*,
*::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);
}
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: 600;
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: 48rem) {
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;
}
a,
a svg {
color: #006ff9;
color: var(--text-accent);
fill: #006ff9;
fill: var(--text-accent);
transition-property: color, fill;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
}
a:hover,
a:hover svg {
color: #005fd7;
color: var(--text-accent-hover);
fill: #005fd7;
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: 80rem) {
}
@supports (font-size: calc(100vw)) {
@media (min-width: 64rem) {
}
@media (min-width: 80rem) {
}
}
/* 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: 48rem) {
}
@media (min-width: 64rem) {
}
@media (min-width: 80rem) {
}
@media (min-width: 80rem) {
}
@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);
}
.contact-sales__top {
padding-top: 1rem;
padding-top: var(--v-space-xs);
padding-bottom: 1rem;
padding-bottom: var(--v-space-xs);
grid-column: 1 / -1;
}
@media (min-width: 80rem) {
.contact-sales__top {
grid-column: 2 / 14
}
}
.contact-sales__header--no-subtitle {
padding-bottom: 1.25rem;
padding-bottom: var(--v-space-s);
}
@media (min-width: 64rem) {
.contact-sales__header--no-subtitle {
padding-bottom: 2.25rem;
padding-bottom: var(--v-space-l)
}
}
/*
* Contact Sales Full.
*/
.contact-sales--full {
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) {
.contact-sales--full {
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: 80rem) {
.contact-sales--full {
padding-right: 1.25rem;
padding-right: var(--gutter);
padding-left: 1.25rem;
padding-left: var(--gutter);
}
}
@supports (font-size: calc(100vw)) {
.contact-sales--full {
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) {
.contact-sales--full {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
}
@supports (font-size: calc(100vw)) {
@media (min-width: 80rem) {
.contact-sales--full {
grid-template-columns: repeat(14, minmax(0, 1fr));
}
}
}
.contact-sales--full .contact-sales__header {
padding-top: 1rem;
padding-top: var(--v-space-xs);
padding-bottom: 1.25rem;
padding-bottom: var(--v-space-s);
border-bottom: 2px solid #000;
border-bottom: var(--border-base);
grid-column: 1 / -1;
}
@media (min-width: 48rem) {
.contact-sales--full .contact-sales__header {
padding-top: 2rem;
padding-top: var(--v-space-m)
}
}
@media (min-width: 64rem) {
.contact-sales--full .contact-sales__header {
padding-top: 2.25rem;
padding-top: var(--v-space-l);
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
-moz-column-gap: 20px;
column-gap: 20px
}
}
@media (min-width: 80rem) {
.contact-sales--full .contact-sales__header {
grid-column: 2 / 14
}
}
.contact-sales--full .contact-sales__form {
grid-column: 1 / -1;
}
@media (min-width: 64rem) {
.contact-sales--full .contact-sales__form {
grid-column: 1 / span 7;
margin-right: 1.25rem;
margin-right: var(--gutter)
}
}
@media (min-width: 80rem) {
.contact-sales--full .contact-sales__form {
grid-column: 2 / span 6
}
}
.contact-sales--full .contact-sales__title {
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
font-size: 2.25rem;
font-size: var(--font-size-l);
line-height: 1.1667;
line-height: var(--line-height-m);
}
@media (min-width: 33.75rem) {
.contact-sales--full .contact-sales__title {
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
font-size: calc(2.25rem + 3.375 * ((100vw - 33.75rem) / 30.25));
line-height: calc(2.625rem + 3.375 * ((100vw - 33.75rem) / 30.25))
}
@media screen and (min-width: 64rem) {
.contact-sales--full .contact-sales__title {
line-height: 6rem;
}
}
@media screen and (max-width: 33.75rem) {
.contact-sales--full .contact-sales__title {
line-height: 2.625rem;
}
}
@media screen and (min-width: 64rem) {
.contact-sales--full .contact-sales__title {
font-size: 5.625rem;
}
}
@media screen and (max-width: 33.75rem) {
.contact-sales--full .contact-sales__title {
font-size: 2.25rem;
}
}
}
@media (min-width: 64rem) {
.contact-sales--full .contact-sales__title {
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
grid-column: 1 / -1;
font-size: 5.625rem;
font-size: var(--font-size-4xl);
line-height: 1.0667;
line-height: var( --line-height-s)
}
}
@media (min-width: 80rem) {
.contact-sales--full .contact-sales__title {
font-size: 7.5rem;
font-size: var(--font-size-5xl)
}
}
@supports (font-size: calc(100vw)) {
@media (min-width: 33.75rem) {
.contact-sales--full .contact-sales__title {
font-size: calc(2.25rem + 5.25 * ((100vw - 35rem) / 29));
line-height: calc(2.623rem + 5.372 * ((100vw - 35rem) / 29))
}
@media screen and (min-width: 64rem) {
.contact-sales--full .contact-sales__title {
line-height: 7.995rem;
}
}
@media screen and (max-width: 35rem) {
.contact-sales--full .contact-sales__title {
line-height: 2.623rem;
}
}
@media screen and (min-width: 64rem) {
.contact-sales--full .contact-sales__title {
font-size: 7.5rem;
}
}
@media screen and (max-width: 35rem) {
.contact-sales--full .contact-sales__title {
font-size: 2.25rem;
}
}
}
}
.contact-sales__info {
padding-top: 3rem;
padding-top: var(--v-space-xl);
grid-column: 1 / -1;
}
@media (min-width: 48rem) {
.contact-sales__info {
display: flex
}
}
@media (min-width: 64rem) {
.contact-sales__info {
grid-column: 8 / 14;
flex-direction: column;
margin-left: 1.25rem;
margin-left: var(--gutter)
}
}
.contact-sales__info .more-info--top {
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
padding-bottom: 4rem;
padding-bottom: var(--v-space-2xl);
border-bottom: 1px solid #dadcde;
border-bottom: var(--border-light);
width: 100%;
}
@media (min-width: 48rem) {
.contact-sales__info .more-info--top {
width: 50%;
border-bottom: none
}
}
@media (min-width: 64rem) {
.contact-sales__info .more-info--top {
border-bottom: 1px solid #dadcde;
border-bottom: var(--border-light);
width: auto
}
}
.contact-sales__info .more-info--top--number {
font-size: 2.25rem;
font-size: var(--font-size-l);
font-weight: 600;
line-height: 42px;
margin-top: 2rem;
margin-top: var(--v-space-m);
margin-bottom: 1.25rem;
margin-bottom: var(--v-space-s);
}
@media (min-width: 64rem) {
.contact-sales__info .more-info--top--number {
font-size: 3rem;
font-size: var(--font-size-xl);
font-weight: 600;
line-height: 56px;
margin-top: 2.25rem;
margin-top: var(--v-space-l);
margin-bottom: 2rem;
margin-bottom: var(--v-space-m)
}
}
.contact-sales__info .more-info--middle--item {
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
}
.contact-sales__info .more-info--middle--item a {
margin-top: 0.5rem;
margin-top: var(--v-space-2xs);
}
.contact-sales__info p {
font-family: "DSIndigo", Helvetica, Arial, sans-serif;
font-weight: 500;
margin-bottom: 0.5rem;
margin-bottom: var(--v-space-2xs);
}
.contact-sales__form {
background: #f6f8fa;
background: var(--marketing-neutral--1-06);
padding: 4rem 2rem;
padding: var(--v-space-2xl) var(--v-space-m);
}
@media (min-width: 64rem) {
.contact-sales__form {
padding: 4rem;
padding: var(--v-space-2xl)
}
}
.contact-sales__form .gcdc-gate {
margin: 0;
}
.contact-sales__form .gcdc-gate .gcdc-form-render, .contact-sales__form .gcdc-gate .gcdc-content-render {
background: none;
}
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-form-message p, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-form-message p {
margin: 2rem 0 2.25rem;
margin: var(--v-space-m) 0 var(--v-space-l);
}
.contact-sales__form .gcdc-gate .gcdc-form-render h2, .contact-sales__form .gcdc-gate .gcdc-content-render h2 {
margin: 1.25rem 0;
margin: var(--v-space-s) 0;
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: 64rem) {
.contact-sales__form .gcdc-gate .gcdc-form-render h2, .contact-sales__form .gcdc-gate .gcdc-content-render h2 {
font-size: 2.25rem;
font-size: var(--font-size-l);
line-height: 1.1667;
line-height: var(--line-height-m)
}
}
.contact-sales__form .gcdc-gate .gcdc-form-render p, .contact-sales__form .gcdc-gate .gcdc-content-render p {
line-height: 1.5;
line-height: var(--line-height-xl);
margin: 1rem 0;
margin: var(--v-space-xs) 0;
font-family: "DSIndigo", Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 1rem;
font-size: var(--font-size-m-body);
}
@media (min-width: 64rem) {
.contact-sales__form .gcdc-gate .gcdc-form-render p, .contact-sales__form .gcdc-gate .gcdc-content-render p {
margin-top: 2rem;
margin-top: var(--v-space-m);
margin-bottom: 2rem;
margin-bottom: var(--v-space-m)
}
}
.contact-sales__form .gcdc-gate .gcdc-form-render label,
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group label.gcdc-form-label,
.contact-sales__form .gcdc-gate .gcdc-content-render label,
.contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group label.gcdc-form-label {
line-height: 1.5;
line-height: var(--line-height-xl);
margin: 1rem 0;
margin: var(--v-space-xs) 0;
font-family: "DSIndigo", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-m-body);
margin-bottom: 0.5rem;
margin-bottom: var(--v-space-2xs);
}
@media (min-width: 64rem) {
.contact-sales__form .gcdc-gate .gcdc-form-render label,
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group label.gcdc-form-label,
.contact-sales__form .gcdc-gate .gcdc-content-render label,
.contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group label.gcdc-form-label {
margin-top: 2rem;
margin-top: var(--v-space-m);
margin-bottom: 2rem;
margin-bottom: var(--v-space-m)
}
}
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group *, .contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group * {
font-family: "DSIndigo", Helvetica, Arial, sans-serif;
}
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group input.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group textarea.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group input.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-form-render > div.gcdc-form-group textarea.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group input.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group textarea.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group input.gcdc-form-field,
.contact-sales__form .gcdc-gate .gcdc-content-render > div.gcdc-form-group textarea.gcdc-form-field {
border: 1px solid #191919;
border: 1px solid var(--marketing-neutral--17-58);
padding: 10px 8px;
margin-top: 0.5rem;
margin-top: var(--v-space-2xs);
margin-bottom: 1rem;
margin-bottom: var(--v-space-xs);
}
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-flag, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-flag {
margin: -5px 0 0 -6px !important;
}
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-form-group-TermsAndConditions, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-form-group-TermsAndConditions {
font-family: "DSIndigo", Helvetica, Arial, sans-serif;
font-size: 0.75rem;
font-size: var(--font-size-4xs);
font-weight: 500;
margin: 2rem 0;
margin: var(--v-space-m) 0;
}
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-form-group-TermsAndConditions a, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-form-group-TermsAndConditions a {
font-family: "DSIndigo", Helvetica, Arial, sans-serif;
font-size: 0.75rem;
font-size: var(--font-size-4xs);
}
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-form-group-button-wrapper, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-form-group-button-wrapper {
margin-top: 3rem;
margin-top: var(--v-space-xl);
}
.contact-sales__form .gcdc-gate .gcdc-form-render .gcdc-form-group-button-wrapper input.gcdc-form-button, .contact-sales__form .gcdc-gate .gcdc-content-render .gcdc-form-group-button-wrapper input.gcdc-form-button {
background: none;
background-color: #006ff9;
background-color: var(--blue--4-52);
font-weight: 500;
font-size: 1rem;
font-size: var(--font-size-m-body);
padding: 1rem 3rem;
padding: var(--v-space-xs) var(--v-space-xl);
}
.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: 80rem) {
.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: 80rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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 #000;
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: 48rem) {
.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: #000;
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: 48rem) {
.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: #000;
background: var(--text-black);
}
@media (min-width: 48rem) {
.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: #000;
background: var(--text-black);
}
@media (min-width: 48rem) {
.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: 80rem) {
.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: #f4f4f6;
background-color: var(--product-neutral--1-10);
}
.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: 48rem) {
.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: 80rem) {
.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: 80rem) {
.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: 600;
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: 48rem) {
.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: #f4f4f6;
background-color: var(--product-neutral--1-10);
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: rgba(255, 255, 255, 0.9);
background-color: var(--bg-white-shade);
}
.subscribe-modal .modal-content {
background-color: #ffffff;
background-color: var(--white);
margin: 15% auto;
max-width: 800px;
padding: 40px 48px;
border: 1px solid rgba(25, 24, 35, 0.15);
border: 1px solid var(--border-color-grey);
box-shadow: 0px 32px 64px rgba(25, 24, 35, 0.15);
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: 48rem) {
.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: 48rem) {
.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: 80rem) {
.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: 80rem) {
.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 #000;
border-top: var(--border-base);
border-bottom: 2px solid #000;
border-bottom: 2px solid var(--text-black);
}
@media (min-width: 48rem) {
.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 screen and (min-width: 64rem) {
.content-type--blog .content-type__header .content-type__subtitle {
line-height: 2rem;
}
}
@media screen and (max-width: 33.75rem) {
.content-type--blog .content-type__header .content-type__subtitle {
line-height: 1.5rem;
}
}
@media screen and (min-width: 64rem) {
.content-type--blog .content-type__header .content-type__subtitle {
font-size: 1.5rem;
}
}
@media screen and (max-width: 33.75rem) {
.content-type--blog .content-type__header .content-type__subtitle {
font-size: 1rem;
}
}
}
@media (min-width: 64rem) {
.content-type--blog .content-type__header .content-type__subtitle {
grid-column: 1 / span 8;
grid-row: 2 / span 1
}
}
@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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.content-type--blog .tag-list {
margin-top: 0
}
}
@media (min-width: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 80rem) {
.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: 80rem) {
.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 #000;
border-top: var(--border-base);
border-bottom: 2px solid #000;
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 #000;
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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 80rem) {
.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: 80rem) {
.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 #000;
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: 48rem) {
.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: 80rem) {
.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: 80rem) {
.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 #000;
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 #000;
border-bottom: var(--border-base);
}
@media (min-width: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: 80rem) {
.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: 80rem) {
.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: 48rem) {
.content-type--customer-story .teaser--dark.teaser--compact .teaser__logo svg {
width: 7.5rem; /* 120px */
max-height: 7.5rem /* 120px */
}
}
@media (min-width: 80rem) {
.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: 48rem) {
.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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: .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: 48rem) {
.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: 80rem) {
.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: 80rem) {
.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: 48rem) {
.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 #000;
border-bottom: var(--border-base);
list-style-type: none;
}
.content-grid .content-grid__item {
margin: 0;
border-bottom: 2px solid #000;
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: 48rem) {
.content-grid--60-40 .content-grid__list {
border-top: 2px solid #000;
border-top: var(--border-base)
}
}
.content-grid--60-40 .content-grid__item {
border-bottom: none;
border-top: 2px solid #000;
border-top: var(--border-base);
}
@media (min-width: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 80rem) {
.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: 80rem) {
.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__links {
list-style-type: none;
}
.cta--two-title .cta__title,
.cta--two-title .cta__title2 {
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--two-title .cta__title,
.cta--two-title .cta__title2 {
font-size: 3.875rem;
font-size: var(--font-size-2xl);
line-height: 1.0667;
line-height: var(--line-height-s)
}
}
@media (min-width: 80rem) {
.cta--two-title .cta__title,
.cta--two-title .cta__title2 {
grid-column-start: 3
}
}
@media (min-width: 90rem) {
.cta--two-title .cta__title,
.cta--two-title .cta__title2 {
font-size: 5.625rem;
font-size: var(--font-size-4xl)
}
}
.cta--two-title .cta__title {
color: #04a29a;
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: 80rem) {
.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: 80rem) {
.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);
}
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: #f6f8fa;
background-color: var(--bg-gray-light);
}
@media (min-width: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem), (-ms-high-contrast: active) and (min-width: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.featured-video .featured-video__title {
font-size: 1.5rem;
font-size: var(--font-size-m)
}
}
.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: 48rem) {
.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-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: 48rem) {
.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: 48rem) {
.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: 80rem) {
.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: #005fd7;
background-color: var(--bg-blue);
}
.teaser-header .teaser-header__top,
.teaser-header .teaser--compact--highlighted {
grid-column: 2 / -2;
}
@media (min-width: 80rem) {
.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: 2.25rem;
font-size: var(--font-size-l);
line-height: 1.1667;
line-height: var(--line-height-m);
font-weight: 600;
}
@media (min-width: 33.75rem) {
.title--short {
margin: 3rem 0;
margin: var(--v-space-xl) 0;
font-size: calc(3.875rem + 3.625 * ((100vw - 33.75rem) / 30.25));
line-height: calc(4.1334625rem + 3.866787499999999 * ((100vw - 33.75rem) / 30.25))
}
@media screen and (min-width: 64rem) {
.title--short {
line-height: 8.00025rem;
}
}
@media screen and (max-width: 33.75rem) {
.title--short {
line-height: 4.1334625rem;
}
}
@media screen and (min-width: 64rem) {
.title--short {
font-size: 7.5rem;
}
}
@media screen and (max-width: 33.75rem) {
.title--short {
font-size: 3.875rem;
}
}
}
@media (min-width: 64rem) {
.title--short {
margin: 2.25rem 0 3rem;
margin: var(--v-space-l) 0 var(--v-space-xl)
}
}
/*
* 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: 48rem), (-ms-high-contrast: active) and (min-width: 48rem) {
.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: 2.25rem;
font-size: var(--font-size-l);
line-height: 1.1667;
line-height: var(--line-height-m);
}
@media (min-width: 33.75rem) {
.title--long {
margin-bottom: 2rem;
margin-bottom: var(--v-space-m);
font-size: calc(3.875rem + 1.125 * ((100vw - 33.75rem) / 30.25));
line-height: calc(4.1334625rem + 1.2000374999999996 * ((100vw - 33.75rem) / 30.25))
}
@media screen and (min-width: 64rem) {
.title--long {
line-height: 5.3335rem;
}
}
@media screen and (max-width: 33.75rem) {
.title--long {
line-height: 4.1334625rem;
}
}
@media screen and (min-width: 64rem) {
.title--long {
font-size: 5rem;
}
}
@media screen and (max-width: 33.75rem) {
.title--long {
font-size: 3.875rem;
}
}
}
@media (min-width: 64rem) {
.title--long {
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l)
}
}
/*
* 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: 5rem;
font-size: var(--font-size-3xl);
line-height: 1.0667;
line-height: var(--line-height-s)
}
}
@media all and (-ms-high-contrast: none) and (min-width: 80rem), (-ms-high-contrast: active) and (min-width: 80rem) {
.title--long {
font-size: 5rem;
font-size: var(--font-size-3xl)
}
}
.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: -webkit-max-content -webkit-max-content auto;
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.25rem;
font-size: var(--font-size-s);
line-height: 1.333;
line-height: var(--line-height-l);
font-weight: 600;
}
@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);
line-height: 1.333;
line-height: var(--line-height-l)
}
}
@media (min-width: 48rem) {
.quote .quote__text {
font-size: 2.25rem;
font-size: var(--font-size-l);
line-height: 1.1667;
line-height: var(--line-height-m);
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 {
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: 48rem) {
.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: #000;
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: 48rem) {
.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: 600;
}
/* Quote Color Variations */
.rich-text .quote {
color: #01439c;
color: var(--text-blue-dark);
}
.rich-text .quote .quote__icon {
fill: #01439c;
fill: var(--text-blue-dark);
}
.quote--featured .quote__icon {
grid-column-start: 1;
}
@media (min-width: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: 80rem) {
.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 * 3));
left: calc(0rem - (var(--v-space-2xs) * 3));
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: 48rem) {
.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: 48rem) {
.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: 80rem) {
.quote--image .quote__text {
grid-row: 1;
margin-bottom: 4rem;
margin-bottom: var(--v-space-2xl);
margin-top: 6.5rem;
margin-top: var(--v-space-3xl);
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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.quote--image .quote__link-wrapper {
grid-column: 6 / span 3
}
}
.quote--image .quote__author {
font-size: 1rem;
font-size: var(--font-size-xs);
}
.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: 80rem) {
.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: 80rem) {
.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: #ffd651;
background-color: var(--yellow);
}
.messages__item--error {
background-color: #ff5348;
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: #000;
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: #000;
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: 80rem) {
.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: 80rem) {
.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 #000;
border-bottom: var(--border-base);
}
.tabs a.is-active {
color: #000;
color: var(--text-black);
border-bottom: 2px solid #000;
border-bottom: var(--border-base);
}
/* Button. */
.button {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-width: 125px;
padding: 0.62rem 0.93rem;
background-color: #006ff9;
background-color: var(--text-accent);
outline-offset: 3px;
border-color: #006ff9;
border-color: var(--text-accent);
border-style: solid;
border-radius: 2px;
border-radius: var(--radius-s);
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;
}
.button:hover {
background-color: #005fd7;
background-color: var(--text-accent-hover);
color: #fff;
}
.button:focus,
.button:active {
background-color: #005fd7;
background-color: var(--text-accent-hover);
border-color: #005fd7;
border-color: var(--text-accent-hover);
outline: 3px solid #767677;
outline: 3px solid var(--marketing-neutral--4-54);
text-decoration: none;
}
/* Variants */
.button.button--secondary {
background-color: #fff;
border-color: #006ff9;
border-color: var(--text-accent);
color: #006ff9;
color: var(--text-accent);
}
.button.button--secondary:hover,
.button.button--secondary:focus {
border-color: #005fd7;
border-color: var(--text-accent-hover);
color: #005fd7;
color: var(--text-accent-hover);
}
.button.button--ghost {
background-color: transparent;
border-color: #006ff9;
border-color: var(--border-color-blue);
color: #006ff9;
color: var(--text-accent);
transition-property: border;
}
@media (min-width: 48rem) {
.button.button--ghost {
border-color: transparent
}
}
.button.button--ghost:hover,
.button.button--ghost:focus {
border-color: #005fd7;
border-color: var(--text-accent-hover);
}
.button.button--secondary-ghost {
background-color: transparent;
border-color: transparent;
color: #006ff9;
color: var(--text-accent);
transition-property: border;
}
.button.button--secondary-ghost:hover,
.button.button--secondary-ghost:focus {
border-color: #005fd7;
border-color: var(--text-accent-hover);
}
.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;
}
.button.button--dark:hover,
.button.button--dark:focus {
background-color: #484849;
background-color: var(--text-dark-hover);
}
.button.button--secondary-dark {
background-color: transparent;
border-color: #000;
border-color: var(--border-color);
color: #000;
color: var(--text-black);
}
.button.button--secondary-dark:hover,
.button.button--secondary-dark:focus {
border-color: #005fd7;
border-color: var(--text-accent-hover);
}
/* Sizes */
.button.button--full {
width: 100%;
}
.button.button--large {
font-size: 1rem;
font-size: var(--font-size-xs);
font-weight: 500;
padding: 0.75rem 1.87rem ;
}
.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: 600;
}
.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);
}
.icon-link:hover .icon-link__icon, .icon-link:focus .icon-link__icon {
transform: translateX(-5px);
}
.icon-link--right {
padding-left: 0;
padding-right: 1rem;
padding-right: var(--h-space-xs);
}
.icon-link--right .icon-link__icon {
left: auto;
right: 0;
top: 20%;
transform: rotate(180deg);
}
.icon-link--right:hover .icon-link__icon, .icon-link--right:focus .icon-link__icon {
transform: translateX(5px) rotate(180deg);
}
.icon-link--teal {
color: #01857f;
color: var(--text-small-teal);
}
.icon-link--teal .icon-link__icon {
fill: #01857f;
fill: var(--text-small-teal);
}
.icon-link--teal:hover,
.icon-link--teal:focus {
color: #01857f;
color: var(--text-small-teal);
}
.icon-link--teal:hover .icon-link__icon, .icon-link--teal:focus .icon-link__icon {
fill: #01857f;
fill: var(--text-small-teal);
}
.icon-link--white {
color: #fff;
color: var(--text-white);
}
.icon-link--white .icon-link__icon {
fill: #fff;
fill: var(--text-white);
}
.icon-link--white:hover,
.icon-link--white:focus {
color: #fff;
color: var(--text-white);
}
.icon-link--white:hover .icon-link__icon, .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 #000;
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 #000;
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: #000;
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: #000;
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: #006ff9;
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: #006ff9;
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: #000;
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: 80rem) {
.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 .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: #000;
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: 48rem) {
.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: #000;
color: var(--text-black);
}
.pager__item a:hover {
color: #006ff9;
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: #000;
fill: var(--text-black);
}
.pager__arrow:hover {
fill: #006ff9;
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);
}
@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 screen and (min-width: 64rem) {
.rich-text p,
.rich-text li {
line-height: 2rem;
}
}
@media screen and (max-width: 33.75rem) {
.rich-text p,
.rich-text li {
line-height: 1.5rem;
}
}
@media screen and (min-width: 64rem) {
.rich-text p,
.rich-text li {
font-size: 1.25rem;
}
}
@media screen and (max-width: 33.75rem) {
.rich-text p,
.rich-text li {
font-size: 1rem;
}
}
}
.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 screen and (min-width: 64rem) {
.rich-text blockquote,
.rich-text blockquote p {
line-height: 3.5rem;
}
}
@media screen and (max-width: 33.75rem) {
.rich-text blockquote,
.rich-text blockquote p {
line-height: 2.325rem;
}
}
@media screen and (min-width: 64rem) {
.rich-text blockquote,
.rich-text blockquote p {
font-size: 3rem;
}
}
@media screen and (max-width: 33.75rem) {
.rich-text blockquote,
.rich-text blockquote p {
font-size: 1.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: 48rem) {
.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: 48rem) {
.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 #000;
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
}
}
.social-links__list {
margin: 0;
paddiing: 0;
}
.social-links__item {
display: inline-block;
}
.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);
}
.social-links__label {
margin-bottom: 1rem;
margin-bottom: var(--v-space-xs);
text-transform: uppercase;
}
.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;
}
.social-links__link:hover {
background-color: #006ff9;
background-color: var(--text-accent);
}
.social-links__link:not(:last-child) {
margin-right: calc(1rem / 2);
margin-right: calc(var(--h-space-xs) / 2);
}
.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 #000;
border-bottom: var(--border-base);
font-size: 1rem;
font-size: var(--font-size-m-body);
border-collapse: collapse;
}
@media (min-width: 48rem) {
table {
margin: 4rem 0;
margin: var(--v-space-2xl) 0
}
}
table th {
border-bottom: 2px solid #000;
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: #000;
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: #006ff9;
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: #000;
color: var(--text-black);
}
.teaser--author a:hover {
color: #006ff9;
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(--blue);
grid-template-rows: -webkit-min-content auto -webkit-min-content;
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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: -webkit-min-content -webkit-min-content auto;
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: -webkit-min-content auto -webkit-min-content;
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: #006ff9;
background: var(--blue);
}
@media (min-width: 33.75rem) {
.teaser--compact.teaser--image:hover,
.teaser--compact.teaser--image:active {
--text-accent-hover: var(--blue);
background: none
}
}
@media (min-width: 64rem) {
.teaser--compact.teaser--image:hover,
.teaser--compact.teaser--image:active {
--text-accent-hover: var(--text-white);
background: #006ff9;
background: var(--blue)
}
}
.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: #000;
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: #000;
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 -webkit-min-content -webkit-min-content -webkit-min-content;
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: -webkit-min-content -webkit-min-content -webkit-min-content;
grid-template-rows: min-content min-content min-content
}
}
@media (min-width: 48rem) {
.teaser--compact.teaser--logo:not(.teaser--compact--highlighted):not(.teaser--dark) {
grid-template-rows: auto auto -webkit-min-content auto;
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 -webkit-min-content -webkit-min-content -webkit-min-content;
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 -webkit-min-content -webkit-min-content -webkit-min-content;
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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: #006ff9;
fill: var(--blue);
}
/* @todo: replace '.teaser--compact--highlighted' with '.teaser--highlighted'. */
.teaser--compact.teaser--compact--highlighted {
grid-template-rows: -webkit-min-content auto;
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: 48rem) {
.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: 25rem) {
.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: 25rem) {
.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: 25rem) {
.teaser--compact.teaser--compact--highlighted .teaser__title,
.teaser--compact.teaser--compact--highlighted .teaser__abstract {
grid-column: 3 / -1;
margin: 0
}
}
@media (min-width: 48rem) {
.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);
}
@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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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 screen and (min-width: 64rem) {
.teaser--featured .teaser__title {
line-height: 3.2001rem;
}
}
@media screen and (max-width: 33.75rem) {
.teaser--featured .teaser__title {
line-height: 1.66625rem;
}
}
@media screen and (min-width: 64rem) {
.teaser--featured .teaser__title {
font-size: 3rem;
}
}
@media screen and (max-width: 33.75rem) {
.teaser--featured .teaser__title {
font-size: 1.25rem;
}
}
}
@media (min-width: 80rem) {
.teaser--featured .teaser__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) {
.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: #006ff9;
background: var(--blue);
--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(--blue);
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: #000;
color: var(--text-black);
}
.teaser--featured.teaser--image .teaser__meta {
color: #000;
color: var(--text-black);
}
}
@media (min-width: 64rem) {
.teaser--featured.teaser--image {
grid-template-rows: -webkit-min-content -webkit-min-content auto -webkit-min-content;
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: 80rem) {
.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: -webkit-min-content -webkit-max-content -webkit-max-content -webkit-min-content;
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: -webkit-min-content auto -webkit-min-content;
grid-template-rows: min-content auto min-content;
min-height: 12.25rem /* 228px */
}
}
@media (min-width: 48rem) {
.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: 80rem) {
.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: #000;
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: 48rem) {
.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: #000;
color: var(--text-black)
}
}
@media (min-width: 80rem) {
.teaser--featured.teaser--logo .teaser__meta .teaser__tag {
margin-left: 0
}
}
@media (min-width: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 48rem) {
.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: #000;
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: 48rem) {
.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: #000;
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: 48rem) {
.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: #005fd7;
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: #005fd7;
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: #006ff9;
color: var(--blue)
}
}
}
@supports (display: grid) {
.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 (mix-blend-mode: multiply) {
.teaser--color-underlay .teaser__image::after {
mix-blend-mode: multiply;
}
}
@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: #e72501;
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--magenta > .teaser__image::after {
background-color: #ab19bf;
background-color: var(--bg-magenta);
}
.teaser--color-underlay.teaser--color-underlay--indigo > .teaser__image::after {
background-color: #795bf8;
background-color: var(--bg-indigo);
}
.teaser--color-underlay.teaser--color-underlay--blue > .teaser__image::after {
background-color: #005fd7;
background-color: var(--bg-blue);
}
.teaser--color-underlay.teaser--color-underlay--teal > .teaser__image::after {
background-color: #01857f;
background-color: var(--bg-teal);
}
.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-teal > .teaser__image::after {
background-color: #00b8a7;
background-color: var(--bg-dark-teal);
}
.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: #ff0099;
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: #006ff9;
background-color: var(--bg-light-blue);
}
}
@supports (display: grid) {
.teaser--dark.teaser--logo {
overflow: hidden;
min-height: 21.25rem;
grid-template-rows: -webkit-min-content auto -webkit-min-content;
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: 48rem) {
.teaser--dark.teaser--logo {
grid-template-rows: auto -webkit-min-content auto;
grid-template-rows: auto min-content auto
}
}
@media (min-width: 64rem) {
.teaser--dark.teaser--logo {
min-height: 30rem;
grid-template-rows: auto -webkit-min-content -webkit-min-content;
grid-template-rows: auto min-content min-content
}
}
@media (min-width: 80rem) {
.teaser--dark.teaser--logo {
min-height: 42.5rem
}
}
.teaser--dark.teaser--logo.teaser--color-underlay--warm-red {
background-color: #e72501;
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--magenta {
background-color: #ab19bf;
background-color: var(--bg-magenta);
}
.teaser--dark.teaser--logo.teaser--color-underlay--indigo {
background-color: #795bf8;
background-color: var(--bg-indigo);
}
.teaser--dark.teaser--logo.teaser--color-underlay--blue {
background-color: #005fd7;
background-color: var(--bg-blue);
}
.teaser--dark.teaser--logo.teaser--color-underlay--teal {
background-color: #01857f;
background-color: var(--bg-teal);
}
.teaser--dark.teaser--logo.teaser--color-underlay--dark-teal {
background-color: #00b8a7;
background-color: var(--bg-dark-teal);
}
.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: #ff0099;
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: #006ff9;
background-color: var(--bg-light-blue);
}
.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: #006ff9;
background: var(--blue);
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: #005fd7;
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: 48rem) {
.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);
}
@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);
font-size: 1.5rem;
font-size: var(--font-size-m)
}
}
@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)
}
}
@media (min-width: 80rem) {
.teaser--dark.teaser--logo .teaser__title {
font-size: 2.25rem;
font-size: var(--font-size-l)
}
}
.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: #000;
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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: #000;
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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.footer-legal__content {
grid-column-start: 3
}
}
@media (min-width: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.footer-legal .link-list ul {
-moz-columns: 1;
columns: 1
}
}
@media (min-width: 48rem) {
.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: 48rem) {
.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: #000;
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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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;
}
}
.social {
padding: 2.25rem 0;
padding: var(--v-space-l) 0;
background-color: #191919;
background-color: var(--marketing-neutral--17-58);
}
.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: 48rem) {
.social__inner {
justify-content: space-between;
padding: 0 calc(2 * 1.25rem);
padding: 0 calc(2 * var(--gutter))
}
}
@media (min-width: 64rem) {
.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) {
.social__inner {
display: grid;
margin: 0;
padding: 0;
max-width: none;
justify-content: inherit
}
}
}
@media (min-width: 80rem) {
.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)
}
}
.social__links {
margin-bottom: 2.25rem;
margin-bottom: var(--v-space-l);
flex: 0 0 100%;
}
@media (min-width: 60rem) {
.social__links {
flex: 0 0 auto;
margin-bottom: 0;
text-align: left
}
}
@media (min-width: 64rem) {
.social__links {
grid-column-start: 2;
grid-column-end: span 5
}
}
@media (min-width: 80rem) {
.social__links {
grid-column-start: 3
}
}
.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);
}
.social__link:hover {
opacity: .5;
}
.social__link-icon {
fill: #000;
fill: var(--text-black);
height: 1.6rem;
width: 1.6rem;
}
.social__apps {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
@media (min-width: 33.75rem) {
.social__apps {
flex-direction: row
}
}
@media (min-width: 64rem) {
.social__apps {
grid-column-start: 7;
grid-column-end: span 7;
justify-self: end
}
}
@media (min-width: 80rem) {
.social__apps {
grid-column-start: 8
}
}
.social__app {
margin-top: 1.25rem;
margin-top: var(--v-space-s);
}
@media (min-width: 33.75rem) {
.social__app {
margin-top: 0;
margin-left: 1.25rem;
margin-left: var(--v-space-s)
}
}
.social__app:first-child {
margin-left: 0;
}
.social__app-image {
width: 128px;
display: inherit;
}
.footer-trending {
background: #000;
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: 48rem) {
.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: 80rem) {
.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: 80rem) {
.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: 80rem) {
.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: #000;
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: #000;
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: #000;
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: 48rem) {
.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: #000;
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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: #005fd7;
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: #000;
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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.navigation-crown--closed.navigation-crown--accent, .navigation--closed .navigation-crown.navigation-crown--accent {
background-color: #683ef7;
background-color: var(--bg-solid-accent);
background-image: linear-gradient(90deg, #683ef7 0%, #4b12ce 35%, #1a0356 60%);
background-image: var(--bg-gradient-accent)
}
}
@media (min-width: 48rem) {
.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: #006ff9;
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: #005fd7;
border-color: var(--text-accent-hover)
}
}
.navigation-menu {
background: #000;
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: #000;
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,
.navigation-menu .navigation-menu__menu.navigation-menu--submenu-is-open {
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: 48rem) {
@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: 48rem) {
@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: 25rem) {
.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: #000;
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: #000;
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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 48rem) {
.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: 80rem) {
.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: #000;
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: 80rem) {
.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: 80rem) {
.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: 80rem) {
.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: 48rem) {
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: 80rem), (-ms-high-contrast: active) and (min-width: 80rem) {
.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: 80rem) {
.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: #000;
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: 48rem) {
.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: .125rem solid #fff;
border-bottom: .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: 48rem) {
.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: 80rem) {
.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: 48rem) {
.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: 80rem) {
.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: 80rem), (-ms-high-contrast: active) and (min-width: 80rem) {
.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));
}
}