/* Theme Name: [Bristol Hospice 2024 by Porter One Design] Description: A custom WordPress theme built for Bristol Hospice by PorterOneDesign.com, based on an original design by Porter One Design. Author: PorterOneDesign.com Version: 1.9.0 */ /* Z-index reference: 10 - dropdown nav magic numbers: transition point for mobile->desktop nav @ 920px (half 1920px monitor) */ /* CSS Variables */ :root { /* page variables */ --page-background-color: #fff; --page-max-width: 1920px; --content-max-width: 1440px; /* theme colors */ --main-color: #115e67; /* main theme color, links, accenting */ --main-color-darker: #074349; /* darker version of main color */ --secondary-color-true: #84bd00; --secondary-color: #5a8200; /* hover, interactable */ --secondary-color-darker: #4f7000; /* darker version of secondary color */ --active-color: #5a8200; /* active */ --body-background-color: #fff; /* background color */ /* row colors */ --row-white-color: #fff; /* white row background color */ --row-gray-color: #eeeeee; /* gray row background color */ --row-gray-lighter-color: #f9f9f9; /* center of gray row gradient color */ --row-green-color: #ECF5DA; /* green row background color */ --row-green-lighter-color: #fcfff5; /* center of green row gradient color */ /* row spacing - controls margin within and between rows and sections. */ --row-spacing: 30px; /* row top/bottom margin */ --row-spacing-480: 40px; /* row top/bottom margin @ 480px */ --row-spacing-920: 50px; /* row top/bottom margin @ 920px */ --row-spacing-1024: 60px; /* row top/bottom margin @ 1024px */ --row-spacing-1200: 60px; /* row top/bottom margin @ 1200px */ --row-spacing-1334: 80px; /* row top/bottom margin @ 1334px */ /* row gap spacing - controls margin between elements in rows. */ --row-gap-spacing-1024: 90px; /* row top/bottom margin @ 1024px */ --row-gap-spacing-1334: 130px; /* row top/bottom margin @ 1334px */ /* wide sidebar */ --row-sidebar-width: 50%; --row-sidebar-wide-width: 42%; /* fonts */ --font-family: 'news-gothic-std', sans-serif; --font-bold-font-weight: 700; --font-semibold-font-weight: 600; --font-normal-font-weight: 400; --font-body-text-color: #464d4e; /* body text*/ --font-headline-family: 'source-serif-pro', serif; /* headline font family */ --font-headline-text-color: var(--main-color); /* headline text */ --font-headline-margin-top: 25px; /* headline top margin */ --font-headline-margin-bottom: 30px; /* headline bottom margin */ --font-paragraph-margin-top: 17px; /* paragraph top margin */ --font-paragraph-margin-bottom: 17px; /* paragraph bottom margin */ --font-headline-margin-top-1200: 30px; /* headline top margin */ --font-headline-margin-bottom-1200: 35px; /* headline bottom margin */ --font-paragraph-margin-top-1200: 22px; /* paragraph top margin */ --font-paragraph-margin-bottom-1200: 22px; /* paragraph bottom margin */ /* base */ --font-h1-size: 24pt; /* h1 font size */ --font-h1-lineheight: 30pt; /* h1 line height */ --font-h1-smaller-size: 20pt; --font-h1-smaller-lineheight: 26pt; --font-h2-size: 20pt; /* h2 font size */ --font-h2-lineheight: 26pt; /* h2 line height */ --font-h2-smaller-size: 17pt; --font-h2-smaller-lineheight: 23pt; --font-h3-size: 20pt; /* h3 font size */ --font-h3-lineheight: 26pt; /* h3 line height */ --font-h3-smaller-size: 16pt; --font-h3-smaller-lineheight: 22pt; --font-h4-size: 18pt; /* h4 font size */ --font-h4-lineheight: 24pt; /* h4 line height */ --font-h4-smaller-size: 15pt; --font-h4-smaller-lineheight: 21pt; --font-h5-size: 16pt; /* h5 font size */ --font-h5-lineheight: 22pt; /* h5 line height */ --font-h5-smaller-size: 14pt; --font-h5-smaller-lineheight: 20pt; --font-h6-size: 14pt; /* h6 font size */ --font-h6-lineheight: 20pt; /* h6 line height */ --font-h6-smaller-size: 13pt; --font-h6-smaller-lineheight: 19pt; --font-copy-size: 12pt; /* base font size */ --font-copy-line-height: 19pt; /* base line height */ --font-copy-size-smaller: 11pt; /* smaller font size */ --font-copy-line-height-smaller: 15pt; /* smaller line height */ --font-h-allcaps-size: 11.5pt; /* 720 */ --font-h1-size-720: 25pt; /* media query 720 h1 font size */ --font-h1-lineheight-720: 31pt; /* media query 720 h1 line height */ --font-h1-smaller-size-720: 21pt; --font-h1-smaller-lineheight-720: 27pt; --font-h2-size-720: 21pt; /* media query 720 h2 font size */ --font-h2-lineheight-720: 27pt; /* media query 720 h2 line height */ --font-h2-smaller-size-720: 18pt; --font-h2-smaller-lineheight-720: 24pt; --font-h3-size-720: 21pt; /* media query 720 h3 font size */ --font-h3-lineheight-720: 27pt; /* media query 720 h3 line height */ --font-h3-smaller-size-720: 18pt; --font-h3-smaller-lineheight-720: 24pt; --font-h4-size-720: 19pt; /* media query 720 h4 font size */ --font-h4-lineheight-720: 25pt; /* media query 720 h4 line height */ --font-h4-smaller-size-720: 17pt; --font-h4-smaller-lineheight-720: 23pt; --font-h5-size-720: 17pt; /* media query 720 h5 font size */ --font-h5-lineheight-720: 23pt; /* media query 720 h5 line height */ --font-h5-smaller-size-720: 16pt; --font-h5-smaller-lineheight-720: 22pt; --font-h6-size-720: 16pt; /* media query 720 h6 font size */ --font-h6-lineheight-720: 22pt; /* media query 720 h6 line height */ --font-h6-smaller-size-720: 15pt; --font-h6-smaller-lineheight-720: 22pt; --font-copy-size-720: 14.5pt; /* media query 720 font size */ --font-copy-line-height-720: 22pt; /* media query 720 line height */ --font-copy-smaller-size-720: 12pt; --font-copy-smaller-line-height-720: 19pt; --font-h-allcaps-size-720: 13pt; /* 920 */ /* 1200 */ --font-h1-size-1200: 27.5pt; /* media query 1200 h1 font size */ --font-h1-lineheight-1200: 35pt; /* media query 1200 h1 line height */ --font-h1-smaller-size-1200: 24pt; --font-h1-smaller-lineheight-1200: 31pt; --font-h2-size-1200: 25pt; /* media query 1200 h2 font size */ --font-h2-lineheight-1200: 31pt; /* media query 1200 h2 line height */ --font-h2-smaller-size-1200: 21pt; --font-h2-smaller-lineheight-1200: 27pt; --font-h3-size-1200: 23pt; /* media query 1200 h3 font size */ --font-h3-lineheight-1200: 29pt; /* media query 1200 h3 line height */ --font-h3-smaller-size-1200: 20pt; --font-h3-smaller-lineheight-1200: 26pt; --font-h4-size-1200: 21pt; /* media query 1200 h4 font size */ --font-h4-lineheight-1200: 27pt; /* media query 1200 h4 line height */ --font-h4-smaller-size-1200: 19pt; --font-h4-smaller-lineheight-1200: 25pt; --font-h5-size-1200: 19pt; /* media query 1200 h5 font size */ --font-h5-lineheight-1200: 25pt; /* media query 1200 h5 line height */ --font-h5-smaller-size-1200: 17pt; --font-h5-smaller-lineheight-1200: 23pt; --font-h6-size-1200: 17pt; /* media query 1200 h6 font size */ --font-h6-lineheight-1200: 23pt; /* media query 1200 h6 line height */ --font-h6-smaller-size-1200: 16pt; --font-h6-smaller-lineheight-1200: 22pt; --font-copy-size-1200: 16pt; /* media query 1200 font size */ --font-copy-line-height-1200: 25pt; /* media query 1200 line height */ --font-copy-smaller-size-1200: 13pt; --font-copy-smaller-line-height-1200: 21pt; /* 1440 */ --font-h1-size-1440: 31pt; /* media query 1440 h1 font size */ --font-h1-lineheight-1440: 39pt; /* media query 1440 h1 line height */ --font-h1-smaller-size-1440: 27pt; --font-h1-smaller-lineheight-1440: 35pt; --font-h2-size-1440: 28pt; /* media query 1440 h2 font size */ --font-h2-lineheight-1440: 34pt; /* media query 1440 h2 line height */ --font-h2-smaller-size-1440: 25pt; --font-h2-smaller-lineheight-1440: 31pt; --font-h3-size-1440: 26pt; /* media query 1440 h3 font size */ --font-h3-lineheight-1440: 32pt; /* media query 1440 h3 line height */ --font-h3-smaller-size-1440: 23pt; --font-h3-smaller-lineheight-1440: 29pt; --font-h4-size-1440: 23pt; /* media query 1440 h4 font size */ --font-h4-lineheight-1440: 29pt; /* media query 1440 h4 line height */ --font-h4-smaller-size-1440: 21pt; --font-h4-smaller-lineheight-1440: 27pt; --font-h5-size-1440: 21pt; /* media query 1440 h5 font size */ --font-h5-lineheight-1440: 27pt; /* media query 1440 h5 line height */ --font-h5-smaller-size-1440: 19pt; --font-h5-smaller-lineheight-1440: 25pt; --font-h6-size-1440: 19pt; /* media query 1440 h6 font size */ --font-h6-lineheight-1440: 25pt; /* media query 1440 h6 line height */ --font-h6-smaller-size-1440: 18pt; --font-h6-smaller-lineheight-1440: 24pt; --font-copy-size-1440: 18pt; /* media query 1440 font size */ --font-copy-line-height-1440: 26pt; /* media query 1440 line height */ --font-copy-smaller-size-1440: 16pt; --font-copy-smaller-line-height-1440: 25pt; /* 1600 */ --font-h1-size-1600: 37pt; /* media query 1600 h1 font size */ --font-h1-lineheight-1600: 45pt; /* media query 1600 h1 line height */ --font-h1-smaller-size-1600: 32pt; --font-h1-smaller-lineheight-1600: 40pt; --font-h2-size-1600: 31pt; /* media query 1440 h2 font size */ --font-h2-lineheight-1600: 37pt; /* media query 1440 h2 line height */ --font-h2-smaller-size-1600: 28pt; --font-h2-smaller-lineheight-1600: 34pt; --font-h3-size-1600: 29pt; /* media query 1440 h3 font size */ --font-h3-lineheight-1600: 35pt; /* media query 1440 h3 line height */ --font-h3-smaller-size-1600: 26pt; --font-h3-smaller-lineheight-1600: 32pt; --font-h4-size-1600: 26pt; /* media query 1440 h4 font size */ --font-h4-lineheight-1600: 32pt; /* media query 1440 h4 line height */ --font-h4-smaller-size-1600: 24pt; --font-h4-smaller-lineheight-1600: 30pt; --font-h5-size-1600: 24pt; /* media query 1440 h5 font size */ --font-h5-lineheight-1600: 30pt; /* media query 1440 h5 line height */ --font-h5-smaller-size-1600: 22pt; --font-h5-smaller-lineheight-1600: 28pt; --font-h6-size-1600: 21pt; /* media query 1440 h6 font size */ --font-h6-lineheight-1600: 27pt; /* media query 1440 h6 line height */ --font-h6-smaller-size-1600: 20pt; --font-h6-smaller-lineheight-1600: 26pt; /* links */ --nav-link-color: #115e67; /* nav link color */ /* buttons */ --button-padding: 7px 28px; --button-padding-top-bottom: 7px; --button-padding-left-right: 28px; --button-padding: var(--button-padding-top-bottom) var(--button-padding-left-right); --button-main-color: var(--main-color); /* main button color */ --button-secondary-color: #fff; /* secondary button color (hover, border, and text on button) */ --button-disabled-color: #999; /* disabled button color */ --blog-button-padding-top-bottom: 5px; --blog-button-padding-left-right: 18px; --blog-button-padding: var(--blog-button-padding-top-bottom) var(--blog-button-padding-left-right); --button-border-radius: 7px; /* 920px */ --button-padding-top-bottom-920: 12px; --blog-button-padding-top-bottom-920: 12px; --blog-button-padding-left-right-920: 28px; --blog-button-padding-920: var(--blog-button-padding-top-bottom-920) var(--blog-button-padding-left-right-920); /* header */ --header-background-color: #fff; --header-logo-max-width: 334px; --header-logo-padding: 10px 0; --header-secondary-background-color: #115e67; --header-secondary-button-secondary-color: var(--secondary-color); --header-secondary-extra-padding-left: 20px; /* 1200 */ --header-logo-padding-1200: 22px 0; /* hero */ --hero-padding-bottom: 66.66%; /* 920 */ --hero-padding-bottom-920: 33.33%; --hero-margin-top-920: -5%; /* 1600 */ --hero-padding-bottom-1600: 33.33%; --hero-margin-top-1600: -5%; --hero-interior-padding-bottom-1600: 33.33%; --hero-interior-margin-top-1600: -5%; --hero-content-size-1600: 22pt; --hero-content-line-height-1600: 31pt; /* navigation */ --nav-button-hamburger-size: 17px; /* hamburger icon size */ --nav-button-hamburger-padding: 10px; /* hamburger icon padding within button */ --nav-button-padding-lr: 15px; --nav-button-padding-tb: 8px; --nav-button-font-size: 14pt; --nav-button-line-height: 18pt; --nav-desktop-button-hover-background-color: #f9f9f9; /* hover background color for desktop nav buttons */ --nav-slideout-background-color: #f9f9f9; /* 920 */ --nav-button-font-size-920: 10.5pt; --nav-button-line-height-920: 16pt; --nav-button-padding-lr-920: 7px; --nav-button-font-size-920-smaller: 10.5pt; --nav-button-line-height-920-smaller: 14pt; /* 1300 */ --nav-button-font-size-1300: 12pt; --nav-button-line-height-1300: 16pt; --nav-button-padding-lr-1300: 10px; /* 1440 */ --nav-button-font-size-1440: 13.5pt; --nav-button-line-height-1440: 18pt; --nav-button-padding-lr-1440: 12px; --nav-button-font-size-1440-smaller: 12pt; --nav-button-line-height-1440-smaller: 15pt; /* 1600 */ --nav-button-font-size-1600: var(--nav-button-font-size-1440); --nav-button-line-height-1600: var(--nav-button-line-height-1440); --nav-button-padding-lr-1600: 20px; /* footer */ --footer-link-min-max-width-480: 49%; /* 720 */ --footer-link-min-max-width-720: 31%; /* 1334 */ --footer-link-min-max-width-1200: 16%; /* 1440 */ --footer-link-min-max-width-1440: 9%; /* sidebar */ --sidebar-margin: var(--row-spacing); --sidebar-margin-480: var(--row-spacing-480); --sidebar-width-720: 230px; --sidebar-margin-920: var(--row-spacing-920); --sidebar-width-1024: 320px; --sidebar-margin-1024: var(--row-spacing-1024); --sidebar-margin-1334: var(--row-spacing-1334); /* card styles */ --card-padding: 15px; --card-margin-bottom: var(--row-spacing); --card-dropshadow: none; --card-border-radius: 5px; --card-featured-image-max-width: 320px; --card-featured-image-max-width-desktop: 180px; /* 480 */ --card-margin-bottom-480: var(--row-spacing-480); /* 600 */ --card-padding-600: 20px; --card-gap-600: 20px; /* 920 */ --card-padding-920: 20px; --card-gap-920: 20px; /* blog styles */ --blog-pagination-gap: 10px; /* accordion styles */ --accordion-border: none; --accordion-inner-padding: 10px; --accordion-background-color: #fff; --accordion-title-background-color: #fff; --accordion-content-background-color: #fff; --accordion-border-radius: var(--button-border-radius); --accordion-button-min-width: 50px; /* 920 */ --accordion-inner-padding-920: 20px; } /* END CSS Variables */ /* Basic Styles */ html { scroll-behavior: smooth; background-color: var(--body-background-color); } body { margin: 0; padding: 0; } .clearfloat { clear: both !important; } .page-wrapper { max-width: var(--page-max-width); margin-left: auto; margin-right: auto; overflow: hidden; } .fluid { display: flex; width: 90%; max-width: var(--content-max-width); flex-wrap: wrap; margin-left: auto; margin-right: auto; flex-direction: row; } .content-container { width: 100%; } img.lazy-img { opacity: 0; transition: opacity 0.3s ease-in-out; } .lazy-img.loaded { opacity: 1; visibility: visible; } /* Debugging Styles */ .debug, .error { position: relative; padding: 20px; background-color: #2d2d2d; border: 2px solid var(--main-color); box-shadow: 3px 3px 8px rgba(0,0,0,0.3); word-wrap: break-word; user-select: all; } .debug *, .error * { color: white; } .error { border-color: red; } .debug::after, .error::after { content: 'DEBUGGING STATEMENT:'; position: absolute; top: 0; right: 0; background-color: var(--main-color); color: white; padding: 3px 6px; font-weight: var(--font-bold-font-weight); font-size: 10pt; } .error::after { content: 'ERROR!'; background-color: red; } pre.debug, pre.error { font-family: monospace !important; font-size: 12pt; line-height: 14pt; color: white; } /* END Debugging Styles */ /* END Basic Styles */ /* Text Styles */ body * { font-family: var(--font-family); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-headline-family); font-weight: var(--font-bold-font-weight); color: var(--font-headline-text-color); margin-top: var(--font-headline-margin-top); margin-bottom: var(--font-headline-margin-bottom); } h1 .allcaps, h2 .allcaps, h3 .allcaps, h4 .allcaps, h5 .allcaps, h6 .allcaps { font-family: var(--font-headline-family); font-size: var(--font-h-allcaps-size); } p, ul, ol, li { font-size: var(--font-copy-size); line-height: var(--font-copy-line-height); margin-top: var(--font-paragraph-margin-top); margin-bottom: var(--font-paragraph-margin-bottom); color: var(--font-body-text-color); } p.smaller, p .smaller, li.smaller, li .smaller { font-size: 11pt; line-height: 18pt; } p strong, li strong { font-weight: var(--font-bold-font-weight); color: var(--main-color); } p em, li em { font-style: italic; } ul, ol { padding-left: 15px; } ul li, ol li { margin-top: calc(var(--font-paragraph-margin-top) / 2); margin-bottom: calc(var(--font-paragraph-margin-top) / 2); padding-left: 15px; margin-left: 30px; } ul li:first-child, ol li:first-child { margin-top: 0px; } ul li:last-child, ol li:last-child { margin-bottom: 0px; } a { color: var(--nav-link-color); text-decoration: underline; transition: color 0.3s; } a:hover, a:focus { color: var(--secondary-color); } a:active { color: var(--active-color); } .allcaps { text-transform: uppercase; font-size: 80%; } h1 { font-size: var(--font-h1-size); line-height: var(--font-h1-lineheight); } h2 { font-size: var(--font-h2-size); line-height: var(--font-h2-lineheight); } h3 { font-size: var(--font-h3-size); line-height: var(--font-h3-lineheight); } h4 { font-size: var(--font-h4-size); line-height: var(--font-h4-lineheight); } h5 { font-size: var(--font-h5-size); line-height: var(--font-h5-lineheight); } h6 { font-size: var(--font-h6-size); line-height: var(--font-h6-lineheight); } @media only screen and (min-width: 720px) { p, ul, ol, li { font-size: var(--font-copy-size-720); line-height: var(--font-copy-line-height-720); } h1 { font-size: var(--font-h1-size-720); line-height: var(--font-h1-lineheight-720); } h2 { font-size: var(--font-h2-size-720); line-height: var(--font-h2-lineheight-720); } h3 { font-size: var(--font-h3-size-720); line-height: var(--font-h3-lineheight-720); } h4 { font-size: var(--font-h4-size-720); line-height: var(--font-h4-lineheight-720); } h5 { font-size: var(--font-h5-size-720); line-height: var(--font-h5-lineheight-720); } h6 { font-size: var(--font-h6-size-720); line-height: var(--font-h6-lineheight-720); } h1 .allcaps, h2 .allcaps, h3 .allcaps, h4 .allcaps, h5 .allcaps, h6 .allcaps { font-size: var(--font-h-allcaps-size-720); } } @media only screen and (min-width: 1200px) { h1, h2, h3, h4, h5, h6 { margin-top: var(--font-headline-margin-top-1200); margin-bottom: var(--font-headline-margin-bottom-1200); } p, ul, ol, li { font-size: var(--font-copy-size-1200); line-height: var(--font-copy-line-height-1200); margin-top: var(--font-paragraph-margin-top-1200); margin-bottom: var(--font-paragraph-margin-bottom-1200); } h1 { font-size: var(--font-h1-size-1200); line-height: var(--font-h1-lineheight-1200); } h2 { font-size: var(--font-h2-size-1200); line-height: var(--font-h2-lineheight-1200); } h3 { font-size: var(--font-h3-size-1200); line-height: var(--font-h3-lineheight-1200); } h4 { font-size: var(--font-h4-size-1200); line-height: var(--font-h4-lineheight-1200); } h5 { font-size: var(--font-h5-size-1200); line-height: var(--font-h5-lineheight-1200); } h6 { font-size: var(--font-h6-size-1200); line-height: var(--font-h6-lineheight-1200); } } @media only screen and (min-width: 1440px) { p, ul, ol, li { font-size: var(--font-copy-size-1440); line-height: var(--font-copy-line-height-1440); } h1 { font-size: var(--font-h1-size-1440); line-height: var(--font-h1-lineheight-1440); } h2 { font-size: var(--font-h2-size-1440); line-height: var(--font-h2-lineheight-1440); } h3 { font-size: var(--font-h3-size-1440); line-height: var(--font-h3-lineheight-1440); } h4 { font-size: var(--font-h4-size-1440); line-height: var(--font-h4-lineheight-1440); } h5 { font-size: var(--font-h5-size-1440); line-height: var(--font-h5-lineheight-1440); } h6 { font-size: var(--font-h6-size-1440); line-height: var(--font-h6-lineheight-1440); } } @media only screen and (min-width: 1600px) { h1 { font-size: var(--font-h1-size-1600); line-height: var(--font-h1-lineheight-1600); } h2 { font-size: var(--font-h2-size-1600); line-height: var(--font-h2-lineheight-1600); } h3 { font-size: var(--font-h3-size-1600); line-height: var(--font-h3-lineheight-1600); } h4 { font-size: var(--font-h4-size-1600); line-height: var(--font-h4-lineheight-1600); } h5 { font-size: var(--font-h5-size-1600); line-height: var(--font-h5-lineheight-1600); } h6 { font-size: var(--font-h6-size-1600); line-height: var(--font-h6-lineheight-1600); } } /* END Text Styles */ /* Location Text Styles */ p.location-address { margin-top: 0px; } p.location-address strong { color: var(--secondary-color); } .bkg-green p.location-address strong { color: var(--main-color); } h3.location-name { margin-bottom: 0px; } /* END Location Text Styles */ /* Gradient Line Styles */ .gradient-line { width: 100%; height: 3px; background-image: linear-gradient(to right, var(--secondary-color-true) 5%, rgb(255, 255, 255, 0) 62%); } .double-gradient-line { width: 100%; height: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 25%, var(--secondary-color-true) 50%, rgba(255, 255, 255, 0) 75%); } /* END Gradient Line Styles */ /* Button Styles */ .btn { transition: background 0.3s, color 0.3s; padding: var(--button-padding); border: 2px solid var(--button-main-color); border-radius: var(--button-border-radius); background-color: var(--button-main-color); color: var(--button-secondary-color); font-weight: var(--font-bold-font-weight); text-decoration: none; display: inline-block; } .btn:hover, .btn:focus { color: var(--button-main-color); background-color: var(--button-secondary-color); } @media only screen and (min-width: 920px) { .btn { padding-top: var(--button-padding-top-bottom-920); padding-bottom: var(--button-padding-top-bottom-920); border: 4px solid var(--button-main-color); } } /* Chat Button Styles */ .chat-button { position: relative; background-color: white; color: var(--secondary-color); border: 4px solid var(--secondary-color); } .chat-button:hover, .chat-button:focus { background-color: var(--secondary-color); color: white; } .chat-button::before { content: ""; position: absolute; left: 2px; bottom: -15px; width: 0; height: 0; border-style: solid; border-width: 15px 10px 0 0; border-color: var(--secondary-color) transparent transparent transparent; } @media only screen and (min-width: 920px) { .chat-button::before { bottom: -20px; border-width: 20px 10px 0 0; } } /* END Chat Button Styles */ /* END Button Styles */ /* Header Styles */ .header { display: flex; justify-content: center; flex-wrap: wrap; background-color: var(--header-background-color); border-bottom: 3px solid var(--secondary-color-true); } .header.row { padding-top: 0px; padding-bottom: 0px; } .header .fluid { flex-wrap: nowrap; flex-direction: column; align-content: stretch; justify-content: center; } .skip-to { display: inline-block; position: absolute; top: -100vh; left: -100vw; padding: var(--button-padding); width: auto; text-decoration: none; } .skip-to:focus { top: 5px; left: 5px; background-color: var(--main-color); color: var(--button-secondary-color); } .admin-bar .skip-to:focus { top: 35px; } .header .logo-container { display: flex; flex-basis: 100%; justify-content: center; padding: var(--header-logo-padding); align-items: center; } .header .logo-container img { display: flex; flex-grow: 1; width: 100%; max-width: var(--header-logo-max-width); height: auto; } @media only screen and (min-width: 920px) { .header .fluid { flex-wrap: nowrap; flex-direction: column; gap: 0px; } .header .logo-container { flex-basis: content; flex-grow: 1; } .header .logo-container img { width: unset; } .header .nav-container { flex-basis: 100%; flex-shrink: 1; } } @media only screen and (min-width: 1200px) { .header .fluid { flex-direction: row; gap: 20px; } .header .logo-container { padding: var(--header-logo-padding-1200); } } /* END Header Styles */ /* Footer Styles */ #footer { background-color: var(--main-color); } .footer.nav-container { margin-bottom: 20px; } .disclaimers p, .social-media p { font-size: var(--nav-button-font-size-920); line-height: var(--nav-button-line-height-920); color: var(--button-secondary-color); font-weight: 700; } .disclaimers p a { color: var(--button-secondary-color); text-decoration: underline; } .social-media p a { color: var(--button-secondary-color); text-decoration: none; } .row .content-container .social-media .social-icon { display: inline-block; margin-right: 20px; } .row .content-container .social-media .social-icon img { min-height: 29px; height: 29px; width: auto; } @media only screen and (min-width: 1334px) { .disclaimers, .social-media { margin-top: var(--row-spacing-1024); } } @media only screen and (min-width: 1440px) { .disclaimers p, .social-media p { font-size: var(--nav-button-font-size-1300); line-height: var(--nav-button-line-height-1300); } } /* END Footer Stlyes */ /* Navigation Styles */ /* Universal Navigation Styles */ /* Parent Nav Styles */ .nav-container { position: relative; z-index: 10; } .nav-container, .nav-container .fluid { position: relative; } .nav-container a, .nav p { text-decoration: none; color: var(--nav-link-color); display: flex; font-size: var(--nav-button-font-size); line-height: var(--nav-button-line-height); padding-top: var(--nav-button-padding-tb); padding-bottom: var(--nav-button-padding-tb); font-weight: var(--font-bold-font-weight); } .nav-container a:hover, .nav-container a:focus, .nav-container.nav-slideout a:hover, .nav-container.nav-slideout a:focus { color: var(--main-color-darker); text-decoration: underline; } .nav-container ul { overflow: auto; position: relative; display: flex; flex-wrap: wrap; gap: 0px; flex-grow: 1; } .nav-container ul, .nav-container li { /* clear margin/padding */ margin: 0; padding: 0; } .nav-container ul, .nav-container ul li { color: var(--font-body-text-color); font-weight: var(--font-bold-font-weight); list-style: none; } .nav-container ul li { display: flex; align-items: center; width: 100%; padding-top: 0px; padding-bottom: 0px; min-height: 30px; /* revise magic number */ } .nav-container ul li.menu-item-has-children { flex-wrap: wrap; } .nav-container ul li.menu-item-has-children a { flex-basis: calc(100% - 41px); /* check magic number */ } .nav-container ul li ul.sub-menu li:last-child { margin-bottom: 0px; } .nav-container ul li ul.sub-menu li a { flex-basis: 100%; } .nav-container ul li ul.sub-menu li.menu-item-has-children a { flex-basis: calc(100% - 41px); flex-grow: 1; } .nav-container ul li ul.sub-menu li.menu-item-has-children ul.sub-menu li a { flex-basis: 100%; } .nav-container ul li ul.sub-menu { flex-direction: column; } .nav-container ul li::before, .nav-container ol li::before { padding: 0; margin: 0; content: ''; display: none; } .nav-container ul li a:hover, .nav-container ul li a:focus { text-decoration: underline; } .nav-container ul.sub-menu { display: none; margin-left: 14px; border-left: 3px solid var(--main-color); padding-left: 23px; } .nav-container.desktop ul.sub-menu li.nav-search-locations::after { width: 100%; height: 3px; background: linear-gradient(90deg, var(--secondary-color-true), #fff); position: absolute; bottom: 0; left: 0; content: ''; pointer-events: none; } @media only screen and (min-width: 920px) { .nav-container a { padding-left: var(--nav-button-padding-lr-920); padding-right: var(--nav-button-padding-lr-920); } .nav-container a, .nav p { font-size: var(--nav-button-font-size-920); line-height: var(--nav-button-line-height-920); } .nav-container ul { gap: 0px; } .nav-container ul li { width: unset; } .nav-container ul li.menu-item-has-children a { flex-basis: 100%; } .header .nav-container ul.sub-menu li.nav-search-locations a::after { content: " - Find Your Closest Location!"; font-style: italic; color: var(--secondary-color); } .header .nav-container ul.sub-menu li.nav-search-locations a:hover::after { color: var(--secondary-color-darker); } .nav-container li.nav-locations ul.sub-menu li a { font-size: var(--nav-button-font-size-920-smaller); line-height: var(--nav-button-line-height-920-smaller); } .header .nav-container li.nav-locations ul.sub-menu li.nav-search-locations a { font-size: var(--nav-button-font-size-920-smaller); line-height: var(--nav-button-line-height-920-smaller); } } @media only screen and (min-width: 1300px) { .nav-container a, .nav p { font-size: var(--nav-button-font-size-1300); line-height: var(--nav-button-line-height-1300); } } @media only screen and (min-width: 1440px) { .nav-container a, .nav p { font-size: var(--nav-button-font-size-1440); line-height: var(--nav-button-line-height-1440); padding-left: var(--nav-button-padding-lr-1440); padding-right: var(--nav-button-padding-lr-1440); } .nav-container li.nav-locations ul.sub-menu li a { font-size: var(--nav-button-font-size-1440-smaller); line-height: var(--nav-button-line-height-1440-smaller); } .header .nav-container li.nav-locations ul.sub-menu li.nav-search-locations a { font-size: var(--nav-button-font-size-1440); line-height: var(--nav-button-line-height-1440); } } @media only screen and (min-width: 1600px) { .nav-container a, .nav p { font-size: var(--nav-button-font-size-1600); line-height: var(--nav-button-line-height-1600); padding-left: var(--nav-button-padding-lr-1600); padding-right: var(--nav-button-padding-lr-1600); } } /* END Parent Nav Styles */ /* Child Nav Styles */ @media only screen and (min-width: 920px) { .nav-container ul { overflow: visible; } .nav-container ul li { position: relative; } } /* END Child Nav Styles */ /* Secondary Nav Styles */ /* Universal Secondary Nav Styles */ .secondary-nav-container { background-color: var(--header-secondary-background-color); width: 100%; } .secondary-nav-container.mobile ul { display: flex; background-color: var(--header-secondary-background-color); width: 100%; flex-direction: column; } .secondary-nav-container ul, .secondary-nav-container ul li { margin: 0; padding: 0; } .nav-container .secondary-nav-container.desktop ul li a { background-color: var(--header-secondary-background-color); } .nav-container .secondary-nav-container.desktop ul li a:hover, .nav-container .secondary-nav-container.desktop ul li a:focus { background-color: var(--main-color-darker); } .secondary-nav-container a { text-decoration: none; color: var(--button-secondary-color); display: inline-flex; font-size: inherit; line-height: var(--nav-button-line-height); padding-top: var(--nav-button-padding-tb); padding-bottom: var(--nav-button-padding-tb); font-weight: var(--font-bold-font-weight); transition: background-color 0.3s; } .secondary-nav-container ul li a:hover, .secondary-nav-container ul li a:focus { transition: background-color 0.3s; background-color: var(--main-color-darker); color: white; text-decoration: underline; } .secondary-nav-container li { list-style-type: none; margin: 0; display: flex; } /* Secondary Nav Font Styles - uncomment to enable */ .secondary-nav-container a, .secondary-nav-container p.nav-prefix { font-size: var(--font-copy-size-smaller); line-height: var(--font-copy-line-height-smaller); } @media only screen and (min-width: 920px) { .secondary-nav-container a, .secondary-nav-container p.nav-prefix { font-size: var(--nav-button-font-size-920); line-height: var(--nav-button-line-height-920); } } @media only screen and (min-width: 1300px) { .secondary-nav-container a, .secondary-nav-container p.nav-prefix { font-size: var(--nav-button-font-size-1300); line-height: var(--nav-button-line-height-1300); } } @media only screen and (min-width: 1440px) { .secondary-nav-container a, .secondary-nav-container p.nav-prefix { font-size: var(--nav-button-font-size-1440); line-height: var(--nav-button-line-height-1440); } } @media only screen and (min-width: 1600px) { .secondary-nav-container a, .secondary-nav-container p.nav-prefix { font-size: var(--nav-button-font-size-1600); line-height: var(--nav-button-line-height-1600); } } /* END Secondary Nav Font Styles */ /* END Universal Secondary Nav Styles */ /* Mobile Secondary Nav Styles */ .secondary-nav-container.mobile a { width: 100%; justify-content: center; } .secondary-nav-container.desktop { display: none; } .secondary-nav-container p.nav-prefix { text-align: center; color: var(--button-secondary-color); font-weight: var(--font-bold-font-weight); margin-top: var(--nav-button-padding-tb); margin-bottom: var(--nav-button-padding-tb); } @media only screen and (min-width: 720px) { .secondary-nav-container.mobile .fluid ul { gap: 0px; flex-direction: row; justify-content: center; } .secondary-nav-container.mobile a { padding: var(--nav-button-padding-tb) var(--nav-button-padding-lr); } } @media only screen and (min-width: 1200px) { .secondary-nav-container.mobile { display: none; } } /* END Mobile Secondary Nav Styles */ /* Desktop Secondary Nav Styles */ .secondary-nav-container.desktop { background-color: var(--header-secondary-background-color); padding-right: 0px; flex-direction: row; position: relative; align-self: end; width: auto; gap: 20px; } .secondary-nav-container.desktop::after { content: ''; width: 100%; position: absolute; bottom: 0; height: 100%; left: 100%; background-color: var(--header-secondary-background-color); } .secondary-nav-container.desktop::before { content: ''; width: var(--header-secondary-extra-padding-left); position: absolute; bottom: 0; height: 100%; right: 100%; background-color: var(--header-secondary-background-color); border-bottom-left-radius: 15px; } @media only screen and (min-width: 1200px) { .secondary-nav-container.desktop { display: flex; } /* specific adjustment for bh */ .secondary-nav-container.desktop a { padding-left: 7px; } } /* END Desktop Secondary Nav Styles */ /* END Secondary Nav Styles */ /* END Universal Navigation Styles */ /* Mobile Navigation Menu */ /* Navigation Button Styles */ .mobile.nav-toggle { display: flex; } #menu-icon { display: flex; flex-wrap: nowrap; flex-grow: 1; align-items: center; justify-content: center; padding-top: var(--nav-button-padding-tb); padding-bottom: var(--nav-button-padding-tb); cursor: pointer; transition: all 0.3s; } #menu-icon p { margin-top: 0px; margin-bottom: 0px; transition: color 0.3s; } #menu-icon:hover p, #menu-icon:focus p { color: var(--main-color-darker); text-decoration: underline; } .menu-icon-img { display: flex; align-items: center; width: var(--nav-button-hamburger-size); height: var(--nav-button-hamburger-size); margin-right: var(--nav-button-padding-lr); background-color: var(--main-color); border: 2px solid var(--main-color); padding: var(--nav-button-hamburger-padding); transition: 0.3s all; } .menu-icon-img svg { width: 17px; height: 17px; } #menu-icon:hover .menu-icon-img, #menu-icon:focus .menu-icon-img { background-color: var(--button-secondary-color); border-color: var(--main-color); } .menu-icon-img .svg { width: 100%; } .nav-icon { fill: var(--button-secondary-color); transition: 0.3s all; } #menu-icon:hover .nav-icon, #menu-icon:focus .nav-icon { fill: var(--main-color); box-shadow: none; } .children-expander-container { padding: 10px; padding-left: 0px; cursor: pointer; max-width: 30px; } .children-expander { cursor: pointer; color: var(--button-secondary-color); background-color: var(--main-color); padding: 1px 6px; font-weight: 700; font-size: 24px; line-height: 24px; display: flex; font-family: monospace; border: 2px solid var(--main-color); transition: color 0.3s, background 0.3s, border 0.3s, text-shadow 0.3s; max-width: 30px; } .children-expander-container:hover .children-expander, .children-expander-container:active .children-expander, .children-expander-container:focus .children-expander { background-color: var(--button-secondary-color); border-color: var(--main-color); color: var(--main-color); text-shadow: none; } .nav-container #nav-close-btn { display: flex; height: 31px; padding-top: 9px; width: 40px; margin: 10px; background-color: var(--main-color); border: 2px solid var(--main-color); color: var(--button-secondary-color); position: absolute; top: 0; right: 0; z-index: 100; text-align: center; font-family: arial, sans-serif; font-weight: 700; font-size: 16pt; cursor: pointer; transition: 0.3s all; justify-content: center; } .nav-container #nav-close-btn:hover, .nav-container #nav-close-btn:focus { cursor: pointer; background-color: var(--button-secondary-color); color: var(--main-color); text-shadow: none; } /* END Navigation Button Styles */ /* Parent Nav Styles */ .nav-slideout { display: none; background: var(--nav-slideout-background-color); } .nav-slideout.active, .active { display: flex; } .nav-container.mobile { padding-top: var(--nav-button-padding-tb); padding-bottom: var(--nav-button-padding-tb); width: 100%; } .mobile.nav-container a { width: 100%; } @media only screen and (min-width: 920px) { .mobile.nav-container { display: none !important; } .mobile.nav-toggle { display: none; } } /* END Parent Nav Styles */ /* END Mobile Navigation Menu */ /* Desktop Navigation Menu */ /* Parent Nav Styles */ .desktop.nav-container { display: none; } .desktop.nav-container ul li a { transition: background-color 0.1s; background-color: var(--header-background-color); } .desktop.nav-container ul li a:focus, .desktop.nav-container ul li a:hover { background-color: var(--nav-desktop-button-hover-background-color); } @media only screen and (min-width: 920px) { .desktop.nav-container { display: flex; flex-direction: column; } .desktop.nav-container ul { justify-content: center; } } @media only screen and (min-width: 1200px) { .desktop.nav-container ul { justify-content: right; } } /* END Parent Nav Styles */ /* Child Nav Styles */ @media only screen and (min-width: 920px) { /* 1st Level Sub Menus */ .desktop.nav-container ul li a { align-self: stretch; align-items: center; } .desktop.nav-container ul.sub-menu { border-left: none; } .desktop.nav-container ul li:hover ul.sub-menu, .desktop.nav-container ul li:focus ul.sub-menu, .desktop.nav-container ul li:focus-within ul.sub-menu, .desktop.nav-container ul li[aria-expanded="true"] ul.sub-menu { display: flex; position: absolute; top: 100%; left: 0; } .desktop.nav-container ul li:last-child ul.sub-menu, .desktop.nav-container ul li.left-align ul.sub-menu { left: unset; right: 0; } .desktop.nav-container ul.sub-menu { background-color: white; margin-left: 0px; padding-left: 0px; width: auto; z-index: 10; } .desktop.nav-container ul.sub-menu li { display: flex; flex-basis: 100%; flex-grow: 1; align-items: stretch; margin-bottom: 0px; } .desktop.nav-container ul.sub-menu li a { display: inline-block; width: auto; white-space: nowrap; } .desktop.nav-container ul li ul.sub-menu li { margin-bottom: unset; } /* END 1st Level Sub Menus */ /* 2nd Level Sub Menus */ .desktop.nav-container ul.sub-menu li.menu-item-has-children ul.sub-menu { display: none; position: absolute; top: 0; right: 100%; left: unset; background-color: white; z-index: 10; } .desktop.nav-container ul li:last-child ul.sub-menu li.menu-item-has-children ul.sub-menu, .desktop.nav-container ul li.left-align ul.sub-menu li.menu-item-has-children ul.sub-menu { left: unset; right: 100%; } .desktop.nav-container ul.sub-menu li.menu-item-has-children:hover ul.sub-menu, .desktop.nav-container ul.sub-menu li.menu-item-has-children:focus ul.sub-menu, .desktop.nav-container ul.sub-menu li.menu-item-has-children:focus-within ul.sub-menu, .desktop.nav-container ul.sub-menu li.menu-item-has-children[aria-expanded="true"] ul.sub-menu { display: flex; } /* END 2nd Level Sub Menus */ } /* END Child Nav Styles */ /* END Desktop Navigation Menu */ /* Footer Navigation Menu */ /* Parent Nav Styles */ .footer.nav-slideout { display: flex; background: unset; } .footer.nav-container ul { flex-direction: column; gap: 10px; } .footer.nav-container.nav-slideout a { text-decoration: none; color: white; width: 100%; font-size: var(--nav-button-font-size-920); line-height: var(--nav-button-line-height-920); padding-left: 0; padding-right: 0; } .footer.nav-container.nav-slideout a:hover, .footer.nav-container.nav-slideout a:focus { text-decoration: underline; } .footer.nav-container ul li { flex-wrap: wrap; flex-basis: auto; width: auto; flex: 1 1 auto; } .footer.nav-container ul li.menu-item-has-children a { flex-basis: calc(100% - 41px); align-self: center; } .footer.nav-container ul.sub-menu { margin-left: 9px; padding-left: 15px; border-left: 3px solid var(--button-secondary-color); overflow: hidden; } .footer.nav-container ul li .sub-menu li { display: block; } .footer.nav-container ul li .sub-menu li a { font-size: calc(var(--nav-button-font-size-920) - 1pt); line-height: calc(var(--nav-button-line-height-920) - 1pt); padding-top: 3px; padding-bottom: 3px; } .footer.nav-container ul li .sub-menu li.menu-item-has-children { display: flex; } .footer.nav-container ul li .sub-menu li.menu-item-has-children .children-expander-container { padding-top: 5px; } .footer.nav-container .children-expander { color: var(--main-color); background-color: var(--button-secondary-color); padding: 0px 1px; font-size: 16px; line-height: 13px; border: 2px solid var(--button-secondary-color); align-self: baseline; } .footer.nav-container .children-expander-container:hover .children-expander, .footer.nav-container .children-expander-container:focus .children-expander { background-color: var(--main-color); border-color: var(--button-secondary-color); color: var(--button-secondary-color); } footer.nav-container ul li ul.sub-menu li.menu-item-has-children a { flex-basis: calc(100% - 40px); padding-left: 0px; padding-right: 0px; align-self: baseline; } @media only screen and (min-width: 480px) { .footer.nav-container ul { flex-direction: unset; align-items: baseline; } .footer.nav-container ul li { max-width: calc(var(--footer-link-min-max-width-480) - 1px); min-width: calc(var(--footer-link-min-max-width-480) - 1px); } .footer.nav-container ul li .sub-menu li { min-width: auto; max-width: 100%; } } @media only screen and (min-width: 720px) { .footer.nav-container ul li { max-width: calc(var(--footer-link-min-max-width-720) - -5px); min-width: calc(var(--footer-link-min-max-width-720) - -5px); } } @media only screen and (min-width: 1200px) { .footer.nav-container ul li { max-width: calc(var(--footer-link-min-max-width-1200) - -31px); min-width: calc(var(--footer-link-min-max-width-1200) - -31px); } } @media only screen and (min-width: 1440px) { .footer.nav-container ul li { min-width: calc(var(--footer-link-min-max-width-1440) - -18px); } } @media only screen and (min-width: 1440px) { .footer.nav-container a { font-size: 13pt; line-height: 18pt; } .footer.nav-container ul li .sub-menu li a { font-size: calc(var(--nav-button-font-size-1440) - 2pt); line-height: calc(var(--nav-button-line-height-1440) - 2pt); } } /* END Parent Nav Styles */ /* END Footer Navigation Menu */ /* Left Border Styles - uncomment to enable */ /* @media only screen and (min-width: 920px) { .desktop.nav-container { --dropdown-border-left-width: 3px; } .desktop.nav-container ul li:hover ul.sub-menu, .desktop.nav-container ul li:focus ul.sub-menu { border-left: var(--dropdown-border-left-width) solid var(--main-color); } .nav-container ul.sub-menu li.menu-item-has-children ul.sub-menu { border-left: var(--dropdown-border-left-width) solid var(--main-color); } .nav-container ul li:last-child ul.sub-menu li.menu-item-has-children ul.sub-menu { right: calc(100% + var(--dropdown-border-left-width)); } } */ /* END Left Border Styles */ /* END Navigation Styles */ /* Hero Styles */ .hero { position: relative; overflow: hidden; } .hero.row { padding-top: 0px; padding-bottom: 0px; position: relative; z-index: 5; background-color: var(--page-background-color); } .hero-placeholder { width: 100%; padding-bottom: var(--hero-padding-bottom); } .hero-container.slick-carousel + .hero-placeholder { padding-bottom: calc(var(--hero-padding-bottom) + var(--font-copy-line-height) + 52px); } .hero .hero-container { position: absolute; left: 0; width: 100%; top: 0; } .hero .hero-controls { position: absolute; width: 100%; bottom: 0; left: 0; margin-bottom: 20px; } .hero .hero-controls .fluid { position: relative; } .hero .hero-slide .hero-image-wrapper { position: relative; } .hero .hero-slide .hero-image-wrapper .hero-overlay { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:rgba(255, 255, 255, 0.8); } .hero .hero-slide img { width: 105%; margin-left: -2.5%; animation: fadeInZoom 1s ease-in-out forwards; } @media (prefers-reduced-motion) { .hero .hero-slide img { animation: none; } } @keyframes fadeInZoom { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } .hero .hero-slide .hero-content .fluid { display: flex; flex-direction: column; position: absolute; top: 0; left: 5%; height: 100%; gap: 7px; text-align: center; justify-content: center; pointer-events: all; } .hero .hero-slide .hero-content .fluid p, .hero .hero-slide .hero-content .fluid h1, .hero .hero-slide .hero-content .fluid h2, .hero .hero-slide .hero-content .fluid h3, .hero .hero-slide .hero-content .fluid h4, .hero .hero-slide .hero-content .fluid h5, .hero .hero-slide .hero-content .fluid h6, .hero .hero-slide .hero-content .fluid ul li, .hero .hero-slide .hero-content .fluid ol li { user-select: text; } .hero .hero-slide .hero-content p, .hero .hero-slide .hero-content h1, .hero .hero-slide .hero-content h2, .hero .hero-slide .hero-content h3, .hero .hero-slide .hero-content h4, .hero .hero-slide .hero-content h5, .hero .hero-slide .hero-content h6, .hero .hero-slide .hero-content ul li, .hero .hero-slide .hero-content ol li { margin-top: 0px; margin-bottom: 0px; color: var(--main-color); font-weight: 700; font-family: var(--font-headline-family); } .hero .hero-slide .hero-content p em { font-family: var(--font-headline-family); font-style: italic; } .hero .hero-slide .hero-content p a.btn { color: #fff; background-color: var(--main-color); border-color: var(--main-color); margin-top: 7px; } .hero .hero-slide .hero-content p a.btn:after, .hero .hero-slide .hero-content p a.btn:hover { color: var(--main-color); background: #fff; } .hero .hero-slide.slick-slide { position: relative; } @media only screen and (min-width: 720px) { .hero .hero-slide .hero-content p em { font-size: var(--font-copy-size); line-height: var(--font-copy-line-height); } } @media only screen and (min-width: 920px) { .hero .hero-slide img { width: 70%; margin-left: -5%; margin-top: -5%; } .hero .hero-slide .hero-content img { width: 100%; } .hero .hero-container { height: 0; padding-bottom: var(--hero-padding-bottom-920); } .hero .hero-placeholder, .hero-container.slick-carousel + .hero-placeholder { padding-bottom: var(--hero-padding-bottom-920); } .hero .hero-slide .hero-image-wrapper .hero-overlay { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 35% , rgba(255, 255, 255, 1) 50%); } .hero .hero-slide .hero-content .fluid { left: calc(50% + calc(var(--row-spacing) * 2)); text-align: left; width: calc(40% - calc(var(--row-spacing) * 2)); } .hero .hero-slide .hero-content p, .hero .hero-slide .hero-content h1, .hero .hero-slide .hero-content h2, .hero .hero-slide .hero-content h3, .hero .hero-slide .hero-content h4, .hero .hero-slide .hero-content h5, .hero .hero-slide .hero-content h6, .hero .hero-slide .hero-content ul li, .hero .hero-slide .hero-content ol li { text-align: right; } .hero .hero-slide .hero-image-wrapper { position: absolute; top: 0; } .hero .hero-slide.slick-slide .hero-image-wrapper { position: relative; } .hero .hero-slide img { margin-top: var(--hero-margin-top-920); } .hero .hero-slide.slick-slide .hero-content .fluid { height: calc(100% - var(--hero-padding-bottom-920)); } .hero .hero-slide .hero-content p em { font-size: var(--font-copy-size); line-height: var(--font-copy-line-height); } } @media only screen and (min-width: 1024px) { .hero .hero-slide .hero-image-wrapper .hero-overlay { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 40% , rgba(255, 255, 255, 1) 55%); } .hero .hero-slide .hero-content .fluid { left: calc(50% + calc(var(--row-spacing-1024) * 2)); width: calc(40% - calc(var(--row-spacing-1024) * 2)); } } @media only screen and (min-width: 1200px) { .hero .hero-slide .hero-content p em { font-size: var(--font-copy-size-720); line-height: var(--font-copy-line-height-720); } } @media only screen and (min-width: 1440px) { .hero .hero-slide .hero-content p em { font-size: var(--font-copy-size-1200); line-height: var(--font-copy-line-height-1200); } } @media only screen and (min-width: 1600px) { .hero .hero-container { padding-bottom: var(--hero-interior-padding-bottom-1600); } .hero .hero-placeholder, .hero-container.slick-carousel + .hero-placeholder { padding-bottom: var(--hero-interior-padding-bottom-1600); } .hero .hero-slide img { margin-top:var(--hero-interior-margin-top-1600); } .hero .hero-slide.slick-slide .hero-content .fluid { height: 55%; } .home .hero .hero-container { padding-bottom: var(--hero-padding-bottom-1600); } .home .hero .hero-placeholder { padding-bottom: var(--hero-padding-bottom-1600); } .home .hero .hero-slide img { margin-top:var(--hero-margin-top-1600); } .home .hero .hero-slide.slick-slide .hero-content .fluid { height: calc(100% - var(--hero-padding-bottom-1600) - var(--hero-margin-top-1600)); } .hero .hero-slide .hero-content .fluid { width: calc(30% - calc(var(--row-spacing-1024) * 2)); } .hero .hero-slide .hero-content p { font-size: var(--hero-content-size-1600); line-height: var(--hero-content-line-height-1600); } .hero .hero-slide .hero-content p a.btn { font-size: var(--font-copy-size-1440); line-height: var(--font-copy-line-height-1440); } .hero .hero-slide .hero-content p em { font-size: var(--font-copy-size-1440); line-height: var(--font-copy-line-height-1440); } } /* Slick Styles */ /* Arrows Styles */ .slick-arrows-container { position: absolute; width: 100%; bottom: 0; left: 0; } .slick-arrows-container button { position: absolute; top: -100vh; left: -100vw; padding: var(--button-padding); width: auto; text-decoration: none; } .slick-arrows-container button:focus { top: unset; bottom: 40px; left: 0px; background-color: var(--page-background-color); color: var(--secondary-color); } /* END Arrows Stlyes */ /* Dots Styles */ .slick-dots-container, .slick-dots-container ul { display: flex; justify-content: center; align-items: center; } .slick-dots-container ul { margin: 0; padding: 0; list-style: none; } .slick-dots-container li { margin: 0; padding: 0; } .slick-dots-container li button { font-size: 0; height: 12px; width: 12px; border-radius: 12px; border: 3px solid var(--secondary-color); padding: 9px; margin: 0px 5px; cursor: pointer; vertical-align: middle; position: relative; } .slick-dots-container .slick-active button { transition: all 0.3s; background-color: var(--secondary-color); position: relative; } .slick-dots-container button::before { content: ""; position: absolute; z-index: 0; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 2px solid white; border-radius: 100%; } .slick-dots-container button:focus::before, .slick-dots-container button:hover::before { content: ""; position: absolute; z-index: 0; top: -7px; left: -7px; right: -7px; bottom: -7px; border: 4px solid white; border-radius: 100%; } .slick-dots-container .slick-active button:focus::before, .slick-dots-container .slick-active button:hover::before { top: -5px; left: -5px; right: -5px; bottom: -5px; border: 2px solid white; } /* END Dots Styles */ /* Slick Button Styles */ #slick-pause { padding-left: 15px; padding-right: 15px; margin-right: 10px; position: relative; } #slick-pause::before { content: ""; position: absolute; z-index: 0; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px solid white; border-radius: 9px; } /* END Slick Button Styles */ /* END Slick Stlyes */ /* END Hero Styles */ /* Base Card Styles */ .card { position: relative; display: flex; flex-wrap: wrap; flex-direction: column; padding: var(--card-padding); background-color: var(--page-background-color); box-shadow: var(--card-dropshadow); border-radius: var(--card-border-radius); } .card .card-container { display: flex; flex-wrap: wrap; flex-direction: column; } .card .card-title h2 { margin-top: 0px; margin-bottom: calc(var(--font-headline-margin-bottom) / 2); } .card .card-title h2 + p { margin-top: calc(var(--font-paragraph-margin-top) / 2); } .card .card-content { display: flex; flex-wrap: wrap; flex-direction: column; margin-top: var(--font-paragraph-margin-top); margin-bottom: var(--font-paragraph-margin-bottom); gap: var(--font-paragraph-margin-top); } .card .card-featured-image img { width: 100%; height: auto; } .card .card-action { margin-top: var(--font-paragraph-margin-top); margin-bottom: var(--font-paragraph-margin-bottom); position: absolute; bottom: calc(-1 * var(--font-copy-line-height)/2 - var(--button-padding-top-bottom)); } .post-cards { display: flex; flex-direction: column; flex-wrap: wrap; gap: calc(var(--row-spacing) + 10px); } .post-cards .card { flex-grow: 1; background-color: var(--body-background-color); } .blog-action-container, .testimonials-action-container { display: flex; justify-content: stretch; margin-top: calc(var(--row-spacing) + 10px); margin-bottom: var(--row-spacing); } .blog-action-container p, .testimonials-action-container p { display: flex; gap: var(--blog-pagination-gap); flex-wrap: wrap; align-items: baseline; margin: 0; } .blog-action-container p .current.btn { background-color: var(--button-disabled-color); border-color: var(--button-disabled-color); color: var(--body-background-color); } @media only screen and (min-width:480px) { .post-cards { gap: var(--row-spacing-480); } .post-cards .card { flex-basis: calc(50% - var(--row-spacing-480) * 2); } .blog-action-container { margin-top: calc(var(--row-spacing-480) + 10px); margin-bottom: var(--row-spacing-480); } } @media only screen and (min-width: 720px) { .card .card-action { bottom: calc(-1 * var(--font-copy-line-height-720)/2 - var(--button-padding-top-bottom)); } } @media only screen and (min-width:920px) { .post-cards { gap: var(--row-spacing-920); } .post-cards .card { flex-basis: calc(50% - var(--row-spacing-920) * 2); } .blog-action-container { margin-top: calc(var(--row-spacing-920) + 10px); margin-bottom: var(--row-spacing-920); } .card .card-action { bottom: calc(-1 * var(--font-copy-line-height-720)/2 - var(--button-padding-top-bottom-920)); } } @media only screen and (min-width:1024px) { .post-cards { gap: var(--row-gap-spacing-1024); } .post-cards .card { flex-basis: calc(50% - var(--row-spacing-1024) * 2); max-width: 50%; } .blog-action-container { margin-top: calc(var(--row-spacing-1024) + 10px); margin-bottom: var(--row-spacing-1024); } } @media only screen and (min-width: 1200px) { .card .card-action { bottom: calc(-1 * var(--font-copy-line-height-1200)/2 - var(--button-padding-top-bottom-920)); } } @media only screen and (min-width:1334px) { .post-cards { gap: var(--row-gap-spacing-1334); } .post-cards .card { flex-basis: calc(50% - var(--row-spacing-1334) * 2); } } @media only screen and (min-width: 1440px) { .card .card-action { bottom: calc(-1 * var(--font-copy-line-height-1440)/2 - var(--button-padding-top-bottom-920)); } } /* END Base Styles */ /* Row Styles */ .row { position: relative; padding-top: var(--row-spacing); padding-bottom: var(--row-spacing); } .row .inner-width { max-width: 1270px; width: 100%; display: flex; flex-direction: column; margin-left: auto; margin-right: auto; gap: var(--row-spacing); } .row .content-container { display: block; } .row .content-container *:first-child { margin-top: 0px; } .row .content-container *:last-child { margin-bottom: 0px; } .row .content-container img { width: 100%; display: block; margin: 0; } .row.bkg-white { background-color: var(--row-white-color); } .row.bkg-gray { background-color: var(--row-gray-color); background: radial-gradient(circle, var(--row-gray-lighter-color) 0%, var(--row-gray-color) 100%); } .row.bkg-green-bridge, .row.bkg-green { background-color: var(--row-gray-color); } .row.bkg-green-bridge { overflow: hidden; background: radial-gradient(circle at 15% 25%, var(--row-gray-lighter-color) 0%, var(--row-gray-color) 100%); } .row.bkg-green-bridge .fluid { z-index: 5; position: relative; } .row.bkg-green-bridge .bridge-container { position: absolute; z-index: 1; bottom: 0; right: 0; opacity: 0.45; } .row.bkg-green-bridge .bridge-container img { display: block; width: 100%; max-width: 1100px; } @media only screen and (min-width: 480px) { .row { padding-top: var(--row-spacing-480); padding-bottom: var(--row-spacing-480); } .row .inner-width { gap: var(--row-spacing-480); } } @media only screen and (min-width: 920px) { .row { padding-top: var(--row-spacing-920); padding-bottom: var(--row-spacing-920); } .row .inner-width { gap: var(--row-spacing-920); } .row.sidebar-enabled .content-container .inner-width { flex-direction: row; flex-wrap: nowrap; gap: calc(var(--row-spacing) * 2); align-items: flex-start; } .row.sidebar-enabled .content-container .inner-width .sections { flex-basis: var(--row-sidebar-width); min-width: var(--row-sidebar-width); align-self: flex-start; } .row.sidebar-enabled.sidebar-wide .content-container .inner-width .sections { flex-basis: var(--row-sidebar-wide-width); min-width: var(--row-sidebar-wide-width); } .row.sidebar-enabled .extra-content .content-container .inner-width .sections { width: 100%; flex-basis: 100%; } } @media only screen and (min-width: 1024px) { .row { padding-top: var(--row-spacing-1024); padding-bottom: var(--row-spacing-1024); } .row .inner-width { gap: var(--row-spacing-1024); } .row.sidebar-enabled .content-container .inner-width { gap: calc(var(--row-spacing-1024) * 2); } } @media only screen and (min-width: 1334px) { .row { padding-top: var(--row-spacing-1334); padding-bottom: var(--row-spacing-1334); } .row .inner-width { gap: var(--row-spacing-1334); } } /* END Row Styles */ /* Prefix/Suffix Content */ .extra-content { margin-bottom: var(--row-spacing); } .fluid + .fluid.extra-content { margin-bottom: 0px; margin-top: var(--row-spacing); } @media only screen and (min-width: 480px) { .extra-content { margin-bottom: var(--row-spacing-480); } .fluid + .fluid.extra-content { margin-bottom: 0px; margin-top: var(--row-spacing-480); } } @media only screen and (min-width: 920px) { .extra-content { margin-bottom: var(--row-spacing-920); } .fluid + .fluid.extra-content { margin-bottom: 0px; margin-top: var(--row-spacing-920); } } @media only screen and (min-width: 1024px) { .extra-content { margin-bottom: var(--row-spacing-1024); } .fluid + .fluid.extra-content { margin-bottom: 0px; margin-top: var(--row-spacing-1024); } } @media only screen and (min-width: 1334px) { .extra-content { margin-bottom: var(--row-spacing-1334); } .fluid + .fluid.extra-content { margin-bottom: 0px; margin-top: var(--row-spacing-1334); } } /* END Prefix/Suffix Content */ /* Section Styles */ /* Base Section Styles */ .section { margin-top: var(--row-spacing); margin-bottom: var(--row-spacing); } .section .content-container *:first-child { margin-top: 0px; } .section .content-container *:last-child { margin-bottom: 0px; } .section img { width: 100%; display: block; margin: 0; } h1 + .section, h2 + .section, h3 + .section, h4 + .section, h5 + .section, h6 + .section { margin-top: 20px; } @media only screen and (min-width: 480px) { .section { margin-top: var(--row-spacing-480); margin-bottom: var(--row-spacing-480); } h1 + .section, h2 + .section, h3 + .section, h4 + .section, h5 + .section, h6 + .section { margin-top: 25px; } } /* @media only screen and (min-width: 920px) { .section { margin-top: var(--row-spacing-920); margin-bottom: var(--row-spacing-920); } } @media only screen and (min-width: 1024px) { .section { margin-top: var(--row-spacing-1024); margin-bottom: var(--row-spacing-1024); } } @media only screen and (min-width: 1334px) { .section { margin-top: var(--row-spacing-1334); margin-bottom: var(--row-spacing-1334); } } */ /* END Base Section Styles */ /* Content Section Styles */ .section.section-content h1 + .gradient-line, .section.section-content h2 + .gradient-line, .section.section-content h3 + .gradient-line, .section.section-content h4 + .gradient-line, .section.section-content h5 + .gradient-line, .section.section-content h6 + .gradient-line, .sidebar-content h1 + .gradient-line, .sidebar-content h2 + .gradient-line, .sidebar-content h3 + .gradient-line, .sidebar-content h4 + .gradient-line, .sidebar-content h5 + .gradient-line, .sidebar-content h6 + .gradient-line { margin-top: -8px; } .sidebar-elements { width: 100%; } /* END Content Section Styles */ /* Image Section Styles */ .section.image-section { display: flex; flex-wrap: nowrap; gap: var(--row-spacing); } .section.image-section img { display: none; width: 100%; height: 100%; min-width: 0; } .section.image-section img:first-child { display: flex; } @media only screen and (min-width: 480px) { .section.image-section { gap: var(--row-spacing-480); } .section.image-section img { display: flex; } .section.image-section.image-section-cols-2 img:last-child, .section.image-section.image-section-cols-3 img:last-child { display: none; } } @media only screen and (min-width: 920px) { .section.image-section { gap: var(--row-spacing-920); } .section.image-section.image-section-cols-2 img:last-child, .section.image-section.image-section-cols-3 img:last-child { display: flex; } } @media only screen and (min-width: 1024px) { .section.image-section { gap: var(--row-spacing-1024); } } @media only screen and (min-width: 1334px) { .section.image-section { gap: var(--row-spacing-1334); } } /* END Image Section Styles */ /* Image Content Section Styles */ .section.image-content-section { display: flex; flex-wrap: wrap; gap: var(--row-spacing); } .image-content-section .images { display: flex; flex-wrap: wrap; gap: var(--row-spacing); } .image-content-section .images img { width: 100%; height: fit-content; min-width: 0; } @media only screen and (min-width: 480px) { .image-content-section .images { gap: var(--row-spacing-480); } .image-content-section .images img { flex-basis: calc(50% - var(--row-spacing-480)); flex-grow: 1; } } @media only screen and (min-width: 920px) { .section.image-content-section { flex-wrap: nowrap; gap: var(--row-spacing-920); } .image-content-section .images { gap: var(--row-spacing-920); } .section.image-content-section .images { flex-basis: 50%; min-width: 50%; flex-grow: 1; } .image-content-section .images img { height: fit-content; } .image-content-section .content { } } @media only screen and (min-width: 1024px) { .section.image-content-section { gap: var(--row-spacing-1024); } .image-content-section .images { gap: var(--row-spacing-1024); } } @media only screen and (min-width: 1334px) { .section.image-content-section { gap: var(--row-spacing-1334); } .image-content-section .images { gap: var(--row-spacing-1334); } } /* END Image Content Section Styles */ /* Blog Section Styles */ .section-blog { margin: 0; } .section-blog .card { position: relative; padding: 20px 20px calc(23px + var(--font-copy-line-height)/2 + var(--button-padding-top-bottom)) 20px; background-color: var(--body-background-color); box-shadow: none; } .section-blog .card-content p, .section-blog .card-action p { font-size: var(--font-copy-size); line-height: var(--font-copy-line-height); margin: 0; } .section-blog .card-featured-image img { border-radius: var(--button-border-radius); aspect-ratio: 3/2; object-fit: cover; } .section-blog .card-action .btn { padding: var(--blog-button-padding); } .section-blog .blog-action-container { justify-content: center; } .section-blog .blog-action-container p { justify-content: center; gap: 25px; } .section-blog .card.post-card .card-container h1 { font-size: var(--font-h1-smaller-size); line-height: var(--font-h1-smaller-lineheight); } .section-blog .card.post-card .card-container h2 { font-size: var(--font-h2-smaller-size); line-height: var(--font-h2-smaller-lineheight); } .section-blog .card.post-card .card-container h3 { font-size: var(--font-h3-smaller-size); line-height: var(--font-h3-smaller-lineheight); } .section-blog .card.post-card .card-container h4 { font-size: var(--font-h4-smaller-size); line-height: var(--font-h4-smaller-lineheight); } .section-blog .card.post-card .card-container h5 { font-size: var(--font-h5-smaller-size); line-height: var(--font-h5-smaller-lineheight); } .section-blog .card.post-card .card-container h6 { font-size: var(--font-h6-smaller-size); line-height: var(--font-h6-smaller-lineheight); } @media only screen and (min-width: 720px) { .section-blog .card.post-card .card-container h1 { font-size: var(--font-h1-smaller-size-720); line-height: var(--font-h1-smaller-lineheight-720); } .section-blog .card.post-card .card-container h2 { font-size: var(--font-h2-smaller-size-720); line-height: var(--font-h2-smaller-lineheight-720); } .section-blog .card.post-card .card-container h3 { font-size: var(--font-h3-smaller-size-720); line-height: var(--font-h3-smaller-lineheight-720); } .section-blog .card.post-card .card-container h4 { font-size: var(--font-h4-smaller-size-720); line-height: var(--font-h4-smaller-lineheight-720); } .section-blog .card.post-card .card-container h5 { font-size: var(--font-h5-smaller-size-720); line-height: var(--font-h5-smaller-lineheight-720); } .section-blog .card.post-card .card-container h6 { font-size: var(--font-h6-smaller-size-720); line-height: var(--font-h6-smaller-lineheight-720); } /* #DEV - remove note - this would normalize blog card font styles to the other cards, but it looks better to be slightly different here. */ /* .section-blog .card.post-card .card-container p, .section-blog .card.post-card .card-container ul, .section-blog .card.post-card .card-container ol, .section-blog .card.post-card .card-container li, .section-blog .card.post-card .card-action p { font-size: var(--font-copy-smaller-size-720); line-height: var(--font-copy-smaller-line-height-720); } */ } @media only screen and (min-width: 920px) { .section-blog .card-action .btn { padding: var(--blog-button-padding-920); } } @media only screen and (min-width: 1200px) { .section-blog .card.post-card .card-container h1 { font-size: var(--font-h1-smaller-size-1200); line-height: var(--font-h1-smaller-lineheight-1200); } .section-blog .card.post-card .card-container h2 { font-size: var(--font-h2-smaller-size-1200); line-height: var(--font-h2-smaller-lineheight-1200); } .section-blog .card.post-card .card-container h3 { font-size: var(--font-h3-smaller-size-1200); line-height: var(--font-h3-smaller-lineheight-1200); } .section-blog .card.post-card .card-container h4 { font-size: var(--font-h4-smaller-size-1200); line-height: var(--font-h4-smaller-lineheight-1200); } .section-blog .card.post-card .card-container h5 { font-size: var(--font-h5-smaller-size-1200); line-height: var(--font-h5-smaller-lineheight-1200); } .section-blog .card.post-card .card-container h6 { font-size: var(--font-h6-smaller-size-1200); line-height: var(--font-h6-smaller-lineheight-1200); } /* #DEV - remove note - this would normalize blog card font styles to the other cards, but it looks better to be slightly different here. */ /* .section-blog .card.post-card .card-container p, .section-blog .card.post-card .card-container ul, .section-blog .card.post-card .card-container ol, .section-blog .card.post-card .card-container li, .section-blog .card.post-card .card-action p { font-size: var(--font-copy-smaller-size-1200); line-height: var(--font-copy-smaller-line-height-1200); } */ } /* Container Query Styles */ @supports (contain: layout inline-size) { .post-cards-container { container-name: post-cards; container-type: inline-size; } } @container post-cards (width >= 551px) { .card { padding: var(--card-padding-600); } .card .card-content { flex-direction: row; gap: var(--card-gap-600); } .card .card-content .card-featured-image { display: flex; flex-basis: 50%; max-width: var(--card-featured-image-max-width); flex-shrink: 1; margin-top: 5px; } .card .card-content .card-featured-image img { align-self: flex-start; width: 100%; height: auto; } .card .card-content .post-content-container { flex-basis: calc(50% - var(--card-gap-600)); margin-top: 0px; flex-grow: 1; } } @container post-cards (width >= 920px) { .post-cards { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } .card .card-content .card-featured-image { max-width: var(--card-featured-image-max-width-desktop); } .section-blog .card { padding: 20px 25px calc(23px + var(--font-copy-line-height)/2 + var(--button-padding-top-bottom)) 25px; } } /* END Container Query Styles */ /* Fallback Styles */ @media only screen and (min-width: 902px) { /* #DEV - @container post-cards (width >= 551px) fallback, duplicate those styles here before launch, adjust media min-width as needed */ } @media only screen and (min-width: 1445px) { /* #DEV - @container post-cards (width >= 920px) fallback, duplicate those styles here before launch, adjust media min-width as needed */ } /* END Fallback Styles */ /* END Blog Section Styles */ /* Testimonials Section Styles */ .section-testimonials { margin: 0px; } .section-testimonials .post-cards { display: grid; } .section-testimonials .card { box-shadow: none; padding: 45px; align-self: stretch; } .section-testimonials .card::before, .section-testimonials .card::after { content: "”"; font-size: 45pt; position: absolute; font-family: "source-serif-pro", serif; color: var(--main-color); font-weight: 700; line-height: 0pt; } .section-testimonials .card::before { top: 10px; left: 10px; transform: rotate(180deg); } .section-testimonials .card::after { bottom: 10px; right: 10px; } .section-testimonials .post-cards .card-container p { margin: 0px; } .section-testimonials .post-cards .card-container { gap: var(--font-paragraph-margin-top); } .testimonials-action-container { margin-top: var(--row-spacing-480); justify-content: center; } .post-cards.columns-1 { justify-items: center; } @media only screen and (min-width: 720px) { .post-cards.columns-2, .post-cards.columns-3, .post-cards.columns-4 { grid-template-columns: repeat(2, 1fr); } .post-cards.columns-2 .card, .post-cards.columns-3 .card, .post-cards.columns-4 .card { max-width: unset; } } @media only screen and (min-width: 920px) { .post-cards.columns-1 .card { max-width: 50%; } } @media only screen and (min-width: 1024px) { .post-cards.columns-3, .post-cards.columns-4 { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 1200px) { .section-testimonials .post-cards p { font-size: var(--font-copy-size-720); line-height: var(--font-copy-line-height-720); } } @media only screen and (min-width: 1440px) { .post-cards.columns-4 { grid-template-columns: repeat(4, 1fr); } } /* END Testimonials Section Styles */ /* END Section Styles */ /* Content Row Sidebar Styles */ .card.sidebar-card { margin-bottom: var(--card-margin-bottom); } .card.sidebar-card:has(.card-action) { padding: var(--card-padding) var(--card-padding) calc(var(--card-padding) + var(--font-copy-line-height)/2 + var(--button-padding-top-bottom)) var(--card-padding); margin-bottom: calc(var(--card-margin-bottom) + var(--font-copy-line-height)/2); } .card.sidebar-card .card-container h1:first-child:has(.allcaps), .card.sidebar-card .card-container h2:first-child:has(.allcaps), .card.sidebar-card .card-container h3:first-child:has(.allcaps), .card.sidebar-card .card-container h4:first-child:has(.allcaps), .card.sidebar-card .card-container h5:first-child:has(.allcaps), .card.sidebar-card .card-container h6:first-child:has(.allcaps) { margin-top: -6px; } .card.sidebar-card:last-child { margin-bottom: 0px; } .card.sidebar-card:has(.card-action):last-child { margin-bottom: calc(var(--font-copy-line-height)/2 + var(--button-padding-top-bottom)); } .card.sidebar-card .card-container { display: block; } .card.sidebar-card .card-container .gradient-line { margin-top: -13px; margin-bottom: -3px; } .card.sidebar-card .card-container h1 { font-size: var(--font-h1-smaller-size); line-height: var(--font-h1-smaller-lineheight); } .card.sidebar-card .card-container h2 { font-size: var(--font-h2-smaller-size); line-height: var(--font-h2-smaller-lineheight); } .card.sidebar-card .card-container h3 { font-size: var(--font-h3-smaller-size); line-height: var(--font-h3-smaller-lineheight); } .card.sidebar-card .card-container h4 { font-size: var(--font-h4-smaller-size); line-height: var(--font-h4-smaller-lineheight); } .card.sidebar-card .card-container h5 { font-size: var(--font-h5-smaller-size); line-height: var(--font-h5-smaller-lineheight); } .card.sidebar-card .card-container h6 { font-size: var(--font-h6-smaller-size); line-height: var(--font-h6-smaller-lineheight); } @media only screen and (min-width: 480px) { .card.sidebar-card { margin-bottom: var(--card-margin-bottom-480); } .card.sidebar-card:has(.card-action) { margin-bottom: calc(var(--card-margin-bottom-480) + var(--font-copy-line-height)/2); } .card.sidebar-card:last-child { margin-bottom: 0px; } .card.sidebar-card:has(.card-action):last-child { margin-bottom: calc(var(--font-copy-line-height)/2 + var(--button-padding-top-bottom)); } } @media only screen and (min-width: 720px) { .card.sidebar-card .card-container h1, .accordion h1 { font-size: var(--font-h1-smaller-size-720); line-height: var(--font-h1-smaller-lineheight-720); } .card.sidebar-card .card-container h2, .accordion h2 { font-size: var(--font-h2-smaller-size-720); line-height: var(--font-h2-smaller-lineheight-720); } .card.sidebar-card .card-container h3, .accordion h3 { font-size: var(--font-h3-smaller-size-720); line-height: var(--font-h3-smaller-lineheight-720); } .card.sidebar-card .card-container h4, .accordion h4 { font-size: var(--font-h4-smaller-size-720); line-height: var(--font-h4-smaller-lineheight-720); } .card.sidebar-card .card-container h5, .accordion h5 { font-size: var(--font-h5-smaller-size-720); line-height: var(--font-h5-smaller-lineheight-720); } .card.sidebar-card .card-container h6, .accordion h6 { font-size: var(--font-h6-smaller-size-720); line-height: var(--font-h6-smaller-lineheight-720); } .card.sidebar-card .card-container p, .card.sidebar-card .card-container ul, .card.sidebar-card .card-container ol, .card.sidebar-card .card-container li, .card.sidebar-card .card-action p, .accordion p, .accordion ul, .accordion ol, .accordion li { font-size: var(--font-copy-smaller-size-720); line-height: var(--font-copy-smaller-line-height-720); } } @media only screen and (min-width: 920px) { .card.sidebar-card { padding: var(--card-padding-920); } .card.sidebar-card:has(.card-action) { padding: var(--card-padding-920) var(--card-padding-920) calc(var(--card-padding-920) + var(--font-copy-line-height)/2 + var(--button-padding-top-bottom-920)) var(--card-padding-920); } .card.sidebar-card .card-container h1:first-child:has(.allcaps), .card.sidebar-card .card-container h2:first-child:has(.allcaps), .card.sidebar-card .card-container h3:first-child:has(.allcaps), .card.sidebar-card .card-container h4:first-child:has(.allcaps), .card.sidebar-card .card-container h5:first-child:has(.allcaps), .card.sidebar-card .card-container h6:first-child:has(.allcaps) { margin-top: -10px; } } @media only screen and (min-width: 1200px) { .card.sidebar-card .card-container h1, .card.sidebar-card .card-container h2, .card.sidebar-card .card-container h3, .card.sidebar-card .card-container h4, .card.sidebar-card .card-container h5, .card.sidebar-card .card-container h6 { margin-top: var(--font-headline-margin-top); margin-bottom: var(--font-headline-margin-bottom); } .card.sidebar-card .card-container p, .card.sidebar-card .card-container ul, .card.sidebar-card .card-container ol, .card.sidebar-card .card-container li { margin-top: var(--font-paragraph-margin-top); margin-bottom: var(--font-paragraph-margin-bottom); } .card.sidebar-card .card-container ul li, .card.sidebar-card .card-container ol li { margin-top: calc(var(--font-paragraph-margin-top) / 2); margin-bottom: calc(var(--font-paragraph-margin-top) / 2); } .card.sidebar-card .card-container p:first-child, .card.sidebar-card .card-container ul:first-child, .card.sidebar-card .card-container ol:first-child, .card.sidebar-card .card-container li:first-child, .card.sidebar-card .card-container h1:first-child, .card.sidebar-card .card-container h2:first-child, .card.sidebar-card .card-container h3:first-child, .card.sidebar-card .card-container h4:first-child, .card.sidebar-card .card-container h5:first-child, .card.sidebar-card .card-container h6:first-child { margin-top: 0px; } .card.sidebar-card .card-container p:last-child, .card.sidebar-card .card-container ul:last-child, .card.sidebar-card .card-container ol:last-child, .card.sidebar-card .card-container li:last-child, .card.sidebar-card .card-container h1:last-child, .card.sidebar-card .card-container h2:last-child, .card.sidebar-card .card-container h3:last-child, .card.sidebar-card .card-container h4:last-child, .card.sidebar-card .card-container h5:last-child, .card.sidebar-card .card-container h6:last-child { margin-bottom: 0px; } .card.sidebar-card .card-container h1, .accordion h1 { font-size: var(--font-h1-smaller-size-1200); line-height: var(--font-h1-smaller-lineheight-1200); } .card.sidebar-card .card-container h2, .accordion h2 { font-size: var(--font-h2-smaller-size-1200); line-height: var(--font-h2-smaller-lineheight-1200); } .card.sidebar-card .card-container h3, .accordion h3 { font-size: var(--font-h3-smaller-size-1200); line-height: var(--font-h3-smaller-lineheight-1200); } .card.sidebar-card .card-container h4, .accordion h4 { font-size: var(--font-h4-smaller-size-1200); line-height: var(--font-h4-smaller-lineheight-1200); } .card.sidebar-card .card-container h5, .accordion h5 { font-size: var(--font-h5-smaller-size-1200); line-height: var(--font-h5-smaller-lineheight-1200); } .card.sidebar-card .card-container h6, .accordion h6 { font-size: var(--font-h6-smaller-size-1200); line-height: var(--font-h6-smaller-lineheight-1200); } .card.sidebar-card .card-container p, .card.sidebar-card .card-container ul, .card.sidebar-card .card-container ol, .card.sidebar-card .card-container li, .card.sidebar-card .card-action p, .accordion p, .accordion ul, .accordion ol, .accordion li { font-size: var(--font-copy-smaller-size-1200); line-height: var(--font-copy-smaller-line-height-1200); } } /* END Content Row Sidebar Styles */ /* Accordion Styles */ .accordion-title { cursor: pointer; } .accordion-title.ui-state-active { cursor: default; } .accordion { border: var(--accordion-border); background-color: var(--accordion-background-color); } .accordion-title { display: flex; flex-wrap: nowrap; background-color: var(--accordion-title-background-color); } .accordion-title .accordion-button { display: flex; align-items: center; justify-content: center; min-width: var(--accordion-button-min-width); background-color: var(--main-color); } .accordion-title .accordion-button::after { content: "+"; font-weight: 700; color: var(--button-secondary-color); } .accordion-title.ui-state-active .accordion-button::after { content: "-"; } .accordion-title .accordion-heading { flex-grow: 1; padding: var(--accordion-inner-padding); } .accordion-content { padding: var(--accordion-inner-padding); border-width: 3px; border-style: solid; border-image: linear-gradient(to right, var(--secondary-color-true), var(--page-background-color)) 1; background-color: var(--accordion-content-background-color); border-left: 0px; border-right: 0px; } @media only screen and (min-width: 920px) { .accordion-title .accordion-heading { padding: var(--accordion-inner-padding-920); } .accordion-content { padding: var(--accordion-inner-padding-920); } } /* Border Radius Styles */ .accordion { border-radius: var(--accordion-border-radius); overflow: hidden; } /* END Border Radius Styles */ /* END Accordion Styles */ /* Specialty Program Styles */ .row.bkg-image { overflow: hidden; } .row.bkg-image .inner-width { display: flex; justify-content: center; } .row.bkg-image .section-bkg-image { max-width: 1270px; container-type: normal; } .section-bkg-image { margin: 0; display: flex; flex-direction: column-reverse; gap: calc(var(--row-spacing) * 2); } .row.bkg-image .fluid .content-container { position: relative; z-index: 999; width: 100%; } .section-specialty-program .card-container { gap: 20px; } .section-bkg-image .post-card { position: relative; z-index: 9999; display: block; background-color: white; padding: 30px 30px calc(33px + var(--font-copy-line-height)/2 + var(--button-padding-top-bottom)) 30px; box-shadow: none; margin-bottom: 20px; } .section-bkg-image .card-content { display: block; margin: 0px; } .section-bkg-image .card-action { margin-right: 5px; } .specialty-program-logo { max-width: 530px; position: relative; z-index: 999; align-self: baseline; } .specialty-program-logo img { position: relative; z-index: 999; } .row.bkg-image.bkg-image-row { background-position: 50% 20%; background-size: cover; } .row.bkg-image.bkg-image-row::before { content: ""; background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); position: absolute; z-index: 5; top: 0px; height: 100%; width: 100%; } .specialty-program-logo-hero::after { content: ""; position: absolute; z-index: 5; bottom: 0px; height: 200%; width: 300%; top: -50%; left: -100%; background: radial-gradient(white 0%, white 15%, rgba(255, 255, 255, 0) 50%); } .specialty-program-logo-hero img { position: relative; z-index: 6; } @media only screen and (min-width: 720px) { .section-bkg-image .post-card { padding: 30px 40px calc(33px + var(--font-copy-line-height-720)/2 + var(--button-padding-top-bottom)) 40px; margin-bottom: 22px; } } @media only screen and (min-width: 920px) { .section-bkg-image { flex-direction: row; } .section-bkg-image.logo-left { flex-direction: row-reverse; } .row.bkg-image.bkg-image-row::before { content: none; } .specialty-program-logo::after, .specialty-program-logo-hero::after { content: ""; position: absolute; z-index: 5; bottom: 0px; height: 450%; width: 350%; top: -150%; left: -120%; background: radial-gradient(white 0%, white 15%, rgba(255, 255, 255, 0) 50%); } .section-bkg-image .card { max-width: calc(var(--row-sidebar-width) - var(--row-spacing-920) - (var(--card-padding-920) * 2)); } .sidebar-wide .section-bkg-image .card { max-width: calc(var(--row-sidebar-wide-width) - var(--row-spacing-920) - (var(--card-padding-920) * 2)); } } @media only screen and (min-width: 1024px) { .section-bkg-image { gap: calc(var(--row-spacing-1024) * 2); } } @media only screen and (min-width: 1200px) { .section-bkg-image .post-card { padding: 30px 40px calc(33px + var(--font-copy-line-height-1200)/2 + var(--button-padding-top-bottom-920)) 40px; margin-bottom: 23px; } } @media only screen and (min-width: 1440px) { .section-bkg-image .post-card { flex-shrink: 2; } .section-bkg-image .post-card { padding: 30px 40px calc(33px + var(--font-copy-line-height-1440)/2 + var(--button-padding-top-bottom-920)) 40px; margin-bottom: 25px; } } /* END Specialty Program Styles */ /* Background Image Content Styles */ .row.bkg-image.cutout-image-row .content-container { display: flex; justify-content: center; } .row.bkg-image.cutout-image-row .inner-width { justify-content: flex-start; flex-direction: column; gap: 0px; } .row.bkg-image.cutout-image-row .section .content, .row.bkg-image.cutout-image-row .section { display: block; margin: 0; } .row.bkg-image.cutout-image-row .section .content p, .row.bkg-image.cutout-image-row .section .content h1 { margin: 0; } .row.bkg-image.cutout-image-row .bkg-image { position: relative; bottom: calc(0px - var(--row-spacing)); } .row.bkg-image.cutout-image-row .button p { display: flex; flex-direction: column; gap: 10px; } .row.bkg-image.cutout-image-row .button p a { align-self: baseline; } .row.bkg-image.cutout-image-row .button .btn:nth-child(even) { background-color: var(--main-color); border-color: var(--main-color); } .row.bkg-image.cutout-image-row .button .btn:nth-child(even):hover, .row.bkg-image.cutout-image-row .button .btn:nth-child(even):focus { background-color: var(--button-secondary-color); color: var(--main-color); } .bkg-image-row .card-content h1 + .gradient-line, .bkg-image-row .card-content h2 + .gradient-line, .bkg-image-row .card-content h3 + .gradient-line, .bkg-image-row .card-content h4 + .gradient-line, .bkg-image-row .card-content h5 + .gradient-line, .bkg-image-row .card-content h6 + .gradient-line { margin-top: -8px; } @media only screen and (min-width: 480px) { .row.bkg-image.cutout-image-row .bkg-image { bottom: calc(0px - var(--row-spacing-480)); } } @media only screen and (min-width: 720px) { .row.bkg-image.cutout-image-row .button p { gap: 20px; } } @media only screen and (min-width: 920px) { .row.bkg-image.cutout-image-row .sections { flex-basis: var(--row-sidebar-width); min-width: var(--row-sidebar-width); width: var(--row-sidebar-width); } .row.bkg-image.cutout-image-row.sidebar-wide .sections { flex-basis: var(--row-sidebar-wide-width); min-width: var(--row-sidebar-wide-width); width: var(--row-sidebar-wide-width); } .row.bkg-image.cutout-image-row .inner-width { margin-bottom: 0px; } .row.bkg-image.cutout-image-row .bkg-image { bottom: calc(0px - var(--row-spacing-920)); left: var(--row-sidebar-width); height: calc(100% + (var(--row-spacing-920) * 1.5)); width: auto; position: absolute; object-fit: contain; } .row.bkg-image.cutout-image-row.sidebar-wide .bkg-image { left: var(--row-sidebar-wide-width); } } @media only screen and (min-width: 1024px) { .row.bkg-image.cutout-image-row .bkg-image { bottom: calc(0px - var(--row-spacing-1024)); } .row.bkg-image.cutout-image-row .bkg-image { height: calc(100% + (var(--row-spacing-1024) * 1.5)); } } @media only screen and (min-width: 1200px) { .row.bkg-image.cutout-image-row .inner-width { gap: 60px; } .row.bkg-image.cutout-image-row .section { gap: 25px; } .row.bkg-image.cutout-image-row .section .content, .row.bkg-image.cutout-image-row .button p { gap: 25px; margin-bottom: 0px; } .bkg-image-row .card-content h1 + .gradient-line, .bkg-image-row .card-content h2 + .gradient-line, .bkg-image-row .card-content h3 + .gradient-line, .bkg-image-row .card-content h4 + .gradient-line, .bkg-image-row .card-content h5 + .gradient-line, .bkg-image-row .card-content h6 + .gradient-line { margin-top: -10px; } } @media only screen and (min-width: 1334px) { .row.bkg-image.cutout-image-row .bkg-image { bottom: calc(0px - var(--row-spacing-1334)); } .row.bkg-image.cutout-image-row .bkg-image { height: calc(100% + (var(--row-spacing-1334) * 1.5)); } } @media only screen and (min-width: 1440px) { .row.bkg-image.cutout-image-row .section, .row.bkg-image.cutout-image-row .section .content, .row.bkg-image.cutout-image-row .button p { gap: 30px; } .row.bkg-image.cutout-image-row .inner-width { gap: 80px; } } /* END Background Image Content Styles */ /* Video Section Styles */ .section-video { text-align: center; } .frame { display: flex; position: relative; flex-direction: column; } .frame img { position: absolute; left: 0; top: 0; width: 100%; z-index: 2; margin: 0; transition: all 0.3s; } .frame:hover img, .frame:focus img { left: -5%; top: -5%; width: 110%; } .frame .frame-content { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; } .frame a { display: flex; flex-direction: column; justify-content: center; z-index: 4; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; align-content: center; text-decoration: none; } .frame:hover a, .frame:focus a { text-decoration: underline; color: var(--button-secondary-color); } .frame a img { position: relative; top: unset; left: unset; display: block; width: 60px; height: auto; margin: 0; padding: 0; align-self: center; } .row .frame a img { width: 60px; } .frame:hover a img, .frame:focus a img { left: 0; top: 0; width: 60px; } .frame a p { font-weight: 800; color: var(--button-secondary-color); width: 90%; margin-left: auto; margin-right: auto; } .frame .frame-placeholder { width: 100%; padding-bottom: 56.25%; } .frame .frame-overlay { background-color: var(--main-color); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; opacity: 0.85; } @media only screen and (min-width: 920px) { .row .frame a img { width: 100px; } } /* Frame Video Modal Styles */ .frame .frame-modal { display: none; } .blocker { z-index: 1000 !important; background-color: rgba(255,255,255,0.75) !important; } .frame-modal.modal { width: auto; width: 90%; padding: 20px; max-width: unset; position: relative; box-shadow: 0 0 30px rgba(0,0,0,0.5); } .frame-modal.modal iframe { width: calc(100% - 40px); height: calc(100% - 40px); position: absolute; top: 20px; left: 20px; z-index: 2000 !important; } .frame-modal.modal .frame-placeholder { width: 100%; padding-bottom: 56.25%; } @media only screen and (min-width: 1440px) { .frame-modal.modal { width: 75%; } } /* END Frame Video Modal Styles */ /* END Video Section Styles */ /* Location Search Row Styles */ .row.location-search { padding-bottom: 0px; } .row.location-search.slide-map .bh-sl-container .bh-sl-map-container { margin-top: 0px; } .row.location-search.slide-map .location-search-container { margin-bottom: var(--row-spacing); } .row.location-search .fluid, .row.location-search .inner-width { width: 100%; max-width: none; } .section-map { display: flex; flex-direction: column; justify-content: center; } .location-search-container { display: flex; flex-direction: column; gap: 20px; width: 90%; max-width: 1270px; margin-left: auto; margin-right: auto; } .row .bh-sl-container .bh-sl-map-container { margin-top: var(--row-spacing); background-color: #dbdbdb; } .frame-locations { width: 100%; } .locations-content { width: 90%; margin-left: auto; margin-right: auto; } .location-search-container h2, .location-search-container h1, .location-search-container p, .location-search-container button { margin: 0; } .location-search-container button p { color: var(--button-secondary-color); font-weight: var(--font-bold-font-weight); } .location-search-container button:hover p, .location-search-container button:focus p { color: var(--button-main-color); } .search-bar { display: flex; flex-wrap: wrap; container-type: inline-size; container-name: search-bar; gap: var(--font-paragraph-margin-bottom); } .search-bar .input-container { position: relative; display: flex; flex-grow: 1; } .search-bar input { border: 1px solid var(--font-body-text-color); flex-grow: 1; padding: 15px; color: var(--font-body-text-color); font-size: var(--font-copy-size); line-height: var(--font-copy-line-height); min-width: 260px; border-radius: var(--button-border-radius); } .search-bar input:placeholder-shown { font-style: italic; font-size: var(--font-copy-size); line-height: var(--font-copy-line-height); } /* .search-bar .input-container::after { content: ""; width: 100%; height: 3px; background-image: linear-gradient(to right, var(--secondary-color) 40%, rgb(255, 255, 255, 0) 100%); position: absolute; bottom: 0; } */ .search-bar .btn { padding-left: 35px; padding-right: 35px; } .section.full-map-big.bh-sl-container .bh-sl-map, .section.full-map-big.bh-sl-container .bh-sl-loc-list { height: 770px; } .section.bh-sl-container .bh-sl-loc-list { overflow-y: scroll; max-height: 50vh; } /* DISABLING LOCATION SEARCH FILTER, UNCOMMENT TO ENABLE .location-search-container .bh-sl-filters-container { display: block; float: none; clear: none; margin-top: 0px; margin-bottom: 0px; } .location-search-container ul.bh-sl-filters { width: 100%; float: none; display: flex; flex-direction: column; } .location-search-container .bh-sl-filters-container .bh-sl-filters { margin: var(--font-paragraph-margin-top) 0px 0px 0px; } .location-search-container .bh-sl-filters-container .bh-sl-filters li { margin: 0; padding: 0; display: flex; } .location-search-container .bh-sl-filters-container .bh-sl-filters li label { cursor: pointer; } .location-search-container .bh-sl-filters-container .bh-sl-filters li:first-child label { padding-top: 0px; } .location-search-container .bh-sl-filters-container .bh-sl-filters li label { display: flex; align-items: center; padding: 10px 0px; color: var(--main-color); } .location-search-container .bh-sl-filters-container .bh-sl-filters li label input[type="checkbox"] { border: 2px solid var(--main-color); margin: 0; margin-right: 15px; width: 20px; height: 20px; min-width: unset; max-width: 20px; } .location-search-container .bh-sl-filters-container .bh-sl-filters li label input span { display: flex; flex-grow: 1; } */ /* DISABLING LOCATION SEARCH FILTER, UNCOMMENT TO ENABLE @media only screen and (min-width: 480px) { .location-search-container ul.bh-sl-filters { flex-direction: row; } .location-search-container .bh-sl-filters-container .bh-sl-filters { max-width: 500px; } .location-search-container .bh-sl-filters-container .bh-sl-filters li label { padding: 0px; } } @media only screen and (min-width: 1200px) { .search-bar { gap: 35px; } .location-search-container .bh-sl-filters-container .bh-sl-filters { margin: var(--font-paragraph-margin-top-1200) 0px 0px 0px; } } */ /* Location List Styles */ .row .bh-sl-container .bh-sl-loc-list ul li { padding: 0; border: 1px solid #dbdbdb; } .row .bh-sl-container .bh-sl-loc-list .list-details { width: 100%; margin: 0; } .row .bh-sl-container .bh-sl-loc-list .list-details .list-content { padding: 0; } .row .list-content .text-content { padding: 20px; display: flex; flex-direction: column; gap: 15px; } .text-content strong { color: var(--secondary-color); } .text-content .btn strong { color: var(--button-secondary-color); } .text-content .btn:hover strong, .text-content .btn:focus strong { color: var(--button-main-color); } .row .bh-sl-container .bh-sl-map-container .btn:hover { text-decoration: none; } .row .list-content .text-content h3, .row .list-content .text-content p { margin: 0; } .row .list-content .text-content p { font-size: var(--font-copy-size); line-height: var(--font-copy-line-height); } .location-featured-image img { width: 100%; height: 100%; object-fit: cover; } .row .bh-sl-container .bh-sl-loc-list .list-details .list-content, .row .bh-sl-container .bh-sl-loc-list .list-details { container-type: inline-size; container-name: location-list; } .location-featured-image { container-type: inline-size; container-name: location-featured-image; } .row .location-featured-image img { display: none; } @container location-list (min-width: 450px) { .row .bh-sl-container .bh-sl-loc-list .list-details .list-content { display: flex; } .row .list-content .text-content { flex-basis: 35%; flex-grow: 1; flex-shrink: 1; } .row .location-featured-image img { display: block; } } @container location-list (min-width: 600px) { .location-featured-image { flex-grow: 1; flex-shrink: 0; } } @media only screen and (min-width: 480px) { .row .bh-sl-container .bh-sl-map-container { margin-top: var(--row-spacing-480); } .row.location-search.slide-map .location-search-container { margin-bottom: var(--row-spacing-480); } } @media only screen and (min-width: 720px) { .search-bar input:placeholder-shown, .search-bar input { font-size: var(--font-copy-size-720); line-height: var(--font-copy-line-height-720); } } @media only screen and (min-width: 920px) { .row .bh-sl-container .bh-sl-map-container { margin-top: var(--row-spacing-920); } .row.location-search.slide-map .location-search-container { margin-bottom: var(--row-spacing-920); } /* DISABLING LOCATION SEARCH FILTER, COMMENT THIS SELECTOR TO ENABLE - */ .row.location-search .search-bar button#bh-sl-submit { margin-left: calc(-1 * var(--font-paragraph-margin-bottom) - var(--button-border-radius)); border-radius: var(--button-border-radius); border-top-left-radius: 0px; border-bottom-left-radius: 0px; z-index: 2; } } @media only screen and (min-width: 1024px) { .row .bh-sl-container .bh-sl-map-container { display: flex; flex-direction: row-reverse; } .locations-content { margin-right: 0; } .row .bh-sl-container .bh-sl-loc-list { width: 100%; } .row .bh-sl-container .bh-sl-map { width: 100%; flex-basis: 100%; } .row .bh-sl-container .bh-sl-map-container { margin-top: var(--row-spacing-1024); } .row.location-search.slide-map .location-search-container { margin-bottom: var(--row-spacing-1024); } .section.bh-sl-container .bh-sl-loc-list { max-height: unset; } } @media only screen and (min-width: 1200px) { .location-search-container { gap: 35px; } .row .list-content .text-content h3 { font-size: var(--font-h3-size-1200); line-height: var(--font-h3-line-height-1200); } .search-bar input:placeholder-shown, .search-bar input { font-size: var(--font-copy-size-1200); line-height: var(--font-copy-line-height-1200); } .row .bh-sl-container .bh-sl-map-container { margin-top: var(--row-spacing-1200); } .row.location-search.slide-map .location-search-container { margin-bottom: var(--row-spacing-1200); } } @media only screen and (min-width: 1334px) { .row .bh-sl-container .bh-sl-map-container { margin-top: var(--row-spacing-1334); } .row.location-search.slide-map .location-search-container { margin-bottom: var(--row-spacing-1334); } } @media only screen and (min-width: 1440px) { .search-bar input:placeholder-shown, .search-bar input { font-size: var(--font-copy-size-1440); line-height: var(--font-copy-line-height-1440); } .locations-content { max-width: 721px; } } /* END Location List Styles */ /* Location Info Window Styles */ .row .gm-style-iw.gm-style-iw-c { display: flex; flex-direction: row-reverse; min-width: 300px !important; } .row .gm-style-iw-chr { position: absolute; } .bh-sl-container .bh-sl-map-container .location-btn a { color: var(--button-secondary-color); font-weight: var(--font-bold-font-weight); } .bh-sl-container .bh-sl-map-container .location-btn a:hover, .bh-sl-container .bh-sl-map-container .location-btn a:focus { color: var(--button-main-color); } .location-details, .location-btn a { font-size: var(--font-copy-size); line-height: var(--font-copy-line-height); } .bh-sl-container .location-details a { color: var(--main-color); text-decoration: underline; } .bh-sl-container .bh-sl-map-container a.btn { color: var(--page-background-color); } .bh-sl-container .bh-sl-map-container a.btn:hover, .bh-sl-container .bh-sl-map-container a.btn:focus { color: var(--secondary-color); } .bh-sl-container .location-details a:hover, .bh-sl-container .location-details a:focus { color: var(--secondary-color); } .row .content-container .location-name-infowindow { margin-top: 10px; width: calc(100% - 30px); } .location-name-infowindow, .location-details, .location-btn { margin-top: 10px; margin-bottom: 10px; } @media only screen and (min-width: 1200px) { .location-name-infowindow { font-size: var(--font-h4-size-1200); line-height: var(--font-h4-lineheight-1200); } } /* END Location Info Window Styles */ /* Disable Location Search Filter - DISABLING LOCATION SEARCH FILTER, UNCOMMENT TO ENABLE */ .location-search-container .bh-sl-filters-container { display: none !important; } /* END Disable Location Search Filter */ /* END Location Search Row Styles */ /* Ninja Forms Styles */ .nf-form-fields-required { display: none; } .row .nf-after-field .nf-error-msg { margin-top: 15px; padding-left: 12px; font-style: italic; } .row .nf-after-form-content { padding-left: 5px; margin-top: 15px; font-style: italic; } .row .nf-form-cont { margin-top: var(--font-headline-margin-bottom); } .row .nf-form-cont .nf-form-content nf-fields-wrap { display: flex; flex-direction: column; gap: 15px; } .row .nf-form-cont .nf-form-content .nf-field, .row .nf-after-field { container-type: inline-size; container-name: nf-field; } .row .nf-form-cont .nf-form-content .field-wrap { display: flex; } @container nf-field (min-width: 400px) { .row .nf-form-cont .nf-form-content .field-wrap { flex-flow: row; } .row .nf-form-cont .nf-form-content .field-wrap.submit-wrap { flex-flow: column; } .row .nf-form-cont .nf-form-content .field-wrap.textarea-wrap { flex-flow: column; } .row .nf-form-cont .nf-form-content .field-wrap .nf-field-label { flex-basis: 30%; margin: 0 !important; } .row .nf-form-cont .nf-form-content .field-wrap.textarea-wrap .nf-field-label { margin-bottom: 15px !important; align-self: baseline; } .row .nf-error-wrap { display: flex; flex-flow: row; } .row .nf-error-wrap::before { content: ""; width: 10px; height: 0px; background-color: transparent; border-radius: 50%; flex-basis: 30%; } .row .nf-after-field .nf-error-msg { width: 100%; margin-right: 0px; } } .row .nf-form-cont .nf-form-content .nf-field-label { align-self: center; } .row .nf-form-cont .nf-form-content .field-wrap.submit-wrap .nf-field-label { display: none; } .row .nf-form-cont .nf-form-content .nf-field-label label { font-size: var(--font-copy-size); line-height: var(--font-copy-line-height); color: var(--font-body-text-color); font-weight: normal; display: flex; } .row .nf-form-cont .nf-form-content .nf-field-element input:placeholder-shown, .row .nf-form-cont .nf-form-content .nf-field-element textarea:placeholder-shown { font-style: italic; background: white; border: 1px solid var(--font-body-text-color); color: var(--font-body-text-color); border-radius: var(--button-border-radius); } .row .nf-form-cont .nf-form-content .nf-field-element select { border: 1px solid var(--font-body-text-color); border-radius: var(--button-border-radius); } .row .nf-form-content .list-select-wrap .nf-field-element > div { border-radius: var(--button-border-radius); } .row .nf-form-content .list-select-wrap .nf-field-element > div { background: white; } .row .nf-form-cont .nf-form-content .nf-field-element select:has(option:first-child:checked) { font-style: italic; } .row .nf-form-content input:not([type="button"]) { background: white; border-radius: var(--button-border-radius); } .row .nf-form-cont .nf-form-content .nf-field-element { position: relative; } /* .row .nf-form-cont .nf-form-content .nf-field-element::after { content: ""; width: 100%; height: 3px; background-image: linear-gradient(to right, var(--secondary-color) 40%, rgb(255, 255, 255, 0) 100%); position: absolute; bottom: 0; left: 0; z-index: 2; } */ .row .nf-form-cont .nf-form-content .nf-error.field-wrap .nf-field-element::after, .row .nf-form-cont .nf-form-content .hidden-container .nf-field-element::after { content: none; } /* .row .nf-error.field-wrap .nf-field-element::after, .row .nf-pass.field-wrap .nf-field-element::after { top: unset; } */ .row .nf-pass.field-wrap.date-wrap .nf-field-element::after { top: 0px; } /* Submit Button Styles */ .row .nf-form-content .submit-wrap .nf-field-element { margin-top: 15px; } .row .nf-form-content .submit-wrap input { transition: background 0.3s, color 0.3s; padding: var(--button-padding); border: 2px solid var(--button-main-color); border-radius: var(--button-border-radius); background-color: var(--button-main-color); color: var(--button-secondary-color); font-weight: var(--font-bold-font-weight); cursor: pointer; } .row .nf-form-content .submit-wrap input:hover, .row .nf-form-content .submit-wrap input:focus { background: var(--button-secondary-color); color: var(--button-main-color); } .row .nf-form-cont .nf-form-content .submit-wrap .nf-field-element::after { content: none; } @media only screen and (min-width: 720px) { .row .nf-form-content .submit-wrap input { font-size: var(--font-copy-size-720); line-height: var(--font-copy-line-height-720); } } @media only screen and (min-width: 1200px) { .row .nf-form-content .submit-wrap input { font-size: var(--font-copy-size-1200); line-height: var(--font-copy-line-height-1200); } } @media only screen and (min-width: 1440px) { .row .nf-form-content .submit-wrap input { font-size: var(--font-copy-size-1440); line-height: var(--font-copy-line-height-1440); } } /* END Submit Button Styles */ /* form 5 custom styling */ .row #nf-form-5-cont nf-fields-wrap { display: block; } .row #nf-form-5-cont nf-fields-wrap nf-field:first-child { margin-bottom: var(--font-headline-margin-bottom); } @media only screen and (min-width: 1200px) { .row #nf-form-5-cont nf-fields-wrap nf-field:first-child { margin-bottom: var(--font-headline-margin-bottom-1200); } } /* END form 5 custom styling */ /* END Ninja Forms Styles */ /* Single Location Map Embed Styles */ .single-location-map { position: relative; width: 100%; height: 100%; } #gmap { width: auto; height: 380px; border: 4px solid white; border-radius: var(--card-border-radius); } .directions { position: absolute; bottom: calc(-1 * var(--font-copy-size)); left: 30px; } @media only screen and (min-width: 720px) { .directions { bottom: calc(-1 * var(--font-copy-size-720)); } } @media only screen and (min-width: 1200px) { .directions { bottom: calc(-1 * var(--font-copy-size-1200)); } } @media only screen and (min-width: 1440px) { .directions { bottom: calc(-1 * var(--font-copy-size-1440)); } } /* END Single Location Map Embed Styles */ /* Photo Gallery Styles */ .row .bwg_container { margin: 0px; } @media only screen and (min-width: 920px) { .row .bwg_container .bwg-thumbnails.bwg-standard-thumbnails.bwg-container.bwg-border-box{ width: auto !important; } } /* END Photo Gallery Styles */ /* Follow us on Facebook buttons in location pages */ .location-fb { display: flex; flex-direction: row; gap: 15px; } .location-fb a:first-child { width: 40px; height: 40px; align-self: center; } .location-fb a { font-weight: 700; } /* END Follow us on Facebook buttons in location pages */ /* above header banner */ .above-header-banner { position: relative; } .above-header-banner * { color: white; font-size: var(--font-copy-size-smaller); line-height: var(--font-copy-line-height-smaller); } .above-header-banner * a { color: white; font-weight: 700; text-decoration: underline; } .above-header-banner * a:hover, .above-header-banner * a:focus { color: white; } .above-header-banner::after, .above-header-banner::before { content: ''; width: 100%; position: absolute; bottom: 0; height: 100%; } .above-header-banner::after { left: 100%; } .above-header-banner::before { right: 100%; } /* END above header banner */ /* Breakout Image Row Styles */ #dayspring-notice.row { background-color: var(--main-color); } #dayspring-notice.row .section-breakout .breakout-content *, #dayspring-notice.row .section-breakout .breakout-content * a { color: white; } #dayspring-notice.row .section-breakout .breakout-content * a:hover, #dayspring-notice.row .section-breakout .breakout-content * a:focus { color: var(--row-green-color); } .section-breakout { display: flex; flex-direction: row; gap: var(--row-spacing); } .section-breakout .breakout-image { min-width: 50px; max-width: 125px; width: 15%; } .row-breakout-image { display: none; } /* at this media query, the text of the breakout banner needs to be reduced */ @media only screen and (min-width: 720px) { .breakout-content p, .breakout-content li { font-size: var(--font-copy-smaller-size-720); line-height: var(--font-copy-smaller-line-height-720); } .breakout-content p span.larger { font-size: var(--font-copy-size-720); line-height: var(--font-copy-line-height-720); } } @media only screen and (min-width: 920px) { #dayspring-notice.row { padding-top: calc(var(--row-spacing-920) / 2); padding-bottom: calc(var(--row-spacing-920) / 2); } } @media only screen and (min-width: 1024px) { #dayspring-notice.row { padding-top: calc(var(--row-spacing-1024) / 2); padding-bottom: calc(var(--row-spacing-1024) / 2); } } /* at this media query, text of the breakout banner fixes to its maximum size */ @media only screen and (min-width: 1200px) { #dayspring-notice.row { padding-top: calc(var(--row-spacing-1200) / 2); padding-bottom: calc(var(--row-spacing-1200) / 2); } .breakout-content p, .breakout-content li { font-size: var(--font-copy-smaller-size-1200); line-height: var(--font-copy-smaller-line-height-1200); margin-top: 17px; margin-bottom: 17px; } .breakout-content p span.larger { font-size: var(--font-copy-size-1200); line-height: var(--font-copy-line-height-1200); } } @media only screen and (min-width: 1334px) { } /* at this media query, the image can finally break out safely, as we can predict content width. */ @media only screen and (min-width: 1440px) { #dayspring-notice.row { padding-top: calc(var(--row-spacing-1200) / 3); padding-bottom: calc(var(--row-spacing-1200) / 3); } #dayspring-notice .fluid { position: relative; } #dayspring-notice .content-container .inner-width { max-width: none; } .section-breakout .breakout-content { margin-left: calc(200px + (var(--row-spacing-1200) / 2)); } .section-breakout .breakout-content p { margin-top: 7px; margin-bottom: 7px; } .section-breakout .breakout-content p:first-child { margin-top: 0px; } .section-breakout .breakout-content p:last-child { margin-bottom: 0px; } .section-breakout .breakout-image { display: none; } .row-breakout-image { display: block; position: absolute; left: 0; top: -40px; width: 200px; z-index: 6; } } /* END Breakout Image Row Styles */