@charset "UTF-8";
/* -------------------------------------------------------------------------- */
/*                                  VARIABLES                                 */
/* -------------------------------------------------------------------------- */
@-webkit-keyframes submenu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes submenu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* -------------------------------------------------------------------------- */
/*                                 TYPOGRAPHY                                 */
/* -------------------------------------------------------------------------- */
main h1,
main h2 {
  font-weight: 300;
}

main h1 {
  display: inline-block;
  margin-top: 0;
  color: #003966;
  letter-spacing: -0.01em;
  font-size: 42px;
  line-height: 51px;
}
main h1 small {
  margin: 30px 0;
  display: block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  word-spacing: 0.1em;
  line-height: 24.5px;
}
main h1 small span {
  display: block;
  font-weight: 300;
}

main h2 {
  letter-spacing: -0.005em;
  font-size: 27px;
  line-height: 36px;
}

main h3, main .cta-link {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  margin-bottom: 0;
  margin-top: 0;
}

main p {
  line-height: 33px;
  letter-spacing: -0.005em;
  margin-top: 0;
  margin-bottom: 1rem;
}

main .cta-link {
  text-decoration: none;
  line-height: 35px;
}
main .cta-link::after {
  content: "›";
  margin-left: 5px;
}

/* ----------------------- TYPOGRAPHY - MEDIA QUERIES ----------------------- */
@media (min-width: 768px) {
  main h1 {
    font-size: calc(2.625rem + (1vw - 4px) * 3.2308);
  }
  main h1 small {
    margin: 66px 0 46px;
    font-size: 14px;
    line-height: 24.5px;
  }
  main h1 small span {
    display: inline-block;
  }
  main h1 small span::before {
    content: "(";
  }
  main h1 small span::after {
    content: ")";
  }
  main h2 {
    font-size: 42px;
    line-height: 52px;
  }
  main h1,
main h2,
main h3,
main .cta-link {
    line-height: 140%;
  }
}
@media (min-width: 992px) {
  main h3, main .cta-link {
    font-size: 27px;
    line-height: 42px;
  }
}
@media (min-width: 1201px) {
  main h1 {
    font-size: 84px;
  }
}
@media (min-width: 768px) {
  main h1 {
    margin-bottom: 3.517rem;
  }
}
/* -------------------------------------------------------------------------- */
/*                                   LAYOUT                                   */
/* -------------------------------------------------------------------------- */
main .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 42px;
}

main > section {
  padding: 40px 0 120px;
}
main > section.hero {
  background: url(../images/nelson_hero.jpg) top center/cover no-repeat;
  margin-top: 80px;
  overflow-x: hidden;
}
main > section.hero h1 {
  position: relative;
  padding: 5px 12px 10px 0;
  display: inline-block;
  background-color: #fff;
  border-radius: 0 18px 18px 0;
}
main > section.hero h1::before {
  content: "";
  background-color: #fff;
  position: absolute;
  height: 100%;
  width: 1000%;
  left: -1000%;
  top: 0;
}
main > section.hero .js-modal-btn {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
main > section.hero .js-modal-btn img {
  display: inline-block;
}
main > section.hero p {
  margin: 0;
}
main > section.hero h2 {
  margin: 0;
  color: #fff;
}
main > section.hero .background-video {
  display: none;
}
main > section.secondary {
  background-color: #f5f8fa;
  padding-bottom: 82px;
  margin-bottom: 0;
  box-shadow: 0px 60px 60px -60px rgba(0, 0, 0, 0.1) inset;
  -webkit-box-shadow: 0px 60px 60px -60px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0px 60px 60px -60px rgba(0, 0, 0, 0.1) inset;
}
main > section.secondary .container .content h1 {
  display: none;
}
main > section.transitional {
  margin-top: 48px;
  margin-bottom: 82px;
}
main > section.transitional h2 {
  margin: 0;
  margin-bottom: 0.125rem;
}
main > section.transitional p {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 28px;
}
main > section.transitional p:first-of-type {
  margin-top: 0;
}
main > section.secondary .container p, main > section.resources .container p {
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 27px;
}
main > section.secondary .container p strong, main > section.resources .container p strong {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 24px;
}
main > section.secondary .container h2, main > section.resources .container h2 {
  text-align: center;
  font-size: 27px;
  line-height: 52px !important;
  margin-top: 44px;
  margin-bottom: 10px;
}
main > section.resources {
  padding-bottom: 82px;
}
main > section.resources .container img {
  border-radius: 18px;
  margin: 36px 0 54px;
  display: block;
}
main > section.resources .container h2 {
  text-align: center;
}
main > section.announcements {
  background-color: #017ACD;
  padding-bottom: 82px;
  margin-bottom: 0;
  box-shadow: 0px 60px 60px -60px rgba(0, 0, 0, 0.29) inset;
  -webkit-box-shadow: 0px 60px 60px -60px rgba(0, 0, 0, 0.29) inset;
  -moz-box-shadow: 0px 60px 60px -60px rgba(0, 0, 0, 0.29) inset;
}
main > section.announcements h1 {
  color: #fff;
}
main > section.announcements .articles {
  display: grid;
  gap: 30px;
}
main > section.announcements .articles article {
  background-color: #fff;
  padding: 42px 30px;
  text-align: left;
  border-radius: 18px;
  box-shadow: 0px 1.7px 2.2px rgba(0, 0, 0, 0.006), 0px 4.1px 5.3px rgba(0, 0, 0, 0.008), 0px 7.6px 10px rgba(0, 0, 0, 0.01), 0px 13.6px 17.9px rgba(0, 0, 0, 0.012), 0px 25.5px 33.4px rgba(0, 0, 0, 0.014), 0px 61px 80px rgba(0, 0, 0, 0.02);
}
main > section.announcements .articles article p,
main > section.announcements .articles article .cta-link {
  font-size: 14px;
  line-height: 27px;
}
main > section.announcements .articles article .article-icon {
  width: 58px;
  margin-bottom: 1rem;
}
main > section.announcements .articles article p {
  margin-bottom: 0.5rem;
}
main > section h2:only-child {
  margin: 0;
}
main > section h2:first-child {
  margin-top: 0;
}
main > section p:last-child {
  margin-bottom: 0;
}
main > section img {
  max-width: 100%;
  display: block;
}

/* ------------------------- LAYOUT - MEDIA QUERIES ------------------------- */
@media (min-width: 768px) {
  main .container {
    padding: 0 82px;
  }

  main > section.hero {
    padding: 80px 32px 40px;
  }
  main > section.transitional {
    margin: 96px 0;
  }
  main > section.secondary .container p, main > section.resources .container p {
    font-size: 16px;
    line-height: 33px;
  }
  main > section.secondary .container p strong, main > section.resources .container p strong {
    font-size: 27px;
    line-height: 33px;
  }
  main > section.secondary .container h2, main > section.resources .container h2 {
    text-align: center;
    font-size: 42px;
    line-height: 36px;
    margin-top: 125px;
    margin-bottom: 22px;
  }
  main > section.secondary .container picture img {
    width: 60%;
    margin: 30px auto;
  }
  main > section.resources .resources-image img {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .articles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  main > section.hero {
    margin-top: 60px;
    background-attachment: fixed;
    background-size: contain;
    position: relative;
    overflow: hidden;
    padding: 160px 32px 60px;
  }
  main > section.hero .background-video {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  main > section.hero .container {
    position: relative;
    z-index: 1;
  }
  main > section.hero .container button {
    display: block;
  }
  main > section.hero video[poster] {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
  }
  main > section.secondary .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
  }
  main > section.secondary .container > h1 {
    display: none;
  }
  main > section.secondary .container > div {
    flex: 1;
  }
  main > section.secondary .container .content {
    flex: 1.2;
    margin-left: 100px;
  }
  main > section.secondary .container .content h1 {
    display: block !important;
  }
  main > section.secondary .container > h2 {
    flex-basis: 100%;
  }
  main > section.secondary .container p {
    width: 100%;
  }
  main > section.secondary .container picture img {
    width: 100%;
    max-width: 100%;
    margin: 100px 0 0;
  }
  main > section.transitional p {
    font-size: 27px;
    line-height: 177%;
    margin-bottom: 1.5rem;
  }
  main > section.resources .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
  }
  main > section.resources .container div {
    flex: 1;
  }
  main > section.resources .container .content {
    flex: 1;
    margin-right: 100px;
  }
  main > section.resources .container > h2 {
    flex-basis: 100%;
  }
  main > section.resources .container p {
    width: 100%;
  }
  main > section.resources .resources-image img {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-shadow: 0px 2.1px 2.2px rgba(0, 0, 0, 0.02), 0px 5px 5.3px rgba(0, 0, 0, 0.028), 0px 9.4px 10px rgba(0, 0, 0, 0.035), 0px 16.8px 17.9px rgba(0, 0, 0, 0.042), 0px 31.3px 33.4px rgba(0, 0, 0, 0.05), 0px 75px 80px rgba(0, 0, 0, 0.07);
  }
  main > section.announcements .articles {
    gap: 40px;
  }
  main > section.announcements .articles article p,
main > section.announcements .articles article .cta-link {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  main .container {
    padding: 0 32px;
  }

  main > section.transitional .container {
    max-width: 1120px;
  }
}
@media (min-width: 1680px) {
  main > section.hero {
    background-size: cover;
  }
}
@media (min-width: 2000px) {
  main > section.hero {
    padding: 340px 32px 240px;
  }
}
/*# sourceMappingURL=style.css.map */