:root { --gray-base: #eeeeee; --gray-rgb: 238, 238, 238; --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --dark: var(--dark-base); --bg-dark-text: var(--white); --bg-dark-text-link: var(--bg-dark-text); --bg-dark-text-hover: var(--bg-dark-text); --bg-dark-dim-text: var(--white); --bg-dark-dim-text-link: var(--bg-dark-dim-text); --bg-dark-dim-text-hover: var(--bg-dark-dim-text); --bg-dark-tint-text: var(--white); --bg-dark-tint-text-link: var(--bg-dark-tint-text); --bg-dark-tint-text-hover: var(--bg-dark-tint-text); --medium: var(--medium-base); --bg-medium-text: var(--dark); --bg-medium-text-link: var(--bg-medium-text); --bg-medium-text-hover: var(--bg-medium-text); --bg-medium-dim-text: var(--bg-medium-text); --bg-medium-dim-text-link: var(--bg-medium-dim-text); --bg-medium-dim-text-hover: var(--bg-medium-dim-text); --bg-medium-tint-text: var(--bg-medium-text); --bg-medium-tint-text-link: var(--bg-medium-tint-text); --bg-medium-tint-text-hover: var(--bg-medium-tint-text); --light: var(--light-base); --bg-light-text: var(--dark); --bg-light-text-link: var(--bg-light-text); --bg-light-text-hover: var(--bg-light-text); --bg-light-dim-text: var(--bg-light-text); --bg-light-dim-text-link: var(--bg-light-dim-text); --bg-light-dim-text-hover: var(--bg-light-dim-text); --bg-light-tint-text: var(--bg-light-text); --bg-light-tint-text-link: var(--bg-light-tint-text); --bg-light-tint-text-hover: var(--bg-light-tint-text); --gray: var(--gray-base); --bg-gray-text: var(--dark); --bg-gray-text-link: var(--bg-gray-text); --bg-gray-text-hover: var(--bg-gray-text); --bg-gray-dim-text: var(--white); --bg-gray-dim-text-link: var(--bg-gray-dim-text); --bg-gray-dim-text-hover: var(--bg-gray-dim-text); --bg-gray-tint-text: var(--bg-gray-text); --bg-gray-tint-text-link: var(--bg-gray-tint-text); --bg-gray-tint-text-hover: var(--bg-gray-tint-text); --bg-white-text: var(--dark); --bg-white-text-link: var(--bg-white-text); --bg-white-text-hover: var(--bg-white-text); --dark-dim: color-mix(in srgb, var(--dark), black 20%); --dark-tint: color-mix(in srgb, var(--dark), white 20%); --medium-dim: color-mix(in srgb, var(--medium), black 20%); --medium-tint: color-mix(in srgb, var(--medium), white 20%); --light-dim: color-mix(in srgb, var(--light), black 5%); --light-tint: color-mix(in srgb, var(--light), white 40%); --gray-dim: color-mix(in srgb, var(--gray), black 50%); --gray-tint: color-mix(in srgb, var(--gray), white 20%); --btn-dark-bg: var(--dark); --btn-dark-border: var(--dark); --btn-dark-color: var(--bg-dark-text); --btn-dark-hover-bg: var(--medium); --btn-dark-hover-border: var(--medium); --btn-dark-hover-color: var(--bg-medium-text); --btn-dark-outline-bg: transparent; --btn-dark-outline-border: var(--dark); --btn-dark-outline-color: var(--dark); --btn-dark-outline-hover-bg: var(--dark); --btn-dark-outline-hover-border: var(--dark); --btn-dark-outline-hover-color: var(--bg-dark-text); --btn-medium-bg: var(--medium); --btn-medium-border: var(--medium); --btn-medium-color: var(--bg-medium-text); --btn-medium-hover-bg: var(--dark); --btn-medium-hover-border: var(--dark); --btn-medium-hover-color: var(--bg-dark-text); --btn-medium-outline-bg: transparent; --btn-medium-outline-border: var(--medium); --btn-medium-outline-color: var(--medium); --btn-medium-outline-hover-bg: var(--medium); --btn-medium-outline-hover-border: var(--medium); --btn-medium-outline-hover-color: var(--bg-medium-text); --btn-light-bg: var(--light); --btn-light-border: var(--light); --btn-light-color: var(--bg-light-text); --btn-light-hover-bg: var(--medium); --btn-light-hover-border: var(--medium); --btn-light-hover-color: var(--bg-medium-text); --btn-light-outline-bg: transparent; --btn-light-outline-border: var(--light); --btn-light-outline-color: var(--light); --btn-light-outline-hover-bg: var(--light); --btn-light-outline-hover-border: var(--light); --btn-light-outline-hover-color: var(--bg-light-text); --btn-white-bg: var(--white); --btn-white-border: var(--white); --btn-white-color: var(--bg-white-text); --btn-white-hover-bg: var(--dark); --btn-white-hover-border: var(--dark); --btn-white-hover-color: var(--bg-dark-text); --btn-white-outline-bg: transparent; --btn-white-outline-border: var(--white); --btn-white-outline-color: var(--white); --btn-white-outline-hover-bg: var(--white); --btn-white-outline-hover-border: var(--white); --btn-white-outline-hover-color: var(--bg-white-text); --highlight: var(--medium); --border-gray: var(--gray)} :is(.medium-white) { --bg-medium-text: var(--white); --bg-medium-text-link: var(--white); --bg-medium-text-hover: var(--white); --btn-medium-color: var(--white)} :is(.medium-dim-white) { --bg-medium-dim-text: var(--white); --bg-medium-dim-text-link: var(--white); --bg-medium-dim-text-hover: var(--white)} :is(.medium-tint-white) { --bg-medium-tint-text: var(--white); --bg-medium-tint-text-link: var(--white); --bg-medium-tint-text-hover: var(--white)} :is(.bg-dark, .bg-dark-dim, .bg-dark-tint) { --btn-dark-bg: var(--white); --btn-dark-border: var(--white); --btn-dark-color: var(--bg-white-text); --btn-dark-outline-border: var(--white); --btn-dark-outline-color: var(--white); --btn-dark-outline-hover-bg: var(--white); --btn-dark-outline-hover-border: var(--white); --btn-dark-outline-hover-color: var(--bg-white-text); --btn-medium-hover-bg: var(--white); --btn-medium-hover-border: var(--white); --btn-medium-hover-color: var(--bg-white-text); --btn-white-bg: var(--white); --btn-white-border: var(--white); --btn-white-color: var(--bg-white-text); --btn-white-hover-bg: var(--dark); --btn-white-hover-border: var(--dark); --btn-white-hover-color: var(--bg-dark-text); --btn-white-outline-bg: transparent; --btn-white-outline-border: var(--white); --btn-white-outline-color: var(--white); --btn-white-outline-hover-bg: var(--white); --btn-white-outline-hover-border: var(--white); --btn-white-outline-hover-color: var(--bg-white-text)} :is(.bg-light, .bg-light-dim, .bg-light-tint, .bg-white) { --btn-light-bg: var(--dark); --btn-light-border: var(--dark); --btn-light-color: var(--bg-dark-text); --btn-light-hover-bg: var(--medium); --btn-light-hover-border: var(--medium); --btn-light-hover-color: var(--bg-medium-text); --btn-light-outline-border: var(--dark); --btn-light-outline-color: var(--dark); --btn-light-outline-hover-bg: var(--dark); --btn-light-outline-hover-border: var(--dark); --btn-light-outline-hover-color: var(--bg-dark-text); --btn-white-bg: var(--dark); --btn-white-border: var(--dark); --btn-white-color: var(--bg-dark-text); --btn-white-hover-bg: var(--medium); --btn-white-hover-border: var(--medium); --btn-white-hover-color: var(--bg-medium-text); --btn-white-outline-border: var(--dark); --btn-white-outline-color: var(--dark); --btn-white-outline-hover-bg: var(--dark); --btn-white-outline-hover-border: var(--dark); --btn-white-outline-hover-color: var(--bg-dark-text)} :is(.bg-medium, .bg-medium-dim, .bg-medium-tint) { --btn-medium-bg: var(--dark); --btn-medium-border: var(--dark); --btn-medium-color: var(--bg-dark-text); --btn-medium-hover-bg: var(--white); --btn-medium-hover-border: var(--white); --btn-medium-hover-color: var(--bg-white-text); --btn-medium-outline-border: var(--dark); --btn-medium-outline-color: var(--dark); --btn-medium-outline-hover-bg: var(--dark); --btn-medium-outline-hover-border: var(--dark); --btn-medium-outline-hover-color: var(--bg-dark-text); --btn-dark-hover-bg: var(--white); --btn-dark-hover-border: var(--white); --btn-dark-hover-color: var(--bg-white-text); --btn-light-hover-bg: var(--dark); --btn-light-hover-border: var(--dark); --btn-light-hover-color: var(--bg-dark-text); --highlight: var(--dark)} :is(.bg-gray, .bg-gray-dim, .bg-gray-tint) { --btn-light-bg: var(--dark); --btn-light-border: var(--dark); --btn-light-color: var(--bg-dark-text); --btn-light-hover-bg: var(--medium); --btn-light-hover-border: var(--medium); --btn-light-hover-color: var(--bg-medium-text); --btn-light-outline-border: var(--dark); --btn-light-outline-color: var(--dark); --btn-light-outline-hover-bg: var(--dark); --btn-light-outline-hover-border: var(--dark); --btn-light-outline-hover-color: var(--bg-dark-text); --btn-white-bg: var(--dark); --btn-white-border: var(--dark); --btn-white-color: var(--bg-dark-text); --btn-white-hover-bg: var(--medium); --btn-white-hover-border: var(--medium); --btn-white-hover-color: var(--bg-medium-text); --btn-white-outline-border: var(--dark); --btn-white-outline-color: var(--dark); --btn-white-outline-hover-bg: var(--dark); --btn-white-outline-hover-border: var(--dark); --btn-white-outline-hover-color: var(--bg-dark-text)} .link, .link:hover, .link:focus, a:not(.btn), a:not(.btn):hover, a:not(.btn):focus { color: currentColor} .bg-dark { background-color: var(--dark) !important; color: var(--bg-dark-text)} .bg-dark a:not(.btn), .bg-dark a:not(.btn):visited { color: currentColor} .bg-dark a:not(.btn):hover, .bg-dark a:not(.btn):focus, .bg-dark a:not(.btn):active { color: currentColor} .bg-dark-dim { background-color: var(--dark-dim) !important; color: var(--bg-dark-dim-text)} .bg-dark-dim a:not(.btn), .bg-dark-dim a:not(.btn):visited { color: currentColor} .bg-dark-dim a:not(.btn):hover, .bg-dark-dim a:not(.btn):focus, .bg-dark-dim a:not(.btn):active { color: currentColor} .bg-dark-tint { background-color: var(--dark-tint) !important; color: var(--bg-dark-tint-text)} .bg-dark-tint a:not(.btn), .bg-dark-tint a:not(.btn):visited { color: currentColor} .bg-dark-tint a:not(.btn):hover, .bg-dark-tint a:not(.btn):focus, .bg-dark-tint a:not(.btn):active { color: currentColor} .bg-medium { background-color: var(--medium) !important; color: var(--bg-medium-text)} .bg-medium a:not(.btn), .bg-medium a:not(.btn):visited { color: currentColor} .bg-medium a:not(.btn):hover, .bg-medium a:not(.btn):focus, .bg-medium a:not(.btn):active { color: currentColor} .bg-medium-dim { background-color: var(--medium-dim) !important; color: var(--bg-medium-dim-text)} .bg-medium-dim a:not(.btn), .bg-medium-dim a:not(.btn):visited { color: currentColor} .bg-medium-dim a:not(.btn):hover, .bg-medium-dim a:not(.btn):focus, .bg-medium-dim a:not(.btn):active { color: currentColor} .bg-medium-tint { background-color: var(--medium-tint) !important; color: var(--bg-medium-tint-text)} .bg-medium-tint a:not(.btn), .bg-medium-tint a:not(.btn):visited { color: currentColor} .bg-medium-tint a:not(.btn):hover, .bg-medium-tint a:not(.btn):focus, .bg-medium-tint a:not(.btn):active { color: currentColor} .bg-light { background-color: var(--light) !important; color: var(--bg-light-text)} .bg-light a:not(.btn), .bg-light a:not(.btn):visited { color: currentColor} .bg-light a:not(.btn):hover, .bg-light a:not(.btn):focus, .bg-light a:not(.btn):active { color: currentColor} .bg-light-dim { background-color: var(--light-dim) !important; color: var(--bg-light-dim-text)} .bg-light-dim a:not(.btn), .bg-light-dim a:not(.btn):visited { color: currentColor} .bg-light-dim a:not(.btn):hover, .bg-light-dim a:not(.btn):focus, .bg-light-dim a:not(.btn):active { color: currentColor} .bg-light-tint { background-color: var(--light-tint) !important; color: var(--bg-light-tint-text)} .bg-light-tint a:not(.btn), .bg-light-tint a:not(.btn):visited { color: currentColor} .bg-light-tint a:not(.btn):hover, .bg-light-tint a:not(.btn):focus, .bg-light-tint a:not(.btn):active { color: currentColor} .bg-white { background-color: var(--white) !important; color: var(--dark)} .bg-white a:not(.btn), .bg-white a:not(.btn):visited { color: currentColor} .bg-white a:not(.btn):hover, .bg-white a:not(.btn):focus, .bg-white a:not(.btn):active { color: currentColor} .bg-transparent { background-color: transparent !important; color: currentColor} .text-dark { color: var(--dark) !important} .text-medium { color: var(--medium) !important} .text-light { color: var(--light) !important} .text-white { color: var(--white) !important} .text-gray-dark { color: var(--gray-dim) !important} .highlight { color: var(--highlight) !important} .btn-no-context { --btn-dark-bg: var(--dark); --btn-dark-border: var(--dark); --btn-dark-color: var(--bg-dark-text); --btn-dark-hover-bg: var(--medium); --btn-dark-hover-border: var(--medium); --btn-dark-hover-color: var(--bg-medium-text); --btn-dark-outline-bg: transparent; --btn-dark-outline-border: var(--dark); --btn-dark-outline-color: var(--dark); --btn-dark-outline-hover-bg: var(--dark); --btn-dark-outline-hover-border: var(--dark); --btn-dark-outline-hover-color: var(--bg-dark-text); --btn-medium-bg: var(--medium); --btn-medium-border: var(--medium); --btn-medium-color: var(--bg-medium-text); --btn-medium-hover-bg: var(--dark); --btn-medium-hover-border: var(--dark); --btn-medium-hover-color: var(--bg-dark-text); --btn-medium-outline-bg: transparent; --btn-medium-outline-border: var(--medium); --btn-medium-outline-color: var(--medium); --btn-medium-outline-hover-bg: var(--medium); --btn-medium-outline-hover-border: var(--medium); --btn-medium-outline-hover-color: var(--bg-medium-text); --btn-white-bg: var(--white); --btn-white-border: var(--white); --btn-white-color: var(--bg-white-text); --btn-white-hover-bg: var(--dark); --btn-white-hover-border: var(--dark); --btn-white-hover-color: var(--bg-dark-text); --btn-white-outline-bg: transparent; --btn-white-outline-border: var(--white); --btn-white-outline-color: var(--white); --btn-white-outline-hover-bg: var(--white); --btn-white-outline-hover-border: var(--white); --btn-white-outline-hover-color: var(--bg-white-text)} .bg-green, .notice_type_success, .alerts_type_success{ background-color: #edf7ed; color: #255627} .bg-blue, .notice_type_info, .alerts_type_info{ background-color: #e8f4fe; color: #08528d} .bg-red, .notice_type_danger, .alerts_type_danger{ background-color: #feeceb; color: #a21309} .bg-orange, .notice_type_warning, .alerts_type_caution{ background-color: #fef6e9; color: #9a6104} *, *::before, *::after { box-sizing: border-box} html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth} body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin-block-end: 0} ul[role="list"], ol[role="list"] { list-style: none} body { min-height: 100vh; line-height: 1.5} h1, h2, h3, h4, button, input, label { line-height: 1.1} h1, h2, h3, h4 { text-wrap: balance} a:not([class]) { text-decoration-skip-ink: auto; color: currentColor} img, picture { max-width: 100%; display: block} input, button, textarea, select { font-family: inherit; font-size: inherit} textarea:not([rows]) { min-height: 10em} :target { scroll-margin-block: 5ex} * { box-sizing: border-box; margin: 0; padding: 0} *:focus-visible { outline: var(--focus-ring); outline-offset: 2px} html { font-size: 100%} body { font-size: var(--text-base); background-color: var(--white); color: var(--dark); overflow-x: hidden; line-height: 1.5} :root { --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem); --text-2xs: clamp(0.8125rem, 0.7875rem + 0.25vw, 0.9375rem); --text-sm: clamp(0.875rem, 0.85rem + 0.25vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem); --text-xl: clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem); --text-h1: clamp(2rem, 5vw, 3.5rem); --text-h2: clamp(1.625rem, 4vw, 2.75rem); --text-h3: clamp(1.375rem, 3vw, 2rem); --text-h4: clamp(1.125rem, 2.5vw, 1.5rem); --text-h5: clamp(1rem, 2vw, 1.25rem); --content-width: 1400px; --header-pad-y: 0.5rem; --header-pad-x: clamp(1.25rem, 5vw, 2.5rem); --mobile-pad: 1.25rem; --radius-sm: 0.4rem; --focus-ring-color: var(--medium-base); --focus-ring: 3px solid var(--focus-ring-color); --focus-ring-inset: 0 0 0 3px var(--focus-ring-color); --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15); --shadow-panel: 0 0 15px rgba(0, 0, 0, 0.2); --shadow-toggle: -2px 2px 5px rgba(0, 0, 0, 0.2); --trans-fast: 0.2s ease; --trans-normal: 0.3s ease; --trans-slow: 0.4s ease; --z-bridge: 50; --z-sticky: 1000; --z-dropdown: 2000; --z-drawer: 1200; --item-gap: 1.5rem; --section-padding: 4rem} .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0} .heading-crimson-pro h1, .heading-crimson-pro .h1, .heading-crimson-pro h2, .heading-crimson-pro .h2, .heading-crimson-pro h3, .heading-crimson-pro .h3, .heading-crimson-pro h4, .heading-crimson-pro .h4, .heading-crimson-pro h5, .heading-crimson-pro .h5 { font-family: "Crimson Pro", serif} .body-crimson-pro { font-family: "Crimson Pro", serif} .heading-dm-sans h1, .heading-dm-sans .h1, .heading-dm-sans h2, .heading-dm-sans .h2, .heading-dm-sans h3, .heading-dm-sans .h3, .heading-dm-sans h4, .heading-dm-sans .h4, .heading-dm-sans h5, .heading-dm-sans .h5 { font-family: "DM Sans", sans-serif} .body-dm-sans { font-family: "DM Sans", sans-serif} .heading-dm-serif-display h1, .heading-dm-serif-display .h1, .heading-dm-serif-display h2, .heading-dm-serif-display .h2, .heading-dm-serif-display h3, .heading-dm-serif-display .h3, .heading-dm-serif-display h4, .heading-dm-serif-display .h4, .heading-dm-serif-display h5, .heading-dm-serif-display .h5 { font-family: "DM Serif Display", serif} .body-dm-serif-display { font-family: "DM Serif Display", serif} .heading-inter h1, .heading-inter .h1, .heading-inter h2, .heading-inter .h2, .heading-inter h3, .heading-inter .h3, .heading-inter h4, .heading-inter .h4, .heading-inter h5, .heading-inter .h5 { font-family: "Inter", sans-serif} .body-inter { font-family: "Inter", sans-serif} .heading-lato h1, .heading-lato .h1, .heading-lato h2, .heading-lato .h2, .heading-lato h3, .heading-lato .h3, .heading-lato h4, .heading-lato .h4, .heading-lato h5, .heading-lato .h5 { font-family: "Lato", sans-serif} .body-lato { font-family: "Lato", sans-serif} .heading-manrope h1, .heading-manrope .h1, .heading-manrope h2, .heading-manrope .h2, .heading-manrope h3, .heading-manrope .h3, .heading-manrope h4, .heading-manrope .h4, .heading-manrope h5, .heading-manrope .h5 { font-family: "Manrope", sans-serif} .body-manrope { font-family: "Manrope", sans-serif} .heading-merriweather h1, .heading-merriweather .h1, .heading-merriweather h2, .heading-merriweather .h2, .heading-merriweather h3, .heading-merriweather .h3, .heading-merriweather h4, .heading-merriweather .h4, .heading-merriweather h5, .heading-merriweather .h5 { font-family: "Merriweather", serif} .body-merriweather { font-family: "Merriweather", serif} .heading-nunito h1, .heading-nunito .h1, .heading-nunito h2, .heading-nunito .h2, .heading-nunito h3, .heading-nunito .h3, .heading-nunito h4, .heading-nunito .h4, .heading-nunito h5, .heading-nunito .h5 { font-family: "Nunito", sans-serif} .body-nunito { font-family: "Nunito", sans-serif} .heading-outfit h1, .heading-outfit .h1, .heading-outfit h2, .heading-outfit .h2, .heading-outfit h3, .heading-outfit .h3, .heading-outfit h4, .heading-outfit .h4, .heading-outfit h5, .heading-outfit .h5 { font-family: "Outfit", sans-serif} .body-outfit { font-family: "Outfit", sans-serif} .heading-playfair-display h1, .heading-playfair-display .h1, .heading-playfair-display h2, .heading-playfair-display .h2, .heading-playfair-display h3, .heading-playfair-display .h3, .heading-playfair-display h4, .heading-playfair-display .h4, .heading-playfair-display h5, .heading-playfair-display .h5 { font-family: "Playfair Display", serif} .body-playfair-display { font-family: "Playfair Display", serif} .heading-roboto-slab h1, .heading-roboto-slab .h1, .heading-roboto-slab h2, .heading-roboto-slab .h2, .heading-roboto-slab h3, .heading-roboto-slab .h3, .heading-roboto-slab h4, .heading-roboto-slab .h4, .heading-roboto-slab h5, .heading-roboto-slab .h5 { font-family: "Roboto Slab", serif} .body-roboto-slab { font-family: "Roboto Slab", serif} .heading-source-sans-3 h1, .heading-source-sans-3 .h1, .heading-source-sans-3 h2, .heading-source-sans-3 .h2, .heading-source-sans-3 h3, .heading-source-sans-3 .h3, .heading-source-sans-3 h4, .heading-source-sans-3 .h4, .heading-source-sans-3 h5, .heading-source-sans-3 .h5 { font-family: "Source Sans 3", sans-serif} .body-source-sans-3 { font-family: "Source Sans 3", sans-serif} .heading-space-grotesk h1, .heading-space-grotesk .h1, .heading-space-grotesk h2, .heading-space-grotesk .h2, .heading-space-grotesk h3, .heading-space-grotesk .h3, .heading-space-grotesk h4, .heading-space-grotesk .h4, .heading-space-grotesk h5, .heading-space-grotesk .h5 { font-family: "Space Grotesk", sans-serif !important} .body-space-grotesk { font-family: "Space Grotesk", sans-serif} .heading-syne h1, .heading-syne .h1, .heading-syne h2, .heading-syne .h2, .heading-syne h3, .heading-syne .h3, .heading-syne h4, .heading-syne .h4, .heading-syne h5, .heading-syne .h5 { font-family: "Syne", sans-serif} .body-syne { font-family: "Syne", sans-serif} .heading-abel h1, .heading-abel .h1, .heading-abel h2, .heading-abel .h2, .heading-abel h3, .heading-abel .h3, .heading-abel h4, .heading-abel .h4, .heading-abel h5, .heading-abel .h5 { font-family: "Abel", sans-serif} .body-abel { font-family: "Abel", sans-serif} .heading-abril-fatface h1, .heading-abril-fatface .h1, .heading-abril-fatface h2, .heading-abril-fatface .h2, .heading-abril-fatface h3, .heading-abril-fatface .h3, .heading-abril-fatface h4, .heading-abril-fatface .h4, .heading-abril-fatface h5, .heading-abril-fatface .h5 { font-family: "Abril Fatface", serif} .body-abril-fatface { font-family: "Abril Fatface", serif} .heading-alegreya-sans h1, .heading-alegreya-sans .h1, .heading-alegreya-sans h2, .heading-alegreya-sans .h2, .heading-alegreya-sans h3, .heading-alegreya-sans .h3, .heading-alegreya-sans h4, .heading-alegreya-sans .h4, .heading-alegreya-sans h5, .heading-alegreya-sans .h5 { font-family: "Alegreya Sans", sans-serif} .body-alegreya-sans { font-family: "Alegreya Sans", sans-serif} .heading-arimo h1, .heading-arimo .h1, .heading-arimo h2, .heading-arimo .h2, .heading-arimo h3, .heading-arimo .h3, .heading-arimo h4, .heading-arimo .h4, .heading-arimo h5, .heading-arimo .h5 { font-family: "Arimo", sans-serif} .body-arimo { font-family: "Arimo", sans-serif} .heading-archivo-narrow h1, .heading-archivo-narrow .h1, .heading-archivo-narrow h2, .heading-archivo-narrow .h2, .heading-archivo-narrow h3, .heading-archivo-narrow .h3, .heading-archivo-narrow h4, .heading-archivo-narrow .h4, .heading-archivo-narrow h5, .heading-archivo-narrow .h5 { font-family: "Archivo Narrow", sans-serif} .body-archivo-narrow { font-family: "Archivo Narrow", sans-serif} .heading-arvo h1, .heading-arvo .h1, .heading-arvo h2, .heading-arvo .h2, .heading-arvo h3, .heading-arvo .h3, .heading-arvo h4, .heading-arvo .h4, .heading-arvo h5, .heading-arvo .h5 { font-family: "Arvo", serif} .body-arvo { font-family: "Arvo", serif} .heading-asap h1, .heading-asap .h1, .heading-asap h2, .heading-asap .h2, .heading-asap h3, .heading-asap .h3, .heading-asap h4, .heading-asap .h4, .heading-asap h5, .heading-asap .h5 { font-family: "Asap", sans-serif} .body-asap { font-family: "Asap", sans-serif} .heading-atkinson-hyperlegible h1, .heading-atkinson-hyperlegible .h1, .heading-atkinson-hyperlegible h2, .heading-atkinson-hyperlegible .h2, .heading-atkinson-hyperlegible h3, .heading-atkinson-hyperlegible .h3, .heading-atkinson-hyperlegible h4, .heading-atkinson-hyperlegible .h4, .heading-atkinson-hyperlegible h5, .heading-atkinson-hyperlegible .h5 { font-family: "Atkinson Hyperlegible", sans-serif} .body-atkinson-hyperlegible { font-family: "Atkinson Hyperlegible", sans-serif} .heading-barlow h1, .heading-barlow .h1, .heading-barlow h2, .heading-barlow .h2, .heading-barlow h3, .heading-barlow .h3, .heading-barlow h4, .heading-barlow .h4, .heading-barlow h5, .heading-barlow .h5 { font-family: "Barlow", sans-serif} .body-barlow { font-family: "Barlow", sans-serif} .heading-bebas-neue h1, .heading-bebas-neue .h1, .heading-bebas-neue h2, .heading-bebas-neue .h2, .heading-bebas-neue h3, .heading-bebas-neue .h3, .heading-bebas-neue h4, .heading-bebas-neue .h4, .heading-bebas-neue h5, .heading-bebas-neue .h5 { font-family: "Bebas Neue", sans-serif} .body-bebas-neue { font-family: "Bebas Neue", sans-serif} .heading-bitter h1, .heading-bitter .h1, .heading-bitter h2, .heading-bitter .h2, .heading-bitter h3, .heading-bitter .h3, .heading-bitter h4, .heading-bitter .h4, .heading-bitter h5, .heading-bitter .h5 { font-family: "Bitter", serif} .body-bitter { font-family: "Bitter", serif} .heading-bree-serif h1, .heading-bree-serif .h1, .heading-bree-serif h2, .heading-bree-serif .h2, .heading-bree-serif h3, .heading-bree-serif .h3, .heading-bree-serif h4, .heading-bree-serif .h4, .heading-bree-serif h5, .heading-bree-serif .h5 { font-family: "Bree Serif", serif} .body-bree-serif { font-family: "Bree Serif", serif} .heading-cabin h1, .heading-cabin .h1, .heading-cabin h2, .heading-cabin .h2, .heading-cabin h3, .heading-cabin .h3, .heading-cabin h4, .heading-cabin .h4, .heading-cabin h5, .heading-cabin .h5 { font-family: "Cabin", sans-serif} .body-cabin { font-family: "Cabin", sans-serif} .heading-cormorant-garamond h1, .heading-cormorant-garamond .h1, .heading-cormorant-garamond h2, .heading-cormorant-garamond .h2, .heading-cormorant-garamond h3, .heading-cormorant-garamond .h3, .heading-cormorant-garamond h4, .heading-cormorant-garamond .h4, .heading-cormorant-garamond h5, .heading-cormorant-garamond .h5 { font-family: "Cormorant Garamond", serif} .body-cormorant-garamond { font-family: "Cormorant Garamond", serif} .heading-eb-garamond h1, .heading-eb-garamond .h1, .heading-eb-garamond h2, .heading-eb-garamond .h2, .heading-eb-garamond h3, .heading-eb-garamond .h3, .heading-eb-garamond h4, .heading-eb-garamond .h4, .heading-eb-garamond h5, .heading-eb-garamond .h5 { font-family: "EB Garamond", serif} .body-eb-garamond { font-family: "EB Garamond", serif} .heading-encode-sans h1, .heading-encode-sans .h1, .heading-encode-sans h2, .heading-encode-sans .h2, .heading-encode-sans h3, .heading-encode-sans .h3, .heading-encode-sans h4, .heading-encode-sans .h4, .heading-encode-sans h5, .heading-encode-sans .h5 { font-family: "Encode Sans", sans-serif} .body-encode-sans { font-family: "Encode Sans", sans-serif} .heading-epilogue h1, .heading-epilogue .h1, .heading-epilogue h2, .heading-epilogue .h2, .heading-epilogue h3, .heading-epilogue .h3, .heading-epilogue h4, .heading-epilogue .h4, .heading-epilogue h5, .heading-epilogue .h5 { font-family: "Epilogue", sans-serif} .body-epilogue { font-family: "Epilogue", sans-serif} .heading-fira-sans h1, .heading-fira-sans .h1, .heading-fira-sans h2, .heading-fira-sans .h2, .heading-fira-sans h3, .heading-fira-sans .h3, .heading-fira-sans h4, .heading-fira-sans .h4, .heading-fira-sans h5, .heading-fira-sans .h5 { font-family: "Fira Sans", sans-serif} .body-fira-sans { font-family: "Fira Sans", sans-serif} .heading-fjalla-one h1, .heading-fjalla-one .h1, .heading-fjalla-one h2, .heading-fjalla-one .h2, .heading-fjalla-one h3, .heading-fjalla-one .h3, .heading-fjalla-one h4, .heading-fjalla-one .h4, .heading-fjalla-one h5, .heading-fjalla-one .h5 { font-family: "Fjalla One", sans-serif} .body-fjalla-one { font-family: "Fjalla One", sans-serif} .heading-fraunces h1, .heading-fraunces .h1, .heading-fraunces h2, .heading-fraunces .h2, .heading-fraunces h3, .heading-fraunces .h3, .heading-fraunces h4, .heading-fraunces .h4, .heading-fraunces h5, .heading-fraunces .h5 { font-family: "Fraunces", serif} .body-fraunces { font-family: "Fraunces", serif} .heading-geologica h1, .heading-geologica .h1, .heading-geologica h2, .heading-geologica .h2, .heading-geologica h3, .heading-geologica .h3, .heading-geologica h4, .heading-geologica .h4, .heading-geologica h5, .heading-geologica .h5 { font-family: "Geologica", sans-serif} .body-geologica { font-family: "Geologica", sans-serif} .heading-google-sans h1, .heading-google-sans .h1, .heading-google-sans h2, .heading-google-sans .h2, .heading-google-sans h3, .heading-google-sans .h3, .heading-google-sans h4, .heading-google-sans .h4, .heading-google-sans h5, .heading-google-sans .h5 { font-family: "Google Sans", sans-serif} .body-google-sans { font-family: "Google Sans", sans-serif} .heading-hanken-grotesk h1, .heading-hanken-grotesk .h1, .heading-hanken-grotesk h2, .heading-hanken-grotesk .h2, .heading-hanken-grotesk h3, .heading-hanken-grotesk .h3, .heading-hanken-grotesk h4, .heading-hanken-grotesk .h4, .heading-hanken-grotesk h5, .heading-hanken-grotesk .h5 { font-family: "Hanken Grotesk", sans-serif} .body-hanken-grotesk { font-family: "Hanken Grotesk", sans-serif} .heading-kameron h1, .heading-kameron .h1, .heading-kameron h2, .heading-kameron .h2, .heading-kameron h3, .heading-kameron .h3, .heading-kameron h4, .heading-kameron .h4, .heading-kameron h5, .heading-kameron .h5 { font-family: "Kameron", serif} .body-kameron { font-family: "Kameron", serif} .heading-karla h1, .heading-karla .h1, .heading-karla h2, .heading-karla .h2, .heading-karla h3, .heading-karla .h3, .heading-karla h4, .heading-karla .h4, .heading-karla h5, .heading-karla .h5 { font-family: "Karla", sans-serif} .body-karla { font-family: "Karla", sans-serif} .heading-lexend-deca h1, .heading-lexend-deca .h1, .heading-lexend-deca h2, .heading-lexend-deca .h2, .heading-lexend-deca h3, .heading-lexend-deca .h3, .heading-lexend-deca h4, .heading-lexend-deca .h4, .heading-lexend-deca h5, .heading-lexend-deca .h5 { font-family: "Lexend Deca", sans-serif} .body-lexend-deca { font-family: "Lexend Deca", sans-serif} .heading-libre-baskerville h1, .heading-libre-baskerville .h1, .heading-libre-baskerville h2, .heading-libre-baskerville .h2, .heading-libre-baskerville h3, .heading-libre-baskerville .h3, .heading-libre-baskerville h4, .heading-libre-baskerville .h4, .heading-libre-baskerville h5, .heading-libre-baskerville .h5 { font-family: "Libre Baskerville", serif} .body-libre-baskerville { font-family: "Libre Baskerville", serif} .heading-lora h1, .heading-lora .h1, .heading-lora h2, .heading-lora .h2, .heading-lora h3, .heading-lora .h3, .heading-lora h4, .heading-lora .h4, .heading-lora h5, .heading-lora .h5 { font-family: "Lora", serif} .body-lora { font-family: "Lora", serif} .heading-marcellus h1, .heading-marcellus .h1, .heading-marcellus h2, .heading-marcellus .h2, .heading-marcellus h3, .heading-marcellus .h3, .heading-marcellus h4, .heading-marcellus .h4, .heading-marcellus h5, .heading-marcellus .h5 { font-family: "Marcellus", serif} .body-marcellus { font-family: "Marcellus", serif} .heading-montserrat h1, .heading-montserrat .h1, .heading-montserrat h2, .heading-montserrat .h2, .heading-montserrat h3, .heading-montserrat .h3, .heading-montserrat h4, .heading-montserrat .h4, .heading-montserrat h5, .heading-montserrat .h5 { font-family: "Montserrat", sans-serif} .body-montserrat { font-family: "Montserrat", sans-serif} .heading-news-cycle h1, .heading-news-cycle .h1, .heading-news-cycle h2, .heading-news-cycle .h2, .heading-news-cycle h3, .heading-news-cycle .h3, .heading-news-cycle h4, .heading-news-cycle .h4, .heading-news-cycle h5, .heading-news-cycle .h5 { font-family: "News Cycle", sans-serif} .body-news-cycle { font-family: "News Cycle", sans-serif} .heading-noto-sans h1, .heading-noto-sans .h1, .heading-noto-sans h2, .heading-noto-sans .h2, .heading-noto-sans h3, .heading-noto-sans .h3, .heading-noto-sans h4, .heading-noto-sans .h4, .heading-noto-sans h5, .heading-noto-sans .h5 { font-family: "Noto Sans", sans-serif} .body-noto-sans { font-family: "Noto Sans", sans-serif} .heading-noto-serif h1, .heading-noto-serif .h1, .heading-noto-serif h2, .heading-noto-serif .h2, .heading-noto-serif h3, .heading-noto-serif .h3, .heading-noto-serif h4, .heading-noto-serif .h4, .heading-noto-serif h5, .heading-noto-serif .h5 { font-family: "Noto Serif", serif} .body-noto-serif { font-family: "Noto Serif", serif} .heading-oswald h1, .heading-oswald .h1, .heading-oswald h2, .heading-oswald .h2, .heading-oswald h3, .heading-oswald .h3, .heading-oswald h4, .heading-oswald .h4, .heading-oswald h5, .heading-oswald .h5 { font-family: "Oswald", sans-serif} .body-oswald { font-family: "Oswald", sans-serif} .heading-overpass h1, .heading-overpass .h1, .heading-overpass h2, .heading-overpass .h2, .heading-overpass h3, .heading-overpass .h3, .heading-overpass h4, .heading-overpass .h4, .heading-overpass h5, .heading-overpass .h5 { font-family: "Overpass", sans-serif} .body-overpass { font-family: "Overpass", sans-serif} .heading-pliant h1, .heading-pliant .h1, .heading-pliant h2, .heading-pliant .h2, .heading-pliant h3, .heading-pliant .h3, .heading-pliant h4, .heading-pliant .h4, .heading-pliant h5, .heading-pliant .h5 { font-family: "Pliant", sans-serif} .body-pliant { font-family: "Pliant", sans-serif} .heading-pt-serif h1, .heading-pt-serif .h1, .heading-pt-serif h2, .heading-pt-serif .h2, .heading-pt-serif h3, .heading-pt-serif .h3, .heading-pt-serif h4, .heading-pt-serif .h4, .heading-pt-serif h5, .heading-pt-serif .h5 { font-family: "PT Serif", serif} .body-pt-serif { font-family: "PT Serif", serif} .heading-quicksand h1, .heading-quicksand .h1, .heading-quicksand h2, .heading-quicksand .h2, .heading-quicksand h3, .heading-quicksand .h3, .heading-quicksand h4, .heading-quicksand .h4, .heading-quicksand h5, .heading-quicksand .h5 { font-family: "Quicksand", sans-serif} .body-quicksand { font-family: "Quicksand", sans-serif} .heading-red-hat-text h1, .heading-red-hat-text .h1, .heading-red-hat-text h2, .heading-red-hat-text .h2, .heading-red-hat-text h3, .heading-red-hat-text .h3, .heading-red-hat-text h4, .heading-red-hat-text .h4, .heading-red-hat-text h5, .heading-red-hat-text .h5 { font-family: "Red Hat Text", sans-serif} .body-red-hat-text { font-family: "Red Hat Text", sans-serif} .heading-roboto-flex h1, .heading-roboto-flex .h1, .heading-roboto-flex h2, .heading-roboto-flex .h2, .heading-roboto-flex h3, .heading-roboto-flex .h3, .heading-roboto-flex h4, .heading-roboto-flex .h4, .heading-roboto-flex h5, .heading-roboto-flex .h5 { font-family: "Roboto Flex", sans-serif} .body-roboto-flex { font-family: "Roboto Flex", sans-serif} .heading-sansation h1, .heading-sansation .h1, .heading-sansation h2, .heading-sansation .h2, .heading-sansation h3, .heading-sansation .h3, .heading-sansation h4, .heading-sansation .h4, .heading-sansation h5, .heading-sansation .h5 { font-family: "Sansation", sans-serif} .body-sansation { font-family: "Sansation", sans-serif} .heading-slabo-27px h1, .heading-slabo-27px .h1, .heading-slabo-27px h2, .heading-slabo-27px .h2, .heading-slabo-27px h3, .heading-slabo-27px .h3, .heading-slabo-27px h4, .heading-slabo-27px .h4, .heading-slabo-27px h5, .heading-slabo-27px .h5 { font-family: "Slabo 27px", serif} .body-slabo-27px { font-family: "Slabo 27px", serif} .heading-sora h1, .heading-sora .h1, .heading-sora h2, .heading-sora .h2, .heading-sora h3, .heading-sora .h3, .heading-sora h4, .heading-sora .h4, .heading-sora h5, .heading-sora .h5 { font-family: "Sora", sans-serif} .body-sora { font-family: "Sora", sans-serif} .heading-special-gothic h1, .heading-special-gothic .h1, .heading-special-gothic h2, .heading-special-gothic .h2, .heading-special-gothic h3, .heading-special-gothic .h3, .heading-special-gothic h4, .heading-special-gothic .h4, .heading-special-gothic h5, .heading-special-gothic .h5 { font-family: "Special Gothic", sans-serif} .body-special-gothic { font-family: "Special Gothic", sans-serif} .heading-spectral h1, .heading-spectral .h1, .heading-spectral h2, .heading-spectral .h2, .heading-spectral h3, .heading-spectral .h3, .heading-spectral h4, .heading-spectral .h4, .heading-spectral h5, .heading-spectral .h5 { font-family: "Spectral", serif} .body-spectral { font-family: "Spectral", serif} .heading-titan-one h1, .heading-titan-one .h1, .heading-titan-one h2, .heading-titan-one .h2, .heading-titan-one h3, .heading-titan-one .h3, .heading-titan-one h4, .heading-titan-one .h4, .heading-titan-one h5, .heading-titan-one .h5 { font-family: "Titan One", sans-serif} .body-titan-one { font-family: "Titan One", sans-serif} .heading-unna h1, .heading-unna .h1, .heading-unna h2, .heading-unna .h2, .heading-unna h3, .heading-unna .h3, .heading-unna h4, .heading-unna .h4, .heading-unna h5, .heading-unna .h5 { font-family: "Unna", serif} .body-unna { font-family: "Unna", serif} .heading-yanone-kaffeesatz h1, .heading-yanone-kaffeesatz .h1, .heading-yanone-kaffeesatz h2, .heading-yanone-kaffeesatz .h2, .heading-yanone-kaffeesatz h3, .heading-yanone-kaffeesatz .h3, .heading-yanone-kaffeesatz h4, .heading-yanone-kaffeesatz .h4, .heading-yanone-kaffeesatz h5, .heading-yanone-kaffeesatz .h5 { font-family: "Yanone Kaffeesatz", sans-serif} .body-yanone-kaffeesatz { font-family: "Yanone Kaffeesatz", sans-serif} .heading-zilla-slab h1, .heading-zilla-slab .h1, .heading-zilla-slab h2, .heading-zilla-slab .h2, .heading-zilla-slab h3, .heading-zilla-slab .h3, .heading-zilla-slab h4, .heading-zilla-slab .h4, .heading-zilla-slab h5, .heading-zilla-slab .h5 { font-family: "Zilla Slab", serif} .body-zilla-slab { font-family: "Zilla Slab", serif} h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-weight: 700; line-height: 1; margin-bottom: var(--item-gap)} h1, .h1 { font-size: var(--text-h1)} h2, .h2 { font-size: var(--text-h2)} h3, .h3 { font-size: var(--text-h3)} h4, .h4 { font-size: var(--text-h4)} h5, .h5 { font-size: var(--text-h5)} .wysiwyg a:not(.btn):not(.hero-tag) { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: left bottom; background-repeat: no-repeat; background-size: 100% 2px} .wysiwyg a:not(.btn):not(.hero-tag):hover, .wysiwyg a:not(.btn):not(.hero-tag):focus { animation: reDrawUnderline 0.6s ease-out forwards} p, ul, ol { margin-bottom: calc(var(--item-gap) * 0.75)} .wysiwyg > *:first-child { margin-top: 0 !important} .wysiwyg > *:last-child { margin-bottom: 0 !important} .wysiwyg::after { content: ""; display: block; clear: both} .wysiwyg ul, .wysiwyg ol { margin-left: var(--item-gap)} .wysiwyg table { width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0; box-sizing: border-box; border: 1px solid var(--gray-dim); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: calc(var(--item-gap) * 0.75); background: var(--white); font-size: var(--text-sm)} .wysiwyg thead th { background: var(--gray); color: var(--bg-light-text); font-size: var(--text-base); font-weight: 700; text-align: left; border-bottom: 1px solid var(--gray-dim)} .wysiwyg th, .wysiwyg td { padding: calc(var(--item-gap) * 0.5) calc(var(--item-gap) * 0.65); border: 0; border-top: 1px solid var(--gray-dim); border-left: 1px solid var(--gray-dim); vertical-align: top; line-height: 1.4} .wysiwyg tr:first-child > * { border-top: 0} .wysiwyg tr > *:first-child { border-left: 0} .wysiwyg tbody tr:first-child > * { border-top: 0} .wysiwyg tbody tr:nth-child(even) { background: var(--gray)} .wysiwyg tbody tr:hover { background: color-mix(in srgb, var(--medium) 10%, var(--white))} .wysiwyg table.hover-cell tbody tr:hover { background: none} .wysiwyg table.hover-cell tbody td:hover { background: color-mix(in srgb, var(--medium) 10%, var(--white))} .wysiwyg td[style*="text-align: center"], .wysiwyg th[style*="text-align: center"] { text-align: center} .wysiwyg td[style*="text-align: right"], .wysiwyg th[style*="text-align: right"] { text-align: right} @media (max-width: 1023px) { .wysiwyg table:not(:has(.review-icon)) { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch} .wysiwyg table:not(:has(.review-icon)) th, .wysiwyg table:not(:has(.review-icon)) td { min-width: 11rem; white-space: nowrap} } .wysiwyg .align_left, .wysiwyg .align_right { max-width: 100%; margin: 1.5em 0} @media (min-width: 600px) { .wysiwyg .align_left, .wysiwyg .align_right { max-width: 40%} .wysiwyg .align_right { float: right; margin: 0 0 1.5em 1.5em} .wysiwyg .align_left { float: left; margin: 0 1.5em 1.5em 0} } @keyframes reDrawUnderline { 0 { background-size: 0 2px} 100% { background-size: 100% 2px} } .section-row { padding: var(--section-padding) 0; position: relative} .inner-section { padding: calc(var(--section-padding) * 0.5)} .section-row .container { width: var(--content-width); margin-inline: auto; padding-inline: var(--header-pad-x)} @media (max-width: 1450px) { .section-row .container { max-width: var(--content-width); width: auto} } .container-5050 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--item-gap) * 3); align-items: center} @media (max-width: 767px) { .container-5050 { grid-template-columns: 1fr; gap: calc(var(--item-gap) * 1.5)} } .section-row + .section-row { margin-top: calc(var(--section-padding) * -1)} .section-row.has-bg + .section-row, .section-row.has-bg + .section-row.has-bg, .section-row + .section-row.has-bg { margin-top: 0} .section-row.has-bg.bg-dark + .section-row.has-bg.bg-dark, .section-row.has-bg.bg-dark-dim + .section-row.has-bg.bg-dark-dim, .section-row.has-bg.bg-dark-tint + .section-row.has-bg.bg-dark-tint, .section-row.has-bg.bg-medium + .section-row.has-bg.bg-medium, .section-row.has-bg.bg-medium-dim + .section-row.has-bg.bg-medium-dim, .section-row.has-bg.bg-medium-tint + .section-row.has-bg.bg-medium-tint, .section-row.has-bg.bg-light + .section-row.has-bg.bg-light, .section-row.has-bg.bg-light-dim + .section-row.has-bg.bg-light-dim, .section-row.has-bg.bg-light-tint + .section-row.has-bg.bg-light-tint, .section-row.has-bg.bg-white + .section-row.has-bg.bg-white { margin-top: calc(var(--section-padding) * -1)} .container-7030 { display: grid; grid-template-columns: 7.5fr 2.5fr; gap: calc(var(--item-gap) * 2)} .container-7030 > * { min-width: 0} @media (max-width: 1023px) { .container-7030 { grid-template-columns: 1fr; gap: calc(var(--item-gap) * 1.5)} .container-7030 .sidebar-col { order: -1} } .content-col .section-row .container { max-width: var(--content-width); width: auto; padding-inline: 0} .content-col .section-row:first-of-type { padding-top: 0} .content-col .section-row:last-of-type { padding-bottom: 0} .content-col .section-row.has-bg { padding: calc(var(--section-padding) * 0.5); border-radius: var(--radius-sm)} .content-col .section-row.has-bg + .section-row.has-bg { margin-top: var(--section-padding)} .content-col .section-row.has-bg.bg-dark + .section-row.has-bg.bg-dark, .content-col .section-row.has-bg.bg-dark-dim + .section-row.has-bg.bg-dark-dim, .content-col .section-row.has-bg.bg-dark-tint + .section-row.has-bg.bg-dark-tint, .content-col .section-row.has-bg.bg-medium + .section-row.has-bg.bg-medium, .content-col .section-row.has-bg.bg-medium-dim + .section-row.has-bg.bg-medium-dim, .content-col .section-row.has-bg.bg-medium-tint + .section-row.has-bg.bg-medium-tint, .content-col .section-row.has-bg.bg-light + .section-row.has-bg.bg-light, .content-col .section-row.has-bg.bg-light-dim + .section-row.has-bg.bg-light-dim, .content-col .section-row.has-bg.bg-light-tint + .section-row.has-bg.bg-light-tint, .content-col .section-row.has-bg.bg-white + .section-row.has-bg.bg-white { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0} .content-col .section-row.has-bg.bg-dark:has(+ .section-row.has-bg.bg-dark), .content-col .section-row.has-bg.bg-dark-dim:has(+ .section-row.has-bg.bg-dark-dim), .content-col .section-row.has-bg.bg-dark-tint:has(+ .section-row.has-bg.bg-dark-tint), .content-col .section-row.has-bg.bg-medium:has(+ .section-row.has-bg.bg-medium), .content-col .section-row.has-bg.bg-medium-dim:has(+ .section-row.has-bg.bg-medium-dim), .content-col .section-row.has-bg.bg-medium-tint:has(+ .section-row.has-bg.bg-medium-tint), .content-col .section-row.has-bg.bg-light:has(+ .section-row.has-bg.bg-light), .content-col .section-row.has-bg.bg-light-dim:has(+ .section-row.has-bg.bg-light-dim), .content-col .section-row.has-bg.bg-light-tint:has(+ .section-row.has-bg.bg-light-tint), .content-col .section-row.has-bg.bg-white:has(+ .section-row.has-bg.bg-white) { border-bottom-left-radius: 0; border-bottom-right-radius: 0} .section-image { position: relative; height: 100%} .section-image img { border-radius: var(--radius-sm); width: 100%; object-fit: cover; display: block} @media (max-width: 767px) { .section-image img { max-height: 250px} } .section-image-bg { position: relative; height: 100%; border-radius: var(--radius-sm); overflow: hidden} .bg-image-text { position: relative; z-index: 2; display: flex; flex-direction: column; text-align: center; justify-content: center; height: 100%} .bg-image, .bg-image-no-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; img { width: 100%; height: 100%; object-fit: cover; display: block} } .section-image-bg .bg-image img { border-radius: var(--radius-sm)} .section-row.hide-header .section-header { display: none !important} .section-row.show-header .section-header { display: block} .section-header { text-align: center; max-width: 1000px; margin-left: auto; margin-right: auto} .section-header p { margin-bottom: var(--item-gap)} ul.hours-list { list-style: none; display: flex; flex-direction: column; gap: calc(var(--item-gap) * 0.56)} ul.hours-list li { display: grid; grid-template-columns: 1fr 3fr} .ctas-3 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--item-gap); width: max-content; max-width: 100%; @media (max-width: 767px) { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); width: 100%; &:has(.btn:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr)} .btn:first-child:nth-last-child(3) { grid-column: span 2} .btn:only-child { grid-column: span 2} @media (max-width: 400px) { grid-template-columns: 1fr; &:has(.btn:nth-child(2):last-child) { grid-template-columns: 1fr} .btn:first-child:nth-last-child(3), .btn:only-child { grid-column: span 1} } } } .ctas-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--item-gap); @media (max-width: 767px) { grid-template-columns: 1fr} } .ctas-2 > * { width: 100%} .text-lead { font-size: var(--text-lg)} .section-notice .section-text { border-radius: var(--radius-sm); padding: calc(var(--section-padding) * 0.5)} .wysiwyg table .review-icon a { background-image: none !important} .wysiwyg table .review-icon i { font-size: var(--text-h1)} .section-accordion .section-header { text-align: center; margin-bottom: var(--item-gap)} .ac-list { max-width: 900px; margin-inline: auto} .ac-item+.ac-item { margin-top: calc(var(--item-gap) *.75)} .ac-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--item-gap); width: 100%; padding: calc(var(--item-gap)*.5) calc(var(--item-gap) * .5); border-radius: var(--radius-sm); border: none; cursor: pointer; color: inherit; text-align: left; transition: background-color var(--trans-fast); .ac-icon { border-radius: 50%; background-color: var(--medium); padding: 5px; i { flex-shrink: 0; font-size: var(--text-sm); transition: transform var(--trans-normal); color: var(--white)} } &:hover { background-color: var(--medium) !important; color: var(--white); .ac-icon { background-color: var(--white); i { color: var(--medium)} } } &:focus-visible { outline: var(--focus-ring); outline-offset: -2px} &[aria-expanded="true"] .ac-icon i { transform: rotate(180deg)} } .bg-light .ac-trigger { background-color: var(--white) !important; .ac-icon { background-color: var(--white); i { color: var(--medium)} } &:hover { background-color: var(--medium) !important; color: var(--white); .ac-icon { background-color: var(--white); i { color: var(--dark)} } } } .ac-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--trans-normal); .ac-panel-content { overflow: hidden; padding: calc(var(--item-gap)*.5) calc(var(--item-gap) * .5) 0 calc(var(--item-gap) * .5); p { font-size: var(--text-sm)} p:last-child { margin-bottom: 0} } &[aria-hidden="false"] { grid-template-rows: 1fr} }.section-book { &.hide-bgimage { .bg-image { display: none} } .container { display: flex; flex-direction: column; align-items: center; gap: var(--item-gap); text-align: center; position: relative; z-index: 2; @media (min-width: 1024px) { flex-direction: row; justify-content: space-between; text-align: left; &:has(> .book-actions:only-child) { justify-content: center; text-align: center} } } .h2 { margin-bottom: 0} } .book-actions { display: flex; flex-wrap: wrap; gap: var(--item-gap); justify-content: center; @media (min-width: 1024px) { flex-shrink: 0} } .section-book .container > .book-actions:only-child { width: 100%; align-items: center} .breadcrumbs-section { padding: calc(var(--section-padding) * 0.5) 0; &.hide-breadcrumbs { display: none} } .breadcrumbs-section .container { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--header-pad-x); @media (max-width: 767px) { padding: 0 var(--mobile-pad)} } .breadcrumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--item-gap) * 0.5); font-size: var(--text-sm)} .breadcrumbs li { display: flex; align-items: center; gap: calc(var(--item-gap) * 0.5)} .breadcrumbs li::after { content: "/"; color: currentColor; opacity: 0.5} .breadcrumbs li:last-child::after { content: none} .breadcrumbs a { text-decoration: none; transition: opacity var(--trans-fast); &:hover, &:focus-visible { text-decoration: underline; opacity: 0.8} &:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; border-radius: 2px} } .breadcrumbs li:last-child { font-weight: 600} .btn { display: inline-flex; align-items: center; justify-content: center; padding: calc(var(--item-gap) * 0.38) calc(var(--item-gap) * 0.75); border-radius: var(--radius-sm); text-decoration: none; font-weight: 700; font-size: var(--text-sm); text-align: center; white-space: nowrap; transition: all var(--trans-fast); cursor: pointer; border-width: 2px; border-style: solid; gap: calc(var(--item-gap) * 0.38); &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} } .btn-dark { background-color: var(--btn-dark-bg); color: var(--btn-dark-color); border-color: var(--btn-dark-border); &:hover { background-color: var(--btn-dark-hover-bg); border-color: var(--btn-dark-hover-border); color: var(--btn-dark-hover-color)} } .btn-dark-outline { background-color: var(--btn-dark-outline-bg); color: var(--btn-dark-outline-color); border-color: var(--btn-dark-outline-border); &:hover { background-color: var(--btn-dark-outline-hover-bg); color: var(--btn-dark-outline-hover-color); border-color: var(--btn-dark-outline-hover-border)} } .btn-medium { background-color: var(--btn-medium-bg); color: var(--btn-medium-color); border-color: var(--btn-medium-border); &:hover { background-color: var(--btn-medium-hover-bg); border-color: var(--btn-medium-hover-border); color: var(--btn-medium-hover-color)} } .btn-medium-outline { background-color: var(--btn-medium-outline-bg); color: var(--btn-medium-outline-color); border-color: var(--btn-medium-outline-border); &:hover { background-color: var(--btn-medium-outline-hover-bg); color: var(--btn-medium-outline-hover-color); border-color: var(--btn-medium-outline-hover-border)} } .btn-white { background-color: var(--btn-white-bg); color: var(--btn-white-color); border-color: var(--btn-white-border); &:hover { background-color: var(--btn-white-hover-bg); border-color: var(--btn-white-hover-border); color: var(--btn-white-hover-color)} } .btn-white-outline { background-color: var(--btn-white-outline-bg); color: var(--btn-white-outline-color); border-color: var(--btn-white-outline-border); &:hover { background-color: var(--btn-white-outline-hover-bg); color: var(--btn-white-outline-hover-color); border-color: var(--btn-white-outline-hover-border)} } .btn-link { background-color: transparent; border-color: transparent; color: currentColor; &:hover { background-color: var(--btn-dark-bg); border-color: var(--btn-dark-bg); color: var(--btn-dark-color)} } .btn-full { display: flex; width: 100%; padding: calc(var(--item-gap) * 0.75)} .btn-icon, .btn-icon-end { > i:last-child { font-size: var(--text-sm); line-height: 1} } .btn-icon { > i:last-child { margin-left: calc(var(--item-gap) * 0.17)} } .btn-icon-end { justify-content: space-between; text-align: left; > i:last-child { margin-left: calc(var(--item-gap) * 0.75)} } .mobile-toggle { display: none; cursor: pointer; font-size: var(--text-xl); padding: calc(var(--item-gap) * 0.19); border-radius: var(--radius-sm); width: calc(var(--item-gap) * 2.11); height: calc(var(--item-gap) * 2.11); text-align: center; line-height: calc(var(--item-gap) * 1.73); background: transparent; border: 2px solid var(--dark); color: var(--dark); transition: background-color var(--trans-fast); &:hover { background-color: var(--light-dim) !important} &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} } .cd1 .cd-list { display: grid; grid-template-columns: 1fr; gap: var(--item-gap); @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr)} @media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr)} } .cd1 .cd-card { display: flex; flex-direction: column} .cd1 .cd-card-image { aspect-ratio: 4 / 3} .cd1 .cd-card-content { padding: var(--item-gap)} @media (min-width: 768px) { .cd1 .cd-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--item-gap)} .cd1 .cd-list > .cd-card { width: calc((100% - var(--item-gap)) / 2)} } @media (min-width: 1024px) { .cd1 .cd-list > .cd-card { width: calc((100% - (var(--item-gap) * 2)) / 3)} } .cd2 .cd-list { display: flex; flex-direction: column; gap: calc(var(--item-gap) * 2)} .cd2.img-top .cd-card { display: grid; grid-template-columns: 1fr; gap: 0; @media (min-width: 768px) { grid-template-columns: 1fr 3fr} } .cd2.img-top .cd-card-image { aspect-ratio: 16 / 10; @media (min-width: 768px) { aspect-ratio: auto} } .cd2.img-top .cd-card-content { padding: calc(var(--item-gap) * 1.5); justify-content: center}.section-cards .section-header { text-align: center} .cd-card { border-radius: var(--radius-sm); overflow: hidden; &:hover .cd-card-image img { transform: scale(1.05)} } .cd-card-image { overflow: hidden; img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--trans-slow)} &:empty { display: none} } .cd-card-content { display: flex; flex-direction: column; gap: calc(var(--item-gap) * .5); align-items: flex-start; h3 { font-size: var(--text-h5); margin: 0} p { font-size: var(--text-sm); line-height: 1.6; margin: 0} } .section-cards.img-top { .cd-card { display: flex; flex-direction: column} .cd-card-image { aspect-ratio: 4 / 3} .cd-card-content { padding: var(--item-gap) var(--item-gap) var(--item-gap) 0} } .section-cards.img-left .cd-card, .section-cards.img-right .cd-card { display: grid; grid-template-columns: 1fr; gap: 0; @media (min-width: 768px) { grid-template-columns: 1fr 3fr} } .section-cards.img-left .cd-card-image, .section-cards.img-right .cd-card-image { aspect-ratio: 16 / 10; @media (min-width: 768px) { aspect-ratio: auto} } .section-cards.img-left .cd-card-content, .section-cards.img-right .cd-card-content { padding: calc(var(--item-gap) * 1.5); justify-content: center} .section-cards.img-right .cd-card { @media (min-width: 768px) { grid-template-columns: 3fr 1fr; .cd-card-image { order: 2} .cd-card-content { order: 1} } }.section-carousel .section-header { text-align: center} .carousel-wrapper { position: relative} .carousel-slide { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; img { width: 100%; height: 100%; object-fit: cover; display: block} } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: calc(var(--item-gap) * 1.5); height: calc(var(--item-gap) * 1.5); border-radius: 50%; border: 2px solid var(--medium); background: var(--white); color: var(--medium); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--text-base); box-shadow: var(--shadow-md); transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast); &:hover { background: var(--medium); color: var(--white); border-color: var(--medium)} &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} } .carousel-btn-prev { left: calc(var(--item-gap) * -.7)} .carousel-btn-next { right: calc(var(--item-gap) * -.7)}.site-footer { padding-top: calc(var(--item-gap) * 3); font-size: var(--text-2xs); position: relative; z-index: 10; font-weight: normal; a:not(.btn) { text-decoration: none; transition: color var(--trans-fast); &:hover { } } } .footer-inner { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--header-pad-x)} .footer-copyright { margin-top: calc(var(--item-gap) * 1.5); padding: calc(var(--item-gap) * 0.75) 0; text-align: center; font-size: var(--text-xs)} .footer-emergency { margin-top: calc(var(--item-gap) * 1.5); & > * { margin-bottom: calc(var(--item-gap) * 0.75)} h4 { font-size: var(--text-base); font-weight: 700} } .social-circle { width: calc(var(--item-gap) * 1.88); height: calc(var(--item-gap) * 1.88); border-radius: 50%; border: 1px solid var(--white); display: flex; align-items: center; justify-content: center; transition: all var(--trans-fast); &:hover { } } .footer-contact-item { display: flex; gap: calc(var(--item-gap) * 0.56); align-items: flex-start; margin-bottom: calc(var(--item-gap) * 0.75); i { margin-top: calc(var(--item-gap) * 0.19)} } .footer-grid a:hover, .footer-grid a:focus { text-decoration: underline} .footer-1 { .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: calc(var(--item-gap) * 2.25); @media (max-width: 1023px) { flex-direction: column; align-items: center; text-align: center; gap: calc(var(--item-gap) * 2)} } .footer-logo img { height: calc(var(--item-gap) * 2.25); width: auto} .footer-actions { display: flex; gap: var(--item-gap); @media (max-width: 1023px) { width: 100%; flex-direction: row; gap: 0.625rem; .btn { flex: 1; padding: calc(var(--item-gap) * 0.56) calc(var(--item-gap) * 0.38); font-size: var(--text-xs)} } } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--item-gap) * 1.33); @media (max-width: 1023px) { display: flex; flex-direction: column; gap: 0} } .footer-col { h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: calc(var(--item-gap) * 0.94); color: var(--white); @media (max-width: 1023px) { display: none} } ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: calc(var(--item-gap) * 0.56)} .footer-accordion-content h3 { display: none; @media (max-width: 1023px) { display: block} } @media (max-width: 1023px) { border-top: 1px solid rgba(var(--white-rgb), 0.1); &:last-child { padding-top: var(--item-gap)} } } .footer-socials { display: flex; gap: var(--item-gap); margin-top: var(--item-gap)} } .footer-accordion-btn { display: none; @media (max-width: 1023px) { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; color: var(--white); font-size: var(--text-base); font-weight: 700; padding: calc(var(--item-gap) * 0.94) 0; cursor: pointer; text-align: left; &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} } i { transition: transform 0.2s} } .footer-accordion-content { @media (max-width: 1023px) { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; &.static-content { max-height: none; display: block} ul { padding-bottom: var(--item-gap)} .contact-wrap { padding: var(--item-gap); background-color: var(--dark-tint); border-radius: var(--radius-sm)} } } .footer-col.is-open { .footer-accordion-content { max-height: fit-content; padding-bottom: var(--item-gap)} .footer-accordion-btn i { transform: rotate(180deg)} } .footer-2 { padding-top: calc(var(--item-gap) * 3.75); .footer-intro { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--item-gap) * 2.25); align-items: start; margin-bottom: calc(var(--item-gap) * 3); border-bottom: 1px solid rgba(var(--white-rgb), 0.1); padding-bottom: calc(var(--item-gap) * 2.25)} .footer-logo img { max-height: calc(var(--item-gap) * 7.5); width: auto} .social-row { display: flex; justify-content: flex-end; gap: var(--item-gap); margin-bottom: calc(var(--item-gap) * .75)} p { color: var(--light-tint); margin-bottom: var(--item-gap)} .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: calc(var(--item-gap) * 1.33)} .footer-col { h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: calc(var(--item-gap) * .94); color: var(--white)} ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: calc(var(--item-gap) * .56)} } @media (max-width: 1023px) { .footer-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--item-gap)} .social-row { justify-content: center} .btn-group { display: flex; gap: var(--item-gap); justify-content: center; width: 100%; .btn { flex: 1; padding: 0.75rem 0.5rem; font-size: var(--text-xs)} } .footer-grid { display: flex; flex-direction: column; gap: calc(var(--item-gap) * 1.33)} .footer-col ul.two-col-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--item-gap) * .56) calc(var(--item-gap) * .75)} .footer-map-col { order: 1} .footer-services-col { order: 2; .footer-emergency { display: none} } .footer-resources-col { order: 3} .footer-hours-col { order: 4} } } .footer-2-intro-text { text-align: right; @media (max-width: 1023px) { text-align: center; width: 100%} } .nested-emergency { margin-top: calc(var(--item-gap) * 1.5); .emergency-subtext { margin-top: calc(var(--item-gap) * .38)} } .footer-map-col .map-embed { height: 300px} .footer-map-col>img { width: 100%; height: auto; border-radius: var(--radius-sm); margin-top: calc(var(--item-gap) * .75); opacity: 0.8; transition: opacity var(--trans-fast); &:hover { opacity: 1} } .footer-hours-col .footer-emergency { display: none; @media (max-width: 1023px) { display: block} } #headerWrapper { width: 100%; background-color: var(--white); transition: box-shadow var(--trans-normal); &.use-original-sticky { position: sticky; top: 0; z-index: var(--z-sticky); box-shadow: var(--shadow-md)} } .top-bar { width: 100%; font-size: var(--text-xs); font-weight: 600; background-color: var(--light); border-bottom: 1px solid var(--gray); position: relative; z-index: 102; transition: all var(--trans-normal); &.force-hide { display: none} @media (max-width: 1023px) { display: none} } .top-bar-inner { max-width: var(--content-width); margin: 0 auto; padding: calc(var(--item-gap) * 0.38) var(--header-pad-x); display: flex; justify-content: space-between; align-items: center} .top-bar-left { a { text-decoration: none; display: flex; align-items: center; gap: calc(var(--item-gap) * 0.38); position: relative; &::after { content: ""; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: var(--medium); transition: width var(--trans-normal)} &:hover::after { width: 100%} } } .top-bar-right { ul { list-style: none; display: flex; gap: calc(var(--item-gap) * 0.94); margin: 0; padding: 0} a { text-decoration: none; transition: color var(--trans-fast); position: relative; &::after { content: ""; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: var(--medium); transition: width var(--trans-normal)} &:hover::after { width: 100%} } } .bg-medium .top-bar-left, .bg-medium .top-bar-right { a { &::after { background-color: var(--white)} } } .bg-medium-dim .top-bar-left, .bg-medium-dim .top-bar-right { a { &::after { background-color: var(--white)} } } .bg-medium-tint .top-bar-left, .bg-medium-tint .top-bar-right { a { &::after { background-color: var(--white)} } } .medium-tint-white .bg-medium-tint .top-bar-left, .medium-tint-white .bg-medium-tint .top-bar-right { a { &::after { background-color: var(--dark)} } } .site-header { width: 100%; margin: 0; background-color: var(--white); transition: all var(--trans-normal) ease; position: relative; z-index: 100} .logo-row { width: 100%; position: relative; z-index: 2; padding: calc(var(--item-gap) * 0.45) 0; @media (max-width: 1023px) { padding: 0} } .logo-row-inner { width: 100%; max-width: var(--content-width); margin: 0 auto; display: grid; padding: var(--header-pad-y) var(--header-pad-x); column-gap: calc(var(--item-gap) * 1.5); align-items: center} .nav-row { width: 100%; position: relative; z-index: 1; display: none; @media (max-width: 1023px) { display: none !important} } .nav-row-inner { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0 var(--header-pad-x); display: flex; align-items: center} .main-nav-inline { display: none; @media (max-width: 1023px) { display: none !important} } .header-logo { display: flex; align-items: center; text-decoration: none; img { display: block; height: 5rem; width: auto} } .contact-info i { font-size: 1.2em} .cta-group { display: flex; gap: var(--item-gap); align-items: center; .mph-phone-link { display: none} } .main-nav { display: flex; align-items: center; width: 100%; a { text-decoration: none; font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px; position: relative; transition: color var(--trans-fast); display: block; &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} } i { margin-left: calc(var(--item-gap) * 0.22); font-size: 0.85em; transition: transform var(--trans-fast)} li { position: relative; padding: calc(var(--item-gap) * 0.47) 0; &::after { content: ""; position: absolute; left: 0; bottom: -30px; width: 100%; height: 40px; background: transparent; z-index: inherit} & > a::after { content: ""; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: var(--medium); transition: width var(--trans-normal)} &:hover > a::after, &:focus-within > a::after { width: 100%} &:hover, &:focus-within { z-index: 5000} &:not(:hover):not(:focus-within) { z-index: 1} } .nav-list > li:hover > a i, .nav-list > li:focus-within > a i { transform: rotate(180deg)} } .bg-medium .main-nav li > a::after, .bg-medium-tint .main-nav li > a::after, .bg-medium-dim .main-nav li > a::after { background-color: var(--white) !important} .medium-white .bg-medium .main-nav li > a::after, .medium-tint-white .bg-medium-tint .main-nav li > a::after, .medium-dim-white .bg-medium-dim .main-nav li > a::after { background-color: var(--dark) !important} .nav-list { display: flex; list-style: none; gap: calc(var(--item-gap) * 1.5); margin: 0; padding: 0} #nav-mega, #nav-mega-bar { display: none} .menu-type-mega #nav-standard, .menu-type-mega #nav-standard-bar { display: none} .menu-type-mega #nav-mega, .menu-type-mega #nav-mega-bar { display: flex} .standard-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); padding: calc(var(--item-gap) * 0.75) 0; z-index: var(--z-dropdown); text-align: left; background-color: var(--white); a { display: block; padding: calc(var(--item-gap) * 0.47) calc(var(--item-gap) * 0.94); color: var(--dark) !important; font-weight: 500; font-size: var(--text-sm); text-transform: none; &::before { display: none} &:hover { background-color: var(--light); color: var(--dark) !important} &:focus-visible { outline: var(--focus-ring); outline-offset: -2px} } } .mega-parent { position: static !important} .mega-dropdown { display: none; position: absolute; top: calc(100% + 20px); left: 50%; width: calc(var(--content-width) - 120px); max-width: calc(var(--content-width) - 120px); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); border-radius: var(--radius-sm); transform: translateX(-50%); margin-top: 0; background-color: var(--white)} .mega-inner { padding: calc(var(--item-gap) * 1.5) calc(var(--item-gap) * 1.88)} .mega-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(var(--item-gap) * 1.88); width: 100%} .mega-col { ul { list-style: none; display: flex; flex-direction: column; gap: 0} a { padding: calc(var(--item-gap) * 0.56) 0; border-bottom: 1px solid var(--gray); font-weight: 600; text-transform: none; color: var(--gray-dim) !important; transition: all var(--trans-fast); display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); &::before { display: none} &:hover { color: var(--medium) !important} &.mega-img-link { display: flex; flex-direction: column; position: relative; border-radius: calc(var(--item-gap) * 0.38); overflow: hidden; height: 100%; min-height: calc(var(--item-gap) * 9.38); text-decoration: none; border: none !important; img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; border-radius: var(--radius-sm)} span { position: relative; bottom: 0; left: 0; background: var(--white); color: var(--dark); padding: calc(var(--item-gap) * 0.75) calc(var(--item-gap) * 0.75) calc(var(--item-gap) * 0.19); text-align: center; font-weight: 700; text-transform: uppercase; font-size: var(--text-sm); transition: background var(--trans-normal); align-self: center; display: inline-flex; width: min-content; &::before { content: ""; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--medium); transition: width var(--trans-normal) cubic-bezier(0.25, 0.46, 0.45, 0.94)} } &:hover span::before { width: 100%} } } li:last-child a { border-bottom: none} } .secondary-nav-links { display: none; list-style: none; margin: 0; padding: 0; margin-left: auto; padding-left: calc(var(--item-gap) * 1.5) !important; gap: calc(var(--item-gap) * 0.94); a { text-transform: none; font-weight: 600; font-size: var(--text-xs)} li:hover > a { color: var(--dark)} } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px)} to { opacity: 1; transform: translateY(0)} } @keyframes fadeInMega { from { opacity: 0; transform: translateX(-50%) translateY(5px)} to { opacity: 1; transform: translateX(-50%) translateY(0)} } .mobile-menu-drawer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--white); z-index: var(--z-drawer); overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; &.is-open { transform: translateX(0)} } .drawer-header { display: flex; align-items: center; padding: calc(var(--item-gap) * 0.75) var(--mobile-pad); border-bottom: 1px solid var(--border-gray); gap: var(--item-gap); .header-logo { margin-right: auto} .contact-info { margin-right: 0; width: calc(var(--item-gap) * 1.88); height: calc(var(--item-gap) * 1.88); padding: 0} } .drawer-close.btn { width: calc(var(--item-gap) * 1.88); height: calc(var(--item-gap) * 1.88); padding: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-xl)} .drawer-nav { padding: var(--mobile-pad); a > span { display: flex; align-items: center; gap: var(--item-gap); span:first-child { width: 60px; text-align: center} } & > *:last-child { border-bottom-color: transparent} } .drawer-item { border-bottom: 1px solid var(--border-gray); &.open { .drawer-submenu { display: block} .drawer-toggle i { transform: rotate(180deg)} } } .drawer-row { display: flex; align-items: stretch; width: 100%} .drawer-link { flex: 1; display: flex; align-items: center; padding: calc(var(--item-gap) * 0.75) 0; background: none; border: none; font-size: var(--text-base); font-weight: 700; color: var(--dark); text-decoration: none; text-align: left; transition: color 0.2s; &:hover { color: var(--medium)} &:focus-visible { outline: var(--focus-ring); outline-offset: -2px} } .drawer-toggle { width: calc(var(--item-gap) * 2.34); display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--medium); border-left: 1px solid var(--border-gray); &:hover { background-color: var(--border-gray)} &:focus-visible { outline: var(--focus-ring); outline-offset: -2px} } .drawer-submenu { display: none; padding-left: 0; list-style: none; padding-bottom: calc(var(--item-gap) * 0.75); li { border-bottom: 1px solid var(--border-gray); width: calc(100% - 50px); &:last-of-type { border-bottom-color: transparent} a { display: block; padding: calc(var(--item-gap) * 0.38) 0; color: var(--gray-dim); text-decoration: none; font-size: var(--text-sm); transition: color 0.2s; &:hover { color: var(--medium)} &:focus-visible { outline: var(--focus-ring); outline-offset: -2px} } } } .drawer-toggle i { transition: transform 0.2s} .drawer-solo-link { display: block; padding: calc(var(--item-gap) * 0.75) 0; border-bottom: 1px solid var(--border-gray); font-size: var(--text-base); font-weight: 700; color: var(--dark); text-decoration: none; &:hover { color: var(--medium)} &:focus-visible { outline: var(--focus-ring); outline-offset: -2px} } .drawer-quick-actions { display: none; padding: var(--mobile-pad); justify-content: space-evenly; gap: calc(var(--item-gap) * 0.94)} .circle-btn { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--item-gap) * 0.47); text-decoration: none; color: var(--dark); font-weight: 700; font-size: var(--text-sm); &:hover { color: var(--medium)} } .circle-icon { width: calc(var(--item-gap) * 6); height: calc(var(--item-gap) * 6); border-radius: 50%; background-color: var(--light); display: flex; align-items: center; justify-content: center; color: var(--medium); font-size: calc(var(--text-xl) * 2); transition: all 0.2s; &.outline { background: transparent; border: 2px solid var(--medium)} } .drawer-cta { padding: 0 var(--mobile-pad) calc(var(--item-gap) * 0.94)} .btn-drawer-full { width: 100%; display: flex; align-items: center; justify-content: center; gap: calc(var(--item-gap) * 0.47); font-size: var(--text-base); padding: calc(var(--item-gap) * 0.75)} .drawer-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--item-gap) * 0.75) calc(var(--item-gap) * 0.47); padding: calc(var(--item-gap) * 0.94); text-align: center; a { color: var(--dark); font-weight: 700; text-decoration: none; font-size: var(--text-sm); transition: color 0.2s; &:hover { color: var(--medium)} } } .drawer-link i, .drawer-solo-link i { color: var(--medium-tint); font-size: calc(var(--text-xl) * 2); width: calc(var(--text-xl) * 2); text-align: center; display: none} .mobile-menu-list { .drawer-link i, .drawer-solo-link i { display: inline-block} .btn-phone-var { display: none} } .mobile-menu-circles { .drawer-quick-actions { display: flex} .btn-book-var { display: none} .drawer-header .contact-info { display: none} } .header-alert { width: 100%; position: relative; z-index: 1; padding: calc(var(--item-gap) * 0.5) 0; font-size: var(--text-sm); line-height: 1.5; transition: all var(--trans-normal); border-bottom: 1px solid rgba(0, 0, 0, 0.1); &.is-dismissed { display: none} } .header-alert-inner { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--header-pad-x); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--item-gap) * 0.75); @media (max-width: 767px) { padding: 0 var(--mobile-pad)} } .header-alert-inner p { margin: 0; flex: 1; a { text-decoration: underline; font-weight: 600; transition: opacity var(--trans-fast); &:hover, &:focus-visible { opacity: 0.8} } } .header-alert-close { background: none; border: none; padding: calc(var(--item-gap) * 0.25); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background-color var(--trans-fast); flex-shrink: 0; i { font-size: 1.25em; pointer-events: none} &:hover, &:focus-visible { background-color: rgba(0, 0, 0, 0.1)} &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px} } @media (min-width: 1024px) { .mobile-toggle, .mobile-menu-drawer { display: none} .desktop-layout-1 { .top-bar { display: block} .main-nav-inline { display: none} .logo-row-inner { grid-template-columns: auto 1fr auto; grid-template-areas: "logo . cta"; padding: var(--header-pad-y) var(--header-pad-x)} .header-logo { grid-area: logo} .cta-group { grid-area: cta; justify-self: end} .contact-info { display: none} .nav-row { display: block; position: relative; z-index: 1; .main-nav { justify-content: center; a { font-size: var(--text-sm)} li > a::before { background-color: var(--medium)} li:hover > a::before, li:focus-within > a::before { width: 100%} li > a::after { background-color: var(--medium)} li:hover > a::after, li:focus-within > a::after { width: 100%} } .nav-list { gap: calc(var(--item-gap) * 5.25)} } .nav-row-inner { padding: var(--header-pad-y) var(--header-pad-x); justify-content: center} } } @media (min-width: 1024px) { .desktop-layout-2 { .top-bar { display: block} .nav-row { display: none} .main-nav-inline { display: flex; grid-area: nav; justify-content: start} .logo-row-inner { grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav cta"} .header-logo { grid-area: logo} .cta-group { grid-area: cta} .contact-info { display: none} } }@media (min-width: 1024px) { .desktop-layout-3 { .top-bar { display: block} .nav-row { display: none} .main-nav-inline { display: flex; grid-area: nav; justify-content: flex-start} .logo-row-inner { grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav logo cta"} .header-logo { grid-area: logo; justify-self: center} .cta-group { grid-area: cta; justify-self: end} .contact-info { display: none} } }@media (min-width: 1024px) { .desktop-layout-4 { .top-bar { display: none} .main-nav-inline { display: none} .logo-row-inner { grid-template-columns: auto 1fr auto; grid-template-areas: "logo . cta"; padding: var(--header-pad-y) var(--header-pad-x)} .header-logo { grid-area: logo} .cta-group { grid-area: cta; justify-self: end; .mph-phone-link { display: block !important} } .contact-info { display: none} .nav-row { display: block; background-color: var(--light); position: relative; z-index: 1; .main-nav { justify-content: space-between} .secondary-nav-links { display: flex} } .nav-row-inner { padding: var(--header-pad-y) var(--header-pad-x)} } } @media (max-width: 1023px) { .logo-row-inner { padding: calc(var(--item-gap) * .75) var(--mobile-pad); row-gap: var(--item-gap); align-items: center} .main-nav { display: none} .mobile-toggle { display: block; flex-shrink: 0} .mobile-layout-1 { .logo-row-inner { grid-template-columns: 1fr auto auto; grid-template-areas: "logo contact toggle" "cta cta cta"; row-gap: var(--item-gap); column-gap: calc(var(--item-gap) * .47)} .header-logo { grid-area: logo; min-width: 0} .mobile-toggle { grid-area: toggle; width: calc(var(--item-gap) * 2.11); height: calc(var(--item-gap) * 2.11)} .contact-info.btn-dark { grid-area: contact; width: calc(var(--item-gap) * 2.11); height: calc(var(--item-gap) * 2.11); flex-shrink: 0; padding: 0; justify-content: center} .contact-info span { display: none} .contact-info i { font-size: var(--text-lg)} .cta-group { grid-area: cta; width: calc(100% + (var(--mobile-pad) * 2)); margin: 0 calc(var(--mobile-pad) * -1) calc(var(--mobile-pad) * -1) calc(var(--mobile-pad) * -1); .btn-dark-outline { display: none} .btn-medium { width: 100%; border-radius: 0; padding: calc(var(--item-gap) * .75); border: none; font-size: var(--text-base)} } } }@media (max-width: 1023px) { .mobile-layout-2 { .top-bar { display: none} .logo-row-inner { padding-top: 0; grid-template-columns: 1fr auto; grid-template-rows: auto auto; grid-template-areas: "toprow toprow" "logo toggle"; row-gap: var(--item-gap)} .contact-info { display: none} .cta-group { grid-area: toprow; width: calc(100% + (var(--mobile-pad) * 2)); margin: 0 calc(var(--mobile-pad) * -1); display: flex; gap: 0; .btn-dark-outline, .btn-medium { display: none} .btn { display: block !important; width: 50%; border-radius: 0} .btn-link { background-color: var(--light); color: var(--dark); border-color: var(--light); i { color: var(--medium)} } .mph-food-link { display: none !important} } .header-logo { grid-area: logo; margin-top: calc(var(--item-gap) * .23)} .mobile-toggle { grid-area: toggle; margin-top: calc(var(--item-gap) * .23); justify-self: end} } }@media (max-width: 1023px) { .mobile-layout-3 { .top-bar { display: none} .logo-row-inner { padding-top: 0; grid-template-columns: 1fr auto auto; grid-template-areas: "cta cta cta" "logo contact toggle"; row-gap: var(--item-gap); column-gap: calc(var(--item-gap) * .47)} .cta-group { grid-area: cta; width: calc(100% + (var(--mobile-pad) * 2)); margin: 0 calc(var(--mobile-pad) * -1); .btn-dark-outline { display: none} .btn-medium { width: 100%; border-radius: 0; border: none; padding: calc(var(--item-gap) * .75)} } .contact-info.btn-dark { grid-area: contact; margin-top: calc(var(--item-gap) * .23); width: calc(var(--item-gap) * 2.11); height: calc(var(--item-gap) * 2.11); flex-shrink: 0; padding: 0; justify-content: center} .contact-info span { display: none} .contact-info i { font-size: var(--text-lg)} .header-logo, .mobile-toggle { margin-top: calc(var(--item-gap) * .23)} } }@media (max-width: 1023px) { .mobile-layout-4 { .top-bar { display: none} .logo-row-inner { grid-template-columns: calc(var(--item-gap) * 2.34) 1fr calc(var(--item-gap) * 2.34); grid-template-areas: "toggle logo contact" "extra extra extra"} .mobile-toggle { grid-area: toggle; order: 1; width: calc(var(--item-gap) * 2.11); height: calc(var(--item-gap) * 2.11); justify-self: start} .header-logo { grid-area: logo; justify-self: center; order: 2} .contact-info.btn-dark { grid-area: contact; order: 3; justify-self: end; width: calc(var(--item-gap) * 2.11); height: calc(var(--item-gap) * 2.11); flex-shrink: 0; padding: 0; justify-content: center} .contact-info span { display: none} .contact-info i { font-size: var(--text-lg)} .cta-group { display: block; grid-area: extra; .btn { display: none !important} .btn.mph-book-link { display: block !important} } } }.hero.ih1 { .hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center} .hero-content { align-items: center; max-width: 800px} }.hero.ih2 { .hero-inner { grid-template-columns: 1fr; justify-items: start; @media (max-width: 767px) { justify-items: center} } .hero-content { max-width: 420px; align-items: flex-start; @media (max-width: 767px) { max-width: 300px; align-items: center; text-align: center} } }.hero.ih3 { overflow: hidden; padding: 0; .container { margin-inline: 0; padding-inline: 0; @media (min-width: 768px) { margin-inline: auto; padding-inline: var(--header-pad-x)} } .hero-inner { display: grid; grid-template-columns: 1fr; align-items: end; @media (min-width: 1024px) { grid-template-columns: 1fr 1fr} @media (min-width: 768px) { grid-template-columns: 1fr 2fr; gap: calc(var(--item-gap) * 1.5)} } .hero-content { display: flex; flex-direction: column; height: 100%; padding: calc(var(--item-gap) * 1.13) 0; padding: calc(var(--item-gap) * 1.88) 0 0; max-width: 300px; justify-self: center; @media (min-width: 1024px) { max-width: 500px; padding: 4rem 0 2rem; padding: calc(var(--item-gap) * 3) 0 calc(var(--item-gap) * 1.5)} @media (min-width: 768px) { text-align: left; align-items: flex-start} .hero-phone { margin-top: auto} } .hero-image-circle { display: flex; justify-content: center; align-items: flex-end; @media (min-width: 768px) { justify-content: flex-end} img { display: block; width: 125%; flex-shrink: 0; object-fit: cover; max-width: none; aspect-ratio: 1 / 1; border-radius: 50%; margin-bottom: -25%; @media (min-width: 768px) { width: 100%; max-width: 550px; flex-shrink: 1; aspect-ratio: 1 / 1; border-radius: 50%; margin-bottom: -100px} } } }.hero.ih4 { .hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center} .hero-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--item-gap); width: 100%; @media (max-width: 1023px) { grid-template-columns: repeat(2, 1fr); a { gap: 0; .hero-card-value { text-align: left} } a:last-child { grid-column: span 2; justify-content: center} } @media (max-width: 767px) { grid-template-columns: 1fr; width: 100%; a { padding-left: 0; padding-top: 0; padding-bottom: 0} a:last-child { grid-column: 1} } } .hero-card { display: flex; flex-direction: column; align-items: center; gap: calc(var(--item-gap) * 0.56); padding: calc(var(--section-padding) * 0.5); border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: background-color var(--trans-fast); background-color: var(--light); &:hover { background-color: var(--medium); color: var(--white); .hero-card-icon { color: var(--white)} .hero-card-value { color: var(--white)} } &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} :is(.hero[class*="bg-"]) & { background-color: var(--white); &:hover { background-color: var(--light); .hero-card-icon { color: var(--dark)} .hero-card-value { color: var(--dark)} } } :is(.hero.bg-light) & { &:hover { background-color: var(--medium); color: var(--white); .hero-card-icon { color: var(--white)} .hero-card-value { color: var(--white)} } } .hero-card-icon { font-size: var(--text-xl); width: calc(var(--item-gap) * 2.63); height: calc(var(--item-gap) * 2.63); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--medium)} .hero-card-value { line-height: 1.5; color: var(--black); overflow-wrap: anywhere} @media (max-width: 1023px) { padding: calc(var(--item-gap) * 0.75); flex-direction: row} } } .hero.ih5 { .hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center} .hero-content { align-items: center; max-width: 800px} a.hero-tag { display: inline-block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: calc(var(--item-gap) * .40) calc(var(--item-gap) * .75) calc(var(--item-gap) * .28) calc(var(--item-gap) * .75); border-radius: 9999px; background-color: var(--medium); color: var(--white); align-self: center; text-decoration: none; @media (max-width: 767px) { align-self: center} } &.bg-medium, &.bg-medium-tint, &.bg-medium-dim { a.hero-tag { background-color: var(--dark)} } .hero-ctas { justify-content: center; @media (max-width: 767px) { flex-direction: column} @media (min-width: 768px) { flex-direction: row; justify-content: center} } .hero-image-circle { display: none} }.hero.ih6 { .hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center} .hero-content { align-items: center; max-width: 800px} }.hero { position: relative; overflow: hidden; &.hide-bgimage { .bg-image { display: none} } .hero-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; img { width: 100%; height: 100%; object-fit: cover; display: block} } .container { position: relative; z-index: 2} .hero-inner { display: grid; gap: calc(var(--item-gap) * 2); align-items: center; @media (max-width: 767px) { gap: calc(var(--item-gap) * 1.5)} } .hero-content { display: flex; flex-direction: column; gap: var(--item-gap); &>* { margin-bottom: 0} @media (max-width: 767px) { text-align: center; align-items: center} } .hero-phone a { display: inline-flex; align-items: center; gap: calc(var(--item-gap) * .38)} }.home-hero.hh1 { @media (min-width: 1024px) { display: flex; align-items: center; justify-content: center; height: 70vh; .hero-bg-image { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; img { width: 100%; height: 100%; object-fit: cover} } .hero-inner { position: relative; z-index: 2; grid-template-columns: 1fr; justify-items: center; text-align: center} .hero-content { align-items: center} .hero-image { display: none} &.hero-align-left { .hero-inner { justify-items: start; text-align: left} .hero-content { align-items: flex-start} } &.hero-align-right { .hero-inner { justify-items: end; text-align: right} .hero-content { align-items: flex-end} } &.hero-align-center { .hero-inner { justify-items: center; text-align: center} .hero-content { align-items: center} } } @media (max-width: 1023px) { min-height: 500px; display: flex; align-items: center; justify-content: center; padding: calc(var(--item-gap) * 2.25) 0; .hero-bg-image { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; img { width: 100%; height: 100%; object-fit: cover} } .hero-inner { position: relative; z-index: 2} .hero-content { order: 1; align-items: center; text-align: center} .hero-image { display: none} } &.video { min-height: 500px; .hero-bg-image { img { display: none} .hero-video-bg { display: block} .hero-video-controls { display: flex} } } &.bg-media-image { .hero-bg-image { img { display: block} .hero-video-bg, .hero-video-controls { display: none} } } &.bg-media-none { .hero-bg-image { display: none} } }.home-hero.hh2 { .hero-bg-image { display: none} .hero-inner { .hero-ctas { @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); width: 75%; grid-auto-flow: row; .btn:first-child { grid-column: span 2} } } .hero-content { order: 1} .hero-image { order: 2; display: flex; align-items: center} @media (max-width: 767px) { .hero-image { order: 1} .hero-content { order: 2} } @media (min-width: 768px) { grid-template-columns: 1fr 1fr; .hero-inner { grid-template-columns: 1fr 1fr} .hero-image { height: 100%} .hero-ctas { width: 75%} } } } .home-hero.hh3 { .hero-bg-image { display: none} .hero-inner { .hero-ctas { @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); width: 75%; grid-auto-flow: row; .btn:first-child { grid-column: span 2} } } .hero-image { order: 1; display: flex; align-items: center} .hero-content { order: 2} @media (max-width: 767px) { .hero-image { order: 1} .hero-content { order: 2} } @media (min-width: 768px) { grid-template-columns: 1fr 1fr; .hero-inner { grid-template-columns: 1fr 1fr} .hero-image { height: 100%} .hero-ctas { width: 75%} } } } .home-hero { position: relative; width: 100%; overflow: hidden; .hero-inner { max-width: var(--content-width); margin: 0 auto; display: grid; gap: calc(var(--item-gap) * 3); align-items: center} .hero-content { display: flex; flex-direction: column; gap: var(--item-gap); max-width: 800px} .hero-bg-image { display: none} .hero-video-bg { width: 100%; height: 100%; object-fit: cover} .hero-video-controls { position: absolute; right: calc(var(--item-gap) * 1.25); bottom: calc(var(--item-gap) * 1.25); z-index: 3; display: flex; align-items: center; justify-content: center; gap: calc(var(--item-gap) * 0.5)} .hero-video-toggle { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--item-gap) * 1.75); height: calc(var(--item-gap) * 1.75); border: none; border-radius: 999px; background: rgba(var(--dark-rgb), 0.3); transition: background var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast); cursor: pointer; i { font-size: calc(var(--item-gap) * 0.6); color: var(--white)} &:hover { background: rgba(var(--dark-rgb), 1); transform: translateY(-1px)} &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} } .hero-content > * { margin-bottom: 0} .hero-reviews { display: flex; align-items: center; gap: calc(var(--item-gap) * 0.38); font-size: var(--text-sm); font-weight: 700; i { color: var(--medium); font-size: calc(var(--item-gap) * 0.75)} } .bg-medium .hero-reviews i { color: var(--white)} @media (max-width: 1024px) { .hero-inner { gap: calc(var(--item-gap) * 1.5)} } @media (max-width: 767px) { &.hide-image-mobile { .hero-inner { .hero-image { display: none} } } .hero-inner { max-width: fit-content; grid-template-columns: 1fr; gap: calc(var(--item-gap) * 1.33); .hero-phone { display: none} .home-hero { padding: calc(var(--item-gap) * 1.33) 0} .hero-image { order: 1} .hero-content { order: 2} .hero-ctas { width: 100%; .btn { width: 100%} } .hero-image img { max-height: 250px} } .hero-video-controls { right: calc(var(--item-gap) * 0.75); bottom: calc(var(--item-gap) * 0.75)} } } @media (max-width: 767px) { .home-hero.hh2:not(.hide-image-mobile), .home-hero.hh3:not(.hide-image-mobile) { padding-top: 0; .container { padding-inline: 0; .hero-image img { border-radius: 0} .hero-content { padding-inline: var(--header-pad-x)} } } } .lm-card { border-radius: var(--radius-sm); overflow: hidden; background-color: var(--dark); position: relative; text-decoration: none; display: block; aspect-ratio: 4 / 3; &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} &:active { transform: scale(0.98)} &:hover .lm-card-image img { transform: scale(1.05)} } .lm-card-image { width: 100%; height: 100%; aspect-ratio: 4 / 3; overflow: hidden; img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--trans-slow)} } .lm1 .lm-slider .swiper-wrapper { align-items: stretch} .lm1 .lm-slider .swiper-slide { height: auto; display: flex} .lm1 .lm-slider .swiper-slide .lm-card { width: 100%; aspect-ratio: 4 / 3} .lm-card-title { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--item-gap); font-size: var(--text-h4); color: var(--white); margin: 0; text-align: left; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2} .lm-pagination { display: flex; justify-content: center; margin-block-start: var(--header-pad-y); .swiper-pagination-bullet { width: calc(var(--item-gap) * 0.56); height: calc(var(--item-gap) * 0.56); background-color: var(--gray); opacity: 1; transition: background-color var(--trans-fast); &:hover { background-color: var(--medium)} &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} &.swiper-pagination-bullet-active { background-color: var(--medium)} } } .bg-medium .lm-pagination, .bg-medium-tint .lm-pagination, .bg-medium-dim .lm-pagination { .swiper-pagination-bullet { &:hover { background-color: var(--dark)} &.swiper-pagination-bullet-active { background-color: var(--dark)} } } @media (min-width: 1024px) { .lm1 .lm-slider.lm-grid-mode { overflow: visible; .swiper-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--item-gap) * 1.33); transform: none !important} .swiper-slide { width: auto !important; margin-right: 0 !important} .lm-pagination { display: none} } .lm1.lm-cols-2 .lm-slider.lm-grid-mode { .swiper-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr))} } .lm1.lm-cols-4 .lm-slider.lm-grid-mode { .swiper-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr))} } } .lm2 .section-header p { margin-bottom: var(--item-gap)} .lm-alternating { display: flex; flex-direction: column; gap: var(--section-gap)} .lm-alt-row { display: grid; grid-template-columns: 1fr; gap: 0; overflow: hidden; @media (min-width: 768px) { grid-template-columns: 1fr 1fr; &:nth-child(even) .lm-alt-image { order: 2} &:nth-child(even) .lm-alt-content { order: 1} } } .lm-alt-image { aspect-ratio: 16 / 10; overflow: hidden; img { width: 100%; height: 100%; object-fit: cover; display: block} @media (min-width: 768px) { aspect-ratio: auto; min-height: calc(var(--item-gap) * 15)} } .lm-alt-content { display: flex; flex-direction: column; justify-content: center; gap: var(--item-gap); align-items: center; text-align: center; h3 { font-size: var(--text-md); margin: 0} p { font-size: var(--text-sm); line-height: 1.6; margin: 0} @media (max-width: 767px) { align-items: start; text-align: left; padding-left: 0; padding-right: 0} }.section-learnmore.lm3 { padding: 0} .lm-hero-split { display: grid; grid-template-columns: 1fr; border-bottom: 2px solid var(--white); @media (min-width: 1024px) { grid-template-columns: 1fr 1fr} } .lm-hero-image { aspect-ratio: 16 / 10; overflow: hidden; img { border-radius: 0; height:100%} @media (min-width: 1024px) { aspect-ratio: auto; min-height: calc(var(--item-gap) * 21)} } .lm-hero-content { display: flex; flex-direction: column; justify-content: center; gap: var(--item-gap); align-items: center; text-align: center; h2 { margin: 0} p { margin: 0} } .lm-overlay-grid { display: grid; grid-template-columns: 1fr; gap: 2px; background-color: var(--white); @media (min-width: 768px) { grid-template-columns: 1fr 1fr} @media (min-width: 1024px) { grid-template-columns: 1fr 1fr 1fr} } .lm-overlay-card { position: relative; overflow: hidden; aspect-ratio: 4 / 3; img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--trans-slow)} &::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--black-rgb), 0.7) 0, rgba(var(--black-rgb), 0.2) 50%, transparent 100%); pointer-events: none; z-index: 1} &.is-expanded { .lm-overlay-base { opacity: 0} .lm-overlay-expand { opacity: 1} } @media (min-width: 1024px) { &:hover img { transform: scale(1.05)} &:hover .lm-overlay-base { opacity: 0} &:hover .lm-overlay-expand { opacity: 1} } } .lm-overlay-base { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--item-gap); z-index: 2; transition: opacity var(--trans-normal); text-align: center; display: grid; gap: calc(var(--item-gap) * 0.75); &>* { margin-bottom: 0; font-size: var(--text-sm)} h3 { font-size: var(--text-h4)} } .lm-overlay-expand { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: var(--item-gap); gap: var(--item-gap); background: linear-gradient(to top, rgba(var(--black-rgb), 0.85) 0, rgba(var(--black-rgb), 0.5) 60%, rgba(var(--black-rgb), 0.2) 100%); opacity: 0; transition: opacity var(--trans-normal); align-items: center; &>* { font-size: var(--text-sm); margin-bottom: 0} h3 { font-size: var(--text-h4)} .btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px} }.section-learnmore .section-header { text-align: center}.section-map { height: 450px; padding: 0; margin: 0} .section-row:not(.has-bg) + .section-map { margin-top: 0} .map-embed { width: 100%; min-height: 400px; border-radius: var(--radius-sm); overflow: hidden; color: initial} .section-hours.sh2 .container.container-5050 { align-items: stretch} .section-hours.sh2 .map-embed { height: 100%; min-height: 0} .section-map .map-embed { height: 100%; min-height: 0; border-radius: 0} @media (max-width: 767px) { .section-hours.sh2 .map-embed { height: auto; min-height: 400px} } .map-embed *, .map-embed *::before, .map-embed *::after { box-sizing: content-box; line-height: normal; text-wrap: unset} .map-embed img, .map-embed picture { max-width: none; display: revert} .mtt1 { .mtt-swiper { position: relative; overflow: hidden; display: flex; flex-direction: column} .swiper-wrapper { order: 1} } .mtt1-card { display: block; position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 3 / 4; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color var(--trans-fast), transform var(--trans-fast); text-decoration: none; &:focus-visible, &:focus-within { outline-color: var(--focus-ring-color)} } .mtt1-card__overlay { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--item-gap); margin: var(--item-gap); border-radius: var(--radius-sm); & > * { margin-bottom: 0} } .mtt1 { .mtt1-swiper { position: relative} .mtt-nav { position: absolute; bottom: 50%; left: 0; right: 0; transform: translateY(-50%); margin: 0; z-index: 2; pointer-events: none} .mtt-nav-btn { pointer-events: all} .mtt-nav-btn.mtt1-prev { left: 5px; position: absolute} .mtt-nav-btn.mtt1-next { right: 5px; position: absolute} } .mtt2 { .mtt2-swiper { position: relative; overflow: hidden; display: flex; flex-direction: column} .mtt-nav { order: 2} .swiper-wrapper { order: 1} } .mtt2-card { display: block; position: relative; overflow: hidden; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color var(--trans-fast), transform var(--trans-fast); text-decoration: none; &:focus-visible, &:focus-within { outline-color: var(--focus-ring-color)} } .mtt2-card__info { padding: var(--item-gap) var(--item-gap) 0 0; text-align: left} .mtt2-card__info p{ margin-bottom: 0} .mtt2-card__image { border-radius: var(--radius-sm); aspect-ratio: 3 / 4; overflow: hidden} @media (max-width: 767px) { .mtt2 { .mtt2-swiper { position: relative} .mtt-nav { position: absolute; bottom: 53px; left: 0; right: 0; transform: translateY(-50%); margin: 0; z-index: 2; pointer-events: none} .mtt-nav-btn { pointer-events: all} } }.mtt3 { .container { width: 100%; padding: 0} .section-header { padding: 0 var(--header-pad-x, 2rem)} .mtt-nav-btn { display: flex; align-items: center; justify-content: center; width: clamp(2.5rem, 4vw, 3rem); height: clamp(2.5rem, 4vw, 3rem); border-radius: 50%; border: 2px solid var(--medium); background: var(--medium); color: var(--dark); cursor: pointer; transition: background 0.25s ease, color 0.25s ease; flex-shrink: 0; &:hover, &:focus-visible { background: var(--dark); color: var(--white); border-color: var(--dark)} } } .mtt3-ticker { position: relative; display: flex; flex-direction: column; gap: calc(var(--item-gap) * .44); overflow: hidden; max-width: 100%} .mtt3-ticker__row { overflow: hidden; width: 100%; margin-left: 0} .mtt3-ticker__track { display: flex; gap: calc(var(--item-gap) * .44); width: max-content; user-select: none; touch-action: pan-y} .mtt3-card { position: relative; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; width: calc((100vw - var(--header-pad-x, 2rem) * 2 - 10px * 0.5) / 1.5); height: 300px; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color var(--trans-fast); border: none; background: none; padding: 0; cursor: pointer; text-align: left; &:focus-visible { outline-color: var(--focus-ring-color)} img { display: block; width: 100%; height: 100%; object-fit: cover} .mtt3-card__image--hover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--trans-normal)} &:hover, &:focus-within, &[data-expanded="true"] { .mtt3-card__info { opacity: 0} .mtt3-card__hover { opacity: 1} .mtt3-card__image--hover { opacity: 1} } &[data-expanded="true"] .mtt3-card__hover { pointer-events: auto} @media (min-width: 1024px) { width: calc((var(--content-width, 1200px) - clamp(0.75rem, 2vw, 1.25rem) * 2) / 2.5); height: 400px; .mtt3-card { width: calc((var(--content-width, 1200px) - clamp(calc(var(--item-gap) * .56), 2vw, calc(var(--item-gap) * .94)) * 2) / 2.5)} } } .mtt3-card__info { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--item-gap); background: linear-gradient(to top, rgba(var(--black-rgb), 0.75), transparent); transition: opacity var(--trans-normal); z-index: 1; &>* { margin: 0} } .mtt3-card__hover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: clamp(calc(var(--item-gap) * .75), 3vw, calc(var(--item-gap) * 1.13)); background: linear-gradient(to top, rgba(var(--black-rgb), 0.9) 0, rgba(var(--black-rgb), 0.5) 60%, rgba(var(--black-rgb), 0.15) 100%); color: var(--white); opacity: 0; transition: opacity var(--trans-normal); z-index: 2; pointer-events: none} .mtt3-card__btn { align-self: flex-start; font-size: var(--text-xs); margin-top: auto} .mtt3-nav { display: flex; justify-content: center; align-items: center; gap: var(--item-gap); z-index: 3; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}.mtt4 { .mtt4-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--item-gap)} .mtt4-item { min-width: 0} .mtt1-card { width: 100%} .mtt1-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover} .mtt1-card__overlay { z-index: 1} @media (min-width: 768px) { .mtt4-grid { grid-template-columns: repeat(2, minmax(0, 1fr))} } @media (min-width: 1024px) { .mtt4-grid { grid-template-columns: repeat(4, minmax(0, 1fr))} } } .mtt5 { .mtt5-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--item-gap)} .mtt5-item { min-width: 0} .mtt2-card { width: 100%} .mtt2-card__image { position: relative} .mtt2-card__image .mtt-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover} @media (min-width: 768px) { .mtt5-grid { grid-template-columns: repeat(2, minmax(0, 1fr))} } @media (min-width: 1024px) { .mtt5-grid { grid-template-columns: repeat(4, minmax(0, 1fr))} } } .mtt-card { .mtt-card__hover > * { font-size: var(--text-sm)} .mtt-card__name { font-size: var(--text-h4); margin-bottom: calc(var(--item-gap) * 0.3)} &:hover .mtt-card__image { transform: scale(1.05)} } .mtt-card__image { display: block; width: 100%; height: 100%; transition: transform var(--trans-slow); object-fit: cover; overflow: hidden} .mtt-nav { display: flex; justify-content: center; align-items: center; gap: var(--item-gap); margin-block-start: calc(var(--item-gap) * 1.25); @media (min-width: 1024px) { .mtt-nav-btn { pointer-events: all} } } .mtt-nav-btn { display: flex; align-items: center; justify-content: center; width: clamp(calc(var(--item-gap) * 1.88), 4vw, calc(var(--item-gap) * 2.25)); height: clamp( calc(var(--item-gap) * 1.88), 4vw, calc(var(--item-gap) * 2.25) ); border-radius: 50%; background: var(--dark); color: var(--white); border-color: var(--dark); cursor: pointer; transition: all 0.25s ease, color 0.25s ease; flex-shrink: 0; border: none; &:hover, &:focus-visible { border: 2px solid var(--medium); background: var(--medium); color: var(--white)} &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} &:disabled { opacity: 0.4; cursor: not-allowed} } .bg-dark .mtt-nav-btn { background: var(--medium); color: var(--white); border-color: var(--medium); &:hover, &:focus-visible { border: 2px solid var(--white); background: var(--white); color: var(--dark)} } .rs-list .rs-cards { display: flex; flex-direction: column; gap: var(--item-gap); padding-bottom: calc(var(--item-gap)*1.5)} .rs-list .rs-card { grid-template-columns: auto 1fr auto; gap: calc(var(--item-gap) * .75); padding: calc(var(--item-gap) * .75) var(--item-gap)}.rs-grid .rs-cards { display: grid; grid-template-columns: 1fr; gap: var(--item-gap); padding-bottom: 32px; @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr)} } .rs-grid .rs-card { grid-template-columns: auto 1fr auto; gap: calc(var(--item-gap) * .75); padding: calc(var(--item-gap) * .75) var(--item-gap); @media (max-width: 767px) { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--item-gap); position: relative} } .rs-grid .rs-card-body { @media (max-width: 767px) { align-items: center} } .rs-grid .rs-card-title { @media (max-width: 767px) { display: flex; align-items: center; gap: calc(var(--item-gap) * .33)} } .rs-grid .rs-card-arrow { @media (max-width: 767px) { position: absolute; top: calc(var(--item-gap) * .75); right: calc(var(--item-gap) * .75); i { transform: rotate(-35deg)} } } .section-resources .section-header { text-align: center} .rs-card { display: grid; align-items: center; text-decoration: none; color: var(--dark); background-color: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: box-shadow var(--trans-fast), transform var(--trans-fast); &:hover { box-shadow: var(--shadow-lg)} &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} &:active { transform: scale(0.99)} } .rs-card-icon { flex-shrink: 0; width: calc(var(--item-gap) * 2.5); height: calc(var(--item-gap) * 2.5); border-radius: 50%; background-color: var(--medium); display: flex; align-items: center; justify-content: center; overflow: hidden; i { color: var(--white) !important; font-size: var(--text-lg)} img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block} } .rs-icons .rs-card-icon img { display: none} .rs-images .rs-card-icon:has(img) i { display: none} .rs-images .rs-card-icon:has(img) { background-color: transparent} .rs-card-body { display: flex; flex-direction: column; gap: calc(var(--item-gap) * 0.25)} .rs-card-title { font-size: var(--text-h5); font-weight: 700; color: var(--dark); line-height: 1.2} .rs-card-desc { font-size: var(--text-sm); color: var(--gray-dim); line-height: 1.5} .rs-card-arrow { display: flex; align-items: center; justify-content: center; color: var(--dark); font-size: var(--text-base); transition: transform var(--trans-fast)} .rs-card:hover .rs-card-arrow { transform: translateX(4px)} .bg-dark .rs-card, .bg-dark-dim .rs-card, .bg-dark-tint .rs-card { background-color: rgba(var(--white-rgb), 0.1); .rs-card-title, .rs-card-arrow { color: var(--white)} .rs-card-desc { color: rgba(var(--white-rgb), 0.7)} } .review-card { background-color: var(--light-tint); border-radius: var(--radius-sm); display: flex; flex-direction: column; height: auto; gap: var(--item-gap)} .review-stars { display: flex; gap: calc(var(--item-gap) * .19); color: var(--medium); font-size: var(--text-sm)} .review-text { margin: 0; padding: 0; flex-grow: 1; p { font-size: var(--text-sm); color: var(--dark); line-height: 1.6; margin: 0} } .review-name { font-weight: 700; font-size: var(--text-sm); color: var(--dark)} .reviews-nav { display: flex; justify-content: center; align-items: center; gap: var(--item-gap); margin-block-start: var(--header-pad-y)} .reviews-btn-prev, .reviews-btn-next { width: calc(var(--item-gap) * 2.06); height: calc(var(--item-gap) * 2.06); border-radius: 50%; border: 2px solid var(--dark); background-color: transparent; color: var(--dark); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); transition: background-color var(--trans-fast), color var(--trans-fast); &:hover { background-color: var(--dark); color: var(--white)} &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} &:active { background-color: var(--dark-dim); color: var(--white)} &.swiper-button-disabled { opacity: 0.35; cursor: not-allowed} } .reviews-nav-hidden .reviews-nav { display: none} .reviews-single { .swiper-slide { width: 100%} .review-card { text-align: center; align-items: center; margin-inline: auto} .review-stars { justify-content: center} .review-author { text-align: center} } .reviews-multi { .review-card { text-align: left} .review-stars { order: 3; margin-top: calc(var(--item-gap) * -1)} .review-text { order: 1} .review-author { order: 2} } .sv-card { border-radius: var(--radius-sm); overflow: hidden; position: relative} .sv-card-link { display: block; text-decoration: none; color: inherit; &:focus-visible { outline: var(--focus-ring); outline-offset: 2px} &:active { transform: scale(0.98)} &:hover .sv-card-image img { transform: scale(1.05)} } .sv-card-image { overflow: hidden; position: relative; img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--trans-slow)} } .sv-card-icon { display: none; align-items: center; justify-content: center; width: calc(var(--item-gap) * 1.75); height: calc(var(--item-gap) * 1.75); border-radius: 50%; background-color: var(--medium); color: var(--white); font-size: var(--text-sm); position: absolute; z-index: 3; pointer-events: none; i { transform: rotate(-45deg)} } .sv-card-body { .h3 { font-size: var(--text-h5); margin: 0} p { font-size: var(--text-sm); line-height: 1.6; margin: 0} } .sv1 .sv-list { display: grid; grid-template-columns: 1fr; gap: var(--item-gap); @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr)} @media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr)} } .sv1 .sv-card { border: 1px solid var(--gray)} .sv1 .sv-card-link { display: flex; flex-direction: column; height: 100%; padding: var(--item-gap)} .sv1 .sv-card-image { aspect-ratio: 4 / 3; height: auto; flex: 0 0 auto} .sv1 .sv-card-body { display: flex; flex-direction: column; gap: calc(var(--item-gap) * 0.5); padding: var(--item-gap); align-items: center; flex: 1; text-align: center} .sv2 .sv-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--item-gap); @media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr)} } .sv2 .sv-card-link { display: flex; flex-direction: column; height: 100%; background-color: var(--dark); position: relative; isolation: isolate} .sv2 .sv-card-image { aspect-ratio: 3 / 4; height: auto} .sv2 .sv-card-icon { display: flex; top: calc(var(--item-gap) * 0.5); right: calc(var(--item-gap) * 0.5); z-index: 10} .sv2 .sv-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--item-gap); z-index: 5; background: linear-gradient(to top, rgba(var(--black-rgb), 0.6), transparent); .h3 { color: var(--white)} p, .btn { display: none} } .sv3 .sv-list { display: grid; grid-template-columns: 1fr; gap: var(--item-gap); @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr)} @media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr)} } .sv3 .sv-card { --sv3-image-height: clamp(calc(var(--item-gap) * 10), 30vw, calc(var(--item-gap) * 14)); background-color: var(--dark)} .sv3 .sv-card-link { display: flex; flex-direction: column; height: 100%; position: relative; isolation: isolate} .sv3 .sv-card-image { width: 100%; aspect-ratio: auto; height: var(--sv3-image-height); flex: 0 0 auto} .sv3 .sv-card-icon { display: flex; top: calc(var(--item-gap) * 0.5); right: calc(var(--item-gap) * 0.5); z-index: 10} .sv3 .sv-card-body { display: flex; flex-direction: column; flex: 1; position: relative; z-index: 5; background-color: transparent; padding: var(--item-gap); text-align: center; margin-top: calc(var(--item-gap) * -3); &::before { content: ""; position: absolute; bottom: -478%; left: 50%; transform: translateX(-50%); width: 120%; height: 428px; background-color: var(--white); border-radius: 50%; z-index: -1} .h3 { position: relative; z-index: 2; color: var(--dark)} p, .btn { display: none} } .sidebar-nav.sn-pills { padding: calc(var(--item-gap)*.7); background-color: var(--gray); @media (min-width: 1024px) { background-color: transparent; padding: var(--item-gap) 0} .sidebar-nav-toggle { padding-bottom: calc(var(--item-gap) * .75); border-bottom: 1px solid var(--border-gray); @media (max-width: 1023px) { &[aria-expanded="false"] { padding-bottom: 0; border-bottom: none} } @media (min-width: 1024px) { padding-bottom: 0; border-bottom: none} } .sidebar-nav-list { flex-direction: row; flex-wrap: wrap; gap: calc(var(--item-gap) * .5); a { padding: calc(var(--item-gap) * .35) calc(var(--item-gap) * .75); border-radius: var(--radius-sm); background-color: var(--white); border: 1px solid var(--border-gray); font-size: var(--text-2xs); &:hover { background-color: var(--dark); border-color: var(--dark); color: var(--white)} @media (min-width: 1024px) { background-color: var(--gray)} } .active a { background-color: var(--dark); border-color: var(--dark); color: var(--white)} } } .sidebar-nav.sn-list { background-color: var(--light); border: 2px solid var(--medium); .sidebar-nav-toggle { padding-bottom: calc(var(--item-gap) * .75); border-bottom: 1px solid var(--gray); @media (max-width: 1023px) { &[aria-expanded="false"] { padding-bottom: 0; border-bottom: none} } @media (min-width: 1024px) { padding-bottom: 0; border-bottom: none} } .sidebar-nav-icon { color: var(--medium)} .sidebar-nav-list { gap: 0; li { margin-bottom: calc(var(--item-gap) * .25)} a { padding: calc(var(--item-gap) * .3); border-radius: var(--radius-sm); &:hover { color: var(--white); background-color: var(--medium)} } .active { a { color: var(--white); background-color: var(--dark)} } } }.sidebar-nav.sn-icons { border: solid 2px var(--gray); @media (min-width: 1024px) { border: none} .sidebar-nav-toggle { padding-bottom: calc(var(--item-gap) * .75); border-bottom: 1px solid var(--gray); @media (max-width: 1023px) { &[aria-expanded="false"] { padding-bottom: 0; border-bottom: none} } @media (min-width: 1024px) { padding-bottom: 0; border-bottom: none} } .sidebar-nav-list { gap: 0; a { padding: calc(var(--item-gap) * .55); display: flex; align-items: center; gap: calc(var(--item-gap) * .5); &::before { content: "\f1b0"; font-family: "Font Awesome 7 Free"; font-weight: 900; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; -webkit-font-smoothing: antialiased; font-size: var(--text-sm); flex-shrink: 0; background: linear-gradient(to top, var(--medium) 50%, var(--dark) 50%); background-size: 100% 200%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: background-position var(--trans-normal)} &:hover { color: var(--medium); &::before { background-position: 0 100%} } } li+li { border-top: 1px solid var(--gray)} .active a { color: var(--dark); font-weight: 700; background-color: var(--light); &::before { background-position: 0 100%} } } }.sidebar-nav { padding: calc(var(--item-gap) * 0.7); border-radius: var(--radius-sm); @media (min-width: 1024px) { padding: var(--item-gap)} } .sidebar-nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; gap: calc(var(--item-gap) * 0.5); &:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm)} &[aria-expanded="true"] .sidebar-nav-icon--open { display: none} &[aria-expanded="false"] .sidebar-nav-icon--close { display: none} @media (min-width: 1024px) { cursor: default} } .sidebar-nav-title { font-size: var(--text-xl); margin-bottom: 0; color: var(--dark)} .sidebar-nav-icon { font-size: var(--text-sm); color: var(--dark); transition: transform var(--trans-fast); @media (min-width: 1024px) { display: none} } .sidebar-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; a { display: block; text-decoration: none; color: var(--dark); font-size: var(--text-sm); font-weight: 600; transition: color var(--trans-fast), background-color var(--trans-fast), border-color var(--trans-fast); &:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm)} } @media (max-width: 1023px) { overflow: hidden; max-height: 0; transition: max-height var(--trans-normal), margin var(--trans-normal)} @media (min-width: 1024px) { margin-top: var(--item-gap)} } .sidebar-nav-toggle i { display: none} @media (max-width: 1023px) { .sidebar-nav-toggle i { display: block} .sidebar-nav-toggle[aria-expanded="true"] + .sidebar-nav-list { max-height: 500px} } .section-steps .section-header { text-align: center} .steps-grid { display: grid; grid-template-columns: 1fr; gap: var(--item-gap); @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); gap: calc(var(--item-gap) * 1.33) calc(var(--item-gap) * 3)} } .section-steps.steps-layout-single { .steps-grid { max-width: 1000px; margin-left: auto; margin-right: auto; @media (min-width: 768px) { grid-template-columns: 1fr; gap: var(--item-gap)} } } .step-item { display: flex; align-items: flex-start; gap: calc(var(--item-gap) * .75)} .step-icon { flex-shrink: 0; width: calc(var(--item-gap) * 2); height: calc(var(--item-gap) * 2); border-radius: 50%; background: var(--medium); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: var(--text-base); font-weight: 700} .bg-medium .step-icon { background-color: var(--medium-dim)} .step-check { display: flex; align-items: center; justify-content: center} .steps-check { .step-check i { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.4s cubic-bezier(0.22, 0.61, 0.36, 1)} .step-item:hover .step-check i { animation: checkDrawIn 1s cubic-bezier(0.22, 0.61, 0.36, 1)} .step-number { display: none} } @keyframes checkDrawIn { 0 { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transform: scale(0.8)} 60% { clip-path: polygon(0 0, 110% 0, 110% 100%, 0 100%); transform: scale(1.15)} 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1)} } .step-number { display: flex; align-items: center; justify-content: center} .steps-number { .step-check { display: none} } .step-content { h3 { font-size: var(--text-h5); margin: 0 0 calc(var(--item-gap) * .25)} p { font-size: var(--text-sm); line-height: 1.6; margin: 0} } .sticky-clone-header { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--white); z-index: 1100; box-shadow: var(--shadow-md); transform: translateY(-100%); transition: transform 0.3s ease-in-out; &.is-visible { transform: translateY(0)} .header-inner { padding: calc(var(--item-gap) * 0.38) var(--header-pad-x); display: flex; align-items: center; justify-content: space-between; max-width: var(--content-width); margin: 0 auto; column-gap: 0; @media (max-width: 1023px) { padding: calc(var(--item-gap) * 0.47) var(--mobile-pad)} } @media (min-width: 1024px) { .mobile-toggle { display: none !important} } } @media (min-width: 1024px) { .sticky-mobile-1-group, .sticky-mobile-2-group, .sticky-mobile-2-bottom { display: none !important} .sticky-desktop-actions { display: flex; gap: var(--item-gap)} } @media (max-width: 1023px) { .sticky-desktop-actions { display: none !important} } .use-original-sticky.is-stuck { .header-logo { img { height: 3.5rem} } } .sticky-logo { img { max-height: 56px; width: auto; height: auto} } @media (min-width: 1024px) { .sticky-clone-header.sticky-desktop-1 { .btn-sticky-phone, .btn-sticky-food, .btn-sticky-book { display: inline-flex} } } @media (min-width: 1024px) { .sticky-clone-header.sticky-desktop-2 { .btn-sticky-food { display: none} } } @media (max-width: 1023px) { .sticky-clone-header.sticky-mobile-1 { .sticky-logo, .sticky-mobile-2-group, .sticky-mobile-2-bottom { display: none !important} .header-inner { justify-content: flex-start; gap: calc(var(--item-gap) * .38)} .mobile-toggle { margin-left: auto} } .sticky-mobile-1-group { display: flex; gap: calc(var(--item-gap) * .38); flex: 1; .btn { padding: calc(var(--item-gap) * .38) calc(var(--item-gap) * .56); font-size: var(--text-xs); width: 100%; border-radius: var(--radius-sm); white-space: nowrap; height: calc(var(--item-gap) * 2.11)} } } @media (max-width: 1023px) { .sticky-clone-header.sticky-mobile-2 { .sticky-mobile-1-group { display: none !important} .header-inner { padding-bottom: calc(var(--item-gap) * .38)} } .sticky-mobile-2-group { display: flex; gap: calc(var(--item-gap) * .38); margin-left: auto; margin-right: calc(var(--item-gap) * .38)} .mobile-square-phone { width: calc(var(--item-gap) * 2.11); height: calc(var(--item-gap) * 2.11); padding: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-lg)} .sticky-mobile-2-bottom { padding: 0 var(--mobile-pad) calc(var(--item-gap) * .47) var(--mobile-pad); .btn-full { width: 100%; display: block; padding: calc(var(--item-gap) * .56); text-align: center} } }.section-supportcontent { &.sc1 { h2 { font-size: var(--text-h4)} .container { max-width: 1170px} } &.sc2 { h2 { font-size: var(--text-h4)} .container { max-width: 960px} } &.sc3 { @media (max-width: 767px) { .container-5050 .section-image { order: 1} .container-5050 .section-text { order: 2; text-align: center} } } }.section-tabs .section-header { text-align: center} .tabs-nav { display: flex; border-bottom: 2px solid var(--border-gray); gap: 0; [role="tab"] { flex-shrink: 0; padding: calc(var(--item-gap) * 0.65) var(--item-gap); background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; font-size: var(--text-sm); font-weight: 700; color: inherit; transition: color var(--trans-fast), border-color var(--trans-fast); white-space: nowrap; &:hover { color: var(--medium)} &:focus-visible { outline: var(--focus-ring); outline-offset: -2px} &[aria-selected="true"] { color: inherit; border-bottom-color: var(--medium)} } } .bg-medium .tabs-nav { [role="tab"] { &:hover { color: var(--medium-dim)} &[aria-selected="true"] { border-bottom-color: var(--medium-dim)} } } .bg-light .tabs-nav, .bg-light-dim .tabs-nav, .bg-light-tint .tabs-nav { [role="tab"] { &:hover { color: var(--medium)} &[aria-selected="true"] { border-bottom-color: var(--dark)} } } .tabs-panel { display: none; padding-top: calc(var(--item-gap) * 1.5); &.active { display: block} } .tabs-panel-inner { display: block; &.has-image { display: grid; grid-template-columns: 1fr; gap: calc(var(--item-gap) * 1.5); align-items: center; @media (min-width: 768px) { grid-template-columns: 2fr 3fr} } &.has-image.img-right { @media (min-width: 768px) { grid-template-columns: 3fr 2fr; .tabs-panel-image { order: 2} .tabs-panel-content { order: 1} } } } .tabs-panel-image { border-radius: var(--radius-sm); overflow: hidden; img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 10} } .tabs-panel-content { h3 { font-size: var(--text-h4); margin: 0 0 calc(var(--item-gap) * 0.5)} p { font-size: var(--text-sm); line-height: 1.7; margin: 0} } .tabs-accordion { display: none} @media (max-width: 1023px) { .tabs-nav { display: none} .tabs-accordion { display: block} .tabs-ac-item { border-bottom: 2px solid var(--border-gray)} .tabs-ac-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--item-gap); width: 100%; padding: calc(var(--item-gap) * 0.75) 0; background: transparent; border: none; cursor: pointer; font-size: var(--text-sm); font-weight: 700; color: inherit; text-align: left; transition: color var(--trans-fast); &:hover { color: var(--medium)} &:focus-visible { outline: var(--focus-ring); outline-offset: -2px} &[aria-expanded="true"] { color: inherit; border-bottom: 3px solid var(--medium); margin-bottom: -2px; .tabs-ac-icon { transform: rotate(180deg)} } } .tabs-ac-icon { flex-shrink: 0; font-size: var(--text-xs); color: inherit; transition: transform var(--trans-normal); margin-right: 6px} .tabs-ac-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--trans-normal); &[aria-hidden="false"] { grid-template-rows: 1fr; .tabs-ac-panel-content { padding: calc(var(--item-gap) * 0.75) 0 calc(var(--item-gap) * 1.25)} } } .tabs-ac-panel-content { overflow: hidden; padding: 0; .tabs-panel-content { h3 { font-size: var(--text-h4); margin: 0 0 calc(var(--item-gap) * 0.5)} p { font-size: var(--text-sm); line-height: 1.7; margin: 0} } .tabs-panel-image { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: calc(var(--item-gap) * 0.75); img { width: 100%; display: block; object-fit: cover; aspect-ratio: 16 / 10} } .tabs-panel-inner.has-image { display: flex; flex-direction: column; gap: calc(var(--item-gap) * 0.75)} } } .section-urgentcare { .container { max-width: 1000px} .section-header p { max-width: 800px; text-align: center; margin-left: auto; margin-right: auto} } .uc-accordion { margin-top: calc(var(--item-gap) * 2); display: flex; flex-direction: column} .uc-item { border: 1px solid var(--border-gray); border-radius: var(--radius-sm); background: var(--white); overflow: hidden; & + .uc-item { margin-top: calc(var(--item-gap) * 0.75)} } .uc-header { display: flex; align-items: center; padding: calc(var(--item-gap) * 0.75) var(--item-gap); gap: var(--item-gap); color: var(--dark)} .uc-toggle { display: flex; align-items: center; flex: 1; gap: var(--item-gap); padding: 0; background: none; border: none; cursor: pointer; text-align: left; color: inherit; &:focus-visible { outline: var(--focus-ring); outline-offset: -3px} } .uc-title { font-size: var(--text-lg); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--dark); flex-shrink: 0} .uc-website { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--text-sm); font-weight: 600; color: var(--medium); text-decoration: none; flex-shrink: 0; &:hover, &:focus-visible { color: var(--dark); text-decoration: underline; i, i::before { text-decoration: none} } } .uc-header > i { margin-left: auto; font-size: var(--text-base); color: var(--medium); transition: transform var(--trans-fast); flex-shrink: 0} .uc-ctas { display: none} .uc-content { border-top: 1px solid var(--border-gray); padding: var(--item-gap); h4 { font-size: var(--text-sm); font-weight: 700; color: var(--medium); margin-bottom: calc(var(--item-gap) * 0.5); text-transform: none} } .uc-details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--item-gap); .uc-col { padding: calc(var(--item-gap) * 0.5) 0; & + .uc-col { border-left: 1px solid var(--border-gray); padding-left: var(--item-gap)} } } .uc-col { p { font-size: var(--text-sm); line-height: 1.6; text-align: left; &:last-child { margin-bottom: 0} } a { color: var(--dark); text-decoration: none; &:hover, &:focus-visible { color: var(--medium); text-decoration: underline} } } .bg-dark, .bg-dark-dim, .bg-dark-tint { .uc-item { border-color: rgba(var(--white-rgb), 0.15); background: rgba(var(--white-rgb), 0.05)} .uc-title { color: var(--white)} .uc-content { border-color: rgba(var(--white-rgb), 0.15)} .uc-website { &:hover, &:focus-visible { color: var(--white)} } .uc-col p, .uc-col a { color: var(--white)} .uc-details .uc-col + .uc-col { border-color: rgba(var(--white-rgb), 0.15)} } @media (max-width: 767px) { .uc-header { flex-wrap: wrap; gap: calc(var(--item-gap) * 0.5); padding: calc(var(--item-gap) * 0.6) calc(var(--item-gap) * 0.75)} .uc-toggle { gap: calc(var(--item-gap) * 0.5)} .uc-title { flex: 1; font-size: var(--text-base)} .uc-website { display: none} .uc-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--item-gap) * 0.5); padding: 0 calc(var(--item-gap) * 0.75) calc(var(--item-gap) * 0.6)} .uc-details { grid-template-columns: 1fr; gap: 0; .uc-col { display: grid; grid-template-columns: auto 1fr; gap: var(--item-gap); align-items: start; padding: calc(var(--item-gap) * 0.5) 0; h4 { margin-bottom: 0} p { grid-column: 2} & + .uc-col { border-left: none; border-top: 1px solid var(--border-gray); padding-left: 0; padding-top: calc(var(--item-gap) * 0.5)} } } } .section-wysiwygcolumn .section-header h2 { margin-bottom: calc(var(--item-gap) * 2)} .section-wysiwygcolumn .section-text { padding: calc(var(--item-gap) * 2) 0} .section-wysiwygcolumn.wc1 .container-5050 .section-text { order: 1} .section-wysiwygcolumn.wc1 .container-5050 .section-image { order: 2} .section-wysiwygcolumn.wc2 .container-5050 .section-text { order: 2} .section-wysiwygcolumn.wc2 .container-5050 .section-image { order: 1} @media (max-width: 1023px) { .section-wysiwygcolumn .section-image .bg-image-no-overlay { display: flex} .section-wysiwygcolumn .section-image .bg-image-no-overlay img { max-height: 400px; align-self: center} } @media (max-width: 767px) { .section-wysiwygcolumn .section-image .bg-image-no-overlay { position: relative} .section-wysiwygcolumn .section-image .bg-image-no-overlay img { height: 250px} } .skip-link { position: absolute; translate: 0 -50px; left: 0; background: var(--dark); color: var(--white); padding: calc(var(--item-gap) * 0.5) calc(var(--item-gap) * 0.75); z-index: 100; text-decoration: none; font-size: var(--text-sm); font-weight: 600; transition: translate var(--trans-fast); &:focus { translate: 0} } .text-center { text-align: center} .text-xs { font-size: var(--text-xs) !important} .text-2xs { font-size: var(--text-2xs) !important} .text-sm { font-size: var(--text-sm) !important} .text-base { font-size: var(--text-base) !important} .text-lg { font-size: var(--text-lg) !important} .text-xl { font-size: var(--text-xl) !important} .text-underline { text-decoration: underline !important} .hidden { display: none !important} .mobile-pad { padding: 0 var(--mobile-pad) !important} .content-width { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--header-pad-x)} :is(.bg-dark, .bg-dark-tint, .bg-dark-dim, .bg-white, .bg-medium, .bg-medium-tint, .bg-medium-dim, .bg-light, .bg-light-tint, .bg-light-dim) { .bg-image::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1} } :is(.bg-dark, .bg-dark-tint, .bg-dark-dim) .bg-image::after { background: rgba(var(--dark-rgb), 0.5)} .bg-white .bg-image::after { background: rgba(var(--white-rgb), 0.5)} :is(.bg-medium, .bg-medium-tint, .bg-medium-dim) .bg-image::after { background: rgba(var(--medium-rgb), 0.5)} :is(.bg-light, .bg-light-tint, .bg-light-dim) .bg-image::after { background: rgba(var(--light-rgb), 0.5)} :is( .bg-dark, .bg-dark-tint, .bg-dark-dim, .bg-white, .bg-medium, .bg-medium-tint, .bg-medium-dim, .bg-light, .bg-light-tint, .bg-light-dim, .bg-gray, .bg-gray-tint, .bg-gray-dim, .bg-green, .bg-blue, .bg-red, .bg-orange, .notice_type_success, .notice_type_info, .notice_type_danger, .notice_type_warning ) :is( a:not(.btn):not(.hero-tag), a:not(.btn):not(.hero-tag):visited, a:not(.btn):not(.hero-tag):hover, a:not(.btn):not(.hero-tag):focus, a:not(.btn):not(.hero-tag):active ) { color: currentColor} .bg-image-dark-gradient::after, .bg-image-light-gradient::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1} .bg-image-dark-gradient::after { background: linear-gradient(to top, rgba(var(--black-rgb), 0.7) 0, rgba(var(--black-rgb), 0.2) 50%, transparent 100%)} .bg-image-light-gradient::after { background: linear-gradient(to top, rgba(var(--white-rgb), 0.7) 0, rgba(var(--white-rgb), 0.2) 50%, transparent 100%)} .parallax { min-height: 400px; display: flex; flex-direction: column; .bg-image { z-index: 0; overflow: hidden; height: 100%; .jarallax { height: 100%} } .container { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center} } @media (max-width: 767px) { [data-aos].aos-mob-up, .aos-mob-up [data-aos], [data-aos].aos-mob-down, .aos-mob-down [data-aos], [data-aos].aos-mob-left, .aos-mob-left [data-aos], [data-aos].aos-mob-right, .aos-mob-right [data-aos], [data-aos].aos-mob-zoom, .aos-mob-zoom [data-aos], [data-aos].aos-mob-flip, .aos-mob-flip [data-aos] { opacity: 0 !important; transition-property: transform, opacity !important} [data-aos].aos-mob-up, .aos-mob-up [data-aos] { transform: translate3d(0, 100px, 0) !important} [data-aos].aos-mob-down, .aos-mob-down [data-aos] { transform: translate3d(0, -100px, 0) !important} [data-aos].aos-mob-left, .aos-mob-left [data-aos] { transform: translate3d(100px, 0, 0) !important} [data-aos].aos-mob-right, .aos-mob-right [data-aos] { transform: translate3d(-100px, 0, 0) !important} [data-aos].aos-mob-zoom, .aos-mob-zoom [data-aos] { transform: scale(0.6) !important} [data-aos].aos-mob-flip, .aos-mob-flip [data-aos] { transform: perspective(2500px) rotateX(-100deg) !important} [data-aos].aos-mob-up.aos-animate, .aos-mob-up [data-aos].aos-animate, [data-aos].aos-mob-down.aos-animate, .aos-mob-down [data-aos].aos-animate, [data-aos].aos-mob-left.aos-animate, .aos-mob-left [data-aos].aos-animate, [data-aos].aos-mob-right.aos-animate, .aos-mob-right [data-aos].aos-animate { transform: translate3d(0, 0, 0) !important; opacity: 1 !important} [data-aos].aos-mob-zoom.aos-animate, .aos-mob-zoom [data-aos].aos-animate { transform: scale(1) !important; opacity: 1 !important} [data-aos].aos-mob-flip.aos-animate, .aos-mob-flip [data-aos].aos-animate { transform: perspective(2500px) rotateX(0) !important; opacity: 1 !important} }