/*  base-theme.css
 *  -------------------
 *
 *  used to set global variables for prefers light/dark 
 *  only create variables in this file, do not set actual styles
 * 
 *  **love the cascade**
 */
html, .dark-theme, .content-section--primary, .content-section--secondary, .content-section--tertiary, .content-section--base {
  --font-body: acumin-pro, sans-serif;
  --font-heading: "Red Hat Display", sans-serif;
  --bg-base: var(--true-blue-dark);
  --bg-contrast: var(--true-blue-05);
  --bg-contrast-error: var(--sunset);
  --bg-excerpt: var(--true-blue-05);
  --bg-secondary: var(--true-blue);
  --font-awesome-family-name: "Font Awesome 6 Free";
  --bg-tertiary: var(--summer-shade-dark);
  --h1-color: white;
  --h2-color: var(--gold);
  --h3-color: var(--sky);
  --anchor-color: var(--true-blue-05);
  --anchor-visited: var(--sky-35);
  --anchor-hover: var(--gold-35);
  --paragraph-accent: var(--gold);
  --border: solid 1px var(--true-blue-05);
  --border-accent: solid 2px var(--gold);
  --excerpt-text: var(--true-blue-dark);
  --excerpt-text-emphasis: var(--summer-shade-dark);
  --btn-color: var(--sunset);
  --btn-anchor: var(--true-blue-dark);
  --btn-hover: var(--sunset-75);
  --btn-anchor-reverse: white;
  --btn-focus: var(--sunset-90);
  --btn-active: var(--sunset-90);
  --btn-disabled: var(--monsoon);
  --btn-outline: white;
  --btn-outline-anchor: white;
  --btn-outline-hover: var(--true-blue-85);
  --btn-outline-focus: var(--true-blue-85);
  --btn-outline-active: var(--true-blue-85);
  --filter-png: invert(96%) sepia(96%) saturate(17%) hue-rotate(290deg) brightness(104%) contrast(104%);
  --filter-png-opacity: .15;
}

.light-theme {
  --bg-base: white;
  --bg-contrast: var(--true-blue);
  --bg-contrast-error: var(--red-rock);
  --bg-excerpt: var(--true-blue);
  --bg-secondary: var(--true-blue-05);
  --h1-color: var(--true-blue);
  --h2-color: var(--twilight);
  --h3-color: var(--true-blue);
  --anchor-color: var(--true-blue);
  --anchor-visited: var(--twilight-dark);
  --anchor-hover: var(--twilight);
  --paragraph-accent: var(--summer-shade-dark);
  --border: solid 1px black;
  --border-accent: solid 2px var(--twilight);
  --excerpt-text: white;
  --excerpt-text-emphasis: var(--gold);
  --btn-color: var(--sky);
  --btn-anchor: var(--true-blue-dark);
  --btn-hover: var(--sky-35);
  --btn-anchor-reverse: var(--true-blue-dark);
  --btn-focus: var(--sky-50);
  --btn-active: var(--sky-50);
  --btn-disabled: var(--monsoon);
  --btn-outline: var(--true-blue);
  --btn-outline-anchor: var(--true-blue);
  --btn-outline-hover: var(--true-blue-05);
  --btn-outline-focus: var(--true-blue-05);
  --btn-outline-active: var(--true-blue-05);
  --filter-png: invert(96%) sepia(74%) saturate(1847%) hue-rotate(179deg) brightness(112%) contrast(88%);
  --filter-png-opacity: .5;
}

@media (prefers-color-scheme: light) {
  html {
    --bg-base: white;
    --bg-contrast: var(--true-blue);
    --bg-contrast-error: var(--red-rock);
    --bg-excerpt: var(--true-blue);
    --bg-secondary: var(--true-blue-05);
    --h1-color: var(--true-blue);
    --h2-color: var(--twilight);
    --h3-color: var(--true-blue);
    --anchor-color: var(--true-blue);
    --anchor-visited: var(--twilight-dark);
    --anchor-hover: var(--twilight);
    --paragraph-accent: var(--summer-shade-dark);
    --border: solid 1px black;
    --border-accent: solid 2px var(--twilight);
    --excerpt-text: white;
    --excerpt-text-emphasis: var(--gold);
    --btn-color: var(--sky);
    --btn-anchor: var(--true-blue-dark);
    --btn-hover: var(--sky-35);
    --btn-anchor-reverse: var(--true-blue-dark);
    --btn-focus: var(--sky-50);
    --btn-active: var(--sky-50);
    --btn-disabled: var(--monsoon);
    --btn-outline: var(--true-blue);
    --btn-outline-anchor: var(--true-blue);
    --btn-outline-hover: var(--true-blue-05);
    --btn-outline-focus: var(--true-blue-05);
    --btn-outline-active: var(--true-blue-05);
    --filter-png: invert(96%) sepia(74%) saturate(1847%) hue-rotate(179deg) brightness(112%) contrast(88%);
    --filter-png-opacity: .5;
  }
}
html {
  /* global vars from old theme still needed */
  --program-gray: #C2C3C7;
  --gutter: 20px;
  --grid-gap: 20px;
  --small-screen: 500px;
  --medium-screen: 768px;
  --large-screen: 1100px;
  --xl-screen: 1650px;
  /* global vars from old theme used in global header footer */
  --morning-sky-xx-light: #bfdfdf;
  --true-blue-xx-light: #6a81aa;
  --gold-light: #fdcf0f;
  /* end global vars from old theme */
  /* primary color vars from John */
  --true-blue: #003466;
  --true-blue-85: #103763;
  --true-blue-65: #3A5781;
  --true-blue-45: #697DA2;
  --true-blue-05: #E4E7F0;
  --true-blue-dark: #0D1134;
  --gold: #F1b300;
  --gold-75: #FFCB5B;
  --gold-35: #FFE6B0;
  --gold-dark: #FFA719;
  /* secondary color vars from John */
  --twilight: #0066B2;
  --twilight-65: #5E8AC7;
  --twilight-35: #A4B7DF;
  --twilight-dark: #14489E;
  --sky: #009DDC;
  --sky-50: #66B7E6;
  --sky-35: #AED3F0;
  --sky-dark: #0085CA;
  --summer-shade: #00853F;
  --summer-shade-65: #54A471;
  --summer-shade-35: #9EC7A9;
  --summer-shade-dark: #016A31;
  --sunset: #F47722;
  --sunset-90: #F5873A;
  --sunset-75: #F79752;
  --sunset-15: #FEE7d4;
  --sunset-dark: #EA640B;
  --red-rock: #D44827;
  --monsoon: #C3B8B2;
  /* new global variables */
  --white-opacity--65: rgba(255,255,255,.65);
  --btn-primary-color: var(--gold);
  --btn-primary-anchor: var(--true-blue-dark);
  --btn-primary-hover: var(--gold-light);
  --btn-primary-focus: var(--gold-dark);
  --btn-primary-active: var(--gold-dark);
  --btn-primary-outline: var(--true-blue-dark);
  --sticker-shadow: drop-shadow(1px 3px 4px hsl(214 100% 16.5%));
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-base);
  color: var(--bg-contrast);
  margin: 0;
  padding: 0;
  font-size: clamp(0.9375rem, 0.9103rem + 0.087vw, 1rem);
  letter-spacing: 0.5px;
}

body * {
  color: var(--bg-contrast);
}

p {
  padding-bottom: 0.5625rem;
  line-height: 1.5;
}

/* heading styles */
h1, h2, h3, h4, h5, h6, .heading-font {
  font-family: var(--font-heading);
  font-weight: 800;
  font-style: normal;
  line-height: 1.25;
  clear: both;
}

h1, .h1 {
  font-size: clamp(2rem, 1.5652rem + 1.3913vw, 3rem);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  color: var(--h1-color);
}

h2, .heading-color {
  color: var(--h2-color);
  --paragraph-accent: var(--bg-contrast);
  padding-bottom: 0.5rem;
}

h2, .h2 {
  font-size: clamp(1.5rem, 1.2826rem + 0.6957vw, 2rem);
  margin-bottom: 0.5em;
  border-bottom: var(--border-accent);
  padding-top: 2rem;
}
h2:first-child, .h2:first-child {
  padding-top: 0;
  margin-top: 0;
}

h3, .h3 {
  font-size: clamp(1.375rem, 1.3207rem + 0.1739vw, 1.5rem);
  color: var(--h3-color);
  margin-bottom: 0.25em;
}

h4, .h4 {
  font-size: clamp(1.125rem, 1.0707rem + 0.1739vw, 1.25rem);
}

/* link styles */
a {
  color: var(--anchor-color);
}

a:visited {
  color: var(--anchor-visited);
}

a:hover {
  color: var(--anchor-hover);
}

a:focus {
  color: var(--anchor-focus);
}

a:active {
  color: var(--anchor-active);
}

a * {
  color: inherit;
}

/* paragraph styles */
strong {
  color: var(--paragraph-accent);
}

ul, ol {
  list-style-position: outside;
  padding-left: 2rem;
}

li {
  padding-top: 0.75rem;
}

/* media styles */
img {
  max-width: 100%;
  height: auto;
}

/* weird styles */
::-moz-selection {
  background-color: var(--gold);
  color: var(--true-blue-dark);
}
::selection {
  background-color: var(--gold);
  color: var(--true-blue-dark);
}

/* temporary place for table styles */
table {
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
}
table tr {
  height: 2rem;
}
table tr th, table tr td {
  max-width: 30%;
  word-break: normal;
  border: var(--border);
  border-radius: 1px;
  padding: 0.25rem;
}
table tr th {
  font-weight: 700;
}

@media screen and (min-width: 880px) {
  #shadow-global-nav {
    min-height: 8rem;
    display: block;
  }
}

/* only style core wordpress blocks with these styles */
/*  sass/wp-blocks/core/embed.scss
*   adds styles for supported classes from WordPress 'core/embed' block
*   
*   ## NOTES ##
*   
*   ### Only WordPress core should generate markup with these classes ###
*   
*   This build sits in front of wordpress--but it is not a normal WordPress theme.
*   As a result, we want to focus on styling core blocks when required and
*   otherwise will not use these styles. DO NOT use classes and other selectors
*   in your front-end components.
*
*   Start here for details on WordPress core blocks
*   https://developer.wordpress.org/block-editor/reference-guides/core-blocks/
*/
/*  btn.scss
*   adds styles for btn component
*   
*   ## NOTES ##
*   Use to style buttons
*   Variations include default and gold, likely more to come 
*/
.btn, .wp-block-button__link, .btn--blue, .btn--gold {
  background-color: var(--btn-color);
  color: var(--btn-anchor);
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.4rem 3rem 0.5rem 3rem;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  transition: all 100ms ease-out;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn:after, .wp-block-button__link:after, .btn--blue:after, .btn--gold:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--btn-color);
  z-index: -2;
}
.btn:before, .wp-block-button__link:before, .btn--blue:before, .btn--gold:before {
  content: "";
  position: absolute;
  top: -70px;
  left: -20px;
  height: 0%;
  width: 150%;
  background-color: var(--btn-hover);
  transition: all 150ms ease-out;
  z-index: -1;
  transform: rotate(-5deg);
}
.btn:hover, .wp-block-button__link:hover, .btn--blue:hover, .btn--gold:hover {
  color: var(--btn-anchor);
  cursor: pointer;
  transform: unset;
}
.btn:hover:before, .wp-block-button__link:hover:before, .btn--blue:hover:before, .btn--gold:hover:before {
  height: 350%;
  transform: rotate(0deg);
}
.btn:focus, .wp-block-button__link:focus, .btn--blue:focus, .btn--gold:focus {
  color: var(--btn-anchor);
  transform: scale(1.02);
}
.btn:active, .wp-block-button__link:active, .btn--blue:active, .btn--gold:active {
  color: var(--btn-anchor);
  transform: scale(1.02);
}
.btn:visited, .wp-block-button__link:visited, .btn--blue:visited, .btn--gold:visited {
  color: var(--btn-anchor);
}

.btn--gold {
  color: var(--btn-primary-anchor);
}
.btn--gold:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--btn-primary-color);
  z-index: -2;
}
.btn--gold:before {
  content: "";
  position: absolute;
  top: -70px;
  left: -20px;
  height: 0%;
  width: 150%;
  background-color: var(--btn-primary-hover);
  transition: all 150ms ease-out;
  z-index: -1;
  transform: rotate(-5deg);
}
.btn--gold:hover {
  color: var(--btn-primary-anchor);
}
.btn--gold:hover:before {
  height: 350%;
  transform: rotate(0deg);
}
.btn--gold:active {
  transform: scale(1.02);
  color: var(--btn-primary-anchor);
}
.btn--gold:focus {
  transform: scale(1.02);
  color: var(--btn-primary-anchor);
}
.btn--gold:visited {
  color: var(--btn-primary-anchor);
}

.btn--outline, .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: var(--bg-base);
  color: var(--btn-outline-anchor);
  border: 1px solid var(--btn-outline);
}
.btn--outline:after, .wp-block-button.is-style-outline .wp-block-button__link:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-base);
  z-index: -2;
}
.btn--outline:before, .wp-block-button.is-style-outline .wp-block-button__link:before {
  content: "";
  position: absolute;
  top: -70px;
  left: -20px;
  height: 0%;
  width: 150%;
  background-color: var(--btn-outline-hover);
  transition: all 150ms ease-out;
  z-index: -1;
  transform: rotate(-5deg);
}
.btn--outline:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--btn-outline-anchor);
}
.btn--outline:hover:before, .wp-block-button.is-style-outline .wp-block-button__link:hover:before {
  height: 350%;
  transform: rotate(0deg);
}
.btn--outline:focus, .wp-block-button.is-style-outline .wp-block-button__link:focus {
  color: var(--btn-outline-anchor);
  transform: scale(1.02);
}
.btn--outline:active, .wp-block-button.is-style-outline .wp-block-button__link:active {
  color: var(--btn-outline-anchor);
  transform: scale(1.02);
}
.btn--outline:visited, .wp-block-button.is-style-outline .wp-block-button__link:visited {
  color: var(--btn-outline-anchor);
}

.btn--blue {
  color: var(--true-blue-dark);
}
.btn--blue:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--sky);
  z-index: -2;
}
.btn--blue:before {
  content: "";
  position: absolute;
  top: -70px;
  left: -20px;
  height: 0%;
  width: 150%;
  background-color: var(--sky-35);
  transition: all 150ms ease-out;
  z-index: -1;
  transform: rotate(-5deg);
}
.btn--blue:hover {
  color: var(--true-blue-dark);
}
.btn--blue:hover:before {
  height: 350%;
  transform: rotate(0deg);
}
.btn--blue:active {
  transform: scale(1.02);
}
.btn--blue:focus {
  transform: scale(1.02);
}
.btn--blue:visited {
  color: var(--true-blue-dark);
}

/*  sass/wp-blocks/core/buttons.scss
*   adds styles for supported classes from WordPress 'core/buttons' block
*   
*   ## NOTES ##
*   
*   ### Only WordPress core should generate markup with these classes ###
*   
*   This build sits in front of of wordpress--but it is not a normal WordPress theme.
*   As a result, we want to focus on styling core blocks when required and
*   otherwise will not use these styles. DO NOT use classes and other selectors
*   in your front-end components.
*
*   Start here for details on WordPress core blocks
*   https://developer.wordpress.org/block-editor/reference-guides/core-blocks/
*/
.wp-block-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.wp-block-buttons > * {
  flex-basis: auto;
}

/*  sass/wp-blocks/core/embed.scss
*   adds styles for supported classes from WordPress 'core/embed' block
*   
*   ## NOTES ##
*   
*   ### Only WordPress core should generate markup with these classes ###
*   
*   This build sits in front of of wordpress--but it is not a normal WordPress theme.
*   As a result, we want to focus on styling core blocks when required and
*   otherwise will not use these styles. DO NOT use classes and other selectors
*   in your front-end components.
*
*   Start here for details on WordPress core blocks
*   https://developer.wordpress.org/block-editor/reference-guides/core-blocks/
*/
.wp-block-embed {
  margin: 0;
  margin-bottom: 2rem;
}
.wp-block-embed iframe {
  width: 100%;
  height: auto;
}
.wp-block-embed.is-type-video {
  margin-top: 2rem;
}
.wp-block-embed.is-type-video iframe {
  aspect-ratio: 16/9;
}

.wp-block-group__inner-container {
  display: inline-block;
  width: 100%;
}

/*  sass/wp-blocks/core/image.scss
*   adds styles for supported classes from WordPress 'core/image' block
*   
*   ## NOTES ##
*   
*   ### Only WordPress core should generate markup with these classes ###
*   
*   This build sits in front of of wordpress--but it is not a normal WordPress theme.
*   As a result, we want to focus on styling core blocks when required and
*   otherwise will not use these styles. DO NOT use classes and other selectors
*   in your front-end components.
*
*   Start here for details on WordPress core blocks
*   https://developer.wordpress.org/block-editor/reference-guides/core-blocks/
*/
.wp-block-image {
  max-width: 100%;
  margin: 0;
  padding: 0;
  margin-bottom: 2rem;
}
.wp-block-image figcaption {
  font-size: 0.85em;
}

@media screen and (min-width: 40rem) {
  .wp-block-image figure.alignright {
    float: right;
    padding-left: 1rem;
    padding-bottom: 1rem;
    max-width: 70%;
  }
  .wp-block-image figure.alignleft {
    float: left;
    padding-right: 1rem;
    padding-bottom: 1rem;
    max-width: 70%;
  }
}
/*  sass/wp-blocks/core/table.scss
*   adds styles for supported classes from WordPress 'core/table' block
*   
*   ## NOTES ##
*   
*   ### Only WordPress core should generate markup with these classes ###
*   
*   This build sits in front of wordpress--but it is not a normal WordPress theme.
*   As a result, we want to focus on styling core blocks when required and
*   otherwise will not use these styles. DO NOT use classes and other selectors
*   in your front-end components.
*
*   Start here for details on WordPress core blocks
*   https://developer.wordpress.org/block-editor/reference-guides/core-blocks/
*/
.wp-block-table {
  margin-left: unset;
  margin-right: unset;
}

/*  body.scss
*   adds styles for body component
*   
*   ## NOTES ##
*   Use to style background and foreground elements at the <body> level
*/
.body__background, .body__background--opacity-100, .body__background--opacity-50, .body__background--opacity-25 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.15;
  z-index: -1;
  -webkit-mask-image: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0));
          mask-image: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
.body__background--opacity-25 {
  opacity: 0.25;
}
.body__background--opacity-50 {
  opacity: 0.5;
}
.body__background--opacity-100 {
  opacity: 1;
}
.body__background-color-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
  filter: var(--filter-png);
  opacity: var(--filter-png-opacity);
  -webkit-mask-image: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0));
          mask-image: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
@media only screen and (max-width: 50rem) {
  .body__background-color-mask {
    height: 50vh;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
/*  content-section.scss
*   adds styles for content-section component
*   
*   ## NOTES ##
*   Best used for sections of written or visual content that we want
*   to limit in size. Includes a flexbox-based --has-side-nav modifier 
*/
.content-section, .content-section--center-aligned, .content-section__wordpress-content, .content-section--sm, .content-section--md, .content-section--lg, .content-section--xl, .content-section--xxl, .content-section--full, .content-section--has-side-nav {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 75rem;
}

.content-section--has-side-nav {
  position: relative;
}
.content-section--has-side-nav > * {
  flex-grow: 1;
}
.content-section--has-side-nav .content-section__side-nav {
  height: -moz-min-content;
  height: min-content;
  padding: 1rem;
}
.content-section--has-side-nav .content-section__side-nav-content--scroll-y {
  max-height: calc(80svh - 10rem);
  overflow: hidden;
  overflow-y: auto;
}
@media only screen and (min-width: 50rem) {
  .content-section--has-side-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .content-section--has-side-nav .content-section__side-nav {
    order: -1;
    flex-basis: 17rem;
    flex-shrink: 0;
    margin-top: 1.5rem;
    position: sticky;
    top: 10rem;
  }
}
@media only screen and (min-width: 75rem) {
  .content-section--has-side-nav .content-section__side-nav {
    padding: 0rem 1rem 0rem 0rem;
  }
}

.content-section--full {
  max-width: 100%;
}

.content-section--xxl {
  max-width: 120rem;
}

.content-section--xl {
  max-width: 100rem;
}

.content-section--lg {
  max-width: 80rem;
}

.content-section--md {
  max-width: 50rem;
}

.content-section--sm {
  max-width: 35rem;
}

.content-section--big-block {
  padding-top: clamp(3rem, 4vw, 7rem);
  padding-bottom: clamp(3rem, 4vw, 7rem);
}

.content-section__wordpress-content {
  padding-top: 2rem;
  flex-grow: 4;
  flex-basis: 30rem;
}
.content-section__wordpress-content > *:not(.wp-block-image) {
  margin-left: 1rem;
  margin-right: 1rem;
}

.content-section--center-aligned {
  text-align: center;
}

.content-section--primary {
  background-color: var(--true-blue);
  --h3-color: var(--bg-contrast);
}

.content-section--secondary {
  background-color: var(--bg-secondary);
  --h3-color: var(--bg-contrast);
}

.content-section--tertiary {
  background-color: var(--bg-tertiary);
  --h3-color: var(--bg-contrast);
}

.content-section--base {
  background-color: var(--bg-base);
  --h3-color: var(--bg-contrast);
}

/*  detail-content-header.scss
*   adds styles for a content header component
*   
*   ## NOTES ##
*   Component is intended to support titles/excerpts
*   on pages generated internally and via CMS
*/
.detail-content-header, .detail-content-header--xl, .detail-content-header--left-aligned, .detail-content-header--center-aligned, .detail-content-header--highlighted, .detail-content-header--has-background {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  margin-top: 10vw;
}
.detail-content-header__excerpt {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}
.detail-content-header__excerpt p {
  margin: unset;
  padding-bottom: 1rem;
}

.detail-content-header--has-background {
  margin-top: clamp(0rem, 10vw, 6rem);
  padding: 1rem;
}
.detail-content-header--has-background .detail-content-header__excerpt {
  background-color: var(--bg-excerpt);
  padding: 1.5rem;
}
.detail-content-header--has-background .detail-content-header__excerpt p {
  color: var(--excerpt-text);
}
.detail-content-header--has-background .detail-content-header__excerpt__title {
  padding: 1rem;
}
.detail-content-header--has-background .detail-content-header__excerpt strong {
  color: var(--excerpt-text-emphasis);
}

.detail-content-header--highlighted {
  margin-bottom: 3rem;
}
.detail-content-header--highlighted .detail-content-header__title {
  display: inline;
  background-color: var(--gold);
  color: var(--true-blue-dark);
}
.detail-content-header--highlighted .detail-content-header__title::-moz-selection {
  background-color: var(--sky);
  color: var(--true-blue-dark);
}
.detail-content-header--highlighted .detail-content-header__title::selection {
  background-color: var(--sky);
  color: var(--true-blue-dark);
}
.detail-content-header--highlighted .detail-content-header__excerpt {
  margin-top: 3rem;
}
.detail-content-header--highlighted .detail-content-header__excerpt > * {
  display: inline;
  background-color: var(--gold);
  color: var(--true-blue-dark);
}
.detail-content-header--highlighted .detail-content-header__excerpt > *::-moz-selection {
  background-color: var(--sky);
  color: var(--true-blue-dark);
}
.detail-content-header--highlighted .detail-content-header__excerpt > *::selection {
  background-color: var(--sky);
  color: var(--true-blue-dark);
}

.detail-content-header--center-aligned {
  margin-top: 5vw;
}
@media only screen and (min-width: 55rem) {
  .detail-content-header--center-aligned {
    text-align: center;
  }
}

.detail-content-header--left-aligned {
  padding-top: 15rem;
  margin-top: 0;
}
@media only screen and (min-width: 55rem) {
  .detail-content-header--left-aligned {
    text-align: left;
    margin-left: 0;
    padding-top: 10vw;
  }
}

.detail-content-header--xl {
  margin-top: 55vh;
}

.details, details, .details--sidebar-navigation {
  background-color: transparent;
  color: var(--bg-contrast);
  border-top: var(--border);
  border-bottom: var(--border);
}
.details:has(+ .details, + details, + .details--sidebar-navigation), details:has(+ .details, + details, + .details--sidebar-navigation), .details--sidebar-navigation:has(+ .details, + details, + .details--sidebar-navigation) {
  border-bottom: none;
}
.details > *:not(summary), details > *:not(summary), .details--sidebar-navigation > *:not(summary) {
  padding: 0 1rem;
}
.details > *:not(summary) div, details > *:not(summary) div, .details--sidebar-navigation > *:not(summary) div {
  padding: 1rem;
}
.details > ul, details > ul, .details--sidebar-navigation > ul, .details ol, details ol, .details--sidebar-navigation ol {
  padding-top: 0;
  padding-left: 2rem;
  padding-bottom: 2rem;
  margin: 0;
}
.details[open] > summary::after, details[open] > summary::after, [open].details--sidebar-navigation > summary::after {
  transform: rotate(180deg);
}

.details__summary, details summary {
  padding: 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.details__summary strong, details summary strong {
  color: var(--bg-contrast);
}
.details__summary::marker, details summary::marker, .details__summary::-webkit-details-marker, details summary::-webkit-details-marker {
  display: none;
}
.details__summary::after, details summary::after {
  content: "";
  width: 1rem;
  aspect-ratio: 1;
  background-color: var(--bg-contrast);
  -webkit-mask-image: url("/assets/svg/font-awesome/solid/caret-down.svg");
          mask-image: url("/assets/svg/font-awesome/solid/caret-down.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  margin-left: 1em;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.details--sidebar-navigation {
  background-color: var(--bg-base);
  border: var(--border);
  border-radius: 13px;
  line-height: 1.5rem;
  overflow: hidden;
}
.details--sidebar-navigation div:not(summary) {
  padding: 1rem;
}
@media only screen and (max-width: 50rem) {
  .details--sidebar-navigation {
    line-height: 2rem;
  }
}
.details--sidebar-navigation[open] > summary, .details--sidebar-navigation[open] .details_summary {
  border-bottom: var(--border);
  border-radius: 12px 12px 0 0;
}
.details--sidebar-navigation:last-of-type {
  border-bottom: var(--border);
}
.details--sidebar-navigation summary,
.details--sidebar-navigation .details_summary {
  background-color: var(--gold);
  color: var(--true-blue-dark);
  border-radius: 12px;
}
.details--sidebar-navigation summary::after,
.details--sidebar-navigation .details_summary::after {
  width: 1.3rem;
  background-color: var(--true-blue-dark);
  -webkit-mask-image: url("/assets/svg/font-awesome/solid/circle-chevron-down.svg");
          mask-image: url("/assets/svg/font-awesome/solid/circle-chevron-down.svg");
}
.details--sidebar-navigation summary > h2 {
  background-color: var(--gold);
  color: var(--true-blue-dark);
  border-radius: 12px;
  padding: 0.5rem;
  margin: 0;
  border-color: var(--gold);
}
.details--sidebar-navigation summary > h2::after {
  width: 1.3rem;
  background-color: var(--true-blue-dark);
  -webkit-mask-image: url("/assets/svg/font-awesome/solid/circle-chevron-down.svg");
          mask-image: url("/assets/svg/font-awesome/solid/circle-chevron-down.svg");
}
.details--sidebar-navigation [aria-current=page] {
  background-color: var(--bg-secondary);
  display: block;
  box-sizing: border-box;
  position: relative;
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: var(--anchor-color);
  font-weight: 500;
  padding: 0.25rem 2.5rem 0.25rem 2.5rem;
  margin: 0rem -1rem 0rem -2.5rem;
}

.details--open-default-when-big {
  /* I'm just here as a reminder that this class
  *  can be used to open a details tag on load,
  *  but only when the browser is:
  *      wider than 50rem
  *      taller than 35rem
  */
}

/*  nau-card.scss
*   adds styles for a card component
*   
*   ## NOTES ##
*   Card should remain highly flexible and not require very specific structure
*/
.nau-card, .nau-card--has-shadow, .nau-card--md, .nau-card--sm {
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--bg-base);
}
.nau-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}
.nau-card__body {
  padding: 1rem;
}
.nau-card__title {
  margin-top: 0;
  padding-top: 1rem;
}
.nau-card--sm {
  max-width: 20rem;
}
.nau-card--md {
  max-width: 40rem;
}
.nau-card--has-shadow {
  box-shadow: 0 0 0.5rem var(--true-blue-dark);
}

.nau-solid {
  display: inline-block;
  height: 1em;
  width: 1em;
}
.nau-solid::before {
  content: "";
  display: inline-block;
  aspect-ratio: 1;
  height: 1em;
}
.nau-solid::before {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
.nau-solid.nau-award::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/award-black.png");
          mask-image: url("/assets/images/nau-icons/solid/award-black.png");
}
.nau-solid.nau-award-short::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/award-short-black.png");
          mask-image: url("/assets/images/nau-icons/solid/award-short-black.png");
}
.nau-solid.nau-bar-graph::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/bar-graph-black.png");
          mask-image: url("/assets/images/nau-icons/solid/bar-graph-black.png");
}
.nau-solid.nau-beaker::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/beaker-black.png");
          mask-image: url("/assets/images/nau-icons/solid/beaker-black.png");
}
.nau-solid.nau-boba-tea::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/boba-tea-black.png");
          mask-image: url("/assets/images/nau-icons/solid/boba-tea-black.png");
}
.nau-solid.nau-boot::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/boot-black.png");
          mask-image: url("/assets/images/nau-icons/solid/boot-black.png");
}
.nau-solid.nau-briefcase::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/briefcase-black.png");
          mask-image: url("/assets/images/nau-icons/solid/briefcase-black.png");
}
.nau-solid.nau-cactus::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/cactus-black.png");
          mask-image: url("/assets/images/nau-icons/solid/cactus-black.png");
}
.nau-solid.nau-chef-hat::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/chef-hat-black.png");
          mask-image: url("/assets/images/nau-icons/solid/chef-hat-black.png");
}
.nau-solid.nau-clock::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/clock-black.png");
          mask-image: url("/assets/images/nau-icons/solid/clock-black.png");
}
.nau-solid.nau-coffee::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/coffee-black.png");
          mask-image: url("/assets/images/nau-icons/solid/coffee-black.png");
}
.nau-solid.nau-computer::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/computer-black.png");
          mask-image: url("/assets/images/nau-icons/solid/computer-black.png");
}
.nau-solid.nau-constellation::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/constellation-black.png");
          mask-image: url("/assets/images/nau-icons/solid/constellation-black.png");
}
.nau-solid.nau-dna-strand::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/dna-strand-black.png");
          mask-image: url("/assets/images/nau-icons/solid/dna-strand-black.png");
}
.nau-solid.nau-dumbell::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/dumbell-black.png");
          mask-image: url("/assets/images/nau-icons/solid/dumbell-black.png");
}
.nau-solid.nau-flag::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/flag-black.png");
          mask-image: url("/assets/images/nau-icons/solid/flag-black.png");
}
.nau-solid.nau-gears::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/gears-black.png");
          mask-image: url("/assets/images/nau-icons/solid/gears-black.png");
}
.nau-solid.nau-globe::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/globe-black.png");
          mask-image: url("/assets/images/nau-icons/solid/globe-black.png");
}
.nau-solid.nau-grad-cap::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/grad-cap-black.png");
          mask-image: url("/assets/images/nau-icons/solid/grad-cap-black.png");
}
.nau-solid.nau-handshake::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/handshake-black.png");
          mask-image: url("/assets/images/nau-icons/solid/handshake-black.png");
}
.nau-solid.nau-institution::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/institution-black.png");
          mask-image: url("/assets/images/nau-icons/solid/institution-black.png");
}
.nau-solid.nau-justice-hammer::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/justice-hammer-black.png");
          mask-image: url("/assets/images/nau-icons/solid/justice-hammer-black.png");
}
.nau-solid.nau-justice-scale::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/justice-scale-black.png");
          mask-image: url("/assets/images/nau-icons/solid/justice-scale-black.png");
}
.nau-solid.nau-leaf::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/leaf-black.png");
          mask-image: url("/assets/images/nau-icons/solid/leaf-black.png");
}
.nau-solid.nau-lightbulb::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/lightbulb-black.png");
          mask-image: url("/assets/images/nau-icons/solid/lightbulb-black.png");
}
.nau-solid.nau-magnifying-glass::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/magnifying-glass-black.png");
          mask-image: url("/assets/images/nau-icons/solid/magnifying-glass-black.png");
}
.nau-solid.nau-megaphone::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/megaphone-black.png");
          mask-image: url("/assets/images/nau-icons/solid/megaphone-black.png");
}
.nau-solid.nau-microscope::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/microscope-black.png");
          mask-image: url("/assets/images/nau-icons/solid/microscope-black.png");
}
.nau-solid.nau-music-notes::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/music-notes-black.png");
          mask-image: url("/assets/images/nau-icons/solid/music-notes-black.png");
}
.nau-solid.nau-open-book::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/open-book-black.png");
          mask-image: url("/assets/images/nau-icons/solid/open-book-black.png");
}
.nau-solid.nau-paint-pallet::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/paint-pallet-black.png");
          mask-image: url("/assets/images/nau-icons/solid/paint-pallet-black.png");
}
.nau-solid.nau-piggy-bank::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/piggy-bank-black.png");
          mask-image: url("/assets/images/nau-icons/solid/piggy-bank-black.png");
}
.nau-solid.nau-pine::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/pine-black.png");
          mask-image: url("/assets/images/nau-icons/solid/pine-black.png");
}
.nau-solid.nau-pine-cone::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/pine-cone-black.png");
          mask-image: url("/assets/images/nau-icons/solid/pine-cone-black.png");
}
.nau-solid.nau-scroll::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/scroll-black.png");
          mask-image: url("/assets/images/nau-icons/solid/scroll-black.png");
}
.nau-solid.nau-sneaker::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/sneaker-black.png");
          mask-image: url("/assets/images/nau-icons/solid/sneaker-black.png");
}
.nau-solid.nau-stack-book::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/stack-book-black.png");
          mask-image: url("/assets/images/nau-icons/solid/stack-book-black.png");
}
.nau-solid.nau-stethoscope::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/stethoscope-black.png");
          mask-image: url("/assets/images/nau-icons/solid/stethoscope-black.png");
}
.nau-solid.nau-sunflower::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/sunflower-black.png");
          mask-image: url("/assets/images/nau-icons/solid/sunflower-black.png");
}
.nau-solid.nau-target::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/target-black.png");
          mask-image: url("/assets/images/nau-icons/solid/target-black.png");
}
.nau-solid.nau-toothbrush::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/toothbrush-black.png");
          mask-image: url("/assets/images/nau-icons/solid/toothbrush-black.png");
}
.nau-solid.nau-tree-cookie::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/tree-cookie-black.png");
          mask-image: url("/assets/images/nau-icons/solid/tree-cookie-black.png");
}
.nau-solid.nau-trophy::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/trophy-black.png");
          mask-image: url("/assets/images/nau-icons/solid/trophy-black.png");
}
.nau-solid.nau-wren::before {
  -webkit-mask-image: url("/assets/images/nau-icons/solid/wren-black.png");
          mask-image: url("/assets/images/nau-icons/solid/wren-black.png");
}

.nau-color {
  display: inline-block;
  height: 1em;
  width: 1em;
}
.nau-color::before {
  content: "";
  display: inline-block;
  aspect-ratio: 1;
  height: 1em;
}
.nau-color::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.nau-color.nau-aoi-management::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-administration-management.png");
}
.nau-color.nau-aoi-business::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-business.png");
}
.nau-color.nau-aoi-communication::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-communication-languages.png");
}
.nau-color.nau-aoi-justice::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-criminal-justice.png");
}
.nau-color.nau-aoi-counseling::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-education-counseling.png");
}
.nau-color.nau-aoi-technology::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-engineering-technology.png");
}
.nau-color.nau-aoi-sustainability::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-environment-sustainability.png");
}
.nau-color.nau-aoi-healthcare::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-healthcare.png");
}
.nau-color.nau-aoi-hospitality::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-hospitality-tourism.png");
}
.nau-color.nau-aoi-humanities::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-humanities.png");
}
.nau-color.nau-aoi-math::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-math-data-analysis.png");
}
.nau-color.nau-aoi-nursing::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-nursing.png");
}
.nau-color.nau-aoi-parks-rec::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-parks-recreation-planning.png");
}
.nau-color.nau-aoi-science::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-science.png");
}
.nau-color.nau-aoi-sbs::before {
  background-image: url("/assets/images/nau-icons/color/area-interest-social-behavioral-sciences.png");
}

/*  nesting-list.scss
*   adds styles for a list component
*   
*   ## NOTES ##
*   In use to style nested list in side bar navigation
*/
.nesting-list, .nesting-list--padding-bottom, .nesting-list--indent-sm, .nesting-list--indent {
  list-style-type: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
}
.nesting-list--indent {
  margin-left: 1.5rem;
}
.nesting-list--indent-sm {
  margin-left: 1rem;
}
.nesting-list--padding-bottom {
  padding-bottom: 2rem;
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.bg-none {
  position: relative;
}
.bg-topo, .bg-topo--repeat {
  position: relative;
}
.bg-topo::after, .bg-topo--repeat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  height: 100%;
  width: 100%;
  -webkit-mask-image: url("/assets/images/textures/topo-black-reflected.png");
          mask-image: url("/assets/images/textures/topo-black-reflected.png");
  filter: var(--filter-png);
  opacity: 0.1;
  -webkit-mask-size: max(100%, 1600px);
          mask-size: max(100%, 1600px);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: var(--bg-contrast);
}
.dark-theme .bg-topo::after, .dark-theme .bg-topo--repeat::after {
  filter: none;
}
.bg-topo--repeat::after {
  background-repeat: repeat;
}
.bg-bark, .bg-bark--fade, .bg-bark--repeat {
  position: relative;
}
.bg-bark::after, .bg-bark--fade::after, .bg-bark--repeat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  height: 100%;
  width: 100%;
  background-image: url("/assets/images/textures/bark-black-reflected.png");
  filter: var(--filter-png);
  opacity: 0.1;
  background-size: max(100%, 1600px);
  background-repeat: no-repeat;
}
.bg-bark--repeat::after {
  background-repeat: repeat;
}
.bg-bark--fade::after {
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0));
          mask-image: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
.bg-leaves, .bg-leaves--fade, .bg-leaves--repeat {
  position: relative;
}
.bg-leaves::after, .bg-leaves--fade::after, .bg-leaves--repeat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  height: 100%;
  width: 100%;
  background-image: url("/assets/images/textures/leaves-black-reflected.png");
  filter: var(--filter-png);
  opacity: 0.05;
  background-size: max(100%, 1600px);
  background-repeat: no-repeat;
}
.bg-leaves--repeat::after {
  background-repeat: repeat;
}
.bg-leaves--fade::after {
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0));
          mask-image: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.slant--left {
  padding-top: 12rem;
  padding-bottom: 12rem;
  clip-path: polygon(0 8rem, 100% 0%, 100% calc(100% - 8rem), 0% 100%);
}

.slant--right {
  padding-top: 12rem;
  padding-bottom: 12rem;
  clip-path: polygon(0 0, 100% 8rem, 100% 100%, 0% calc(100% - 8rem));
}

.slant--tilt-right {
  padding-top: 12rem;
  padding-bottom: 12rem;
  clip-path: polygon(0 0, 100% 8rem, 100% calc(100% - 8rem), 0% 100%);
}

.slant--tilt-left {
  padding-top: 12rem;
  padding-bottom: 12rem;
  clip-path: polygon(0 8rem, 100% 0%, 100% 100%, 0 calc(100% - 8rem));
}

.slant--top-left {
  padding-top: 12rem;
  clip-path: polygon(0 8rem, 100% 0%, 100% 100%, 0% 100%);
}

.slant--top-right {
  padding-top: 12rem;
  clip-path: polygon(0 0, 100% 8rem, 100% 100%, 0% 100%);
}

.slant--bottom-left {
  padding-bottom: 12rem;
  clip-path: polygon(0 0rem, 100% 0%, 100% 100%, 0% calc(100% - 8rem));
}

.slant--bottom-right {
  padding-bottom: 12rem;
  clip-path: polygon(0 0rem, 100% 0%, 100% calc(100% - 8rem), 0% 100%);
}

.slant--bottom-right-sm {
  padding-bottom: 8rem;
  clip-path: polygon(0 0rem, 100% 0%, 100% calc(100% - 8rem), 0% 100%);
}

.slant-squish-top-margin {
  margin-top: -8.1rem;
}

.slant-squish-bottom-margin {
  margin-bottom: -8.1rem;
}

.p--sm {
  padding: 1rem;
}

.p--md {
  padding: 2rem;
}

.p--lg {
  padding: 3rem;
}

.p--xl {
  padding: 4rem;
}

.p--xxl {
  padding: 6.5rem;
}

.p--xxxl {
  padding: 12rem;
}

.px--sm {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px--md {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px--lg {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px--xl {
  padding-left: 4rem;
  padding-right: 4rem;
}

.px--xxl {
  padding-left: 6.5rem;
  padding-right: 6.5rem;
}

.px--xxxl {
  padding-left: 12rem;
  padding-right: 12rem;
}

.py--sm {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py--md {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py--lg {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py--xl {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py--xxl {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
}

.py--xxxl {
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.pt--sm {
  padding-top: 1rem;
}

.pt--md {
  padding-top: 2rem;
}

.pt--lg {
  padding-top: 3rem;
}

.pt--xl {
  padding-top: 4rem;
}

.pt--xxl {
  padding-top: 6.5rem;
}

.pt--xxxl {
  padding-top: 12rem;
}

.pb--sm {
  padding-bottom: 1rem;
}

.pb--md {
  padding-bottom: 2rem;
}

.pb--lg {
  padding-bottom: 3rem;
}

.pb--xl {
  padding-bottom: 4rem;
}

.pb--xxl {
  padding-bottom: 6.5rem;
}

.pb--xxxl {
  padding-bottom: 12rem;
}

.m--sm {
  margin: 1rem;
}

.m--md {
  margin: 2rem;
}

.m--lg {
  margin: 3rem;
}

.m--xl {
  margin: 4rem;
}

.m--xxl {
  margin: 6.5rem;
}

.m--xxxl {
  margin: 12rem;
}

.mx--sm {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx--md {
  margin-left: 2rem;
  margin-right: 2rem;
}

.mx--lg {
  margin-left: 3rem;
  margin-right: 3rem;
}

.mx--xl {
  margin-left: 4rem;
  margin-right: 4rem;
}

.mx--xxl {
  margin-left: 6.5rem;
  margin-right: 6.5rem;
}

.mx--xxxl {
  margin-left: 12rem;
  margin-right: 12rem;
}

.my--sm {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my--md {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my--lg {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my--xl {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.my--xxl {
  margin-top: 6.5rem;
  margin-bottom: 6.5rem;
}

.my--xxxl {
  margin-top: 12rem;
  margin-bottom: 12rem;
}

.mt--sm {
  margin-top: 1rem;
}

.mt--md {
  margin-top: 2rem;
}

.mt--lg {
  margin-top: 3rem;
}

.mt--xl {
  margin-top: 4rem;
}

.mt--xxl {
  margin-top: 6.5rem;
}

.mt--xxxl {
  margin-top: 12rem;
}

.mb--sm {
  margin-bottom: 1rem;
}

.mb--md {
  margin-bottom: 2rem;
}

.mb--lg {
  margin-bottom: 3rem;
}

.mb--xl {
  margin-bottom: 4rem;
}

.mb--xxl {
  margin-bottom: 6.5rem;
}

.mb--xxxl {
  margin-bottom: 12rem;
}