.section {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}
  @media (min-width: 1024px) {.section {
    padding-left: 2rem;

    padding-right: 2rem
}
  }

.section-full {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}

@media (min-width: 1024px) {

.section-full {
    padding-left: 2.5rem;

    padding-right: 2.5rem
}
  }

.section-native h1,
  .section-native h2,
  .section-native h3,
  .section-native h4,
  .section-native h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-native blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-native blockquote p {
      font-size: 1.5rem;
    }

.section-native blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

@media (min-width: 1024px) {

.section-native {
    padding-left: 2rem !important;

    padding-right: 2rem !important
}
  }

@media print {

.section-native {
    max-width: none !important;

    padding-left: 0 !important;

    padding-right: 0 !important
}
  }

.section-native {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

.section-styling h1,
  .section-styling h2,
  .section-styling h3,
  .section-styling h4,
  .section-styling h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-styling blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-styling blockquote p {
      font-size: 1.5rem;
    }

.section-styling blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

.page-hero {
  --bg-opacity: 1;
  background-color: #232323;
  background-color: rgba(35, 35, 35, var(--bg-opacity));
  position: relative;
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  margin-bottom: 2rem;
  text-align: center;
}

@media (min-width: 768px) {

.page-hero {
    padding-top: 3rem;

    padding-bottom: 6rem
}
  }

.page-hero__inner {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
  }

@media (min-width: 1024px) {

.page-hero__inner {
      padding-left: 2rem;

      padding-right: 2rem;
  }
    }

.page-hero__copy :last-child {
      margin-bottom: 0;
    }

.page-hero .background-pattern {
    height: calc(100% + 120px);
    bottom: 0;
    opacity: 0.12;
  }

.section {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}
  @media (min-width: 1024px) {.section {
    padding-left: 2rem;

    padding-right: 2rem
}
  }

.section-full {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}

@media (min-width: 1024px) {

.section-full {
    padding-left: 2.5rem;

    padding-right: 2.5rem
}
  }

.section-native h1,
  .section-native h2,
  .section-native h3,
  .section-native h4,
  .section-native h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-native blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-native blockquote p {
      font-size: 1.5rem;
    }

.section-native blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

@media (min-width: 1024px) {

.section-native {
    padding-left: 2rem !important;

    padding-right: 2rem !important
}
  }

@media print {

.section-native {
    max-width: none !important;

    padding-left: 0 !important;

    padding-right: 0 !important
}
  }

.section-native {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

.section-styling h1,
  .section-styling h2,
  .section-styling h3,
  .section-styling h4,
  .section-styling h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-styling blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-styling blockquote p {
      font-size: 1.5rem;
    }

.section-styling blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

.home-hero {
  --bg-opacity: 1;
  background-color: #232323;
  background-color: rgba(35, 35, 35, var(--bg-opacity));
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  margin-bottom: 1rem;
}

@media (min-width: 768px) {

.home-hero {
    padding-bottom: 2.5rem
}
  }

.home-hero__inner {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
  }

@media (min-width: 1024px) {

.home-hero__inner {
      padding-left: 2.5rem;

      padding-right: 2.5rem
  }
    }

@media (min-width: 768px) {

.home-hero__inner {
      display: flex
  }
    }

.home-hero__content {
    margin-bottom: 1.5rem;
  }

@media (min-width: 768px) {

.home-hero__content {
      margin-bottom: 0;

      padding-right: 1rem;

      width: 50%
  }
    }

@media (min-width: 1024px) {

.home-hero__content {
      width: 40%
  }
    }

.home-hero__box {
    --border-opacity: 1;
    border-color: #fff;
    border-color: rgba(255, 255, 255, var(--border-opacity));
    border-top-width: 2px;
    padding-top: 0.5rem;
  }

@media (min-width: 768px) {

.home-hero__box {
      --bg-opacity: 1;

      background-color: #232323;

      background-color: rgba(35, 35, 35, var(--bg-opacity))
  }
    }

.home-hero__copy {
    font-size: 1rem;
  }

@media (min-width: 768px) {

.home-hero__copy {
      font-size: 1.125rem
  }
    }

@media (min-width: 1024px) {

.home-hero__copy {
      font-size: 1.25rem
  }
    }

.home-hero__copy :last-child {
      margin-bottom: 0;
    }

.home-hero__heading {
    line-height: 1;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
  }

@media (min-width: 768px) {

.home-hero__heading {
      font-size: 3rem
  }
    }

@media (min-width: 1024px) {

.home-hero__heading {
      font-size: 3.375rem
  }
    }

.home-hero__figure {
    width: 100%;
  }

@media (min-width: 768px) {

.home-hero__figure {
      padding-left: 1rem;

      width: 50%
  }
    }

@media (min-width: 1024px) {

.home-hero__figure {
      width: 60%
  }
    }

.home-hero__figure figure {
      position: relative;
    }

@media (min-width: 768px) {

.home-hero__figure figure {
        padding-bottom: 56%
    }
      }

@media (min-width: 768px) {

.home-hero__image {
      position: absolute;

      width: 100%;

      height: 100%;

      font-family: "object-fit:cover";

      -o-object-fit: cover;

         object-fit: cover
  }
    }

.home-hero + .explore-cards {
    position: relative;
  }

@media (min-width: 768px) {

.home-hero + .explore-cards {
      --text-opacity: 1;

      color: #fff;

      color: rgba(255, 255, 255, var(--text-opacity))
  }
    }

.home-hero + .explore-cards:before {
      content: '';
    }

@media (min-width: 768px) {

.home-hero + .explore-cards:before {
        position: absolute;

        top: 0;

        --bg-opacity: 1;

        background-color: #232323;

        background-color: rgba(35, 35, 35, var(--bg-opacity));

        margin-top: -2rem;

        height: calc(50% + 3rem);

        left: calc((100vw - 100%) / -2);

        \width: 100vw
    }
      }

@media (min-width: 1280px) {

.home-hero + .explore-cards:before {
        left: calc((100vw - 1280px) / -2)
    }
      }

.home-hero + .explore-cards .explore-cards__heading {
      position: relative;
    }

/* Nav arrows */
  .gallery-control {
    --text-opacity: 1;
    color: #fff;
    color: rgba(255, 255, 255, var(--text-opacity));
    position: absolute;
    z-index: 1;
    padding: 1rem;
    top: 40%;
    background: rgba(0, 0, 0, 0.5);
    transform: translateY(-50%) scale(0.5);
  }
  @media (min-width: 640px) {
  .gallery-control {
      transform: translateY(-50%) scale(0.75)
  }
    }
  @media (min-width: 1024px) {
  .gallery-control {
      transform: translateY(-50%) scale(1)
  }
    }
  .gallery-control--previous {
      left: 0;
      transform-origin: left center;
    }
  .gallery-control--previous svg {
        transform: rotate(180deg);
      }
  .gallery-control--next {
      right: 0;
      transform-origin: right center;
    }
  .gallery-control svg {
      opacity: 0.75;
    }
  /* Gallery item */
  .gallery-item__image {
      position: relative;
      padding-bottom: 60%;
      background: #4f4f4f;
    }
  .gallery-item__image img {
        position: absolute;
        top: 50%;
        left: 50%;
        max-height: 100%;
        max-width: 100%;
        transform: translate(-50%, -50%);
      }
  @media print {
  .gallery-item__image {
        padding-bottom: 0
    }

        .gallery-item__image img {
          position: static;
          height: auto;
          left: auto;
          transform: none;
        }
      }
  .gallery-item__caption {
      display: flex;
    }
  .gallery-item__content {
      --bg-opacity: 1;
      background-color: #fff;
      background-color: rgba(255, 255, 255, var(--bg-opacity));
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      text-align: left;
      font-size: 0.875rem;
      line-height: 1.25;
      display: flex;
      flex-grow: 1;
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
    }
  @media print {
  .gallery-item__content {
        display: block;

        padding-left: 0;

        padding-right: 0
    }
      }
  .gallery-item__meta {
      padding-right: 0.75rem;
      font-size: 0.75rem;
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 25%;
    }
  .gallery-item__description {
      padding-left: 0.75rem;
      flex-shrink: 1;
      flex-grow: 0;
      flex-basis: auto;
    }
  .gallery-item__description.pl-0 {
        padding-left: 0;
      }
  @media print {
  .gallery-item__description {
        padding-left: 0;

        margin-top: 0.5rem;

        border-width: 0
    }
      }
  .gallery-item__fullscreen {
      display: none;
      justify-content: center;
      flex-shrink: 0;
      flex-grow: 0;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  @media (min-width: 768px) {
  .gallery-item__fullscreen {
        display: flex
    }
      }
  @media print {
  .gallery-item__fullscreen {
        display: none
    }
      }
  .gallery-item__fullscreen button {
        text-align: center;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        --text-opacity: 1;
        color: #232323;
        color: rgba(35, 35, 35, var(--text-opacity));
        background-color: rgba(255, 255, 255, 0.5);
        transition: background-color 300ms ease-in-out;
      }
  .gallery-item__fullscreen button:hover,
        .gallery-item__fullscreen button:focus {
          background-color: rgba(255, 255, 255, 0.8);
        }
  .gallery-item__fullscreen svg {
        display: inline-block;
        width: 32px;
        height: 23px;
      }

/* Thumbnails */

.image-gallery-thumbnails-wrapper {
  position: absolute;
  bottom: 0;
  width: 72%;
}

.image-gallery-thumbnails-wrapper .image-gallery-thumbnail {
    position: relative;
    overflow: hidden;
    height: 0;
    border-width: 1px;
    border-color: transparent;
    padding-bottom: 60px;
  }

.image-gallery-thumbnails-wrapper .image-gallery-thumbnail:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      background: rgba(0, 0, 0, 0.5);
    }

.image-gallery-thumbnails-wrapper .image-gallery-thumbnail.active {
      border-color: rgba(255, 255, 255, 0.6);
    }

.image-gallery-thumbnails-wrapper .image-gallery-thumbnail.active:before {
        display: none;
      }

.image-gallery-thumbnails-wrapper .image-gallery-thumbnail-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

.image-gallery-thumbnails-wrapper .image-gallery-thumbnail-inner img {
      width: 100%;
      height: 100%;
      font-family: "object-fit:cover";
      -o-object-fit: cover;
         object-fit: cover;
    }

/* Styling for the gallery when it's not in fullscreen mode */

@media print {

.image-gallery-content:not(.fullscreen) .image-gallery-slide {
      position: static;

      padding-bottom: 0;

      height: auto;

      left: auto;

      top: auto;

      margin-bottom: 1rem;

      width: auto;

      transform: translate3d(0, 0px, 0px) !important
  }
    }

@media print {

.image-gallery-content:not(.fullscreen) .gallery-control {
      display: none
  }
    }

@media print {

.image-gallery-content:not(.fullscreen) .gallery-item {
      display: block;

      position: static;

      height: auto;

      width: 100%;

      top: auto;

      left: auto
  }
    }

.image-gallery {
  width: 100% !important;
  height: 100% !important;
}

@media print {

.image-gallery {
    width: auto !important;

    height: auto !important
}
  }

.image-gallery-slide {
  cursor: default;
}

.image-gallery-content.fullscreen {
  width: 100%;
  height: 100%;
}

.image-gallery-content.fullscreen .image-gallery-slide-wrapper,
  .image-gallery-content.fullscreen .image-gallery-swipe,
  .image-gallery-content.fullscreen .image-gallery-slides {
    width: 100%;
    height: 100%;
  }

.image-gallery-content.fullscreen .image-gallery-slide {
    height: 100%;
  }

.image-gallery-content.fullscreen .gallery-control {
    top: 50%;
  }

.image-gallery-content.fullscreen .gallery-control--next {
      right: 28%;
    }

.image-gallery-content.fullscreen .gallery-item {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

.image-gallery-content.fullscreen .gallery-item__image {
      height: auto;
      padding-bottom: 0;
      flex: 1 1 auto;
      width: 72%;
    }

.image-gallery-content.fullscreen .gallery-item__image img {
        font-family: "object-fit:contain";
        -o-object-fit: contain;
           object-fit: contain;
      }

.image-gallery-content.fullscreen .gallery-item__fullscreen {
      display: none;
    }

.image-gallery-content.fullscreen .gallery-item__caption {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 28%;
    }

.image-gallery-content.fullscreen .gallery-item__content {
      display: block;
      padding-top: 3rem;
      padding-bottom: 3rem;
      padding-left: 2rem;
      padding-right: 2rem;
    }

.image-gallery-content.fullscreen .gallery-item__description {
      padding: 0;
      font-size: 1rem;
      line-height: 1.5;
    }

/* Override react-image-gallery CSS */

.image-gallery-content {
  line-height: inherit !important;
}

.image-gallery-slides {
  line-height: inherit !important;
  white-space: normal !important;
}

@media print {

.image-gallery-slides {
    overflow: visible
}
  }

.section {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}
  @media (min-width: 1024px) {.section {
    padding-left: 2rem;

    padding-right: 2rem
}
  }

.section-full {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}

@media (min-width: 1024px) {

.section-full {
    padding-left: 2.5rem;

    padding-right: 2.5rem
}
  }

.section-native h1,
  .section-native h2,
  .section-native h3,
  .section-native h4,
  .section-native h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-native blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-native blockquote p {
      font-size: 1.5rem;
    }

.section-native blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

@media (min-width: 1024px) {

.section-native {
    padding-left: 2rem !important;

    padding-right: 2rem !important
}
  }

@media print {

.section-native {
    max-width: none !important;

    padding-left: 0 !important;

    padding-right: 0 !important
}
  }

.section-native {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

.section-styling h1,
  .section-styling h2,
  .section-styling h3,
  .section-styling h4,
  .section-styling h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-styling blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-styling blockquote p {
      font-size: 1.5rem;
    }

.section-styling blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

.lesson-hero {
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  padding-top: 1rem;
  margin-bottom: 2rem;
  position: relative;
}

.lesson-hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --bg-opacity: 1;
    background-color: #232323;
    background-color: rgba(35, 35, 35, var(--bg-opacity));
  }

@media print {

.lesson-hero:before {
      display: none
  }
    }

@media print {

.lesson-hero {
    padding-bottom: 1rem
}
  }

.lesson-hero__inner {
    position: relative;
  }

@media print {

.lesson-hero__inner {
      display: block;

      padding-left: 0;

      padding-right: 0;

      max-width: none
  }
    }

.lesson-hero__content {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    text-align: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 0.5rem;
  }

@media (min-width: 1024px) {

.lesson-hero__content {
      padding-left: 2rem;

      padding-right: 2rem
  }
    }

@media print {

.lesson-hero__content {
      text-align: left;

      max-width: none;

      margin-left: 0;

      margin-right: 0;

      padding-left: 0;

      padding-right: 0
  }
    }

.lesson-hero__unit {
    font-weight: 700;
  }

.lesson-hero__heading {
    margin-bottom: 1rem;
  }

.lesson-hero__meta {
    margin-bottom: 1.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    font-weight: 700;
  }

.lesson-hero__subject {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom-width: 1px;
    border-color: transparent;
    white-space: nowrap;
    display: inline-block;
    --text-opacity: 1;
    color: #fff;
    color: rgba(255, 255, 255, var(--text-opacity));
    text-decoration: none;
    transition: border 300ms ease-in-out;
  }

.lesson-hero__subject:hover,
    .lesson-hero__subject:focus {
      --text-opacity: 1;
      color: #fff;
      color: rgba(255, 255, 255, var(--text-opacity));
    }

.lesson-hero__excerpt {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.375;
  }

.lesson-hero__print {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

@media (min-width: 1024px) {

.lesson-hero__print {
      padding-left: 2rem;

      padding-right: 2rem
  }
    }

.lesson-hero__print button {
      font-size: 0.875rem;
      text-transform: uppercase;
      font-weight: 700;
      display: flex;
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
      margin-right: 15px;
    }

.lesson-hero__print button span {
        line-height: 1;
        transition: border 300ms ease-in-out;
        margin-top: 4px;
      }

.lesson-hero__print button svg {
        display: inline-block;
        margin-left: 0.5rem;
      }

.lesson-hero__print button:hover,
      .lesson-hero__print button:focus {
        --bg-opacity: 1;
        background-color: #1F1F1F;
        background-color: rgba(31, 31, 31, var(--bg-opacity));
        box-shadow: 15px 0px 0px 0px #1F1F1F,
          -15px 0px 0px 0px #1F1F1F;
      }

@media print {

.lesson-hero__print {
      display: none
  }
    }

.lesson-hero__gallery {
    position: relative;
  }

.lesson-hero__gallery:before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      --bg-opacity: 1;
      background-color: #fff;
      background-color: rgba(255, 255, 255, var(--bg-opacity));
      height: 50%;
    }

.lesson-hero__gallery-inner {
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto;
      padding: 1.5rem;
      max-width: 1080px;
      padding-top: 0;
    }

@media (min-width: 1024px) {

.lesson-hero__gallery-inner {
        padding-left: 2.5rem;

        padding-right: 2.5rem
    }
      }

@media print {

.lesson-hero__gallery-inner {
        max-width: none;

        padding-left: 0;

        padding-right: 0;

        margin-left: 0;

        margin-right: 0
    }
      }

.lesson-hero .background-pattern {
    top: -120px;
    opacity: 0.12;
    background-size: 100%;
  }

@media print {

.lesson-hero .background-pattern {
      display: none
  }
    }

.print-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  border-width: 1px;
  --border-opacity: 1;
  border-color: #232323;
  border-color: rgba(35, 35, 35, var(--border-opacity));
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
  padding: 1.5rem;
  padding-top: 2rem;
  width: 90%;
  min-width: calc(320px - 1.5rem - 1.5rem);
  max-width: 500px;
  transform: translate(-50%, -50%);
}

.print-dialog__backdrop {
    content: '';
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
  }

.print-dialog__close {
    text-align: right;
    font-size: 1.25rem;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }

.print-dialog__close button {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      padding-top: 0.5rem;
    }

.print-dialog__close button:hover,
      .print-dialog__close button:focus {
        --bg-opacity: 1;
        background-color: #F1F1F1;
        background-color: rgba(241, 241, 241, var(--bg-opacity));
      }

.section {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}
  @media (min-width: 1024px) {.section {
    padding-left: 2rem;

    padding-right: 2rem
}
  }

.section-full {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}

@media (min-width: 1024px) {

.section-full {
    padding-left: 2.5rem;

    padding-right: 2.5rem
}
  }

.section-native h1,
  .section-native h2,
  .section-native h3,
  .section-native h4,
  .section-native h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-native blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-native blockquote p {
      font-size: 1.5rem;
    }

.section-native blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

@media (min-width: 1024px) {

.section-native {
    padding-left: 2rem !important;

    padding-right: 2rem !important
}
  }

@media print {

.section-native {
    max-width: none !important;

    padding-left: 0 !important;

    padding-right: 0 !important
}
  }

.section-native {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

.section-styling h1,
  .section-styling h2,
  .section-styling h3,
  .section-styling h4,
  .section-styling h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-styling blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-styling blockquote p {
      font-size: 1.5rem;
    }

.section-styling blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

.related-lessons {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

@media (min-width: 1024px) {

.related-lessons {
    padding-left: 2rem;

    padding-right: 2rem
}
  }

@media print {

.related-lessons {
    max-width: none;

    padding-left: 0;

    padding-right: 0;

    margin-left: 0;

    margin-right: 0;

    margin-bottom: 0
}
  }

.related-lessons__heading {
    padding-top: 0.5rem;
    margin-bottom: 1rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.related-lessons__container {
    display: block;
  }

@media (min-width: 768px) {

.related-lessons__container {
      display: flex
  }
    }

.related-lessons__container .lesson-card {
      width: 100%;
      margin-bottom: 2rem;
    }

@media (min-width: 768px) {

.related-lessons__container .lesson-card {
        width: 50%;

        margin-bottom: 0
    }
      }

.related-lessons__container .lesson-card:first-child {
        margin-right: 2rem;
      }

.related-lessons__container .lesson-card .background-pattern {
        width: 175%;
        height: 175%;
      }

.section {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}
  @media (min-width: 1024px) {.section {
    padding-left: 2rem;

    padding-right: 2rem
}
  }

.section-full {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}

@media (min-width: 1024px) {

.section-full {
    padding-left: 2.5rem;

    padding-right: 2.5rem
}
  }

.section-native h1,
  .section-native h2,
  .section-native h3,
  .section-native h4,
  .section-native h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-native blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-native blockquote p {
      font-size: 1.5rem;
    }

.section-native blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

@media (min-width: 1024px) {

.section-native {
    padding-left: 2rem !important;

    padding-right: 2rem !important
}
  }

@media print {

.section-native {
    max-width: none !important;

    padding-left: 0 !important;

    padding-right: 0 !important
}
  }

.section-native {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

.section-styling h1,
  .section-styling h2,
  .section-styling h3,
  .section-styling h4,
  .section-styling h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-styling blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-styling blockquote p {
      font-size: 1.5rem;
    }

.section-styling blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

.next-lesson {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 1024px) {

.next-lesson {
    padding-left: 2rem;

    padding-right: 2rem
}
  }

@media print {

.next-lesson {
    max-width: none;

    padding-left: 0;

    padding-right: 0;

    margin-left: 0;

    margin-right: 0
}
  }

.next-lesson__heading {
    padding-top: 0.5rem;
    margin-bottom: 1rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.filter {
  padding-top: 0.25rem;
  border-top-width: 2px;
  --border-opacity: 1;
  border-color: #232323;
  border-color: rgba(35, 35, 35, var(--border-opacity));
  margin-bottom: 3.5rem;
}
  .filter__items--buttons {
      margin-top: -0.25rem;
      margin-bottom: -0.25rem;
      margin-left: -0.5rem;
      margin-right: -0.5rem;
    }
  .filter__item__input:hover + .filter__item__label {
          --bg-opacity: 1;
          background-color: #F1F1F1;
          background-color: rgba(241, 241, 241, var(--bg-opacity));
          --border-opacity: 1;
          border-color: #F1F1F1;
          border-color: rgba(241, 241, 241, var(--border-opacity));
        }
  .filter__item__input:focus:not(:hover) + .filter__item__label {
          color: #000;
          outline: 0;
        }
  .filter__item__label {
      line-height: 1;
      display: block;
      border-width: 1px;
      cursor: pointer;
      transition: background 300ms ease, border 300ms ease;
    }
  /* CHECKBOX FILTER */
  /* Input */
  .filter__check .filter__item__input:focus:not(:hover) + .filter__item__label {
          --bg-opacity: 1;
          background-color: #F1F1F1;
          background-color: rgba(241, 241, 241, var(--bg-opacity));
          --border-opacity: 1;
          border-color: #6F6F6F;
          border-color: rgba(111, 111, 111, var(--border-opacity));
        }
  /* Label */
  .filter__check .filter__item__label {
      text-align: left;
      display: block;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      border-color: transparent;
      width: 100%;
      display: flex;
      align-items: center;
    }
  /* Checkbox icon */
  .filter__check .filter__item__checkbox {
      position: relative;
      margin-right: 0.5rem;
      padding-bottom: 3px;
    }
  .filter__check .filter__item__checkbox:before {
        display: block;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        vertical-align: middle;
        border-width: 2px;
        --border-opacity: 1;
        border-color: #232323;
        border-color: rgba(35, 35, 35, var(--border-opacity));
        text-align: center;
        content: '';
        font-family: var(--font-black);
        width: 20px;
        height: 20px;
        box-shadow: 2px 2px 0 0px #231f20;
        line-height: 0.7;
        font-size: 1.35rem;
      }
  .filter__check svg {
      flex-shrink: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
    }
  /* Selected checkbox */
  .filter__check--selected .filter__item__checkbox:before {
        content: 'x';
      }
  /* BUTTON FILTER */
  .filter__button {
    display: inline-block;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  /* Input */
  .filter__button .filter__item__input:focus:not(:hover) + .filter__item__label {
          --bg-opacity: 1;
          background-color: #E1E1E1;
          background-color: rgba(225, 225, 225, var(--bg-opacity));
          border-color: transparent;
        }
  /* Label */
  .filter__button .filter__item__label {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      text-transform: uppercase;
      --border-opacity: 1;
      border-color: #E1E1E1;
      border-color: rgba(225, 225, 225, var(--border-opacity));
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 0.875rem;
      font-family: var(--font-bold);
    }
  /* Selected button */
  .filter__button--selected .filter__item__input:hover + .filter__item__label {
            border-color: transparent;
            background: rgba(var(--brand-color), 0.5);
          }
  .filter__button--selected .filter__item__input:focus:not(:hover) + .filter__item__label {
            background-color: rgb(var(--brand-color-focus));
          }
  .filter__button--selected .filter__item__label {
        border-color: transparent;
        background: rgb(var(--brand-color));
      }
  .filter__more {
    text-align: left;
    display: block;
    margin-top: 1rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .filter__more svg {
      margin-left: 0.5rem;
      fill: currentColor;
    }

@media (min-width: 768px) {.video-card__wrapper {
      height: 100%
  }
    }
  @media (min-width: 768px) {
  .video-card__inner {
      display: flex;

      flex-direction: column;

      height: 100%
  }
    }
  .video-card__player {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }
  .video-card__player iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  .video-card__content {
    --bg-opacity: 1;
    background-color: #F1F1F1;
    background-color: rgba(241, 241, 241, var(--bg-opacity));
    padding: 1.5rem;
  }
  @media (min-width: 768px) {
  .video-card__content {
      flex-grow: 1
  }
    }
  @media (min-width: 640px) {
  .video-card__meta {
      display: flex;

      justify-content: space-between;

      margin-left: -1rem;

      margin-right: -1rem
  }
    }
  @media (min-width: 768px) {
  .video-card__meta {
      display: block;

      margin-left: 0;

      margin-right: 0
  }
    }
  @media (min-width: 1024px) {
  .video-card__meta {
      display: flex;

      justify-content: space-between;

      margin-left: -1rem;

      margin-right: -1rem
  }
    }
  .video-card__details {
    margin-bottom: 0.5rem;
  }
  @media (min-width: 640px) {
  .video-card__details {
      padding-left: 1rem;

      padding-right: 1rem;

      margin-bottom: 0
  }
    }
  @media (min-width: 768px) {
  .video-card__details {
      padding-left: 0;

      padding-right: 0;

      margin-bottom: 0.5rem
  }
    }
  @media (min-width: 1024px) {
  .video-card__details {
      padding-left: 1rem;

      padding-right: 1rem;

      margin-bottom: 0
  }
    }
  .video-card__datetime {
    --text-opacity: 1;
    color: #757575;
    color: rgba(117, 117, 117, var(--text-opacity));
    margin-bottom: 0;
  }
  .video-card__download {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  @media (min-width: 640px) {
  .video-card__download {
      padding-left: 1rem;

      padding-right: 1rem
  }
    }
  @media (min-width: 768px) {
  .video-card__download {
      padding-left: 0;

      padding-right: 0
  }
    }
  @media (min-width: 1024px) {
  .video-card__download {
      padding-left: 1rem;

      padding-right: 1rem
  }
    }
  .video-card__download svg {
      display: inline-block;
      margin-left: 0.5rem;
      fill: currentColor;
    }

.nav-link {
  --text-opacity: 1;
  color: #D3D3D3;
  color: rgba(211, 211, 211, var(--text-opacity));
  text-decoration: none;
  letter-spacing: 0.025em;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
  .nav-link:hover,
  .nav-link:focus {
    --text-opacity: 1;
    color: #fff;
    color: rgba(255, 255, 255, var(--text-opacity));
    --bg-opacity: 1;
    background-color: #1F1F1F;
    background-color: rgba(31, 31, 31, var(--bg-opacity));
  }
  .nav-link--active {
    --text-opacity: 1;
    color: #fff;
    color: rgba(255, 255, 255, var(--text-opacity));
    --bg-opacity: 1;
    background-color: #1F1F1F;
    background-color: rgba(31, 31, 31, var(--bg-opacity));
    font-family: var(--font-bold);
  }
  .nav-link--active.nav-link--mobile {
      --bg-opacity: 1;
      background-color: #161616;
      background-color: rgba(22, 22, 22, var(--bg-opacity));
      --border-opacity: 1;
      border-color: #161616;
      border-color: rgba(22, 22, 22, var(--border-opacity));
    }
  .nav-link--active.nav-link--mobile:after {
        width: 100%;
      }
  .nav-link--button {
    display: block;
    width: 100%;
    text-align: left;
  }
  .nav-link--block {
    display: block;
  }
  .nav-link--unit span:before {
      --text-opacity: 1;
      color: #D3D3D3;
      color: rgba(211, 211, 211, var(--text-opacity));
    }
  .nav-link--unit__1 {
      --text-opacity: 1;
      color: #9bce7c;
      color: rgba(155, 206, 124, var(--text-opacity));
    }
  .nav-link--unit__1:hover,
      .nav-link--unit__1:focus {
        --text-opacity: 1;
        color: #9bce7c;
        color: rgba(155, 206, 124, var(--text-opacity));
      }
  .nav-link--unit__1 span:before {
        content: 'Unit 1: ';
      }
  .nav-link--unit__2 {
      --text-opacity: 1;
      color: #6CC6C8;
      color: rgba(108, 198, 200, var(--text-opacity));
    }
  .nav-link--unit__2:hover,
      .nav-link--unit__2:focus {
        --text-opacity: 1;
        color: #6CC6C8;
        color: rgba(108, 198, 200, var(--text-opacity));
      }
  .nav-link--unit__2 span:before {
        content: 'Unit 2: ';
      }
  .nav-link--unit__3 {
      --text-opacity: 1;
      color: #9F7DBF;
      color: rgba(159, 125, 191, var(--text-opacity));
    }
  .nav-link--unit__3:hover,
      .nav-link--unit__3:focus {
        --text-opacity: 1;
        color: #9F7DBF;
        color: rgba(159, 125, 191, var(--text-opacity));
      }
  .nav-link--unit__3 span:before {
        content: 'Unit 3: ';
      }
  .nav-link--unit:hover span:before, .nav-link--unit:focus span:before, .nav-link--unit.nav-link--active span:before {
        --text-opacity: 1;
        color: #fff;
        color: rgba(255, 255, 255, var(--text-opacity));
      }
  .nav-link--mobile {
    position: relative;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .nav-link--mobile:hover,
    .nav-link--mobile:focus {
      --bg-opacity: 1;
      background-color: #161616;
      background-color: rgba(22, 22, 22, var(--bg-opacity));
      --border-opacity: 1;
      border-color: #161616;
      border-color: rgba(22, 22, 22, var(--border-opacity));
    }
  .nav-link--mobile:hover:before, .nav-link--mobile:focus:before {
        --bg-opacity: 1;
        background-color: #161616;
        background-color: rgba(22, 22, 22, var(--bg-opacity));
      }
  .nav-link--mobile:hover:after, .nav-link--mobile:focus:after {
        width: 100%;
      }
  .nav-link--mobile:before {
      content: '';
      position: absolute;
      background-color: transparent;
      width: 100%;
      left: 50%;
      top: -2px;
      height: 2px;
      transform: translateX(-50%);
    }
  .nav-link--mobile:after {
      content: '';
      position: absolute;
      --bg-opacity: 1;
      background-color: #161616;
      background-color: rgba(22, 22, 22, var(--bg-opacity));
      left: 50%;
      width: calc(100% - 3rem);
      height: 2px;
      bottom: -2px;
      transform: translateX(-50%);
    }
  .nav-link__wrapper:last-child .nav-link:after {
      background-color: transparent;
    }

.dropdown__arrow {
    transition: transform 300ms ease;
  }

.navigation {
  position: relative;
  z-index: 999;
}
  @media (min-width: 1280px) {.navigation {
    margin-right: -1rem
}
  }
  @media print {.navigation {
    margin-right: 0
}
  }
  /* Toolbar */
  .navigation__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 1280px;
    z-index: 999;
    padding: 1.5rem;
  }
  @media (min-width: 1280px) {
  .navigation__toolbar {
      padding-left: 2rem;

      padding-right: 2rem
  }
    }
  @media print {
  .navigation__toolbar {
      max-width: none;

      padding-left: 0;

      padding-right: 0;

      padding-top: 0
  }
    }
  .navigation__toolbar:before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: calc(100% - 3rem);
      transform: translate(-50%);
      height: 2px;
      background: var(--brand-color);
    }
  @media (min-width: 1280px) {
  .navigation__toolbar:before {
        width: calc(100% - 4.5rem);

        transform: translate(calc(-50% - 0.5rem))
    }
      }
  @media print {
  .navigation__toolbar:before {
        display: none
    }
      }
  /* Logo */
  @media (min-width: 1280px) {
  .navigation__logo {
      width: 25%;

      flex-grow: 0;

      flex-shrink: 0
  }
    }
  @media (min-width: 1280px) {
  .navigation__logo {
      width: 20%
  }
    }
  .navigation__logo a {
      padding: 0;
    }
  .navigation__logo a:hover {
        background-color: transparent;
      }
  .navigation__logo img {
      width: 16rem;
    }
  /* Menu */
  .navigation__menu {
    font-size: 1rem;
    margin-left: 0;
    margin-bottom: 0;
    list-style-type: none;
  }
  @media (min-width: 1280px) {
  .navigation__menu {
      display: flex;

      flex: none;

      justify-content: center
  }
    }
  @media print {
  .navigation__menu {
      display: none !important
  }
    }
  .navigation__menu li {
      margin-bottom: 0 !important;
    }
  .navigation__menu--desktop {
    display: none;
  }
  @media (min-width: 1280px) {
  .navigation__menu--desktop {
      display: flex
  }
    }
  .navigation__menu--mobile {
    font-size: 1.125rem;
    --bg-opacity: 1;
    background-color: #1F1F1F;
    background-color: rgba(31, 31, 31, var(--bg-opacity));
    margin-bottom: 1rem;
  }
  /* Mobile back link */
  .navigation__back-link {
    font-size: 1rem;
    text-align: center;
    width: 100%;
  }
  @media (min-width: 1280px) {
  .navigation__back-link {
      text-align: right;

      width: 25%;

      flex-grow: 0;

      flex-shrink: 0
  }

      .navigation__back-link a {
        display: inline-block;
        padding-left: 1rem;
      }
    }
  @media (min-width: 1280px) {
  .navigation__back-link {
      width: 20%
  }
    }
  @media print {
  .navigation__back-link {
      display: none
  }
    }
  /* Mobile tray toggle button */
  .navigation__toggle {
    --text-opacity: 1;
    color: #fff;
    color: rgba(255, 255, 255, var(--text-opacity));
  }
  @media (min-width: 1280px) {
  .navigation__toggle {
      display: none
  }
    }
  @media print {
  .navigation__toggle {
      display: none
  }
    }
  .navigation__toggle rect {
      transition: opacity 300ms ease, transform 300ms ease;
    }
  /* Mobile tray */
  .navigation__tray {
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    z-index: -1;
    transform: translateY(-100%);
    transition: transform 300ms ease;
  }
  @media (min-width: 1280px) {
  .navigation__tray {
      display: none
  }
    }
  .navigation__tray__content {
    opacity: 0;
  }
  /* Open mobile tray */
  .navigation--open .navigation__toggle rect:nth-child(1) {
        transform: rotate(45deg) translate(4px, -4px);
      }
  .navigation--open .navigation__toggle rect:nth-child(2) {
        opacity: 0;
      }
  .navigation--open .navigation__toggle rect:nth-child(3) {
        transform: rotate(-45deg) translate(-11px, -4px);
      }
  .navigation--open .navigation__tray {
      transform: translateY(
        -1px
      ); /* -1px offset ensures that there isn't a gap between the navbar background and the menu background */
    }
  .navigation--open .navigation__tray__content {
      opacity: 1;
    }
  .navigation.active .navigation__toolbar, .navigation--open.inactive .navigation__toolbar {
      --bg-opacity: 1;
      background-color: #232323;
      background-color: rgba(35, 35, 35, var(--bg-opacity));
    }
  .navigation.active .navigation__tray, .navigation--open.inactive .navigation__tray {
      --bg-opacity: 1;
      background-color: #232323;
      background-color: rgba(35, 35, 35, var(--bg-opacity));
    }
  .navigation.active .navigation__tray__content, .navigation--open.inactive .navigation__tray__content {
        opacity: 1;
      }

.site-header {
  font-size: 0.875rem;
}

.skip {
  position: absolute;
  overflow: hidden;
  text-align: left;
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  --bg-opacity: 1;
  background-color: #9F7DBF;
  background-color: rgba(159, 125, 191, var(--bg-opacity));
  padding: 0.5rem;
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
  z-index: 9999;
}

.skip:active,
  .skip:focus,
  .skip:hover {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
  }

.section {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}
  @media (min-width: 1024px) {.section {
    padding-left: 2rem;

    padding-right: 2rem
}
  }

.section-full {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}

@media (min-width: 1024px) {

.section-full {
    padding-left: 2.5rem;

    padding-right: 2.5rem
}
  }

.section-native h1,
  .section-native h2,
  .section-native h3,
  .section-native h4,
  .section-native h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-native blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-native blockquote p {
      font-size: 1.5rem;
    }

.section-native blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

@media (min-width: 1024px) {

.section-native {
    padding-left: 2rem !important;

    padding-right: 2rem !important
}
  }

@media print {

.section-native {
    max-width: none !important;

    padding-left: 0 !important;

    padding-right: 0 !important
}
  }

.section-native {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

.section-styling h1,
  .section-styling h2,
  .section-styling h3,
  .section-styling h4,
  .section-styling h5 {
    padding-top: 0.5rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #232323;
    border-color: rgba(35, 35, 35, var(--border-opacity));
  }

.section-styling blockquote {
    border-style: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    --text-opacity: 1;
    color: #232323;
    color: rgba(35, 35, 35, var(--text-opacity));
    position: relative;
  }

.section-styling blockquote p {
      font-size: 1.5rem;
    }

.section-styling blockquote:before {
      position: absolute;
      left: 0;
      --text-opacity: 1;
      color: #232323;
      color: rgba(35, 35, 35, var(--text-opacity));
      font-size: 5rem;
      content: '\201C';
      top: -0.5rem;
    }

.footer {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  --bg-opacity: 1;
  background-color: #232323;
  background-color: rgba(35, 35, 35, var(--bg-opacity));
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
}

@media (min-width: 768px) {

.footer {
    padding-top: 4rem;

    padding-bottom: 4rem
}
  }

@media print {

.footer {
    display: none
}
  }

.footer a {
    --text-opacity: 1;
    color: #fff;
    color: rgba(255, 255, 255, var(--text-opacity));
    text-decoration: none;
    border-bottom-width: 1px;
    border-color: transparent;
    display: inline-block;
    font-family: var(--font-bold);
  }

.footer a:hover,
    .footer a:focus {
      --border-opacity: 1;
      border-color: #fff;
      border-color: rgba(255, 255, 255, var(--border-opacity));
    }

.footer__inner {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    margin-left: auto;
    margin-right: auto;
  }

@media (min-width: 1024px) {

.footer__inner {
      padding-left: 2.5rem;

      padding-right: 2.5rem;
  }
    }

.footer__content {
    align-items: flex-start;
    padding-top: 0.75rem;
    border-top-width: 2px;
    --border-opacity: 1;
    border-color: #fff;
    border-color: rgba(255, 255, 255, var(--border-opacity));
  }

@media (min-width: 768px) {

.footer__content {
      display: flex;

      flex-wrap: wrap;

      justify-content: space-between
  }
    }

.footer__logo {
    margin-bottom: 1rem;
  }

@media (min-width: 768px) {

.footer__logo {
      padding-right: 1rem;

      max-width: 50%
  }
    }

@media (min-width: 1024px) {

.footer__logo {
      margin-bottom: 0;

      width: 33.333333%
  }
    }

.footer__logo a {
      border: none;
    }

.footer__logo img {
      width: 8rem;
    }

@media (min-width: 768px) {

.footer__logo img {
        width: 16rem
    }
      }

.footer__contact {
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
  }

@media (min-width: 640px) {

.footer__contact {
      display: flex
  }
    }

@media (min-width: 768px) {

.footer__contact {
      justify-content: space-between;

      max-width: 50%;

      margin-bottom: 1rem;

      padding-left: 1rem
  }
    }

@media (min-width: 1024px) {

.footer__contact {
      margin-bottom: 0;

      padding-left: 1rem;

      padding-right: 1rem;

      max-width: 33.33333%
  }

      .footer__contact p {
        margin-bottom: 0;
        font-size: 0.875rem;
      }
    }

.footer__meta {
    font-size: 0.875rem;
    width: 100%;
  }

@media (min-width: 768px) {

.footer__meta {
      text-align: right
  }
    }

@media (min-width: 1024px) {

.footer__meta {
      padding-left: 1rem;

      width: 33.333333%
  }
    }

.footer__meta a {
      white-space: nowrap;
      text-transform: uppercase;
      font-weight: 700;
    }

.footer__divider {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    display: none;
  }

@media (min-width: 640px) {

.footer__divider {
      display: inline
  }
    }

@media (min-width: 1024px) {

.footer__divider {
      display: none
  }
    }

@media (min-width: 1280px) {

.footer__divider {
      display: inline
  }
    }

.footer__copyright {
    white-space: nowrap;
    display: block;
  }

@media (min-width: 640px) {

.footer__copyright {
      display: inline
  }
    }

@media (min-width: 1024px) {

.footer__copyright {
      display: block
  }
    }

@media (min-width: 1280px) {

.footer__copyright {
      display: inline
  }
    }

#content {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}