:root {
  --m3-sys-light-primary: #2D6B27;
  --m3-sys-light-on-primary: #FFFFFF;
  --m3-sys-light-primary-container: #AFF49F;
  --m3-sys-light-on-primary-container: #002200;
  --m3-sys-light-secondary: #53634E;
  --m3-sys-light-on-secondary: #FFFFFF;
  --m3-sys-light-secondary-container: #D6E8CD;
  --m3-sys-light-on-secondary-container: #111F0E;
  --m3-sys-light-tertiary: #386569;
  --m3-sys-light-on-tertiary: #FFFFFF;
  --m3-sys-light-tertiary-container: #BBEBEF;
  --m3-sys-light-on-tertiary-container: #002022;
  --m3-sys-light-error: #BA1B1B;
  --m3-sys-light-on-error: #FFDAD4;
  --m3-sys-light-error-container: #FFDAD4;
  --m3-sys-light-on-error-container: #410001;
  --m3-sys-light-background: #FCFCF6;
  --m3-sys-light-on-background: #1A1C19;
  --m3-sys-light-surface: #FCFCF6;
  --m3-sys-light-on-surface: #1A1C19;
  --m3-sys-light-surface-variant: #DFE5D8;
  --m3-sys-light-on-surface-variant: #42493F;
  --m3-sys-light-outline: #73796F;
  --m3-sys-light-invserse-on-surface: #F1F1EB;
  --m3-sys-light-inverse-surface: #2E312C;
  --m3-sys-light-inverse-primary: #94D786;
  --m3-sys-light-shadow: #000000;
  --m3-elevation-1-light: 0 1px 2px 0 rgba(0,0,0,calc(100% / 3)), 0 1px 3px 1px rgba(0,0,0,15%);
  --m3-elevation-2-light: 0 1px 2px 0 rgba(0,0,0,calc(100% / 3)), 0 2px 6px 2px rgba(0,0,0,15%);
  --m3-elevation-3-light: 0 4px 8px 3px rgba(0,0,0,15%), 0 1px 3px 0 rgba(0,0,0,calc(100% / 3));
  --m3-elevation-4-light: 0 6px 10px 4px rgba(0,0,0,15%), 0 2px 3px 0 rgba(0,0,0,calc(100% / 3));
  --m3-elevation-5-light: 0 8px 12px 6px rgba(0,0,0,15%), 0 4px 4px 0 rgba(0,0,0,calc(100% / 3));
}

/* latin-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 200;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 200;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 1000;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 1000;
  font-stretch: 100%;
  src: url(../font/robotoflex_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html {
  font-size: 14px;
  font-family: "Roboto Flex", sans-serif;
}
html * {
  padding: 0;
  margin: 0;
  box-sizing: content-box;
}

body {
  background-color: var(--m3-sys-light-background);
  color: var(--m3-sys-light-secondary);
}

mark {
  padding: 6px 12px;
  border-radius: 0.6rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--m3-sys-light-on-secondary-container);
  background-color: var(--m3-sys-light-secondary-container);
}

section, .footer-card {
  max-width: 1360px;
  margin: 0 auto;
  padding-top: 80px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;
}
section.container, .footer-card.container {
  align-items: flex-start;
}

.footer-card {
  margin-bottom: 6rem;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  padding: 1rem 0 !important;
}
.footer-card .content-center {
  text-align: center;
  width: 100%;
}
.footer-card .content-center img {
  height: 50px;
}
.footer-card .content-center a, .footer-card .content-center h3 {
  border-radius: 5rem;
  padding: 0.7rem 1.5rem;
  font-weight: 500;
  text-decoration: none;
}
.footer-card .content-center.card-footer {
  border-top: 1px solid var(--m3-sys-light-secondary);
  margin-top: 1rem;
}
.footer-card .content-center .action-row {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}

.split-wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.split {
  flex: 0 0 calc(50% - 1rem);
  width: calc(50% - 1rem);
}
.split:not(:last-child) {
  padding-right: 1rem;
}

.split-third {
  flex: 0 0 calc(100% / 3 - 1rem);
  width: calc(100% / 3 - 1rem);
}
.split-third:not(:last-child) {
  padding-right: 1rem;
}

h1 {
  font-size: 3.5rem;
  font-weight: normal;
  color: var(--m3-sys-light-on-primary-container);
  padding-bottom: 2.5rem;
}

h2 {
  font-size: 1.3rem;
  font-weight: normal;
  color: var(--m3-sys-light-on-secondary-container);
  padding-bottom: 0.8rem;
}

p {
  padding-bottom: 1rem;
}

a {
  color: var(--m3-sys-light-primary);
}

.text-right {
  text-align: right;
}

ul {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

header {
  background-color: var(--m3-sys-light-invserse-on-surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
header nav {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  max-width: 1360px;
  margin: 0 auto;
  padding: 16px 0;
}
header nav .branding {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;
}
header nav .branding img {
  height: 50px;
}
header nav .nav-items {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;
}
header nav .nav-items a {
  font-size: 1.2rem;
  padding: 4px 8px;
  color: var(--m3-sys-light-primary);
}

.matrix-card {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: 230px;
  width: 100%;
  margin: 0 auto;
}
.matrix-card .button {
  position: absolute;
  background-color: var(--m3-sys-light-surface);
  box-shadow: var(--m3-elevation-1-light);
  border-radius: 5rem;
  padding: 0.7rem 1.5rem;
  font-weight: 500;
}
.matrix-card .button.square {
  box-shadow: var(--m3-elevation-2-light);
  height: 3rem;
  width: 3rem;
  aspect-ratio: 1;
  padding: 0.5rem;
  border-radius: 0.8rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.matrix-card .button.square img {
  height: 3rem;
}
.matrix-card .button.primary {
  background-color: var(--m3-sys-light-primary-container);
}
.matrix-card .button.tertiary {
  background-color: var(--m3-sys-light-tertiary-container);
}
.matrix-card .button.error {
  background-color: var(--m3-sys-light-error-container);
}
.matrix-card .matrix-card-content {
  padding: 1.4rem;
  border-radius: 0.8rem;
  background-color: var(--m3-sys-light-secondary-container);
  box-shadow: var(--m3-elevation-1-light);
  text-align: center;
  aspect-ratio: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.matrix-card .matrix-card-content * {
  margin-bottom: 0.5rem;
}
.matrix-card .matrix-card-content img {
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin-bottom: 1.6rem;
}

.card {
  padding: 1.4rem;
  border-radius: 0.8rem;
  background-color: var(--m3-sys-light-secondary-container);
}
.card:not(:last-child) {
  margin-bottom: 1rem;
}
.card .card-icon > * {
  display: inline-flex;
  width: 3rem;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  align-content: center;
  background-color: var(--m3-sys-light-secondary);
  color: var(--m3-sys-light-on-secondary);
  border-radius: 0.8rem;
  margin-bottom: 1.7rem;
}
.card .card-content {
  color: var(--m3-sys-light-on-secondary-container);
}

.footer-card {
  background-color: var(--m3-sys-light-invserse-on-surface);
  margin-top: 130px;
}

.offset-50 {
  margin-top: 50px;
}

.offset-100 {
  margin-top: 100px;
}

.matrix-card .top-out-left {
  top: -4rem;
  left: -5rem;
}
.matrix-card .top-out-right {
  top: -3.5rem;
  right: -7rem;
}
.matrix-card .top-left {
  top: 2rem;
  left: -4rem;
}
.matrix-card .top-right {
  top: 3rem;
  right: -4rem;
}
.matrix-card .bottom-left {
  top: 9rem;
  left: -12rem;
}
.matrix-card .bottom-right {
  top: 13rem;
  right: -7rem;
}
.matrix-card .bottom-out-left {
  top: 18rem;
  left: -10rem;
}
.matrix-card .bottom-out-center {
  top: 18rem;
  left: 2rem;
}
.matrix-card .bottom-out-right {
  bottom: -4rem;
  right: -3rem;
}

@media screen and (max-width: 1420px) {
  section, footer, header nav {
    padding-left: 15px;
    padding-right: 15px;
  }

  .split {
    padding-right: 3rem;
  }

  .matrix-card .bottom-left {
    top: 9rem;
    left: -8rem;
  }
  .matrix-card .bottom-out-left {
    top: 18rem;
    left: -8rem;
  }
}
@media screen and (max-width: 930px) {
  .hero {
    display: flex;
    flex-direction: column;
  }
  .hero > .split {
    width: 100%;
    flex: 0 0 100%;
    padding-bottom: 80px;
  }

  .container {
    flex-wrap: wrap;
  }
  .container .split-third {
    flex: 0 0 calc(50% - .5rem);
    padding-right: 0;
  }
  .container .split-third:first-child {
    flex: 0 0 calc(50% - .5rem);
    padding-right: 1rem;
  }
  .container .split-third:last-child {
    flex: 0 0 100%;
    display: flex;
  }
  .container .split-third:last-child .card {
    flex: 0 0 calc(50% - 1rem - 30px);
  }
  .container .split-third:last-child .card:first-child {
    margin-right: 1rem;
  }

  .offset-md-0 {
    margin-top: 1rem;
  }
}
@media screen and (max-width: 640px) {
  mark {
    display: none;
  }

  .container .split-third {
    flex: 0 0 100% !important;
    padding-right: 0 !important;
    padding-bottom: 1rem;
  }
  .container .split-third:last-child {
    display: block;
  }
  .container .split-third:last-child .card:first-child {
    margin-right: 0;
  }
  .container .split-third .card {
    flex: 0 0 100%;
  }

  .footer-card .content-center .action-row {
    flex-wrap: wrap;
  }
  .footer-card .content-center .action-row h3 {
    display: block;
    width: 100%;
  }
}
@media screen and (max-width: 550px) {
  header nav .branding img,
.footer-card .content-center img {
    width: 200px;
    max-width: 100%;
    height: auto;
  }

  .matrix-card .matrix-card-content {
    margin-right: 20px;
    margin-left: 30px;
  }
  .matrix-card .top-out-left {
    top: 17rem;
    left: -3rem;
  }
  .matrix-card .top-out-right {
    top: -3.5rem;
    right: -4rem;
  }
  .matrix-card .top-left {
    top: 11rem;
    left: 16rem;
  }
  .matrix-card .bottom-left {
    top: -1rem;
    left: -2rem;
  }
  .matrix-card .bottom-right {
    top: 20rem;
    right: -1rem;
  }
  .matrix-card .bottom-out-left {
    top: 22rem;
    left: -3rem;
  }
  .matrix-card .bottom-out-center {
    top: 3rem;
    left: -2rem;
  }
  .matrix-card .bottom-out-right {
    bottom: -8rem;
    right: -3rem;
  }
}

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