img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} html { --14px: 0.875rem; --15px: 0.9375rem; --16px: 1rem; --17px: 1.0625rem; --18px: 1.125rem; --19px: 1.1875rem; --20px: 1.25rem; --21px: 1.3125rem; } *:focus-visible, input[type='submit']:focus-visible { outline-style: solid; outline-width: 2px; outline-color: #000; outline-offset: 4px; border-radius: 3px; transition: all 0.3s linear 0.01s; } .focusclarity *:focus-visible { outline-color: var(--dark-comp); } .focusclarity input[type='submit']:focus-visible { outline-color: var(--dark-comp); } .jump { text-decoration-line: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; position: absolute; left: 300px; top: 0; padding: 10px; border-width: 2px; border-color: var(--secondary-comp); border-style: none solid solid; transform: translateY(-200%); } .jump:focus { transform: translateY(0); outline-offset: 0; text-decoration: none; } a[target='_blank'] { position: relative; } a[target='_blank'] i { padding: 4px; border: 1px solid black; color: #000; background-color: #fff; text-decoration: none; position: absolute; left: 30px; bottom: -30px; z-index: 999; width: 130px; display: none; font-size: 12px; font-family: sans-serif; text-align: center; letter-spacing: 0; } a[target='_blank']:is(:hover,:focus) i { display: block; } .back { margin: 0; display: none; } .back a { color: var(--primary-comp); padding: 5px 15px; } header a[target='_blank'] i { left: 0; } .logomark a[target='_blank'] i { left: 14px; } .ccpaNotice a i { bottom: unset !important; top: -30px; } * { scroll-behavior: smooth; } html { scroll-padding-top: 150px } body, form input, form textarea, button { font-family: 'Montserrat', sans-serif; font-size: 1rem } body { margin: 0; min-width: 320px; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; color: var(--primary, #F41600); } .wrap { max-width: 1080px; margin: 0 auto; position: relative; } iframe { width: 100%; } img, iframe, video { max-width: 100%; display: block; height: auto; } a img, iframe { border: none; } a, .btn:is(:hover,:focus), form input[type='submit'] { text-decoration: none; } a, form input[type='submit'] { transition: ease-in-out 0.3s; } a:is(:hover,:focus) { text-decoration: underline; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 40px 0; } .imgCenter { margin: 0 auto; } .clear { clear: both; } .hide { display: none !important; } .nowrap, a[href^='tel'] { white-space: nowrap; } .grid { display: grid; grid-gap: 10px; } .grid.half { grid-template-columns: 1fr 1fr; } .grid.third { grid-template-columns: 1fr 1fr 1fr; } .grid.mid { align-items: center; } .grid ul { margin: 0; } ul, ol { padding-left: 25px; margin: 0; } .nolist { list-style: none; padding: 0; } section li, main li { margin: 5px 0; } .center, form { text-align: center; } .banner { background-size: cover; background-position: center; height: 250px; color: #fff; padding: 10px; position: relative; } header a { text-decoration: none; } .bgimg { position: relative; } .bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0; } .banner.bgimg > img:first-of-type { object-position: top; } button { line-height: 1.5; box-sizing: content-box } .btn, button { background-color: var(--secondary, #F41600); color: var(--dark-comp, #fff); display: inline-block; min-width: 160px; padding: 15px 20px; margin: 0 auto; border-radius: 3px; text-align: center; font-weight: bold; text-decoration: none; border: none } :is(.btn,button):is(:hover,:focus) { background-color: var(--tertiary, #FEA968); color: var(--tertiary-comp) } .callout { background-color: var(--primary, #F41600); color: var(--primary-comp, #fff); padding: 20px 25px; margin: 0 0 20px; border-radius: 3px; text-align: center; font-size: clamp(1.3rem, 3.5vw, 2rem); font-weight: 700; letter-spacing: 0.5px; } .callout a { color: var(--primary-comp, #fff); text-decoration: none; } header a { display: block; } header .grid { grid-template-columns: 300px 1fr; padding: 20px 0; grid-gap: 0; } header .logo { text-align: left; padding: 10px; } nav ul { padding: 0; margin: 0; text-align: right; } nav li { display: inline-block; } nav a { margin: 5px; padding: 5px; } .banner h1 { text-shadow: 2px 2px 4px rgb(0, 0, 0); color: #fff; font-size: 2.4rem; margin: 0 0 20px; } .banner p { text-shadow: 2px 2px 4px rgb(0, 0, 0); color: #fff; font-size: 1.2rem; } .banner :is(.btn,button) { text-shadow: none; margin: 20px } .banner:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 1; } .banner > .wrap { top: 50%; transform: translateY(-50%); position: relative; z-index: 2; } section, main { padding: 0; color: var(--font, #4d4d4d); } .segment { padding: 40px 10px; } .services { padding-bottom: 40px; } .services h3 > b { font-size: 23px; } .gallery img { border-radius: 5px; object-fit: cover; width: 100%; height: 300px; } .gallery { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; margin-bottom: 50px } .lb-data .lb-caption { color: #F41600; } footer { clear: both } footer .grid { align-items: center; } footer .segment { padding: 20px 10px; } .subfoot { background-color: #4d4d4d; } .subfoot .grid { grid-gap: 10px 20px; grid-template-columns: 1fr 150px } .logomark { display: inline-block; margin: 0 auto; } form fieldset { border: none; padding: 0; margin: 0; } form legend { text-align: left; padding: 0; } form :is(input, select, textarea) { display: block; padding: 15px 10px; width: 100%; box-sizing: border-box; margin: 0 0 12px; line-height: 1.5; border: none; font-size: var(--16px); } form textarea { height: 150px; } form input[type='submit'] { display: inline-block; min-width: 160px; padding: 15px 20px; margin: 0 auto; border-radius: 3px; max-width: 250px; font-weight: bold; } :is(input[type='submit'],button):hover { cursor: pointer; } form label { display: block; text-align: left; } :root { --main-bg: #fff; --light: #ececec; --light-comp: #4d4d4d; --dark: #323232; --dark-comp: #fff; --primary: #EB1400; --primary-muted: #9E3333; --primary-comp: #fff; --secondary: #F41600; --secondary-comp: #000; --tertiary: #FEA968; --tertiary-comp: #000; } .jump, .jump.jump:focus { background-color: var(--primary, #F41600); color: var(--primary-comp, #fff); } section, .main { background-color: var(--main-bg, #fff); } .bg-light { background-color: var(--light, #ececec); color: var(--light-comp, #4d4d4d); } body, .bg-dark { background-color: var(--dark, #323232); color: var(--dark-comp, #fff); } .bg-dark h2 { color: #fff; } .bg-primary { background-color: var(--primary, #F41600); color: var(--primary-comp, #fff); } .bg-primary-muted { background-color: var(--primary-muted); color: var(--primary-comp, #fff); } a, .services a:is(:hover,:focus) { color: var(--light-comp, #4d4d4d); text-decoration: none; } .callout a:is(:hover,:focus) { text-decoration: underline; color: var(--primary-comp, #fff); } .bg-secondary, input[type='submit'] { background-color: var(--secondary, #F41600); color: var(--dark-comp, #fff); } .bg-tertiary, :is(.btn,button,form input[type='submit']):is(:hover,:focus) { background-color: var(--tertiary, #FEA968); color: var(--tertiary-comp) } .banner.main { height: 600px; } .banner, .row2, .row3, .services .grid, footer { text-align: center; } nav a { color: var(--primary, #F41600); } nav a:hover { color: var(--light-comp, #4d4d4d); } .row3 { padding-bottom: 60px; } .row3 li { text-align: left; } .services h3 { margin-top: 10px; } .services .grid { grid-gap: 10px 20px; margin: 40px 0 20px; } .services .grid img { object-fit: cover; width: 100%; height: 300px; } .yt-video { position: relative; width: 100%; height: 0; padding-bottom: 56.25% } .yt-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .contact .grid { margin: 30px 0; } .contact .grid > div { padding: 20px 40px 40px; } form { margin: 40px 0; } .subfoot { text-align: left; } .logomark img { filter: invert(1) } .banner.main img:first-of-type { object-position: 0% 55%; } main:has(.callout) .banner img:first-of-type { object-position: 0% 25%; } main:has(ul.grid.half) .banner img:first-of-type { object-position: 0% 35%; } main:has(.yt-video) .banner img:first-of-type { object-position: 0% 50%; } main:has(.contact) .banner img:first-of-type { object-position: 0% 53%; } main:has(form) h1 { text-align: center; } main:has(ul.grid.half) .bg-light, main:has(.yt-video) .bg-light { height: 450px; } main:has(ul.grid.half) .bg-light iframe, main:has(.yt-video) .bg-light iframe { height: 267px; } main:has(ul.grid.half) .bg-light h3, main:has(.yt-video) .bg-light h3 { margin-bottom: 0; } main:has(ul.grid.half) .bg-light ul, main:has(.yt-video) .bg-light ul { margin-top: 0; } main:has(ul.grid.half) .bg-light li, main:has(.yt-video) .bg-light li { font-weight: bold; } main:has(ul.grid.half) .services .grid:first-of-type { padding-left: 0; } main:has(ul.grid.half) .services .grid:first-of-type li { text-align: left; list-style: none; font-weight: bold; } main:has(.yt-video) .grid div iframe { height: 300px; } .sold { position: relative; display: block; } .sold::after { content: "SOLD"; position: absolute; top: 10px; left: 10px; transform: none; font-size: 28px; font-weight: bold; color: white; background-color: rgba(255, 0, 0, 0.8); padding: 12px 22px; border-radius: 4px; z-index: 10; } @media (max-width: 999px) { .back { display: block; } } @media (max-width: 700px) { header .grid { grid-template-columns: 1fr; } nav ul { text-align: center; } .logo img { margin: 0 auto; } } @media (max-width: 600px) { .grid.half, .grid.third { grid-template-columns: 1fr; } .subfoot p { text-align: center; } } @media (max-width: 500px) { .jump { left: unset; right: 0; } @media (max-width: 400px) { form input[type='submit'] { max-width: unset; display: block; width: 100%; } } }