/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/* fallback font for Noto Sans (normal - 400) */
@font-face {
  font-family: 'noto-sans-normal-400-fallback';
  size-adjust: 105.431%;
  src: local('Arial');
}

:root {
  /* colors */
  --black: #000;
  --blue: #007bff;
  --beaublue: #bedceb;
  --granny-smith-apple: #9ce69b;
  --alice-blue: #e8f5ff;
  --caribbean-green: #00be91;
  --indigo: #6610f2;
  --indigo-800: #3a0ca3;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #eb0000;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --orange-light: #f68d2e;
  --green: #28a745;
  --teal: #20c997;
  --teal-600: #0d9488;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #00587c;
  --secondary: #007cad;
  --tertiary: var(--secondary);
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #eb0000;
  --light: #f8f9fa;
  --dark: #343a40;
  --link-color: #007cad;
  --hero-strong-color: #89d1e1;
  --card-text-color: var(--secondary);
  --link-hover-color: var(--secondary);
  --background-color: var(--white);
  --overlay-background-color: #eee;
  --highlight-background-color: #ccc;
  --text-color: #3c4350;
  --text-h2-underline-color: #3c46501e;
  --light-blue: #c4e3ee;
  --light-green: #c4e6e3;
  --blue-light-color: #90bfdc;
  --blue-deep-color: #044764;
  --tab-content-color: var(--blue-light-color);
  --tab-default-color: var(--blue-deep-color);
  --transparent-grey-color: #3c465080;
  --transparent-grey-color-2: #3c4650b2;
  --transparent-grey-light-color: #3c46501f;
  --transparent-blue-light-color: #f0f5f7ff;
  --transparent-white-color: #ffffff1e;
  --transparent-white-color-50: #ffffff80;
  --off-white: #ffffff80;
  --muted-text: #ffffffb3;
  --light-grey: #3c46507f;
  --light-black: #3c4650;
  --steel-blue: #6d757c;
  --link-sky-color: #0092cc;
  --oral-care-blue: #009cbd;
  --safety-mobility-yellow: #d9ab41;
  --health-beauty-orange: #f87c56;
  --living-environment-green: #00a499;
  --muted-text-block-color: #abb8c3;
  --link-blue-color: #003d56;
  --dark-cyan-color: #003449;
  --primary-08-transparency: #00587ccc;
  --underfill-dark-indigo: #490c61;
  --brown-rice-background: #d07c68;
  --brown-rice-color: #821e14;
  --alpha-1: 100%;
  --alpha-0-5: 50%;

  /* fonts */

  --body-font-family: 'Noto Sans', 'Noto Sans JP', noto-sans-normal-400-fallback, sans-serif;
  --heading-font-family: var(--body-font-family);
  --fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono', monospace;

  /* Body sizes */
  --body-font-size-xxl: 1.375rem; /* 22px / 16px = 1.375rem */
  --body-font-size-xl: 1.25rem; /* 20px / 16px = 1.25rem */
  --body-font-size-l: 1.125rem; /* 18px / 16px = 1.125rem */
  --body-font-size-m: 1rem; /* 16px / 16px = 1rem */
  --body-font-size-s: 0.875rem; /* 14px / 16px = 0.875rem */
  --body-font-size-xs: 0.75rem; /* 12px / 16px = 0.75rem */

  /* Heading sizes */
  --heading-font-size-xxl: 3rem; /* 48px / 16px = 3rem */
  --heading-font-size-xl: 2.625rem; /* 42px / 16px = 2.625rem */
  --heading-font-size-xmxl: 2.5rem; /* 40px / 16px = 2.5rem */
  --heading-font-size-mxl: 2.25rem; /* 36px / 16px = 2.25rem */
  --heading-font-size-l: 2rem; /* 32px / 16px = 2rem */
  --heading-font-size-ml: 1.875rem; /* 30px / 16px = 1.875rem */
  --heading-font-size-m: 1.75rem; /* 28px / 16px = 1.75rem */
  --heading-font-size-s: 1.5rem; /* 24px / 16px = 1.5rem */
  --heading-font-size-ms: 1.25rem; /* 20px / 16px = 1.25rem */
  --heading-font-size-xs: 1.125rem; /* 18px / 16px = 1.125rem */
  --heading-font-size-mxs: 1rem; /* 16px / 16px = 1rem */
  --heading-font-size-xxs: 0.875rem; /* 14px / 16px = 0.875rem */
  --heading-font-size-xxxs: 0.75rem; /* 12px / 16px = 0.75rem */

  /* Heading Variables */
  --hero-font-size-desktop: var(--heading-font-size-xxl);
  --hero-font-size-mobile: var(--heading-font-size-m);
  --h1-font-size-desktop: var(--heading-font-size-mxl);
  --h1-font-size-mobile: var(--heading-font-size-m);
  --h2-font-size-desktop: var(--heading-font-size-s);
  --h2-font-size-mobile: var(--heading-font-size-ms);
  --h3-font-size-desktop: var(--heading-font-size-ms);
  --h3-font-size-mobile: var(--heading-font-size-xs);
  --h4-font-size-desktop: var(--heading-font-size-xs);
  --h4-font-size-mobile: var(--heading-font-size-mxs);

  /* Font Weight */
  --font-weight-small: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-bolder: 900;

  /* Font Style */
  --font-style-normal: normal;

  /* nav height */
  --nav-top-height: 0px;
  --nav-middle-height: 60px;
  --nav-bottom-height: 52px;
  --nav-total-height: calc(var(--nav-top-height) + var(--nav-middle-height) + var(--nav-bottom-height));

  /* button */
  --button-background-color: var(--secondary);
  --button-background-disabled-color: #ccc;
  --button-padding: 0 1.5em;
  --button-text-color: white;
  --button-font-weight: 700;
  --button-border-radius: 0;

  /* Font Sizes */
  --font-size-small: 14px;
  --font-size-xsmall: 12px;

  /* Column Split Ratios */
  --split-firstquarter: 25%: 75%;
  --split-lastquarter: 75%: 25%;
  --split-firstthird: 34%: 66%;
  --split-lastthird: 66%: 34%;
  --split-firsttwothird: 40%: 60%;
  --split-lasttwothird: 60%: 40%;
}

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

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

body {
  font-family: var(--body-font-family);
  font-variant-ligatures: common-ligatures;
  font-style: normal;
  margin: 0;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
  display: none;
  -webkit-font-smoothing: antialiased;
}

body.appear {
  display: unset;
}

header,
footer {
  visibility: hidden;
}

body.no-scroll {
  overflow-y: hidden;
}

body.fixed {
  position: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary);
  font-family: var(--heading-font-family);
  line-height: 1.25;
  scroll-margin: calc(var(--nav-height) + 1em);
  margin: 0;
  font-weight: var(--font-weight-medium);
  text-wrap: balance;
}

h1 {
  font-size: var(--h1-font-size-mobile);
  margin: 3.5rem 0 2rem;
}

h2 {
  font-size: var(--h2-font-size-mobile);
  margin: 3rem 0 1.5rem;
  font-weight: 500;
  line-height: 1.3em;
}

h3 {
  font-size: var(--h3-font-size-mobile);
  margin: 2rem 0 0.75rem;
  font-weight: 500;
  line-height: 1.3em;
}

h4 {
  font-size: var(--h4-font-size-mobile);
  margin: 1.5em 0 0.5rem;
}

p {
  font-weight: var(--font-weight-regular);
  font-size: var(--body-font-size-m);
  line-height: 1.7em;
  text-size-adjust: 100%;
  text-wrap: pretty;
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin: 0 0 1.25rem;
  padding: 0;
}

ul,
ol {
  padding: 0 0 0 1.625rem;
}

ul li,
ol li {
  margin: 0.5rem 0;
  padding: 0 0 0 0.375rem;
}

h5 {
  font-size: var(--heading-font-size-xxs);
}

h6 {
  font-size: var(--heading-font-size-xxxs);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--secondary);
  font-weight: var(--font-weight-bold);
}

h5 + h1,
h5 + h2,
h5 + h3 {
  margin-top: 0;
}

h6 + h1,
h6 + h2,
h6 + h3 {
  margin-top: 0;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p,
.white,
.white h1,
.white h2,
.white h3,
.white h4,
.white h5,
.white h6,
.white p {
  color: var(--white);
}

.hero h1,
.hero h2,
.hero h3,
.hero h4 {
  font-size: var(--hero-font-size-mobile);
}

.h1 h2,
.h1 h3,
.h1 h4,
.h1 {
  font-size: var(--h1-font-size-mobile);
}

.h2 h1,
.h2 h3,
.h2 h4,
.h2 {
  font-size: var(--h2-font-size-mobile);
}

.h3 h1,
.h3 h2,
.h3 h4,
.h3 {
  font-size: var(--h3-font-size-mobile);
}

.h4 h1,
.h4 h2,
.h4 h3,
.h4 {
  font-size: var(--h4-font-size-mobile);
}

/* section - no-padding-top for h1 */
.header-no-top-padding h1 {
  padding-top: 0 !important;
}

p.h6 + h1,
p.h6 + h2,
p.h6 + h3 {
  margin-top: 0;
}

.balance p {
  text-wrap: balance;
}

.text-small,
.text-small p {
  font-size: var(--body-font-size-s);
}

div.lead p,
p.lead {
  font-size: var(--body-font-size-xl);
}

hr {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border: 0;
  border-bottom: 1px solid var(--overlay-background-color);
}

code,
pre,
samp {
  font-family: var(--fixed-font-family);
  font-size: var(--body-font-size-s);
}

code,
samp {
  padding: 0.125em;
}

pre {
  overflow: scroll;
}

header {
  height: var(--nav-total-height);
}

a {
  align-items: center;
}

main p.h6,
main h1.h6,
main h2.h6 {
  color: var(--hero-strong-color);
  letter-spacing: 0.7px;
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--heading-font-size-xxs);
}

main {
  max-width: 100vw;
}

main .block.lead p {
  font-size: var(--body-font-size-xl);
}

/* Mixins carry !important to override the default styles */
.display-block * {
  display: block !important;
}

.no-borders * {
  border: none !important;
  box-shadow: none !important;
}

.no-margins,
.no-margins * {
  margin: 0 !important;
}

.no-margin-bottom,
.no-margin-bottom * {
  margin-bottom: 0 !important;
}

.half-width {
  width: 50%;
}

.quarter-width {
  width: 30% !important;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.padded-block {
  padding: 1rem 0 !important;
}

.dark h6 {
  color: var(--hero-strong-color);
}

.tablet {
  display: none;
}

.desktop {
  display: none;
}

.mobile {
  display: block;
}

.backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  display: none;
  background: var(--transparent-grey-color);
  z-index: 1;
}

.backdrop.visible {
  display: block;
}

.compact {
  max-width: 30rem;
}

main pre {
  background-color: var(--overlay-background-color);
  padding: 1em;
  border-radius: 0.25em;
  overflow-x: auto;
  white-space: pre;
}

.icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: inline-block;
  height: 20px;
  width: 24px;
}

.icon svg {
  height: 100%;
  width: 100%;
}

.icon.icon-sunstar-logo {
  width: 134px;
  height: 20px;
  background-image: url('/icons/sunstar-logo.svg');
}

.icon.brand {
  margin-left: 0.75rem;
  height: 1.5rem;
  width: 1.5rem;
}

.icon.icon-linkedin {
  background-image: url('/icons/linkedin.svg');
}

.icon.icon-spotify {
  background-image: url('/icons/spotify.svg');
  background-size: contain;
}

.icon.icon-apple-podcasts {
  background-image: url('/icons/apple-podcasts.svg');
}

.icon.icon-youtube {
  background-image: url('/icons/youtube.svg');
}

.icon.icon-angle-white-70 {
  background-image: url('/icons/angle-white-70.svg');
  margin-left: 6px;
  height: 22px;
  width: 14px;
  scale: 0.8;
}

.icon.icon-link-black {
  background-image: url('/icons/link-black.svg');
  display: inline-flex;
  height: 18px;
  width: 12px;
}

.icon.icon-link-blue {
  background-image: url('/icons/link-blue.svg');
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.3rem;
}

.icon.icon-link-white {
  background-image: url('/icons/link-white.svg');
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.3rem;
}

.icon.icon-angle-left-blue {
  background-image: url('/icons/angle-left-blue.svg');
  width: 8px;
  height: 12px;
  position: relative;
  margin-right: 4px;
}

.icon.icon-angle-right-blue-bg,
.icon.icon-angle-right-blue {
  background-image: url('/icons/angle-right-blue.svg');
  vertical-align: middle;
  width: 0.5rem;
  height: 0.75rem;
  margin-inline-start: 0.6rem;
}

main table {
  width: 100%;
}

main table tr {
  display: flex;
}

main table td {
  flex-grow: 1;
  flex-basis: 0;
}

main table a {
  display: flex;
  align-items: center;
}

main table a > .icon {
  padding-left: 0.25rem;
}

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

a:any-link,
button {
  color: var(--link-color);
  text-decoration: none;
}

/* buttons */
a.button:any-link,
button {
  box-sizing: border-box;
  min-width: 10rem;
  text-decoration: none;
  padding: var(--button-padding);
  height: 48px;
  border: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  align-content: center;
  font-size: inherit;
  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  justify-content: center;
  line-height: 1;
  border-radius: 2px;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

a.button.primary,
button.primary {
  background: var(--secondary);
  color: var(--white);
}

.button-container a.button:any-link {
  align-items: center;
  background-color: #009b63;
  border-radius: 4px;
  color: var(--white);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: var(--font-weight-regular);
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  min-width: 13.75rem;
  padding: 0 1.75rem;
}

button:disabled {
  opacity: 0.5;
  cursor: unset;
  font-size: var(--body-font-size-m);
}

a.button:focus,
a.button:not(:disabled):hover,
button:focus,
button:not(:disabled):hover {
  background-color: #0092cc;
  cursor: pointer;
}

a.button.secondary,
button.secondary {
  background-color: unset !important;
  border: 2px solid var(--transparent-grey-color-2);
  color: var(--text-color);
}

a.button.secondary:hover,
button.secondary:hover {
  border-color: var(--transparent-grey-color);
  color: var(--text-color);
}

a.button.arrow-down::after,
button.arrow-down::after {
  content: '';
  background-image: url('../../icons/arrow-down-header.svg');
  height: 15px;
  width: 12px;
  background-size: contain;
  background-position: top 5px center;
  background-repeat: no-repeat;
  margin-left: 8px;
}

a.button.min-width-unset {
  min-width: unset;
}

a.button.branded {
  padding-inline: 2.5rem;
}

a.button.outline {
  background-color: unset;
  border: 1px solid var(--secondary);
}

.dark a.button.outline {
  border: 1px solid var(--transparent-white-color-50);
  color: var(--white);
}

a.button.outline:hover {
  opacity: 0.8;
}

.dark a.button.outline:hover {
  border: 1px solid var(--white);
  color: var(--white);
  opacity: 1;
}

main a:hover {
  text-decoration: underline;
}

main input {
  font-size: 1.25rem;
  width: 100%;
  max-width: 50rem;
  display: block;
  margin-bottom: 1rem;
  padding: 0.75rem 0.6rem;
  border-radius: 0.25rem;
  box-sizing: border-box;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  background-color: var(--background-color);
}

main input:hover {
  border: 1px solid var(--text-color);
}

main blockquote {
  font-style: italic;
  margin: 3rem;
  text-indent: -1rem;
  hanging-punctuation: first;
}

main blockquote p::before {
  content: '“';
  line-height: 0;
}

main blockquote p::after {
  content: '”';
  line-height: 0;
}

main .block {
  margin-left: auto;
  margin-right: auto;
}

main .block.border {
  border: 1px solid;
}

main .block.rounded-border {
  border: 1px solid;
  border-radius: 45px;
}

main .block.blue {
  color: var(--secondary);
}

main .block.blue h4 {
  color: var(--secondary);
}

main .block.centered {
  text-align: center;
}

main .block.oral-health {
  text-align: center;
}

/* START Section Styles START */

main .section.flex {
  display: flex;
}

main .section.hero {
  min-height: 37.5rem;
}

main .section.dark.hero {
  padding-block: 3rem;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section .section-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

main .section.auto-top-spacing .section-container {
  margin-top: 4rem !important;
}

main .section .default-content-wrapper:first-of-type > :first-child,
main .section.no-top-margin .default-content-wrapper {
  margin-top: 0 !important;
}

main .section.hero .section-container,
main .section.no-top-margin .section-container {
  margin-top: 0 !important;
  padding: 0 !important;
}

main .section .default-content-wrapper:last-of-type > :last-child {
  margin-bottom: 0;
}

/* section - bold headings */

main .section.bold-headings h1,
main .section.bold-headings h2,
main .section.bold-headings h3,
main .section.bold-headings h4,
main .section.bold-headings h5,
main .section.bold-headings h6 {
  font-weight: var(--font-weight-bold);
}

main .section.text-panel {
  background-color: #f7f5f3;
  margin: 0;
  padding: 4.5rem 3rem;
}

main .section.text-panel > .section-container {
  max-width: 75rem;
  padding: 0;
}

main .section.text-panel .default-content-wrapper {
  max-width: 44rem;
}

main .section.text-panel h2 {
  color: var(--primary);
  font-size: clamp(1.75rem, 2.5vw, 2rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  margin: 0 0 1.5rem;
}

main .section.text-panel p {
  color: #1f2933;
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0;
}

/* section - centered */
.section.centered {
  background-color: #f2f1ee;
  padding: 3.25rem 1rem;
}

.section.centered div {
  align-items: center;
  text-align: center;
  justify-content: center;
}

.section.centered #lead,
#advance,
#translate {
  text-align: left;
  font-size: 25px !important;
}

main .section.centered > .section-container {
  max-width: 1240px;
  margin: 0 auto;
}

main .section.centered > .section-container > .default-content-wrapper > p {
  max-width: 1120px;
  margin: 0 auto 3rem;
  color: var(--primary);
  font-size: clamp(2.15rem, 2.3vw, 3.3rem);
  line-height: 1.2;
  letter-spacing: -0.055em;
  text-align: center;
}

main .section.no-margin-block .section-container {
  margin-block: 0 !important;
}

main .section.healthy-thinking-back-link .section-container {
  border-top: 1px solid var(--overlay-background-color);
  background-color: var(--background-color);
  padding: 1.5rem;
}

main .section.healthy-thinking-back-link a {
  color: var(--link-color);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

main .section.healthy-thinking-back-link a:hover {
  text-decoration: underline;
}

/* section - full-width */
main .section.full-width > .section-container,
main .section.full-width > .tab-item.active > .section-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* section - social */
main .section.social-media {
  padding: 4rem 0;
  background-color: var(--transparent-blue-light-color);
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.social-media .section-container {
  padding: 0 1rem;
}

main .section.social-media .default-content-wrapper svg {
  display: none;
}

main .section.social-media a.button.primary {
  background: unset;
  justify-content: unset;
  align-items: center;
  display: flex;
  line-height: 2.5rem;
  color: var(--light-black);
  font-weight: var(--font-weight-medium);
  font-size: var(--body-font-size-m);
  padding-left: 0;
  padding-right: 0;
  letter-spacing: -0.006rem;
}

main .section.social-media p {
  display: inline-flex;
  width: 50%;
}

main .section.social-media .icon {
  height: 1.5rem;
  width: 1.5rem;
  display: inline-flex;
  margin-right: 1rem;
}

main .section.social-media .icon-youtube {
  background-image: url('../../icons/youtube.svg');
}

main .section.social-media .icon-linkedin {
  background-image: url('../../icons/linkedin.svg');
}

/* section - spaced */
main .section.spaced {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

main .section.spaced h2 {
  font-size: 2rem;
}

main .section.spaced h3 {
  margin: 2rem 0 0.5rem;
}

main .section.spaced p {
  margin-bottom: 2rem;
  letter-spacing: 0;
  line-height: 27.2px;
}

main .section.spaced ul {
  margin-bottom: 4rem;
  padding-inline-start: 19px;
}

main .section.spaced li {
  margin-bottom: 1.5rem;
  line-height: 1;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.spaced > .section-container,
main .section.spaced > .tab-item.active > .section-container {
  max-width: 100%;
  padding: 0;
}

/* section - small narrow */
main .section.small-narrow {
  margin-top: 3rem;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.small-narrow > .section-container,
main .section.small-narrow > .tab-item.active > .section-container {
  padding: 0 1rem;
}

main .section.small-narrow h1 {
  margin-bottom: 2.5rem;
}

main .section.small-narrow h5 {
  margin-bottom: 0.5rem;
}

/* section - narrow */
/* stylelint-disable-next-line no-descending-specificity */
main .section.narrow > .section-container,
main .section.narrow > .tab-item.active > .section-container {
  padding: 0 1rem;
  margin: auto;
  max-width: 42rem;
}

/* section - narrower */
/* stylelint-disable-next-line no-descending-specificity */
main .section.narrower > .section-container,
main .section.narrower > .tab-item.active > .section-container {
  padding: 0 1rem;
  margin: auto;
  margin-block-end: 3rem;
  max-width: 45rem;
}

/* section - narrow/narrower with background image compatibility */
main .section.narrow.section.with-background-image > .section-container,
main .section.narrower.section.with-background-image > .section-container {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-evenly;
  box-sizing: border-box;
}

main .section.narrower-picture.section.with-background-image > picture {
  margin: auto;
  margin-block-end: 3rem;
  max-width: 45rem;
}

main .section.narrower.section.with-background-image > .section-container > .link-wrapper {
  width: 100%;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.static > .section-container,
main .section.static > .tab-item.active > .section-container {
  padding: 0 1rem 2rem;
  margin-bottom: 5rem;
}

/* section - text align left */
main .section.left-align-text h1,
main .section.left-align-text h2,
main .section.left-align-text h3,
main .section.left-align-text h4,
main .section.left-align-text h5,
main .section.left-align-text h6 {
  text-align: left;
}

main .section.static .section-container h1 {
  font-size: var(--heading-font-size-l);
  margin: 3rem 0 2rem;
  color: var(--primary);
  font-weight: var(--font-weight-medium);
}

main .section.static .section-container h2 {
  font-size: var(--heading-font-size-m);
  font-weight: var(--font-weight-medium);
  margin: 4rem 0 1.5rem;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.three-columns-layout .section-container {
  display: flex;
  flex-direction: column;
}

main .section.three-columns-layout .section-container > div {
  max-width: 50%;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.three-columns-layout.with-background-image > picture,
main .section.three-columns-layout.with-static-background-image > picture {
  position: absolute;
  bottom: 0;
}

main .section.border-bottom > .section-container > div:last-of-type {
  border-bottom: 1px solid var(--transparent-grey-light-color);
  padding-bottom: 5rem;
}

main .section.narrower.section.with-background-image > picture {
  margin: auto;
  margin-block-end: 3rem;
  max-width: 45rem;
}

/* section - margin-bottom */
main .section.margin-bottom {
  margin-bottom: 5rem;
}

/* section - no margin-bottom */
main .section.no-margin-bottom {
  margin-bottom: 0;
}

/* section - no margin-top */
main .section.no-margin-top {
  margin-top: 0;
}

/* fixed padding bottom of section-container - 400px */
/* stylelint-disable-next-line no-descending-specificity */
main .section.padding-bottom-400 .section-container {
  padding-bottom: 400px;
}

/* section - highlight */
main .section.highlight {
  background-color: var(--highlight-background-color);
}

/* section - dark-blue */
main .section.dark {
  background-color: var(--primary);
}

main .section.dark.dark-secondary {
  background-color: var(--cyan);
}

main .section.bg-gradient {
  background: linear-gradient(135deg, var(--teal-600), var(--primary), var(--indigo-800));
}

/* section - beau-blue */
main .section.beau-blue {
  background-color: var(--beaublue);
}

/* section - apple-green */
main .section.apple-green {
  background-color: var(--granny-smith-apple);
}

/* section - Alice Blue */
main .section.alice-blue {
  background-color: var(--alice-blue);
}

/* section - apple-caribbean-green gradient */
main .section.apple-caribbean-green {
  background: linear-gradient(to bottom, var(--granny-smith-apple) 28%, var(--caribbean-green) 100%);
}

/* section - light-blue */
main .section.light-blue {
  background-color: var(--transparent-blue-light-color);
}

main .section.bg-oral-health {
  background-color: #022f3d;
}

/* section - bg-primary */
main .section.bg-primary {
  background-color: var(--primary);
  padding-bottom: 1rem;
}

/* Keep the bg-primary styles together */
/* stylelint-disable-next-line no-descending-specificity */
main .section.bg-primary h1,
main .section.bg-primary h2,
main .section.bg-primary h3,
main .section.bg-primary h4,
main .section.bg-primary h5,
main .section.bg-primary h6 {
  color: var(--white);
  padding-top: 3rem;
  margin-bottom: 0;
}

main .section.bg-primary p {
  color: var(--white);
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}

/* section - padded */
/* stylelint-disable-next-line no-descending-specificity */
main .section.padded > .section-container,
main .section.padded > .tab-item.active > .section-container {
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.padded-inline > .section-container,
main .section.padded-inline > .tab-item.active > .section-container {
  padding-inline: 1rem;
  box-sizing: border-box;
}

/* stylelint-disable-next-line no-descending-specificity */
main .block.centered > div {
  margin: auto;
}

main .block.download a::after {
  content: url('../../icons/download.svg');
  position: relative;
  left: 0.3rem;
  top: 0.05rem;
}

/* Section Styles for background images */
.section.with-background-image,
.section.with-static-background-image {
  position: relative;
  overflow: hidden;
}

/* stylelint-disable-next-line no-descending-specificity */
.section.with-background-image > picture,
.section.with-static-background-image > picture {
  display: block;
  width: 100%;
  z-index: -1;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.float-image-right picture {
  float: right;
}

/* stylelint-disable-next-line no-descending-specificity */
.section.with-background-image > picture > img,
.section.with-static-background-image > picture > img {
  display: block;
  object-fit: cover;
  width: 100%;
}

/* stylelint-disable-next-line no-descending-specificity */
.section.with-background-image > .section-container,
.section.with-background-image > .tab-item.active > .section-container {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* stylelint-disable-next-line no-descending-specificity */
.section.with-background-image.align-right > .section-container,
.section.with-background-image.align-right > .tab-item.active > .section-container {
  right: -50%;
}

/* stylelint-disable-next-line no-descending-specificity */
.section.with-background-image.align-center > .section-container {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* stylelint-disable-next-line no-descending-specificity */
.section.with-background-image.align-bottom > .section-container {
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.with-background-image.align-top > .section-container,
main .section.narrow.with-background-image.align-top > .section-container,
main .section.narrower.with-background-image.align-top > .section-container {
  margin-top: 1.5rem;
  top: 0%;
  height: auto;
  left: 50%;
  transform: translate(-50%, 0%);
}

p.button-container,
*.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* section - contact cta */
main .section.contact-cta,
main .section.full-width-cta {
  background-color: #00647a;
  color: var(--white);
  text-align: center;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.contact-cta > .section-container,
main .section.full-width-cta > .section-container {
  align-items: center;
  display: flex;
  justify-content: center;
  max-width: 100%;
  min-height: 28rem;
  padding: 7.5rem 1.5rem;
}

main .section.contact-cta .default-content-wrapper,
main .section.full-width-cta .default-content-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
}

main .section.contact-cta p,
main .section.full-width-cta p {
  color: var(--white);
}

main .section.contact-cta p:not(.button-container),
main .section.full-width-cta p:not(.button-container) {
  font-size: 2rem;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.01em;
  line-height: 1.45;
  margin: 0 0 3.25rem;
  max-width: 47rem;
}

main .section.contact-cta p.button-container,
main .section.full-width-cta p.button-container {
  justify-content: center;
  margin: 0;
}

main .section.contact-cta a.button:any-link,
main .section.full-width-cta a.button:any-link {
  background-color: #ddff3f;
  border-radius: 4px;
  color: #001f2d;
  font-size: 0.875rem;
  font-weight: var(--font-weight-regular);
  height: 2.875rem;
  min-width: 14.75rem;
  padding: 0 2rem;
}

main .section.contact-cta a.button:hover,
main .section.contact-cta a.button:focus,
main .section.full-width-cta a.button:hover,
main .section.full-width-cta a.button:focus {
  background-color: #e5ff66;
  text-decoration: none;
}

main .section.full-width-cta > .section-container {
  min-height: 19.375rem;
  padding: 5.25rem 1.5rem 4.5rem;
}

main .section.full-width-cta p:not(.button-container) {
  font-size: clamp(1.75rem, 2.6vw, 2rem);
  line-height: 1.35;
  margin-bottom: 2.25rem;
  max-width: 50rem;
}

main .section.full-width-cta a.button:any-link {
  font-size: 0.75rem;
  height: 2.125rem;
  min-width: 16.5rem;
}

@media (max-width: 62rem) {
  main .section.contact-cta > .section-container,
  main .section.full-width-cta > .section-container {
    min-height: 22rem;
    padding: 5rem 1.5rem;
  }

  main .section.contact-cta p:not(.button-container),
  main .section.full-width-cta p:not(.button-container) {
    font-size: 1.625rem;
    line-height: 1.4;
    margin-bottom: 2.5rem;
    max-width: 34rem;
  }

  main .section.full-width-cta > .section-container {
    min-height: 18rem;
    padding: 4.5rem 1.5rem;
  }

  main .section.full-width-cta p:not(.button-container) {
    margin-bottom: 2rem;
  }

  main .section.text-panel {
    padding: 3.5rem 1.5rem;
  }
}

@media (max-width: 30rem) {
  main .section.contact-cta > .section-container,
  main .section.full-width-cta > .section-container {
    min-height: 20rem;
    padding: 4rem 1.375rem;
  }

  main .section.contact-cta p:not(.button-container),
  main .section.full-width-cta p:not(.button-container) {
    font-size: 1.375rem;
    margin-bottom: 2rem;
  }

  main .section.contact-cta a.button:any-link,
  main .section.full-width-cta a.button:any-link {
    min-width: 12rem;
  }

  main .section.full-width-cta > .section-container {
    min-height: 17rem;
    padding: 4rem 1.375rem;
  }
}

/* END Section Styles END */

/* START Keyframes START */

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
    display: block;
  }
}

@keyframes fade-out {
  from {
    display: block;
  }

  to {
    opacity: 0;
    display: none;
  }
}

/* END Keyframes END */

@media (min-width: 62rem) {
  :root {
    --nav-top-height: 42px;
    --nav-middle-height: 26px;
    --nav-bottom-height: 52px;
  }

  .mobile {
    display: none;
  }

  .desktop {
    display: none;
  }

  .tablet {
    display: block;
  }

  /* START Section Styles START */

  main .section .section-container {
    max-width: calc(872px + 32px);
    margin-inline: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  main .section.healthy-thinking-back-link .section-container {
    max-width: calc(872px + 32px);
  }

  /* section - bottom-border */
  main .section.bottom-border {
    border-bottom: 1px solid var(--overlay-background-color);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }

  /* section - spaced */
  main .section.spaced h2 {
    font-size: var(--heading-font-size-xl);
  }

  /* section - small narrow */
  main .section.small-narrow > .section-container {
    padding: unset;
  }

  main .section.small-narrow h1 {
    margin-bottom: 3.5rem;
  }

  main .section.small-narrow h5 {
    margin-bottom: 1rem;
  }

  /* section - static */
  main .section.static > .section-container {
    margin-bottom: 7.5rem;
  }

  /* section - narrow */
  /* stylelint-disable-next-line no-descending-specificity */
  main .section.narrow > .section-container,
  main .section.narrow > .tab-item.active > .section-container {
    position: relative;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
    max-width: 54.5rem;
  }

  /* section - narrower */
  /* stylelint-disable-next-line no-descending-specificity */
  main .section.narrower > .section-container,
  main .section.narrower > .tab-item.active > .section-container {
    position: relative;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
    max-width: 45rem;
    margin-block-end: 3rem;
  }

  /* section - narrow/narrower with background image compatibility */
  /* stylelint-disable-next-line no-descending-specificity */
  main .section.narrow.with-background-image > .section-container,
  main .section.narrower.with-background-image > .section-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* section - text align left */
  main .section.left-align-text h1,
  main .section.left-align-text h2,
  main .section.left-align-text h3,
  main .section.left-align-text h4,
  main .section.left-align-text h5,
  main .section.left-align-text h6 {
    text-align: center;
  }

  /* section - margin-bottom */
  main .section.margin-bottom {
    margin-bottom: 7.5rem;
  }

  /* section - static */
  main .section.static .section-container h1 {
    font-size: var(--heading-font-size-xxl);
    margin: 4rem 0 1.5rem;
  }

  main .section.static .section-container h2 {
    font-size: var(--heading-font-size-mxl);
  }

  /* section - social */
  main .section.social-media {
    padding: 5rem 0;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  main .section.social-media .section-container {
    display: flex;
  }

  main .section.social-media .default-content-wrapper {
    width: 100%;
  }

  main .section.social-media a::after {
    content: '';
    height: 0.625rem;
    width: 0.375rem;
    display: inline;
    background-image: url('../../icons/arrow-down-gray.svg');
    background-size: contain;
    margin-left: 0.5rem;
    margin-top: 0.25rem;
    background-repeat: no-repeat;
    transform: rotate(270deg);
  }

  main .section.social-media p {
    display: unset;
  }

  main .section.social-media .embed-wrapper {
    margin-left: 4rem;
    max-width: 18.25rem;
  }

  main .section.social-media .embed {
    margin: unset;
    min-height: unset;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  main .section.spaced > .section-container,
  main .section.spaced > .tab-item.active > .section-container {
    padding: 0 1rem;
  }

  /* section - padded */
  /* stylelint-disable-next-line no-descending-specificity */
  main .section.padded > .section-container,
  main .section.padded > .tab-item.active > .section-container {
    padding: 2rem 0;
  }

  /* section - padded-inline - not applied for wide screens */
  /* stylelint-disable-next-line no-descending-specificity */
  main .section.padded-inline > .section-container,
  main .section.padded-inline > .tab-item.active > .section-container {
    padding-inline: 0;
  }

  /* END Section Styles END */
}

@media (min-width: 77rem) {
  h1 {
    font-size: var(--h1-font-size-desktop);
    margin: 4.375rem 0 2.5rem;
  }

  h2 {
    font-size: 1.8rem;
    margin: 3.5rem 0 2rem;
  }

  h3 {
    font-size: var(--h3-font-size-desktop);
    margin: 2.5rem 0 1rem;
  }

  h4 {
    font-size: var(--h4-font-size-desktop);
    margin: 2rem 0 0.5rem;
  }

  .hero h1,
  .hero h2,
  .hero h3,
  .hero h4 {
    font-size: var(--hero-font-size-desktop);
  }

  .h1 h2,
  .h1 h3,
  .h1 h4,
  .h1 {
    font-size: var(--h1-font-size-desktop);
  }

  .h2 h1,
  .h2 h3,
  .h2 h4,
  .h2 {
    font-size: var(--h2-font-size-desktop);
  }

  .h3 h1,
  .h3 h2,
  .h3 h4,
  .h3 {
    font-size: var(--h3-font-size-desktop);
  }

  .h4 h1,
  .h4 h2,
  .h4 h3 .h4 {
    font-size: var(--h4-font-size-desktop);
  }

  h5 {
    font-size: var(--heading-font-size-xs);
  }

  h6 {
    font-size: var(--heading-font-size-xxs);
  }

  p,
  dl,
  ol,
  ul,
  pre,
  blockquote {
    margin: 0 0 1.5rem;
    padding: 0;
  }

  div.lead p {
    font-size: var(--body-font-size-l);
  }

  main .block.lead p,
  p.lead {
    font-size: var(--body-font-size-xxl);
  }

  ul,
  ol {
    padding: 0 0 0 1.75rem;
  }

  ul li,
  ol li {
    margin: 0.75rem 0;
    padding: 0 0 0 0.5rem;
  }

  body.no-scroll {
    overflow-y: auto;
  }

  .mobile {
    display: none;
  }

  .tablet {
    display: none;
  }

  .desktop {
    display: block;
  }

  .icon.icon-sunstar-logo {
    width: 175px;
    height: 26px;
    display: inline-flex;
  }

  main .section .section-container {
    position: relative;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
  }

  /* Three Column Layout */
  main .section.three-columns-layout .section-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  p.button-container,
  *.button-container {
    display: inline-flex;
    flex-flow: row wrap;
    gap: 1rem;
  }

  main .section .cards *.button-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  main .section.dark.hero {
    padding-block: 6rem;
  }
}