/*------------------------------------*\
#LAYOUT
\*------------------------------------*/
section.lightest-gray,
section.lightest-blue,
section.dark-blue,
section.lightest-teal {
padding: 6rem 0;
margin: 0;
}
section.header {
padding: inherit;
}
.page-content__wrap {
display: flex;
flex-direction: row-reverse;
width: 90%;
max-width: 1400px;
margin: 6rem auto;
}
.page-content__inner,
.page-content--listing .page-content__inner {
width: 100%;
padding-right: 22em;
margin-right: 10%;
}
.page-content__inner section .container {
width: 100%;
max-width: 100%;
}
.page-content__inner section {
margin: 3rem 0;
}
.page-content__inner section:first-child {
margin-top: 0;
}
.page-content__inner section:last-child {
margin-bottom: 0;
}
.page-content__inner section .container > div {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
aside + .page-content__inner {
padding: 0;
margin: 0;
}
.page-content--listing .page-content__wrap {
margin: 0 auto;
}
.page-content--listing .page-content__wrap aside {
display: none;
}
.page-content--listing .page-content__inner section:first-child {
margin-top: 6rem;
}
.page-content--listing .page-content__inner section:last-child {
margin-bottom: 6rem;
}
.page-content--search .page-content__wrap {
flex-direction: row;
}
.page-content--search .page-content__inner {
padding-right: 0;
margin-right: 0;
}
.page-content--article .page-content__inner {
max-width: 900px;
padding: 0;
margin: 0 auto;
}
@media only screen and (max-width: 1500px) {
section {
margin: 5rem 0;
}
section.lightest-gray,
section.lightest-blue,
section.dark-blue,
section.lightest-teal {
padding: 5rem 0;
}
.page-content__wrap {
margin: 5rem auto;
}
.page-content__inner,
.page-content--listing .page-content__inner {
padding-right: 20em;
margin-right: 8%;
}
.page-content--listing .page-content__inner section:first-child {
margin-top: 5rem;
}
.page-content--listing .page-content__inner section:last-child {
margin-bottom: 5rem;
}
}
@media only screen and (max-width: 1200px) {
.container {
width: 92%;
}
section {
margin: 4rem 0;
}
section.lightest-gray,
section.lightest-blue,
section.dark-blue,
section.lightest-teal {
padding: 4rem 0;
}
.page-content__wrap {
width: 92%;
margin: 4rem auto;
}
.page-content__inner {
padding-right: 18em;
margin-right: 6%;
}
.page-content--listing .page-content__inner {
padding: 0;
margin: 0;
}
.page-content--listing .page-content__inner section:first-child {
margin-top: 4rem;
}
.page-content--listing .page-content__inner section:last-child {
margin-bottom: 4rem;
}
}
@media only screen and (max-width: 1000px) {
section {
margin: 3rem 0;
}
section.lightest-gray,
section.lightest-blue,
section.dark-blue,
section.lightest-teal {
padding: 3rem 0;
}
.page-content__wrap {
display: block;
width: 100%;
margin: 0 auto 3rem;
}
.page-content__inner,
.page-content--listing .page-content__inner {
padding: 0;
margin: 0;
}
.page-content__inner section .container {
width: 92%;
}
.page-content__inner section:first-child,
.page-content--listing .page-content__inner section:first-child {
margin-top: 3rem;
}
.page-content__inner section:last-child,
.page-content--listing .page-content__inner section:last-child {
margin-bottom: 3rem;
}
.page-content--article .page-content__wrap {
margin: 3rem auto;
}
.page-content--article .page-content__inner {
max-width: 100%;
}
}
@media only screen and (max-width: 800px) {
section {
margin: 2.5rem 0;
}
section.lightest-gray,
section.lightest-blue,
section.dark-blue,
section.lightest-teal {
padding: 2.5rem 0;
}
.page-content__wrap {
margin: 0 auto 2.5rem;
}
.page-content__inner section,
.page-content__inner section:first-child,
.page-content__inner section:last-child,
.page-content--listing .page-content__inner section:first-child,
.page-content--listing .page-content__inner section:last-child {
margin: 2.5rem 0;
}
.page-content--article .page-content__wrap {
margin: 2.5rem auto;
}
}
@media only screen and (max-width: 600px) {
.container,
.page-content__inner section .container {
width: 90%;
}
.page-content--event .page-content__wrap {
margin-bottom: 0;
}
.page-content--event .page-content__inner .copy {
margin-bottom: 2.5rem;
}
}
/*------------------------------------*\
#SIDEBAR
\*------------------------------------*/
/*------------------------------------*\
#SETUP
\*------------------------------------*/
.sidebar {
position: sticky;
flex: 0 0 22em;
align-self: flex-start;
top: 2rem;
margin-left: 10%;
z-index: 999;
}
.sidebar__block {
background: var(--lightest-gray);
padding: 1.8rem 2rem 2rem;
border-radius: 16px;
margin-bottom: 1.5rem;
}
.sidebar__block:last-child {
margin: 0;
}
.block__content h5 {
font-weight: 700;
margin-bottom: 1rem;
}
.block__content p {
font-weight: 500;
line-height: 1.5;
}
.block__content .text-link {
margin-top: 1.5rem;
}
.content__row {
display: flex;
justify-content: space-between;
padding: 0.6rem 0;
border-top: 2px dotted var(--light-gray);
margin-top: 1.5rem;
}
.content__row p {
font-weight: 500;
}
.content__row:last-of-type {
border-bottom: 2px dotted var(--light-gray);
}
.content__row + .content__row {
margin-top: 0;
}
.content__date {
margin-bottom: 0.6rem;
}
.content__date:last-of-type {
margin-bottom: 0;
}
.block--image {
background: #edf2f7;
padding: 0;
border-radius: 16px 16px 0 0;
margin: 0;
overflow: hidden;
}
.block--image + .sidebar__block {
border-radius: 0 0 16px 16px;
}
.image__default {
display: flex;
justify-content: center;
align-items: center;
height: 205px;
}
.image__default svg {
width: 40%;
fill: #d9e0e8;
}
@media only screen and (max-width: 1500px) {
.sidebar {
flex: 0 0 20em;
margin-left: 8%;
}
}
@media only screen and (max-width: 1200px) {
.sidebar {
flex: 0 0 18em;
margin-left: 6%;
}
.sidebar__block {
padding: 1.6rem 1.8rem 1.8rem;
}
.block--image {
padding: 0;
}
}
@media only screen and (max-width: 1000px) {
.sidebar {
position: relative;
display: block;
width: 100%;
top: 0;
margin: 0;
}
.sidebar__block,
.sidebar__block:last-child {
width: 92%;
margin: 3rem auto;
}
.sidebar--location .sidebar__block,
.sidebar--event .sidebar__block {
background: none;
padding: 0;
}
.sidebar--location .image__default {
display: none;
}
.sidebar--location .block__content h5,
.sidebar--event .block__content h5 {
font-size: 2.1rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.block--image {
border-radius: 0;
margin: 0 auto;
}
.block--image img {
border-radius: 16px;
margin-top: 3rem;
}
}
@media only screen and (max-width: 800px) {
.sidebar__block,
.sidebar__block:last-child {
margin: 2.5rem auto;
}
.sidebar--location .block__content h5,
.sidebar--event .block__content h5 {
font-size: 1.8rem;
}
.block--image {
margin: 0 auto;
}
.block--image img {
margin-top: 2.5rem;
}
}
@media only screen and (max-width: 600px) {
.sidebar__block,
.sidebar__block:last-child {
width: 90%;
}
.sidebar__block {
padding: 1.5rem;
}
.sidebar__block.block--cta {
width: 90%;
}
.block--image {
margin: 0 auto;
}
.sidebar--location .block__content h5,
.sidebar--event .block__content h5 {
font-size: 1.5rem;
}
}
/*------------------------------------*\
#CTA
\*------------------------------------*/
.block--cta {
background: none;
padding: 0;
border-radius: 0;
}
.block--cta .block__content {
position: relative;
background: var(--lightest-blue);
padding: 1.8rem 2rem 2rem;
border-radius: 16px 16px 0 0;
}
.block--cta .block__content::before,
.block--cta .block__content::after {
position: absolute;
content: '';
width: 100%;
height: 16px;
left: 0;
right: 0;
bottom: 0;
}
.block--cta .block__content::before {
background: #fff;
}
.block--cta .block__content::after {
background: var(--lightest-blue);
border-radius: 0 0 16px 16px;
}
.block--cta .block__content h5 {
margin-bottom: 0.5rem;
}
.block--cta .block__content p {
font-size: 1.05rem;
}
.block--cta .block__content p + p {
margin-top: 0.5rem;
}
.block--cta .button {
position: relative;
justify-content: flex-start;
width: 100%;
text-align: left;
padding-left: 2rem;
padding-right: 2rem;
margin-bottom: 1rem;
}
.block--cta .button::before {
position: absolute;
content: '';
width: calc(100% + 4px);
height: 16px;
left: -2px;
right: -2px;
top: -16px;
background: var(--lightest-blue);
}
.block--cta .block__content + .button {
border-radius: 0 0 16px 16px;
}
.block--cta .button:last-of-type {
margin: 0;
}
.block--cta .button + .button {
border-radius: 16px;
}
@media only screen and (max-width: 1200px) {
.block--cta .block__content {
padding: 1.6rem 1.8rem 1.8rem;
}
.block--cta .button {
padding-left: 1.8rem;
padding-right: 1.8rem;
}
}
@media only screen and (max-width: 1000px) {
.block--cta {
background: var(--lightest-blue);
padding: 1.6rem 1.8rem 1.8rem;
border-radius: 16px;
}
.block--cta .block__content {
padding: 0;
}
.block--cta .block__content::before,
.block--cta .block__content::after,
.block--cta .button::before {
display: none;
}
.block--cta .block__content h5 {
font-size: 1.35rem;
margin-bottom: 0.5rem;
}
.block--cta .block__content p {
font-size: 1.15rem;
}
.block--cta .button {
width: fit-content;
padding: 0.7rem 1.2rem 0.9rem;
margin-top: 1.5rem;
}
.block--cta .button:last-of-type {
margin-top: 1.5rem;
}
.block--cta .block__content + .button {
border-radius: 8px;
}
}
@media only screen and (max-width: 800px) {
.block--cta .block__content h5 {
font-size: 1.3rem;
}
.block--cta .block__content p {
font-size: 1.1rem;
}
}
@media only screen and (max-width: 600px) {
.block--cta {
padding: 1.5rem;
}
.block--cta .block__content h5 {
font-size: 1.25rem;
}
.block--cta .block__content p {
font-size: 1.05rem;
}
}
/*------------------------------------*\
#OVERLAY
\*------------------------------------*/
.block__bar,
.sidenav__top,
.filter__top {
display: none;
}
@media only screen and (max-width: 1000px) {
.sidebar--overlay {
display: contents;
}
.sidebar__block.block--bar {
display: contents;
width: 100%;
background: transparent;
padding: 0;
margin: 0;
}
.block__bar {
position: sticky;
display: block;
top: -1px;
background: var(--lightest-gray);
padding: 1rem 4%;
transition: border-shadow 0.5s ease;
z-index: 999;
}
.block--filter .block__bar {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--lightest-blue);
}
.block__bar.is-pinned {
box-shadow: 0 4px 6px -2px rgba(57,57,57, 0.1);
}
.bar__button {
display: inline-block;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.2;
color: var(--dark-blue);
padding: 0.1rem 1rem 0.2rem;
border: 2px solid var(--light-blue);
border-radius: 25px;
transition: color 0.5s ease, border-color 0.5s ease;
cursor: pointer;
}
.bar__button svg {
width: 0.8em;
max-height: 0.7em;
fill: var(--light-blue);
margin-right: 0.5rem;
transition: fill 0.5s ease;
}
.bar__button:hover {
color: var(--light-blue-hover);
border-color: var(--light-blue-hover);
}
.bar__button:hover svg {
fill: var(--light-blue-hover);
}
.sidenav,
.filter {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--lightest-gray);
z-index: 999999;
}
.filter {
background: var(--lightest-blue);
}
.sidenav__top,
.filter__top {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--dark-blue);
padding: 1.2rem 4% 1.3rem;
}
.top__headline {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.2;
color: #fff;
}
.top__headline svg {
width: 0.8em;
max-height: 0.7em;
fill: #fff;
margin-right: 0.5rem;
}
.top__button {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 100%;
top: 0;
right: 0;
bottom: 0;
background: var(--light-blue);
cursor: pointer;
transition: background 0.5s ease;
}
.top__button svg {
width: 0.9em;
height: auto;
fill: #fff;
}
.top__button:hover {
color: #fff;
background: var(--light-blue-hover);
}
.sidenav__inner {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 3rem 4%;
overflow: auto;
}
.filter__inner {
display: flex;
flex-direction: column;
width: 100%;
height: calc(100% - 3rem);
padding: 3rem 4%;
overflow: auto;
}
}
@media only screen and (max-width: 800px) {
.sidenav__inner,
.filter__inner {
padding: 2rem 4%;
}
.bar__button,
.top__headline {
font-size: 1.15rem;
}
}
@media only screen and (max-width: 600px) {
.sidenav__inner,
.filter__inner {
padding: 2rem 5%;
}
.block__bar {
padding: 0.9rem 5%;
}
.sidenav__top,
.filter__top {
padding: 1.1rem 5% 1.2rem;
}
.bar__button,
.top__headline {
font-size: 1.1rem;
}
.top__button {
width: 3.6rem;
}
}
/*------------------------------------*\
#SIDENAV
\*------------------------------------*/
.sidenav__list li a {
display: inline-block;
line-height: 1.3;
transition: color 0.5s ease;
}
.sidenav__list li a:hover {
color: var(--light-blue);
}
.sidenav__list li a:hover svg {
fill: var(--light-blue);
}
.sidenav__link {
font-size: 1.6rem;
font-weight: 700;
color: var(--dark-blue);
}
.item--active .sidenav__link {
cursor: default;
}
.item--active .sidenav__link:hover {
color: var(--dark-blue);
}
.sidenav__sub-list {
margin-top: 0.8rem;
}
.sidenav__sub-list li {
margin: 0.5rem 0;
}
.sidenav__sub-list li:last-child {
margin-bottom: 0;
}
.sidenav__sub-link {
font-size: 1.2rem;
font-weight: 500;
color: var(--gray);
padding-right: 1rem;
}
.sidenav__sub-link svg {
position: absolute;
width: 0.35em;
fill: var(--gray);
margin: 0.5em 0 0 0.5em;
transition: fill 0.5s ease;
}
.sub-item--active .sidenav__sub-link {
color: var(--light-blue);
cursor: default;
}
.sub-item--active .sidenav__sub-link svg {
fill: var(--light-blue);
}
@media only screen and (max-width: 1000px) {
.sidenav__link {
width: 100%;
font-size: 2.1rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--light-gray);
}
.sidenav__sub-list {
margin-top: 2rem;
}
.sidenav__sub-list li {
margin: 1.5rem 0;
}
.sidenav__sub-link {
font-size: 1.35rem;
font-weight: 500;
}
}
@media only screen and (max-width: 800px) {
.sidenav__link {
font-size: 1.8rem;
}
.sidenav__sub-link {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 600px) {
.sidenav__link {
font-size: 1.5rem;
padding-bottom: 0.8rem;
}
.sidenav__sub-list {
margin-top: 1.5rem;
}
.sidenav__sub-list li {
margin: 1rem 0;
}
.sidenav__sub-link {
font-size: 1.2rem;
}
}
/*------------------------------------*\
#FILTER
\*------------------------------------*/
.sidebar--filter {
margin: 0 5% 0 0;
}
.block--filter {
max-height: 100vh;
background: var(--lightest-blue);
overflow-y: auto;
}
.block--filter h5 {
margin: 1.5rem 0 1rem;
}
.filter__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.filter__header h3 {
font-weight: 700;
color: var(--dark-blue);
}
.block--filter .button--clear {
font-size: 0.95rem;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.2rem 0.6rem 0.3rem;
border-radius: 4px;
}
.filter__range h5 {
margin-bottom: 0.5rem;
}
.filter__options .control {
margin-bottom: 0.7rem;
}
.filter__options .control:last-child {
margin-bottom: 0;
}
.filter__options .checkbox__label {
font-size: 1.2rem;
font-weight: 500;
}
.filter__options .control__checkbox input[type=checkbox] + .checkbox__label::before {
top: 3px;
}
.filter__options .control__checkbox input[type=checkbox]:checked + .checkbox__label::after,
.filter__options .control__checkbox input[type=checkbox]:disabled + .checkbox__label::after {
top: 0;
}
.filter__options .control__checkbox input[type=checkbox]:checked + .checkbox__label {
color: var(--light-blue);
}
.filter__options .control__checkbox:hover .checkbox__label {
color: var(--light-blue);
}
.filter__button {
display: none;
}
@media only screen and (max-width: 1200px) {
.sidebar--filter {
margin: 0 4% 0 0;
}
.filter__options .control__checkbox input[type=checkbox] + .checkbox__label::before {
top: 2px;
}
.filter__options .checkbox__label {
font-size: 1.15rem;
}
}
@media only screen and (max-width: 1000px) {
.sidebar--filter {
margin: 0;
}
.block--filter {
max-height: inherit;
overflow-y: inherit;
}
.block--filter h5 {
font-size: 1.4rem;
margin-top: 0;
}
.control h5 {
margin-top: 0;
}
.filter__header {
display: none;
}
.filter__range {
margin-bottom: 1.5rem;
}
.filter__options {
margin-bottom: 3rem;
}
.filter__options .control {
margin-bottom: 0.8rem;
}
.filter__button {
display: block;
margin-top: auto;
}
.filter__button .button {
width: 100%;
}
}
@media only screen and (max-width: 800px) {
.block--filter .button--clear {
font-size: 0.9rem;
}
.block--filter h5 {
font-size: 1.3rem;
}
.filter__options {
margin-bottom: 2.5rem;
}
}
@media only screen and (max-width: 600px) {
.block--filter .button--clear {
font-size: 0.85rem;
}
.block--filter h5 {
font-size: 1.2rem;
}
}
/*------------------------------------*\
#BANNERS
\*------------------------------------*/
/*------------------------------------*\
#BREADCRUMBS
\*------------------------------------*/
.breadcrumbs {
margin-top: 1.5rem;
}
.breadcrumbs__list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.breadcrumbs__list li {
position: relative;
margin: 0.5rem 2rem 0 0;
}
.breadcrumbs__list li::after {
position: absolute;
content: url('data:image/svg+xml,');
width: 0.4em;
top: -0.15em;
right: -1.25em;
}
.breadcrumbs__list li:last-child {
margin-right: 0;
}
.breadcrumbs__list li:last-child::after {
display: none;
}
.breadcrumbs__list li a {
display: block;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.3;
color: var(--gray);
transition: color 0.5s ease;
}
.breadcrumbs__list li a:hover {
color: var(--light-blue);
}
.breadcrumbs__list li:last-child a {
color: var(--dark-blue);
cursor: default;
}
.breadcrumbs__list svg {
position: relative;
width: 0.8em;
top: 0.02em;
fill: var(--gray);
transition: fill 0.5s ease;
}
.breadcrumbs__list a:hover svg {
fill: var(--light-blue);
}
.link--back svg {
width: 0.8em;
fill: var(--gray);
top: 0;
margin-right: 0.5em;
}
.breadcrumbs__list li:last-child .link--back {
cursor: pointer;
}
.header.dark-blue .breadcrumbs__list li a {
color: #fff;
}
.header.dark-blue .breadcrumbs__list svg {
fill: #fff;
}
.header.dark-blue .breadcrumbs__list a:hover svg {
fill: var(--lighter-blue);
}
.header.dark-blue .breadcrumbs__list li:last-child a,
.header.dark-blue .breadcrumbs__list li a:hover {
color: var(--lighter-blue);
}
.header.lightest-blue .breadcrumbs__list li a {
color: var(--light-blue);
}
.header.lightest-blue .breadcrumbs__list svg {
fill: var(--light-blue);
}
.header.lightest-blue .breadcrumbs__list a:hover svg {
fill: var(--light-blue-hover);
}
.header.lightest-blue .breadcrumbs__list li a:hover {
color: var(--light-blue-hover);
}
@media only screen and (max-width: 1200px) {
.breadcrumbs__list li a {
font-size: 1rem;
}
}
@media only screen and (max-width: 1000px) {
.breadcrumbs {
margin-top: 1rem;
}
}
@media only screen and (max-width: 800px) {
.breadcrumbs__list li a {
font-size: 0.95rem;
}
}
@media only screen and (max-width: 800px) {
.breadcrumbs {
margin-top: 3%;
}
.breadcrumbs__list li a {
font-size: 0.9rem;
}
}
/*------------------------------------*\
#SETUP
\*------------------------------------*/
section.header {
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
}
.header.lightest-gray {
background: linear-gradient(to right, var(--lightest-gray) 20%, 80%, var(--light-gray));
}
.header.lightest-blue {
background: linear-gradient(to right, var(--lightest-blue) 25%, 75%, #cde8ff);
}
.header.dark-blue {
background: linear-gradient(to right, var(--dark-blue) 25%, 75%, #01689D);
}
.header__copy,
.header--search .header__content {
padding: 6rem 0;
}
.header--image.dark-blue .header__copy {
padding: 9rem 0;
}
.header--search .header__copy {
padding: 0;
}
.header__copy h6 {
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.header__copy p {
font-size: 1.5rem;
font-weight: 400;
line-height: 1.4;
color: var(--gray);
margin-top: 1rem;
}
.header.dark-blue .header__copy h6,
.header.dark-blue .header__copy p {
color: var(--lighter-blue);
}
.header.dark-blue .header__copy h1 {
color: #fff;
}
.header--event .header__copy p {
color: var(--dark-blue);
}
.header__cta {
display: flex;
margin-top: 2.5rem;
}
.header__cta .button {
justify-content: center;
margin: 0;
}
.header__cta .button--icon svg {
max-height: 0.9em;
margin: 0.1em 0.4em 0 0;
}
.header__search {
width: 100%;
margin-top: 3rem;
}
@media only screen and (max-width: 1500px) {
.header__copy,
.header--search .header__content {
padding: 5rem 0;
}
.header--image.dark-blue .header__copy {
padding: 7rem 0;
}
}
@media only screen and (max-width: 1200px) {
.header__copy,
.header--search .header__content {
padding: 4rem 0;
}
.header--image.dark-blue .header__copy {
padding: 6rem 0;
}
.header__copy p {
font-size: 1.4rem;
}
.header__search {
margin-top: 2.5rem;
}
}
@media only screen and (max-width: 1000px) {
.header__copy,
.header--search .header__content,
.header--image.dark-blue .header__copy {
padding: 3rem 0;
}
.header__copy p {
font-size: 1.3rem;
margin-top: 0.8rem;
}
}
@media only screen and (max-width: 800px) {
.header__copy,
.header--search .header__content,
.header--image.dark-blue .header__copy {
padding: 2.5rem 0;
}
.header__copy p {
font-size: 1.2rem;
}
.header__search {
margin-top: 2rem;
}
}
@media only screen and (max-width: 600px) {
.header--search .container {
width: 100%;
}
.header--search .header__content {
padding: 0;
}
.header--search .header__copy {
padding: 2.5rem 5%;
}
.header__copy h6 {
font-size: 1rem;
margin-bottom: 0.3rem;
}
.header__copy p {
font-size: 1.1rem;
margin-top: 0.6rem;
}
.header__search {
margin: 0;
}
}
/*------------------------------------*\
#IMAGE
\*------------------------------------*/
.header--image.dark-blue {
background: linear-gradient(to right, var(--dark-blue) 25%, 75%, var(--light-blue));
}
.header--image .container,
.header--image .header__inner {
position: static;
}
.header--image .header__inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.header--image .header__content,
.header--image .header__image {
width: 45%;
}
.header--image .header__image {
position: absolute;
align-self: stretch;
height: 120%;
top: 0;
right: 0;
border-radius: 0 0 0 20rem;
overflow: hidden;
}
.header--image .header__image img {
position: absolute;
width: 100%;
height: 85%;
object-fit: cover;
}
@media only screen and (max-width: 1500px) {
.header--image .header__content,
.header--image .header__image {
width: 46%;
}
}
@media only screen and (max-width: 1200px) {
.header--image .header__content,
.header--image .header__image {
width: 47.5%;
}
}
@media only screen and (max-width: 1000px) {
.header--image.lightest-gray {
background: linear-gradient(to bottom, var(--lightest-gray) 35%, 65%, var(--light-gray) 80%, #fff 80%, #fff 100%) no-repeat;
}
.header--image.lightest-blue {
background: linear-gradient(to bottom, var(--lightest-blue) 35%, 65%, #cde8ff 80%, #fff 80%, #fff 100%) no-repeat;
}
.header--image.dark-blue {
background: linear-gradient(to bottom, var(--dark-blue) 35%, 65%, #01689D 80%, #fff 80%, #fff 100%) no-repeat;
}
.header--image .container {
width: 100%;
}
.header--image .header__inner {
display: block;
}
.header--image .header__content {
width: 100%;
padding: 0 4%;
}
.header--image .header__image {
position: relative;
width: 100%;
height: 100%;
padding-bottom: 50%;
border-radius: 0;
}
.header--image .header__image img {
height: 100%;
}
}
@media only screen and (max-width: 1000px) {
.header--image.dark-blue {
background: linear-gradient(to bottom, var(--dark-blue) 35%, 100%, #01689D 80%, #fff 80%, #fff 100%) no-repeat;
}
.header--image .container {
width: 100%;
}
}
@media only screen and (max-width: 600px) {
.header--image .header__content {
padding: 0 5%;
}
.header--image .header__image {
width: 100%;
padding-bottom: 55%;
}
}
/*------------------------------------*\
#PATTERN
\*------------------------------------*/
.header--pattern::before {
position: absolute;
width: 50%;
bottom: -10%;
right: -5%;
}
.header--pattern.lightest-gray::before {
content: url('data:image/svg+xml,');
opacity: 0.5;
}
.header--pattern.lightest-blue::before {
content: url('data:image/svg+xml,');
opacity: 0.5;
}
.header--pattern.dark-blue::before {
content: url('data:image/svg+xml,');
opacity: 0.2;
}
.search--location section.header {
overflow: visible;
}
.search--location .header--pattern::before {
display: none;
}
.pattern {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.pattern::before {
position: absolute;
width: 50%;
bottom: -10%;
right: -5%;
content: url('data:image/svg+xml,');
opacity: 0.2;
}
@media only screen and (max-width: 1200px) {
.header--pattern::before,
.pattern::before {
width: 60%;
}
}
@media only screen and (max-width: 1000px) {
.header--pattern::before,
.pattern::before {
position: absolute;
width: 80%;
bottom: -20%;
right: -5%;
}
}
@media only screen and (max-width: 800px) {
.header--pattern.lightest-gray::before,
.header--pattern.lightest-blue::before,
.header--pattern.dark-blue::before,
.pattern::before {
display: none;
}
}
/*------------------------------------*\
#LOCATION
\*------------------------------------*/
.header--location .header__inner {
display: flex;
justify-content: space-between;
padding: 6rem 0;
}
.header--location .header__copy {
padding: 0;
}
.header--location .header__copy p {
color: var(--dark-blue);
}
.header--bg.header--location .header__cta {
display: block;
flex: 0 0 22rem;
margin: 3.5rem 0 0 10%;
}
.header--bg.header--location .header__cta .button {
width: 100%;
}
.header--bg.header--location .header__cta .button + .button {
margin: 1rem 0 0;
}
@media only screen and (max-width: 1500px) {
.header--location .header__inner {
padding: 5rem 0;
}
.header--bg.header--location .header__cta {
flex: 0 0 20rem;
margin: 3rem 0 0 10%;
}
}
@media only screen and (max-width: 1300px) {
.header--bg.header--location .header__cta {
margin: 3rem 0 0 6%;
}
}
@media only screen and (max-width: 1200px) {
.header--location .header__inner {
padding: 4rem 0;
}
.header--bg.header--location .header__cta {
flex: 0 0 18rem;
margin: 2.5rem 0 0 6%;
}
}
@media only screen and (max-width: 1000px) {
.header--location .header__inner {
display: block;
padding: 3rem 0;
}
.header--bg.header--location .header__cta {
display: flex;
flex: 0 0 100%;
justify-content: space-between;
max-width: 500px;
margin: 2rem 0 0.5rem;
}
.header--bg.header--location .header__cta .button {
width: 50%;
}
.header--bg.header--location .header__cta .button + .button {
margin: 0 0 0 1rem;
}
}
@media only screen and (max-width: 800px) {
.header--location .header__inner {
padding: 2.5rem 0;
}
}
@media only screen and (max-width: 600px) {
.header--bg.header--location .header__cta {
max-width: 100%;
}
}
@media only screen and (max-width: 450px) {
.header--location .header__cta,
.header--bg.header--location .header__cta {
display: block;
}
.header--location .header__cta .button,
.header--bg.header--location .header__cta .button {
width: 100%;
}
.header--location .header__cta .button + .button,
.header--bg.header--location .header__cta .button + .button {
margin: 1rem 0 0;
}
}
/*------------------------------------*\
#ARTICLE
\*------------------------------------*/
.header--article.lightest-blue {
background: none;
}
.header--article.lightest-blue .background {
position: absolute;
width: 100%;
height: 70%;
top: 0;
left: 0;
right: 0;
background: var(--lightest-blue);
}
.header--article .header__content {
max-width: 900px;
text-align: center;
margin: 3rem auto 4rem;
}
.header--article .header__copy {
padding: 0;
}
.header--article .header__copy p {
color: var(--dark-blue);
}
.header--article .header__image {
position: relative;
max-width: 1000px;
height: 650px;
background: var(--lightest-gray);
border-radius: 16px;
overflow: hidden;
margin: 0 auto;
}
.header--article .header__image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.header--article .header__image img[src$=".svg"] {
width: 60%;
height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: contain;
margin: auto;
}
@media only screen and (max-width: 1500px) {
.header--article .header__content {
margin: 2.5rem auto 3.5rem;
}
}
@media only screen and (max-width: 1200px) {
.header--article .header__content {
margin: 2rem auto 3rem;
}
}
@media only screen and (max-width: 1000px) {
.header--article .header__content {
max-width: 100%;
margin: 3rem auto;
}
.header--article .header__image {
height: auto;
padding-bottom: 65%;
}
}
@media only screen and (max-width: 800px) {
.header--article .header__content {
margin: 2.5rem auto;
}
}
@media only screen and (max-width: 600px) {
.header--article.lightest-blue .background {
height: 80%;
}
}
/*------------------------------------*\
#COMPONENTS
\*------------------------------------*/
/*------------------------------------*\
#SUBPAGES
\*------------------------------------*/
.section__header {
max-width: 900px;
margin-bottom: 3rem;
}
.section__header h2 + p {
margin-top: 1rem;
}
.video .section__header {
text-align: center;
margin: 0 auto 3rem;
}
.copy + .cards--block {
margin-top: -1rem;
}
.cards--providers + .cards--providers {
padding-top: 0;
}
@media only screen and (max-width: 1500px) {
.section__header {
margin-bottom: 2.5rem;
}
.video .section__header {
margin: 0 auto 2.5rem;
}
}
@media only screen and (max-width: 1200px) {
.section__header {
margin-bottom: 2rem;
}
.video .section__header {
margin: 0 auto 2rem;
}
}
@media only screen and (max-width: 1000px) {
.page-content--listing .copy-content + .list {
margin-top: 0;
}
.page-content--listing .copy-content.lightest-gray + .list,
.page-content--listing .copy-content.lightest-blue + .list,
.page-content--listing .copy-content.dark-blue + .list {
margin-top: 3rem;
}
}
@media only screen and (max-width: 800px) {
.page-content--listing .copy-content.lightest-gray + .list,
.page-content--listing .copy-content.lightest-blue + .list,
.page-content--listing .copy-content.dark-blue + .list {
margin-top: 2.5rem;
}
}
@media only screen and (max-width: 600px) {
.copy + .contact,
.copy + .accordion,
.copy + .list {
margin-top: -0.5rem;
}
}
/*------------------------------------*\
#ACCORDION
\*------------------------------------*/
.accordion__inner {
border-bottom: 2px solid var(--light-gray);
}
.accordion__title {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
border-top: 2px solid var(--light-gray);
cursor: pointer;
}
.accordion__title h4 {
font-weight: 600;
padding-right: 1.5em;
transition: color 0.5s ease;
}
.accordion__title:hover h4 {
color: var(--light-blue);
}
.accordion__block.open .accordion__title h4 {
color: var(--light-blue);
}
.accordion__icon {
position: relative;
display: block;
flex: 0 0 30px;
width: 30px;
height: 30px;
background: #fff;
border: 2px solid var(--dark-blue);
border-radius: 50%;
transition: background 0.5s ease, border-color 0.5s ease;
}
.accordion__icon::before,
.accordion__icon::after {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--dark-blue);
border-radius: 3px;
margin: auto;
transition: background 0.5s ease;
}
.accordion__icon::before {
width: 13px;
height: 2px;
}
.accordion__icon::after {
width: 2px;
height: 13px;
}
.accordion__title:hover .accordion__icon {
background: var(--light-blue);
border-color: var(--light-blue);
}
.accordion__title:hover .accordion__icon::before,
.accordion__title:hover .accordion__icon::after {
background: #fff;
}
.accordion__block.open .accordion__icon::after {
display: none;
}
.accordion__content {
display: none;
padding-bottom: 2rem;
}
.accordion__content p:last-child,
.accordion__content ul:last-child,
.accordion__content ol:last-child {
margin: 0;
}
@media only screen and (max-width: 1200px) {
.accordion__title {
padding: 1.2rem 0;
}
.accordion__content {
padding-bottom: 1.8rem;
}
}
@media only screen and (max-width: 800px) {
.accordion__icon {
flex: 0 0 28px;
width: 28px;
height: 28px;
}
.accordion__icon::before {
width: 11px;
}
.accordion__icon::after {
height: 11px;
}
}
@media only screen and (max-width: 600px) {
.accordion__title {
padding: 1rem 0;
}
.accordion__icon {
flex: 0 0 25px;
width: 25px;
height: 25px;
}
.accordion__icon::before {
width: 10px;
}
.accordion__icon::after {
height: 10px;
}
.accordion__content {
padding-bottom: 1.5rem;
}
}
/*------------------------------------*\
#COPY-CONTENT
\*------------------------------------*/
.copy-content {
position: relative;
}
.copy-content__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.copy-content__content,
.copy-content__copy {
width: 45%;
}
.copy-content__content {
position: relative;
align-self: stretch;
min-height: 25rem;
}
.copy-content__content img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
}
.content--video {
min-height: 400px;
}
.content__video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
container-type: size;
background: var(--lightest-gray);
border-radius: 16px;
overflow: hidden;
}
.content__video iframe {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
@container (min-aspect-ratio: 16/9) {
height: 56.25vw;
}
@container (max-aspect-ratio: 16/9) {
width: 177.78vh;
}
}
.content--list {
align-self: center;
min-height: inherit;
}
.lightest-blue .content--list .list__item {
border-color: #c9dbea;
}
.dark-blue .content--list .list__item {
border-color: #335f83;
}
.dark-blue .content--list .list__link span {
color: #fff;
}
.dark-blue .content--list .list__link:hover span {
color: var(--lighter-blue);
}
.dark-blue .content--list .list__link svg {
fill: var(--lighter-blue);
}
.copy-content__copy {
padding: 2rem 0;
}
.copy-content__copy h6 {
margin-bottom: 0.5rem;
}
.copy-content__copy h2:first-of-type {
margin-top: 0;
}
.copy-content__copy p:last-child {
margin: 0;
}
.copy-content__copy .button:last-of-type {
margin-bottom: 0;
}
.copy-content--reverse .copy-content__inner {
flex-direction: row-reverse;
}
.copy-content.copy-content--full {
margin: 0;
padding: 0;
}
.copy-content--full .container {
position: static;
}
.copy-content--full .copy-content__content,
.copy-content--full .copy-content__copy {
width: 50%;
}
.copy-content--full .copy-content__content {
position: absolute;
align-self: stretch;
height: 100%;
min-height: inherit;
top: 0;
left: 0;
}
.copy-content--full .copy-content__content img {
border-radius: 0;
}
.copy-content--full .copy-content__copy {
padding: 6rem 0 6rem 8%;
margin-left: 50%;
}
.copy-content--full.copy-content--reverse .copy-content__inner {
flex-direction: row;
}
.copy-content--full.copy-content--reverse .copy-content__content {
left: inherit;
right: 0;
}
.copy-content--full.copy-content--reverse .copy-content__copy {
padding: 6rem 8% 6rem 0;
margin: 0;
}
.copy-content.dark-blue h2,
.copy-content.dark-blue p,
.copy-content.dark-blue li,
.copy-content.dark-blue li::before {
color: #fff;
}
.copy-content.dark-blue h6 {
color: var(--lighter-blue);
}
@media only screen and (max-width: 1500px) {
.copy-content__content,
.copy-content__copy {
width: 46%;
}
.copy-content__copy {
padding: 1.5rem 0;
}
.copy-content--full .copy-content__copy {
padding: 5rem 0 5rem 6%;
}
.copy-content--full.copy-content--reverse .copy-content__copy {
padding: 5rem 6% 5rem 0;
}
}
@media only screen and (max-width: 1200px) {
.copy-content__content,
.copy-content__copy {
width: 47%;
}
.copy-content__copy {
padding: 1rem 0;
}
.copy-content--full .copy-content__copy {
padding: 4rem 0 4rem 5%;
}
.copy-content--full.copy-content--reverse .copy-content__copy {
padding: 4rem 5% 4rem 0;
}
}
@media only screen and (max-width: 1000px) {
section.copy-content {
padding: 0;
margin: 0;
}
.copy-content .container {
width: 100%;
}
.copy-content__inner {
display: block;
}
.copy-content__content,
.copy-content__copy {
width: 100%;
}
.copy-content__content {
padding-bottom: 50%;
min-height: inherit;
}
.copy-content__content img {
border-radius: 0;
}
.copy-content .copy-content__copy,
.copy-content.copy-content--reverse .copy-content_copy,
.copy-content--full.copy-content--reverse .copy-content__copy {
padding: 3rem 4%;
margin: 0;
}
.copy-content--full .copy-content__content,
.copy-content--full .copy-content__copy {
width: 100%;
}
.copy-content--full .copy-content__content {
position: relative;
}
section.copy-content--video,
section.copy-content--list {
padding-bottom: 3rem;
}
.content--video,
.content--list {
width: 92%;
min-height: inherit;
margin: 0 auto;
}
.content--list {
padding: 0;
}
.copy-content--list .copy-content__copy p {
margin: 0;
}
.copy-content--list .copy-content__copy .button {
display: none;
}
}
@media only screen and (max-width: 800px) {
.copy-content .copy-content__copy,
.copy-content.copy-content--reverse .copy-content__copy,
.copy-content--full.copy-content--reverse .copy-content__copy {
padding: 2.5rem 4%;
}
section.copy-content--video,
section.copy-content--list {
padding-bottom: 2.5rem;
}
}
@media only screen and (max-width: 600px) {
.copy-content .copy-content__copy,
.copy-content.copy-content--reverse .copy-content__copy,
.copy-content--full.copy-content--reverse .copy-content__copy {
padding: 2.5rem 5%;
}
.copy-content__content {
padding-bottom: 55%;
}
.content--video,
.content--list {
width: 90%;
}
.content--list {
padding: 0;
}
}
/*------------------------------------*\
#CONTACT
\*------------------------------------*/
.contact__cta {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2px dotted var(--light-gray);
padding: 1.2rem 0;
}
.contact__cta:last-child {
border-bottom: 2px dotted var(--light-gray);
}
.cta__label {
margin-right: 2.5rem;
}
.cta__label p {
font-weight: 600;
color: var(--dark-blue);
line-height: 1.2;
}
.cta__link .text-link {
display: flex;
align-items: center;
white-space: nowrap;
}
.cta__link .text-link svg {
margin: 0.1em 0.4em 0 0;
}
@media only screen and (max-width: 800px) {
.contact__cta {
padding: 1rem 0;
}
}
/*------------------------------------*\
#VIDEO
\*------------------------------------*/
.video__embed {
position: relative;
padding-bottom: 56.25%;
background: var(--lightest-gray);
border-radius: 8px;
overflow: hidden;
}
.lightest-gray .video__embed {
background: var(--light-gray);
}
.video__embed iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/*------------------------------------*\
#LISTS
\*------------------------------------*/
/*------------------------------------*\
#LISTS-SETUP
\*------------------------------------*/
.list--two-column,
.list--three-column {
column-gap: 3rem;
}
.list--two-column {
columns: 2;
}
.list--three-column {
columns: 3;
}
.list__item {
display: flex;
align-items: center;
padding: 1em 0;
border-top: 2px dotted var(--light-gray);
border-bottom: 2px dotted var(--light-gray);
margin-bottom: -2px;
}
.list__item span {
position: relative;
font-size: 1.2rem;
font-weight: 400;
line-height: 1.4;
}
.list__link {
width: 100%;
display: flex;
}
.list__link span {
font-weight: 600;
cursor: pointer;
transition: color 0.5s ease, margin 0.5s ease;
}
.list__link svg {
fill: var(--light-blue);
transition: fill 0.5s ease;
}
@media only screen and (max-width: 1500px) {
.list--two-column,
.list--three-column {
column-gap: 2.5rem;
}
}
@media only screen and (max-width: 1200px) {
.list--two-column,
.list--three-column {
column-gap: 2rem;
}
.list__item {
padding: 0.8em 0;
}
.list__item span {
font-size: 1.15rem;
}
}
@media only screen and (max-width: 800px) {
.list__item span {
font-size: 1.1rem;
}
}
@media only screen and (max-width: 600px) {
.list--two-column,
.list--three-column {
columns: 1;
column-gap: none;
}
.list__item {
padding: 0.6em 0;
}
.list__item span {
font-size: 1.05rem;
}
}
/*------------------------------------*\
#LISTS-ICONS
\*------------------------------------*/
.list--icons .list__item span::before {
position: absolute;
width: 1em;
top: 0.15em;
left: 0;
}
.list--icons .list__item span {
padding-left: 1.5em;
}
.list--icons .list__item a {
font-weight: 600;
color: var(--light-blue);
text-decoration: underline;
transition: color 0.5s ease;
}
.list--icons .list__item a:hover {
color: var(--light-blue-hover);
}
.list--check .list__item span::before {
content: url('data:image/svg+xml,');
}
.list--award .list__item span::before {
content: url('data:image/svg+xml,');
}
@media only screen and (max-width: 1200px) {
.list--icons .list__item span::before {
width: 0.95em;
top: 0.15em;
}
}
@media only screen and (max-width: 600px) {
.list--icons .list__item span::before {
width: 0.9em;
top: 0.1em;
}
.list--award .list__item span::before {
top: 0.25em;
}
}
/*------------------------------------*\
#LISTS-LINKS
\*------------------------------------*/
.list--links .list__item {
padding: 1.2rem;
border-top-style: solid;
border-bottom-style: solid;
}
.list--links .list__link {
align-items: center;
justify-content: space-between;
}
.list--links .list__link span {
font-size: 1.3rem;
line-height: 1.2;
color: var(--dark-blue);
}
.list--links .list__link svg {
flex: 0 0 1.1em;
margin: 0.1em 0 0 1.5em;
}
.list--links .list__link:hover span {
color: var(--light-blue);
}
.list--links .list__link:hover span {
margin-left: 0.5em;
}
@media only screen and (max-width: 1200px) {
.list--links .list--three-column {
columns: 2;
}
.list--links .list__item {
padding: 1rem;
}
.list--links .list__link span {
font-size: 1.25rem;
}
}
@media only screen and (max-width: 800px) {
.list--links .list__link span {
font-size: 1.2rem;
}
}
@media only screen and (max-width: 600px) {
.list--links .list--three-column {
columns: 1;
}
.list--links .list__item {
padding: 0.8rem;
}
.list--links .list__link span {
font-size: 1.1rem;
}
}
/*------------------------------------*\
#LISTS-FILES
\*------------------------------------*/
.list--files .list__item {
align-items: flex-start;
padding: 0;
border: none;
margin: 0.5rem 0;
}
.list--files .list__link {
align-items: flex-start;
}
.list--files .list__link svg {
flex: 0 0 1.1em;
margin: 0.4em 0.7em 0 0;
}
.list--files .list__link span {
color: var(--light-blue);
text-decoration: underline;
}
.list--files .list__link:hover svg {
fill: var(--light-blue-hover);
}
.list--files .list__link:hover span {
color: var(--light-blue-hover);
}
/*------------------------------------*\
#CARDS
\*------------------------------------*/
/*------------------------------------*\
#CARDS-SETUP
\*------------------------------------*/
.cards__inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 3rem;
row-gap: 3rem;
}
.cards--four .cards__inner {
grid-template-columns: repeat(4, 1fr);
}
.card {
position: relative;
display: flex;
flex-direction: column;
}
.card--location,
.card--event {
position: relative;
background: var(--lightest-gray);
padding: 2rem;
border-radius: 16px;
overflow: hidden;
}
.card__image {
position: relative;
width: 100%;
height: inherit;
padding-bottom: 60%;
border-radius: 16px;
overflow: hidden;
}
.card__image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
z-index: 9;
}
.card__content {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
margin-top: 1.5rem;
}
.card__content h6 {
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.card__content h3,
.card__content h4,
.card__content p {
transition: color 0.5s ease;
}
.card__content h3 {
font-weight: 600;
color: var(--dark-blue);
}
.card__content h4 {
font-weight: 600;
}
.card__content p {
line-height: 1.4;
}
.card__content .text-link {
line-height: 1.2;
}
.card__indicator {
display: block;
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
color: var(--dark-blue);
background: #fff;
border: 2px solid var(--light-gray);
border-radius: 25px;
padding: 0.35rem 1rem 0.4rem;
margin-left: auto;
}
.info {
display: flex;
margin-top: 0.5rem;
}
.info__icon {
width: 1rem;
height: 1rem;
margin: 0.25rem 0.6rem 0 0;
overflow: visible;
}
.info__icon svg {
width: auto;
height: 100%;
fill: var(--gray);
transition: fill 0.5s ease;
}
.info__content a:hover p {
text-decoration: underline;
}
a.card:hover .card__image img {
transform: scale(1.1);
}
a.card:hover .card__content h3,
a.card:hover .card__content h4,
a.card:hover .card__content p,
a.card:hover .card__content .text-link {
color: var(--light-blue);
}
a.card:hover .card__content svg {
fill: var(--light-blue);
}
a.card:hover .card__date {
background: var(--light-blue);
}
.card--article .card__image {
background: var(--lightest-gray);
}
.card--article .card__image img[src$=".svg"] {
width: 60%;
height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: contain;
margin: auto;
}
.cards--market .card__content h3 {
line-height: 1.3;
}
@media only screen and (max-width: 1500px) {
.cards__inner {
column-gap: 2.5rem;
row-gap: 2.5rem;
}
}
@media only screen and (max-width: 1200px) {
.cards__inner {
column-gap: 2rem;
row-gap: 2rem;
}
.cards--providers .cards__inner {
grid-template-columns: repeat(3, 1fr);
}
.cards--market .cards__inner {
grid-template-columns: repeat(2, 1fr);
}
.card--location,
.card--event {
padding: 1.8rem;
}
.card__indicator {
font-size: 0.9rem;
padding: 0.3rem 0.8rem 0.35rem;
}
.card__content h6 {
font-size: 1rem;
}
.info__icon {
width: 0.9rem;
height: 0.9rem;
margin: 0.15rem 0.5rem 0 0;
}
.card--market .card__content {
margin-top: 1rem;
}
.card--market .info {
margin-top: 0.3rem;
}
}
@media only screen and (max-width: 1000px) {
.cards__inner {
grid-template-columns: repeat(1, 1fr);
column-gap: 2rem;
row-gap: 2rem;
}
.cards--providers .cards__inner {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 800px) {
.cards__inner {
grid-template-columns: repeat(1, 1fr);
column-gap: 1.5rem;
row-gap: 1.5rem;
}
.cards--market .cards__inner {
grid-template-columns: repeat(1, 1fr);
}
.card__content h6 {
font-size: 0.95rem;
}
.info__icon {
margin: 0.1rem 0.5rem 0 0;
}
}
@media only screen and (max-width: 600px) {
.cards--providers .cards__inner {
grid-template-columns: repeat(1, 1fr);
}
.card--location,
.card--event {
padding: 1.5rem;
}
.card__content h6 {
font-size: 0.9rem;
margin-bottom: 0.2rem;
}
}
/*------------------------------------*\
#CARDS-CTA
\*------------------------------------*/
.card--cta {
border-radius: 16px;
overflow: hidden;
}
.card--cta .card__image {
padding-bottom: 90%;
}
.card--cta .card__content {
position: absolute;
width: calc(100% - 2rem);
left: 1rem;
bottom: 1rem;
padding: 1.5rem 2rem;
background: rgba(255,255,255, 0.8);
backdrop-filter: blur(8px);
border-radius: 8px;
z-index: 99;
}
.card--cta .card__content h3,
.card--cta .card__content h4 {
font-weight: 600;
line-height: 1.3;
margin-bottom: 0.5rem;
}
@media only screen and (max-width: 1200px) {
.card--cta .card__content {
padding: 1.3rem 1.8rem;
}
}
@media only screen and (max-width: 1000px) {
.card--cta .card__image {
padding-bottom: 60%;
}
.card--cta .card__content {
width: calc(100% - 3rem);
left: 1.5rem;
bottom: 1.5rem;
}
}
@media only screen and (max-width: 800px) {
.card--cta .card__content {
padding: 1.2rem 1.5rem;
}
}
@media only screen and (max-width: 600px) {
.card--cta .card__image {
padding-bottom: 80%;
}
.card--cta .card__content {
width: calc(100% - 2rem);
left: 1rem;
bottom: 1rem;
padding: 1rem 1.2rem;
}
}
/*------------------------------------*\
#CARDS-PROFILE
\*------------------------------------*/
.card--profile .card__image {
padding-bottom: 80%;
}
.card--profile .card__image img {
object-position: top;
}
.arrow {
position: absolute;
display: flex;
width: 3em;
height: 3em;
right: 1rem;
bottom: 1rem;
padding: 0.8em;
background: rgba(255,255,255, 0.8);
backdrop-filter: blur(8px);
border-radius: 8px;
transition: background 0.5s ease;
z-index: 9;
}
.arrow svg {
fill: var(--light-blue);
transform: rotate(-45deg);
transition: fill 0.5s ease;
}
.cards--four .arrow {
width: 2.5rem;
height: 2.5rem;
padding: 0.7em;
}
a.card:hover .arrow {
background: var(--light-blue);
}
a.card:hover .arrow svg {
fill: #fff;
}
div.card .arrow {
display: none;
}
.card--profile .card__content h3 {
line-height: 1.3;
margin-bottom: 0.5rem;
}
.cards--four .card__content h3 {
font-size: 1.4rem;
}
.profile__position {
display: flex;
align-items: flex-start;
}
.profile__position svg {
flex: 0 0 0.95em;
width: 0.95em;
fill: var(--light-blue);
margin: 0.25em 0.5em 0 0;
transition: fill 0.5s ease;
}
.profile__position p {
font-weight: 500;
line-height: 1.2;
color: var(--light-blue);
margin: 0;
transition: color 0.5s ease;
}
.page-content--leadership .profile__position svg {
display: none;
}
@media only screen and (max-width: 1200px) {
.card--profile .card__content {
margin-top: 1rem;
}
.card--profile .card__content h3 {
margin-bottom: 0.4rem;
}
.cards--four .arrow {
width: 3rem;
height: 3rem;
padding: 0.8em;
}
.cards--four .card__content h3 {
font-size: 1.5rem;
}
}
@media only screen and (max-width: 800px) {
.cards--four .card__content h3 {
font-size: 1.4rem;
}
.profile__position svg {
flex: 0 0 0.9em;
width: 0.9em;
margin: 0.2em 0.5em 0 0;
}
}
@media only screen and (max-width: 600px) {
.cards--four .card__content h3 {
font-size: 1.3rem;
}
}
/*------------------------------------*\
#CARDS-LOCATION
\*------------------------------------*/
.cards--block .cards__inner {
display: block;
}
.cards--block .card--location {
padding: 0;
}
.card__wrap {
display: flex;
}
.card__wrap .card__content {
width: 70%;
padding: 2.5rem;
margin: 0;
}
.card__wrap .card__content h3 {
margin-bottom: 1.5rem;
}
.card__wrap .card__content a:hover h3 {
text-decoration: underline;
}
.card__wrap .card__content .info {
margin: 0;
}
.card__icons {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.icon + .icon {
margin-left: 0.5rem;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
width: 1.8rem;
height: 1.8rem;
}
.icon svg {
width: auto;
height: 100%;
max-height: 1.8em;
fill: var(--orange);
overflow: visible;
transition: fill 0.5s ease;
}
.card__buttons {
display: flex;
flex: 0 0 20rem;
flex-direction: column;
justify-content: center;
background: var(--lighter-gray);
padding: 2.5rem;
}
.card__buttons .button {
width: 100%;
}
.card__buttons .button + .button {
margin-top: 1rem;
}
@media only screen and (max-width: 1500px) {
.card__wrap .card__content {
padding: 2rem;
}
.card__buttons {
flex: 0 0 18rem;
padding: 2rem;
}
}
@media only screen and (max-width: 1200px) {
.card__wrap {
display: block;
}
.card__wrap .card__content {
width: 100%;
padding: 1.8rem;
margin: 0;
}
.card__wrap .card__content h3 {
margin-bottom: 1.2rem;
}
.card__icons {
justify-content: flex-start;
margin-bottom: 1.2rem;
}
.icon {
width: 1.5rem;
height: 1.5rem;
}
.icon svg {
max-height: 1.5em;
}
.card__buttons {
flex: 0 0 100%;
flex-direction: row;
justify-content: space-between;
padding: 1.8rem;
}
.card__buttons .button {
width: 50%;
}
.card__buttons .button + .button {
margin: 0 0 0 1rem;
}
}
@media only screen and (max-width: 1000px) {
.card__wrap {
display: flex;
}
.card__buttons {
display: flex;
flex: 0 0 18rem;
flex-direction: column;
justify-content: center;
}
.card__buttons .button {
width: 100%;
}
.card__buttons .button + .button {
margin: 1rem 0 0;
}
}
@media only screen and (max-width: 800px) {
.card__wrap {
display: block;
}
.card__wrap .card__content {
width: 100%;
margin: 0;
}
.card__wrap .card__content h3 {
margin-bottom: 1rem;
}
.card__buttons {
flex: 0 0 100%;
flex-direction: row;
justify-content: space-between;
}
.card__buttons .button {
width: 50%;
}
.card__buttons .button + .button {
margin: 0 0 0 1rem;
}
}
@media only screen and (max-width: 600px) {
.card__wrap .card__content {
padding: 1.5rem;
}
.card__buttons {
padding: 1.5rem;
}
}
@media only screen and (max-width: 450px) {
.card__buttons {
display: block;
background: none;
padding-top: 0;
margin-top: 0.5rem;
}
.card__buttons .button {
width: 100%;
}
.card__buttons .button + .button {
margin: 1rem 0 0;
}
}
/*------------------------------------*\
#CARDS-EVENT
\*------------------------------------*/
.card__date {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
background: var(--light-green);
border-radius: 8px;
transition: background 0.5s ease;
}
.card__date h6,
.card__date span {
color: #fff;
line-height: 1;
text-align: center;
margin: 0;
}
.card__date h6 {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.card__date span {
font-size: 1.7rem;
font-weight: 600;
}
.card--event .card__icons {
margin-bottom: 1.5rem;
}
.card--event .card__icons svg {
width: auto;
height: 100%;
max-height: 1.8em;
fill: var(--light-green);
overflow: visible;
}
@media only screen and (max-width: 1200px) {
.card--event .card__icons {
margin-bottom: 1.2rem;
}
.card--event .card__icons svg {
max-height: 1.5em;
}
.card__date {
width: 3.6rem;
height: 3.6rem;
}
.card__date h6 {
font-size: 0.9rem;
}
.card__date span {
font-size: 1.5rem;
}
}
@media only screen and (max-width: 600px) {
.card__date {
width: 3.2rem;
height: 3.2rem;
}
.card__date h6 {
font-size: 0.75rem;
}
.card__date span {
font-size: 1.3rem;
}
}
/*------------------------------------*\
#CARDS-ROW
\*------------------------------------*/
.cards--row.lightest-gray .card,
.cards--row.lightest-blue .card {
background: #fff;
}
.cards--row .card__content {
padding: 0;
margin: 0;
}
.cards--row .card__content h3 {
line-height: 1.3;
margin-bottom: 1.5rem;
}
.cards--row .card__info {
padding-top: 1rem;
border-top: 2px solid var(--light-gray);
margin-top: auto;
}
.cards--row .card__info .info:last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 1200px) {
.cards--row .card__content h3 {
margin-bottom: 1rem;
}
.cards--row .card__info {
padding-top: 0.5rem;
}
}
/*------------------------------------*\
#CARDS-SEARCH
\*------------------------------------*/
.search--location .card {
margin: 0 0 2rem;
}
.search--location .card:last-child {
margin: 0;
}
.search--event .cards__inner {
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
row-gap: 2rem;
}
.search--event .cards--row + .cards--row {
margin-top: 4rem;
}
@media only screen and (max-width: 1200px) {
.search--location .card {
margin: 0 0 1.5rem;
}
.search--event .cards__inner {
grid-template-columns: repeat(1, 1fr);
column-gap: 1.5rem;
row-gap: 1.5rem;
}
}
@media only screen and (max-width: 1000px) {
.page-content--search section.cards {
margin-top: 3rem;
}
.search--event .cards__inner {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 800px) {
.page-content--search section.cards {
margin-top: 2.5rem;
}
.search--event .cards__inner {
grid-template-columns: repeat(1, 1fr);
}
}
/*------------------------------------*\
#CARD-RESULTS
\*------------------------------------*/
.results h3 span {
font-weight: 600;
color: var(--light-blue);
text-decoration: underline;
}
.results h5 {
font-weight: 500;
margin-top: 1rem;
}
@media only screen and (max-width: 1000px) {
.page-content__inner section.results {
margin-top: 3rem;
}
}
@media only screen and (max-width: 800px) {
.page-content__inner section.results {
margin-top: 2.5rem;
}
}
/*------------------------------------*\
#HOME
\*------------------------------------*/
/*------------------------------------*\
#BANNER
\*------------------------------------*/
.banner {
position: relative;
margin: 0;
}
.banner__image {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.banner__image::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(64,75,84, 0.8) 0%, rgba(64,75,84, 0) 80%);
}
.banner__inner {
padding: 6rem 0;
}
.banner__copy {
width: 60%;
margin: 0 2.5rem;
}
.banner__copy h1,
.banner__copy p {
text-shadow: 0 0 2px rgba(64,75,84, 0.1);
}
.banner__copy h1 {
color: #fff;
}
.banner__copy p {
font-size: 2rem;
color: #fff;
margin-top: 1rem;
}
.banner--white .banner__copy h6,
.banner--white .banner__copy h1,
.banner--white .banner__copy p {
color: #fff;
}
.search-bar {
width: 100%;
background: rgba(255,255,255, 0.7);
backdrop-filter: blur(8px);
padding: 2.5rem;
border-radius: 16px;
margin-top: 4rem;
}
.search-bar__tabs {
display: flex;
margin: -0.5rem 0 2rem;
}
.tab-button {
position: relative;
font-size: 1.3rem;
font-weight: 700;
color: var(--dark-blue);
cursor: pointer;
transition: color 0.5s ease;
}
.tab-button + .tab-button {
margin-left: 1.5rem;
}
.tab-button::after {
display: none;
position: absolute;
content: '';
width: 100%;
height: 3px;
left: 0;
bottom: -3px;
background: var(--light-blue);
z-index: 9;
}
.tab-button--active {
color: var(--light-blue);
}
.tab-button--active::after {
display: block;
}
.tab-button:hover {
color: var(--light-blue);
}
.search-bar__block,
.search-bar__block.js-tabs-open {
display: block;
}
.block--search-location,
.block--search-doctor {
display: none;
}
@media only screen and (max-width: 1500px) {
.banner__inner {
padding: 5rem 0;
}
.banner__copy p {
font-size: 1.8rem;
}
.search-bar {
padding: 2rem;
}
}
@media only screen and (max-width: 1300px) {
.banner__image {
background-position: right 70% center;
}
}
@media only screen and (max-width: 1200px) {
.banner__image {
background-position: right 60% center;
}
.banner__inner {
padding: 4rem 0;
}
.banner__copy {
width: 62%;
margin: 0;
}
.banner__copy p {
font-size: 1.7rem;
}
.search-bar {
padding: 1.8rem;
margin-top: 3rem;
}
.search-bar__tabs {
margin: -0.4rem 0 1.5rem;
}
.tab-button {
font-size: 1.25rem;
}
.tab-button + .tab-button {
margin-left: 1.2rem;
}
}
@media only screen and (max-width: 1000px) {
.banner__image {
height: 70%;
background-position: center center;
}
.banner .container {
width: 100%;
}
.banner__inner {
padding: 0;
}
.banner__content {
width: 92%;
padding: 3rem 0;
margin: 0 auto;
}
.banner__copy {
width: 58%;
}
.banner__copy p {
font-size: 1.6rem;
}
.search-bar {
background: var(--lightest-blue);
padding: 1.8rem 4%;
border-radius: 0;
margin-top: 0.5rem;
}
}
@media only screen and (max-width: 800px) {
.banner__image {
background-position: right 15% center;
}
.banner .banner__image::after {
bottom: 0;
background: linear-gradient(to top, rgba(64,75,84, 0.9) 30%, rgba(64,75,84, 0) 70%);
}
.banner__content {
padding: 55% 0 2.5rem;
}
.banner__copy {
width: 100%;
max-width: 600px;
}
.banner__copy p {
font-size: 1.5rem;
margin-top: 0.5rem;
}
.search-bar {
background: var(--lightest-blue);
margin: 0;
}
.tab-button {
font-size: 1.2rem;
}
.tab-button + .tab-button {
margin-left: 1rem;
}
}
@media only screen and (max-width: 600px) {
.banner__image {
background-position: right 20% center;
}
.banner__content {
width: 90%;
padding: 65% 0 2.5rem;
}
.banner__copy p {
font-size: 1.4rem;
}
.search-bar {
padding: 1.5rem 5%;
}
.tab-button {
font-size: 1.15rem;
}
}
/*------------------------------------*\
#CTA-LINKS
\*------------------------------------*/
section.cta-links {
position: relative;
background: linear-gradient(to right, var(--dark-blue) 25%, 75%, #01689D);
padding: 1.2rem 0 1.5rem;
overflow: hidden;
margin: 0;
}
.cta-links__inner {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0 2.5rem;
}
.cta-links__content span,
.cta-links__link {
display: block;
font-size: 1.3rem;
font-weight: 400;
line-height: 1.3;
color: #fff;
white-space: nowrap;
}
.cta-links__content {
position: relative;
display: flex;
align-items: center;
}
.cta-links__content svg {
position: absolute;
width: auto;
height: 1em;
fill: var(--light-green);
overflow: visible;
margin-top: 0.2rem;
}
.cta-links__content span {
font-weight: 600;
padding-left: 1.4rem;
}
.cta-links__list {
display: flex;
}
.cta-links__item {
margin-right: 2rem;
}
.cta-links__item:last-child {
margin-right: 0;
}
.cta-links__link {
transition: color 0.5s ease;
}
.cta-links__link:hover {
color: var(--lighter-blue);
}
@media only screen and (max-width: 1200px) {
section.cta-links {
padding: 1rem 0 1.2rem;
}
.cta-links__inner {
padding: 0;
}
.cta-links__content span,
.cta-links__link {
font-size: 1.25rem;
}
.cta-links__content svg {
height: 0.95em;
}
.cta-links__content span {
padding-left: 1.3rem;
}
.cta-links__item {
margin-right: 1.5rem;
}
}
@media only screen and (max-width: 1000px) {
.cta-links__item:nth-child(3) {
display: none;
}
}
@media only screen and (max-width: 800px) {
.cta-links__inner {
justify-content: flex-start;
align-items: center;
}
.cta-links__content svg {
position: relative;
width: 0.6em;
height: auto;
margin: 0.2rem 1.5rem 0 0;
}
.cta-links__content span {
display: none;
}
.cta-links__link {
font-size: 1.2rem;
}
}
@media only screen and (max-width: 600px) {
.cta-links__content svg {
margin: 0.2rem 1.2rem 0 0;
}
.cta-links__item:nth-child(2) {
display: none;
}
.cta-links__item {
margin-right: 1.2rem;
}
.cta-links__link {
font-size: 1.15rem;
}
}
/*------------------------------------*\
#LOCATION
\*------------------------------------*/
/*------------------------------------*\
#HOURS
\*------------------------------------*/
.hours h2 {
margin: -0.5rem 0 2rem;
}
.hours__block .content__row {
margin-top: 0;
}
.hours__block .row--disclaimer {
border-bottom: none;
padding-top: 1.2rem;
}
.hours__block .row--disclaimer p {
font-size: 1.2rem;
font-weight: 600;
color: var(--dark-blue);
}
.header + .hours {
padding: 0;
margin: 0;
}
.hours__display {
position: relative;
background: linear-gradient(to right, var(--lightest-blue) 25%, 75%, #cde8ff);
padding: 1rem 0 1.2rem;
border-top: 2px solid #fff;
margin: 0;
}
.display__bar p {
display: inline-block;
font-size: 1.6rem;
font-weight: 700;
color: var(--dark-blue);
line-height: 1.2;
margin: 0;
transition: color 0.5s ease;
}
.display__bar span {
position: relative;
font-weight: 700;
padding-left: 1em;
margin-right: 0.5em;
}
.display__bar span::before {
position: absolute;
width: 0.75em;
top: 0.2em;
left: 0;
}
.hours--open .display__bar span {
color: var(--light-green);
}
.hours--open .display__bar span::before {
content: url('data:image/svg+xml,');
}
.hours--closed .display__bar span {
color: var(--orange);
}
.hours--closed .display__bar span::before {
content: url('data:image/svg+xml,');
}
.display__bar svg {
display: none;
position: absolute;
width: 0.85em;
fill: var(--dark-blue);
margin: 0.45em 0 0 0.4em;
overflow: visible;
transition: all 0.5s ease;
}
.hours--active .display__bar p {
padding-right: 1.3em;
cursor: pointer;
}
.hours--active .display__bar svg {
display: inline-block;
}
.hours--active .display__bar p:hover {
color: var(--light-blue);
}
.hours--active .display__bar p:hover svg {
fill: var(--light-blue);
}
.open .display__bar svg {
transform: rotate(-180deg);
}
.hours__dropdown {
position: absolute;
display: none;
width: 90%;
top: 1.5rem;
left: 0;
padding-right: 22rem;
z-index: 99999;
}
.open .hours__dropdown {
display: block;
}
.hours__dropdown .hours__block {
width: 100%;
background: var(--lightest-gray);
padding: 1.8rem 2rem;
border-radius: 16px;
box-shadow: 0 4px 6px -2px rgba(57,57,57, 0.1);
}
.hours__dropdown .hours__block .content__row:first-child {
padding-top: 0;
border-top: none;
}
.hours__dropdown .hours__block .content__row:last-child {
padding-bottom: 0;
border-bottom: none;
}
.hours__dropdown .hours__block .row--disclaimer p {
font-size: inherit;
}
@media only screen and (max-width: 1500px) {
.display__bar p {
font-size: 1.5rem;
}
.hours__block .row--disclaimer p {
font-size: 1.15rem;
}
.hours__dropdown {
width: 92%;
padding-right: 20rem;
}
}
@media only screen and (max-width: 1200px) {
.display__bar p {
font-size: 1.5rem;
}
.hours__block .row--disclaimer p {
font-size: 1.15rem;
}
.hours__dropdown {
width: 94%;
padding-right: 18rem;
}
.hours__dropdown .hours__block {
padding: 1.6rem 1.8rem;
}
}
@media only screen and (max-width: 1000px) {
.hours h2 {
margin: 0 0 1.5rem;
}
.hours__dropdown {
position: relative;
width: 100%;
top: 0;
padding: 0;
}
.hours__dropdown .hours__block {
background: none;
padding: 0;
border-radius: 0;
box-shadow: none;
margin-top: 3rem;
}
.hours__dropdown .hours__block .row--disclaimer p {
font-size: 1.15rem;
}
}
@media only screen and (max-width: 800px) {
.hours__display {
padding: 0.8rem 0 1rem;
}
.display__bar p {
font-size: 1.4rem;
}
.display__bar svg {
width: 0.8em;
margin: 0.45em 0 0 0.35em;
}
.hours__block .row--disclaimer p,
.hours__dropdown .hours__block .row--disclaimer p {
font-size: 1.1rem;
}
.hours__dropdown .hours__block {
margin-top: 2.5rem;
}
}
@media only screen and (max-width: 600px) {
.display__bar p {
font-size: 1.3rem;
}
.hours__block .row--disclaimer p,
.hours__dropdown .hours__block .row--disclaimer p {
font-size: 1.05rem;
}
}
/*------------------------------------*\
#SEARCH
\*------------------------------------*/
.header__search,
.search-bar {
position: relative;
z-index: 99999;
}
.header__search .control__search::before,
.search-bar .control__search::before {
z-index: 999;
}
.header__search .search__input,
.header__search .control__button,
.search-bar .search__input {
z-index: 99;
}
.header__search {
background: rgba(255,255,255, 0.1);
backdrop-filter: blur(8px);
padding: 2rem;
border-radius: 16px;
}
.control--search {
display: flex;
width: 100%;
}
.control--search .control__search,
.control--search .control__select {
margin-right: 1.5rem;
}
.control--search .control__search .search__input {
border-radius: 8px;
}
.control__button {
position: relative;
flex: 0 0 12rem;
height: 55px;
}
.control__button::after {
position: absolute;
content: url('data:image/svg+xml,');
width: 1.4em;
height: 1.4em;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
cursor: pointer;
margin: auto;
}
.control__button .button {
width: 100%;
height: 100%;
}
.block--search-location .control__search,
.control--article .control__search {
width: 60%;
}
.block--search-location .control__select,
.control--article .control__select {
width: 40%;
}
section.search--listing {
padding: 3rem 0;
}
@media only screen and (max-width: 1200px) {
.header__search {
padding: 1.8rem;
}
.control--search .control__search,
.control--search .control__select {
margin-right: 1.2rem;
}
.control__button {
flex: 0 0 8rem;
height: 54px;
}
.control__button::after {
width: 1.3em;
height: 1.3em;
}
section.search--listing {
padding: 2.5rem 0;
}
}
@media only screen and (max-width: 1000px) {
section.search--listing {
padding: 2rem 0;
}
.control__button {
flex: 0 0 4rem;
}
}
@media only screen and (max-width: 800px) {
.header__search {
padding: 1.5rem;
}
.control__button {
height: 47.5px;
}
.control__button::after {
width: 1.2em;
height: 1.2em;
}
.control--search {
display: block;
}
.control--search .control__search,
.control--search .control__select {
margin: 0 0 1rem;
}
.control--search .control__search,
.control--search .control__select,
.control--search .control__button {
width: 100%;
}
.control--search.control--full {
display: flex;
}
.control--search.control--full .control__search,
.control--search.control--full .control__button {
margin-bottom: 0;
}
.control--search.control--full .control__search {
margin-right: 1rem;
}
.control--search.control--full .control__button {
flex: 0 0 3.2rem;
}
}
@media only screen and (max-width: 600px) {
.header__search {
padding: 1.5rem 5%;
border-radius: 0;
}
.control__button {
height: 46.5px;
}
.control__button::after {
width: 1.1em;
height: 1.1em;
top: -0.1rem;
}
.control--search.control--full .control__search {
margin: 0;
}
.control--search.control--full .search__input {
border-radius: 8px 0 0 8px;
}
.control--search.control--full .control__button .button {
border-left: none;
border-radius: 0 8px 8px 0;
}
}
/*------------------------------------*\
#FORMS
\*------------------------------------*/
/*------------------------------------*\
#FORMS-SETUP
\*------------------------------------*/
.form__inner {
display: flex;
justify-content: space-between;
}
.form__content,
.form__block {
width: 40%;
}
.form__content h6 {
margin-bottom: 0.5rem;
}
.form__content h2:first-of-type {
margin-top: 0;
}
.form__content p:last-child {
margin-bottom: 0;
}
.form__content p.disclaimer {
font-style: normal;
}
.form__content p + .disclaimer {
margin-top: 1.2rem;
}
.form__content .disclaimer + .disclaimer {
margin-top: 0;
}
.form__content .disclaimer {
margin-bottom: 0.6rem;
}
.form__block {
background: var(--lightest-blue);
padding: 3rem;
border-radius: 16px;
}
.lightest-blue .form__block,
.lightest-gray .form__block {
background: #fff;
}
.form__block h4 {
font-weight: 600;
}
.form__block h4:first-of-type {
margin-top: 0;
}
.form__block h4,
.form__block .form__billing h4 {
margin: 2.5rem 0 1.5rem;
}
.form__block .control,
.ah-form input,
.ah-form select {
margin-bottom: 1.2rem;
}
.form__block .control--submit,
.ah-form input[type=submit] {
margin: 2rem 0 0;
}
.form__block .control__checkbox {
margin-top: 1.5rem;
}
.form__block .control__checkbox input[type=checkbox] + .checkbox__label::before {
border: 2px solid var(--light-blue);
}
.form__block .control__checkbox input[type=checkbox]:hover + .checkbox__label::before {
border-color: var(--orange);
}
.form__block .control__checkbox input[type=checkbox]:checked:focus + .checkbox__label::before,
.form__block .control__checkbox input[type=checkbox]:checked:hover + .checkbox__label::before {
border-color: var(--light-blue);
}
.control__row {
display: flex;
justify-content: space-between;
margin-bottom: 1.2rem;
}
.control__row .control {
margin-bottom: 0;
}
.row--two .control {
width: 48.25%;
}
.row--three .control {
width: 31%;
}
.form--event .form__block {
width: 100%;
max-width: 700px;
background: var(--lightest-blue);
}
.form__disclaimer {
display: none;
margin: 3rem auto 0;
}
.form__disclaimer .disclaimer {
margin-bottom: 0.6rem;
}
.form__disclaimer p:last-of-type {
margin: 0;
}
@media only screen and (max-width: 1500px) {
.form__content,
.form__block {
width: 46%;
}
}
@media only screen and (max-width: 1200px) {
.form__content,
.form__block {
width: 47%;
}
.form__block {
padding: 2.5rem;
}
.form__block .control__checkbox input[type=checkbox] + .checkbox__label::before {
top: 0;
}
.form__block .control__checkbox input[type=checkbox]:checked + .checkbox__label::after,
.form__block .control__checkbox input[type=checkbox]:disabled + .checkbox__label::after {
top: 0;
}
.form--event .form__block {
max-width: 100%;
}
}
@media only screen and (max-width: 1000px) {
.form__inner {
display: block;
}
.form__content,
.form__block {
width: 100%;
}
.form__content {
margin: 0 auto 3rem;
}
.form__block {
max-width: 500px;
margin: 0 auto;
}
.form--event .form__block {
max-width: 600px;
margin: 0;
}
.form__disclaimer {
display: block;
}
}
@media only screen and (max-width: 800px) {
.form__content {
margin: 0 auto 2.5rem;
}
.form__block {
max-width: 450px;
padding: 2rem;
}
.form__block h4 {
margin: 1.5rem 0 1rem;
}
.form__block .control__checkbox input[type=checkbox]:checked + .checkbox__label::after,
.form__block .control__checkbox input[type=checkbox]:disabled + .checkbox__label::after {
top: 1px;
}
.form__block .checkbox__label {
margin: 0 0 0 1.8rem;
}
.form__disclaimer {
margin: 2.5rem auto 0;
}
}
@media only screen and (max-width: 600px) {
.form__block {
max-width: 100%;
padding: 1.8rem;
}
section.form--event {
background: var(--lightest-blue);
padding: 2.5rem 0;
}
.form--event .form__block {
background: #fff;
}
.form__block .control,
.ah-form input,
.ah-form select {
margin-bottom: 1rem;
}
.form__block .control--submit,
.ah-form input[type=submit] {
margin: 1.5rem 0 0;
}
.form__block .control__checkbox {
margin-top: 1.2rem;
}
.control__row {
display: block;
margin-bottom: 0;
}
.row--two .control,
.row--three .control {
width: 100%;
margin-bottom: 1rem;
}
.form__block .control__checkbox input[type=checkbox] + .checkbox__label::before {
top: -1px;
}
.form__block .control__checkbox input[type=checkbox]:checked + .checkbox__label::after,
.form__block .control__checkbox input[type=checkbox]:disabled + .checkbox__label::after {
top: 1px;
}
}
@media only screen and (max-width: 450px) {
.form__block {
padding: 1.5rem;
}
}
/*------------------------------------*\
#SLIDERS
\*------------------------------------*/
/*------------------------------------*\
#SLIDER-SETUP
\*------------------------------------*/
.slider__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
}
.slider__content {
margin-right: 3rem;
}
.slick {
border-radius: 16px;
overflow: hidden;
}
.slick-list {
margin: 0 -1rem;
}
.slide {
background: var(--dark-blue);
padding: 3rem;
border-radius: 16px;
overflow: hidden;
margin-left: 1rem;
margin-right: 1rem;
}
.slide__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.slider--reverse .slide__inner {
flex-direction: row-reverse;
}
.slide__image,
.slide__content {
width: 47.5%;
}
.slide__image {
position: relative;
align-self: stretch;
min-height: 25rem;
}
.slide__image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.slide__content {
padding: 2rem 0;
}
.slide__content h3,
.slide__content p {
color: #fff;
}
.slide__content p {
font-size: 1.1rem;
}
.slide__content p:last-child {
margin: 0;
}
.slider.dark-blue .slider__header h2 {
color: #fff;
}
.slider.dark-blue .slide {
background: var(--lightest-blue);
}
.slider.dark-blue .slide__content h3 {
color: var(--dark-blue);
}
.slider.dark-blue .slide__content p {
color: var(--gray);
}
@media only screen and (max-width: 1500px) {
.slider__header {
margin-bottom: 2.5rem;
}
}
@media only screen and (max-width: 1200px) {
.slider__header {
margin-bottom: 2rem;
}
.slide {
padding: 2.5rem;
}
.slide__image,
.slide__content {
width: 48%;
}
.slide__content p {
font-size: 1.05rem;
}
}
@media only screen and (max-width: 1000px) {
.slide__inner {
display: block;
}
.slide__image,
.slide__content {
width: 100%;
}
.slide__image {
min-height: auto;
padding-bottom: 50%;
}
.slide__content {
padding: 0;
margin-top: 2.5rem;
}
}
@media only screen and (max-width: 800px) {
.slide {
padding: 2rem;
}
.slide__image {
padding-bottom: 55%;
}
.slide__content {
margin-top: 2rem;
}
.slide__content p {
font-size: 1rem;
}
}
@media only screen and (max-width: 600px) {
.slide {
padding: 0;
}
.slide__image {
padding-bottom: 60%;
}
.slide__image img {
border-radius: 0;
}
.slide__content {
padding: 1.5rem;
margin: 0;
}
.slide__content p {
font-size: 0.95rem;
}
}
/*------------------------------------*\
#SLIDER-TESTIMONIAL
\*------------------------------------*/
.slider--testimonial .slide {
padding: 6rem;
}
.slider--testimonial .slide__inner {
display: block;
}
.slider--testimonial .slide__content {
width: 100%;
max-width: 950px;
text-align: center;
padding: 0;
margin: 0 auto;
}
.slider--testimonial .slide__content h4 {
font-size: 2rem;
font-weight: 400;
line-height: 1.7;
color: #fff;
margin: 2rem 0;
}
.slide__icon {
width: 3rem;
margin: 0 auto;
}
.slide__profile {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.profile__image {
position: relative;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
overflow: hidden;
margin-right: 1rem;
}
.slide__profile img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.slide__profile p {
font-size: 1.3rem;
font-weight: 600;
color: #fff;
margin: 0;
}
.slider--testimonial.dark-blue .slide__content h4,
.slider--testimonial.dark-blue .slide__profile p {
color: var(--dark-blue);
}
@media only screen and (max-width: 1500px) {
.slider--testimonial .slide {
padding: 5rem;
}
}
@media only screen and (max-width: 1200px) {
.slider--testimonial .slide {
padding: 4rem;
}
.slider--testimonial .slide__content h4 {
font-size: 1.7rem;
}
.slide__icon {
width: 2.5rem;
}
.profile__image {
width: 3rem;
height: 3rem;
}
.slide__profile p {
font-size: 1.2rem;
}
}
@media only screen and (max-width: 1000px) {
.slider--testimonial .slide {
padding: 3rem;
}
.slider--testimonial .slide__content h4 {
font-size: 1.5rem;
margin: 1.8rem 0;
}
.slide__icon {
width: 2.2rem;
}
.profile__image {
width: 2.8rem;
height: 2.8rem;
}
}
@media only screen and (max-width: 800px) {
.slider--testimonial .slide {
padding: 2rem;
}
.slider--testimonial .slide__content h4 {
font-size: 1.3rem;
margin: 1.5rem 0;
}
.slide__icon {
width: 2rem;
}
.profile__image {
width: 2.5rem;
height: 2.5rem;
}
.slide__profile p {
font-size: 1.1rem;
}
}
@media only screen and (max-width: 600px) {
.slider--testimonial .slide {
padding: 1.5rem;
}
.slider--testimonial .slide__content h4 {
font-size: 1.1rem;
line-height: 1.6;
margin: 1rem 0 1.2rem;
}
.slide__icon {
width: 1.8rem;
}
.profile__image {
width: 2.2rem;
height: 2.2rem;
margin-right: 0.8rem;
}
.slide__profile p {
font-size: 1rem;
}
}
/*------------------------------------*\
SLIDER-ARROWS
\*------------------------------------*/
.slider__arrows {
flex: 0 0 6.5rem;
}
.slick-arrows {
position: relative;
width: 100%;
height: 45px;
}
.slick-arrows .slick-prev,
.slick-arrows .slick-next {
display: block;
position: absolute;
width: 45px;
height: 45px;
font-size: 0;
line-height: 0;
color: transparent;
background: transparent;
border: 2px solid var(--light-blue);
border-radius: 50%;
cursor: pointer;
z-index: 99;
transition: border-color 0.5s ease;
}
.slick-arrows .slick-prev {
left: 0;
}
.slick-arrows .slick-next {
right: 0;
}
.slick-arrows .slick-prev::after,
.slick-arrows .slick-next::after {
position: absolute;
content: '';
width: 14px;
height: 14px;
top: 0;
bottom: 0;
border: solid var(--light-blue);
border-width: 0 3px 3px 0;
margin: auto;
transition: border-color 0.5s ease;
}
.slick-arrows .slick-prev::after {
left: 16px;
transform: rotate(135deg);
}
.slick-arrows .slick-next::after {
right: 16px;
transform: rotate(-45deg);
}
.slick-arrows .slick-prev:hover,
.slick-arrows .slick-next:hover,
.slick-arrows .slick-prev:hover::after,
.slick-arrows .slick-next:hover::after {
border-color: var(--light-blue-hover);
}
@media only screen and (max-width: 1200px) {
.slider__arrows {
flex: 0 0 5.5rem;
}
.slick-arrows {
height: 40px;
}
.slick-arrows .slick-prev,
.slick-arrows .slick-next {
width: 40px;
height: 40px;
}
.slick-arrows .slick-prev::after,
.slick-arrows .slick-next::after {
width: 12px;
height: 12px;
}
.slick-arrows .slick-prev::after {
left: 14px;
}
.slick-arrows .slick-next::after {
right: 14px;
}
}
@media only screen and (max-width: 600px) {
.slider__arrows {
flex: 0 0 4.8rem;
}
.slick-arrows {
height: 35px;
}
.slick-arrows .slick-prev,
.slick-arrows .slick-next {
width: 35px;
height: 35px;
}
.slick-arrows .slick-prev::after,
.slick-arrows .slick-next::after {
width: 10px;
height: 10px;
}
.slick-arrows .slick-prev::after {
left: 12px;
}
.slick-arrows .slick-next::after {
right: 12px;
}
}
/*------------------------------------*\
#SLICK-SETUP
\*------------------------------------*/
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
padding: 0;
overflow: hidden;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
display: flex;
top: 0;
left: 0;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: inherit;
min-height: 1px;
}
.slider--container .slick-slide {
height: 100%;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}