:root {
--white: #FFFFFF;
--gray: #F5F5F5;
--beige: #E5DCCB;
--purple: #654389;
--midnight: #19124B;
--teal: #3E7E8E;
--blue: #567C9B;
--lime: #AECC2B;
--black-90: rgba(0, 0, 0, .9);
--open: "open-sans", sans-serif;
--fira: "fira-sans", sans-serif;
--fira2: "fira-sans-2", sans-serif;
--fields: "fields", sans-serif;
--body: 400 1.125rem/1.5 var(--open);
--sm: 700 .875rem/1.25 var(--open);
--lg: 400 1.375rem/1.5 var(--open);
--h1: 700 3rem/1 var(--fira);
--h1-lg: 700 4rem/1 var(--fira);
--h2: 700 2.25rem/1.25 var(--fira);
--h3: 700 1.5rem/1.25 var(--fields);
--purple-blue: linear-gradient(var(--purple), var(--blue));
--purple-blue-90: linear-gradient(90deg, var(--purple), var(--blue));
--transition: .4s ease;
--transition-short: .2s ease;
--transition-cubic: .4s cubic-bezier(.4, 0, .2, 1);
--gutter: 1.5rem;
--panel: clamp(3.5rem, 10vw, 4.5rem);
--wrap: max(var(--gutter), (100% - 78rem) / 2);
--wrap-sm: max(var(--gutter), (100% - 44rem) / 2);
--shadow: 0 0 .75rem rgba(0, 0, 0, .25)
}
@media (prefers-reduced-motion) {
:root {
--transition: 0ms ease
}
}
iframe, img, svg, video {
display: block;
max-width: 100%;
height: auto
}
iframe, video {
width: 100%;
aspect-ratio: 16 / 9;
border: 0
}
.purple-image-bg {
background-color: var(--purple) !important;
color: var(--white)
}
.purple-image-bg h2 {
color: inherit
}
.Cards {
display: flex;
flex-direction: column;
gap: 5rem
}
.story-sticky {
position: sticky;
top: 18rem
}
body .back-to-top {
background: var(--purple)
}
.search button {
background: var(--white)
}
@keyframes flip {
0% {
background-color: var(--gold-a11y);
transition-duration: 1.5s;
transition-timing-function: ease-in-out;
transform-style: preserve-3d;
perspective: 1000px;
transform: rotateY(180deg)
}
to {
transform: rotateY(0)
}
}
@keyframes fade-in {
0% {
opacity: 0
}
}
@keyframes fade-in-up {
0% {
transform: translateY(3rem);
opacity: 0
}
}
@keyframes fade-in-down {
0% {
transform: translateY(-3rem);
opacity: 0
}
}
@keyframes fade-in-right {
0% {
transform: translate(-3rem);
opacity: 0
}
}
@keyframes fade-in-left {
0% {
transform: translate(3rem);
opacity: 0
}
}
@keyframes fade-in-height {
0% {
height: 0;
opacity: 0
}
}
@keyframes highlight {
0% {
width: 0
}
}
@keyframes slide-in-right {
0% {
transform: translate(100%)
}
}
@keyframes slide-in-right-smooth {
0% {
transform: translate(-70%)
}
}
@keyframes slide-in-up {
0% {
transform: translateY(100%)
}
}
@keyframes slide-in-up-behind {
0% {
transform: translateY(50%)
}
}
@keyframes zoom-out {
0% {
transform: scale(1.2)
}
}
@media not print {
[data-animation=flip] {
animation: flip .6s ease both
}
[data-animation=fade-in-up] {
animation: fade-in-up .6s ease both
}
[data-animation=fade-in-down] {
animation: fade-in-down .6s ease both
}
[data-animation=fade-in-right] {
animation: fade-in-right .6s ease both
}
[data-animation=fade-in-left] {
animation: fade-in-left .6s ease both
}
[data-animation=fade-in-height] {
animation: fade-in-height .6s ease both
}
[data-animation=slide-in-left] {
animation: slide-in-left .6s ease both
}
[data-animation=slide-in-right] {
animation: slide-in-right .6s ease both
}
[data-animation=slide-in-up] {
animation: slide-in-up .6s ease both
}
[data-animation=slide-in-up-behind] {
animation: slide-in-up-behind .6s ease both
}
[data-animation=highlight]:before {
animation: highlight .6s ease both;
animation-delay: .75s
}
[data-animation=fade-in] {
animation: fade-in .6s ease both
}
[data-animation=zoom-out] {
animation: zoom-out 2s ease-out both
}
[data-animate] {
animation-play-state: paused
}
[data-animate]:before {
animation-play-state: paused
}
[data-animate=true] {
animation-play-state: running
}
[data-animate=true]:before {
animation-play-state: running !important
}
}
@media (prefers-reduced-motion: reduce) {
[data-animate] {
animation: none !important
}
}
.play-button {
--bg: var(--lime);
--fg: var(--midnight);
position: absolute;
inset: 0;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 3rem;
background: var(--bg) !important;
color: var(--fg) !important;
outline: .0625rem solid transparent;
transition: outline .2s ease,outline-offset .2s ease
}
.play-button:before {
content: "";
flex-shrink: 0;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask-image: url(../assets/play.svg);
mask-image: url(../assets/play.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat
}
.play-button:hover {
background: var(--bg);
color: var(--fg);
outline: .0625rem solid var(--bg) !important;
outline-offset: .25rem !important
}
.link-cover {
position: static
}
.link-cover:after {
content: "";
position: absolute;
inset: 0;
z-index: 1
}
.flush > :first-child {
margin-top: 0
}
.flush > :last-child {
margin-bottom: 0
}
.meta-pill {
display: inline-block;
padding: .5rem 1rem;
border: 1px solid var(--color, var(--lime));
border-radius: 2rem;
font-size: .75rem;
color: var(--color, var(--lime));
text-transform: none;
text-decoration: none;
box-shadow: none;
white-space: normal
}
.story-header {
--color: var(--midnight);
display: flex;
align-items: center;
gap: 3rem;
justify-content: space-between;
width: 100%;
max-width: 1400px;
margin: 0 auto;
margin-bottom: 5rem;
padding: 1rem;
border-bottom: 1px solid rgba(25,18,75,.16)
}
.topic-list {
display: flex;
align-items: center;
gap: 1rem;
padding: 0;
margin: 0;
list-style: none;
flex: 1;
font-size: .875rem;
text-transform: titlecase;
font-family: var(--open);
font-weight: 700
}
.story-tools {
display: flex;
align-items: center;
gap: 1rem;
padding: 0;
margin: 0;
list-style-type: none;
font-size: .875rem
}
.story-tools li {
position: relative;
margin: 0
}
.story-tools li:before {
content: "|";
position: absolute;
left: -.75rem
}
.story-tools li:first-child:before {
content: ""
}
.story-tools-share {
position: relative;
display: flex;
align-items: center;
gap: .5rem;
text-transform: uppercase;
font-size: .75rem;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none
}
.story-tools-share:before {
position: absolute;
right: 0;
content: "";
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 100%;
border: 1px solid var(--color, var(--lime))
}
.story-tools-share:after {
content: "";
flex-shrink: 0;
width: 24px;
height: 24px;
background-color: var(--color, var(--lime));
-webkit-mask-image: url(../assets/share.svg);
mask-image: url(../assets/share.svg);
-webkit-mask-size: 50% 50%;
mask-size: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center
}
.story-tools-share:before, .story-tools-share:after {
transition: var(--transition)
}
.story-tools-share:hover, .story-tools-share:focus {
color: inherit;
text-decoration: none
}
.story-tools-share:hover:before, .story-tools-share:focus:before {
background-color: var(--midnight)
}
.story-tools-share:hover:after, .story-tools-share:focus:after {
--color: #fff
}
.StoryUtility .story-tools-share:hover:before, .StoryUtility .story-tools-share:focus:before {
background-color: var(--lime)
}
.StoryUtility .story-tools-share:hover:after, .StoryUtility .story-tools-share:focus:after {
--color: var(--midnight)
}
.story-wrapper {
position: relative;
background-color: var(--white);
z-index: 50
}
.story-wrapper h1, .story-wrapper h2, .story-wrapper h3 {
font-family: var(--fields);
font-weight: 500
}
.story-wrapper .h2 {
font-size: 3rem
}
.story-wrapper .h3 {
font-size: 2rem
}
body {
color: var(--midnight);
font: var(--body)
}
h1, h2, h3 {
margin-block: 1.5em .5em;
color: var(--purple)
}
h1 {
font: var(--h1)
}
h2 {
font: var(--h2)
}
h3 {
font: var(--h3)
}
a {
color: inherit;
text-decoration: underline
}
a:hover {
color: var(--purple);
text-decoration: underline
}
.text-intro {
font-family: var(--fields);
font-size: 1.5rem;
font-weight: 500;
line-height: 1.5
}
@media (min-width: 992px) {
.text-intro {
font-size: 1.75rem
}
}
:focus {
outline: .25rem dashed var(--lime) !important;
outline-offset: .25rem !important
}
:focus:not(:focus-visible) {
outline: 0 !important;
outline-offset: 0 !important
}
a:has(>h1,>h2,>h3,>h4,>h5,>h6) {
display: block
}
.content-well ul {
padding-left: 2rem
}
.content-well h1, .content-well h2, .content-well h3 {
margin-block: 1.5em .5em
}
.two-column-content {
margin: 4rem 0 2rem;
padding: 0
}
@media (min-width: 48em) {
.two-column-content .content-well {
padding-right: 2rem
}
}
#newsListing .two-column-content .content-well {
margin-bottom: 0
}
:root:has(.Automodal) {
overflow: hidden
}
.Automodal {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
transition: opacity var(--transition);
background: none;
opacity: 0;
overflow: hidden
}
.Automodal::backdrop {
transition: opacity var(--transition);
background: var(--black-90);
opacity: 0
}
.Automodal--active {
opacity: 1
}
.Automodal--active::backdrop {
opacity: 1
}
.Automodal__close {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0;
border: 0;
background: none;
color: var(--white);
z-index: 1;
outline-color: var(--white);
transition: var(--transition)
}
.Automodal__close:before {
content: "";
display: block;
width: 2rem;
height: 2rem;
background: var(--white);
-webkit-mask: url(/assets/close.svg) center / 1rem no-repeat;
mask: url(/assets/close.svg) center / 1rem no-repeat
}
.Automodal__close:hover {
transform: scale(1.2)
}
.Automodal__viewport {
display: grid;
width: 100%;
height: 100%;
pointer-events: none
}
.Automodal__item {
display: grid;
grid-area: 1 / 1;
place-items: center;
padding: var(--panel) var(--wrap);
overflow: auto
}
.Automodal__content {
width: 100%;
pointer-events: auto
}
.btn {
--bg: var(--midnight);
--fg: var(--white);
padding: .875rem 1.125rem !important;
border: 0 !important;
border-radius: 2rem;
background: var(--bg) !important;
color: var(--fg) !important;
font: var(--sm);
text-transform: none;
text-decoration: none;
box-shadow: none !important;
white-space: normal;
outline: .0625rem solid transparent;
transition: outline .2s ease,outline-offset .2s ease
}
.btn.lime {
--bg: var(--lime) !important;
--fg: var(--midnight) !important
}
.btn.teal {
--bg: var(--teal) !important;
--fg: var(--white) !important
}
.btn:hover {
outline: .0625rem solid var(--bg) !important;
outline-offset: .25rem !important
}
.slick-arrow {
--bg: var(--midnight);
--fg: var(--white);
border-radius: 3rem;
background: var(--bg) !important;
color: var(--fg) !important;
outline: .0625rem solid transparent;
transition: outline .2s ease,outline-offset .2s ease
}
.slick-lime .slick-arrow {
--bg: var(--lime);
--fg: var(--midnight)
}
.slick-arrow i {
top: auto !important;
color: inherit !important;
font-size: 1rem !important
}
.slick-arrow:hover {
background: var(--bg);
color: var(--fg);
outline: .0625rem solid var(--bg) !important;
outline-offset: .25rem !important
}
@media (max-width: 991.98px) {
body.menu-is-open, body:has(#mobileMenu.menu-open) {
overflow: hidden
}
}
.back-to-top .icon-arrow_drop {
border-radius: 50%;
background: var(--midnight) !important;
color: var(--white) !important
}
.back-to-top:hover .icon-arrow_drop, .back-to-top:focus .icon-arrow_drop {
outline: .0625rem solid var(--midnight);
outline-offset: .25rem
}
#header:before {
display: none
}
.main-mobile-nav > .row {
align-items: center
}
.main-mobile-nav > .row svg {
display: block;
width: 20.25rem;
max-width: 100%;
fill: var(--white)
}
.mc-mobile-trigger {
display: block;
height: 2rem
}
.navigation {
display: flex;
align-items: center
}
.navigation .logo {
display: block;
width: 15rem;
fill: var(--white)
}
.navigation .logo svg {
display: block
}
@media (max-width: 991.98px) {
.navigation {
height: 5rem;
padding: 1rem 0;
background: var(--purple)
}
.navigation .nav-container {
height: 0
}
.navigation .mobile-menu {
margin-right: 1.25rem
}
.navigation .hamburger {
padding: 0 !important;
border: 0 !important;
color: var(--white)
}
.navigation .hamburger > i {
font-family: inherit;
font-weight: 400;
line-height: 1
}
.navigation .hamburger[aria-expanded=false] > i:before {
content: "";
display: block;
width: 2rem;
height: 1.5rem;
margin-top: .25rem;
border-top: .25rem solid;
border-bottom: .25rem solid;
background-image: linear-gradient(var(--white),var(--white));
background-position: center;
background-repeat: no-repeat;
background-size: 100% .25rem
}
.navigation .hamburger[aria-expanded=true] > i:before {
content: "";
display: block;
width: 2rem;
height: 2rem;
margin: 0;
background: url('data:image/svg+xml,');
background-size: 85%;
background-position: center;
background-repeat: no-repeat
}
}
#mobileMenu {
height: 100vh;
padding-bottom: calc(2.75rem + 80px);
background: var(--white);
overflow: auto
}
#mobileMenu a {
text-decoration: none
}
#mobileMenu .search {
margin-block: 1rem 2.5rem
}
#mobileMenu .search [type=submit] {
margin-top: .125rem
}
#mobileMenu #mySearchMobile {
height: 3.25rem;
border: .0625rem solid var(--purple);
font: var(--body);
color: var(--midnight)
}
#mobileMenu .mobile-t1-nav {
border-bottom: .125rem solid var(--gray)
}
#mobileMenu .mobile-t1-nav a {
color: var(--midnight)
}
#mobileMenu .mobile-t1-nav > li {
margin: 0;
border-top: .125rem solid var(--gray)
}
#mobileMenu .mobile-t1-nav > li:first-child {
margin-top: -15px;
border-top: 0
}
#mobileMenu .mobile-t1-nav > li > a {
padding-inline: 10px;
font-family: var(--fira);
font-size: 1.5rem;
font-weight: 700
}
#mobileMenu .mobile-t1-nav .nav-content {
padding-top: .5rem
}
#mobileMenu .nav-content ul.mobile-t1-nav > li.has-menu:before {
content: "";
font-family: Font Awesome\ 5 Free;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-weight: 900;
font-size: 2rem;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
pointer-events: none
}
#mobileMenu .nav-content ul.mobile-t1-nav > li.active:before {
transform: rotate(180deg)
}
.mobile-bottom-nav {
display: grid !important;
grid-template-columns: 1fr;
gap: 1.5rem
}
.mobile-bottom-nav li {
margin: 0
}
.mobile-bottom-nav a {
--bg: var(--midnight);
--fg: var(--white);
display: block;
padding: .875rem 1.125rem !important;
border: 0 !important;
border-radius: 2rem;
background: var(--bg) !important;
color: var(--fg) !important;
font: var(--sm);
text-transform: none;
box-shadow: none !important
}
.mobile-bottom-nav a.lime {
--bg: var(--lime);
--fg: var(--midnight)
}
.mobile-bottom-nav a:active, .mobile-bottom-nav a:focus, .mobile-bottom-nav a:hover {
outline: .0625rem solid var(--bg);
outline-offset: .25rem
}
@media (min-width:992px) {
#header {
height: 10rem;
border-bottom: .0625rem solid var(--purple);
background-image: linear-gradient(to bottom,var(--purple) 50%,var(--white) 49%);
background-size: auto 100%
}
#header a {
text-decoration: none
}
#header .container {
max-width: 1400px
}
#header .nav-container {
margin-top: 1.5rem
}
#header.fixed-top {
border-bottom: 0 !important;
display: none
}
.navigation {
background: transparent
}
.navigation-search {
transform: translateY(-.375rem)
}
.navigation-search label {
width: 100%;
margin: 0
}
.navigation-search input {
background: var(--white) !important;
color: var(--midnight) !important;
font-family: var(--fields);
font-weight: 700
}
.navigation-search input::-moz-placeholder {
color: var(--purple) !important;
opacity: 1
}
.navigation-search input::placeholder {
color: var(--purple) !important;
opacity: 1
}
.navigation-search i {
color: var(--midnight) !important;
font-size: 1rem !important
}
:scope .t1-nav {
display: flex;
justify-content: space-between;
max-width: 48rem;
margin: 1.125rem 0 0
}
:scope .t1-nav > li > a {
padding-bottom: 1.5625rem;
color: var(--midnight) !important;
font-size: 1rem
}
:scope .t1-nav > li > a:hover, :scope .t1-nav > li > a:focus {
border-bottom-color: var(--purple)
}
:scope .t1-nav > li.active > a {
border-bottom-color: var(--purple)
}
:scope .t1-menu-container {
top: 10rem;
background: var(--white)
}
:scope .t1-menu-container.menu-spacing {
border-top: .0625rem solid var(--gray)
}
:scope .t1-menu-container a {
text-decoration: none
}
:scope .t1-menu-container a:hover {
text-decoration: underline
}
:scope .t1-menu-container .container {
max-width: 1280px
}
:scope .t1-menu-container .nav-content {
padding-top: 2.5rem
}
:scope .t1-menu-container .col-5 {
display: none
}
:scope .t1-menu-container .nav-content .col-2 {
flex: 0 0 25%;
max-width: 25%;
margin-top: 3rem;
margin-left: auto;
padding-inline: 3rem
}
:scope .t1-menu-container ul a {
display: flex;
justify-content: space-between;
position: relative;
padding-right: 1rem;
color: var(--midnight);
font-size: 1rem
}
:scope .t1-menu-container ul a:after {
content: "";
position: absolute;
right: 0;
margin-top: .25rem;
flex-shrink: 0;
font-family: Font Awesome\ 5 Free;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-weight: 900;
font-size: 1rem;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
opacity: 0
}
:scope .t1-menu-container ul a:hover:after {
opacity: 1
}
:scope .t1-menu-container li {
margin: 0
}
:scope .t1-menu-container li:not(:first-child) {
border-top: .0625rem solid var(--gray)
}
:scope .mega-menu-callout {
padding: 3rem 2rem;
border: .125rem solid var(--midnight)
}
:scope .mega-menu-callout .content {
margin-top: 1.5rem;
padding: 0 !important;
font-size: 1rem;
text-align: left !important
}
:scope .mega-menu-callout .content .btn {
margin-top: 2rem
}
:scope .mega-menu-callout .content p:last-child {
margin-bottom: 0
}
:scope .right-nav {
display: flex;
justify-content: space-between;
margin: 1rem 0 0
}
:scope .right-nav li {
margin: 0
}
:scope .right-nav a {
padding-bottom: 1.6875rem !important;
color: var(--midnight) !important;
font-size: .875rem !important;
font-weight: 700 !important
}
:scope .right-nav a:hover, :scope .right-nav a:focus {
border-bottom-color: var(--purple) !important
}
}
.microclimate-nav {
margin: 0
}
.microclimate-nav a {
text-decoration: none
}
.microclimate-nav .mc-mobile-nav > .container {
position: relative;
background: var(--purple);
color: var(--white)
}
.microclimate-nav .mc-mobile-nav > .container:before {
content: "";
position: absolute;
width: 100vw;
height: 100%;
left: 50%;
transform: translate(-50%);
background: var(--purple)
}
.microclimate-nav .mc-mobile-trigger {
margin-right: .3125rem;
padding: 0 !important;
border: 0 !important;
color: var(--white)
}
.microclimate-nav .mc-mobile-trigger > i {
font-family: inherit;
font-weight: 400;
line-height: 1
}
.microclimate-nav .mc-mobile-trigger[aria-expanded=false] > i:before {
content: "";
display: block;
width: 2rem;
height: 1.5rem;
margin-top: .5rem;
border-top: .25rem solid;
border-bottom: .25rem solid;
background-image: linear-gradient(var(--white),var(--white));
background-position: center;
background-repeat: no-repeat;
background-size: 100% .25rem
}
.microclimate-nav .mc-mobile-trigger[aria-expanded=true] > i:before {
content: "";
display: block;
width: 2rem;
height: 2rem;
margin-top: .25rem;
background: url('data:image/svg+xml,');
background-size: 85%;
background-position: center;
background-repeat: no-repeat
}
.microclimate-nav .main-mobile-nav {
height: 5rem
}
.microclimate-nav .main-mobile-nav .logo {
display: block;
width: 15rem;
margin-top: .3125rem
}
.microclimate-nav .nav-container {
border: 0;
border-bottom: .0625rem solid var(--midnight);
font-size: 1rem;
font-weight: 700
}
.microclimate-nav .nav-container .mc-title {
color: var(--purple);
font: inherit
}
.microclimate-nav .nav-container .mobile-subnav-trigger:hover, .microclimate-nav .nav-container .mobile-subnav-trigger:focus {
color: var(--purple)
}
.microclimate-nav .nav-container li {
border-color: var(--gray) !important
}
.microclimate-nav .nav-container li a:hover {
color: var(--purple)
}
@media (min-width: 992px) {
.microclimate-nav {
height: auto !important;
min-height: 10rem;
border-bottom: .0625rem solid var(--purple);
background-image: linear-gradient(var(--purple) calc(100% - 5rem),var(--white) calc(100% - 5rem)) !important
}
.microclimate-nav .right-nav, .microclimate-nav .home-button {
display: none
}
.microclimate-nav .mc-dropdown-nav {
margin: 0;
padding: 0;
background: var(--purple)
}
.microclimate-nav .mc-dropdown-nav > .row {
height: 5rem
}
.microclimate-nav .logo-title-container {
position: static;
height: 0
}
.microclimate-nav .logo-title-container > .row > div {
position: static
}
.microclimate-nav .logo {
position: absolute !important;
top: 1.5rem !important;
left: 50%;
transform: translate(-50%)
}
.microclimate-nav .mc-title {
display: none
}
.microclimate-nav .navigation-search {
max-width: 16rem;
margin-left: auto;
transform: none
}
.microclimate-nav .mc-menu {
display: flex;
align-items: center;
margin-left: 50px !important;
font: var(--sm);
text-transform: none !important
}
.microclimate-nav .mc-menu:before {
width: 2rem;
color: var(--white) !important;
font-size: 3rem !important;
font-weight: 400 !important
}
.microclimate-nav .mc-menu[aria-expanded=false]:before {
content: "";
display: block;
width: 2rem;
height: 1.5rem;
border-top: .25rem solid;
border-bottom: .25rem solid;
transform: translateY(50%);
background-image: linear-gradient(var(--white),var(--white));
background-position: center;
background-repeat: no-repeat;
background-size: 100% .25rem
}
.microclimate-nav .mc-menu[aria-expanded=true]:before {
content: "";
display: block;
width: 2rem;
height: 2rem;
margin-top: .5rem;
background: url('data:image/svg+xml,');
background-size: 85%;
background-position: center;
background-repeat: no-repeat
}
.microclimate-nav .nav-container {
top: auto;
margin: 0 !important;
border: 0
}
.microclimate-nav .t1-nav {
align-items: center;
justify-content: center;
gap: 2rem;
max-width: none;
height: 5rem;
margin: 0 !important
}
.microclimate-nav .t1-nav li {
margin: 0
}
.microclimate-nav .t1-nav a {
padding-bottom: .25rem !important;
border-bottom-width: .375rem !important
}
.microclimate-nav .t1-nav a:hover {
border-bottom-color: var(--purple) !important
}
.microclimate-nav #microclimateNav {
background: none
}
.microclimate-nav #microclimateNav ul {
margin: 1rem 0 2rem
}
.microclimate-nav #microclimateNav a {
display: block;
padding-bottom: .25rem;
border-bottom: .375rem solid transparent;
font-size: 1rem
}
.microclimate-nav #microclimateNav a:hover, .microclimate-nav #microclimateNav a:focus {
border-bottom-color: var(--white)
}
.microclimate-nav #microclimateNav .active > a {
border-bottom-color: var(--white)
}
.microclimate-nav.fixed-top {
top: -80px !important
}
.microclimate-nav.fixed-top .nav-container {
position: absolute;
right: 0;
bottom: 0;
left: 0
}
}
.Image {
margin: 0
}
.Image:where(.Common) .Image {
margin-block: var(--gap)
}
.Image img {
border-radius: var(--radius)
}
.Image figcaption {
position: relative;
font: var(--open);
font-style: italic;
font-size: .875rem;
padding-block: 1rem 0
}
.Image:has(a[rel=modal]) {
position: relative
}
.Image:has(a[rel=modal]):before {
content: " ";
position: absolute;
inset: 0;
background-color: var(--black-20)
}
.Image:has(a[rel=modal]) img {
position: relative
}
.Image a {
display: block;
z-index: 1;
outline-color: var(--lime)
}
.Image [href^="https://www.youtube.com"], .Image [href^="https://youtu.be"], .Image [href^="https://vimeo.com"] {
display: block;
position: relative
}
.Image [href^="https://www.youtube.com"]:focus, .Image [href^="https://youtu.be"]:focus, .Image [href^="https://vimeo.com"]:focus {
outline: none !important
}
.Image [href^="https://www.youtube.com"]:focus:before, .Image [href^="https://youtu.be"]:focus:before, .Image [href^="https://vimeo.com"]:focus:before {
outline-style: dashed;
outline-width: .25rem;
outline-color: var(--lime);
outline-offset: 1rem !important
}
.Image [href^="https://www.youtube.com"]:before, .Image [href^="https://youtu.be"]:before, .Image [href^="https://vimeo.com"]:before, .Image [href^="https://www.youtube.com"]:after, .Image [href^="https://youtu.be"]:after, .Image [href^="https://vimeo.com"]:after {
content: "";
position: absolute;
top: calc(50% - 1.5rem);
left: calc(50% - 1.5rem);
width: 3rem;
height: 3rem;
transition: transform var(--transition);
z-index: 1
}
@media (min-width: 992px) {
.Image [href^="https://www.youtube.com"]:before, .Image [href^="https://youtu.be"]:before, .Image [href^="https://vimeo.com"]:before, .Image [href^="https://www.youtube.com"]:after, .Image [href^="https://youtu.be"]:after, .Image [href^="https://vimeo.com"]:after {
top: calc(50% - 2.5rem);
left: calc(50% - 2.5rem);
width: 5rem;
height: 5rem
}
}
.Image [href^="https://www.youtube.com"]:before, .Image [href^="https://youtu.be"]:before, .Image [href^="https://vimeo.com"]:before {
border-radius: 50%;
background: var(--lime);
outline: .0625rem solid transparent;
outline-offset: 0;
transition: var(--transition)
}
.Image [href^="https://www.youtube.com"]:after, .Image [href^="https://youtu.be"]:after, .Image [href^="https://vimeo.com"]:after {
background: var(--midnight);
-webkit-mask: url(/assets/play.svg) center / 1rem 1rem no-repeat;
mask: url(/assets/play.svg) center / 1rem 1rem no-repeat
}
@media (min-width: 992px) {
.Image [href^="https://www.youtube.com"]:after, .Image [href^="https://youtu.be"]:after, .Image [href^="https://vimeo.com"]:after {
-webkit-mask: url(/assets/play.svg) center / 1.75rem 1.75rem no-repeat;
mask: url(/assets/play.svg) center / 1.75rem 1.75rem no-repeat
}
}
.Image [href^="https://www.youtube.com"]:hover:before, .Image [href^="https://youtu.be"]:hover:before, .Image [href^="https://vimeo.com"]:hover:before {
outline: .0625rem solid var(--lime) !important;
outline-offset: .25rem !important
}
.Image--full img {
width: 100%
}
.Image--full figcaption {
padding-inline: var(--wrap)
}
@font-face {
font-family: swiper-icons;
src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA);
font-weight: 400;
font-style: normal
}
:root {
--swiper-theme-color: #007aff
}
:host {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
display: block
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box
}
.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
transform: translateZ(0)
}
.swiper-horizontal {
touch-action: pan-y
}
.swiper-vertical {
touch-action: pan-x
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
display: block
}
.swiper-slide-invisible-blank {
visibility: hidden
}
.swiper-autoheight, .swiper-autoheight .swiper-slide {
height: auto
}
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform,height
}
.swiper-backface-hidden .swiper-slide {
transform: translateZ(0);
backface-visibility: hidden
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px
}
.swiper-3d .swiper-wrapper {
transform-style: preserve-3d
}
.swiper-3d {
perspective: 1200px
}
.swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d
}
.swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
scroll-snap-type: x mandatory
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
scroll-snap-type: y mandatory
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none
}
.swiper-css-mode.swiper-centered > .swiper-wrapper:before {
content: "";
flex-shrink: 0;
order: 9999
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before)
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after)
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before)
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after)
}
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10
}
.swiper-3d .swiper-slide-shadow {
background: #00000026
}
.swiper-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left,#00000080,#0000)
}
.swiper-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right,#00000080,#0000)
}
.swiper-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top,#00000080,#0000)
}
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom,#00000080,#0000)
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000
}
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
.swiper .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000
}
.ImageCarousel .swiper-wrapper {
padding-block: 1rem;
align-items: center
}
.ImageCarousel .swiper-slide .Image {
width: 100%
}
.ImageCarousel .swiper-slide .Image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.ImageCarousel .swiper-slide .Image figcaption {
font-family: var(--open);
font-size: .875rem;
font-style: italic
}
.ImageCarousel .swiper-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
margin-block: 3rem 1rem
}
.ImageCarousel .swiper-button-prev, .ImageCarousel .swiper-button-next {
position: relative;
display: grid;
place-items: center;
border: 0;
height: 50px;
width: 50px;
cursor: pointer;
border-radius: 100%
}
.ImageCarousel .swiper-button-prev:before, .ImageCarousel .swiper-button-next:before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--midnight);
outline: .0625rem solid transparent;
outline-offset: 0;
transition: var(--transition)
}
.ImageCarousel .swiper-button-prev i, .ImageCarousel .swiper-button-next i {
z-index: 1;
color: inherit !important;
font-size: 1rem !important
}
.ImageCarousel .swiper-button-prev i:before, .ImageCarousel .swiper-button-next i:before {
color: #fff
}
.ImageCarousel .swiper-button-prev:hover:before, .ImageCarousel .swiper-button-next:hover:before {
outline: .0625rem solid var(--midnight) !important;
outline-offset: .25rem !important
}
.ImageCarousel .swiper-button-disabled {
opacity: .5;
cursor: not-allowed
}
footer, footer.purple {
padding-top: 2rem;
border-top: .0625rem solid var(--gray);
border-bottom: 1rem solid var(--purple);
background: var(--white);
color: var(--midnight)
}
@media (min-width: 992px) {
footer, footer.purple {
padding-top: 1rem
}
}
footer a, footer.purple a {
color: inherit;
text-decoration: none
}
footer img, footer.purple img, footer svg, footer.purple svg {
max-width: 12.75rem;
fill: var(--purple)
}
footer address, footer.purple address {
margin-bottom: 0;
font-family: var(--fields);
font-size: 1rem;
font-weight: 700
}
footer .phone, footer.purple .phone {
margin: 0;
color: var(--purple) !important;
font-size: 1.5rem;
font-weight: 700
}
footer .align-items-center, footer.purple .align-items-center {
align-items: flex-start !important
}
footer ul li, footer.purple ul li {
margin: 0
}
@media (min-width: 992px) {
footer ul li, footer.purple ul li {
padding: 0
}
}
footer ul a, footer.purple ul a {
font-size: 1rem;
font-weight: 700
}
footer ul a:hover, footer.purple ul a:hover {
color: var(--purple)
}
footer section:first-child .col-12.col-md-6:last-child, footer.purple section:first-child .col-12.col-md-6:last-child {
margin-block: 2rem;
border-top: 1px solid var(--gray);
border-bottom: 1px solid var(--gray)
}
@media (min-width: 48em) {
footer section:first-child .col-12.col-md-6:last-child, footer.purple section:first-child .col-12.col-md-6:last-child {
margin: 0;
border: 0
}
footer section:first-child .col-12.col-md-6:last-child ul, footer.purple section:first-child .col-12.col-md-6:last-child ul {
margin: 0
}
}
footer section:first-child .container, footer.purple section:first-child .container {
border: 0
}
@media (min-width: 992px) {
footer section:first-child .container, footer.purple section:first-child .container {
padding-bottom: 1.5rem
}
}
footer section:nth-child(2), footer.purple section:nth-child(2) {
font-size: .875rem;
text-align: left
}
@media (max-width: 991.98px) {
footer section:nth-child(2), footer.purple section:nth-child(2) {
padding-bottom: 2rem
}
}
footer section:nth-child(2) .container, footer.purple section:nth-child(2) .container {
position: relative;
padding-block: 0
}
@media (min-width: 48em) {
footer section:nth-child(2) .container, footer.purple section:nth-child(2) .container {
margin-top: 2rem;
padding-block: 2rem .5rem;
border-top: .0625rem solid var(--gray)
}
}
footer section:nth-child(2) .row > div:first-child a, footer.purple section:nth-child(2) .row > div:first-child a {
color: var(--purple) !important
}
footer section:nth-child(2) .row > div:first-child a:hover, footer.purple section:nth-child(2) .row > div:first-child a:hover {
color: var(--midnight) !important
}
@media (min-width:48em) {
footer section:nth-child(2) .row > div:first-child, footer.purple section:nth-child(2) .row > div:first-child {
flex: 0 0 100%;
max-width: 100%
}
}
footer section:nth-child(2) .row > div:last-child, footer.purple section:nth-child(2) .row > div:last-child {
order: -1
}
@media (min-width: 48em) {
footer section:nth-child(2) .row > div:last-child, footer.purple section:nth-child(2) .row > div:last-child {
position: absolute;
top: 1.5rem;
right: 0
}
}
@media (min-width: 48em) {
footer div.social-menu, footer.purple div.social-menu {
float: right
}
}
footer ul.social-menu, footer.purple ul.social-menu {
margin: 0 0 2.5rem
}
@media (min-width: 48em) {
footer ul.social-menu, footer.purple ul.social-menu {
display: flex;
width: auto;
gap: 1rem
}
}
@media (min-width: 48em) {
footer ul.social-menu li, footer.purple ul.social-menu li {
padding: 0
}
}
footer ul.social-menu a, footer.purple ul.social-menu a {
background: var(--purple);
color: var(--white)
}
footer ul.social-menu a:hover, footer.purple ul.social-menu a:hover {
background: var(--midnight);
color: var(--white)
}
.right-rail-module {
margin-bottom: 2rem !important
}
.right-rail-module h2:first-child {
margin-top: 0
}
.right-rail-module a {
padding: 0 !important;
background: none !important;
color: var(--purple) !important;
font: var(--h2) !important;
font-size: 1.5rem !important;
text-decoration: none
}
.tier-nav {
margin-bottom: 2.5rem
}
.tier-nav li {
border-bottom-color: var(--gray) !important
}
.tier-nav a {
font-weight: 700;
text-decoration: none
}
.tier-nav a:hover {
text-decoration: underline
}
.tier-nav .nav-trigger {
border-color: var(--purple) !important
}
.tier-nav .nav-trigger:hover, .tier-nav .nav-trigger:focus {
color: var(--purple)
}
.tier-nav .card {
border-color: var(--purple)
}
.top-headlines-container h4 {
margin-bottom: 0;
color: var(--purple);
font: var(--h2)
}
.top-headlines-container .headline-item {
border-color: var(--gray) !important
}
.top-headlines-container a {
text-decoration: none
}
.top-headlines-container a:hover {
text-decoration: underline
}
.rail-calloutBlock {
position: relative;
padding-top: 2.5rem;
border: .125rem solid var(--midnight);
background: none;
color: var(--midnight)
}
@media (min-width: 48em) {
.rail-calloutBlock {
margin-inline: -1rem
}
}
.rail-calloutBlock:before {
content: "";
position: absolute;
inset: -.125rem;
bottom: auto;
height: .75rem;
background: var(--purple-blue-90)
}
.rail-calloutBlock h4 {
color: var(--purple);
font: var(--h2);
font-size: 1.5rem;
text-align: left
}
.rail-calloutBlock ul {
margin: 1rem 0 0
}
.rail-calloutBlock li {
margin: 0;
padding: 1rem 0;
color: var(--midnight) !important;
font: var(--h3) !important;
font-size: 1.25rem !important
}
.rail-calloutBlock li:not(:first-child) {
border-top: .0625rem solid var(--gray)
}
.rail-calloutBlock a {
display: flex !important;
align-items: center;
padding: 0 !important;
color: var(--midnight) !important;
font: var(--h3) !important;
font-size: 1.25rem !important;
text-decoration: none
}
.rail-calloutBlock a:hover {
color: var(--purple) !important
}
.rail-calloutBlock a:before {
color: var(--purple);
font-size: 125%
}
.rail-calloutBlock address {
display: flex;
align-items: center;
padding: 0 !important
}
.rail-calloutBlock address:before {
position: static !important;
color: var(--purple);
font-size: 125%
}
#main-hero:empty {
display: none
}
.Hero {
position: relative;
border-bottom: .0625rem solid var(--purple);
z-index: 0
}
@media (min-width: 48em) {
.Hero {
padding: 2rem
}
}
.Hero__image {
height: 20rem
}
@media (min-width: 992px) {
.Hero__image {
position: absolute;
inset: 2rem;
width: calc(100% - 4rem);
height: calc(100% - 4rem);
z-index: -1
}
.Hero__image:before {
content: "";
position: absolute;
inset: 0;
background: #000;
opacity: .5
}
}
.Hero__image img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.Hero__content {
margin-block: 3rem
}
@media (min-width: 992px) {
.Hero__content {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 28rem;
max-width: 1200px;
padding: 8rem 3rem;
margin: 0 auto;
color: var(--white);
font-weight: 700
}
}
.Hero__content h1 {
margin-top: 0
}
@media (min-width: 992px) {
.Hero__content h1 {
color: inherit
}
}
@media (min-width: 80em) {
.Hero__content h1 {
font: var(--h1-lg)
}
}
.Hero__content .btn {
display: inline-block;
margin-top: 1rem
}
@media (min-width: 992px) {
.Hero__content .btn {
--bg: var(--lime) !important;
--fg: var(--midnight) !important
}
}
@media (min-width: 992px) {
.Hero__wrap {
width: 50%
}
}
@media (min-width: 992px) {
.Hero--right .Hero__wrap {
margin-left: auto
}
}
@media (min-width: 992px) {
.Hero--center .Hero__wrap {
width: 66%;
margin-inline: auto;
text-align: center
}
}
.HeroStory {
position: relative
}
@media (min-width: 992px) {
.HeroStory {
background: #000;
border-bottom: .0625rem solid var(--purple);
min-height: 80vh;
z-index: 10
}
.HeroStory + .HeroStory {
z-index: 20
}
.HeroStory + .HeroStory + .HeroStory {
z-index: 30
}
}
.HeroStory__image {
height: 20rem
}
@media (min-width: 992px) {
.HeroStory__image {
position: absolute;
width: 100%;
height: 100%
}
}
.HeroStory__image img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.HeroStory__content {
margin-block: 3rem
}
@media (min-width: 992px) {
.HeroStory__content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
width: 100%;
margin: 0;
padding-left: 1rem;
flex: 1
}
.HeroStory__content:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(207deg,#19124b00 53.85%,#19124be6 73.76%)
}
.HeroStory--centered .HeroStory__content {
padding-left: 0
}
.HeroStory--centered .HeroStory__content:before {
background: linear-gradient(180deg,#19124b00 53.85%,#19124be6 73.76%)
}
.HeroStory--right .HeroStory__content {
padding-right: 1rem
}
.HeroStory--right .HeroStory__content:before {
background: linear-gradient(160deg,#19124b00 53.85%,#19124be6 73.76%)
}
}
.HeroStory__content h1 {
position: relative;
width: -moz-fit-content;
width: fit-content;
font-family: var(--fields);
margin-top: 0
}
@media (min-width: 992px) {
.HeroStory__content h1 {
font-size: 5.5rem;
font-weight: 600;
line-height: 1.1;
margin: 0;
margin-bottom: 1rem;
color: inherit
}
.HeroStory--centered .HeroStory__content h1 {
margin-inline: auto
}
.HeroStory--centered .HeroStory__content h1:before {
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: .25rem;
background: linear-gradient(var(--lime),var(--lime)) 100% 100% / 0 .25rem no-repeat;
background-position: bottom left;
animation: lineMiddle 1.5s forwards 1.5s;
animation-play-state: paused
}
.HeroStory--right .HeroStory__content h1 {
margin-left: auto
}
}
.HeroStory__content p {
font-size: 1.25rem;
font-weight: 400;
max-width: 55ch
}
.HeroStory--centered .HeroStory__content {
text-align: center
}
.HeroStory--centered .HeroStory__content p {
margin-inline: auto
}
.HeroStory--right .HeroStory__content {
margin-left: auto
}
.HeroStory--right .HeroStory__content p {
max-width: unset
}
.HeroStory__wrap p {
margin: 0
}
@media (min-width: 992px) {
.HeroStory__wrap {
position: relative;
padding-left: 3rem;
max-width: 1400px;
margin: 0 auto 5rem;
color: var(--white);
font-weight: 700;
animation-delay: .75s
}
.HeroStory__wrap:before {
content: " ";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: .25rem;
background: linear-gradient(var(--lime),var(--lime)) 100% 100% / 0 .25rem no-repeat;
background-position: top left;
animation: lineDown 1.5s forwards 1.5s;
animation-play-state: paused
}
.HeroStory--centered .HeroStory__wrap, .HeroStory--right .HeroStory__wrap {
border-left: 0;
padding-left: 0;
margin-left: 0
}
.HeroStory--centered .HeroStory__wrap:before, .HeroStory--right .HeroStory__wrap:before {
background: none
}
.HeroStory--centered .HeroStory__wrap {
margin-inline: auto
}
.HeroStory--right .HeroStory__wrap {
padding-right: 3rem;
margin-left: auto;
margin-right: 1rem;
max-width: 80ch
}
.HeroStory--right .HeroStory__wrap:before {
content: " ";
position: absolute;
top: 0;
left: unset;
right: 0;
height: 100%;
width: .25rem;
background: linear-gradient(var(--lime),var(--lime)) 100% 100% / 0 .25rem no-repeat;
background-position: top right;
animation: lineDown 1.5s forwards 1.5s;
animation-play-state: paused
}
}
@keyframes lineMiddle {
0% {
background-size: 0% .25rem;
background-position: center
}
to {
background-size: 100% .25rem;
background-position: center
}
}
.Home--Image {
position: relative;
width: 100%;
margin-block: 3rem
}
@media (min-width: 992px) {
.Home--Image {
padding-top: 232px;
margin-block: 0
}
}
.Home--Image + .row {
padding-block: 1rem
}
@media (min-width: 992px) {
.Home--Image + .row {
padding-block: 16rem 4rem
}
}
.Home--Image .Image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
aspect-ratio: 16/9
}
.news-and-events {
padding-block: 5rem;
background: var(--purple-blue)
}
.news-and-events h2 {
color: var(--white);
margin-top: 0;
margin-bottom: 3rem !important;
padding-inline: 1rem
}
.news-and-events .btn, .news-and-events .slick-prev, .news-and-events .slick-next {
--bg: var(--lime);
--fg: var(--midnight)
}
@media (min-width: 992px) {
.news-and-events .btn {
position: absolute;
top: 0;
right: .5rem;
margin: 0
}
}
.news-and-events .three-col-slider + div > div {
position: static
}
.three-col-slider-container {
position: relative
}
.three-col-slider-container h4 {
margin-bottom: 4rem;
color: var(--purple);
font: var(--h2)
}
.three-col-slider-container h4:after {
display: none
}
.three-col-slider-container .slide-wrapper {
margin-inline: .75rem
}
.three-col-slider-container .card-content {
-webkit-hyphens: auto;
hyphens: auto;
color: var(--midnight) !important;
font: var(--body);
font-size: 1rem
}
.three-col-slider-container .card-content h3 {
margin-bottom: 1rem !important;
color: var(--purple) !important;
font: var(--h3) !important;
font-size: 22px !important
}
.three-col-slider-container .card-content a {
text-decoration: none
}
.three-col-slider-container .card-content a:hover h3 {
color: var(--midnight) !important;
text-decoration: underline
}
.three-col-slider-container .card-content .btn {
margin-bottom: 0
}
.three-col-slider-container .slick-prev {
left: -13px
}
@media (min-width: 80em) {
.three-col-slider-container .slick-prev {
left: -60px
}
}
.three-col-slider-container .slick-next {
right: -13px
}
@media (min-width: 80em) {
.three-col-slider-container .slick-next {
right: -60px
}
}
.slider-container {
max-width: 1180px;
margin-inline: auto;
padding: 5rem 2rem;
border: 0
}
.slider-container > h2 {
margin-top: 0;
margin-bottom: 3rem;
text-align: center
}
.slider-container .slide-wrapper > .container {
bottom: 0 !important;
max-width: none
}
.slider-container .slider-caption {
background: var(--purple-blue-90) !important
}
@media (min-width: 48em) {
.slider-container .slider-caption {
position: absolute !important;
bottom: 0;
left: 0;
max-width: 650px;
padding: 3rem !important
}
}
.slider-container .slider-caption h3 {
position: relative;
margin-top: 0;
font: var(--h2) !important
}
.slider-container .slider-caption h3:after {
display: none !important
}
@media (min-width: 48em) {
.slider-container .slider-caption h3:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -1.25rem;
border-left: .0625rem solid
}
}
.slider-container .slider-caption p {
margin-bottom: 2rem
}
.slider-container .slider-caption a {
position: relative;
border-bottom: .0625rem solid;
font: var(--sm);
text-decoration: none
}
.slider-container .slider-caption a:after {
position: absolute !important;
margin-left: 1rem;
bottom: 1.125rem;
left: 100% !important;
content: "" !important;
font-family: Font Awesome\ 5 Free !important;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-weight: 900;
font-size: 2rem;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-size: 1.25rem;
transition: transform .2s ease
}
.slider-container .slider-caption a:hover:after {
transform: translate(.5rem)
}
.slider-container .slick-prev {
left: -1.5rem !important
}
@media (min-width: 80em) {
.slider-container .slick-prev {
left: -4.5rem !important
}
}
.slider-container .slick-next {
right: -1.5rem !important
}
@media (min-width: 80em) {
.slider-container .slick-next {
right: -4.5rem !important
}
}
.StoryUtility {
display: grid;
position: fixed;
top: 0rem;
left: 0;
right: 0;
background-color: var(--midnight);
color: var(--white);
padding: 1rem 1.5rem;
z-index: 80;
opacity: 0;
transition: var(--transition)
}
.StoryUtility .story-tools {
position: relative;
margin-block: .25rem
}
@media (min-width: 992px) {
.StoryUtility .story-tools {
top: calc((.5rem + 5px)/2);
margin-block: 0
}
}
.StoryUtility[data-stuck=true] {
opacity: 1
}
.StoryUtility__content {
display: flex;
flex-direction: column;
justify-content: space-between
}
@media (min-width: 992px) {
.StoryUtility__content {
flex-direction: row;
align-items: flex-end
}
}
.StoryUtility__title {
position: relative;
font-family: var(--fields);
font-size: 1rem
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 5px;
border: none;
background: transparent;
border-radius: 100px;
margin-top: .5rem
}
@media (min-width: 992px) {
progress {
width: 85%
}
}
progress::-webkit-progress-bar {
background: transparent;
border-radius: 100px
}
progress::-webkit-progress-value {
background: linear-gradient(to left,#fff,#aecc2b);
background-attachment: fixed;
border-radius: 100px
}
progress::-moz-progress-bar {
background: linear-gradient(to left,#fff,#aecc2b);
background-attachment: fixed;
border-radius: 100px
}
.tier-header {
margin: 0;
padding: 0;
background: none
}
.tier-header a {
color: var(--midnight) !important
}
.tier-header a:hover {
color: var(--purple) !important
}
.tier-header h1 {
max-width: 1140px;
margin: 0 auto;
padding: 0;
color: var(--purple);
font: var(--h1);
text-align: left;
text-transform: none
}
@media (min-width: 80em) {
.tier-header h1 {
font: var(--h1-lg)
}
}
.tier-header h1:first-child {
margin-top: 4rem
}
.tier-header .breadcrumb {
padding: 1rem 0;
margin-bottom: 2rem
}
.tier-header .breadcrumb li {
font: var(--sm);
letter-spacing: normal;
text-transform: none
}
.featured-news-block {
color: var(--midnight)
}
.featured-news-block a {
color: var(--purple);
text-decoration: none
}
.featured-news-block a:hover {
color: var(--midnight);
text-decoration: underline
}
.featured-news-block h3 {
margin-top: 0;
color: inherit;
font: var(--h2)
}
.featured-news-block strong {
display: block;
margin: 2rem 0 0;
font: var(--h3);
font-size: 1.25rem
}
.featured-news-content {
background: var(--gray) !important
}
@media (max-width: 47.999em) {
.featured-news-content {
padding: 1.5rem !important
}
.featured-news-content > a {
margin-bottom: .5rem !important
}
.featured-news-content strong {
margin-block: .5rem -.25rem
}
}
.featured-news-content > :last-child {
margin-bottom: 0
}
.events-list {
margin: 0
}
.events-list .event-item {
margin: 0;
padding-block: 3rem;
border-bottom: .25rem solid var(--gray)
}
.events-list .event-item img {
max-width: 200px;
margin-right: 3rem
}
.events-list .event-title {
margin-bottom: 2rem !important;
font: var(--h2) !important
}
.events-list .event-title a {
color: var(--purple);
text-decoration: none
}
.events-list .event-title a:hover {
color: var(--midnight);
text-decoration: underline
}
.events-list .event-content {
color: var(--midnight) !important
}
.events-list .date-topic {
font: var(--h3)
}
.events-list .date-topic .event-date {
text-transform: none !important
}
.pagination {
margin-block: 3rem;
font-weight: 700
}
.pagination a {
text-decoration: none
}
.upcoming-events-container {
padding-bottom: 6rem
}
.upcoming-events-container h2:after {
display: none
}
.upcoming-events-container .events-list {
margin-block: 0 2rem
}
.upcoming-events-container .events-list > .row > div:last-child .event-item {
border-bottom: 0
}
@media (min-width: 48em) {
.upcoming-events-container .events-list > .row > div:nth-last-child(2):nth-child(odd) .event-item {
border-bottom: 0
}
}
.upcoming-events-container .event-item > img {
margin-bottom: 2rem
}
@media (min-width: 48em) {
.upcoming-events-container .event-item > img {
max-width: 25%
}
}
.upcoming-events-container .event-date {
background: var(--midnight) !important;
text-transform: none !important
}
.upcoming-events-container .event-title {
font: var(--body) !important;
font-weight: 700 !important
}
.tab-content {
overflow: hidden
}
.tab-content > .tab-pane {
visibility: hidden
}
.tab-content > .active {
visibility: visible
}
.in-page-tabs section > div {
padding-bottom: 6rem;
background: var(--midnight)
}
.in-page-tabs .nav-link {
background: var(--purple) !important;
font: var(--body) !important;
font-size: 1rem !important;
text-decoration: none
}
.in-page-tabs .nav-link.active {
background: var(--midnight) !important;
color: var(--white) !important
}
.in-page-tabs .tab-content {
background: var(--midnight)
}
.in-page-tabs h4 {
padding-inline: 1rem;
color: var(--white)
}
@media (min-width: 992px) {
.in-page-tabs h4 {
text-align: left
}
}
.in-page-tabs .slick-arrow, .in-page-tabs .btn {
--bg: var(--lime);
--fg: var(--midnight)
}
@media (min-width: 992px) {
.in-page-tabs .btn {
position: absolute;
top: 0;
right: .5rem
}
}
.in-page-tabs .three-col-slider-container {
position: relative
}
.in-page-tabs .three-col-slider + div > div {
position: static
}
.Testimonial {
position: relative
}
@media (min-width: 1200px) {
.Testimonial {
margin-bottom: 10rem
}
.Testimonial .container {
max-width: 1440px
}
}
.Testimonial__wrap {
position: relative;
border-radius: 2rem;
padding-block: 1px
}
.Testimonial__wrap:before {
content: "";
position: absolute;
inset: 0;
border: 3px solid var(--lime);
border-radius: 32px
}
.Testimonial__wrap[data-animate=true]:before {
animation-play-state: running
}
.pagePresentationLayoutRow:has(.bg-gradient-offset):has(.Testimonial) .Testimonial__wrap:before {
clip-path: polygon(0% 0%,0% 0%,0% 0%,100% 50%);
animation: drawBorderHalf 2s linear forwards 1s
}
.Testimonial__box {
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
background: var(--midnight);
border-radius: 2rem;
color: var(--white);
padding: 1.5rem;
margin: 1rem
}
.Testimonial__box blockquote {
font-family: var(--fields);
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 150%
}
.Testimonial__box blockquote:before {
content: "";
display: block;
width: 36px;
height: 36px;
background: var(--lime);
-webkit-mask-image: url(../assets/quote.svg);
mask-image: url(../assets/quote.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat
}
.Testimonial__box blockquote p {
font-size: 32px;
line-height: 1.2;
margin-bottom: 2rem
}
.Testimonial__box cite {
font-family: var(--fira);
font-size: 20px;
font-style: normal;
font-weight: 500
}
@media (min-width: 992px) {
.Testimonial__box {
flex-direction: row-reverse;
gap: 2rem;
padding: 3.5rem
}
}
.Testimonial__image {
border-radius: .5rem;
overflow: hidden
}
.Testimonial__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
@media (min-width: 992px) {
.Testimonial__image {
width: 450px;
margin-bottom: -10rem
}
}
.Testimonial__content {
flex: 1
}
@keyframes drawBorder {
0% {
clip-path: polygon(50% 100%,50% 100%,50% 100%,50% 100%)
}
25% {
clip-path: polygon(50% 100%,0% 100%,0% 100%,50% 100%)
}
50% {
clip-path: polygon(50% 100%,0% 100%,0% 0%,50% 100%)
}
75% {
clip-path: polygon(50% 100%,0% 100%,0% 0%,100% 0%)
}
to {
clip-path: polygon(50% 100%,0% 100%,0% 0%,100% 0%,100% 100%)
}
}
@keyframes drawBorderHalf {
0% {
clip-path: polygon(0% 50%,0% 0%,0% 0%,100% 50%)
}
to {
clip-path: polygon(0% 50%,0% 0%,100% 0%,100% 50%)
}
}
#accordion {
margin-block: 3rem
}
#accordion .card-header {
border-top: .25rem solid var(--gray) !important;
border-radius: 0
}
#accordion .btn {
padding: 1rem 3rem 1rem 1rem !important;
background: none !important;
color: var(--purple) !important;
font-size: 1.5rem !important
}
#accordion .btn:before {
content: "+" !important;
right: 0;
left: auto !important;
padding-top: .125rem !important;
margin-right: .5rem !important;
background: none !important;
color: inherit !important;
font-family: var(--open) !important;
font-size: 2.5rem;
font-weight: 400;
line-height: .85;
transition: transform .2s ease
}
#accordion .btn:hover, #accordion .btn:focus {
color: var(--midnight) !important;
outline: none;
text-decoration: none
}
#accordion .btn[aria-expanded=true]:before {
transform: rotate(135deg)
}
#accordion .card-body {
padding: 1rem 1rem 0 !important;
background: none !important
}
.interest-picker-module {
padding-block: 4rem;
background: var(--purple)
}
@media (min-width: 992px) {
.interest-picker-module {
text-align: center
}
}
.interest-picker-module .row {
display: block
}
.interest-picker-module [class*=col-] {
width: 100%;
max-width: none
}
.interest-picker-module .left-side-header {
padding: 0
}
@media (max-width: 991.98px) {
.interest-picker-module .left-side-header {
text-align: left
}
}
.interest-picker-module .left-side-header h3 {
margin-top: 0;
font: var(--h2)
}
.interest-picker-module .left-side-header h3:after {
display: none
}
.interest-picker-module .left-side-header h4 {
margin-bottom: 3rem;
font: var(--body)
}
@media (min-width: 992px) {
.interest-picker-module .left-side-header h4 {
margin-bottom: 1rem
}
}
.interest-picker-module .form-group {
margin-block: 1.5rem
}
.interest-picker-module label {
display: block;
font: var(--h3) !important;
font-size: 1.125rem !important;
font-weight: 400 !important;
text-align: left
}
.interest-picker-module #programFinderBtn {
--bg: var(--lime);
--fg: var(--midnight);
display: inline-block;
width: auto;
margin-top: 1rem
}
.interest-picker-module .bootstrap-select .btn {
padding: 1.5rem 3rem 1.5rem 1rem !important;
background: var(--white) !important;
color: var(--midnight) !important;
font-size: 1rem !important;
font-weight: 700 !important
}
.interest-picker-module .bootstrap-select .btn:focus {
outline: .25rem dashed var(--lime) !important;
outline-offset: .25rem !important
}
.interest-picker-module .bootstrap-select .btn:focus:not(:focus-visible) {
outline: 0 !important
}
.interest-picker-module .bootstrap-select .btn span {
white-space: nowrap;
text-overflow: ellipsis
}
.interest-picker-module ul.dropdown-menu {
padding-inline: 0 !important;
background: var(--white) !important
}
.interest-picker-module ul.dropdown-menu li {
padding-inline: 1rem !important;
border-bottom-color: var(--gray) !important;
font-size: 1rem
}
.interest-picker-module ul.dropdown-menu a {
color: var(--midnight) !important
}
@media (min-width: 992px) {
.interest-picker-module .interest-picker-form .col-lg-8 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem
}
}
.Feature {
background: var(--beige);
overflow: hidden
}
.Feature__container {
max-width: 90rem;
margin-inline: auto
}
.Feature__overlay {
max-width: 40rem;
margin: 2rem;
padding: 2rem;
background: var(--purple-blue-90);
color: var(--white)
}
@media (min-width: 992px) {
.Feature__overlay {
margin-block: 5rem 0;
padding: 3rem
}
}
.Feature__overlay h2 {
margin-top: 0;
color: inherit
}
.Feature__overlay .btn {
display: inline-block;
margin-top: 1rem
}
.Feature__image {
pointer-events: none
}
.Feature__image img {
max-width: 100%
}
@media (min-width: 992px) {
.Feature__image img {
display: block;
width: calc(50% + 24rem);
margin-top: -4rem;
margin-left: auto
}
}
@media (min-width: 90em) {
.Feature__image img {
margin-top: -19rem
}
}
.Blocks {
display: grid;
border-bottom: .125rem solid var(--midnight)
}
@media (min-width: 64em) {
.Blocks {
grid-template-columns: 1fr 1fr
}
}
.Blocks__item {
position: relative;
padding: 2rem;
background: var(--white);
overflow: hidden
}
@media (max-width: 47.999em) {
.Blocks__item {
padding-bottom: 10rem
}
}
.Blocks__item h3 {
margin-top: 1rem
}
.Blocks__item .btn {
display: inline-block;
margin-top: .5rem
}
@media (max-width: 63.999em) {
.Blocks__item:nth-child(odd) {
background: var(--purple-blue-90);
color: var(--white)
}
.Blocks__item:nth-child(odd) h3 {
color: inherit
}
.Blocks__item:nth-child(odd) .btn {
--bg: var(--lime);
--fg: var(--midnight)
}
}
@media (min-width: 64em) {
.Blocks__item:nth-child(1), .Blocks__item:nth-child(4) {
background: var(--purple-blue-90);
color: var(--white)
}
.Blocks__item:nth-child(1) h3, .Blocks__item:nth-child(4) h3 {
color: inherit
}
.Blocks__item:nth-child(1) .btn, .Blocks__item:nth-child(4) .btn {
--bg: var(--lime);
--fg: var(--midnight)
}
}
@media (min-width: 48em) {
.Blocks__text {
margin-right: 16rem
}
}
.Blocks__image {
position: absolute;
right: 0;
bottom: 0;
pointer-events: none
}
.Blocks__image img {
width: 16rem
}
.faculty-callout {
background: var(--midnight)
}
@media (min-width: 992px) {
.faculty-callout {
padding-block: 5rem
}
}
.faculty-callout .btn {
--bg: var(--lime);
--fg: var(--midnight)
}
.faculty-callout .row {
align-items: center
}
.faculty-callout h3 {
position: relative;
font: var(--h2)
}
@media (max-width: 991.98px) {
.faculty-callout h3 {
margin-top: 1rem
}
}
.faculty-callout h3:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -1.25rem;
border-left: .0625rem solid var(--white)
}
.faculty-callout h3:after {
display: none
}
.gray-bg {
background: var(--gray)
}
.gradient-bg {
padding: 50px 0;
background: var(--purple-blue)
}
.gradient-bg h4 {
color: var(--white)
}
.gradient-bg .slick-arrow {
--bg: var(--lime);
--fg: var(--midnight)
}
.next-step-module {
padding-block: 80px
}
.next-step-module.gradient-bg {
color: var(--white)
}
.next-step-module.gradient-bg .btn {
--bg: var(--lime);
--fg: var(--midnight)
}
.next-step-module.gradient-bg h3 {
color: inherit
}
.next-step-module h3 {
margin-top: 0;
font: var(--h2)
}
.next-step-module h3:after {
display: none
}
@media (min-width: 992px) {
.next-step-module .col-lg-7 .row .row {
max-width: 30rem;
margin-left: auto
}
}
.page-subheader {
margin: 0;
padding: 80px 0
}
.page-subheader h2 {
margin-top: 0;
margin-bottom: 2rem;
font: var(--h2)
}
.page-subheader h2:after {
display: none
}
.page-subheader .btn {
display: inline-block
}
.section-header {
padding-inline: 1rem;
text-align: left
}
@media (min-width: 992px) {
.section-header {
text-align: center
}
}
.section-header h3 {
margin-top: 1rem;
font: var(--h2)
}
.section-header h3:after {
display: none
}
.section-header h4 {
font: var(--body);
color: var(--midnight)
}
.card-block {
margin-bottom: 5rem;
padding-bottom: 0
}
.card-block .cards {
display: flex;
flex-direction: column;
margin-inline: 1rem;
background: var(--midnight);
color: var(--white)
}
.card-block .card-content {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 2rem !important
}
.card-block .card-content > .row:last-child {
margin-top: auto
}
.card-block .card-content h5 {
margin-bottom: 1rem;
color: inherit;
font-family: var(--fields);
font-size: 2rem !important
}
.card-block .card-content h5:after {
display: none !important
}
.card-block .card-content p {
color: inherit !important
}
.card-block .card-content .btn {
--bg: var(--lime);
--fg: var(--midnight)
}
.detail-card-img-top {
display: flex;
flex-direction: column
}
.detail-card-img-top.letter h3 {
margin: 0
}
.detail-card-img-top .card-content {
display: flex;
flex-grow: 1;
flex-direction: column
}
.detail-card-img-top .card-content h3 {
margin: 0
}
.detail-card-img-top .card-content > .row:last-child {
margin-top: auto
}
.detail-card-img-top figure img {
max-width: unset
}
#skipnav {
z-index: 99999;
top: 1.5rem !important;
left: -100%
}
#skipnav:focus {
left: 50%;
transform: translate(-50%)
}
.bg-gradient-light:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg,#e8d3ff80,#fff);
height: 500px
}
.bg-gradient:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg,#e8d3ff,#fff);
height: 500px
}
.bg-gradient-offset:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg,#fff 25%,#e8d3ff 25%,#fff);
height: 200%
}
@media (max-width: 991.98px) {
.Story {
overflow: hidden
}
}
.story-block {
margin-block: 2rem
}
@media (min-width: 992px) {
.story-block {
margin-block: 4rem
}
}
.pagePresentationLayoutRow:has(section:not([class])) + .pagePresentationLayoutRow section:not([class]) .story-block {
margin-block: 0 2rem
}
@media (min-width: 992px) {
.pagePresentationLayoutRow:has(section:not([class])) + .pagePresentationLayoutRow section:not([class]) .story-block {
margin-block: 0 4rem
}
}
div.pagePresentationLayoutRow:has(.Home--Image) .bg-gradient:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg,#fff 15%,#e8d3ff 15%,#fff);
height: 40rem
}
@media (min-width: 992px) {
div.pagePresentationLayoutRow:has(.Home--Image) .bg-gradient:before {
background: linear-gradient(180deg,#fff 60%,#e8d3ff 60%,#fff);
height: 100%
}
div.pagePresentationLayoutRow:has(.Home--Image) + div.pagePresentationLayoutRow .story-block {
margin-block: 13rem 4rem
}
}
@media (min-width: 1200px) {
div.pagePresentationLayoutRow:has(.Home--Image) + div.pagePresentationLayoutRow .story-block {
margin-block: 16rem 4rem !important
}
}
.CardStack {
display: none;
position: relative;
display: grid;
gap: 3rem;
padding-inline: 1rem;
padding-block: 3rem;
background: #000;
color: var(--white);
overflow: hidden
}
.CardStack h2 {
color: var(--white) !important;
font-family: var(--fields);
font-size: 48px;
line-height: 1.2;
font-weight: 500;
text-wrap: balance;
margin-top: 0
}
@media (min-width: 1080px) {
.CardStack {
grid-template-columns: auto auto;
place-content: center;
padding-inline: var(--panel);
padding-block: 7.25rem;
overflow: visible
}
}
.CardStack__bg {
position: absolute;
inset: 0;
width: 100%;
background-color: #654389
}
.CardStack__bg img {
filter: grayscale(100%) contrast(1) blur(0px);
flex: 1 0 100%;
height: 100%;
max-width: 100%;
mix-blend-mode: multiply;
-o-object-fit: cover;
object-fit: cover;
opacity: 1;
position: relative;
width: 100%;
z-index: 1
}
.CardStack__bg:before {
background-color: #611fa6;
content: "";
height: 100%;
inset: 0;
mix-blend-mode: lighten;
position: absolute;
width: 100%;
z-index: 2
}
@media (min-width: 1080px) {
.CardStack__bg {
height: 100vh
}
}
.CardStack__details {
position: sticky;
top: 40vh;
border-left: 4px solid var(--lime);
padding-left: 1.5rem;
z-index: 1
}
.CardStack__details > * {
max-inline-size: 45ch
}
@media (min-width: 1080px) {
.CardStack__details {
padding-left: 3rem;
margin-right: 4rem
}
}
.CardStack__cards {
position: relative;
display: grid;
gap: 3rem;
z-index: 2
}
@media (min-width: 1080px) {
.CardStack__cards {
gap: 10rem
}
}
.CardStack__card {
position: relative
}
.CardStack__card:first-of-type {
margin-top: 0
}
.CardStack__card:has(:focus-visible.Button) {
z-index: 100
}
.CardStack__card cite {
position: absolute;
left: 30%;
bottom: 0rem;
font-family: var(--fira);
font-weight: 500;
font-size: 1rem;
font-style: normal;
line-height: 1;
transform: translateY(230%)
}
@media (min-width: 1080px) {
.CardStack__card {
position: sticky;
top: 10rem;
right: 0;
padding-top: calc(var(--index) * 1em);
margin-top: calc(var(--index) * 1em)
}
}
#CardStack__card1 {
--index: 1
}
#CardStack__card2 {
--index: 2
}
#CardStack__card3 {
--index: 3
}
#CardStack__card4 {
--index: 4
}
.Card {
position: relative;
animation-delay: .5s;
max-width: 687px
}
.Card:has(:focus-visible.Button) {
transform: none !important
}
@media (min-width: 1080px) {
.Card {
aspect-ratio: 3 / 2;
padding: 2rem
}
}
.Card__image {
border-radius: .5rem;
overflow: hidden;
aspect-ratio: 3 / 2
}
.Card__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
@media (min-width: 1080px) {
.Card__image {
position: absolute;
inset: 0;
border-radius: 2rem
}
.Card__image:before {
content: " ";
position: absolute;
inset: 0;
background: linear-gradient(180deg,#0000 50%,#000000b3 80%)
}
}
.Card__content {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
height: 100%;
width: calc(100% - 2rem);
margin: -3rem 0 0 2rem;
padding: 4rem 0 0 2rem;
background: linear-gradient(var(--lime),var(--lime)) 0 100% / .25rem 0 no-repeat;
background-position: top left;
animation: lineDown 1.5s forwards 2s;
animation-play-state: paused
}
.Card__content > div {
animation-delay: 1s
}
.Card__content:has(blockquote) {
padding: 5rem 0 2rem 2rem
}
.Card__content:has(blockquote):before {
content: " ";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: .25rem;
background: linear-gradient(var(--lime),var(--lime)) 100% 100% / 0 .25rem no-repeat;
background-position: bottom left;
animation: lineRight 1.5s forwards 3.5s;
animation-play-state: paused
}
.Card__content:has(blockquote) blockquote {
position: relative;
margin: 0
}
.Card__content:has(blockquote) blockquote:before {
content: "";
display: block;
width: 45px;
height: 45px;
background: var(--lime);
-webkit-mask-image: url(../assets/quote.svg);
mask-image: url(../assets/quote.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat
}
.Card__content:has(blockquote) blockquote p {
font-size: 1rem
}
@media (min-width: 1080px) {
.Card__content:has(blockquote) blockquote p {
font-size: 2rem
}
}
@media (min-width: 1080px) {
.Card__content:has(blockquote) {
padding: 2rem
}
}
[data-animate=true] .Card__content {
animation-play-state: running
}
[data-animate=true] .Card__content:before {
animation-play-state: running
}
.Card__content p {
margin: 0;
padding: 0;
font-family: var(--fira);
font-size: 1rem;
text-shadow: 0px 4px 20px rgba(0,0,0,.25);
text-wrap: balance
}
@media (min-width: 1080px) {
.Card__content p {
font-size: 1.25rem
}
}
@media (min-width: 1080px) {
.Card__content {
margin: 0;
padding: 2rem 0 0 2rem
}
}
.Card__stat {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
margin: 0 0 1rem
}
@media (min-width: 1080px) {
.Card__stat {
color: var(--lime);
font-size: 72px
}
}
@keyframes lineDown {
0% {
background-size: .25rem 0%
}
to {
background-size: .25rem 100%
}
}
@keyframes lineRight {
0% {
background-size: 0% .25rem
}
to {
background-size: 30% .25rem
}
}