:root { --main-bg: #fff; --light: #f5f5f5; --light-comp: #4d4d4d; --dark: #222; --dark-comp: #fff; --primary: #97c30a; --primary-comp: #fff; --secondary: #1fbed6; --secondary-comp: #fff; --tertiary: #ff717e; }
/* GENERAL */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: 'Red Hat Display', Arial, Helvetica, sans-serif; font-size: 20px; line-height: 1.5; letter-spacing: .5px; text-align: center; min-width: 320px;}
body, footer a, .featured a, .contact .grid a { color: var(--light-comp); }
body, header ul, .hero h1, .hero p, .intro h2 { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; }
h1, h2, h3, h4, h5, h6, nav, form input[type=submit], .btn { text-transform: uppercase; }
h1, h2, h3 { line-height: 1.3; }
img, iframe,svg { max-width: 100%; height: auto;display:block;margin:0 auto }
iframe {  aspect-ratio: auto 16 / 9; width: 100%; margin: 1em auto; }
a img, iframe { border: none; }
a { transition: ease-in-out .3s; }
a, header a:hover, form input[type=submit]:hover, .btn:hover, footer a:hover, .featured a:hover, .contact a:hover { text-decoration: none; }
a { color: var(--secondary); }
header a:hover { color: var(--primary); }
main h2 span, .featured a:hover h3, footer h2 span, .tel:hover, .contact a:hover { color: var(--tertiary); }
a:hover { text-decoration: underline; }
hr { border-width: 2px; border-color: #eee; border-style: none none solid; margin: 40px 0; }
.imgLeft, .imgRight { max-width: 45%; }
.imgLeft { float: left; margin: 10px 4% 2% 0; }
.imgCenter { display: block; margin: 0 auto; }
.imgRight { float: right; margin: 10px 0 2% 4%; }
.clear { clear: both; }
.nowrap, a[href^=tel] { white-space: nowrap; }
sup { line-height: 0; }
.hide { display: none !important; }
.center, .hero h1, .hero p, .intro h2, .intro p, .featured h2, .featured h3, .featured p, .work h2, .call p, footer h3, footer li { text-align: center; }
.wrap { display: block; max-width: 1100px; margin: 0 auto; position: relative; }
.bg-dark, .bg-primary { color: var(--dark-comp); }
.bg-dark { background-color: var(--dark); }
.bg-primary, .hero .btn { background-color: var(--primary); }
.bg-secondary, .hero .btn:hover { background-color: var(--secondary); }
.bg-light { background-color: var(--light); }
.mid { align-items: center; align-self: center; }
.grid { display: grid; grid-gap: 10px 20px; }
.grid.half { grid-template-columns: repeat(2,1fr); }
.grid.third { grid-template-columns: repeat(3,1fr); }
.grid.fourth { grid-template-columns: repeat(4,1fr); }
.bgimg { position: relative }
.bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0;object-position:50% 35% }
.bgimg>.wrap{z-index:2}
/* HEADER & NAVIGATION */
header, .hero { position: relative; }
header { z-index: 999; }
header .wrap { padding: 10px; }
header .grid { grid-template-columns: 200px 1fr; }
header img{max-width:200px;filter:invert(1)}
nav ul { text-align: right; }
nav li, footer .grid.fourth > div:last-of-type li, .contact .grid > div:last-of-type li { display: inline-block; }
nav a{display:block;margin:5px;padding:5px}
header a, .logo:hover, .hero h1, .hero p, .work h2 span { color: var(--dark-comp); }
.tel { font-size: 30px; }
form input[type=submit], .btn, nav a { text-shadow: 1px 1px 1px #333,-1px -1px 1px #888 }
/* HERO */
.hero { background-size: cover; background-position: center; position: relative; }
.hero:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); inset: 0;z-index:1 }
.hero { width: 100%; min-height:450px;max-height:650px;height: 20vw;}
.hero > .wrap { top: 35%; transform: translateY(-35%); }
.hero h1, .hero p { max-width: 900px; margin: 0 auto; padding: 0 10px; text-shadow: 0 0 5px rgba(0,0,0,.6); }
.hero h1 { font-size: min(10vw, 50px); }
.hero h1 span, main h2 span, footer h2 span { display: block; padding-bottom: 5px; }
.hero .btn { margin-top: 40px; }
/* HOME */
.intro .wrap { padding: 60px 10px 50px; }
.intro p { margin: 20px auto; }
.intro img { margin-top: 40px; }
.featured { padding: 40px 0 60px; }
.featured .grid { padding: 20px 0; }
.featured h3 { margin-bottom: 10px; }
.featured p { margin-top: 0; }
.work .wrap { padding: 50px 10px 150px; }
.call{padding:0 10px}
.call .wrap { max-width: 1000px; background-color: var(--main-bg); padding: 40px clamp(20px, 4vw, 40px); margin: -140px auto 80px; border-radius: 10px; border: 2px solid #eee; }
/* FORMS */
form { margin: 40px 0 20px; }
form .grid { grid-gap: 0 10px; }
form label{text-align:left}
form :is(input,textarea,label), .btn { display:block;font-size: 18px; font-family: 'Red Hat Display', sans-serif; }
form :is(input,textarea,label) { display: block;margin-bottom:10px }
form :is(input,textarea){box-sizing:border-box;width:100%;padding:10px}
form textarea{height:150px}
form input[type=submit], .btn { display: inline-block !important;width:auto;font-weight: bold; text-align: center; line-height: 1.6; background-color: var(--secondary); color: var(--primary-comp); padding: 10px 40px; margin: 10px 0; border: none; border-radius: 50px; transition: ease-in-out .3s; }
.btn { min-width: 110px; }
form input[type=submit] { min-width: 250px; margin: 0; }
form input[type=submit]:hover, .btn:hover { cursor: pointer; background-color: var(--primary); color: var(--primary-comp); }
/* FOOTER */
footer .cta { padding: 40px 10px 50px; }
.subfoot { font-size: 18px; }
.subfoot .wrap { padding: 20px 10px; }
.subfoot .grid{grid-template-columns: 1fr 150px}
.ccpaNotice { text-align: center !important; }
/* MAIN & EVERYTHING ELSE */
main h1, main h2, footer h2 { font-size: 32px; }
main h3 { font-size: 30px; }
main h4, footer h2 span, .hero p, .hero h1 span, main h2 span, footer h2 span, .home h2 span, .intro p, .featured h3, .call { font-size: 24px; }
main h5, main h2 span, nav li { font-size: 20px; }
main ul, main ol { padding-left: 25px; }
main li, footer li { margin: 5px 0; }
.nolist, footer ul, .services ul, .contact ul { list-style: none;}
.pad { padding: 30px 10px 50px; }
.about .grid.half img, .services .grid.half img { object-fit: cover; width: auto; height: 90%; }
.services .grid.half img { min-height: 400px; }
.svglist{position:relative;padding-left:45px}
.svglist svg { position:absolute;left:0;}
.services .svglist li{margin:10px 0}
.contact .grid { grid-template-columns: 320px 1fr; }
.contact .svglist{padding-left:50px}
.contact .svglist li{margin:50px 0;position:relative}
.contact .svglist li:first-of-type{margin-top:0}
.contact .svglist svg { top: -3px; left: -50px }
.map { width: 100%;height:100%; min-height: 400px; }

@media(max-width:999px){
}

@media(max-width:767px){
    header .grid, :is(.about, .services) .grid.half,.contact .grid { grid-template-columns: 1fr }
    :is(.about, .services) .grid.half img,.contact iframe{width:100%;height:50vw;min-height:250px;max-height:350px}
    .grid.fourth { grid-template-columns: 1fr 1fr }
    .hero{height:auto !important}
    .hero > .wrap{top:unset;transform:none;padding:60px 0 100px}
    nav ul{text-align:center}
    
}

@media(max-width:500px){
    .grid.half,.grid.fourth,.subfoot .grid{grid-template-columns:1fr}
    .subfoot p{text-align:center}
}