header {
  margin: 0 auto;
  max-width: 1500px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem; }
  header .logo {
    transition: transform 0.2s ease-in-out;
    height: 30px; }
    header .logo:hover {
      transform: scale(1.15);
      cursor: pointer; }
  header a {
    line-height: 0.5em; }
  header #menu-toggle {
    display: none;
    z-index: 100;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2em;
    aspect-ratio: 1;
    border: 0;
    background-image: url("/images/icon-hamburger.svg");
    background-color: transparent;
    background-size: cover; }
    @media (max-width: 750px) {
      header #menu-toggle {
        display: block; } }
    header #menu-toggle:hover {
      cursor: pointer; }
    header #menu-toggle[data-popout="true"] {
      background-image: url("/images/icon-close.svg");
      background-size: auto;
      background-repeat: no-repeat;
      background-position: center; }
  header nav ul {
    padding-block: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: baseline; }
    @media (max-width: 750px) {
      header nav ul {
        transition: transform 0.2s ease-in-out;
        transform: translateX(100%);
        position: fixed;
        z-index: 90;
        inset: 0 0 0 30%;
        background-color: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        flex-direction: column;
        gap: 2rem;
        justify-content: start;
        padding: 4rem 2rem; }
        header nav ul[data-popout="true"] {
          transform: translateX(0%); }
        @supports not (backdrop-filter: none) {
          header nav ul {
            background-color: rgba(255, 255, 255, 0.98); } }
        header nav ul a {
          font-size: 1.5rem; } }
    header nav ul li {
      line-height: 1em;
      height: 1em; }
    header nav ul a {
      transition: transform 0.2s ease-in-out;
      display: inline-block;
      backface-visibility: hidden;
      text-decoration: none;
      color: #222;
      font-weight: bold;
      white-space: nowrap;
      padding-bottom: 0.5rem; }
      header nav ul a:hover {
        transform: scale(1.2);
        cursor: pointer; }
      header nav ul a.active {
        border-bottom: 3px solid red; }

a {
  color: #cc4747; }
  a.button-like {
    transition: transform 0.2s ease-in-out;
    font-weight: bold;
    display: inline-block;
    border-radius: 5px;
    padding: 1em 2em;
    color: #0a0a0a;
    background-color: white;
    user-select: none;
    text-decoration: none; }
    a.button-like:hover {
      transform: scale(1.15);
      cursor: pointer; }
  a.standout {
    color: #fff;
    background-color: #e6281a;
    border: none; }

footer {
  margin: 0 auto;
  max-width: 1500px;
  padding: 4rem 2rem;
  display: flex;
  justify-content: space-between;
  background-color: #131c2c;
  color: #ececec; }
  @media (max-width: 750px) {
    footer {
      flex-direction: column;
      gap: 2rem; } }
  footer .tagline {
    padding-block: 1rem; }
  footer .logo {
    transition: transform 0.2s ease-in-out;
    height: 50px; }
    footer .logo:hover {
      transform: scale(1.15);
      cursor: pointer; }
    footer .logo .brackets {
      stroke: white; }
    footer .logo text {
      fill: white; }

.footer-links {
  display: flex;
  gap: 2rem;
  padding-right: 4rem; }
  .footer-links > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: start;
    align-items: baseline; }
  .footer-links a {
    transition: transform 0.2s ease-in-out;
    color: #ececec;
    text-decoration: none;
    white-space: nowrap; }
    .footer-links a:hover {
      transform: scale(1.2);
      cursor: pointer; }

div.quote-box {
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 2rem;
  overflow: hidden;
  color: #131c2c;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5em;
  width: 100%; }
  @media (max-width: 450px) {
    div.quote-box {
      font-size: 1rem; } }
  div.quote-box > img {
    max-width: 80%;
    box-sizing: border-box;
    border-radius: 1rem;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top center;
    padding: 0;
    margin: 0; }
  div.quote-box > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 2rem;
    border-block: 1px solid #3C64B1;
    max-width: 600px; }
    div.quote-box > div > p {
      margin: 0; }
  div.quote-box p:first-child {
    margin-bottom: 2rem; }
  div.quote-box p.name {
    font-weight: bold;
    color: #3C64B1;
    padding-top: 1rem; }
  div.quote-box p.location {
    font-weight: bold; }

div.team-member-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: space-between;
  max-width: 250px;
  padding: 1rem;
  text-align: center;
  line-height: 1.2em; }
  div.team-member-card div {
    padding: 0;
    position: relative; }
    div.team-member-card div > img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      object-position: top center; }
    div.team-member-card div h3 {
      font-size: 0.8rem;
      text-align: right;
      background-color: rgba(0, 0, 0, 0.3);
      color: white;
      padding: 0.5em;
      margin: 0;
      position: absolute;
      right: 0;
      bottom: 1rem; }
  div.team-member-card h2 {
    margin-top: 0;
    font-size: 1.2rem;
    padding-top: 1rem; }
  div.team-member-card h3 {
    font-size: 1rem; }
  div.team-member-card p {
    font-size: 1rem;
    text-align: center !important;
    color: #686868;
    font-weight: 300;
    margin-top: 0; }
  div.team-member-card div.social-wrapper {
    margin-inline: auto;
    margin-top: auto;
    opacity: 0.75; }

div.team-member {
  max-width: 800px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: minmax(1fr, 400px) 1fr;
  grid-column-gap: 2rem;
  font-size: 1rem; }
  @media (max-width: 450px) {
    div.team-member {
      grid-auto-flow: row;
      grid-template-columns: 1fr; } }
  div.team-member h2, div.team-member h3 {
    margin: 0; }
  div.team-member img {
    width: 100%; }
  div.team-member blockquote {
    font-style: italic;
    opacity: 75%;
    border-left: 4px solid gray;
    padding-top: 1rem;
    padding-left: 2em;
    padding-bottom: 1em; }
    div.team-member blockquote p::before {
      content: open-quote; }
    div.team-member blockquote p::after {
      content: close-quote; }
  div.team-member .social-links {
    padding-top: 1rem;
    margin-inline: auto;
    opacity: 0.75;
    justify-content: center; }

div.countdown {
  display: flex;
  justify-content: center;
  gap: 1rem; }
  div.countdown div {
    position: relative;
    width: 7rem;
    height: 5rem;
    margin: 0;
    border-radius: 4px;
    margin: 0;
    background-color: #555ec1;
    color: white; }
    @media (max-width: 450px) {
      div.countdown div {
        width: 5rem;
        height: 4rem; } }
    div.countdown div p:first-child {
      box-sizing: border-box;
      position: absolute;
      font-size: 36px;
      margin: 0;
      top: 0;
      width: 100%;
      line-height: 4rem; }
      @media (max-width: 450px) {
        div.countdown div p:first-child {
          font-size: 18px;
          line-height: 3rem; } }
    div.countdown div p:nth-child(2) {
      position: absolute;
      font-size: 12px;
      line-height: 1em;
      margin: 0;
      bottom: 12px;
      width: 100%; }

div.countdown-date {
  margin-top: 1rem;
  color: grey;
  font-size: 1rem; }

.tabbed .menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem; }
  .tabbed .menu input[type="radio"] {
    display: none; }
    .tabbed .menu input[type="radio"]:checked + label {
      background-color: #3c64b1;
      color: white; }
  .tabbed .menu label {
    transition: transform 0.2s ease-in-out;
    font-weight: bold;
    display: inline-block;
    border-radius: 5px;
    padding: 1em 1em;
    color: #0a0a0a;
    background-color: white;
    user-select: none;
    font-size: 1rem; }
    .tabbed .menu label:hover {
      transform: scale(1.15);
      cursor: pointer; }

.tabbed .content {
  position: relative;
  margin: 0 auto; }
  .tabbed .content [data-tab-active] {
    box-sizing: border-box;
    padding: 0 1rem;
    position: absolute;
    width: 100%;
    transition: opacity 0.5s ease-in-out;
    opacity: 0; }
  .tabbed .content [data-tab-active="true"] {
    opacity: 1; }

div.video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden; }
  div.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }

div.video-card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  background-color: white;
  border-radius: 6px;
  padding: 1rem;
  margin-top: calc((100px / 2) * 1.2);
  width: 400px;
  aspect-ratio: 16/9; }
  div.video-card img {
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position: absolute;
    border-radius: calc(100px / 2);
    top: calc(-100px / 2);
    left: calc(400px / 2 - 100px / 2);
    width: 100px;
    aspect-ratio: 1;
    object-fit: cover; }
    div.video-card img:hover {
      transform: scale(1.15);
      cursor: pointer; }
  div.video-card div.quote {
    text-align: center;
    font-size: 14px;
    line-height: 1.2em;
    font-style: italic; }
  div.video-card hr {
    padding: 0;
    margin: 0.7rem auto;
    width: 300px;
    border-top: none;
    border-bottom: 1px solid #ccc; }
  div.video-card div.name {
    text-align: center;
    font-weight: bold;
    width: 100%;
    margin-bottom: 0.25rem; }
  div.video-card div.title {
    text-align: center;
    font-weight: bold;
    width: 100%;
    color: #cc4747;
    margin: 0; }

div.outline-box {
  box-sizing: border-box;
  border: 20px solid red;
  max-width: 650px;
  margin: auto; }
  @media (max-width: 750px) {
    div.outline-box {
      max-width: 100%;
      border-width: 7px; } }
div.carousel {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  padding-bottom: 1rem; }
  div.carousel > div:first-child {
    display: flex;
    gap: 1rem;
    transform: translateX(0px);
    transition: transform 0.5s ease-in-out; }
    div.carousel > div:first-child > * {
      flex-shrink: 0; }

div.directional {
  transition: transform 0.2s ease-in-out;
  background-color: white;
  border-radius: 25px;
  opacity: 0.7;
  position: absolute;
  z-index: 1000;
  width: 50px;
  aspect-ratio: 1;
  top: 75%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }
  div.directional:hover {
    transform: scale(1.2);
    cursor: pointer; }
  div.directional.left {
    left: 5px;
    background-image: url(/images/angle-left.svg); }
  div.directional.right {
    right: 5px;
    background-image: url(/images/angle-right.svg); }

ul.summary {
  margin: 1rem auto;
  padding: 0;
  max-width: 990px; }
  ul.summary > li {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 10px;
    overflow: hidden;
    border-radius: 5px;
    background-color: #f4f4f5; }
    @media (max-width: 600px) {
      ul.summary > li {
        flex-direction: column; }
        ul.summary > li a.img {
          margin: auto; } }
    ul.summary > li a {
      text-decoration: none; }
      ul.summary > li a h2:hover {
        color: #cc4747 !important; }
    ul.summary > li img {
      width: 300px;
      max-height: 300px;
      object-fit: cover;
      aspect-ratio: 4/3; }
      @media (max-width: 600px) {
        ul.summary > li img {
          width: 100%; } }
    ul.summary > li > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      font-size: 18px;
      line-height: 1.2em;
      text-align: justify;
      margin-right: 1rem;
      hyphens: auto; }
      @media (max-width: 600px) {
        ul.summary > li > div {
          text-align: left !important; } }
      ul.summary > li > div div.tag-list {
        margin-bottom: 0.5em; }
        ul.summary > li > div div.tag-list > a {
          font-weight: 400;
          color: #676767;
          font-size: 16px; }
      ul.summary > li > div h2 {
        font-size: 30px;
        margin-top: 0;
        text-align: left;
        line-height: 1.2em; }
      ul.summary > li > div div.summary-footer {
        display: flex;
        font-size: 16px;
        justify-content: space-between;
        margin-top: auto;
        padding-top: 0.5em; }
        ul.summary > li > div div.summary-footer span {
          font-size: 0.9em; }

div.news-header div.tag-list {
  margin-top: 1rem; }
  div.news-header div.tag-list > a {
    font-weight: 400;
    font-style: italic;
    color: #ececec;
    text-decoration: none; }
  div.news-header div.tag-list:before {
    content: '[ '; }
  div.news-header div.tag-list:after {
    content: ' ]'; }

div.news {
  max-width: 800px; }
  div.news img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: block;
    max-height: 300px;
    max-width: 100%;
    width: unset;
    margin: auto; }
  div.news .thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    div.news .thumbnails img {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      transition: transform 0.2s ease-in-out;
      height: 100px;
      object-fit: cover;
      margin: 0.5rem; }
      div.news .thumbnails img:hover {
        transform: scale(1.15);
        cursor: pointer; }

.accordion-control {
  color: #676767;
  user-select: none;
  margin-bottom: 0.5rem; }
  .accordion-control:hover {
    cursor: pointer;
    color: #cc4747; }
  .accordion-control.open {
    color: #cc4747; }

.accordion-content {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
  padding-inline: 1rem; }

div.metric {
  box-sizing: border-box;
  display: grid;
  font-size: 16px;
  grid-template-rows: min-content 1fr;
  gap: 0 1rem;
  max-width: 50%; }
  @media (max-width: 750px) {
    div.metric {
      max-width: 100%; } }
  div.metric ~ div.metric {
    margin-top: -20px; }
    @media (max-width: 750px) {
      div.metric ~ div.metric {
        margin-top: 2rem; } }
  div.metric:nth-child(even) {
    grid-template-areas: "image heading" "image content";
    margin-left: auto;
    padding-left: 0.5rem;
    text-align: left; }
  div.metric:nth-child(odd) {
    grid-template-areas: "heading image" "content image";
    margin-right: auto;
    padding-right: 0.5rem;
    text-align: right; }
  div.metric img {
    grid-area: image; }
  div.metric h3 {
    grid-area: heading;
    margin-top: 0;
    margin-bottom: 0.5em;
    padding: 0; }
  div.metric p {
    grid-area: content;
    margin: 0; }

#sign-in-block {
  border-block: 3px solid #3C64B1; }
  #sign-in-block h3 {
    margin-top: 0; }
  #sign-in-block div.signed-in {
    padding: 0.5rem; }
    #sign-in-block div.signed-in div.box {
      display: flex;
      justify-content: space-between;
      align-items: flex-end; }
      #sign-in-block div.signed-in div.box p {
        margin: 0;
        padding-left: 1rem; }
    #sign-in-block div.signed-in a {
      transition: transform 0.2s ease-in-out;
      text-decoration: none; }
      #sign-in-block div.signed-in a:hover {
        transform: scale(1.15);
        cursor: pointer; }
  #sign-in-block div.signed-out {
    padding: 1rem; }
    #sign-in-block div.signed-out img {
      display: block;
      margin: 0 auto; }

body[data-signed-in="true"] .signed-out {
  display: none; }

body[data-signed-in="false"] .signed-in {
  display: none; }

form li {
  margin-bottom: 1rem; }

form p.note {
  font-size: 14px;
  font-style: italic;
  margin-top: 0.5rem;
  margin-bottom: 0; }
  form p.note.top {
    margin-top: 0;
    margin-bottom: 0.5rem; }

form p.form-error {
  color: red;
  font-weight: bold;
  font-style: italic;
  margin-top: 0.5rem; }

form input, form select, form textarea {
  font: inherit;
  color: inherit; }

form input[type="text"], form textarea {
  display: block;
  box-sizing: border-box;
  margin-top: 0.5rem;
  padding: 0.5em;
  border: 1px solid #eee;
  width: 100%; }

form textarea {
  height: auto; }

form label {
  display: block;
  padding-left: 1rem;
  user-select: none; }

form fieldset {
  border: 1px solid #ddd; }

form input[type="radio"], form input[type="checkbox"] {
  margin-top: 0.5rem;
  margin-left: -1rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem; }

form select {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5em;
  border: 1px solid #eee;
  width: 100%; }

section.color-contrast input, section.color-contrast select, section.color-contrast textarea {
  background-color: #3C64B1;
  font-weight: normal;
  border: none;
  border-bottom: 1px solid white; }
  section.color-contrast input:focus, section.color-contrast select:focus, section.color-contrast textarea:focus {
    outline: none; }

div.mailing-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; }
  div.mailing-list form {
    padding: 1rem;
    white-space: nowrap; }
  div.mailing-list input[type="email"] {
    max-width: 16em;
    margin-left: 1rem; }
  div.mailing-list input[type="submit"] {
    transition: transform 0.2s ease-in-out;
    background-image: url(/images/paper-plane.svg);
    height: 32px;
    appearance: 1;
    border: none;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    background-position: 50% 50%;
    background-size: 31px;
    background-repeat: no-repeat;
    color: rgba(0, 0, 0, 0); }
    div.mailing-list input[type="submit"]:hover {
      transform: scale(1.3);
      cursor: pointer; }

#TableOfContents {
  border-block: 1px solid black;
  font-size: 1.2rem; }
  #TableOfContents ul {
    list-style-type: none;
    padding-left: 1rem; }
    #TableOfContents ul ul {
      margin-top: 0.5rem;
      font-size: 1rem; }
  #TableOfContents li {
    margin-bottom: 0.5rem; }
  #TableOfContents a {
    color: #676767;
    text-decoration: none; }

:root {
  --codeFont: 'Roboto Mono', monospace; }

html {
  scroll-behavior: smooth; }

body {
  font-family: 'Open Sans', san-serif;
  min-width: 320px;
  margin: 0;
  padding: 0;
  background-color: #fafafa;
  overflow-x: hidden; }

section {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: transparent;
  color: #676767; }
  section h1, section h2, section h3,
  section h4, section h5, section h6 {
    color: #0a0a0a;
    white-space: pre-line; }
  section code {
    font-family: var(--codeFont);
    font-weight: 500; }
  section pre {
    padding: 1rem;
    background-color: #eee; }
  section.header {
    background-color: white;
    color: #222; }
  section.contrast {
    background-color: #131c2c;
    color: #ececec;
    font-weight: 300; }
    section.contrast h1, section.contrast h2, section.contrast h3,
    section.contrast h4, section.contrast h5, section.contrast h6 {
      color: white; }
  section.light-background {
    background-color: #EBF5FB; }
  section.color-contrast {
    background-color: #3C64B1;
    color: #ececec;
    font-weight: 300; }
    section.color-contrast h1, section.color-contrast h2, section.color-contrast h3,
    section.color-contrast h4, section.color-contrast h5, section.color-contrast h6 {
      color: white; }
  section.footer {
    background-color: #131c2c;
    color: #ececec; }
    section.footer .social-links img {
      filter: invert(100%); }

div.content {
  margin: 0 auto;
  max-width: 1500px;
  padding: 1rem 2rem;
  font-size: 20px;
  line-height: 1.5em; }
  @media (max-width: 750px) {
    div.content {
      padding-inline: 1rem; } }
  @media (max-width: 750px) {
    div.content {
      font-size: 16px;
      line-height: 1.2em; } }
  div.content h1 {
    font-size: 3rem;
    line-height: 3.5rem; }
    @media (max-width: 750px) {
      div.content h1 {
        font-size: 2rem;
        line-height: 2.5rem; } }
  div.content h2 {
    line-height: 1.2em; }
  div.content em strong {
    color: #cc4747;
    font-weight: bold; }
  div.content span.footnote-mark {
    font-size: 0.8em;
    vertical-align: super;
    font-weight: bold; }
  div.content .header-text {
    color: #3C64B1;
    margin-top: 110px;
    line-height: 6px; }
    @media (max-width: 750px) {
      div.content .header-text {
        line-height: 40px; } }
  div.content .header-footnote {
    font-style: normal;
    font-weight: 300;
    font-size: 26px;
    line-height: 130%;
    /* or 39px */
    width: 40%;
    margin: auto;
    margin-bottom: 50px;
    text-align: center;
    letter-spacing: 0.3px;
    color: #121928; }
    @media (max-width: 750px) {
      div.content .header-footnote {
        width: 98%; } }
  @media (max-width: 750px) {
    div.content {
      padding-inline: 1rem; } }
  div.content .footnote {
    font-size: 0.8em;
    line-height: 1.2em;
    font-style: italic;
    padding-left: 1em;
    text-indent: -1em; }
  div.content > figure {
    margin: 0; }
    div.content > figure img {
      box-sizing: border-box;
      width: 100%;
      padding: 0; }
      div.content > figure img.hero {
        aspect-ratio: 2 / 1;
        object-fit: cover;
        object-position: 50% 75%;
        border-radius: 6px; }
      div.content > figure img.hero.high {
        object-position: center 25%; }
    div.content > figure figcaption {
      font-size: 12px;
      font-style: italic;
      line-height: 1em; }
  div.content.centered {
    padding-inline: 4rem;
    text-align: center; }
    @media (max-width: 750px) {
      div.content.centered {
        padding-inline: 1rem; } }
    div.content.centered li {
      text-align: left; }
  div.content.team-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem; }
    div.content.team-boxes > div {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      transition: transform 0.2s ease-in-out;
      border-radius: 5px;
      min-height: 150px;
      background-color: white; }
      div.content.team-boxes > div:hover {
        transform: scale(1.1);
        cursor: pointer; }
  div.content.light-box {
    background-color: #fafafa;
    width: 80%; }
  div.content #message-box {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-sizing: border-box;
    display: none;
    padding: 1.5rem;
    background-color: #f0aa27;
    color: #442804;
    font-weight: bold;
    font-style: italic; }
  div.content.prep-overlap {
    padding-bottom: 15rem;
    padding-top: 6rem; }
  div.content.overlap {
    margin-top: -10rem;
    background-color: transparent; }
  div.content.document {
    max-width: 800px;
    font-size: 16px;
    line-height: 1.4em; }
    div.content.document hr {
      border-top: 3px solid #3C64B1;
      margin: 1em 0; }
    div.content.document img.hero {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      display: block;
      max-width: 50%;
      aspect-ratio: unset;
      margin: auto; }
      @media (max-width: 750px) {
        div.content.document img.hero {
          max-width: 80%; } }
.leftoverlap {
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  padding: 26px 0px;
  width: 80%;
  margin: auto;
  box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.16);
  border-radius: 17px; }

#full-stack-web-development {
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  margin: 0;
  padding-top: 20px;
  /* identical to box height, or 39px */
  letter-spacing: 0.3px;
  color: #121928;
  text-align: left; }

#uiux-design {
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  margin: 0;
  padding-top: 20px;
  letter-spacing: 0.3px;
  color: #121928;
  text-align: left; }

.leftimage {
  padding-bottom: 200px; }

.social-links {
  display: flex;
  gap: 1rem;
  justify-content: start; }
  .social-links img {
    transition: transform 0.2s ease-in-out;
    height: 24px;
    aspect-ratio: 1; }
    .social-links img:hover {
      transform: scale(1.8);
      cursor: pointer; }

div.list {
  max-width: 600px;
  margin: 0 auto;
  font-weight: 300; }

div.image-box {
  color: #676767;
  font-weight: 400;
  border-radius: 8px;
  min-width: 250px;
  min-height: 150px;
  padding-bottom: 50px;
  background-color: white;
  font-size: 16px;
  line-height: 1.5em; }
  div.image-box h1, div.image-box h2, div.image-box h3,
  div.image-box h4, div.image-box h5, div.image-box h6 {
    color: #0a0a0a;
    margin-top: 0;
    text-align: center; }
  div.image-box div.image-wrapper {
    padding: 0;
    background-color: #f7f7f8;
    border-radius: 8px 8px 0 0; }
  div.image-box img {
    display: block;
    width: 100%;
    padding: 0;
    border-radius: 8px 8px 0 0;
    max-width: 400px;
    margin: auto; }
  div.image-box p {
    text-align: justify; }
  div.image-box div {
    padding: 1rem; }
  div.image-box ul {
    padding-left: 1rem; }
    div.image-box ul li {
      list-style-type: '-  '; }
      div.image-box ul li::marker {
        font-weight: bold; }

.learnhow {
  padding: 1rem; }

.wrapped-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2rem; }
  .wrapped-boxes > div {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    max-width: 48%; }
    @media (max-width: 750px) {
      .wrapped-boxes > div {
        max-width: 82%; } }
.side-by-side {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding-bottom: 150px !important; }
  @media (max-width: 750px) {
    .side-by-side {
      grid-auto-flow: row;
      grid-auto-columns: 1fr; } }
  .side-by-side > * {
    align-self: center; }
  .side-by-side > div {
    font-size: 18px;
    line-height: 1.5em;
    max-width: calc(1500px/2); }

#linkedin-button {
  transition: transform 0.2s ease-in-out; }
  #linkedin-button:hover {
    transform: scale(1.15);
    cursor: pointer; }

.new-box {
  padding-top: 2rem !important;
  background-color: #FFFFFF !important; }

#timer div span {
  color: #ffffff;
  display: block;
  margin-top: 15px;
  font-size: .35em;
  font-weight: 600; }

#timer {
  font-size: 2.5em;
  font-weight: 800;
  color: white;
  padding: 20px;
  margin: auto;
  color: white; }

#timer div {
  display: inline-block;
  min-width: 90px;
  padding: 15px;
  background: #3C64B1;
  border-radius: 10px;
  border: 2px solid #3C64B1;
  margin: 15px; }

#enrollment-closes-in {
  margin-bottom: 0px;
  margin-top: 70px; }