/*
 * 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 {
  counter-reset: num;

  /* colors */
  --black: #000;
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #eb0000;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --orange-light: #f68d2e;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-300: #ccc;
  --gray-dark: #343a40;
  --primary: #00587c;
  --blue-800: #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;
  --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;
  --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;


  /* Tokens - Colors */

  --surface-primary: var(--blue-800);


  /* fonts */

  --body-font-family: 'Noto Sans', 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: 22px;
  --body-font-size-xl: 20px;
  --body-font-size-l: 18px;
  --body-font-size-m: 16px;
  --body-font-size-s: 14px;
  --body-font-size-xs: 12px;

  /* heading sizes */
  --heading-font-size-xxl: 48px;
  --heading-font-size-xl: 42px;
  --heading-font-size-xmxl: 40px;
  --heading-font-size-mxl: 36px;
  --heading-font-size-l: 32px;
  --heading-font-size-ml: 30px;
  --heading-font-size-m: 28px;
  --heading-font-size-s: 24px;
  --heading-font-size-ms: 20px;
  --heading-font-size-xs: 18px;
  --heading-font-size-mxs: 16px;
  --heading-font-size-xxs: 14px;
  --heading-font-size-xxxs: 12px;

  /* Heading Variables */
  --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: var(--gray-300);
  --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-6040: 60%:40%;
  --split-4060: 40%:60%;
}

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

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

body {
  font-size: var(--body-font-size-m);
  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.25em;
  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(--heading-font-size-mxs);
  margin: 1.5em 0 0.5rem;
}

h4 > div {
  text-align: center;
}

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

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);
}

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

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

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

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

.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);
}

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

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

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

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


/* Mixins carry !important to override the default styles */
.no-borders * {
  border: none!important;
  box-shadow: none!important;
}

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

.no-padding {
  padding: 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: 24px;
  width: 20px;
}

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

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

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

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

.icon.icon-calendar {
  background-image: url("/icons/calendar.svg");
  width: 24px;
  height: 24px;
}

.icon.icon-location {
  background-image: url("/icons/location.svg");
  width: 24px;
  height: 24px;
}

.icon.icon-clock {
  background-image: url("/icons/time.svg");
  width: 24px;
  height: 24px;
}

.icon.icon-ticket {
  background-image: url("/icons/ticket.svg");
  width: 24px;
  height: 24px;
}

.icon.icon-download {
  width: 1rem;
  height: 1rem;
  margin-left: 0.3rem;
}

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

.icon.icon-angle-white-70 {
  margin-left: 0.2rem;
  margin-bottom: 0.2rem;
}

.icon.icon-angle-right-blue-bg {
  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;
}

/* TODO: Remove this once this icon renders correctly */
main table a > .icon-angle-right-blue {
  transform: rotate(180deg);
}

a:any-link {
  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;
  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 {
  background: var(--secondary);
  color: var(--white);
}

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

button:disabled,
button:disabled:hover {
  background-color: var(--overlay-background-color);
  cursor: unset;
}

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

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.border-bottom  {
  border-bottom: 1px solid var(--primary);
  margin-bottom: 2rem;
}

main .block.border-bottom h2 {
  margin: 3rem 0 1rem;
}

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

main .block.left {
  text-align: left;
}

.icon.icon-link-blue {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.3rem;
}

.icon.icon-angle-left-blue {
  width: 1rem;
  height: 1rem;
  top: 0.2rem;
  position: relative;
}

main .section.narrow .default-content-wrapper,
main .section.narrower .default-content-wrapper,
main .section.small-narrow .default-content-wrapper   {
  padding: 0;
}

/* START Section Styles START */

main .section .section-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

main .section.auto-top-spacing .section-container {
  margin-top: 3rem;
}

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

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

/* section - centered */
.section.centered {
  padding-inline: 1rem;
}

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

/* section - large-padded */
main .section.large-padded  > .section-container {
  padding: 4rem 1rem;
}

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

main .section.large-padded h2 {
  margin: 0 0 2rem;
}

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

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

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

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

/* section - no margin-top */
/* stylelint-disable-next-line no-descending-specificity */
main .section.no-margin-top, main .section.no-margin-top .section-container, .block.no-margin-top {
  margin-top: 0;
}

/* section - no margin-bottom */
/* stylelint-disable-next-line no-descending-specificity */
main .section.no-margin-bottom,
main .section.no-margin-bottom > div,
main .section.no-margin-bottom > div.section-container,
.block.no-margin-bottom {
  margin-bottom: 0;
}

.float-right {
  float: right;
}

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

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

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

/* 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.newsroom h4 {
  color: #89d1e1;
}

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

/* section - newsarticle */
main .section.newsarticle div h2 + p {
  color: var(--transparent-grey-color);
  font-size: var(--body-font-size-s);
}

main .section.newsarticle picture {
  text-align: center;
  display: block;
}

main .section.newsarticle .image-collage img {
  width: unset;
}

main .section.newsarticle .image-collage picture + p {
  text-align: center;
}

/* 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-block > .section-container{
  padding: 1rem 0;
}

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


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

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


/* stylelint-disable-next-line no-descending-specificity */
.section.with-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: relative;
  top: 0;
  left: 0;
  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: 0;
  left: unset;
}

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

.section.with-background-image.bit-opacity > picture > img {
  opacity: 0.2;
}

.block.bottom-border {
  border-bottom: 1px solid var(--overlay-background-color);
  margin-bottom: 2rem;
}

/* 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) {
  .mobile {
    display: none;
  }

  .desktop {
    display: none;
  }

  .tablet {
    display: block;
  }

  main .default-content-wrapper {
    padding: 0;
  }

  /* START Section Styles START */

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

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

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

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

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

  /* section - large-padded */
   main .section.large-padded  > .section-container  {
    padding: 5rem 0;
  }

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

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

   /* 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: 0;
    left: 0;
    width: 100%;
  }

  /* END Section Styles END */
}

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

  h1 {
    font-size: var(--h1-font-size-desktop);
    margin: 4.375rem 0 2.5rem;
  }

  h2 {
    font-size: var(--h2-font-size-desktop);
    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;
  }

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

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

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

  .h4 h1, .h4 h2, .h4 h3 {
    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;
  }

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