img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root { --main-bg: #fff; --light: #eee; --light-comp: #4d4d4d; --dark: #333; --dark-comp: #fff; --primary: #009bdf; --primary-comp: #fff; --secondary: #ba141a; --secondary-comp: #fff; } html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }body { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: clamp(14px, 2vw, 20px); line-height: 1.5; text-align: center; min-width: 320px; }body, footer a, .what a, .about h3 span, .contact a { color: var(--light-comp); }body, header ul, .hero h1, .hero p, .row1 h2 { padding: 0; margin: 0; }h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; }nav, form input[type=submit], .btn { text-transform: uppercase; }h1, h2 { line-height: 1.2; } img, iframe { max-width: 100%; height: auto; }main img { border-radius: 2px; }iframe { display: block; aspect-ratio: auto 16 / 9; width: 100%; margin: 1em auto; }.fullwidth { width: 100%; }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, .contact a:hover, .what a:hover { text-decoration: none; }a, footer a:hover, main h1 span, main h2 span, footer h2 span, .contact a:hover { color: var(--primary); }a:hover { text-decoration: underline; }hr { border-width: 1px; 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; }.bgimg { position: relative }.bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0 }.bgimg > .wrap { z-index: 2 }sup { line-height: 0; }.hide { display: none !important; }.center, .hero h1, .hero p, .exp h2, .exp blockquote, .about .bg-light h2 { text-align: center; }.wrap { display: block; max-width: 1100px; margin: 0 auto; position: relative; }.bg-dark, .bg-primary, .bg-dark a, .bg-primary a { color: var(--dark-comp); }.bg-dark .btn, .bg-primary .btn, .bg-dark input[type=submit], .bg-primary input[type=submit], .hero .btn,.contact .btn:hover { color: var(--dark-comp); border: 2px solid #fff; }.bg-dark { background-color: var(--dark); }.bg-primary { background-color: var(--primary); }.bg-light { background-color: var(--light); }.mid { align-items: center; align-self: center; }.grid { display: grid; grid-gap: 10px 40px; }.grid.half { grid-template-columns: repeat(2,1fr); }.grid.third { grid-template-columns: repeat(3,1fr); }.grid.fourth { grid-template-columns: repeat(4,1fr); } header, .hero { position: relative; }header { background-image: linear-gradient(rgba(0,0,0,.6),transparent); z-index: 999; }header .wrap { padding: 20px 10px; }header .grid, .row2 .grid { grid-template-columns: 250px 1fr; }header .grid > div:last-of-type, footer .subfoot .grid > div:last-of-type { text-align: right; }header svg, main svg { vertical-align: middle }nav, footer, .small, .about h3 span { font-size: clamp(14px, 2.5vw, 16px); }nav li, .social li { display: inline-block; }nav li, .hero p { font-weight: 500 }nav li { margin-left: clamp(5px, 2vw, 20px); }nav a { padding: 0 8px; }nav li:last-of-type { margin-left: clamp(5px, 2vw, 5px); }header a, .logo:hover, .hero h1, .hero p, .row4 span, .bg-primary h2 span { color: var(--dark-comp); }header a:hover { color: var(--dark-comp); text-decoration: underline; } .hero { background-size: cover; background-position: center; position: relative; z-index: 2; }.hero { width: 100%; height: 350px; background-position-y: 25% }.hero:before { content: ""; position: absolute; z-index: 1; }.hero:before { width: 100%; height: 100%; background-color: rgba(0,0,0,.1); top: 0; left: 0; }.hero > .wrap { top: 30%; transform: translateY(-30%); margin: 0 auto; }.hero h1, .hero p { max-width: 1000px; padding: 0 10px; margin: 0 auto }.hero h1 { font-size: clamp(28px, 6vw, 54px); padding-top: 40px; }.hero h1 span, main h1 span, main h2 span, footer h2 span { display: block; padding-bottom: 5px; text-transform: uppercase; }.hero p { font-size: clamp(16px, 4vw, 20px) }.hero .btn { font-size: clamp(16px, 4vw, 18px); text-transform: unset; line-height: 1.8; background-color: transparent; margin: 0; text-shadow: none; }.hero .btn:hover { color: var(--dark-comp); } .home > div .wrap { padding: 50px 10px }.home img { object-fit: cover; width: 100% }.home .grid img { height: 400px }.what img { object-position: 30% 50% }.where img { object-position: right 30% }.exp blockquote { max-width: 800px; font-size: clamp(16px, 4vw, 24px); font-style: italic; background-color: var(--light); padding: 40px; margin: 40px auto; border-radius: 10px; position: relative; text-wrap: balance }.exp blockquote:after { content: ""; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid var(--light); position: absolute; left: 50%; bottom: -30px }.exp cite { display: block; font-style: normal; margin: 20px 0 30px }.cta img { height: 350px }.cta .wrap { padding: 40px 10px 50px !important } form { margin: 20px 0 }form .grid { grid-gap: 0 10px; }form label { display: block; }form input[type=text], form input[type=email], form input[type=tel], form input[type=file], form input[type=submit], form select, form textarea, form input[type=password], .btn { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 16px; }form input[type=text], form input[type=email], form input[type=tel], form select, form textarea, form input[type=password] { background-color: var(--main-bg); margin-bottom: 10px; padding: 0 10px; border: 1px solid #f5f5f5; border-radius: 2px }form input[type=text], form input[type=email], form input[type=tel], form select, form input[type=password] { height: 50px; }form input[type=text], form input[type=email], form input[type=tel], form textarea, form input[type=password] { width: calc(100% - 20px); }form select { width: 100%; }form input[type=file] { margin-left: 10px; border-radius: 0; }form textarea { height: 150px; padding: 15px 10px; }form input[type=submit], .btn { display: inline-block; min-width: 110px; font-weight: 500; text-align: center; line-height: 2; background-color: transparent; color: var(--light-comp); padding: 10px 40px; margin: 10px 0; border: 2px solid var(--light-comp); border-radius: 2px; transition: ease-in-out .3s; }form input[type=submit] { min-width: 250px; margin: 0; }form input[type=submit]:hover, .btn:hover { cursor: pointer; background-color: var(--secondary); color: var(--dark-comp); border-color: var(--secondary) }.btnStyle2 { background-color: var(--secondary); color: #fff; border-color: var(--secondary); margin-bottom: 30px; }.btnStyle2:hover { background-color: transparent; color: #000; border-color: var(--secondary); } footer .wrap { padding: 40px 10px 20px }footer h2 { display: none }footer a[href^="tel:"] { font-weight: 700 }footer .grid.fourth div:last-of-type p { text-align: right }footer .grid.fourth div:last-of-type strong { display: block; font-size: clamp(16px, 2.5vw, 17px); text-transform: uppercase }footer .grid.fourth img { max-width: 100px; margin: 15px 0 0 30% }footer .social { text-align: left }footer hr { margin: 0 0 20px; border-color: rgba(255,255,255,.3) }.subfoot .wrap { padding: 20px 10px 40px }.ccpaNotice { text-align: center !important; } main, .contact .bg-light { padding: 40px 10px; }main > .wrap { display: contents }main > br { display: none }main h1, .home h2, .about .bg-light h2 { font-size: clamp(22px, 5vw, 32px); }main h2, header .logo, footer h2 span, .row1 p, .row5, .hero h1 span, footer h2 span { font-size: clamp(18px, 4vw, 24px); }main h3, main h1 span, main h2 span { font-size: clamp(18px, 3vw, 20px); }main h4 { font-size: clamp(16px, 2.5vw, 18px); }main ul, main ol { padding-left: 25px; }main li, footer li { margin: 10px 0; }.nolist, footer ul, .contact ul { list-style: none; padding-left: 0; }.about div.wrap, .contact div.wrap { padding: 40px 10px 50px }.about > div h2, .contact h2 { margin-top: 40px }.team { margin-bottom: 40px }.team a { display: inline-block; width: 24%; margin: 0 5px }.team img { display: block; object-fit: cover; width: 100%; height: 200px } @media(max-width: 999px) { header { background-image: none; } header .grid, footer .cta .grid, .row2 .grid { grid-template-columns: 1fr; } header .grid > a { display: block; width: fit-content; margin: 0 auto; } header img { width: 250px !important; display: block; margin: 0 auto 20px; } header .wrap { text-align: center; } nav { width: 100%; margin-top: 10px; } nav ul { justify-content: center; text-align: center; gap: 5px; } nav a { display: inline-block; padding: 5px 20px;; text-align: center; border-bottom: none; } .nav-contact { text-align: center; } .grid.half { grid-template-columns: 1fr 1fr; } .grid.third { grid-template-columns: repeat(3, 1fr); } .grid.fourth { grid-template-columns: repeat(2, 1fr); } .hero > .wrap { top: 20%; width: 100%; } .hero h1, .hero p { text-align: center !important; } .hero .wrap:after { display: none; } .row3 { height: 400px; } .row7 { height: 600px; } .row2 .grid { grid-template-columns: 250px 1fr; } .solutions .emphasis { height: 450pxx; } .solutions .emphasis .grid { grid-template-columns: 400px 1fr; } .solutions .emphasis img { height: 350px; } .contact .grid.mid { grid-template-columns: 300px 1fr; } form input[type=submit], .btn { width: auto; display: inline-block; min-width: 250px; box-sizing: border-box; } :is(button, form input[type=submit], .btn) { padding: 10px 40px; } .hero:has(.btn) { height: 550px; } .hero:has(.btn) > .wrap { top: 70px; } .hero:has(.btn) h1, .hero:has(.btn) p { text-align: center !important; }} @media(max-width: 767px) { .hero h1, .hero p { text-align: center; } .hero > .wrap { top: 10%; width: 100%; } nav { display: grid; } nav ul { display: grid; grid-template-columns: 1fr 1fr; } .nav-contact { padding-top: 0; } .nav-contact a { padding-top: 0; } nav :is(a, li) { text-align: center; font-size: 18px; padding-bottom: 5px; } .row2 .grid { grid-template-columns: 1fr; } .row3 { height: 500px; } .grid.third { grid-template-columns: repeat(2, 1fr); } .contact .grid.mid { grid-template-columns: 1fr; place-items: center; text-align: center; } .contact .grid.mid ul { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 0; } .contact .grid.mid ul.social { flex-direction: row; justify-content: center; } .contact li:first-of-type { position: static; } .solutions .emphasis { height: auto; } .solutions .emphasis .grid { grid-template-columns: 1fr; } .solutions .emphasis img { width: 100%; height: auto; } .solutions .emphasis .wrap { position: relative; top: auto; transform: none; } .hero:has(.btn) { height: 600px; } .hero:has(.btn) > .wrap { top: 60px; } .hero:has(.btn) h1, .hero:has(.btn) p { text-align: center; } .contact img { height: 350px; width: auto; overflow: hidden; } .imgLeft, .imgRight, .imgCenter { float: none; max-width: 100%; margin: 20px auto; display: block; }} @media(max-width: 600px) { header img { width: clamp(110px, 35vw, 220px); } header .wrap { padding: clamp(10px, 2.5vw, 15px) clamp(10px, 2.5vw, 15px); } .grid.half, .grid.third, .grid.fourth, footer .grid.fourth, .subfoot .grid { grid-template-columns: 1fr; } footer :is(li, h3, p, strong, a), footer .subfoot .grid > div:last-of-type, footer .social, footer .grid.fourth div:last-of-type p { text-align: center; } footer .grid.fourth img { margin: 15px auto 0; display: block; } .home .grid img, .contact img { height: auto; max-height: 300px; width: 100%; } .team a { display: block; width: 100%; margin: 0 0 10px; } .row1 .wrap { padding: 20px 10px; } .row3 { height: 600px; } .row6 img { margin: 20px 20px 10px; } .row7 { height: 400px; } .solutions .emphasis .grid { grid-template-columns: 1fr; } .solutions .emphasis img { width: 100%; height: auto; } .hero:has(.btn) h1, .hero:has(.btn) p { text-align: center; }} @media(max-width: 480px) { header img { width: clamp(100px, 30vw, 150px); } header .wrap { padding: clamp(8px, 2vw, 12px) clamp(8px, 2vw, 12px); } nav ul { gap: 4px; } nav a { padding: 4px 8px; } a[href^="mailto:"] { overflow-wrap: break-word; } .row7 { height: 350px; } .hero:has(.btn) { height: 600px; } .hero:has(.btn) h1, .hero:has(.btn) p { text-align: center; }} @media(prefers-reduced-motion:reduce) { * { scroll-behavior: unset !important; transition: all 0s !important; animation: none !important; }} @media(forced-colors:active) { button, input, textarea, a { border: 1px solid #000 !important; } .grayscale, .grayscale-filter { filter: none !important; }}