:root {
  --anchor-color: #0000ff;
  --anchor-color-hover: #000;

  --desktop-dropdown-background: #407f8a;
  --desktop-dropdown-background-hover: #2f5d65;

  --app-green: #2C8358;
  --app-slate: #407f8a;

  --image-border-radius: 5px;
}

.reading-width {
  margin-block: auto;
  max-width: 80ch;
}

.teal-button {
  --button-background: #2F5D65;
  --button-text-color: #fff;
  --button-hover-background: #274D54;
  --button-hover-text-color: #fff;
}

.green-button {
  --button-background: var(--app-green);
  --button-text-color: #fff;
  --button-hover-background: #25704B;
  --button-hover-text-color: #fff;
}

.lime-button {
  --button-background: #D3E458;
  --button-text-color: #000;
  --button-hover-background: #D9E86E;
  --button-hover-text-color: #000;
}

.light-border {
  border: 1px solid var(--light-keyline);
}

.page-header, body, html {
  margin: 0 auto !important; /* required because Cognito forms overrides it and messes it up otherwise */
}

:where(.front) .button,
:where(.front) .with-links-as-buttons a {
  --button-padding: .5em 1em;
  min-width: 170px;
}

:where(.front) h1,
:where(.front) h2,
:where(.front) h3,
:where(.front) h4,
:where(.front) h5,
:where(.front) h6 {
  text-align: center;
}

:where(.front) h2 {
  font-size: 2rem;
}

:where(.front .app .cms-block-image) img,
:where(.front .reveal .cms-block-image) img,
:where(.front .app .cms-block-rich-text) img,
:where(.front .reveal .cms-block-rich-text) img {
  border-radius: var(--image-border-radius);
}

.page-header__desktop .page-header__nav {
  font-size: .85rem;
}

.page-header__desktop .page-header__nav .desktop-menu .nav.menu > li > a:before {
  display: none;
}

.page-header__desktop .page-header__nav .desktop-menu .nav.menu > li:hover > a,
.page-header__desktop .page-header__nav .desktop-menu .nav.menu > li > a:hover {
  color: #c3cb28;
}

.page-header__desktop .page-header__nav .desktop-menu .dropdown-menu a:before {
  display: none;
}

.page-header__desktop .page-header__nav .desktop-menu .dropdown-menu li {
  margin: 0;
}

.page-header__desktop .page-header__nav .desktop-menu .dropdown-menu a {
  padding: .5rem 1rem;
}

.mobile-nav .header-tr {
  background: #000;
  color: #fff;
  margin-bottom: 0.2rem;
}

.mobile-nav .header-tr a {
  color: inherit;
  padding: 0.2rem 1rem;
  text-decoration: none;
}

.mobile-nav .header-tr a[href="#modal-search"] i {
  vertical-align: top;
}

.page-footer {
  --dark-gray: #525252;
  background: #C0D1C7;
  color: #000;
  padding: 4rem 0;
}

.page-footer a,
.page-footer a:active,
.page-footer a:focus,
.page-footer a:hover {
  color: inherit;
}

.breadcrumb-and-title {
  margin-bottom: calc(var(--gutter) * 2);
}

.breadcrumb-and-title .breadcrumb-container,
.breadcrumb-and-title .cms-block-breadcrumb {
  margin-bottom: 0;
  text-align: center;
}

.breadcrumb-container .breadcrumbs,
.cms-block-breadcrumb .breadcrumbs {
  padding: 0;
}

.thick-hr {
  --height: 10px;
  background: var(--light-background);
  flex-basis: var(--height); /* for admin */
  height: var(--height);
  overflow: hidden;
}

.split-grid {
  --row-gap: 1rem;
}

.split-grid .divider-element {
  background: url('https://central-emc.s3.amazonaws.com/files/1/logo/logo-icon-divider.png') no-repeat center;
  height: 68px;
  margin-block: var(--row-gap);
}

:where(.front) li {
  margin-bottom: calc(var(--gutter) / 2);
}

.reveal .close-button:hover,
.reveal .close-button:focus,
.reveal .close-button:active {
  background: var(--app-red);
}

.article__date {
  margin-bottom: -0.25rem; /* negate a little bit of title margin */
}

.article__title {
  font-size: 1.4rem;
}

:where(.articles) .article a {
  color: inherit;
  text-decoration: none;
}

/* .article needed to override anchor style */
.article .article__button {
  background: var(--button-background);
  color: var(--button-text-color);
  display: inline-block;
}

.article .article__button:hover,
.article .article__button:active,
.article .article__button:focus {
  background: var(--button-hover-background);
  color: var(--button-hover-text-color);
}

.with-links-as-buttons a {
  background: var(--button-background);
  border-radius: var(--button-radius);
  color: var(--button-text-color);
  display: inline-block;
  font-weight: 600;
  padding: var(--button-padding);
  text-align: center;
  text-decoration: none;
}

.with-links-as-buttons a:hover,
.with-links-as-buttons a:active,
.with-links-as-buttons a:focus {
  background: var(--button-hover-background);
  color: var(--button-hover-text-color);
}

.search-form__in {
  visibility: hidden;
}

.slick-next, .slick-prev {
    height: 2rem;
    width: 2rem;
}
.slick-prev {
  border-radius: 0 4px 4px 0;
}
.slick-next {
  border-radius: 4px 0 0 4px;
}

.cms-block--full-width .slick-prev {
    left: 0;
}
.cms-block--full-width .slick-next {
    right: 0;
}

.accordion-title {
  font-weight: 700;
}

.image-with-overlay {
  --overlay-background: rgba(0, 0, 0, 0.5);
  position: relative;
}

.image-with-overlay .img-caption,
.overlay-caption {
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
}

/* cms already provides overlay; just need animation */
.image-with-overlay .img-wrap::after {
  border-radius: var(--image-border-radius);
  transition: opacity .3s;
}

.image-with-overlay .img-caption {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
  z-index: 2;
}

.icon-boxes {
  --columns: 2;
  --column-gap: 1rem;
  --row-gap: 2rem;
  --box-width: 240px;
  --gutter-padding: var(--column-gap);
  column-gap: var(--column-gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-inline: auto;
  max-width: calc(
    (var(--columns) * var(--box-width)) /* sum of boxes */
    + var(--column-gap) * (var(--columns) - 1) /* sum of gaps */
    + (var(--gutter-padding) * 2) /* gutter padding */
  );
  padding-inline: var(--gutter-padding);
  row-gap: var(--row-gap);
}

.icon-box,
:where(.icon-boxes) > * {
  margin: 0;
  width: calc((100% - (var(--column-gap) * (var(--columns) - 1))) / var(--columns));
}

.icon-box a {
  color: inherit;
  text-decoration: none;
}

.icon-box .img-wrap {
  align-items: center;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

.icon-box img {
  max-width: 160px;
  transition: .25s background;
  width: 100%;
}

.icon-box .img-caption {
  font-size: 1rem;
  margin-top: .8rem;
}

.icon-box a:hover .img-wrap {
  background: #38895A;
}
:root { --body-font-family: Nunito Sans, sans-serif; --heading-font-family: Nunito Sans, sans-serif; }
@media (min-width: 768px) {
.split-grid {
  --row-gap: 3rem;
  --column-gap: 2rem;
}

.split-grid:where(.with-less-gap) {
  --column-gap: 1.5rem;
}

.breadcrumb-and-title {
  margin-bottom: calc(var(--gutter) * 3);
}

.icon-boxes {
  --columns: 3;
}
}
@media (min-width: 1280px) {
.split-grid {
  --row-gap: 4rem;
  --column-gap: 3rem;
}

.split-grid:where(.with-less-gap) {
  --column-gap: 2rem;
}

.breadcrumb-and-title {
  margin-bottom: calc(var(--gutter) * 4);
}

.icon-box .img-caption {
  font-size: 1.25rem;
}
}
@media (min-width: 1440px) {
.split-grid {
  --row-gap: 5rem;
  --column-gap: 4rem;
}

.split-grid:where(.with-less-gap) {
  --column-gap: 2rem;
}
}
.page-header__desktop .site-logo img,
.page-header__desktop .site-logo svg {
width: 290px;
height: 68px;
}

.smaller .page-header__desktop .site-logo img,
.smaller .page-header__desktop .site-logo svg {
width: 290px;
height: 68px;
}

:root {
--body-color: rgb(51, 51, 51);
}
