/*! * Optima Theme - Base Elements * Version 1.0 */ /* ========================================================= BASE SCROLL RESET — NATIVE / SAFE ========================================================= */ html { height: 100%; } body { margin: 0; } a, input, .tab-sm i, .header, .header .header-inner, .header .cta .phone, .header .cta a, .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']), .sb-gallery div, *:before, *:after, .mobile-nav.open, .mobile-nav.closed { -webkit-transition: all .35s ease-in; -moz-transition: all .35s ease-in; transition: all .35s ease-in; text-decoration: none; } .embed a[data-sb-event="link-call"], .content a[data-sb-event="link-call"], .sb-module a[data-sb-event="link-call"] { white-space: nowrap; } /*custom dropdown motion -- desktop*/ .header .nav .dropdown-wrapper, .header .nav .dropdown-wrapper li { -ms-transition:transform 0.65s cubic-bezier(0.2,.8,.25,1),opacity 0.65s cubic-bezier(0.2,.8,.25,1); transition:transform 0.65s cubic-bezier(0.2,.8,.25,1),opacity 0.65s cubic-bezier(0.2,.8,.25,1); -webkit-transition: transform 0.65s cubic-bezier(0.2,.8,.25,1),opacity 0.65s cubic-bezier(0.2,.8,.25,1); } .sb-content a { text-decoration: underline; } h1, h2, h3 { font-weight: 300; letter-spacing: 0px; line-height: 1.1em; } @media screen and (min-width:949px) { body:not(#page-home) .body .sb-content:not(.text--center) .content h1, body:not(#page-home) .body .sb-content:not(.text--center) .content h2, body:not(#page-home) .body .sb-content:not(.text--center) .content h3 { margin-left: auto!important; margin-right: auto!important; text-align: left!important; padding-bottom: 15px; } } p { font-size: 16px!important; line-height: 1.5; margin-bottom: 20px; } aside { padding: 50px 0; } button:focus { outline: none; } .content ul { list-style-type: disc; padding-left: 1.2em; } :where( .content-intro, .sb-feature-about1-row, .sb-feature-about2-row ) ul { list-style: none; padding-left: 0; } .body { background: transparent; } /* HR bars */ /* Global
styling */ hr { display: block; height: 1px; /* line thickness */ border: 0; /* remove default groove */ background: currentColor; /* inherits text color */ opacity: 0.15; /* soften the line */ margin: 35px 0px 35px; /* vertical space (mobile) */ } /* More breathing room on larger screens */ @media (min-width: 768px) { hr {margin: 35px 0px 35px;} } /* HR bars -- hide by default */ { display: none; } .form-inner p.submit { text-align: right; padding-top: 20px!important; } .posts .post { text-align: left; } iframe { vertical-align: bottom; } .content img, .headline img, .post .entry img { border: 0px!important; } body.page-app [class*="elfsight-"] { display: none!important; } /* Prevent FOUC for JS-aligned modules */ html:not(.js-ready) .sb-module { opacity: 0; pointer-events: none; } .sb-embed .box, .box { padding: 0px; margin: 0px; display: inline-block; width: 100%; } .sb-embed .box { display: inline-block; width: 100%; } .site-messages { display: none; } /* "l" seperater */ .pipe { color: var(--color-brand); opacity: .65; /* optional polish */ } /* ========================================================= GLOBAL PRESETS ========================================================= */ .align-right { margin-right: auto; justify-content: flex-end; text-align: right; } .align-left { margin-left: auto; justify-content: flex-start; text-align: left; } .align-center { margin: auto; justify-content: center!important; text-align: center; } .is-centered { justify-content: center; } .is-spread { justify-content: space-between!important; } /* ========================================================= PADDING — VERTICAL (TOP / BOTTOM) ========================================================= */ .pad-y-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .pad-y-sm { padding-top: var(--sb-space-sm) !important; padding-bottom: var(--sb-space-sm) !important; } .pad-y { /* padding-top: var(--sb-space-default) !important; */ /* padding-bottom: var(--sb-space-default) !important; */ } .pad-y-lg { padding-top: var(--sb-space-lg) !important; padding-bottom: var(--sb-space-lg) !important; } /* ========================================================= PADDING — HORIZONTAL (LEFT / RIGHT) ========================================================= */ @media screen and (min-width:949px) { .pad-x-0 { padding-left: 0 !important; padding-right: 0 !important; } .pad-x-sm { padding-left: var(--sb-gutter) !important; padding-right: var(--sb-gutter) !important; } .pad-x { padding-left: var(--sb-space-default) !important; padding-right: var(--sb-space-default) !important; } .pad-x-lg { padding-left: var(--sb-space-lg) !important; padding-right: var(--sb-space-lg) !important; } .pad-x-xl { padding-left: var(--sb-space-xl) !important; padding-right: var(--sb-space-xl) !important; } } @media screen and (min-width:1281px) { .pad-l-0 { padding-left: 0 !important; } .pad-l-sm { padding-left: var(--sb-gutter) !important; } .pad-l { padding-left: var(--sb-space-default) !important; } .pad-l-lg { padding-left: var(--sb-space-lg) !important; } .pad-r-0 { padding-right: 0 !important; } .pad-r-sm { padding-right: var(--sb-gutter) !important; } .pad-r { padding-right: var(--sb-space-default) !important; } .pad-r-lg {padding-right: var(--sb-space-lg) !important;} .pad-r-xl {padding-right: var(--sb-space-xl) !important;} } /* ========================================================= MARGIN — VERTICAL (TOP / BOTTOM) ========================================================= */ .mar-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .mar-y-sm { margin-top: var(--sb-space-sm) !important; margin-bottom: var(--sb-space-sm) !important; } .mar-y { margin-top: var(--sb-space-default) !important; margin-bottom: var(--sb-space-default) !important; } .mar-y-lg { margin-top: var(--sb-space-lg) !important; margin-bottom: var(--sb-space-lg) !important; } /* ========================================================= GLOBAL SPACING + LAYOUT SYSTEM CMS-safe • LIVE-safe • JS-free ========================================================= */ /* ========================================================= SB WRAP STRUCTURAL + BACKGROUND ========================================================= */ .sb-wrap { position: relative; margin: 0; padding: 0; clear: both; box-sizing: border-box; max-width: 100%; z-index: 0; background-position: 50% 0; background-size: cover !important; background-repeat: no-repeat; background-attachment: scroll !important; } /* ========================================================= SB MODULE BEFORE / AFTER (GRAPHICS) ========================================================= */ .sb-wrap::before, .sb-wrap::after, .sb-bg-graphic1-row::before, .sb-bg-graphic1-row::after, .sb-bg-graphic2-row::before, .sb-bg-graphic2-row::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* ========================================================= OVERLAY STACKING SAFETY ========================================================= */ /* Content layer */ .sb-wrap > *, .sb-module { position: relative; z-index: 2; } /* CTA safety */ .sb-module a.btn { position: relative; z-index: 3; } /* ========================================================= CMS WRAPPER RESET ========================================================= */ .body.body-innerstatic .wrapper { max-width: none !important; width: 100%; margin: 0; padding: 0; } /* ========================================================= SPACING TOKENS ========================================================= */ :root { --z-base: 1; --z-header: 100; --z-header-inner: 110; --z-nav: 120; --z-dropdown: 130; --z-overlay: 900; --z-modal: 1000; --sb-gutter: clamp(20px, 4vw, 32px); --sb-space-sm: clamp(40px, 6vw, 64px); --sb-space-default: clamp(60px, 8vw, 120px); --sb-space-lg: clamp(90px, 100vw, 140px); --sb-space-xl: clamp(90px, 100vw, 340px); --site-max: 1425px; --sb-space-top-sm: var(--sb-space-sm); --sb-space-top: var(--sb-space-default); --sb-space-top-lg: var(--sb-space-lg); --sb-space-bottom-sm: var(--sb-space-sm); --sb-space-bottom: var(--sb-space-default); --sb-space-bottom-lg: var(--sb-space-lg); --sb-hero-pad: clamp(60px, 6vw, 140px); /* Surfaces */ --surface-white: #ffffff; --surface-dark: #000000; --surface-brand: #000000; /* brand-specific */ /* Core modes */ --color-brand: #3c3a38; /* overridden per site */ --color-light: #ffffff; --color-dark: #000000; /* Base usage */ --color-text-light: var(--color-light); --color-text-dark: var(--color-dark); --color-bg: var(--color-light); --color-line: rgba(0,0,0,.15); --nav-toggle-color: #000; /* fallback */ } .nav-toggle__icon line { stroke: var(--nav-toggle-color); } /* States */ .site-header.is-lines-dark { --nav-toggle-color: #000000; } .site-header.is-lines-light { --nav-toggle-color: #ffffff; } .site-header.is-lines-brand { --nav-toggle-color: var(--color-brand); } /* ========================================================= SPACING PRESETS (use on sb-wrap or columns) ========================================================= */ /* Bottom edge */ .has-space-bottom-sm { margin-bottom: var(--sb-space-bottom-sm); } .has-space-bottom { margin-bottom: var(--sb-space-bottom); } .has-space-bottom-lg { margin-bottom: var(--sb-space-bottom-lg); } /* Top edge */ .has-space-top-sm { margin-top: var(--sb-space-top-sm); } .has-space-top { margin-top: var(--sb-space-top); } .has-space-top-lg { margin-top: var(--sb-space-top-lg); } /* ========================================================= MOBILE COLUMN STACK SPACING - Adds vertical rhythm BETWEEN sb-cols - Top spacing only - Mobile-first (disabled on desktop) ========================================================= */ @media (max-width: 948px) { /* Target stacked columns */ .sb-wrap .sb-col + .sb-col { margin-top: var(--sb-space-default); } } .sb-module { padding: var(--sb-space-default) var(--sb-gutter) 0; box-sizing: border-box; } @media (min-width: 949px) { .sb-col .sb-module { padding: 0; } } /* Spacing modifiers */ .sb-module.sb-space-sm { padding-top: var(--sb-space-sm); } .sb-module.sb-space-lg { padding-top: var(--sb-space-lg); } /* Explicit opt-out */ .sb-module.sb-module--nomargin { padding: 0 !important; } /* ========================================================= MOBILE COLUMN STACK SPACING ========================================================= */ @media (max-width: 948px) { .sb-wrap .sb-col + .sb-col { margin-top: var(--sb-space-default); } } /* ========================================================= FULL SECTION RHYTHM - Maxwidth + Full BG rows ========================================================= */ .sb-roundedbox-row .sb-module.col-wrap { padding: var(--sb-space-default) var(--sb-gutter); } .sb-bg-full-row > .sb-module { padding: var(--sb-space-default) var(--sb-gutter); } /* Respect spacing modifiers */ .sb-maxwidth-row > .sb-module.sb-space-sm, .sb-bg-full-row > .sb-module.sb-space-sm { padding-top: var(--sb-space-sm); padding-bottom: var(--sb-space-sm); } .sb-maxwidth-row > .sb-module.sb-space-lg, .sb-bg-full-row > .sb-module.sb-space-lg { padding-top: var(--sb-space-lg); padding-bottom: var(--sb-space-lg); } /* ========================================================= CMS ONLY sb-bg-full MODULE SPACING ========================================================= */ .page-app .sb-module.sb-bg-full { padding-top: var(--sb-space-default); padding-bottom: var(--sb-space-default); } .page-app .sb-module.sb-bg-full.sb-space-sm { padding-top: var(--sb-space-sm); padding-bottom: var(--sb-space-sm); } .page-app .sb-module.sb-bg-full.sb-space-lg { padding-top: var(--sb-space-lg); padding-bottom: var(--sb-space-lg); } @media (min-width: 949px) { /* Maxwidth + full-bg rows should NOT own horizontal gutters */ .sb-bg-full-row > .sb-module { padding-left: 0; padding-right: 0; } } .sb-gallery-row .sb-gallery, .sb-wrap.sb-maxwidth-row > .sb-module { max-width: var(--site-max); margin-inline: auto; } /* ========================================================= maxwidth module spacing ========================================================= */ /* Normalize readable content alignment */ .sb-maxwidth-row .sb-module.col-wrap{ max-width: var(--site-max); margin-inline: auto; padding-inline: var(--sb-gutter); } /* Normalize readable content alignment */ .sb-maxwidth-row .sb-module.col-wrap .sb-module { padding: 0 !important; } /* ========================================================= NO SECTION PADDING — MEDIA ROWS (Gallery, video, carousel, image-only rows) ========================================================= */ @media (min-width: 949px) { .sb-testimonials-var1-row .sb-module, .sb-gallery-row .sb-module { padding-top: 0 !important; padding-bottom: 0 !important; } } /* ========================================================= FLEX SAFETY (CMS FRIENDLY) ========================================================= */ .box, .box-inner, .content, .embed, .sb-module { min-width: 0; box-sizing: border-box; margin-left: auto!important; margin-right: auto!important; max-width: 100%; } /* ========================================================= CENTERED CONTENT ROWS ========================================================= */ @media (min-width: 768px) { .sb-content-intro-row, .sb-feature-about1-row, .sb-feature-about2-row, .sb-feature-about3-row, .sb-feature-cta1-row, .sb-feature-cta2-row, .sb-feature-cta3-row { display: flex; justify-content: center; } } /* ========================================================= CARD / GRID ROWS ========================================================= */ .sb-feature-plans1-row, .sb-feature-plans2-row, .sb-icon-steps-row { display: flex; justify-content: center; } .sb-feature-plans1 > div, .sb-feature-plans2 > div, .sb-icon-steps > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } /* ========================================================= MEDIA ROWS (NO SPACING) ========================================================= */ .sb-feature-gallery-row, .sb-gallery-row, .sb-instagram-row, .sb-carousel-wrapper-row, .sb-video-row, .sb-image-row { position: relative; } /* ========================================================= LEGACY CMS COLUMN SUPPORT ========================================================= */ .sb-wrap > .sb-col { float: left; width: auto; max-width: none; } /* ========================================================= MODERN LAYOUT OPT-IN ========================================================= */ .flex-row > .sb-col, .sb-cols > .sb-col { float: none; width: auto !important; max-width: none !important; flex: 1 1 auto; } /* ========================================================= SPLIT ROWS — EVEN COLUMNS ========================================================= */ @media (min-width: 768px) { .col-wrap, .sb-content-intro-row, .sb-feature-about1--split-row, .sb-feature-about2--split-row, .sb-feature-about3--split-row { display: flex; align-items: flex-start; gap: clamp(32px, 5vw, 64px); } .sb-content-intro-row .sb-module .sb-col, .sb-feature-about1--split-row > .sb-col, .sb-feature-about2--split-row > .sb-col, .sb-feature-about3--split-row > .sb-col { float: none; width: auto !important; max-width: none !important; flex: 1 1 0; } } /* ========================================================= BOOTSTRAP / CMS NEUTRALIZATION (SCOPED) ========================================================= */ .sb-wrap .row, .sb-wrap [class*="col-"]:not(.col-wrap) { margin: 0; padding: 0; } .sb-wrap [class*="col-"]:not(.sb-col) { float: none; width: auto; } /*==================================================================================*/ /* INTERIOR FIRST MODULE HERO PADDING */ /*==================================================================================*/ body:not(#page-home) .sb-seamlessbox-row .sb-module { padding: var(--sb-space-default) var(--sb-gutter); } @media (min-width: 949px) { body:not(#page-home) .sb-seamlessbox-row .sb-module { padding: var(--sb-space-lg); } } /* ========================================================= EMPTY SPACER ROW SYSTEM Layout-only, CMS-safe, editor-controlled ========================================================= */ /* Base spacer row */ body.page-app .sb-spacerdiv-row { display: block; width: 100%; height: var(--sb-space-default); min-height: var(--sb-space-default); pointer-events: none; } /* Size modifiers (optional) */ .sb-spacerdiv-row.sb-space-xs { height: var(--sb-space-xs); min-height: var(--sb-space-xs); } .sb-spacerdiv-row.sb-space-sm { height: var(--sb-space-sm); min-height: var(--sb-space-sm); } .sb-spacerdiv-row.sb-space-lg { height: var(--sb-space-lg); min-height: var(--sb-space-lg); } .sb-spacerdiv-row.sb-space-xl { height: var(--sb-space-xl); min-height: var(--sb-space-xl); } /* Ensure no accidental padding/margins interfere */ body.page-app .sb-spacerdiv-row > * { display: none !important; } /* Optional: editor-only visual hint */ html:not(.js-ready) .sb-spacerdiv-row, body.page-app .sb-spacerdiv-row { outline: 1px dashed rgba(0, 0, 0, 0.15); background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04) 10px, transparent 10px, transparent 20px ); } .page-app .sb-row .sb-module { width: 100%; } .sb-module.spacer-marked:before { content: "Spacing Div"; } .sb-module.spacer-marked { content: "Spacing Div"; display: block; background: color(srgb 0.95 0.95 0.95); border: 1px dotted color(srgb 0.554 0.554 0.554); margin: auto; position: relative; vertical-align: middle; text-align: center; padding: 0px!important; min-height: 100%!important; flex-grow: 1; } .sb-module.spacer-marked:before { content: "Spacing Div"; display: block; align-items: center; justify-content: center; position: relative; top: 50%; transform: translateY(-50%); position: absolute; left: 0px; right: 0px; } .sb-module.spacer-marked { content: "Spacing Div"; display: block; background: color(srgb 0.95 0.95 0.95 / 0.5); border: 1px dotted color(srgb 0.554 0.554 0.554); margin: auto; position: relative; vertical-align: top; text-align: center; padding: 40px 0px 40px!important; position: relative; } .sb-module.spacer-marked .sbuilder{ position: absolute; width: 100%; top: 0px; } /* ========================================================= EQUAL HEIGHT COLUMNS — SPACER AWARE Only affects rows with empty spacer columns ========================================================= */ .page-app .sb-row:has(> .sb-col.empty) { display: flex; align-items: stretch; } /* Kill float ONLY in this case */ .page-app .sb-row:has(> .sb-col.empty) > .sb-col { float: none; } /* Ensure empty column stretches */ .page-app .sb-row:has(> .sb-col.empty) > .sb-col.empty { display: flex; align-items: stretch; } /* Spacer module fills column height */ .page-app .sb-row:has(> .sb-col.empty) .sb-module.spacer-marked { flex: 1; min-height: 100%; } /* style bg for app only */ .page-app .accordion-list2, .page-app .accordion-list, .page-app .sb-bg-img { background: radial-gradient(circle, rgba(150, 150, 150, 0.2) 10%, rgb(83 83 83 / 34%) 70%), #f0f0f0; } /* ===================================================== sb-wrap inner bg ===================================================== */ .surface-white { background: var(--surface-white); padding: 60px; border-radius: 20px; } .surface-brand { background: var(--surface-brand); padding: 60px; border-radius: 20px; } /* ===================================================== footer wrapper ===================================================== */ .footer .wrapper { width: 100%; } .footer-box, .footer-user-content { flex: 1 1 0; /* 👈 KEY LINE */ min-width: 0; } .footer .wrapper { justify-content: space-between; } .footer .wrapper:has(.footer-user-content:empty) { justify-content: flex-start; } /* ===================================================== BOTTOM BRANDING STRIP (OUTSIDE FOOTER) ===================================================== */ .by-optima { /* Reset text behavior */ display: flex !important; align-items: center; justify-content: flex-end; /* Full-width bar */ width: 100%!important; max-width: 100%; margin: 0; padding: 14px 24px; /* Visual style (light trim like example) */ background: #f4f5f6; color: #6b6f75 !important; font-size: 12px !important; line-height: 1.4; font-weight: 500; border-top: 1px solid rgba(0, 0, 0, 0.06); /* Kill legacy inline styles */ text-align: right; border-radius: 0; padding-right: 20px!important; } /* Link styling */ .by-optima a { color: inherit !important; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding-right: 2px; } /* Logo sizing */ .by-optima img { height: 34px; width: auto!important; display: block; opacity: 0.85; } /* Hover polish */ .by-optima a:hover img { opacity: 1; } /* Mobile handling */ @media (max-width: 768px) { .by-optima { justify-content: center; text-align: center; flex-wrap: wrap; } } /* --- Fix vertical misalignment of "by" text --- */ .by-optima { line-height: 34px !important; /* match logo height */ } .by-optima img { align-self: center; } .by-optima a { line-height: 34px; display: inline-flex; align-items: center; } .sb-bg-pattern-row { background-size: inherit!important; background-repeat: repeat; } body.page-app .sb-row { background-position: top center!important; background-size: cover!important; background-attachment: scroll; overflow: visible; z-index: 0; } @media screen and (max-width: 767px) { .sb--bgcover, .body, .footer { background-position: top center!important; background-size: cover!important; background-attachment: scroll; overflow: visible; z-index: 0; } } .sb--bgcover { background-position: 50% 0; background-size: cover!important; background-attachment: scroll!important; background-repeat: no-repeat; background-clip: padding-box; /* or border-box */ } .body { background-size: 100%!important; } /* ========================================================= FOUC PREVENTION + SMOOTH REVEAL ========================================================= */ html.js-loading #header-logo { opacity: 0; } html.js-ready #header-logo { opacity: 1; transition: opacity 0.2s ease; } /* Hide JS-aligned modules before ready */ html:not(.js-ready) .sb-module { opacity: 0; pointer-events: none; } /* Reveal modules once ready */ html.js-ready .sb-module { opacity: 1; transition: opacity 0.2s ease-out; pointer-events: auto; } /* Prevent carousel flash during JS setup */ html.js-loading .carousel, html.js-loading .carousel-inner { opacity: 0; } /* Reveal carousel smoothly once fully ready */ html.carousel-ready .carousel, html.carousel-ready .carousel-inner { opacity: 1; transition: opacity 0.25s ease-out; } html.page-app .sb-module { opacity: 1 !important; } /* Prevent carousel animation during initial JS setup */ html:not(.carousel-ready) .carousel-inner, html:not(.carousel-ready) .carousel-inner .item, html:not(.carousel-ready) .carousel-inner .carousel-item { transition: none !important; } /* Prevent CMS background-image from ever flashing */ html.js-loading .carousel-wrapper, html.js-loading .carousel-inner, html.js-loading .carousel-inner .item, html.js-loading .carousel-inner .carousel-item { background-image: none !important; } /* Carousel CLS guard */ .carousel-inner .item, .carousel-inner .carousel-item { min-height: 750px; position: relative; overflow: hidden; } .carousel-lcp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; } html.carousel-ready .carousel-lcp-img, html.js-ready .carousel-lcp-img { opacity: 1; transition: opacity 0.25s ease-out; } /* Disable motion until JS + LCP are ready */ html:not(.carousel-ready) .carousel-inner, html:not(.carousel-ready) .carousel-inner .item, html:not(.carousel-ready) .carousel-inner .carousel-item { transition: none !important; transform: none !important; } /* Overlay content stays above image */ .carousel-inner .item-inner, .carousel-inner .caption, .carousel-inner .text-overlay { position: relative; z-index: 2; } /* HARD KILL CMS CAROUSEL BACKGROUNDS */ #page-home .carousel-wrapper, #page-home .carousel-inner, #page-home .carousel-inner .item, #page-home .carousel-inner .carousel-item { background-image: none !important; } /* Default: header is transparent */ :where(html, body).has-header-overlay .site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Only animate AFTER JS-ready */ html.js-ready :where(html, body).has-header-overlay .site-header { transition: background-color 0.28s ease, backdrop-filter 0.28s ease; } /* Scrolled state */ :where(html, body).has-header-overlay.header-scrolled .site-header { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ========================================================= CAROUSEL HEADER LOGO ========================================================= */ html.has-carousel-logo .body:not(#page-home) #header-logo { visibility: hidden; } html.carousel-logo-ready #header-logo { visibility: visible; } html.has-carousel-logo body#page-home .logo-icon { display: block; } /* ========================================================= NAV ARROW FOUC PREVENTION ========================================================= */ /* Reserve space so layout does not shift */ .site-nav .nav-item > a { display: inline-flex; align-items: center; gap: 6px; } /* Hide injected arrows until JS is ready */ html:not(.js-ready) .nav-arrow { opacity: 0; transform: translateY(-1px); } /* Smooth reveal */ html.js-ready .nav-arrow { opacity: 1; transition: opacity 0.15s ease-out; } /* iframe control -------------------------------------------------*/ .sb-module iframe { width: 100%!important; } /*style iframe in fancybox*/ @media screen and (max-width:948px) { .fancybox-content iframe { width: 100%; height: 30vh; } } /* ========================================================= HEADER - TOOLBAR LINKS ========================================================= */ .site-header__cta .tool-links { display: block; font-size: 13px; line-height: 19px!important; font-weight: 400; text-align: center; } @media (min-width:949px) { .site-header__cta .tool-links { display: block; font-size: 12px; line-height: 25px!important; font-weight: 400; } } .site-header__cta .tool-links a { margin: 0px 0px 0px 0px; font-size: 15px; line-height: 19px!important; font-weight: 500; display: inline; } @media (min-width: 949px) { .site-header__cta .tool-links a { margin: 0px 0px 0px 6px; font-size: 15px; line-height: 19px!important; font-weight: 400; text-align: center; } } .site-header__cta .tool-links a.phone { white-space: nowrap; } /* ========================================================= MAP + CONTACT BLOCK ========================================================= */ .sb-map-row iframe { height: 420px; } .sb-video-row iframe { aspect-ratio: 16 / 9; } .sb-map-row { padding: 0 !important; } .sb-map-row .sb-wrap-inner { max-width: none !important; padding: 0 !important; } .sb-map-row iframe { display: block; width: 100%; height: 420px; } /* ============================== MAP SPLIT HERO (LAYOUT ONLY) ============================== */ /* no top spacing home only */ #page-home .sb-wrap.has-space-top-lg.interior { margin-top: 0px; } .map-split { position: relative; display: grid; grid-template-columns: 60% 40%; height: 600px; overflow: hidden; width: 100%; margin-left: auto; margin-right: auto; border-radius: 30px; background: left center; } /* MAP SIDE */ .map-frame { position: relative; overflow: hidden; } .map-frame iframe { height: 700px; filter: brightness(100%) contrast(100%) saturate(90%) blur(0px) hue-rotate(328deg); border: none; line-height: 1; margin: 0; max-width: 100%; width: 100%; transform: translateX(0); } /* CONTENT SIDE */ .contact-block { position: relative; z-index: 2; display: flex; align-items: center; } .contact-block .content { width: 100%; } .contact-block .content h2 { font-weight: 600; } /* MOBILE */ @media (max-width: 900px) { .map-split { grid-template-columns: 1fr; height: auto; margin-left: 0px; margin-right: 0px; width: inherit; } .map-frame iframe { position: relative; width: 100%; height: 320px; transform: none; } .contact-block .content { padding: 0px; width: 100%; } } /* ===================================================== CONTACT CONTENT — TYPOGRAPHY ===================================================== */ .contact-block .content h1 { font-size: 2em !important; line-height: 1.3em !important; font-weight: 400; } @media (min-width: 768px) { .contact-block .content h1 { font-size: 2em !important; line-height: 1.3em !important; } } /* ===================================================== CONTACT CONTENT — ADDRESS / PHONE / EMAIL (CHILD-SCOPED, NOT MAP-DEPENDENT) ===================================================== */ /* Shared row behavior */ .contact-block .content a.map, .contact-block .content a.phone, .contact-block .content a.mail { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: start; text-decoration: none; margin-bottom: 14px; line-height: 1.55; } /* ICON COLUMN */ .contact-block .content a.map::before, .contact-block .content a.phone::before, .contact-block .content a.mail::before { content: ""; width: 16px; height: 16px; background: currentColor; grid-column: 1; margin-top: 2px; } /* TEXT COLUMN */ .contact-block .content a.map .address-text, .contact-block .content a.phone span, .contact-block .content a.mail span { grid-column: 2; display: block; } /* Ensure wrapped address lines align cleanly */ .contact-block .content a.map .address-text span { display: inline; } /* ===================================================== CONTACT CONTENT — DIVIDER ===================================================== */ .contact-block .content hr { display: block; height: 1px; border: 0; opacity: 0.2; margin: 35px 0; } /* ===================================================== ICON MASKS (UNCHANGED SVGs) ===================================================== */ /* ADDRESS */ .contact-block .content a.map::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") no-repeat center; } /* PHONE */ .contact-block .content a.phone::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5.5a1 1 0 0 1 1-1H7.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.59a1 1 0 0 1-.25 1.01l-2.2 2.19z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5.5a1 1 0 0 1 1-1H7.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.59a1 1 0 0 1-.25 1.01l-2.2 2.19z'/%3E%3C/svg%3E") no-repeat center; } /* EMAIL */ .contact-block .content a.mail::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center; } /* ===================================================== CONTACT CONTENT — HOURS GRID ===================================================== */ .contact-block .content .hours-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px; row-gap: 6px; max-width: 310px; } /* ============================== MAP SPLIT COLORS + TYPOGRAPHY ============================== */ .map-split .contact-block span, .map-split .contact-block p, .map-split .contact-block a { font-size: 13px!important; line-height: 1.5!important; } .map-split .contact-block { position: relative; z-index: 2; display: flex; align-items: center; background: #d7d7d7; } .map-split .contact-block .content { padding: 70px; width: 100%; } /*==================================================================================*/ /* add before element property */ /*==================================================================================*/ header .logo, .content h1, .sb-embed h1, .content h2, .sb-module .headline h2 { position: relative; } .testimonials figure:before, .sb-testimonials-row .testimonials:before, .image-row-one-wrap .image:before, .carousel-wrapper .item-content .item-content-inner:before, .gallery-item:before, header .logo:before, .carousel .item-content h2:before, body:not(.page-app) .content h1:before, body:not(.page-app) .sb-embed h1:before, body:not(.page-app) .content h2:before, .sb-module .headline h2:before { content: ""; height: 100%; position: absolute; top: 0px; left: 0; width: 100%; z-index: 0; margin: 0px; right: 0px; } /* transition speeds -------------------------------------------------*/ a, input, .tab-sm i, a i, .header, .header .header-inner, #header-logo, .header .nav, .toolbar-links, .header .cta .phone, .header .cta a, .sb-module *:not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']), .sb-gallery div, *:before, *:after, #logoimg, .nav .dropdown-wrapper, .header-inner > .row, .sb-feature-cta-col-row .sb-col, .sb-feature-cards1-row .sb-col, .sb-feature-cards2-row .sb-col, .sb-feature-services-row .sb-col, .hamburger-box, .module-mini-cta [class*='col-'] a, .sb-feature-services-row .sb-col-wrap:before { -webkit-transition: all .45s cubic-bezier(0.25, 1, 0.33, 1)!important; -moz-transition: all .45s cubic-bezier(0.25, 1, 0.33, 1)!important; transition: all .45s cubic-bezier(0.25, 1, 0.33, 1)!important; } .header { display: none; } /* ========================================================= FOUC PREVENTION + FADE-IN ========================================================= */ /* Initial hidden state */ html.js-loading body { opacity: 0; } /* Ready → fade in */ html.js-ready body { opacity: 1; transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); } /* ================================================= HEADER LOGO — CLS SAFE BASELINE (FINAL) ================================================= */ /* Brand container */ .site-header__brand { display: flex; align-items: flex-end; } body { /* HEADER LOGO */ --header-logo-height: 72px; --header-logo-height-desktop: 110px; /* CAROUSEL LOGO */ --carousel-logo-height: 200px; --carousel-logo-height-desktop: 400px; } /* Header logo container controls size */ #header-logo { height: var(--header-logo-height); display: flex; align-items: center; overflow: hidden; /* clamps tall / wide logos */ } /* Mobile default (implicit) */ #header-logo { height: var(--header-logo-height); } /* Desktop override */ @media (min-width: 949px) { #header-logo { height: var(--header-logo-height-desktop); } } /* Mobile default */ html.has-carousel-logo body#page-home .carousel .logo { height: var(--carousel-logo-height); } /* Desktop override */ @media (min-width: 949px) { html.has-carousel-logo body#page-home .carousel .logo { height: var(--carousel-logo-height-desktop); } } /* Logo obeys container height, NOT width */ #header-logo { display: flex; align-items: center; } #header-logo * { height: 100%; } #header-logo img, #header-logo svg { height: 100%!important; width: auto; max-width: none !important; padding: 10px; } /* FIX LOGO LINK CLICKING */ .header { display: block; /* or remove rule entirely */ } header .logo::before, header .logo::after, #header-logo::before, #header-logo::after { pointer-events: none; } #header-logo a { position: relative; z-index: 5; } /* ================================================= HEADER LOGO - Container ================================================= */ html.has-carousel-logo body#page-home .carousel .logo img { height: 100% !important; width: auto; max-width: none !important; } /*==================================================================================*/ /* heading -- default 2*/ /*==================================================================================*/ .content h1, .headline h1, .post .entry h1, .post h2.title, .post h1.title, .post h2 { text-transform: uppercase; } .content-intro h1, .content h1, .sb-embed h1, .content h2, .sb-module .headline h2, .sb-wrap:first-child h2, .footer h2, .sb-module h2, .content h2, .content h3, .sb-hoursofoperation h2, .sb-services h2, body.page-feed-post h2.title, body.page-full-post h1.title, .micro-cta h1 { font-size: 30px!important; line-height: 42px!important; font-weight: 500; letter-spacing: 0px; text-transform: capitalize; text-align: left; /* width: 90%;*/ margin: 0px auto; } @media (min-width: 768px) { .content-intro h1, .content h1, .sb-embed h1, .content h2, .sb-module .headline h2, .sb-wrap:first-child h2, .footer h2, .sb-module h2, .content h2, .content h3, .sb-hoursofoperation h2, .sb-services h2, .micro-cta h1 { font-size: 1.5em!important; line-height: 1.2em!important; font-weight: 500; width: initial; margin: 0px; } } body.page-full-post h1.title { font-size: 40px!important; line-height: 55px!important; } @media (min-width: 768px) { body.page-full-post h1.title { font-size: 2.5em!important; line-height: 1.5em!important; } } .content-intro h1, .content h1, .sb-embed h1 { font-size: 22px!important; line-height: 42px!important; } @media (min-width: 768px) { .content-intro h1, .content h1, .sb-embed h1 { font-size: 50px!important; line-height: 60px!important; } } .content h3, .sb-about h3, .embed h3 { font-size: 15px!important; line-height: 30px!important; font-weight: 800; letter-spacing: 0px; text-transform: capitalize; text-align: left; /* width: 90%;*/ margin: 0px auto; padding-top: 20px; font-style: normal; } @media (min-width:768px) { .content h3, .sb-about h3, .embed h3 { font-size: 19px!important; width: initial; margin: initial; } } .content h1 span, .content h2 span, .content h1 strong, .content h2 strong, body:not(.page-app) .text--white h2 span { font-weight: 400!important; } /* home*/ /* h1 */ :where(html, body).has-heading-color .content h1 { font-size: 1.5em!important; line-height: 1.1em!important; } @media (min-width: 768px) { :where(html, body).has-heading-color .content h1 { font-size: 2em!important; line-height: 1.2em!important; } } /* h2 */ body .content h2 { font-size: 1.2em!important; line-height: 1.1em!important; padding-bottom: 15px; font-weight: 600; } @media (min-width: 768px) { body .content h2 { font-size: 1.5em!important; line-height: 1.2em!important; } } /* h3 */ body .content h3 { font-size: 1.0em!important; line-height: 1.4em!important; font-weight: 600; padding-top: 0px; padding-bottom: 5px!important; } @media (min-width: 768px) { body .content h3 { font-size: 1.1em!important; line-height: 1.4em!important; } } /* h4 */ body .content h4 { font-size: .9em!important; line-height: 1.2em!important; font-weight: 600; } @media (min-width: 768px) { body .content h4 { font-size: 1.0em!important; line-height: 1.7em!important; } } /*==================================================================================*/ /* BUTTON BASE — MODERNIZED (CMS SAFE) */ /*==================================================================================*/ /* ----------------------------------------------------- 0) BASE BUTTON RESET (buttons only) ----------------------------------------------------- */ a.btn, .btn { cursor: pointer; outline: none; border-radius: 0; border: 1px solid; font-size: 16px; font-weight: 600; line-height: 20px; text-transform: uppercase; letter-spacing: 0 !important; display: inline-block; transform: translateY(0); box-shadow: 0 6px 12px rgba(0,0,0,0); transition: transform .25s ease, box-shadow .25s ease; } /* ----------------------------------------------------- 1) BUTTON PADDING (single source of truth) ----------------------------------------------------- */ a.btn, .btn { padding: 12px 30px; } /* Carousel exception (legacy visual match) */ .carousel a { padding: 16px 35px !important; } /* Desktop tightening */ @media (min-width: 768px) { a.btn, .btn { padding: 10px 35px; width: auto; } } /* ----------------------------------------------------- 2) HOVER / FOCUS MOTION ----------------------------------------------------- */ a.btn:hover, .btn:hover, a.btn-cta:hover, .btn-cta:hover, a.btn-ph:hover, .btn-ph:hover, a.btn-default:hover, .btn-default:hover, .gallery-item-wrap .btn:hover, .module-cta a.btn:hover, .module-cta .btn:hover, .sb-contactform-row input.btn:hover, .sb-formbuilder-row input.btn:hover, .carousel .item-content a:hover, input[type="submit"]:hover, .social-module a:hover, a.btn:focus-visible, .btn:focus-visible, a.btn-cta:focus-visible, .btn-cta:focus-visible, a.btn-ph:focus-visible, .btn-ph:focus-visible, a.btn-default:focus-visible, .btn-default:focus-visible, .gallery-item-wrap .btn:focus-visible, .module-cta a.btn:focus-visible, .module-cta .btn:focus-visible, .sb-contactform-row input.btn:focus-visible, .sb-formbuilder-row input.btn:focus-visible, .carousel .item-content a:focus-visible { text-decoration: none !important; transform: translateY(-4px); box-shadow: 0 5px 10px rgba(0,0,0,0); } /* ===================================================== AUTO BUTTON GROUP SYSTEM — FINAL (REAL DOM SAFE) - Works with: .sb-module.sb-content (your screenshot) - Also supports: .sb-module.content (legacy) - Supports wrapper: .btn-row-group - Supports wrapperless: buttons directly in module - 1–N buttons - Desktop inline / Mobile stacked ===================================================== */ .sb-module.content:has(> a.btn) > a.btn { margin-top: 1.75rem; } /* ----------------------------------------------------- 0) Normalize buttons ----------------------------------------------------- */ a.btn { display: inline-block; margin-top: 0; /* buttons do not own vertical rhythm */ } /* Utility: "module content" targets (covers both naming styles) */ :where(.sb-module.sb-content, .sb-module.content, .sb-module) {} /* ===================================================== A) WRAPPER CASE — .btn-row-group (YOUR DOM) ===================================================== */ /* group spacing from content above */ :where(.sb-module.sb-content, .sb-module.content, .sb-module) :has(> .box .btn-row-group a.btn) .btn-row-group, :where(.sb-module.sb-content, .sb-module.content, .sb-module) :has(> .btn-row-group a.btn) .btn-row-group { margin-top: 1.75rem; } /* Desktop: inline row */ @media (min-width: 949px) { :where(.sb-module.sb-content, .sb-module.content, .sb-module) .btn-row-group a.btn { margin-right: 0.75rem; } :where(.sb-module.sb-content, .sb-module.content, .sb-module) .btn-row-group a.btn:last-child { margin-right: 0; } } /* Mobile: stacked */ @media (max-width: 948px) { :where(.sb-module.sb-content, .sb-module.content, .sb-module) .btn-row-group a.btn { display: block; width: 100%; text-align: center; margin-top: 1.1rem; margin-right: 0; } /* no extra top-gap on first */ :where(.sb-module.sb-content, .sb-module.content, .sb-module) .btn-row-group a.btn:first-child { margin-top: 0; } } /* Single button INSIDE btn-row-group */ :where(.sb-module.sb-content, .sb-module.content, .sb-module) .btn-row-group:has(> a.btn:only-child) a.btn { margin-top: 0; /* group already has margin-top */ } /* ===================================================== B) WRAPPERLESS CASE — buttons directly in module (when client pastes 1–N links without a wrapper) ===================================================== */ /* single wrapperless button spacing */ :where(.sb-module.sb-content, .sb-module.content, .sb-module) :has(a.btn):not(:has(a.btn + a.btn)) a.btn { margin-top: 1.75rem; } /* multiple wrapperless buttons (inline spacing) */ @media (min-width: 949px) { :where(.sb-module.sb-content, .sb-module.content, .sb-module) :has(a.btn + a.btn) a.btn { margin-top: 1.75rem; margin-right: 0.75rem; } :where(.sb-module.sb-content, .sb-module.content, .sb-module) :has(a.btn + a.btn) a.btn:last-child { margin-right: 0; } } @media (max-width: 948px) { :where(.sb-module.sb-content, .sb-module.content, .sb-module) :has(a.btn + a.btn) a.btn { display: block; width: 100%; text-align: center; margin-top: 1.1rem; margin-right: 0; } :where(.sb-module.sb-content, .sb-module.content, .sb-module) :has(a.btn + a.btn) a.btn:first-child { margin-top: 0; } } /* ===================================================== BUTTON HOVER TINT — UNIFIED / THEME SAFE - Respects bg / border - Tints background only - Text color NEVER changes ===================================================== */ /* Base button containers */ a.btn, .btn, a.btn-cta, .btn-cta, a.btn-ph, .btn-ph, a.btn-default, .btn-default, .gallery-item-wrap .btn, .module-cta a.btn, .module-cta .btn, .carousel .item-content a { position: relative; overflow: hidden; } /* Overlay layer */ a.btn::before, .btn::before, a.btn-cta::before, .btn-cta::before, a.btn-ph::before, .btn-ph::before, a.btn-default::before, .btn-default::before, .gallery-item-wrap .btn::before, .module-cta a.btn::before, .module-cta .btn::before, .carousel .item-content a::before { content: ""; position: absolute; inset: 0; background: transparent; pointer-events: none; z-index: 0; transition: background .25s ease; } /* Ensure content sits above tint */ a.btn > *, .btn > *, a.btn-cta > *, .btn-cta > *, a.btn-ph > *, .btn-ph > *, a.btn-default > *, .btn-default > *, .gallery-item-wrap .btn > *, .module-cta a.btn > *, .module-cta .btn > *, .carousel .item-content a > * { position: relative; z-index: 1; } /* Hover / Focus Tint */ a.btn:hover::before, .btn:hover::before, a.btn-cta:hover::before, .btn-cta:hover::before, a.btn-ph:hover::before, .btn-ph:hover::before, a.btn-default:hover::before, .btn-default:hover::before, .gallery-item-wrap .btn:hover::before, .module-cta a.btn:hover::before, .module-cta .btn:hover::before, .carousel .item-content a:hover::before, a.btn:focus-visible::before, .btn:focus-visible::before, a.btn-cta:focus-visible::before, .btn-cta:focus-visible::before, a.btn-ph:focus-visible::before, .btn-ph:focus-visible::before, a.btn-default:focus-visible::before, .btn-default:focus-visible::before, .gallery-item-wrap .btn:focus-visible::before, .module-cta a.btn:focus-visible::before, .module-cta .btn:focus-visible::before, .carousel .item-content a:focus-visible::before { background: rgba(255, 255, 255, 0.12); } input[type="submit"]:hover { box-shadow: inset 0 0 0 999px rgba(255,255,255,0.12); } /* ===================================================== ICONS — only inside button groups (.btn-row-group) (so single CTAs don’t get forced icons) ===================================================== */ /* Base spacing for icons (group only) */ :where(.sb-module.sb-content, .sb-module.content, .sb-module) .btn-row-group a.btn { position: relative; padding-right: 2.25em; } /* Default: double chevron */ :where(.sb-module.sb-content, .sb-module.content, .sb-module) .btn-row-group a.btn::after { content: ""; position: absolute; right: .85em; top: 50%; width: 1.05em; height: 1.05em; transform: translateY(-50%); background: currentColor; pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4 L12 12 L4 20 Z M12 4 L20 12 L12 20 Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4 L12 12 L4 20 Z M12 4 L20 12 L12 20 Z'/%3E%3C/svg%3E") center / contain no-repeat; } /* TEL button: mirrored phone */ :where(.sb-module.sb-content, .sb-module.content, .sb-module) .btn-row-group a.btn[href^="tel:"] { padding-right: 2.1em; } :where(.sb-module.sb-content, .sb-module.content, .sb-module) .btn-row-group a.btn[href^="tel:"]::after { right: 0.75em; transform: translateY(-50%) scaleX(-1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c2.16 3.5 5.09 6.43 8.59 8.59l2.8-2.8c.27-.27.67-.36 1.02-.24 1.12.37 2.32.57 3.57.57.55 0 1 .45 1 1V22c0 .55-.45 1-1 1C10.4 23 1 13.6 1 2c0-.55.45-1 1-1h3.09c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.24 1.02l-2.8 2.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c2.16 3.5 5.09 6.43 8.59 8.59l2.8-2.8c.27-.27.67-.36 1.02-.24 1.12.37 2.32.57 3.57.57.55 0 1 .45 1 1V22c0 .55-.45 1-1 1C10.4 23 1 13.6 1 2c0-.55.45-1 1-1h3.09c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.24 1.02l-2.8 2.8z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Hover nudge */ :where(.sb-module.sb-content, .sb-module.content, .sb-module) .btn-row-group a.btn:hover::after { transform: translateY(-50%) translateX(2px); } /* Locations variant */ .locations :where(.sb-module.sb-content, .sb-module.content, .sb-module) .btn-row-group a.btn::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z'/%3E%3C/svg%3E"); } /* a tag default: map pin icon */ a.map{ position: relative; display: inline-flex; align-items: center; gap: .5em; /* space between icon and text */ color: inherit; /* or set a color here */ text-decoration: none; padding-left: 0; /* not using absolute icon, so no extra padding */ } /* pin icon (decorative) */ a.map::before{ content: ""; display: inline-block; width: 1.05em; height: 1.25em; background: currentColor; /* SVG mask: map pin with a small inner dot */ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-3.866 0-7 3.134-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 10.2a3.2 3.2 0 1 1 0-6.4 3.2 3.2 0 0 1 0 6.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-3.866 0-7 3.134-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 10.2a3.2 3.2 0 1 1 0-6.4 3.2 3.2 0 0 1 0 6.4z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; vertical-align: middle; transform: translateY(.04em); /* tiny optical nudge */ margin-right: 3px; } /* optional hover nudge */ a.map:hover::before{ transform: translateY(.04em) translateX(1px); } /* phone icon (decorative) */ a.phone::before{ content: ""; display: inline-block; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.59a1 1 0 0 1-.24 1.01l-2.2 2.19z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.07 21 3 13.93 3 5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.59a1 1 0 0 1-.24 1.01l-2.2 2.19z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transform: translateY(.02em); } /*==================================================================================*/ /* SET DEFAULT BTN CTA*/ /*==================================================================================*/ .btn-cta { border: 1px solid; display: inline-block!important; border-radius: 0px!important; vertical-align: middle; line-height: 20px; margin: auto; /* margin-left: auto; */ text-transform: capitalize!important; float: left!important; width: 50%!important; padding: 4px 4px 4px 4px!important; float: left!important; font-size: 12px!important; } @media screen and (min-width:949px) { .btn-cta { padding: 10px 20px 10px 20px!important; width: 60%!important; float: none!important; width: inherit!important; font-size: 17px!important; } } .btn-cta:hover { text-decoration: none; } .btn-cta i { margin-left: 0px; margin-right: 6px; } /*==================================================================================*/ /* LINK LIST — GRID SAFE (NO OVERFLOW, MOBILE SAFE) */ /*==================================================================================*/ .sb-content-block-row ul, .sb-content-intro-row ul, .sb-feature-about1-row ul, .sb-feature-about2-row ul { list-style: none; margin: 0; padding: 0; } .sb-content-block-row li, .sb-content-intro-row li, .sb-feature-about1-row li, .sb-feature-about2-row li { margin: 0; padding: 0; border-bottom: 1px solid rgb(206 206 206 / 40%); } /* Anchor = grid container */ .sb-content-block-row li > a, .sb-content-intro-row li > a, .sb-feature-about1-row li > a, .sb-feature-about2-row li > a { display: grid; grid-template-columns: 1fr auto; /* text | arrow */ align-items: center; column-gap: 16px; padding: 14px 0; font-size: 18px; line-height: 1.5; font-weight: 500; text-decoration: none; /* HARD SAFETY */ max-width: 100%; overflow: hidden; } /* Arrow lives IN layout (no absolute positioning) */ .sb-content-block-row li > a::after, .sb-content-intro-row li > a::after, .sb-feature-about1-row li > a::after, .sb-feature-about2-row li > a::after { content: ""; width: 26px; height: 16px; flex-shrink: 0; background-repeat: no-repeat; background-size: contain; background-position: center; pointer-events: none; background-color: #000; mask-image: url("data:image/svg+xml;utf8,\ \ \ "); mask-repeat: no-repeat; mask-size: contain; } /* Hover motion (desktop only, layout-safe) */ @media (min-width: 949px) { .sb-content-intro-row li > a:hover::after, .sb-feature-about1-row li > a:hover::after, .sb-feature-about2-row li > a:hover::after { transform: translateX(6px); } } /* Mobile sizing */ @media (max-width: 948px) { .sb-content-intro-row li > a, .sb-feature-about1-row li > a, .sb-feature-about2-row li > a { font-size: 16px; padding: 16px 0; } } /* Remove last divider */ .sb-content-intro-row li:last-child, .sb-feature-about1-row li:last-child, .sb-feature-about2-row li:last-child { border-bottom: none; } /* ===================================================== LIST COLUMNS — CMS-SAFE (list-col / list-cols) ===================================================== */ @media (min-width: 949px) { .list-cols ul { display: block !important; /* kill flex/grid interference */ column-count: 2; column-gap: 60px; width: 100%; } .list-cols li { break-inside: avoid; -webkit-column-break-inside: avoid; } } /* Text Alignment Presets ******************/ .text--center, .text--center p, .text--center h1, .text--center h2, .text--center h3, .text--left, .text--left h1, .text--left h2, .text--left h3, .text--left img, .text--left figure, .text--left div, .text--left a, .text--center .asset { text-align: center!important; } .text--right, .text--right p, .text--right h1, .text--right h2, .text--right h3, .text--right img, .text--right figure { text-align: center!important; } @media (min-width:1001px) { .text--center, .text--center p, .text--center h1, .text--center h2, .text--center h4, .text--center h3, .text--center figure, .text--center .asset { text-align: center!important; } } .text--center h3::after { left: 50%!important; transform: translateX(-50%); } .text--center .slick-slide img { display: inline-block; } .text--center .tab-sm { text-align: center; } @media (min-width:1001px) { .sb-module.text--center .content a.map, .text--center p { margin-left: auto!important; /* margin-right: auto!important; */ } } .sb-feature-cards1.text--center .cta-content { display: block; } @media (min-width:1001px) { .text--left, .text--left p:not(.sb-formfield), .text--left h1, .text--left h2, .text--left h3, .text--left img, .text--left figure, .text--left div, .text--left .content div, .text--left:not(.sb-gallery-row):not(.sb-image-row) div, .text--left .sb-module.sb-hoursofoperation .headline h2, .text--left:not(.sb-gallery-row) a:not(.btn) { text-align: left!important; } } @media (min-width:1001px) { .text--right, .text--right p, .text--right h1, .text--right h2, .text--right h3, .text--right img, .text--right figure, .text--right .content div, .text--right a { text-align: right!important; } } @media (min-width:1001px) { .text--right, .text--right p, .text--right h1, .text--right h2, .text--right h3, .text--right img, .text--right figure { text-align: right!important; } } .text--left ul:not(.mod-errorlist):not([id^="id_"]) { list-style: none; margin-left: 0px; margin-right: 0px; text-align: left; } .text--left ul:not(.mod-errorlist):not([id^="id_"]) li { list-style: none; margin-bottom: 20px; } @media (min-width:1001px) { .text--left ul:not(.mod-errorlist):not([id^="id_"]) { list-style-type: disc; margin: 0em; } } .sb-feature-plans-row.text--center ul { text-align: left!important; } .text--center ul { padding-top: 20px; text-align: center!important; margin-left: 0em; } .text--center .text-center.list-compact ul { padding-top: 20px; text-align: left!important; margin-left: 0em; } .sb-feature-plans.text--center ul { padding-top: 0px; text-align: left!important; } .text--center li { /* list-style-position: inside; */ } .text--center i { display: inline-block; text-align: center; margin-left: 5px; position: relative; } .module-popup.text-center * { text-align: center!important; } .text-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; /* space between columns */ } @media (max-width: 768px) { .text-cols { grid-template-columns: 1fr; /* stack on small screens */ } } /*Module White Text Coloring*/ /*=========================================*/ body:not(.page-app) .text--white, body:not(.page-app) .text--white .content a:not(.btn-default), body:not(.page-app) .text--white p, body:not(.page-app) .text--white h1, body:not(.page-app) .text--white h2, body:not(.page-app)#page-home .text--white h3, body:not(.page-app) .text--white h3, body:not(.page-app) .text--white li, body:not(.page-app) .text--white li a, body:not(.page-app) .text--white i:not(.fa), body:not(.page-app) .text--white span, body:not(.page-app) .text--white strong, body:not(.page-app) .text--white blockquote:before { color: #fff!important; } body:not(.page-app) .text--white a:after { background-color: var(--color-text-inverse); } body:not(.page-app) .text--white .accordion-list li { border-color: rgba(255, 255, 255, 0.5)!important; } body:not(.page-app) .text--white .content-intro ul a:after, body:not(.page-app) .text--white .feature-about1 ul a:after, body:not(.page-app) .text--white .feature-about2 ul a:after, body:not(.page-app) .text--white .sb-feature-about2-row ul a:after, body:not(.page-app) .text--white .sb-feature-about-row ul a:after { } /*==================================================================================*/ /* row - maxwidth when narrow col active */ /*==================================================================================*/ .has-narrowsite .container >.columns.sb-maxwidth-row, .sb-gallery-row, .sb-maxwidth-row { position: relative; background-position-x: center; background-position-y: top; position: relative; left: 50%; right: 50%; margin-left: calc(-50vw); margin-right: calc(-50vw); width: 100vw; max-width: 100vw; } .sb-gallery-row .gallery.var1 { justify-content: center; } /* ====================================================================== FEATURE FLAGS (has-*) ---------------------------------------------------------------------- Body-level switches injected by CMS / templates. All flags are preserved for compatibility. Behavior is intentionally minimal unless noted. ====================================================================== */ /* ---------------------------------------------------------------------- BODY / TYPE SCALE ---------------------------------------------------------------------- */ :where(html, body).has-body-sm {} :where(html, body).has-body-lg {} :where(html, body).has-body-mobile-lg {} :where(html, body).has-body-100 {} :where(html, body).has-body-200 {} :where(html, body).has-body-300 {} :where(html, body).has-body-400 {} :where(html, body).has-body-500 {} :where(html, body).has-body-600 {} :where(html, body).has-body-700 {} /* ---------------------------------------------------------------------- HEADINGS / TYPOGRAPHY VARIANTS ---------------------------------------------------------------------- */ /* has heading accents */ #page-home.has-heading-accent .content h1:before, #page-home.has-heading-accent .sb-embed h1:before, #page-home.has-heading-accent .sb-embed h2:before, #page-home.has-heading-accent .content h2:before, #page-home.has-heading-accent .sb-module .headline h2:before { border-left: 4px solid #363636; position: relative; width: 2px; height: 100%; -webkit-transform: translateY(0px) translateX(35px) rotate(32deg); top: 0px; left: -20px; } /* h1 -- Setting text clipping properties for bg color */ .carousel .item-content h2, .has-footer-alternate1 .footer h1, :where(html, body).has-heading-color .content h1, :where(html, body).has-heading-color .text--white .content h1, :where(html, body).has-heading-color .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-color .text--white.sb-feature-cta1 .content h1 { -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient(234.33deg, #ffffff -3.63%, #ffffff 89.96%); } :where(html, body).has-heading-color .text--white .content h1 { background-image: linear-gradient(338deg, #ffffff -3.63%, #ffffff 89.96%)!important; } /* h1 -- large */ :where(html, body).has-heading-lg .sb-embed h1, :where(html, body).has-heading-lg .content h1, :where(html, body).has-heading-lg .text--white .content h1, :where(html, body).has-heading-lg .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-lg .text--white.sb-feature-cta1 .content h1 { font-size: 1.8em!important; line-height: 1.2em!important; font-weight: 400; } @media (min-width: 768px) { :where(html, body).has-heading-lg .sb-embed h1, :where(html, body).has-heading-lg .content h1, :where(html, body).has-heading-lg .text--white .content h1, :where(html, body).has-heading-lg .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-lg .text--white.sb-feature-cta1 .content h1 { font-size: 2.5em!important; line-height: 1.2em!important; font-weight: 100; } } @media (min-width: 768px) { :where(html, body).has-heading-lg .text--white .content h1 { font-size: 2.5em!important; line-height: 1.4em!important; font-weight: 300; } } /* h1 -- xlarge */ :where(html, body).has-heading-xl .sb-embed h1, :where(html, body).has-heading-xl .content h1, :where(html, body).has-heading-xl .text--white .content h1, :where(html, body).has-heading-xl .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-xl .text--white.sb-feature-cta1 .content h1 { font-size: 1.5em!important; line-height: 1.4em!important; font-weight: 400; } @media (min-width: 768px) { :where(html, body).has-heading-xl .sb-embed h1, :where(html, body).has-heading-xl .content h1, :where(html, body).has-heading-xl .text--white .content h1, :where(html, body).has-heading-xl .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-xl .text--white.sb-feature-cta1 .content h1 { font-size: 3.2em!important; line-height: 1.3em!important; font-weight: 100; } } @media (min-width: 768px) { :where(html, body).has-heading-xl .text--white .content h1 { font-size: 2.5em!important; line-height: 1.4em!important; font-weight: 300; } } /* h1 -- xlarge */ :where(html, body).has-heading-xxl .sb-embed h1, :where(html, body).has-heading-xxl .content h1, :where(html, body).has-heading-xxl .text--white .content h1, :where(html, body).has-heading-xxl .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-xxl .text--white.sb-feature-cta1 .content h1 { font-size: 1.7em!important; line-height: 1.5em!important; font-weight: 400; } @media (min-width: 768px) { :where(html, body).has-heading-xxl .sb-embed h1, :where(html, body).has-heading-xxl .content h1, :where(html, body).has-heading-xxl .text--white .content h1, :where(html, body).has-heading-xxl .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-xxl .text--white.sb-feature-cta1 .content h1 { font-size: 4.2em!important; line-height: 1.3em!important; font-weight: 100; } } @media (min-width: 768px) { :where(html, body).has-heading-xxl .text--white .content h1 { font-size: 2.5em!important; line-height: 1.4em!important; font-weight: 300; } } /* h1 -- 300 */ :where(html, body).has-heading-300 .sb-embed h1, :where(html, body).has-heading-300 .content h1, :where(html, body).has-heading-300 .text--white .content h1, :where(html, body).has-heading-300 .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-300 .text--white.sb-feature-cta1 .content h1 { font-weight: 300; } @media (min-width: 768px) { :where(html, body).has-heading-300 .sb-embed h1, :where(html, body).has-heading-300 .content h1, :where(html, body).has-heading-300 .text--white .content h1, :where(html, body).has-heading-300 .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-300 .text--white.sb-feature-cta1 .content h1 { font-weight: 300; } } @media (min-width: 768px) { :where(html, body).has-heading-300 .text--white .content h1 { font-weight: 300; } } /* h1 -- 400 */ :where(html, body).has-heading-400 .sb-embed h1, :where(html, body).has-heading-400 .content h1, :where(html, body).has-heading-400 .text--white .content h1, :where(html, body).has-heading-400 .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-400 .text--white.sb-feature-cta1 .content h1 { font-weight: 400; } @media (min-width: 768px) { :where(html, body).has-heading-400 .sb-embed h1, :where(html, body).has-heading-400 .content h1, :where(html, body).has-heading-400 .text--white .content h1, :where(html, body).has-heading-400 .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-400 .text--white.sb-feature-cta1 .content h1 { font-weight: 400; } } @media (min-width: 768px) { :where(html, body).has-heading-400 .text--white .content h1 { font-weight: 400; } } /* h1 -- 600 */ :where(html, body).has-heading-600:not(#page-home) .content h1, :where(html, body).has-heading-600 .sb-embed h1, :where(html, body).has-heading-600 .content h1, :where(html, body).has-heading-600 .text--white .content h1, :where(html, body).has-heading-600 .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-600 .text--white.sb-feature-cta1 .content h1 { font-weight: 600; } @media (min-width: 768px) { :where(html, body).has-heading-600:not(#page-home) .content h1, :where(html, body).has-heading-600 .sb-embed h1, :where(html, body).has-heading-600 .content h1, :where(html, body).has-heading-600 .text--white .content h1, :where(html, body).has-heading-600 .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-600 .text--white.sb-feature-cta1 .content h1 { font-weight: 600; } } @media (min-width: 768px) { :where(html, body).has-heading-600 .text--white .content h1 { font-weight: 600; } } /* headings -- uppercase */ :where(html, body).has-uppercase.has-footer-alternate1 .footer .footer-headline h1, :where(html, body).has-uppercase .carousel .item-content h2, :where(html, body).has-uppercase .sb-embed h1, :where(html, body).has-uppercase .sb-embed h2, :where(html, body).has-uppercase .content h1, :where(html, body).has-uppercase .content h2, :where(html, body).has-uppercase .text--white .content h1, :where(html, body).has-uppercase .text--white .content h2, :where(html, body).has-uppercase .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-uppercase .text--white:not(.sb-feature-cta1) .content h2, :where(html, body).has-uppercase .text--white.sb-feature-cta1 .content h1, :where(html, body).has-uppercase .text--white.sb-feature-cta1 .content h2, :where(html, body).has-uppercase .gallery.var1 .gallery-item .gallery-header, :where(html, body).has-uppercase .sb-feature-cards1-row .sb-col .content a { text-transform: uppercase!important; } /* headings -- letter spacing */ :where(html, body).has-letterspacing.has-footer-alternate1 .footer .footer-headline h1, :where(html, body).has-letterspacing .carousel .item-content h2, :where(html, body).has-letterspacing .sb-embed h1, :where(html, body).has-letterspacing .sb-embed h2, :where(html, body).has-letterspacing .content h1, :where(html, body).has-letterspacing .content h2, :where(html, body).has-letterspacing .text--white .content h1, :where(html, body).has-letterspacing .text--white .content h2, :where(html, body).has-letterspacing.text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-letterspacing .text--white:not(.sb-feature-cta1) .content h2, :where(html, body).has-letterspacing .text--white.sb-feature-cta1 .content h1, :where(html, body).has-letterspacing .text--white.sb-feature-cta1 .content h2 { letter-spacing: 8px!important; } :where(html, body).has-letterspacing a.btn, :where(html, body).has-letterspacing .gallery.var1 .gallery-item a.btn { letter-spacing: 3px!important; } :where(html, body).has-letterspacing .sb-feature-cards1-row .sb-col .content a { letter-spacing: 4px!important; } /* h2 */ body .content h2 { font-size: 1.2em!important; line-height: 1.1em!important; padding-bottom: 15px; font-weight: 300; } @media (min-width: 768px) { body .content h2 { font-size: 2em!important; line-height: 1.4em!important; } } :where(html, body).has-heading-lg .content h3 { font-weight: 400!important; } body#page-home.has-heading-lg .content h3, body#page-home.has-heading-lg .sb-about h3, body#page-home.has-heading-lg .embed h3 { letter-spacing: 0px!important; } /* h1 -- var1 */ :where(html, body).has-heading-var1 .sb-embed h1, :where(html, body).has-heading-var1 .content h1, :where(html, body).has-heading-var1 .text--white .content h1, :where(html, body).has-heading-var1 .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-var1 .text--white.sb-feature-cta1 .content h1 { font-size: 1.5em!important; line-height: 1.4em!important; font-weight: 400; text-transform: uppercase; } @media (min-width: 768px) { :where(html, body).has-heading-var1 .sb-embed h1, :where(html, body).has-heading-var1 .content h1, :where(html, body).has-heading-var1 .text--white .content h1, :where(html, body).has-heading-var1 .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-var1 .text--white.sb-feature-cta1 .content h1 { font-size: 2.5em!important; line-height: 1.2em!important; font-weight: 100; text-transform: uppercase; } } @media (min-width: 768px) { :where(html, body).has-heading-var1 .text--white .content h1 { font-size: 2.5em!important; line-height: 1.4em!important; font-weight: 300; } } :where(html, body).has-heading-var1 .content h3 { font-size: .9em!important; font-weight: 500!important; text-transform: uppercase; } body#page-home.has-heading-var1 .content h3, body#page-home.has-heading-var1 .sb-about h3, body#page-home.has-heading-var1 .embed h3 { letter-spacing: 0px!important; } /* h1 -- var1 this is OLD */ :where(html, body).has-heading-bold .carousel .item-content h2 { font-weight: 600!important; } :where(html, body).has-heading-bold .sb-embed h1, :where(html, body).has-heading-bold .content h1, :where(html, body).has-heading-bold .text--white .content h1, :where(html, body).has-heading-bold .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-bold .text--white.sb-feature-cta1 .content h1 { font-weight: 600!important; } @media (min-width: 768px) { :where(html, body).has-heading-bold .sb-embed h1, :where(html, body).has-heading-bold .content h1, :where(html, body).has-heading-bold .text--white .content h1, :where(html, body).has-heading-bold .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-bold .text--white.sb-feature-cta1 .content h1 { font-weight: bold!important; } } @media (min-width: 768px) { :where(html, body).has-heading-bold .text--white .content h1 { font-weight: 600!important; } } :where(html, body).has-heading-bold .content h3 { font-weight: 600!important; } body#page-home.has-heading-bold:not(.has-testimonials-var1) .content h3, body#page-home.has-heading-bold:not(.has-testimonials-var1) .sb-about h3, body#page-home.has-heading-bold:not(.has-testimonials-var1) .embed h3 { font-weight: 600!important; } body#page-home.has-heading-bold .sb-testimonials-var1-row figure h3 strong { font-weight: bolder!important; } /* :where(html, body).has-heading-color */ /* h1 -- Setting text clipping properties for bg color */ .carousel .item-content h2, .has-footer-alternate1 .footer h1, :where(html, body).has-heading-color .content h1, :where(html, body).has-heading-color .text--white .content h1, :where(html, body).has-heading-color .text--white:not(.sb-feature-cta1) .content h1, :where(html, body).has-heading-color .text--white.sb-feature-cta1 .content h1 { -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient(234.33deg, #ffffff -3.63%, #ffffff 89.96%); } :where(html, body).has-heading-color .text--white .content h1 { background-image: linear-gradient(338deg, #ffffff -3.63%, #ffffff 89.96%)!important; } :where(html, body).has-heading-color-alt {} /* ---------------------------------------------------------------------- BUTTON SYSTEM ---------------------------------------------------------------------- */ /* BTN -- padding -- sm */ @media (min-width:949px) { .has-btn-sm :not(.sbuilder) a.btn:not(.btn-reset):not([class*='tb-']), .has-btn-sm :not(.sbuilder) .btn:not(.btn-reset):not(.btn-cta):not(.edit):not([class*='tb-']), .has-btn-sm a.btn.btn-default, .has-btn-sm .btn.btn-default, .has-btn-sm .carousel .item-content a:nth-child(1), .has-btn-sm .carousel .item-content a:nth-child(2), .has-btn-sm .carousel .item-content a:nth-child(3), .has-btn-sm .carousel .item-content a:nth-child(4), .has-btn-sm body.page-feed-post .entry a, .has-btn-sm .google-map-directions, .has-btn-sm .module-form input[type=submit], .has-btn-sm a.btn-cta:not(.btn-reset) { padding: 7px 12px 7px 12px!important; font-size: 11px!important; text-transform: uppercase!important; letter-spacing: 1px !important; } .has-btn-sm .gallery-header a.btn:not(.btn-reset) { padding: 12px 30px 12px 30px!important; } } @media (min-width:949px) { .has-btn-sm .gallery-item .btn:not(.btn-reset):not(.btn-cta):not(.edit) { padding: 10px 15px 10px 15px!important; font-size: 16px!important; text-transform: uppercase!important; } } .has-btn-sm a.btn-cta:not(.btn-reset) { font-weight: 600!important; font-size: 17px!important; margin: 0 0 0 15px; position: relative; text-transform: capitalize; padding: 11px 18px!important; box-shadow: 0 0 10px rgb(0 0 0 / 0%); white-space: nowrap; } body.logoshow.has-btn-sm a.btn-cta:not(.btn-reset) { font-size: 14px!important; } /* BTN -- padding -- sm + btn round*/ @media (min-width:949px) { .has-btn-sm.has-btn-round :not(.sbuilder) a.btn:not(.btn-reset):not([class*='tb-']), .has-btn-sm.has-btn-round :not(.sbuilder) .btn:not(.btn-reset):not(.btn-cta):not(.edit):not([class*='tb-']), .has-btn-sm.has-btn-round a.btn.btn-default, .has-btn-sm .btn.btn-default, .has-btn-sm.has-btn-round .btn.btn-default, .has-btn-sm.has-btn-round .footer .nav .primary-link:last-child > a { padding-left: 16px!important; padding-right: 16px!important; } } /* BTN -- padding -- footer btn */ @media (min-width:949px) { .has-btn-sm.has-btn-round.has-footer-alternate1 .footer .nav .primary-link:last-child > a { padding-top: 7px!important; padding-bottom: 7px!important; font-size: 11px!important; text-transform: uppercase!important; letter-spacing: 1px !important; line-height: inherit!important; } } /* ===================================================== BTN-LG — SIZE ONLY (FIXED) - Matches JS: class on - Overrides base padding correctly ===================================================== */ /* DESKTOP */ @media (min-width: 949px) { html.has-btn-lg a.btn:not(.cta-header-btn) { padding: 25px 45px 25px 55px; font-size: 18px; text-transform: uppercase; } } /* MOBILE / TABLET */ @media (max-width: 948px) { html.has-btn-lg a.btn:not(.cta-header-btn) { padding: 15px 25px; font-size: 16px; } } .has-btn-minimal1 .carousel .item-content a:nth-child(1), .has-btn-minimal1 .carousel .item-content a:nth-child(2), .has-btn-minimal1 .carousel .item-content a:nth-child(3), .has-btn-minimal1 .carousel .item-content a:nth-child(4){ padding: 15px 25px 15px 25px!important; } .has-btn-minimal1 :not(.sbuilder) a.btn:not(.btn-reset):not([class*='tb-']), .has-btn-minimal1 :not(.sbuilder) .btn:not(.btn-reset):not(.btn-cta):not(.edit):not([class*='tb-']), .has-btn-minimal1 a.btn.btn-default, .has-btn-minimal1 .btn.btn-default, .has-btn-minimal1 .carousel .item-content a:nth-child(1), .has-btn-minimal1 .carousel .item-content a:nth-child(2), .has-btn-minimal1 .carousel .item-content a:nth-child(3), .has-btn-minimal1 .carousel .item-content a:nth-child(4), .has-btn-minimal1 body.page-feed-post .entry a, .has-btn-minimal1 .google-map-directions, .has-btn-minimal1 .module-form input[type=submit], .has-btn-minimal1 a.btn-cta:not(.btn-reset) { font-size: 12px!important; text-transform: uppercase!important; letter-spacing: 2px!important; font-weight: 500!important; } @media (min-width:949px) { .has-btn-minimal1 :not(.sbuilder) a.btn:not(.btn-reset):not([class*='tb-']), .has-btn-minimal1 :not(.sbuilder) .btn:not(.btn-reset):not(.btn-cta):not(.edit):not([class*='tb-']), .has-btn-minimal1 a.btn.btn-default, .has-btn-minimal1 .btn.btn-default, .has-btn-minimal1 .carousel .item-content a:nth-child(1), .has-btn-minimal1 .carousel .item-content a:nth-child(2), .has-btn-minimal1 .carousel .item-content a:nth-child(3), .has-btn-minimal1 .carousel .item-content a:nth-child(4), .has-btn-minimal1 body.page-feed-post .entry a, .has-btn-minimal1 .google-map-directions, .has-btn-minimal1 .module-form input[type=submit], .has-btn-minimal1 a.btn-cta:not(.btn-reset) { padding: 16px 35px 16px 35px!important; font-size: 12px!important; text-transform: uppercase!important; letter-spacing: 2px!important; font-weight: 500!important; } .has-btn-minimal1 :not(.sbuilder) .gallery-caption a.btn:not(.btn-reset):not([class*='tb-']), .has-btn-minimal1 :not(.sbuilder) .gallery-caption .btn:not(.btn-reset):not(.btn-cta):not(.edit):not([class*='tb-']) { padding: 12px 35px 12px 35px!important; } } @media (min-width:949px) { .has-btn-minimal1 .gallery-item .btn:not(.btn-reset):not(.btn-cta):not(.edit) { padding: 10px 15px 10px 15px!important; font-size: 16px!important; text-transform: uppercase!important; } } .has-btn-minimal1 a.btn-cta:not(.btn-reset) { font-weight: 600!important; font-size: 17px!important; margin: 0px 0px 0px 15px; position: relative; text-transform: capitalize; padding: 11px 18px!important; box-shadow: 0 0 10px rgb(0 0 0 / 0%); white-space: nowrap; } body.logoshow.has-btn-minimal1 a.btn-cta:not(.btn-reset) { font-size: 14px!important; } /* btn -- border style */ .has-btn-round .btn-cta, .has-btn-round a.btn, .has-btn-round .btn, .has-btn-round a.btn.btn-default, .has-btn-round .btn.btn-default, .has-btn-round .carousel a, .has-btn-round.page-feed-post .entry a, .has-btn-round .google-map-directions, .has-btn-round .gallery-header, .has-btn-round .sb-feature-cards1-row a, .has-btn-round .module-form input[type=submit], .has-btn-round .footer .footer-box a, .has-btn-round.has-nav-lastlink .nav .primary-link:last-child > a, .has-btn-round .sb-feature-services-row .sb-content a { border-radius: 50px!important; text-align: center; } .has-btn-square .btn-cta, .has-btn-square a.btn, .has-btn-square .btn, .has-btn-square a.btn.btn-default, .has-btn-square .btn.btn-default, .has-btn-square .carousel a, .has-btn-square.page-feed-post .entry a, .has-btn-square .google-map-directions, .has-btn-square .gallery-header, .has-btn-square .module-form input[type=submit], .has-btn-square .footer .footer-box a, .has-btn-square.has-nav-lastlink .nav .primary-link:last-child > a, .has-btn-square .sb-feature-services-row .sb-content a { border-radius: 0px!important; } .has-btn-default .btn-cta, .has-btn-default a.btn, .has-btn-default .btn, .has-btn-default a.btn.btn-default, .has-btn-default .btn.btn-default, .has-btn-default .carousel a, .has-btn-default.page-feed-post .entry a, .has-btn-default .google-map-directions, .has-btn-default .gallery-header, .has-btn-default .module-form input[type=submit], .has-btn-default .footer .footer-box a, .has-btn-default.has-nav-lastlink .nav .primary-link:last-child > a, .has-btn-default .sb-feature-services-row .sb-content a { border-radius: 6px!important; } .has-btn-text :where(.embed, .content) .btn-cta, .has-btn-text :where(.embed, .content) a.btn, .has-btn-text :where(.embed, .content) .btn, .has-btn-text :where(.embed, .content) a.btn.btn-default, .has-btn-text :where(.embed, .content) .btn.btn-default, .has-btn-text .carousel a, .has-btn-text.page-feed-post .entry a, .has-btn-text .google-map-directions, .has-btn-text .gallery-item-wrap a, .has-btn-text.has-nav-lastlink .nav .primary-link:last-child > a, .has-btn-text .sb-feature-services-row .sb-content a { background: rgb(0 0 0 / 0%) !important; font-size: 18px!important; padding: 0px!important; font-weight: 700!important; text-transform: capitalize; text-decoration-line: underline!important; border: 0px!important; } .has-btn-text a.btn:hover:not(.btn-cta):not(.btn-link):not(.btn-reset), .has-btn-text a.btn:active:not(.btn-cta):not(.btn-reset), .has-btn-text a.btn:focus:not(.btn-cta):not(.btn-reset), .has-btn-text a.btn:active:focus:not(.btn-cta):not(.btn-reset), .has-btn-text a.btn:active:hover:not(.btn-cta):not(.btn-reset) { background: rgb(0 0 0 / 0%)!important; border-color: rgb(0 0 0 / 0%)!important; /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);*/ } .has-btn-arrow-lg { --btn-arrow-size: 14em; --btn-gap: 1.00em; } .has-btn-arrow-lg a.btn:not(.btn-default) { background: transparent !important; border: 0 !important; padding: 0 !important; font-weight: 300 !important; font-size: 18px !important; text-transform: capitalize; text-decoration: none !important; color: inherit; display: inline-flex; align-items: center; gap: var(--btn-gap); position: relative; line-height: 1.2; cursor: pointer; } .has-btn-arrow-lg :where(.embed, .content) a.btn:not(.btn-default)::after { content: ""; flex: 0 0 var(--btn-arrow-size); width: var(--btn-arrow-size); height: 5.7em; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 28 24'%3E%3Cpath d='M3 12 H29 M18 6 L29 12 L18 18' stroke='black' stroke-width='0.6' stroke-linecap='butt' stroke-linejoin='square' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 28 24'%3E%3Cpath d='M3 12 H29 M18 6 L29 12 L18 18' stroke='black' stroke-width='0.6' stroke-linecap='butt' stroke-linejoin='square' fill='none'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center right; mask-position: center right; -webkit-mask-size: contain; mask-size: contain; display: flex; } .has-btn-arrow-lg .gallery-caption::after { content: ""; flex: 0 0 var(--btn-arrow-size); width: var(--btn-arrow-size); height: 3.7em; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 28 24'%3E%3Cpath d='M3 12 H29 M18 6 L29 12 L18 18' stroke='black' stroke-width='0.6' stroke-linecap='butt' stroke-linejoin='square' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 28 24'%3E%3Cpath d='M3 12 H29 M18 6 L29 12 L18 18' stroke='black' stroke-width='0.6' stroke-linecap='butt' stroke-linejoin='square' fill='none'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center right; mask-position: bottom center; -webkit-mask-size: contain; mask-size: contain; display: inline-block; margin: auto; } @media (min-width:949px) { .has-btn-arrow-lg .gallery-caption::after, #page-home .has-btn-arrow-lg .btn-row-group { margin-top: 90px; } } .has-btn-arrow-lg :where(.embed, .content) a.btn:not(.btn-default):hover::after { transform: translateX(4px); } .has-btn-arrow-lg :where(.embed, .content) a.btn:not(.btn-default) { display: flex!important; } /* Mobile adjustments */ @media (max-width: 767px) { .has-btn-arrow-lg { --btn-arrow-size: 3.6em; --btn-gap: 0.5em; } .has-btn-arrow-lg a.btn:not(.btn-default) { font-size: 16px !important; } } /* ---------------------------------------------------------------------- NAV / HEADER ---------------------------------------------------------------------- */ :where(html, body).has-nav-default {} :where(html, body).has-nav-fixed {} :where(html, body).has-nav-transparent {} :where(html, body).has-nav-lastlink {} :where(html, body).has-nav-center {} :where(html, body).has-nav-left {} :where(html, body).has-nav-right {} :where(html, body).has-toolbar {} :where(html, body).has-toolbar-mobile {} :where(html, body).has-toolbar-mobile-logosquare {} :where(html, body).has-toolbar-stacked {} /* ---------------------------------------------------------------------- LOGO / BRANDING ---------------------------------------------------------------------- */ body.logoshow {} :where(html, body).has-logo {} :where(html, body).has-logo-icon {} :where(html, body).has-logo-icon-toggle {} :where(html, body).has-logo-inline {} :where(html, body).has-logo-stacked {} :where(html, body).has-logo-centered {} /* show header -- logo icon */ /* for legacy sites and new gen */ .logo-icon { display: none; } /* for legacy sites and new gen */ .logo-icon { background: transparent; } .logo-icon img { background: transparent; width: 50px; height: auto; display: inline-block!important; position: relative; opacity: 1; } .header.logoshow .logo-icon img { -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px) ; opacity: 1; position: STATIC; } /* */ .has-logo-icon a.logo-icon { display: block!important; } .has-logo-icon .logo-icon { width: inherit; height: inherit; background: transparent; float: none; margin-right: 10px; background: transparent; } .has-logo-icon .logo-icon img { width: inherit; height: inherit; max-height: 35px!important; float: none; display: inline-block!important; visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.5s linear; position: relative; top: 0px; filter: blur(0px); } .has-logo-icon .header.logoshow .logo-icon img { display: inline-block; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } .has-logo-icon .logo-icon img { display: block; } @media (min-width:949px) { .has-logo-icon .logo-icon img { display: block!important; } .has-logo-icon .header.logoshow .logo-icon img { display: inline-block; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } } .has-logo-icon .header.logoshow .logo-icon img { position: relative; display: inline-block!important; } @media screen and (max-width:1279px) { .has-logo-icon .fcol-1 .box-nested > * { display: none!important; /* Hide all direct children */ } .has-logo-icon .fcol-1 .box-nested > a.logo-icon { display: block!important; /* Show only the logo */ } } /* */ .has-logo-icon-scroll a.logo-icon { display: block!important; } .has-logo-icon-scroll .logo-icon { width: inherit; height: inherit; background: transparent; float: none; margin-right: 10px; background: transparent; } .has-logo-icon-scroll .logo-icon img { width: inherit; height: inherit; max-height: 35px!important; float: none; display: inline-block!important; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; position: relative; top: 0px; filter: blur(0px); } .has-logo-icon-scroll .header.logoshow .logo-icon img { display: inline-block; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } .has-logo-icon-scroll .logo-icon img { display: block; } @media (min-width:949px) { .has-logo-icon-scroll .logo-icon img { display: none!important; } .has-logo-icon-scroll .header.logoshow .logo-icon img { display: inline-block; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } } .has-logo-icon-scroll .header.logoshow .logo-icon img { position: relative; display: inline-block!important; } /* */ .has-logo-icon-swap a.logo-icon { display: block!important; } .has-logo-icon-swap .logo-icon { width: inherit; height: inherit; background: transparent; float: none; margin-right: 10px; background: transparent; } .has-logo-icon-swap .logo-icon img { width: inherit; height: inherit; max-height: 35px!important; float: none; display: none!important; visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.5s linear; position: relative; top: 0px; filter: blur(0px); } .has-logo-icon-swap .header.logoshow .logo-icon img { display: inline-block!important; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } .has-logo-icon-swap .logo-icon img { display: block; } @media (min-width:949px) { .has-logo-icon-swap .logo-icon img { display: none!important; } .has-logo-icon-swap .header.logoshow .logo-icon img { display: inline-block; visibility: visible; opacity: 1; position: relative; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0%); } } .has-logo-icon-swap .header.logoshow .logo-icon img { position: relative; display: inline-block!important; max-height: 60px!important; } .has-logo-icon-swap .header img#logoimg:not(.footer img) { display: inline-block; opacity: 1; /* Fully visible */ visibility: visible; transition: opacity 0.5s ease!important; /* Smooth transition for opacity */ } @media (min-width:1280px) { .has-logo-icon-swap .header.logoshow img#logoimg:not(.footer img) { /* Note: display: none will still cause the element to disappear abruptly after the transition */ opacity: 0; /* Fully transparent */ visibility: hidden; transition: opacity 0.5s ease!important; /* Smooth transition for opacity */ display: none; } } @media (max-width: 768px) { .has-mobile-logo-lg img#logoimg, body:not(#page-home).has-mobile-logo-lg img#logoimg { max-height: 45px !important; } } /* has icons option */ .has-icons .btn { display: inline-block; align-items: center; padding: 16px 12px; text-decoration: none; color: #333; } .has-icons .btn::before { /* font-family: "Font Awesome 5 Pro"; */ font-weight: 100; margin-right: 8px; } .has-icons .btn:nth-child(1)::before { content: "\f5da"; } /* Tooth */ .has-icons .btn:nth-child(2)::before { content: "\f5d9"; } /* Dental Hygiene */ .has-icons .btn:nth-child(3)::before { content: "\f5db"; } /* Dental Floss */ .has-icons .btn:nth-child(4)::before { content: "\f5d1"; } /* Toothbrush */ .has-icons .btn:hover { background-color: #f0f0f0; } /* ---------------------------------------------------------------------- IMGS ---------------------------------------------------------------------- */ /* imgs -- rounded images */ :where(html, body).has-img-rounded .map-frame, body.page-full-post.has-img-rounded .sb-blog-row .sb-featured-image img, body.page-feed-post.has-img-rounded .post, body:not(#page-home).has-img-dropshadow .sb-content img, :where(html, body).has-img-rounded .sb-image-row img, :where(html, body).has-img-rounded .sb-image-row.image-row-three-wrap.col-row-three-wrap img, :where(html, body).has-img-rounded .sb-gallery-row img, :where(html, body).has-img-rounded .gallery-item-wrap, :where(html, body).has-img-rounded .gallery-item:before, :where(html, body).has-img-rounded .sb-feature-discount-row, :where(html, body).has-img-rounded .sb-wrap[class*='image-row-one-wrap'] img, :where(html, body).has-img-rounded .sb-wrap[class*='col-row-one-wrap'] img, :where(html, body).has-img-rounded .has-gallery-icons .gallery.var1 img, :where(html, body).has-img-rounded .sb-fillbox-row .sb-wrap-inner, :where(html, body).has-img-rounded .sb-testimonials-var1-row:not(.sb-maxwidth-row), :where(html, body).has-img-rounded .post .entry img, :where(html, body).has-img-rounded .posts .sb-featured-image img { border-radius: 30px; } :where(html, body).has-img-rounded .map-frame,, body.page-full-post.has-img-rounded-10 .sb-blog-row .sb-featured-image img, body.page-feed-post.has-img-rounded-10 .post, body:not(#page-home).has-img-dropshadow .sb-content img, :where(html, body).has-img-rounded-10 .sb-image-row img, :where(html, body).has-img-rounded-10 .sb-image-row.image-row-three-wrap.col-row-three-wrap img, :where(html, body).has-img-rounded-10 .gallery-item-wrap, :where(html, body).has-img-rounded-10 .gallery-item:before, :where(html, body).has-img-rounded-10 .sb-feature-discount-row, :where(html, body).has-img-rounded-10 .sb-wrap[class*='image-row-one-wrap'] img, :where(html, body).has-img-rounded-10 .sb-wrap[class*='col-row-one-wrap'] img, :where(html, body).has-img-rounded-10 .has-gallery-icons .gallery.var1 img, :where(html, body).has-img-rounded-10 .sb-fillbox-row .sb-wrap-inner, :where(html, body).has-img-rounded-10 .sb-testimonials-var1-row:not(.sb-maxwidth-row), :where(html, body).has-img-rounded-10 .post .entry img, :where(html, body).has-img-rounded .posts .sb-featured-image img { border-radius: 10px; } /* module bg graphic -- default style */ @media (min-width: 949px) { :where(html, body).has-bg-graphic [class*='sb-bg-graphic'].sb-wrap:after { background-position: 0px 0px !important; height: 1000px; background-repeat: no-repeat; z-index: -1; background-size: calc(100% + 60px) calc(100% + 60px); background-origin: content-box!important; background-size: 100%; } } @media (min-width: 949px) { :where(html, body).has-bg-graphic [class*='sb-bg-graphic'].sb-wrap:after { top: 0px; transform: scaleX(1); } } @media (min-width: 949px) { :where(html, body).has-bg-graphic [class*='sb-bg-graphic'].sb-wrap:after { top: 0px; transform: scaleX(1); } } /* ---------------------------------------------------------------------- LAYOUT / WIDTH ---------------------------------------------------------------------- */ @media (min-width: 949px) { .has-narrowsite .container > .columns, .has-narrowsite .wrapper .columns { max-width: var(--site-max); margin-inline: auto; } } /* ========================================================= GALLERY SYSTEM — LEGACY VARS (Step 0) var1 = overlay var2 = cards is-slide = behavior flag (works on BOTH var1 + var2) ========================================================= */ /* ========================================================= GALLERY — GLOBALS (shared) ========================================================= */ /* Core layout */ .gallery{ display:flex; flex-wrap:wrap; width:100%; box-sizing:border-box; } /* Bootstrap-ish columns produced by JS/CMS */ .gallery > .col-sm-4{ float:none; flex:0 0 33.3333%; max-width:33.3333%; box-sizing:border-box; padding:0 15px; } @media (max-width:768px){ .gallery > .col-sm-4{ flex:0 0 100%; max-width:100%; padding:0; } } /* Wrapper contract */ .gallery .gallery-item-wrap{ height:450px; overflow:hidden; position:relative; margin-bottom:20px; } /* Base item contract (do NOT remove, many rules assume this exists) */ .gallery span.gallery-item{ display:flex; flex-direction:column; width:100%; height:100%; margin:0; line-height:initial; vertical-align:top; background-repeat:no-repeat; background-position:center top; background-size:cover; transition:transform .5s ease; } /* Captions & Headers (legacy) */ .gallery .gallery-caption{ text-align:center; margin-top:10px; } .gallery .gallery-caption a{ display:inline-block; margin-top:10px; padding:10px 20px; text-decoration:none; } .gallery .gallery-header{ font-weight:500; font-size:30px; line-height:24px; text-align:center; text-transform:capitalize; position:relative; } .gallery .gallery-header h2{ font-weight:400!important; font-size:.8em!important; line-height:1em!important; padding-bottom:5px; text-align:center; } .gallery .gallery-header p{ font-weight:400; font-size:15px!important; line-height:25px; } /* Hover transitions (legacy motion) */ .gallery .gallery-item .gallery-caption, .gallery .gallery-item:hover .gallery-caption, .gallery .gallery-item .gallery-header, .gallery .gallery-item .btn{ transform:translateY(0)!important; } .gallery .gallery-item:hover .gallery-header{ transform:translateY(-10px)!important; } .gallery .gallery-item:hover .btn{ transform:translateY(-20px)!important; } /* Responsive header sizing (legacy) */ @media (max-width:768px){ .gallery .gallery-header{ font-size:1em; line-height:.8em!important; } } @media (min-width:949px){ .gallery .gallery-header{ font-size:30px; line-height:30px; } .gallery .gallery-header h2{ font-size:1.2em!important; } } /* CMS line-height nuker (legacy) */ .sb-wrap.sb-gallery-row .sb-module{line-height:0;} /* Hover scale (legacy global) */ .gallery span.gallery-item:hover{ transform:scale(1.1); } span.gallery-item:hover{ opacity:1!important; } /* pointer/cursor legacy */ body:not(#page-home) span.gallery-item *{ cursor:pointer; margin:auto; } /* ========================================================= VAR1 — OVERLAY (KEEP THIS BEHAVIOR) ========================================================= */ .gallery.var1 img{ display:none!important; } .gallery.var1 .gallery-header{ width:100%; } /* Legacy leftover support (safe no-op if absent) */ .gallery.var1 .col-sm-2{ width:100%; } /* Keep var1 item structure */ .gallery.var1 span.gallery-item{ position:relative; justify-content:flex-start; /* legacy had start; overlay content comes from caption stacking */ align-items:center; padding:0 40px; background:no-repeat center top / cover; } /* Responsive var1 */ @media (max-width:768px){ .gallery.var1{ display:block; } .gallery.var1 .gallery-item-wrap{ height:250px; width:100%; margin-bottom:20px; } .gallery.var1 span.gallery-item{ background-position:center center; } } /* Legacy header offset on desktop */ @media (min-width:949px){ .gallery .gallery-header{ bottom:20px; } } /* ========================================================= GALLERY SYSTEM — LEGACY VARS (Step 0) var1 = overlay var2 = cards is-slide = behavior flag (works on BOTH var1 + var2) ========================================================= */ /* ========================================================= GALLERY — GLOBALS (shared) ========================================================= */ /* Core layout */ .gallery{ display:flex; flex-wrap:wrap; width:100%; box-sizing:border-box; } /* Bootstrap-ish columns produced by JS/CMS */ .gallery > .col-sm-4{ float:none; flex:0 0 33.3333%; max-width:33.3333%; box-sizing:border-box; padding:0 15px; } @media (max-width:768px){ .gallery > .col-sm-4{ flex:0 0 100%; max-width:100%; padding:0; } } /* Wrapper contract */ .gallery .gallery-item-wrap{ height:450px; overflow:hidden; position:relative; margin-bottom:20px; } /* Base item contract (do NOT remove, many rules assume this exists) */ .gallery span.gallery-item{ display:flex; flex-direction:column; width:100%; /* height:100%; */ margin:0; line-height:initial; vertical-align:top; background-repeat:no-repeat; background-position:center top; background-size:cover; transition:transform .5s ease; float: none; } /* Captions & Headers (legacy) */ .gallery .gallery-caption{ text-align:center; margin-top:10px; } .gallery .gallery-caption a{ display:inline-block; margin-top:10px; padding:10px 20px; text-decoration:none; } .gallery .gallery-header{ font-weight:500; font-size:30px; line-height:24px; text-align:center; text-transform:capitalize; position:relative; } .gallery .gallery-header h2{ font-weight:400!important; font-size:.8em!important; line-height:1em!important; padding-bottom:5px; text-align:center; } .gallery .gallery-header p{ font-weight:400; font-size:15px!important; line-height:25px; } /* Hover transitions (legacy motion) */ .gallery .gallery-item .gallery-caption, .gallery .gallery-item:hover .gallery-caption, .gallery .gallery-item .gallery-header, .gallery .gallery-item .btn{ transform:translateY(0); } .gallery .gallery-item:hover .gallery-header{ transform:translateY(-10px); } .gallery .gallery-item:hover .btn{ transform:translateY(-20px); } /* Responsive header sizing (legacy) */ @media (max-width:768px){ .gallery .gallery-header{ font-size:1em; line-height:.8em!important; } } @media (min-width:949px){ .gallery .gallery-header{ font-size:30px; line-height:30px; } .gallery .gallery-header h2{ font-size:1.2em!important; } } /* CMS line-height nuker (legacy) */ .sb-wrap.sb-gallery-row .sb-module{line-height:0;} /* Hover scale (legacy global) */ .gallery span.gallery-item:hover{ transform:scale(1.1); } span.gallery-item:hover{ opacity:1!important; } /* pointer/cursor legacy */ body:not(#page-home) span.gallery-item *{ cursor:pointer; margin:auto; } /* ========================================================= VAR1 — OVERLAY (KEEP THIS BEHAVIOR) ========================================================= */ .gallery.var1 img{ display:none!important; } .gallery.var1 .gallery-header{ width:100%; } /* Legacy leftover support (safe no-op if absent) */ .gallery.var1 .col-sm-2{ width:100%; } /* Keep var1 item structure */ .gallery.var1 span.gallery-item{ position:relative; justify-content:flex-start; /* legacy had start; overlay content comes from caption stacking */ align-items:center; padding:0 40px; background:no-repeat center top / cover; } /* Responsive var1 */ @media (max-width:768px){ .gallery.var1{ display:block; } .gallery.var1 .gallery-item-wrap{ height:250px; width:100%; margin-bottom:20px; } .gallery.var1 span.gallery-item{ background-position:center center; } } /* Legacy header offset on desktop */ @media (min-width:949px){ .gallery .gallery-header{ bottom:20px; } } /* caption becomes normal block */ .gallery.var1 .gallery-caption{ text-align:left; width: 100%; background: rgb(0 0 0 / 0%); position: absolute; padding: 0px 20px; display: block; bottom: 0px; z-index: 9; padding-bottom: 20px; } .gallery.var1 .gallery-caption * { color: #000000; } /* ========================================================= VAR2 — CARDS (NEW OPTION) - show - no background-image dependence - caption reads like normal content block ========================================================= */ /* var 2 reset */ .gallery.var2 .gallery-header, .gallery.var2 .gallery-header h2, .gallery.var2 .gallery-header p { text-align:left; padding: 0px; margin: 0px; } @media (min-width:949px){ .gallery.var2 .gallery-header{bottom:0px;position: relative;padding: 20px 0px;} } .gallery.var2 .gallery-item-wrap{ height:auto; /* cards should grow naturally */ overflow:visible; margin: 0px; } .gallery.var2 span.gallery-item{ /* background:none !important; */ position: relative; display: block; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; margin: 0; padding: 0 40px; background: no-repeat center top / 100%; transition: transform 0.5s ease; } .gallery.var2 span.gallery-item:hover{ transform:none; } .gallery.var2 img.gallery-image{ display: none !important; width:100%; height:auto; } /* caption becomes normal block */ .gallery.var2 .gallery-caption{ text-align:left; width: 100%; background: rgb(0 0 0 / 0%); position: relative; padding: 0px 20px; display: block; } .gallery.var2 .gallery-caption * { color: #000000; } /* button aligned as card CTA */ .gallery.var2 .btn{ margin-top: 0px!important; align-self:flex-start; width: 100%; } .gallery.var2 .gallery-header h2{ padding-bottom:15px; font-size: 28px!important; } /* ========================================================= BTN HIDE MODE (legacy) — applies to BOTH vars ========================================================= */ .has-gallery-btn-hide .gallery-item img{ cursor:pointer!important; } .has-gallery-btn-hide .gallery-item-wrap .btn{ width:100%!important; height:100%; max-width:100%; position:absolute; margin:auto; bottom:0;left:0;right:0;top:0; opacity:0; } .has-gallery-btn-hide .gallery-item-wrap .btn:hover{ opacity:0; } .has-gallery-btn-hide .gallery-caption{ pointer-events:none; } /* ========================================================= SLIDE MODE (BEHAVIOR FLAG) — applies to BOTH var1 + var2 ========================================================= */ .gallery.is-slide{ display:flex; flex-wrap:nowrap; position:relative; scroll-behavior:smooth; overflow-x: auto; overflow-y:visible; scrollbar-width:none; scroll-snap-type:x mandatory; justify-content:flex-start !important; pointer-events:auto; gap:0; /* legacy expects tight strip */ } .gallery.is-slide::-webkit-scrollbar{ display:none; } .gallery.is-slide > .col-sm-4{ flex:0 0 33.3333%; max-width:33.3333%; scroll-snap-align:start; } /* mobile slide = single card */ @media (max-width:768px){ .gallery.is-slide > .col-sm-4{ flex:0 0 85%; max-width:85%; } } /* ensure arrows always win */ .gallery-slider-arrow{ pointer-events:auto; } /* gallery items still clickable */ .gallery.is-slide .gallery-item, .gallery.is-slide .gallery-item *{ pointer-events:auto; } /* prevent CMS box from clipping arrows */ .sb-gallery .box{ overflow:visible !important; position:relative; } /* ========================================================= SLIDER ARROWS (shared) ========================================================= */ .gallery-slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:42px; height:42px; border-radius:50%; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15); cursor:pointer; display:flex; align-items:center; justify-content:center; border:0; } .gallery-slider-arrow.prev{ left:-20px; } .gallery-slider-arrow.next{ right:-20px; } .gallery-slider-arrow svg{ width:14px; height:14px; } /* CMS line-height nuker (legacy) */ .sb-wrap.sb-gallery-row .sb-module{line-height:0;} /* Hover scale (legacy global) */ .gallery span.gallery-item:hover{ transform:scale(1.1); } span.gallery-item:hover{ opacity:1!important; } /* pointer/cursor legacy */ body:not(#page-home) span.gallery-item *{ cursor:pointer; margin:auto; } body:not(#page-home) span.gallery-item .gallery-image { display: block!important; } /* Wrapper contract */ body:not(#page-home) .gallery .gallery-item-wrap{ overflow: visible; position:relative; margin: 0px; height: 100%; } body:not(#page-home) .gallery .gallery-caption {display: inline-block;position: relative;height: auto;margin: 0px;padding: 0px;} body:not(#page-home) .gallery .gallery-header { display: block; position: relative; } body:not(#page-home) .gallery span.gallery-item {float: none;width: 100%;} /* Legacy header offset on desktop */ @media (min-width:949px){ body:not(#page-home) .gallery .gallery-header{ bottom:0px; } } body:not(#page-home) .gallery { display:flex; flex-wrap:wrap; justify-content:center; gap: 20px; } /* ---------------------------------------------------------------------- CONTENT / MODULE VARIANTS ---------------------------------------------------------------------- */ ul.accordion-list { max-width: 900px; margin: auto!important; padding: 0 15px; text-align: left!important; margin-top: 50px!important; } .accordion-list ul { text-align: left; } .accordion-list h1 { /* color: #f05454; */ margin-bottom: 30px; } .accordion-list h2 { color: #47d8b2; /* font-family: 'hm_light', sans-serif; */ font-size: 20px; text-align: left; line-height: 34px; padding: 30px 30px 0; text-transform: none; letter-spacing: 0px; font-weight: 300; display: block; margin: 0; cursor: pointer; transition: .2s; } body:not(#page-home) ul.accordion-list li h3, body ul.accordion-list li h3 , body:not(#page-home) .body .sb-content:not(.text--left) .content ul.accordion-list li h3 { font-size: 1.1em!important; line-height: 1.4em!important; font-weight: 600!important; padding: 20px 40px 20px 20px!important; text-align: left!important; padding-left: 0px!important; } .accordion-list p { text-align: left; /* font-family: 'hm_light', sans-serif; */ font-size: 14px; line-height: 1.45; position: relative; will-change: max-height; contain: layout; display: inline-block; opacity: 1; transform: translate(0,0); margin: 0px; transition: .3s opacity; -webkit-hyphens: auto; -ms-hyphens: auto; z-index: 2; text-align: left; padding-bottom: 20px; } .content .accordion-list p { line-height: 23px!important; } .content .accordion-list .answer p { padding-top: 0px!important; } ul.accordion-list { list-style: none; perspective: 900; padding: 0; margin: 0; } .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) > ul.accordion-list > li { position: relative; overflow: hidden; padding: 0px 40px!important; margin: 0; background: rgb(192 192 192 / 5%); box-shadow: 0 3px 10px -2px rgb(0 0 0 / 0%); -webkit-tap-highlight-color: transparent; border-radius: 0px; border-top: 2px solid #d5d5d5; padding-left: 20px; padding-right: 20px; } ul.accordion-list li + li { margin-top: 15px; } ul.accordion-list li:last-of-type { padding-bottom: 0; } ul.accordion-list li i { position: absolute; transform: translate(-6px, 0); margin-top: 28px; right: 15px; } ul.accordion-list li i:before, ul.accordion-list li i:after { content: ""; position: absolute; background-color: #354aa6; width: 3px; height: 9px; } ul.accordion-list li i:before { transform: translate(2px, 0) rotate(45deg); } ul.accordion-list li i:after { transform: translate(-2px, 0) rotate(-45deg); } ul.accordion-list li input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; touch-action: manipulation; } ul.accordion-list li input[type=checkbox]:checked ~ h2 { color: #101a2b; } ul.accordion-list li input[type=checkbox]:checked ~ p { margin: 10px; max-height: 0; transition: .3s; opacity: 0; } ul.accordion-list li input[type=checkbox]:checked ~ i:before { transform: translate(2px, 0) rotate(45deg); background: #57af9b; } ul.accordion-list li input[type=checkbox]:checked ~ i:after { transform: translate(-2px, 0) rotate(-45deg); background: #60c3aa; } ul.accordion-list li { cursor: pointer!important; } .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) ul.accordion-list .answer { cursor: auto!important; pointer-events: none; transition: none!important; } body.page-app ul.accordion-list .answer { display: block!important; } /* module accordion -- variant 2 (1 exists in base.themes) */ :where(html, body).has-accordion-list2 .accordion-list h3::after { display: none; } :where(html, body).has-accordion-list2 ul.accordion-list { max-width: 100%; margin: auto!important; padding: 0 15px; text-align: center; margin-top: 50px!important; } :where(html, body).has-accordion-list2 .accordion-list ul { text-align: left; } :where(html, body).has-accordion-list2 .accordion-list h1 { /* color: #f05454; */ margin-bottom: 30px; } :where(html, body).has-accordion-list2 .accordion-list h2 { color: #47d8b2; /* font-family: 'hm_light', sans-serif; */ font-size: 20px; text-align: left; line-height: 34px; padding: 30px 30px 0; text-transform: none; letter-spacing: 0px; font-weight: 300; display: block; margin: 0; cursor: pointer; transition: .2s; } :where(html, body).has-accordion-list2 .accordion-list h3 { margin: 0px!important; } @media (min-width: 949px) { :where(html, body).has-accordion-list2 .accordion-list h3 { font-size: 1.5em!important; line-height: 1.4em!important; font-weight: 300!important; padding: 20px 0px!important; margin: 0px!important; text-align: left!important; } } :where(html, body).has-accordion-list2 .accordion-list p { font-size: 14px!important; } @media (min-width: 949px) { :where(html, body).has-accordion-list2 .accordion-list p { text-align: left; /* font-family: 'hm_light', sans-serif; */ font-size: 16px!important; line-height: 1.45; position: relative; will-change: max-height; contain: layout; display: inline-block; opacity: 1; transform: translate(0,0); margin: 0px; transition: .3s opacity; -webkit-hyphens: auto; -ms-hyphens: auto; z-index: 2; text-align: left; padding-bottom: 20px; } } :where(.embed, .content) .accordion-list p { line-height: 30px!important; } :where(html, body).has-accordion-list2 ul.accordion-list { list-style: none; perspective: 900; padding: 0px 0px; margin: 0; } :where(html, body).has-accordion-list2 .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) ul.accordion-list li { position: relative; overflow: hidden; padding: 0px 0px!important; margin: 0; background: rgb(192 192 192 / 0%); box-shadow: 0 3px 10px -2px rgb(0 0 0 / 0%); -webkit-tap-highlight-color: transparent; border-radius: 0px; border-top: 2px solid #d5d5d5; padding-left: 20px; padding-right: 20px; border-bottom: 0px; } @media (min-width: 949px) { :where(html, body).has-accordion-list2 .sb-module ul.accordion-list .answer { width: 50%; } :where(html, body).has-accordion-list2 ul.accordion-list { padding: 0px 0px; } } :where(html, body).has-accordion-list2 ul.accordion-list li + li { margin-top: 15px; } :where(html, body).has-accordion-list2 ul.accordion-list li:last-of-type { padding-bottom: 0; } :where(html, body).has-accordion-list2 ul.accordion-list li i { position: absolute; transform: translate(-6px, 0); margin-top: 28px; right: 15px; } :where(html, body).has-accordion-list2 ul.accordion-list li i:before, :where(html, body).has-accordion-list2 ul.accordion-list li i:after { content: ""; position: absolute; background-color: #354aa6; width: 3px; height: 9px; } :where(html, body).has-accordion-list2 ul.accordion-list li i:before { transform: translate(2px, 0) rotate(45deg); } :where(html, body).has-accordion-list2 ul.accordion-list li i:after { transform: translate(-2px, 0) rotate(-45deg); } :where(html, body).has-accordion-list2 ul.accordion-list li input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; touch-action: manipulation; } :where(html, body).has-accordion-list2 ul.accordion-list li input[type=checkbox]:checked ~ h2 { color: #101a2b; } :where(html, body).has-accordion-list2 ul.accordion-list li input[type=checkbox]:checked ~ p { margin: 10px; max-height: 0; transition: .3s; opacity: 0; } :where(html, body).has-accordion-list2 ul.accordion-list li input[type=checkbox]:checked ~ i:before { transform: translate(2px, 0) rotate(45deg); background: #57af9b; } :where(html, body).has-accordion-list2 ul.accordion-list li input[type=checkbox]:checked ~ i:after { transform: translate(-2px, 0) rotate(-45deg); background: #60c3aa; } :where(html, body).has-accordion-list2 ul.accordion-list li { cursor: pointer!important; } :where(html, body).has-accordion-list2 .sb-module *:not(.element-item):not(.element-item):not(.element-item):not(.slick-slide):not(.slick-list):not(.slick-track):not(.module-mini-cta):not([class*='col-']) ul.accordion-list .answer { cursor: auto!important; pointer-events: none; transition: none!important; } body.page-app ul.accordion-list .answer { display: block!important; } :where(html, body).has-accordion-list2 ul.accordion-list li::before { content: "+"; display: inline-block; position: absolute; right: 10px; top: 20px; font-size: 30px; font-weight: bold; transition: none!important; } :where(html, body).has-accordion-list2 ul.accordion-list li.active::before { transform: rotate(45deg); } .feature-cards1 a[href^="tel:"] { cursor: auto; /* Reverts to the default cursor */ outline: initial; /* Removes the custom outline */ border-radius: initial; /* Resets border-radius to default */ line-height: normal; /* Resets line-height */ font-size: initial; /* Reverts to default font size */ font-weight: normal; /* Reverts to default font weight */ text-transform: none; /* Removes uppercase transformation */ letter-spacing: normal; /* Reverts to normal letter spacing */ border: none!important; /* Removes the border */ width: auto; /* Reverts width to its default */ box-shadow: none; /* Removes box shadow */ transform: none!important; /* Removes any transformations */ padding: 0px!important; /* Removes the border */ margin: 0px!important; /* Removes the border */ } /* FLEX LAYOUT for plan cards when inside sb-feature-cards1-row */ .feature-cards1 > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin-top: 30px; } /* EACH card */ .feature-cards1 > div > div { flex: 1 1 220px; max-width: 320px; background: #fff; border-radius: 12px; padding: 35px 25px; text-align: center; box-sizing: border-box; } /* Tablet */ @media (max-width: 900px) { .feature-cards1 > div > div { flex: 1 1 45%; max-width: 450px; } } /* Mobile */ @media (max-width: 600px) { .feature-cards1 > div > div { flex: 1 1 100%; max-width: 500px; } } .feature-cards1 > div > div h2 { font-weight: 500; padding: 0px!important; line-height: 30px!important; font-size: 1.7em!important; } .feature-cards1 > div > div img { max-width: 30%; padding-bottom: 10px; } .feature-cards1 .btn { margin-top: 60px!important; } /* ---------------------------------------------------------------------- FOOTER ---------------------------------------------------------------------- */ :where(html, body).has-footer {} :where(html, body).has-footer-simple {} :where(html, body).has-footer-centered {} :where(html, body).has-footer-alternate1 {} :where(html, body).has-footer-dark {} :where(html, body).has-footer-light {} /* ---------------------------------------------------------------------- LOCATIONS / MULTI-OFFICE ---------------------------------------------------------------------- */ :where(html, body).has-locations {} :where(html, body).has-locations-inline {} :where(html, body).has-locations-stacked {} :where(html, body).has-multi-location {} /* ---------------------------------------------------------------------- MISC / LEGACY / FUTURE ---------------------------------------------------------------------- */ :where(html, body).has-shadow {} :where(html, body).has-border {} /* :where(html, body).has-rounded */ .sb-roundedbox-row { border-radius: 30px; overflow: hidden!important; margin: 0px 20px; padding: 0px 10px; } @media screen and (min-width:949px) { .sb-roundedbox-row { padding: 0px 60px; } } .sb-roundedbox-row + .sb-roundedbox-row { margin-top: 40px!important; } /* boxes -- rounded images -- with fixed inner box width */ .sb-roundedbox-row.sb-fillbox-600-row { border-radius: 0px; } .sb-roundedbox-row.sb-fillbox-600-row .sb-wrap-inner { border-radius: 20px; } :where(html, body).has-animation {} :where(html, body).has-scroll-effects {} /* SAFETY CATCH — DO NOT REMOVE */ body[class*="has-"] {} /*==================================================================================*/ /* FOOTER ALTERNATE LAYOUT 1 8/1/2023 */ /*==================================================================================*/ .footer .footer-box a { border-radius: 50px!important; text-align: center; } .footer .locations_footer .locations_list a[target="_blank"] { padding: 4px 0px 0px; } .social-module { padding-top: 20px; } .social-module a { border-radius: 100px; width: 35px; height: 35px; padding-top: 14px; display: inline-block; border: 1px solid; margin-left: 0px; margin-right: 5px; margin-bottom: 0px; text-align: center; font-weight: 500; } .social-module a .fa { font-size: 14px; } /* custom - footer */ .has-footer-alternate1 .footer-box a { font-size: 16px; line-height: 30px; font-variant-numeric: lining-nums; } .has-footer-alternate1 .footer-box p, .has-footer-alternate1 .footer-box h1, .has-footer-alternate1 .footer-box h2, .has-footer-alternate1 .footer-box h3, .has-footer-alternate1 .footer-box h4, .has-footer-alternate1 .footer-box h5, .has-footer-alternate1 .footer-box h6, .has-footer-alternate1 .footer-box ul, .has-footer-alternate1 .footer-box ol, .has-footer-alternate1 .footer-box li, .has-footer-alternate1 .footer-box li a, .has-footer-alternate1 .footer-box div { margin: 0; padding: 0; } .has-footer-alternate1 .footer .nav .primary-link:last-child > a { margin: auto!important; padding: 0px!important; text-align: center!important; padding: 5px 15px!important; margin-top: 20px!important; } .has-footer-alternate1 .footer .nav .primary-link:last-child > a:hover{ text-decoration: none; } .has-footer-alternate1 .footer-box li a { text-transform: capitalize!important; padding: 0px!important; } .has-footer-alternate1 .footer-box ul, .has-footer-alternate1 .footer-box ol { list-style: none; } @media screen and (min-width: 949px) { .has-footer-alternate1 .footer .wrapper { max-width: 1425px!important; padding: 0px!important; margin: auto; } } .has-footer-alternate1 .footer { padding: 110px 0px!important; } .footer { display: flex; flex-wrap: wrap; justify-content: space-between; } .footer-box { flex: 1 1 100%; margin-bottom: 10px; float: left!important; } .has-footer-alternate1 .footer-box .footer-logo-container { display: flex; align-items: flex-start; } .has-footer-alternate1 .footer-box .footer-logo-container img { max-width: 200px; margin-right: 20px; } .has-footer-alternate1 .footer-box .footer-logoname { align-self: flex-end; font-weight: bold; } .has-footer-alternate1 .footer-box .footer-nav { display: flex; flex-wrap: wrap; justify-content: space-between; } .has-footer-alternate1 .footer-box .footer-nav .nav-inner { flex-basis: 50%; margin-bottom: 10px; } .has-footer-alternate1 .footer-box .footer-nav ul { list-style: none; padding: 0; } .has-footer-alternate1 .footer-box .footer-nav li { margin-bottom: 5px; } .has-footer-alternate1 .footer-box .locations_footer { margin-top: 0px!important; margin-bottom: 10px!important; max-width: 400px!important; margin: 0px; } .has-footer-alternate1 .footer-box .footer-headline { padding: 0px 0px 0px; text-align: left; } @media screen and (min-width: 949px) { .has-footer-alternate1 .footer-box .footer-headline h1 { padding: 20px 0px 100px; } } .has-footer-alternate1 .footer-box .nav-inner { display: flex; } .has-footer-alternate1 .footer-box .nav-inner ul { list-style: none; padding: 0; margin: 0; flex: 1; margin-right: 20px; } .has-footer-alternate1 .footer-box .nav-inner li { margin-bottom: 10px; display: block; } /* Styling for the h2 titles */ .has-footer-alternate1 .footer-box .nav-inner h2 { margin-top: 20px; font-size: 20px; } .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(2) { padding-right: 30px; } .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(3) { display: flex; } .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(3) { margin-top: 0px; } @media screen and (min-width: 949px) { .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(3) { margin-top: 0px; } } .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(3) ul { list-style: none; padding: 0; margin: 0; padding-right: 20px!important; } @media screen and (min-width: 949px) { .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(3) ul { list-style: none; padding: 0; margin: 0; padding-right: 60px!important; } } .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(3) li { margin-bottom: 14px; display: block; } .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(3) li a { line-height: 20px!important; } /* Styling for the h2 titles */ .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(3) h2 { margin-top: 20px; font-size: 15px!important; margin-bottom: 10px; } @media screen and (min-width: 949px) { .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(3) li { margin-bottom: 10px; display: block; } .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(3) li a { line-height: 26px!important; } .has-footer-alternate1 .footer .footer-box .col-md-4:nth-child(3) h2 { margin-top: 10px; font-size: 14px!important; font-weight: 600; margin-bottom: 20px; } } @media screen and (min-width: 949px) { /* Apply a font size to all links in the third .col-md-4 container, except the last one */ .has-footer-alternate1 .footer .footer-box li a { font-size: 16px!important; } } .has-footer-alternate1 .footer .nav .primary-link:last-child > a { display: inline-block; font-size: 15px!important; font-weight: 600!important; margin-top: 10px!important; } @media screen and (min-width: 949px) { .has-footer-alternate1 .footer .footer-box .col-md-4:last-child > a { font-size: 14px!important; } } /* Align all text to the left */ .has-footer-alternate1 .footer .footer .wrapper { text-align: left!important; } /* Align the navigation lists to the left */ .has-footer-alternate1 .footer .footer .col-md-4 nav ul { text-align: left!important; } /* Align social media icons to the left */ .has-footer-alternate1 .footer .footer .embed.social-module.sm-bg-colors-OFF { text-align: left!important; } .has-footer-alternate1 .footer * { text-align: left!important; } .has-footer-alternate1 .footer .locations_list br { display: block;!important; } .has-footer-alternate1 .footer .social-module a { text-align: center!important; } .has-footer-alternate1 .footer .social-module a { margin-bottom: 10px; } .has-footer-alternate1 .footer .footer-box span { padding-bottom: 0px!important; } .has-footer-alternate1 .footer .footer-box .location_name { font-size: 18px!important; line-height: 25px; } .has-footer-alternate1 .footer .footerlogoname, .has-footer-alternate1 .footer img#logoimg { text-align: left!important; padding-top: 35px!important; margin: 0px!important; position: relative; } .has-footer-alternate1 .footer #logoimg { width: 1250px!important; } .has-footer-alternate1 .footer h1 { font-size: 2.5em!important; line-height: 1.4em!important; font-weight: 300; background: linear-gradient(234.33deg, #dfdfdf -3.63%, #ffffff 89.96%); } @media (min-width: 768px) { .has-footer-alternate1 .footer h1 { font-size: 3.5em!important; line-height: 1.4em!important; font-weight: 300; } } .has-footer-alternate1 .footer h1 { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; } .has-footer-alternate1 .footer h1 { margin: 20px 0px; } .has-footer-alternate1 .footer .locations_list { /* font-family: 'Montserrat', sans-serif; */ } .has-footer-alternate1 .footer .footer-user-content { width: 100%!important; float: left; max-width: 100%!important; text-align: left!important; padding: 0 15px; padding-top: 50px; } .has-footer-alternate1 .footer .footer-user-content p:first-child { border-top: 1px solid rgb(57 57 57 / 5%); margin-top: 40px; padding-top: 80px; } .has-footer-alternate1 .footer .footer-user-content a, .has-footer-alternate1 .footer .footer-user-content p { font-size: 16px!important; text-align: left!important; line-height: 29px; } .has-footer-alternate1 .footer .footer-user-content p { padding-bottom: 6px!important; } .has-footer-alternate1 .locations_list .social-module { padding-top: 20px; margin-bottom: 20px; } .has-footer-alternate1 .locations_list a { display: inline-block!important; } /*==================================================================================*/ /* SET FOOTER */ /*==================================================================================*/ .footer { padding-top: 60px; padding-bottom: 60px; text-align: center; overflow: visible; border-top: 1px solid; } @media screen and (min-width: 949px) { .footer .footer-box:nth-child(1), .footer .footer-box:nth-child(2), .footer .footer-box:nth-child(3) { padding: 0 15px; position: relative; min-height: 1px; width: 100%!important; text-align: center!important; } } .footer .footer-box { float: none!important; } .footer .nav ul { padding-bottom: 20px; } .footer .nav li { display: block; font-size: 20px; } @media screen and (min-width: 949px) { .footer .nav li { display: inline; font-size: 20px; } } .footer .nav li a { font-size: 17px; padding: 10px; font-weight: 300; } .footer h3 { padding-top: 18px; padding-bottom: 0px; } body.logoshow footer img#logoimg, body.logoshow footer img#logoimg:not(.logo-color), body footer img#logoimg, body footer img#logoimg:not(.logo-color) { margin: 0px; max-width: 180px!important; height: auto; margin: auto; /* clear: both; */ /* display: block; */ } @media screen and (min-width: 949px) { body.logoshow footer img#logoimg, body.logoshow footer img#logoimg:not(.logo-color), body footer img#logoimg, body footer img#logoimg:not(.logo-color) { max-width: 250px!important; height: auto; } } .footer-user-content { padding: 0 15px; position: relative; min-height: 1px; width: 100%!important; text-align: center!important; margin: auto; } @media screen and (min-width: 949px) { .footer-user-content { width: 80%!important; } } /*==================================================================================*/ /* extra footer instance fix -- remove 2nd instance */ /*==================================================================================*/ body > .footer-box { display: none; } /* ============================= */ /* CAROUSEL — HERO RESET SYSTEM */ /* ============================= */ /* ========================================================= 01. CMS HARD RESET (CRITICAL) ========================================================= */ /* set wrapper */ .carousel-wrapper { position: relative; z-index: 0; background-attachment: scroll !important; } /* Kill builder background panels */ .carousel-wrapper .item-content, .carousel-wrapper .item-content-inner, .carousel-wrapper.carousel-full-background-with-content .item-content { background: transparent !important; background-color: transparent !important; } /* Kill width restrictions */ .carousel, .carousel-inner, .carousel .item, .carousel .item-inner, .carousel .item-content { width: 100% !important; max-width: none !important; } /* Remove builder positioning weirdness */ .carousel .item-content, .carousel .item-content-inner { position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100%; } /* Remove inherited padding junk */ .carousel-wrapper .item-content .item-content-inner { padding: 0; margin: 0 auto; } /* Remove text alignment conflicts */ .carousel-wrapper .item-content { text-align: inherit !important; } /* ========================================================= 02. HEIGHT / CLS GUARD ========================================================= */ .carousel, .carousel-inner, .carousel .item { position: relative; min-height: 650px; } @media (min-width: 949px) { .carousel, .carousel-inner, .carousel .item { min-height: 950px; } } /* Slick normalization */ .slick-slider, .slick-list, .slick-track { height: 100%; } /* ========================================================= 03. BACKGROUND IMAGE BEHAVIOR ========================================================= */ .carousel .item { background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } /* ========================================================= 04. TRUE HERO CENTERING (FIXES TOP-STICK ISSUE) ========================================================= */ .carousel .item-inner { height: 100%; display: flex; } .carousel .item-content { display: flex !important; align-items: center !important; justify-content: center !important; width: 100%; text-align: center; z-index: 2; } /* Inner content container */ .carousel .item-content-inner { max-width: 1480px; margin: auto; } .carousel-wrapper .item-content .item-content-inner { padding-inline: var(--sb-hero-pad); padding: var(--sb-space-default); padding: var(--sb-gutter); } /* ========================================================= 05. TYPOGRAPHY ========================================================= */ .carousel .item-content h2 { font-size: 50px; line-height: 60px; font-weight: 300; margin-bottom: 10px; } @media (min-width: 949px) { .carousel .item-content h2 { font-size: 80px; line-height: 90px; } } .carousel .item-content h3 { font-size: 14px; line-height: 20px; font-weight: 400; margin-bottom: 20px; } @media (min-width: 949px) { .carousel .item-content h3 { font-size: 19px; } } .carousel .item-content p { font-size: 17px; line-height: 22px; margin-top: 20px; } @media (min-width: 949px) { .carousel .item-content p { font-size: 22px; } } /* ========================================================= 06. BUTTONS / LINKS ========================================================= */ .carousel .item-content a { display: inline-block; margin-top: 25px; } /* ========================================================= 07. OVERLAY (RESTORED TRUE LEGACY BEHAVIOR) ========================================================= */ /* Base layer */ .carousel .carousel-inner .item:before, body:not(#page-home) .carousel-wrapper:before, .carousel .carousel-inner:before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0); z-index: 1; } /* ← THIS is your original system logic */ .carousel .carousel-inner .item::before { opacity: 0.6; } .carousel .carousel-inner .item:before, body:not(#page-home) .carousel-wrapper:before { content: ""; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: 2; } /* ========================================================= 08. LOAD ANIMATION (UNCHANGED) ========================================================= */ .carousel .item-content-inner > * { opacity: 0; transform: translateY(14px); animation: carouselFadeUp 0.8s ease forwards; } .carousel .item-content-inner > *:nth-child(1) { animation-delay: 0.15s; } .carousel .item-content-inner > *:nth-child(2) { animation-delay: 0.3s; } .carousel .item-content-inner > *:nth-child(3) { animation-delay: 0.45s; } .carousel .item-content-inner > *:nth-child(4) { animation-delay: 0.6s; } @keyframes carouselFadeUp { to { opacity: 1; transform: translateY(0); } } /* ========================================================= 09. SAFE BACKGROUND ZOOM (LEGACY FRIENDLY) ========================================================= */ /* IMPORTANT: Animate IMAGE, not container */ .carousel .carousel-lcp-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); animation: heroZoom 18s ease-in-out infinite; } @keyframes heroZoom { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } /* ========================================================= 10. OPTIONAL — ARROWS (UNCHANGED / HIDDEN) ========================================================= */ .carousel .slick-prev, .carousel .slick-next { display: none; } /* ========================================================= 11. MICRO TEXT / KEYWORDS ========================================================= */ .carousel .hero-meta { font-size: 85%; font-style: italic; margin-top: 35px; color: inherit; } /* ========================================================= HERO HEIGHT CHAIN (UNCHANGED) ========================================================= */ .carousel, .carousel-inner, .carousel .item, .carousel .item-inner { height: 100%; min-height: inherit; } .carousel, .carousel-inner, .carousel .item { min-height: 650px; } @media (min-width: 949px) { .carousel, .carousel-inner, .carousel .item { min-height: 950px; } } /* ========================================================= TRUE CENTERING (UNCHANGED) ========================================================= */ .carousel .item-content { display: flex !important; align-items: center !important; justify-content: center !important; width: 100%; text-align: center; } /* --------------------------------------------------------- CAROUSEL - HAS CLASSES --------------------------------------------------------- */ @media screen and (min-width:949px) { #page-home.has-carousel-bottom .carousel-wrapper .carousel .item-content { justify-content: flex-end; } #page-home.has-carousel-top .carousel-wrapper .carousel .item-content { justify-content: flex-start; } } /* --------------------------------------------------------- Column spacing rules --------------------------------------------------------- */ @media (min-width:949px) { html.has-banner-thin:not(#page-home) .sb-wrap-inner[class*="col-row-"] .sb-col:nth-of-type(1) .sb-module, html.has-banner-thin:not(#page-home) .sb-wrap-inner.image-row-two .sb-col.sb-image-row .sb-module, html.has-banner-thin:not(#page-home) .image-row-two-wrap .sb-col.sb-image-row .sb-module { padding: 0 !important; padding-bottom: 30px !important; } } html.has-banner-thin:not(#page-home) .sb-wrap-inner[class*="col-row-"] .sb-col:nth-of-type(1) .sb-module .box { padding-bottom: 30px !important; border-bottom: 1px solid #e1e1e1; } /* --------------------------------------------------------- Misc layout tweaks --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) .module-form { padding-top: 0; padding-bottom: 0 !important; } html.has-banner-thin:not(#page-home) .sb-wrap.sb-image-row.image-row-one-wrap { overflow: visible; } /* --------------------------------------------------------- Button scale --------------------------------------------------------- */ @media (min-width:949px) { html.has-banner-thin:not(#page-home).has-btn-lg a.btn-cta:not(.btn-reset) { padding: 9px 15px !important; font-size: 12px !important; text-transform: uppercase !important; } html.has-banner-thin:not(#page-home).has-btn-lg a.btn-cta:not(.btn-reset) i { display: none; } } /* --------------------------------------------------------- Header nav text --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) .header .nav .primary-link > a { font-size: 13px; } /* ========================================================= Interior banner — landing page thin style ROOT-DRIVEN (html.has-banner-thin) ========================================================= */ /* --------------------------------------------------------- Base height --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper { height: 60px; } /* --------------------------------------------------------- Desktop adjustments --------------------------------------------------------- */ @media (min-width:1280px) { html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper { height: 165px; background-image: none !important; } html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper .item-content-inner { display: flex !important; margin: 0; height: auto; align-self: flex-start; top: 40px !important; } html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper img#logoimg:not(.footer img) { max-height: 60px !important; } html.has-banner-thin:not(#page-home) .header img#logoimg:not(.footer img) { max-height: 60px !important; } html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper:before, html.has-banner-thin:not(#page-home) > body > .container > .carousel-wrapper .carousel-inner .item:before { background: linear-gradient( 0deg, #8d929e 0%, #8d929e 40%, #8d929e 100% ); } } /* --------------------------------------------------------- Body background --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) body { background: linear-gradient( 0deg, #fcfdff 0%, #ffffff 40%, #acb0bb 100% ); } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ html.has-banner-thin:not(#page-home) .sb-module.sb-formbuilder .box, html.has-banner-thin:not(#page-home) .sb-module.sb-contactform .box { background: #fff !important; box-shadow: 0 0 10px rgb(0 0 0 / 25%); border-radius: 12px; padding: 10px 30px; } @media (min-width:949px) { html.has-banner-thin:not(#page-home) .wrap-inner { padding-left: 120px; padding-right: 120px; overflow: visible; } html.has-banner-thin:not(#page-home) .sb-module.sb-formbuilder .box, html.has-banner-thin:not(#page-home) .sb-module.sb-contactform .box { padding: 40px 60px !important; box-shadow: 0 6px 16px rgb(0 0 0 / 5%); border: 1px solid #dfdfdf; } } /* Reserve header height */ header.header-static, header.header.header-static { min-height: 120px; } /* Normalize icons only inside header/nav/footer */ header i.fa, header i.fas, .nav i.fa, .nav i.fas, .mobile-nav i.fa, .mobile-nav i.fas, .footer i.fa, .footer i.fas { width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; } /* SVG inside inherits color/size */ header i svg, .nav i svg, footer i svg, .mobile-nav i svg { width: 1em; height: 1em; fill: currentColor; } /* Footer logo stability */ .footer-fluid img#logoimg { max-width: 200px; height: auto; display: block; } /* ===================================================== HEADER — STICKY / FIXED (PAGE-SCOPED) ===================================================== */ :where(html, body).has-header-overlay.snapped .site-header { box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 0%); } :where(html, body).has-header-overlay.snapped .site-header { background: rgba(0, 0, 0, 0); } /* ========================= BASE (ALL PAGES) ========================= */ .site-header__inner { position: relative; z-index: var(--z-header-inner); } .site-header { position: sticky; top: 0; z-index: var(--z-header); will-change: transform; transition: transform 0.28s ease, background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease; } /* Kill legacy pseudo fills */ .site-header::before, .site-header::after { display: none !important; } /* ========================= HOME ONLY — FIXED OVERLAY (#page-home is key) ========================= */ html.has-header-overlay body#page-home .site-header { position: fixed; left: 0; right: 0; background: rgb(255 255 255 / 0%); } .site-header { background: rgb(255 255 255); } /* ========================= INTERIOR SAFETY (forces sticky everywhere else) ========================= */ body:not(#page-home) .site-header { position: sticky; } /* ========================= HEADER — BASE BEHAVIOR ========================= */ .site-header { position: sticky; top: 0; z-index: var(--z-header); } /* Overlay override */ html.has-header-overlay body#page-home .site-header { position: fixed; top: 0; left: 0; right: 0; align-self: center; } /* Transitions */ .site-header.has-topbar .site-header__main { transition: transform .35s ease, padding .35s ease, background .35s ease; } .site-header.has-topbar .site-header__top { display: block; transition: transform .35s ease, opacity .25s ease; } .site-header .site-header__top { display: none; } /* Top bar slide away */ html.snapped .site-header__top { display: none!important; } /* Main bar shift */ html.snapped .site-header.has-topbar { transform: translateY(0%); padding-top: 0px; padding-bottom: 0px; background: rgba(0,0,0,.18); /* debug */ } /* Performance hint */ .site-header.has-topbar .site-header__main, .site-header.has-topbar .site-header__top { will-change: transform; } /* ============================= */ /* TOP BAR */ /* ============================= */ .site-header.has-topbar .site-header__top { display: flex; align-items: center; /* hard vertical lock */ min-height: 40px; width: 95%; margin: 0 auto; gap: 24px; padding: 20px 20px; border-bottom: 1px solid rgba(0,0,0,0.05); } @media screen and (max-width:948px) { .site-header.has-topbar .site-header__topr { display: inline-block; } } /* ===================================================== SITE HEADER CTA + ADDRESS (HTML-AWARE FIX) ===================================================== */ /* ============================= */ /* CTA WRAPPER */ /* ============================= */ .site-header__cta { display: flex; align-items: center; /* vertical centering */ gap: 28px; /* SPACE between address + button */ } /* ============================= */ /* ADDRESS TOOL-LINK */ /* ============================= */ /* OVERRIDE inline styles safely */ .site-header__cta .tool-links { display: flex !important; /* override inline-flex */ align-items: center !important; /* max-width: none !important; */ /* CRITICAL — remove 190px choke */ /* white-space: nowrap; */ text-align: center; } /* Address link itself */ .site-header__cta .tool-link--address { font-size: 14px; line-height: 1.3; text-align: right; } /* ============================= */ /* PHONE CTA BUTTON */ /* ============================= */ .site-header__cta .btn { padding: 12px 22px; font-size: 14px; line-height: 1; white-space: nowrap; border-radius: 999px; } /* ============================= */ /* MAIN HEADER BAR */ /* ============================= */ .site-header__main { display: flex; align-items: center; /* hard vertical lock */ justify-content: space-between; min-height: 80px; width: 95%; margin: 0 auto; gap: 24px; position: relative; z-index: var(--z-base); vertical-align: middle; } @media screen and (max-width:948px) { .site-header__main.align-center { justify-content: flex-end!important; } } @media (min-width: 1281px) { /* Keep nav vertically aligned */ .site-header__main nav { display: flex; align-items: center; } } /* ============================= */ /* NAV */ /* ============================= */ /* Hover polish (top-level only) */ .site-nav > .nav-list > .nav-item > a:hover { opacity: 0.85; } .site-nav { display: flex; } .nav-list { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; } .sub-nav { position: absolute; top: 100%; left: 0; background: #f2f2f2; padding: 12px 0; display: none; right: 0px; margin: auto; max-width: 1200px; } .dropdown-wrapper ul.sub-nav { background: #f2f2f2; padding: 12px ; min-width: 250px; line-height: 30px; } .nav-item:hover .sub-nav { display: block; } .nav-arrow { display: inline-block; margin-left: 8px; transform: translateY(-1px); transition: transform 0.25s ease; } .mega-dropdown > a:hover .nav-arrow { transform: rotate(180deg); } /* ========================================= MOBILE NAV — FINAL (CMS-SAFE) ========================================= */ /* NAV PANEL */ nav.mobile-nav { position: fixed; inset: 0; background: #000; padding: 160px 24px; z-index: var(--z-base); transform: translateX(100%); transition: transform 0.35s ease; will-change: transform; } body.nav-open nav.mobile-nav { transform: translateX(0); } /* ============================== TOGGLE VISIBILITY ================================ */ .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; } @media (max-width: 1281px) { .site-nav, .site-header__cta { display: none; } .nav-toggle { display: block; } } /* ============================== HAMBURGER → X ================================ */ .nav-toggle__icon { width: 24px; height: 24px; } .nav-toggle__icon line { stroke-linecap: round; stroke-width: 1.75; transform-box: fill-box; transform-origin: center; transition: transform 0.25s ease, opacity 0.2s ease, stroke-width 0.2s ease; } body.nav-open .nav-toggle__icon line:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-open .nav-toggle__icon line:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle__icon line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } body.nav-open .nav-toggle__icon line { stroke-width: 1.25; } /* ============================== BASE LIST RESET (CMS OVERRIDE) ================================ */ .mobile-nav ul { list-style: none; margin: 0; padding: 0; } .mobile-nav li { margin: 0; padding: 0; } /* kill CMS borders safely */ .mobile-nav a { display: block; color: #fff; padding: 10px 20px; border: 0 !important; box-shadow: none !important; } /* ============================== ACCORDION STRUCTURE ================================ */ .mobile-menu > .mobile-item { border-top: 1px solid rgba(255, 255, 255, 0.2); } .mobile-link-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ============================== TOGGLE BUTTON (+ / −) ================================ */ .mobile-toggle { background: none; border: 0; padding: 6px; cursor: pointer; color: inherit; flex-shrink: 0; } .mobile-toggle svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; fill: none; } .mobile-toggle line { transition: opacity 0.2s ease; } /* ============================== SUBMENUS (TIER 1 + TIER 2) ================================ */ .mobile-submenu, .mobile-submenu-2 { display: none; padding-left: 18px; overflow: hidden; transition: height 0.25s ease; } .mobile-item.is-open > .mobile-submenu { display: block; } .mobile-subitem.is-open > .mobile-submenu-2 { display: block; } /* ============================== PLUS → MINUS LOGIC ================================ */ .mobile-toggle line:first-child { opacity: 1; /* plus */ } .mobile-item.is-open > .mobile-link-row .mobile-toggle line:first-child { opacity: 0; /* minus */ } /* De-emphasize open parents */ .mobile-item.is-open > .mobile-link-row > a { font-size: 0.9em; opacity: 0.8; } /*==================================================================================*/ /* SET Mega Dropdown Menu + default styling */ /*==================================================================================*/ .site-nav .nav-item.mega-dropdown { position: relative; } /* open state */ .site-nav .nav-item.mega-dropdown .dropdown-wrapper.open { display: table !important; } /* dropdown container */ .site-nav .nav-item.mega-dropdown .dropdown-wrapper, .site-nav .nav-item.mega-dropdown .dropdown-wrapper.open { left: 50%; position: fixed; max-width: 100%; width: 100%; transform: translateX(-50%); right: 50%; margin: auto; z-index: var(--z-dropdown); } /* level 2 columns */ .site-nav .nav-item.mega-dropdown .dropdown-wrapper > ul > li.secondary-link, .site-nav .nav-item.mega-dropdown .dropdown-wrapper > ul > .orphan_links { display: inline-block; max-width: 250px; vertical-align: top; padding-right: 30px; padding-bottom: 30px; } /* dropdown inner padding */ .site-nav .nav-item.mega-dropdown .dropdown-wrapper > ul { border-radius: 0; padding: 50px 30px; } /* secondary headers */ .site-nav .nav-item.mega-dropdown .dropdown-wrapper li.secondary-link > a { font-weight: 600; font-size: 14px; margin-bottom: 0; } /* level 3 list reset */ .site-nav .nav-item.mega-dropdown .dropdown-wrapper ul ul { padding: 0; } /* link spacing */ .site-nav .nav-item.mega-dropdown .dropdown-wrapper ul li a { margin-top: 10px; } .site-nav .nav-item.mega-dropdown .dropdown-wrapper ul li:last-child a { margin-top: 0 !important; } /* selected states */ .site-nav .secondary-link.selected > a, .site-nav .sub-secondary-link.selected > a { font-weight: 600 !important; font-style: italic; } .nav-toggle { width: 50px; } /*SLICK SLIDE-------------------------------------------------*/ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0 } .slick-list:focus { outline: 0 } .slick-list.dragging { cursor: pointer; cursor: hand } .slick-slider .slick-list,.slick-slider .slick-track { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto } .slick-track:after,.slick-track:before { display: table; content: '' } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { display: none; float: left; height: 100%; min-height: 1px } [dir=rtl] .slick-slide { float: right } .slick-slide img { display: block } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-arrow.slick-hidden { display: none } /*# sourceMappingURL=slick.min.css.map */ @charset 'UTF-8';.slick-loading .slick-list { background: #fff url(ajax-loader.gif) center center no-repeat } @font-face { font-family: slick; font-weight: 400; font-style: normal; src: url(fonts/slick.eot); src: url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg') } .slick-next,.slick-prev { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); cursor: pointer; color: transparent; border: none; outline: 0; background: 0 0 } .slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover { color: transparent; outline: 0; background: 0 0 } .slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before { opacity: 1 } .slick-next.slick-disabled:before,.slick-prev.slick-disabled:before { opacity: .25 } .slick-next:before,.slick-prev:before { font-family: slick; font-size: 20px; line-height: 1; opacity: .75; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .slick-prev { left: -25px } [dir=rtl] .slick-prev { right: -25px; left: auto } .slick-prev:before { content: '' } .slick-dotted.slick-slider { margin-bottom: 30px } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: 0; background: 0 0 } .slick-dots li button:focus,.slick-dots li button:hover { outline: 0 } .slick-dots li button:focus:before,.slick-dots li button:hover:before { opacity: 1 } .slick-dots li button:before { font-family: slick; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: ''; text-align: center; opacity: .25; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .slick-dots li.slick-active button:before { opacity: .75; color: #000 } /* ========================================================= LIST ENGINE RESET (CMS BULLETPROOF) ========================================================= */ :where( .list-check, .list-compare, .list-inline, .list-links, .list-icons, .list-features, .list-steps ) :is(ul, ol) { padding: 0; margin: 0; } :where( .list-check, .list-compare, .list-inline, .list-links, .list-icons, .list-features, .list-steps ) li { list-style-type: none; } /* ========================================================= LIST CHECK — BASE ========================================================= */ .list-check > ul { display: block; } @media (min-width: 949px) {x .list-check > ul { padding-left: 20px; } } .list-check > ul > li { position: relative; display: block; overflow: visible; left: -10px; padding-left: 5px !important; } /* ========================================================= CHECK ICON ========================================================= */ .list-check > ul > li::before { content: url("data:image/svg+xml,%3Csvg%20width='23'%20height='17'%20viewBox='0%200%2023%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M21.7562%201.15853C11.7776%2011.0038%206.78824%2015.9264%206.78824%2015.9264C6.78824%2015.9264%204.79251%2013.9574%200.801056%2010.0193'%20stroke='currentColor'%20stroke-width='1.18486'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); position: absolute; left: -30px; top: 50%; transform: translateY(-50%); color: currentColor; } @media (min-width: 949px) { .list-check > ul > li::before { top: 18px; margin-right: 10px; } } /* ========================================================= FIRST ITEM VARIANT ========================================================= */ .list-check > ul > li:first-child::before { color: black; } /* ========================================================= TYPOGRAPHY ========================================================= */ .list-check.sb-bold ul li { font-weight: 600; } .list-check > ul > li a { padding: 0; letter-spacing: 0; font-weight: normal; max-width: 100%; } @media (min-width: 949px) { .list-check > ul > li a { text-transform: capitalize; } } /* ========================================================= COLUMN / GRID VARIANTS ========================================================= */ .list-check [class*="list-cols"] > ul a { font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; display: inline; padding: 0; } /* ========================================================= DISABLE LINK ICONS (CMS SAFETY) ========================================================= */ body:not(.page-app) .content-intro.list-check > ul a::before, .list-check [class*="list-cols"] > ul a::before { display: none; } a.btn.white{ color: #ffffff!important; background: rgba(0, 0, 0, 0)!important; border-color: #ffffff!important; } /* ========================================================= LIST CHECK — CIRCLE VARIANT (RELIABLE COLOR) Usage: .list-check.is-circle ========================================================= */ .list-check.is-circle > ul > li { position: relative; display: block; overflow: visible; left: 5px; padding-left: 18px !important; } .list-check.is-circle { --check-bg: #758237; /* circle background */ --check-color: #ffffff; /* checkmark color */ --check-size: 14px; /* check icon size */ --circle-size: 28px; /* circle size */ } /* spacing */ .list-check.is-circle > ul > li{ position: relative; padding-left: 44px; /* room for circle */ } /* circle */ .list-check.is-circle > ul > li::before{ content:""; position:absolute; left: -20px; top: 1.15em; width: var(--circle-size); height: var(--circle-size); border-radius: 999px; background: var(--check-bg); } /* check (MASK = color-safe) */ .list-check.is-circle > ul > li::after{ content:""; position:absolute; left: -19px; top: 0.15em; width: var(--circle-size); height: var(--circle-size); background: var(--check-color); /* center the mask inside the circle */ -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2010'%3E%3Cpath%20d='M13%201L5%209L1%205'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / var(--check-size) var(--check-size) no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2010'%3E%3Cpath%20d='M13%201L5%209L1%205'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / var(--check-size) var(--check-size) no-repeat; } /* ========================================================= LIST COMPARE ========================================================= */ .list-compare { list-style: none; padding: 0; margin: 0 auto; max-width: 1000px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px 10px; align-items: center; background: rgb(255 255 255 / 50%); padding: 40px!important; border-radius: 12px; } /* headers */ .content .list-compare h3 { font-weight: 600; text-transform: uppercase; font-size: 18px!important; opacity: 0.65; padding-bottom: 6px; /* border-bottom: 1px solid rgba(0,0,0,0.1); */ } /* rows */ .list-compare li { padding: 6px 0; border-bottom: 1px solid rgb(29 29 29 / 20%); } /* remove bottom border from last row */ .list-compare li:nth-last-child(-n+3) { border-bottom: none; } /* center icon columns */ .list-compare li:nth-child(3n-1), .list-compare li:nth-child(3n) { text-align: center; font-size: 18px; } .list-compare { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: end; /* 👈 KEY CHANGE */ } /* ========================================================= LOCATIONS LIST — CLEANUP + SOCIAL ICON LAYOUT Scoped for mobile nav + reusable contexts ========================================================= */ /* Hide name + following breaks/links */ .mobile-nav .locations_list .location_name + br, .mobile-nav .locations_list .location_name + a { display: none !important; } /* Base link spacing */ .mobile-nav .locations_list a { display: block !important; padding: 25px 0 5px; line-height: 0 !important; } /* External links (social / maps) */ .mobile-nav .locations_list a[target="_blank"] { padding: 16px 0 0; } /* Location text blocks */ .mobile-nav .locations_list span { display: block !important; margin: 0 !important; padding-bottom: 20px; line-height: 25px !important; } /* ========================================================= SOCIAL MODULE — FLEX, NO MARGIN HACKS ========================================================= */ .mobile-nav .locations_list .social-module { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; text-align: initial; margin-top: 10px !important; margin-bottom: 40px !important; } /* Desktop adjustment */ @media (min-width: 949px) { .mobile-nav .locations_list .social-module { margin-bottom: 10px !important; } .mobile-nav .locations_list .social-module span { display: block !important; padding-top: 0; line-height: 15px !important; } } /* ========================================================= SOCIAL ICON LINKS — CENTERED SQUARES ========================================================= */ .mobile-nav .locations_list .social-module a[target="_blank"] { display: flex !important; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 1; text-decoration: none; position: relative; } /* Icon normalization */ .mobile-nav .locations_list .social-module a[target="_blank"] i { line-height: 0 !important; } .mobile-nav .locations_list span { padding-bottom: 10px!important; line-height: 15px!important; } .mobile-nav span.location_name { color: inherit; font-size: 18px!important; max-width: 80%; padding-bottom: 0px !important; line-height: 25px !important; } .mobile-nav .locations_list { margin-top: 35px!important; padding: 0px 20px; } .mobile-nav .locations_list a { font-size: 13px; line-height: 2px!important; font-weight: 300!important; } .mobile-nav .locations_list .social-module { padding-top: 0px!important; margin-bottom: 10px!important; } .mobile-nav .locations_list div span a { padding: 0px; background: transparent; } /* ========================================================= FORMS — UNIFIED STYLING (sb-formbuilder + sb-contactform) CMS-safe • legacy-safe • no markup assumptions ========================================================= */ /* base */ .sb-formbuilder form, .sb-contactform form { width: 100%; } .sb-formbuilder fieldset, .sb-contactform fieldset { border: 0; padding: 0; margin: 0; } /* field blocks (covers .sb-formfield + plain

) */ .sb-formbuilder p, .sb-contactform p { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; } /* labels */ .sb-formbuilder label, .sb-contactform label { display: inline-block; margin: 0; font-weight: 500; font-size: 1em; } /* inputs & textareas */ .sb-formbuilder input[type="text"], .sb-formbuilder input[type="email"], .sb-formbuilder input[type="tel"], .sb-formbuilder textarea, .sb-formbuilder .form-control, .sb-contactform input[type="text"], .sb-contactform input[type="email"], .sb-contactform input[type="tel"], .sb-contactform textarea { width: 100%; box-sizing: border-box; } /* ========================================================= DATE INPUT — NORMALIZE (BOTH FORMS) ========================================================= */ .sb-formbuilder .input-group.date, .sb-contactform .input-group.date { position: relative; display: flex; align-items: stretch; width: 100%; } .sb-formbuilder .input-group.date > .form-control, .sb-contactform .input-group.date > .form-control { flex: 1 1 auto; width: 100%; min-width: 0; } .sb-formbuilder .input-group.date > .input-group-addon, .sb-contactform .input-group.date > .input-group-addon { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; margin-left: 8px; border-radius: 6px; cursor: pointer; border: 1px solid #66a6ce; background: #e8f6ff; } .sb-formbuilder .input-group-addon .fa-calendar, .sb-contactform .input-group-addon .fa-calendar { line-height: 1; } /* ========================================================= SUBMIT BUTTONS ========================================================= */ .sb-formbuilder .submit, .sb-contactform .submit { margin-top: 12px; } .sb-formbuilder input[type="submit"], .sb-contactform input[type="submit"] { width: auto; } /* ========================================================= MOBILE TWEAKS ========================================================= */ @media (max-width: 768px) { .sb-formbuilder .input-group.date > .input-group-addon, .sb-contactform .input-group.date > .input-group-addon { flex: 0 0 44px; margin-left: 6px; } } /* ========================================================= Testimonials BASE (layout + behavior only) ========================================================= */ .testimonials-var1 { position: relative; } /* Structure */ .testimonials-var1 figure { margin: 0; display: flex; flex-direction: column; } .testimonials-var1 blockquote { margin: 0; } /* Quote text fills available height so name sits bottom */ .testimonials-var1 .multiple-items h3 { flex: 1; } /* ========================================================= MULTI-ITEM FALLBACK (when Slick is NOT active) - 3-up desktop - 1-up mobile ========================================================= */ .testimonials-var1 .multiple-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* Mobile */ @media (max-width: 950px) { .testimonials-var1 .multiple-items { grid-template-columns: 1fr; } } /* ========================================================= Slick layout overrides (Slick auto-overrides grid when initialized) ========================================================= */ .testimonials-var1 .multiple-items.slick-slider { display: block; } /* Slick gutters */ .testimonials-var1 .multiple-items .slick-slide { padding: 0 12px; } .testimonials-var1 .multiple-items .slick-list { margin: 0 -12px; } /* ========================================================= Caption ========================================================= */ .testimonials-var1 figcaption.quotename { font-weight: 800; font-size: 14px; line-height: 1.4; margin-top: 12px; } /* ========================================================= THEME: Card Style (safe to move to site-specific CSS) ========================================================= */ .sb-testimonials-var1-row .multiple-items figure { padding: 30px 45px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } /* Star image */ .sb-testimonials-var1-row figure img { width: 250px; margin-bottom: 10px; margin-left: auto; margin-right: auto; } /* Typography */ .sb-testimonials-var1-row figure h3 { font-size: 18px; font-weight: 300; line-height: 30px; } @media (max-width: 600px) { .sb-testimonials-var1-row figure h3 { font-size: 26px; line-height: 35px; } } .sb-testimonials-var1-row h1 { padding-bottom: 40px; } /* ========================================================= Optional: quote mark (disabled by default) ========================================================= */ .testimonials-var1 .multiple-items blockquote::before { content: "\201C"; font-family: Georgia, Merriweather, Arial; font-size: 114px; line-height: 80px; display: none; /* enable if desired */ } /* ========================================================= Carousel: hero graphic overlay (optional) ========================================================= */ #page-home .carousel-inner .item::after { content: ""; position: absolute; right: 6%; bottom: 6%; width: 600px; height: 600px; background-repeat: no-repeat; background-size: contain; background-position: bottom right; opacity: 0; /* base hidden */ pointer-events: none; z-index: 2; will-change: transform, opacity; } /* keep text above */ .carousel .item-content { position: relative; z-index: 3; } /* ENTRANCE — SOFT DIAGONAL BOUNCE + FADE */ @keyframes starBounceIn { 0% { opacity: 0; transform: translate(18px, 18px) scale(0.96); } 60% { opacity: 1; transform: translate(-4px, -4px) scale(1.01); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } /* IDLE FLOAT — TRANSFORM ONLY (IMPORTANT) */ @keyframes starFloat { 0% { transform: translate(0, 0); } 50% { transform: translate(-6px, -8px); } 100% { transform: translate(0, 0); } } /* TRIGGER — AFTER CAROUSEL READY */ html.carousel-images-ready #page-home .carousel-inner .item.active::after { opacity: 1; /* 🔒 LOCK VISIBLE */ animation: starBounceIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both, starFloat 8s ease-in-out infinite; animation-delay: 0s, 0.9s; } /* MOBILE TUNING */ @media (max-width: 767px) { #page-home .carousel-inner .item::after { width: 180px; height: 180px; right: 4%; bottom: 4%; opacity: 0.9; } } /*==================================================================================*/ /* oneoff core -- carousel logo */ /*==================================================================================*/ html.has-carousel-logo body#page-home .carousel .logo { margin-bottom: 20px; } html.has-carousel-logo body#page-home header #header-logo { display: none; } html.has-carousel-logo body#page-home .carousel .logo { margin-left: auto; margin-right: auto; } .page-app .logo img { display: none; } .page-app .logo { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; } .page-app .logo::before { content: ""; width: 160px; height: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23666'/%3E%3Ctext x='50' y='55' font-size='12' text-anchor='middle' fill='white' font-family='Arial'%3ELOGO%3C/text%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ========================================================= BUILDER / EDITOR LOGO PLACEHOLDER ========================================================= */ /* Only inside editor iframe */ body[contenteditable="true"] .logo img { display: none; } /* Logo container */ body[contenteditable="true"] .logo { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; } /* SVG placeholder */ body[contenteditable="true"] .logo::before { content: ""; width: 160px; height: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23666'/%3E%3Ctext x='50' y='55' font-size='12' text-anchor='middle' fill='white' font-family='Arial'%3ELOGO%3C/text%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ========================================================= BUILDER / EDITOR LOGO PLACEHOLDER ========================================================= */ /* Only inside editor iframe */ body[contenteditable="true"] .logo img { display: none; } /* Logo container */ body[contenteditable="true"] .logo { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; } /* SVG placeholder */ body[contenteditable="true"] .logo::before { content: ""; width: 160px; height: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23666'/%3E%3Ctext x='50' y='55' font-size='12' text-anchor='middle' fill='white' font-family='Arial'%3ELOGO%3C/text%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ========================================================= SOCIAL ICONS (ANYWHERE) ========================================================= */ .socials { display: inline-flex; justify-content: center; align-items: center; gap: 10px; /* Adjust spacing between icons */ } @media screen and (max-width:948px) { .socials { display: none; } } .socials a { display: flex; justify-content: center; align-items: center; width: 30px; /* Set a uniform width for the icons */ height: 30px; /* Set a uniform height for the icons */ border: 0px solid #ccc; /* Add a border color */ background-color: #f0f0f0; /* Add a background color */ border-radius: 50%; /* Makes the icons circular */ text-decoration: none; transition: all 0.3s ease; /* Smooth hover effect */ } .socials a i { font-weight: normal!important; font-size: 12px!important; /* Adjust icon size */ color: #333; /* Icon color */ } .socials a:hover { background-color: #121212; /* Change background on hover */ border-color: #121212; /* Change border color on hover */ color: white; /* Change icon color on hover */ } .socials a:hover i { color: white!important; /* Change icon color on hover */ } .btn + .socials {padding-left: 20px;} .has-heading-modern .content h3, .has-heading-modern .sb-about h3 { font-family: Times, Georgia, serif; font-weight: 400; font-size: 28px!important; font-style: italic; padding-bottom: 5px!important; }