/* ==========================================================================
   Full width background
   ========================================================================== */
[class*="--background-gray"] {
  background-color: #f6f6f6;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 60px 0;
}
.mt_direction_right_to_left [class*="--background-gray"] {
  margin-right: calc(-50vw + 50%);
  margin-left: auto;
}
/* ==========================================================================
   Standard spacing for components
   ========================================================================== */
/*
 * Add standard top/bottom 60px of space for cross-template-components that are not empty.
 * Exceptions:
 * - Components with backgrounds. 60px top/bottom padding will be on inside of component instead.
 * - Quote component
 * - Section Highlight component
 */
:is(.parsys, .grouping) > *:has( > .cross-template-component:not(:empty, [class*="--background-gray"])):not(.quote, .landingpagesection, .sectionhighlight) {
  padding-top: 60px;
  padding-bottom: 60px;
}
/*
 * Remove top/bottom padding from Section components that have no visibile content
 */
:is(.parsys, .grouping) > *:has(.cross-template-component__section--hidden) {
  padding-top: 0;
  padding-bottom: 0;
}
/*
 * Remove top padding from:
 * - Full-Width Mood Video component, and component that follows it
 * - Full-Width Showcase component, and component that follows it
 * - Any component that follows a Section component that has a visible h1, and does not have a gray background
 * - Any component that follows a Section Highlight component, and does not have a gray background
 */
:is(.parsys, .grouping) > *:has(.cross-template-component:not(:empty)):is(.moodvideo, .showcase, .showcase + *, .moodvideo + *),
:is(.parsys, .grouping) > .landingpagesection:has(h1) + *:has(.cross-template-component:not(:empty):not([class*="--background-gray"])),
:is(.parsys, .grouping) > .sectionhighlight + *:has(.cross-template-component:not(:empty):not([class*="--background-gray"])) {
  padding-top: 0;
}
/* ==========================================================================
   Section Component Spacing
   ========================================================================== */
/*
 * Add top 100px/bottom 60px of space for .cross-template-component__section--visible
 */
:is(.parsys, .grouping) > .landingpagesection:has(.cross-template-component__section--visible) {
  padding-top: 100px;
  padding-bottom: 60px;
}
/*
 * If .cross-template-component__section--visible follows a component without a background, only make padding-top: 40px
 */
:is(.parsys, .grouping) > *:has( > .cross-template-component:not(:empty, [class*="--background-gray"])) + .landingpagesection:has(.cross-template-component__section--visible) {
  padding-top: 40px;
  padding-bottom: 60px;
}
/* ==========================================================================
   Section Highlight Component Spacing
   ========================================================================== */
/*
 * Apply bottom padding only to most instances of Section Highlight component
 */
:is(.parsys, .grouping) > *:has(.sectionhighlight) {
  padding-top: 0;
  padding-bottom: 60px;
}
/*
 * Apply top padding to Section Highlight when it comes after a component with background
 */
:is(.parsys, .grouping) > *:has([class*="--background-gray"]) + *:has(.sectionhighlight) {
  padding-top: 60px;
}
/* ==========================================================================
   Divider Line Rules
   ========================================================================== */
/*
 * Add top border to all cross-template-components.
 */
:is(.parsys, .grouping) > *:is(*:has(.cross-template-component) + *) {
  border-top: solid 1px #ededed;
}
:is(.parsys, .grouping) > *:has(.cross-template-component:not(:empty):not([class*="--background-gray"])) + .landingpagesection:has([class*="--hidden"]) {
  border-top: solid 1px #ededed;
  margin-bottom: -1px;
}
/*
 * Components with a background,
 * which follow components with a background,
 * have -1px top margin, so no white space is visible above or below 1px border.
 */
:is(.parsys, .grouping) > *:is(*:has([class*="--background-gray"]) + *):is(*:has([class*="--background-gray"])) {
  margin-top: -1px;
}
/*
 * Remove top border:
 * - From components without a background, which follow components that do have a background
 * - From components with a background, which follow components that do not have a background
 * - Quote component, and component that follows it
 * - Section component, and component that follows it
 * - Full-Width Showcase component, and component that follows it
 * - Full-Width Mood Video component, and component that follows it
 * - Section Highlight
 */
:is(.parsys, .grouping) > *:is(*:has([class*="--background-gray"]) + *):not(:has([class*="--background-gray"])),
:is(.parsys, .grouping) > *:is(*:has(.cross-template-component:not([class*="--background-gray"])) + *):has([class*="--background-gray"]),
:is(.parsys, .grouping) > *:is(.quote, .quote + *),
:is(.parsys, .grouping) > *:is(.landingpagesection, .landingpagesection + *),
:is(.parsys, .grouping) > *:is(.showcase, .showcase + *),
:is(.parsys, .grouping) > *:is(.moodvideo, .moodvideo + *),
:is(.parsys, .grouping) > *:is(.grouping + .grouping),
:is(.parsys, .grouping) > *:is(*:has(.cross-template-component--no-dividers)),
:is(.parsys, .grouping) > *:is(*:has(.cross-template-component--no-dividers) + *) {
  border-top: 0 !important;
}
/* ==========================================================================
   Title emphasis
   ========================================================================== */
.emphasisPrimary {
  color: #004494 !important;
  font-size: 30px !important;
  line-height: 39px !important;
}
.emphasisSecondary {
  color: #666666 !important;
  font-size: 27px !important;
  line-height: 35.1px !important;
}