@charset "UTF-8";
/* Configuration, Mixins, and Functions */
/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	A function to split a string on periods (.) to
	access a SASS map through a familiar syntax.
*/
/*
	Use:
		config("my.path")
*/
/*
	Use:
		pxToRem([int])
*/
/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	Alignment
	Helps us to align the left and right edges of content.
*/
/*
	XS Breakpoint
	Viewport Width <= 39.99rem (639px)
*/
/*
	S Breakpoint
	Viewport Width >= 40rem (640px)
*/
/*
	M Breakpoint
	Viewport Width >= 64rem (1024px)
*/
/*
	L Breakpoint
	Viewport Width >= 90rem (1440px)
*/
/*
	XL Breakpoint
	Viewport Width >= 120rem (1920px)
*/
/*
	Typography
*/
:root {
  --attention-gradient: linear-gradient(180deg, #CF2D10, 10%, #CF1059, #CF1068);
  --red: #CF102E;
  --blue: #10273C;
  --gap-s: 1rem;
  --gap: 2rem;
  --gap-l: 4rem;
}
@media screen and (max-width: 767.99999px) {
  :root {
    --gap-s: 1rem;
    --gap: 1.5rem;
    --gap-l: 2rem;
  }
}
:root {
  --umb-block-grid--areas-column-gap: var(--umb-block-grid--column-gap, 0);
  --umb-block-grid--areas-row-gap: var(--umb-block-grid--row-gap, 0);
}

/* Features, Grid Editors, Block Editors */
:root {
  --bleed: 4rem;
  --copyWidth: 68ch;
  --contentWidth: 68rem;
}
@media screen and (max-width: 60rem) {
  :root {
    --bleed: 1rem;
  }
}

/* 
  Container for block editors
  This class provides a grid context to stack block editors within Umbraco.
*/
.blocks {
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: [full-width-start] minmax(var(--bleed), 1fr) [copy-start] min(var(--contentWidth), 100vw - var(--bleed) * 2) [copy-end] minmax(var(--bleed), 1fr) [full-width-end];
  /* 
    Default block styling
    Blocks are wrapped to max-width, centered, with padding to prevent text from touching the viewport edges.
  */
}
.blocks > * {
  grid-column: full-width;
}
.blocks {
  /*
    Full-width option
    Allows blocks to break out of the wrapper and extend edge to edge across the viewport.
  */
}
.blocks > .-full-width {
  grid-column: full-width;
}
.blocks {
  /*
    Copy-width option
    Restricts the width of the block and center aligns it in the viewport.
  */
}
.blocks > .-copy-width {
  grid-column: copy;
}

/* Integration with Umbraco Grid */
.blocks .umb-block-grid__area-container {
  column-gap: var(--umb-block-grid--column-gap, 0);
  row-gap: var(--umb-block-grid--row-gap, 0);
}

/* Common UI issues. */
main.blocks > .rte {
  box-sizing: border-box;
  width: 100%;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 63.999rem) {
  main.blocks > .rte {
    padding: 0 1rem;
  }
}
@media (min-width: 64rem) {
  main.blocks > .rte {
    padding: 0 2rem;
  }
}

/*
  Aside
  - Includes nonprofit statement and social media links.
*/
aside.header {
  z-index: 100;
  background: #FFFAF8;
  line-height: 1;
  color: rgba(0, 0, 0, 0.5);
}
aside.header > .edge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
aside.header > .edge > div {
  display: flex;
  align-items: center;
}
aside.header > .edge p {
  margin: 0;
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
}
aside.header > .edge ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
aside.header > .edge ul li img {
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  display: block;
  padding: 0.5rem;
  box-sizing: border-box;
}
aside.header > .edge ul li svg {
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  display: block;
  padding: 0.5rem;
  box-sizing: border-box;
  fill: currentColor;
  opacity: 0.6;
}
aside.header > .edge ul li:hover svg {
  opacity: 1;
}

/*
  Header
  - Includes logo and navigation
*/
header.header {
  z-index: 100;
  position: sticky;
  top: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.85);
}
header.header::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  backdrop-filter: blur(16px);
  z-index: -1;
}
header.header > .edge {
  position: static;
  height: 96px;
  display: flex;
  justify-content: space-between;
}
header.header > .edge > a {
  position: absolute;
}
header.header > .edge > a picture {
  display: block;
  font-size: 0;
}
header.header > .edge > a img {
  box-sizing: border-box;
  padding-top: 14px;
  height: 96px;
  width: auto;
}
header.header nav {
  margin-left: auto;
  height: 100%;
}
header.header nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
}
header.header nav > ul > li {
  height: 100%;
  display: flex;
}
header.header nav > ul > li > a {
  font-family: "Fira Sans", "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  color: #29282B;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}
header.header nav > ul > li:hover > a {
  background: #0055A5;
  color: #fff;
}
header.header aside {
  position: absolute;
  inset: 0 0 0 auto;
}
header.header aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
header.header aside ul li {
  height: 100%;
  display: flex;
  align-items: center;
  height: 100%;
  display: flex;
  align-items: center;
}

.edge {
  max-width: 80rem;
  margin: auto;
  padding: 0 1rem;
}

/*
  Dropdown
*/
.has-dropdown {
  position: relative;
}
.has-dropdown > .dropdown {
  position: absolute;
  inset: 100% auto auto 0;
  background-color: #0055A5;
  background-image: url("/assets/ui/header.background.jpg");
  background-position: center center;
  width: max-content;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  border-radius: 0 0 0.8rem 0.8rem;
}
.has-dropdown > .dropdown a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 0.75rem 1rem;
  transition: background-color 0.2s;
}
.has-dropdown > .dropdown a:hover {
  background: rgba(0, 0, 0, 0.4);
}
.has-dropdown:hover > .dropdown {
  opacity: 1;
  pointer-events: all;
}

/*
  Megamenu
*/
@media screen and (min-width: 1025px) {
  .has-megamenu .megamenu {
    position: absolute;
    inset: 100% 0 auto 0;
    width: 100vw;
    background-color: #0055A5;
    opacity: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg, #0055A5, 25%, rgba(0, 85, 165, 0)), url("/assets/ui/header.background.jpg");
    background-size: cover;
    background-position: center center;
  }
  .has-megamenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--columns, 2), 1fr);
    gap: 1rem;
    max-width: 54rem;
    margin: auto;
    padding: 1rem;
  }
  .has-megamenu ul li {
    display: flex;
    border-radius: 6px;
    transition: background-color 0.2s;
    background: rgba(72, 15, 44, 0.18);
    border: 1.5px dashed rgba(255, 255, 255, 0.1);
  }
  .has-megamenu ul li:focus, .has-megamenu ul li:focus-within, .has-megamenu ul li:hover {
    background: rgba(0, 0, 0, 0.75);
  }
  .has-megamenu ul li a {
    flex: 1;
    outline: none;
    display: block;
    padding: 1rem;
  }
  .has-megamenu:focus .megamenu, .has-megamenu:focus-within .megamenu, .has-megamenu:hover .megamenu {
    opacity: 1;
    pointer-events: all;
  }
  .has-megamenu a {
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: bold;
    font-family: "Fira Sans", sans-serif;
  }
  .has-megamenu a > span {
    font-family: "Open Sans", sans-serif;
    display: block;
    margin-top: 0.375rem;
    font-size: 1rem;
    font-weight: 300;
  }
}

/*
  Social Media Links
*/
a.facebook {
  color: #0866FF;
}
a.twitter {
  color: #000000;
}
a.linkedin {
  color: #0A66C2;
}
a.instagram {
  color: #E4405F;
}
a.youtube {
  color: red;
}

/* 
  Mobile 
*/
@media screen and (min-width: 1025px) {
  header.header .hamburger {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  aside.header {
    display: none;
  }
  header.header {
    background: #fff;
  }
  header.header > .edge {
    height: 66px;
  }
  header.header > .edge > a img {
    padding-top: 10px;
    height: 66px;
    box-sizing: border-box;
  }
  header.header .hamburger {
    position: fixed;
    top: 0;
    right: 0;
    height: 66px;
    width: 66px;
    outline: none;
    appearance: none;
    border: none;
    background: transparent;
    padding: 1rem;
    color: #fff;
    mix-blend-mode: difference;
  }
  header.header nav {
    box-sizing: border-box;
    position: fixed;
    inset: 0 0 0 auto;
    width: 100%;
    max-width: 420px;
    background: var(--blue);
    margin: 0;
    height: auto;
    scrollbar-width: none;
    overflow-y: auto;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
    padding-top: 66px;
    transition: transform 0.375s ease-in-out;
    transform: translateX(100%);
  }
  header.header nav.-active {
    transform: none;
  }
  header.header nav > ul {
    flex-direction: column;
    height: auto;
  }
  header.header nav > ul > li {
    height: auto;
    flex-direction: column;
  }
  header.header nav > ul > li > a {
    display: none;
  }
  header.header nav .megamenu {
    display: block;
    opacity: 1;
    background-image: none;
    position: relative;
  }
  header.header nav .megamenu .edge {
    padding: 0;
  }
  header.header nav .megamenu li {
    list-style: none;
  }
  header.header nav .megamenu a {
    display: block;
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    font-family: "Fira Sans", "Open Sans", sans-serif;
    color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
  }
  header.header nav .megamenu a span {
    display: none;
  }
}
footer.footer {
  color: #fff;
  padding: 4rem 0 4rem 0;
  background-size: cover;
  background-color: #0057AB;
  background-image: linear-gradient(180deg, #0055A5, 25%, rgba(0, 85, 165, 0)), url("/assets/ui/footer.background.jpg");
}
footer.footer a {
  color: #fff;
}
footer.footer hr {
  outline: none;
  opacity: 0.25;
  width: 100%;
  margin: 2rem 0;
}
footer.footer .edge {
  display: flex;
}
footer.footer nav {
  position: relative;
  display: flex;
  align-items: center;
}
footer.footer nav img {
  position: absolute;
  inset: 0 0 0 0;
  width: auto;
  height: 100%;
  transform: translateX(-15%);
  pointer-events: none;
  object-fit: contain;
  z-index: 0;
}
footer.footer nav ul {
  flex-direction: column;
}
footer.footer nav a {
  display: block;
  font-family: "Fira Sans", "Open Sans", sans-serif;
  font-size: 44px;
  line-height: 1.275;
  text-decoration: none;
  opacity: 0.825;
  transition: opacity 0.375s ease-in-out;
  padding-left: 4rem;
}
footer.footer nav a:hover, footer.footer nav a:focus, footer.footer nav a.-active {
  opacity: 1;
}
footer.footer .contactOptions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-sizing: border-box;
  padding: 2rem;
  max-width: 366px;
  background: #004183;
  border: 5px solid rgba(255, 255, 255, 0.25);
  margin-left: auto;
}
footer.footer .contactOptions hr, footer.footer .contactOptions p {
  margin: 0;
}
footer.footer .contactOptions ul {
  display: flex;
  gap: 1rem;
  font-size: 0;
  justify-content: center;
}
footer.footer aside {
  margin-left: auto;
}
footer.footer aside li + li a {
  margin-left: 1rem;
}

@media screen and (max-width: 1024px) {
  footer.footer nav {
    display: none;
  }
  footer.footer .contactOptions {
    margin: auto;
  }
  footer.footer .edge {
    flex-direction: column;
  }
  footer.footer .copyright {
    text-align: center;
  }
  footer.footer aside {
    margin: 10px auto 0 auto;
  }
}
footer.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

footer.footer svg {
  width: 2rem;
  height: 2rem;
  color: #fff;
  fill: currentColor;
  display: block;
}

.breadcrumbs {
  margin: 0;
  padding: 0;
  display: block;
}
.breadcrumbs li {
  display: inline-block;
}
.breadcrumbs li + li {
  margin-left: 0.5rem;
}
.breadcrumbs li + li:before {
  content: "❯";
  padding-right: 0.5rem;
}
.breadcrumbs a {
  color: var(--blue);
}

/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	Alignment
	Helps us to align the left and right edges of content.
*/
/*
	XS Breakpoint
	Viewport Width <= 39.99rem (639px)
*/
/*
	S Breakpoint
	Viewport Width >= 40rem (640px)
*/
/*
	M Breakpoint
	Viewport Width >= 64rem (1024px)
*/
/*
	L Breakpoint
	Viewport Width >= 90rem (1440px)
*/
/*
	XL Breakpoint
	Viewport Width >= 120rem (1920px)
*/
/*
	Typography
*/
/*
	A function to split a string on periods (.) to
	access a SASS map through a familiar syntax.
*/
/*
	Use:
		config("my.path")
*/
/*
	Use:
		pxToRem([int])
*/
.banner {
  position: relative;
  margin-top: -3rem;
}

.banner > img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-top: 6rem solid transparent;
  object-fit: cover;
  object-position: center;
}

.banner > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  width: 24rem;
  font-family: "Fira Sans", "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 44px;
  padding: 1.75rem;
  text-align: right;
  border-left: 1.25rem solid white;
  border-right: 1.25rem solid white;
  border-top: 1.25rem solid white;
}

.banner > div svg,
.banner > div img,
.banner > div lottie-player {
  width: 100%;
  height: auto;
  opacity: 0.16;
  flex-grow: 0;
  flex: none;
}

.banner > div p {
  margin: 0;
}

.banner > div img + p {
  margin-top: 2rem;
}

.banner > div a,
.banner > div button {
  margin-top: 2rem;
}

.banner.-primary > div {
  background: linear-gradient(180deg, #CF2D10, #CF1059, #CF1068);
  color: #fff;
}

.banner.-secondary > div {
  background: linear-gradient(180deg, #0055A5, #003ea4, #023185);
  color: #fff;
}

@media screen and (max-width: 80rem) {
  .banner.-left > div {
    margin-left: 0;
    border-left: 0;
  }
  .banner.-left > img {
    padding-left: 24rem;
  }
}
@media screen and (min-width: 80.00001rem) {
  .banner.-left {
    display: flex;
    justify-content: flex-start;
  }
  .banner.-left > div {
    margin-left: 10rem;
  }
}
@media screen and (max-width: 80rem) {
  .banner.-right > div {
    margin-left: auto;
    border-right: 0;
  }
  .banner.-right > img {
    padding-right: 24rem;
  }
}
@media screen and (min-width: 80.00001rem) {
  .banner.-right {
    display: flex;
    justify-content: flex-end;
  }
  .banner.-right > div {
    margin-right: 10rem;
  }
}
@media screen and (max-width: 80rem) {
  .banner.-center > div {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 80.00001rem) {
  .banner.-center > div {
    margin-left: calc(50vw - 50%);
  }
}
@media (max-width: 63.999rem) {
  .banner {
    overflow: hidden;
  }
  .banner > div {
    padding: 1rem;
    width: min-content;
    border: none;
    margin-top: -100%;
  }
  .banner > div lottie-player {
    width: 200px;
    margin: auto;
  }
  .banner > img {
    aspect-ratio: 10/14;
    position: relative;
    padding: 0 !important;
    height: auto;
    width: 100%;
  }
  .banner .heading {
    font-size: 1.5rem;
  }
}
/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	A function to split a string on periods (.) to
	access a SASS map through a familiar syntax.
*/
/*
	Use:
		config("my.path")
*/
/*
	Use:
		pxToRem([int])
*/
/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	Alignment
	Helps us to align the left and right edges of content.
*/
/*
	XS Breakpoint
	Viewport Width <= 39.99rem (639px)
*/
/*
	S Breakpoint
	Viewport Width >= 40rem (640px)
*/
/*
	M Breakpoint
	Viewport Width >= 64rem (1024px)
*/
/*
	L Breakpoint
	Viewport Width >= 90rem (1440px)
*/
/*
	XL Breakpoint
	Viewport Width >= 120rem (1920px)
*/
/*
	Typography
*/
.card {
  display: flex;
  align-items: center;
  max-width: 1024px;
  margin: auto;
}
.card .copy,
.card .media {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
}
.card > .copy {
  padding: 2.5rem;
  background: #fff;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.16);
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.card > .copy::before {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  inset: 2.5rem 2.5rem 0 0;
  transform: translate(-12px, 12px);
  background: var(--attention-gradient);
}
.card > .copy::after {
  content: "";
  position: absolute;
  z-index: 2;
  display: block;
  inset: 0;
  background: white;
}
.card > .copy > * {
  position: relative;
  z-index: 3;
}
.card.-secondary > .copy::before {
  background: var(--blue);
}
.card > .media {
  align-self: stretch;
  position: relative;
  margin-left: -6rem;
  z-index: 0;
}
.card > .media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card > .media .media-overlay {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: background 0.455s ease-in-out;
}
.card > .media .media-overlay:hover {
  background: rgba(0, 0, 0, 0.2);
}
.card > .media .overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card.-reversed .copy {
  order: 1;
}
.card.-reversed .copy::before {
  inset: 2.5rem 0 0 2.5rem;
  transform: translate(12px, 12px);
}
.card.-reversed .media {
  order: 0;
  margin-left: unset;
  margin-right: -6rem;
}
.card.-video .media {
  cursor: pointer;
}

@media (max-width: 63.999rem) {
  .card {
    flex-direction: column;
  }
  .card > .copy {
    order: 1;
    margin: 2rem;
  }
  .card > .media {
    order: 0;
    margin: 0 0 -50% 0;
  }
  .card > .media img {
    aspect-ratio: 1/1;
    height: auto;
  }
  .card.-video > .copy {
    margin: 1.5rem;
  }
  .card.-video > .media {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    margin: unset;
  }
}
/*
	Applies rotation to the copy and media section.
	This doesn't look good at smaller breakpoints so we only target M and above.
*/
@media (min-width: 64rem) {
  .card.-rotation {
    transform: rotate(-1deg);
  }
  .card.-rotation > .media {
    transform: rotate(2deg);
  }
  .card.-rotation.-reversed {
    transform: rotate(1deg);
  }
  .card.-rotation.-reversed > .media {
    transform: rotate(-2deg);
  }
}
.blendBackgrounds {
  pointer-events: none;
  position: relative;
  margin-top: -4rem;
  height: 6rem;
  background: linear-gradient(180deg, var(--color1), var(--color2), var(--color3));
}

.hero, .hero .edge, .hero .media {
  position: relative;
}

@media screen and (min-width: 1024px) {
  .hero {
    width: 100%;
    height: 100vh;
    max-height: 52rem;
    overflow: hidden;
    background: #FFFAF8;
  }
  .hero .edge {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero .media {
    position: absolute;
    inset: 0 0 auto 20rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, 17%);
    gap: 1rem;
    justify-content: flex-end;
  }
  .hero .media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero .media::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #FFFAF8 8%, rgba(255, 250, 248, 0.4901960784) 40%, rgba(255, 250, 248, 0.4901960784) 60%, #FFFAF8 94%);
  }
  .hero .copy {
    max-width: 34rem;
    z-index: 2;
  }
  .hero .copy .heading {
    position: relative;
  }
  .hero .copy .heading::before {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0 auto 0 -20px;
    width: 10px;
    background: #E51937;
  }
  .hero .lottie {
    position: absolute;
    z-index: 1;
    width: 45%;
    height: 45%;
    right: 15%;
  }
}
@media screen and (max-width: 1023.99999px) {
  .hero .edge {
    display: flex;
    flex-direction: column;
  }
  .hero .edge .media {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-height: 100vh;
    overflow: hidden;
    opacity: 0.5;
    z-index: 0;
  }
  .hero .edge .media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1/1;
  }
  .hero .edge .copy {
    order: 1;
    z-index: 1;
    background: #fff;
    padding: 1rem;
    border-radius: 1rem 1rem 0 0;
  }
  .hero .edge .lottie {
    margin: 5vh auto;
    width: 20rem;
    height: 20rem;
    order: 0;
  }
}
@media screen and (max-width: 640px) {
  .hero .edge .lottie {
    height: 16rem;
  }
}
@media screen and (max-width: 480px) {
  .hero .edge .media {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
}
/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	Alignment
	Helps us to align the left and right edges of content.
*/
/*
	XS Breakpoint
	Viewport Width <= 39.99rem (639px)
*/
/*
	S Breakpoint
	Viewport Width >= 40rem (640px)
*/
/*
	M Breakpoint
	Viewport Width >= 64rem (1024px)
*/
/*
	L Breakpoint
	Viewport Width >= 90rem (1440px)
*/
/*
	XL Breakpoint
	Viewport Width >= 120rem (1920px)
*/
/*
	Typography
*/
/*
	A function to split a string on periods (.) to
	access a SASS map through a familiar syntax.
*/
/*
	Use:
		config("my.path")
*/
/*
	Use:
		pxToRem([int])
*/
hh-carousel {
  display: block;
  position: relative;
  width: 100%;
  min-height: 400px;
  padding: 0 0 0 5rem;
  overflow-x: hidden;
  box-sizing: border-box;
}
hh-carousel > p {
  max-width: 40rem;
  max-width: 66ch;
}
hh-carousel .stage {
  display: grid;
  grid-auto-flow: column;
  gap: 2.5rem;
  padding: 0 5rem 0 0;
}
hh-carousel .stage > article {
  width: 450px;
}
hh-carousel .stage > article img {
  width: 100%;
  height: auto;
}
hh-carousel .ui .next, hh-carousel .ui .prev {
  cursor: pointer;
}
hh-carousel .ui .next {
  position: absolute;
  width: 4rem;
  height: 4rem;
  background: linear-gradient(180deg, #CF2D10, 10%, #CF1059, #CF1068);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 50% 0 auto auto;
  transform: rotate(-90deg);
}
hh-carousel .ui .next svg {
  display: block;
  width: 3rem;
  height: 3rem;
  color: #fff;
}
hh-carousel .ui .next svg path {
  stroke: currentColor !important;
  fill: currentColor !important;
}
hh-carousel .ui .prev {
  position: absolute;
  width: 4rem;
  height: 4rem;
  background: linear-gradient(180deg, #CF2D10, 10%, #CF1059, #CF1068);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 50% auto auto -5rem;
  transform: rotate(90deg);
}
hh-carousel .ui .prev svg {
  display: block;
  stroke: currentColor;
  fill: currentColor;
  width: 3rem;
  height: 3rem;
}
hh-carousel .ui .prev svg path {
  stroke: currentColor !important;
  fill: currentColor !important;
}

hh-carousel article.location img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 1rem;
}
hh-carousel article.location:nth-child(2n) {
  margin-top: 4rem;
}
hh-carousel article.location p {
  max-width: 16rem;
  line-height: 1.4;
}
hh-carousel article.location p + p {
  margin-top: 1rem;
}
hh-carousel article.location p a {
  text-decoration: none;
  color: var(--red);
}

hh-carousel article.staff {
  width: 360px;
  perspective: 1000px;
}
hh-carousel article.staff:nth-child(2n) {
  margin-top: 4rem;
}
hh-carousel article.staff .contact {
  width: 360px;
  height: 540px;
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
hh-carousel article.staff .contact .front, hh-carousel article.staff .contact .back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  background: var(--blue);
}
hh-carousel article.staff .contact .back {
  display: flex;
  flex-direction: column;
  transform: rotateY(180deg);
  color: #fff;
  padding: 2rem;
  box-sizing: border-box;
  text-align: center;
}
hh-carousel article.staff .contact .back svg,
hh-carousel article.staff .contact .back img {
  max-width: 200px;
  margin: auto;
  display: block;
}
hh-carousel article.staff:hover .contact {
  transform: rotateY(180deg);
}
hh-carousel article.staff img {
  display: block;
}

@media (max-width: 63.999rem) {
  hh-carousel {
    padding: 0 1rem;
  }
  hh-carousel .stage {
    padding: 0;
  }
  hh-carousel article.staff {
    text-align: center;
    width: calc(100vw - 2rem);
  }
  hh-carousel article.staff .contact {
    width: calc(100vw - 2rem);
    height: auto;
    aspect-ratio: 6/9;
  }
  hh-carousel article.staff:nth-child(2n) {
    margin-top: 0;
  }
  hh-carousel .ui .next {
    inset: 50% -1rem auto auto;
  }
  hh-carousel .ui .prev {
    inset: 50% auto auto -1rem;
  }
}

/*
	Dual Layer Slider Component
*/
hh-slider {
  display: block;
  position: relative;
  width: 100%;
  /*
    Contain
    - Sets a max width to limit how far it stretches.
  */
}
hh-slider.-contain {
  max-width: 1440px;
  margin: auto;
}
hh-slider {
  /*
  	Focus
  	- Helper for us to hide the overflow.
  	- Acts as a window to see the appropriate "scene" in our sequence.
  */
}
hh-slider .focus {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
hh-slider {
  /*
  	Sequenced
  	- Acts as our staging area for "scenes".
  	- "Scenes" are the immediate children & should us the <section> tag.
  */
}
hh-slider .sequenced {
  height: 100%;
  font-size: 0;
  white-space: nowrap;
  transition: all ease-out 0.655s;
}
hh-slider .sequenced > section {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  white-space: normal;
}
hh-slider {
  /*
  	Background
  	- Always set the background image to `cover`.
  */
}
hh-slider .bg section {
  height: 100%;
  background-size: cover;
  background-position: center center;
}
hh-slider {
  /*
  	Foreground
  	- Add padding to avoid run-in with the viewport.
  */
}
hh-slider .fg {
  box-sizing: border-box;
}
hh-slider .fg .tagline {
  background: var(--attention-gradient);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  margin-bottom: 0.25rem;
}
hh-slider .fg hr {
  height: 2px;
  border: none;
  border-radius: 2px;
  outline: none;
  margin: 1rem 0;
  background: #D8E5F1;
}
hh-slider {
  /*
  	Pagination
  	- Style page indicators.
  	- Style the next indicator.
  */
}
hh-slider .pagination {
  font-size: 0;
  display: flex;
  justify-content: flex-end;
}
hh-slider .pagination > span {
  font-size: 1rem;
  color: #fff;
  mix-blend-mode: difference;
  background-blend-mode: difference;
  line-height: 44px;
  display: inline-block;
  margin-right: 1rem;
  backface-visibility: hidden;
}
hh-slider .pagination a {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  vertical-align: top;
}
hh-slider .pagination .page:before {
  content: "";
  display: block;
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  left: 14px;
  border-radius: 50%;
  background: #8E8E8E;
}
hh-slider .pagination .page.-active:before, hh-slider .pagination .page:focus:before {
  background: var(--attention-gradient);
}
hh-slider {
  /*
  	UI Design
  	- For screens between 0 to 799px wide.
  */
}
@media screen and (max-width: 799px) {
  hh-slider .bg {
    aspect-ratio: 4/3;
    height: auto;
  }
  hh-slider .fg {
    padding: 2rem 1rem;
    position: relative;
  }
  hh-slider .pagination {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    text-align: center;
  }
}
hh-slider {
  /*
  	UI Design
  	- For screens greater than 800px wide.
  */
}
@media screen and (min-width: 800px) {
  hh-slider {
    overflow: hidden;
    display: flex;
    aspect-ratio: 16/9;
  }
  hh-slider .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  hh-slider .fg {
    align-self: flex-end;
    position: relative;
    width: 400px;
    transform: translate(max((100vw - 1440px) / 2, 48px), -48px);
    background: #fff;
    box-shadow: 3px 4px 15px -6px #000;
  }
  hh-slider .fg .sequenced > section {
    box-sizing: border-box;
    max-height: 400px;
    overflow-y: auto;
  }
  hh-slider .fg .tagline {
    padding: 2rem 2rem 0 2rem;
  }
  hh-slider .fg .sequenced > section {
    padding: 0 2rem;
  }
  hh-slider .pagination {
    padding: 1rem 0;
    text-align: right;
  }
}
hh-slider .next, hh-slider .prev {
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  background: linear-gradient(180deg, #CF2D10, 10%, #CF1059, #CF1068);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
hh-slider .next svg, hh-slider .prev svg {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
}
hh-slider .next svg path, hh-slider .prev svg path {
  stroke: currentColor !important;
  fill: currentColor !important;
}
hh-slider .next lottie-player {
  transform: rotate(-90deg);
}
hh-slider .prev lottie-player {
  transform: rotate(90deg);
}

body .html-block iframe {
  display: block;
  max-width: 100%;
  margin: auto;
}

/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	Alignment
	Helps us to align the left and right edges of content.
*/
/*
	XS Breakpoint
	Viewport Width <= 39.99rem (639px)
*/
/*
	S Breakpoint
	Viewport Width >= 40rem (640px)
*/
/*
	M Breakpoint
	Viewport Width >= 64rem (1024px)
*/
/*
	L Breakpoint
	Viewport Width >= 90rem (1440px)
*/
/*
	XL Breakpoint
	Viewport Width >= 120rem (1920px)
*/
/*
	Typography
*/
/*
	A function to split a string on periods (.) to
	access a SASS map through a familiar syntax.
*/
/*
	Use:
		config("my.path")
*/
/*
	Use:
		pxToRem([int])
*/
/*
	Spacers
*/
.spacer {
  width: 100%;
}
.spacer.-size\:xs {
  height: 0.5rem;
}
@media (min-width: 64rem) {
  .spacer.-size\:xs {
    height: 1rem;
  }
}
@media (min-width: 90rem) {
  .spacer.-size\:xs {
    height: 2rem;
  }
}
.spacer.-size\:s {
  height: 1rem;
}
@media (min-width: 64rem) {
  .spacer.-size\:s {
    height: 2rem;
  }
}
@media (min-width: 90rem) {
  .spacer.-size\:s {
    height: 4rem;
  }
}
.spacer.-size\:m {
  height: 2rem;
}
@media (min-width: 64rem) {
  .spacer.-size\:m {
    height: 4rem;
  }
}
@media (min-width: 90rem) {
  .spacer.-size\:m {
    height: 6rem;
  }
}
.spacer.-size\:l {
  height: 3rem;
}
@media (min-width: 64rem) {
  .spacer.-size\:l {
    height: 6rem;
  }
}
@media (min-width: 90rem) {
  .spacer.-size\:l {
    height: 8rem;
  }
}
.spacer.-size\:xl {
  height: 6rem;
}
@media (min-width: 64rem) {
  .spacer.-size\:xl {
    height: 8rem;
  }
}
@media (min-width: 90rem) {
  .spacer.-size\:xl {
    height: 10rem;
  }
}

.rte {
  max-width: 70ch;
}
main > .rte, main > .chapter > .rte, .container > .rte {
  margin: auto;
}

.video {
  position: relative;
  width: 100%;
  max-width: 1024px;
  aspect-ratio: 16/9;
  margin: auto;
}
.video::before {
  content: "";
  position: absolute;
  display: block;
  inset: 2.5rem 2.5rem 0 0;
  transform: translate(-12px, 12px);
  background: var(--attention-gradient);
}
.video video,
.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	A function to split a string on periods (.) to
	access a SASS map through a familiar syntax.
*/
/*
	Use:
		config("my.path")
*/
/*
	Use:
		pxToRem([int])
*/
/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	Alignment
	Helps us to align the left and right edges of content.
*/
/*
	XS Breakpoint
	Viewport Width <= 39.99rem (639px)
*/
/*
	S Breakpoint
	Viewport Width >= 40rem (640px)
*/
/*
	M Breakpoint
	Viewport Width >= 64rem (1024px)
*/
/*
	L Breakpoint
	Viewport Width >= 90rem (1440px)
*/
/*
	XL Breakpoint
	Viewport Width >= 120rem (1920px)
*/
/*
	Typography
*/
.image {
  position: relative;
  margin: auto;
}
.image::before {
  content: "";
  position: absolute;
  display: block;
  inset: 2.5rem 2.5rem 0 0;
  transform: translate(-12px, 12px);
  background: var(--blue);
}
.image img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}

@media (max-width: 39.999rem) {
  .image {
    margin: 0 1rem;
  }
}
@media (min-width: 64rem) {
  .image.-rotation {
    transform: rotate(-1deg);
  }
}
.logoWall {
  max-width: 1024px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.logoWall img {
  flex-grow: 0;
  flex-basis: 0;
  flex-shrink: 0;
  width: 160px;
  height: auto;
}

.digest {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media screen and (min-width: 1280px) {
  .digest {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.job-digest {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
}
.job-digest p {
  margin: 0 0 auto 0;
}
.job-digest p a {
  color: inherit;
  text-decoration: none;
}
.job-digest > a {
  position: relative;
  align-self: center;
}

.button.-overlay {
  background: transparent;
  color: transparent;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.button.-overlay:hover {
  background: rgba(0, 0, 0, 0.06);
}

hh-alert {
  position: fixed;
  right: 0.5rem;
  bottom: 0;
  z-index: 999;
  max-width: 16rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(180deg, #CF2D10, 10%, #CF1059, #CF1068);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  color: #fff;
  align-items: center;
  justify-content: center;
  border-radius: 1rem 1rem 0 0;
  text-align: right;
}
hh-alert .actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

aside.donate {
  position: fixed;
}
@media screen and (min-width: 1024px) {
  aside.donate {
    bottom: 0;
    right: 0;
  }
}
@media screen and (max-width: 1023.99999px) {
  aside.donate {
    inset: auto 0 0 0;
    border-bottom: 7px solid #20AC35;
    display: flex;
    justify-content: center;
  }
  aside.donate > a {
    margin-bottom: -7px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.container {
  background-repeat: repeat;
}

/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	A function to split a string on periods (.) to
	access a SASS map through a familiar syntax.
*/
/*
	Use:
		config("my.path")
*/
/*
	Use:
		pxToRem([int])
*/
/*
	SASS Variables
*/
/*
	-------------------------------------------------------
	Updates to this file should not be made directly in the
	framework. Instead, copy this file to the /src/
	directory. Update `app.scss` to point your new file.
	-------------------------------------------------------
*/
/*
	Alignment
	Helps us to align the left and right edges of content.
*/
/*
	XS Breakpoint
	Viewport Width <= 39.99rem (639px)
*/
/*
	S Breakpoint
	Viewport Width >= 40rem (640px)
*/
/*
	M Breakpoint
	Viewport Width >= 64rem (1024px)
*/
/*
	L Breakpoint
	Viewport Width >= 90rem (1440px)
*/
/*
	XL Breakpoint
	Viewport Width >= 120rem (1920px)
*/
/*
	Typography
*/
@media (min-width: 64rem) {
  .jobDetail {
    display: flex;
    position: relative;
  }
  .jobDetail aside {
    align-self: flex-start;
    position: sticky;
    top: 120px;
    order: 2;
    width: 480px;
    text-align: center;
    margin-left: 4rem;
  }
  .jobDetail article {
    order: 1;
    flex: 1;
  }
}
@media (max-width: 63.999rem) {
  .jobDetail aside {
    margin-bottom: 4rem;
  }
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.758);
  backdrop-filter: blur(3px);
  z-index: 100;
}
.modal.-video > div {
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 16/9;
  background: #fff;
}
.modal.-video iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.modal.-active {
  display: flex;
}

.imageWithHotspots {
  position: relative;
}
.imageWithHotspots > img {
  display: block;
  width: 100%;
  height: auto;
}
.imageWithHotspots .hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
.imageWithHotspots .hotspots > li {
  position: absolute;
  box-sizing: border-box;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 2.5px solid yellow;
  font-size: 0;
  transform: translate(-50%, -50%);
}
.imageWithHotspots .hotspots > li.-active {
  background: yellow;
  border-color: white;
}
.imageWithHotspots .hotspots > li.-active::before {
  content: "";
  display: block;
  border: 10px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  height: 44px;
  width: 44px;
  animation-name: beacon;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes beacon {
  0% {
    border-color: rgb(255, 255, 255);
    padding: 0;
  }
  100% {
    border-color: rgba(255, 255, 255, 0);
    padding: 2rem;
  }
}
.umbraco-forms-form .flex {
  display: flex;
  gap: 2rem;
}
.umbraco-forms-form .flex > * {
  flex: 1;
  flex-basis: 0;
}
.umbraco-forms-form fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
.umbraco-forms-form fieldset + fieldset {
  margin-top: 2rem;
}
.umbraco-forms-form .umbraco-forms-tooltip.help-block {
  display: block;
  margin: 1rem 0;
}
.umbraco-forms-form .umbraco-forms-label {
  font-weight: 600;
}
.umbraco-forms-form .umbraco-forms-indicator {
  color: red;
}
.umbraco-forms-form .umbraco-forms-field > label, .umbraco-forms-form .umbraco-forms-field div {
  flex: 1;
}
.umbraco-forms-form .umbraco-forms-field > label + div {
  margin-top: 0.75rem;
}
.umbraco-forms-form .umbraco-forms-field + .umbraco-forms-field {
  margin-top: 1.75rem;
}
.umbraco-forms-form .umbraco-forms-navigation {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.75rem;
}
.umbraco-forms-form .field-validation-error {
  display: block;
  margin: 0.75rem 0;
  padding: 0.5rem;
  background: rgba(255, 0, 0, 0.06);
  font-style: italic;
  font-size: 14px;
}
.umbraco-forms-form input[type=text],
.umbraco-forms-form input[type=email],
.umbraco-forms-form textarea,
.umbraco-forms-form select {
  display: block;
  width: 100%;
  padding: 12px 8px;
  box-sizing: border-box;
  font-size: 18px;
}
.umbraco-forms-form textarea {
  height: 80px;
}
.umbraco-forms-form .umbraco-forms-hidden {
  display: none;
}

.umbraco-forms-submitmessage-html {
  width: var(--copyWidth);
}

.filepond--credits {
  display: none;
}

/* Specific Templates */
.fixedBg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  filter: blur(20px);
  opacity: 0.3;
  z-index: -1;
}
.fixedBg lottie-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*# sourceMappingURL=app.css.map */