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: #4d4d4d; --dark-comp: #fff; --primary: #d55929; --primary-comp: #fff; --secondary: #0058a5; --secondary-comp: #fff; } body { font-family: 'Archivo', Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.6; text-align: center; min-width: 320px; }body, header a, .subfoot a { color: var(--light-comp); }body, header ul, footer ul, .hero h1, .hero p { padding: 0; margin: 0; }h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; }img, iframe { max-width: 100%; height: auto; display: block; margin: 0 auto; object-fit: cover }iframe { display: block; aspect-ratio: auto 16 / 9; width: 100%; margin: 1em auto; }.fullwidth { width: 100%; }a img, iframe { border: none; }a, form input[type=submit], .btn, .top { transition: ease-in-out .3s; }a, header a:hover, form input[type=submit]:hover, .btn:hover, footer a:hover, .contact a:hover { text-decoration: none; }a, nav ul:first-of-type a:hover { color: var(--primary); }header a:hover, footer a:hover { color: #6699d5; }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; }sup { line-height: 0; }.hide { display: none !important; }.center, .hero h1, .hero p, .about .bg-primary h2, .about .bg-primary p, .start h2, .start p { text-align: center; }.wrap { display: block; max-width: 1180px; margin: 0 auto; position: relative; }.bg-dark, .bg-dark a, .bg-dark h2, .bg-primary, .bg-primary a, .bg-primary h2, header a, footer a, .hero h1, .hero p, .home .osha h2 { color: var(--dark-comp); }.bg-dark { background-color: var(--dark); }.bg-primary { background-color: var(--primary); padding: 30px; }.bg-light { background-color: var(--light); color: var(--dark); padding: 10px; }.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); }.grid.fifth { grid-template-columns: repeat(5,1fr); }.red { color: #d55929; font-weight: bold; font-style: italic; }.grid.fullimg > img { height: 100%; object-fit: cover; width: auto } header, .hero { position: relative; }header .wrap, .hero .wrap { padding: 10px; }header li, nav li, .social li, .subfoot li { display: inline-block; }header .grid.half { grid-template-columns: 265px 1fr; }header .grid ul { text-align: right; }header .btn { padding: 3px 35px; margin: 0 0 0 15px; }nav ul { padding: 15px 0; }nav ul:first-of-type, .top, footer { font-size: 16px; }nav ul:first-of-type li:first-of-type, .welcome h2 span { text-transform: uppercase; }nav ul:first-of-type { border-bottom: 1px solid rgba(255,255,255,.1); }nav li { margin-left: 20px; }.top a { display: block; background-color: #6699d5; padding: 10px;}.top a:hover { background-color: var(--secondary); color: var(--dark-comp); }.social, .subfoot ul { text-align: left; }.social li { margin-right: 5px; } nav ul ul { display: none; min-width: 230px; background-color: #4d4d4d; margin-left: -10px; border-radius: 5px; box-shadow: 0 5px 5px rgba(0,0,0,.1); position: absolute; z-index: 999; }nav ul ul li, nav ul ul a { display: block; text-transform: capitalize }nav ul ul a { color: #fff; }nav li:hover > ul { display: block; }nav ul ul a { padding: 10px 20px; text-transform: capitalize; }nav ul ul a:hover { color: #4d4d4d; }nav ul ul li:first-of-type a { border-radius: 5px 5px 0 0; }nav ul ul li:last-of-type a { border-radius: 0 0 5px 5px; }nav ul ul ul { top: -3px; left: 220px; } .hero, header, .featured .wrap, .osha { background-size: cover; background-position: center; position: relative; }.hero { width: 100%; height: 300px; }.hero .wrap { top: 50%; transform: translateY(-50%); z-index: 2; }.hero h1, .hero p { text-shadow: 1px 1px 2px rgba(0,0,0,.8); }.hero h1, .hero strong, footer h2, .home h2 { font-size: 30px; }.hero strong { display: block; }.hero .btn { text-shadow: none; margin-top: 40px; }.bgimg { position: relative }.bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0; object-position: 0 55% }.bgimg .wrap { z-index: 1 } .home h2 { color: #6699d5; }.home .btn { width: 250px; padding: 10px 0; }.welcome .wrap, .offer .wrap, .choose .wrap, .osha .wrap, .cta .wrap { padding: 20px 10px; }.welcome { margin-top: 20px; }.welcome .grid, .offer .grid, .projects .grid, .choose .grid { grid-template-columns: 300px 1fr; }.welcome h2 span, .featured h2 span { display: block; }.welcome h2, .offer h2, .projects h2, .choose h2 { border-left: 10px solid #6699d5; padding-left: 10px; }.welcome p { line-height: 1.8; }.show { position: relative; }.show::after { content: ""; height: 80%; position: absolute; width: 100%; left: 0; top: 50%; translate: 0 -50%; background-image: url('/images/office-security.jpg'); z-index: -1; background-repeat: no-repeat; background-size: cover; filter: blur(5px); }.show::before { content: ""; height: 80%; position: absolute; width: 100%; left: 0; top: 50%; translate: 0 -50%; background-color: #000; opacity: .5; }.show__box { padding-bottom: 30rem; position: relative; border-radius: 1rem; overflow: hidden; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .3)); }.show__box::before { content: ""; height: 100%; position: absolute; width: 100%; left: 0; top: 0; background-color: rgb(0, 0, 0, .5); z-index: 9; opacity: 0.4; }.show__video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }.show__play-btn { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 4.7rem; height: 4.7rem; background: transparent; border-radius: 50%; padding: 0; margin: 0; border: 0; box-shadow: none; z-index: 9; cursor: pointer; }.col-xl-10 { flex: 0 0 83.33%; max-width: 83.33%; }.mx-auto { margin: 0 auto; }.bg-orange {background-color: #d55929; margin: 0px; padding: 2px; font-size: 16px;}.home .bg-light { background-image: linear-gradient(#eee 85%,#fff 85%); padding: 100px 10px 0; }.featured .wrap, .featured .grid, .additional .grid, .additional img { border-radius: 10px; }.featured .grid { background-image: linear-gradient(to right,#fff 35%,transparent); padding: 100px 50px; position: relative; }.featured .bgimg > img { border-radius: 12px }.featured h2 { color: var(--light-comp); }.featured h2 span { color: #0058a5; }.additional .grid { min-height: 700px; background-color: var(--main-bg); padding: 0 50px 80px; margin-top: 20px; grid-gap: 10px 0 }.additional .grid div, .additional img { position: relative; }.additional .grid div:last-of-type { padding-left: 100px }.additional img { object-fit: cover; max-height: 300px; width: auto; outline: 1px solid #bbb }.additional img:nth-of-type(1) { width: 100%; }.additional img:nth-of-type(2) { max-width: 400px; top: -70px; right: -30px; z-index: 2; }.additional img:nth-of-type(3) { max-width: 300px; position: absolute; top: 440px; left: 40px; z-index: 1; }.additional ul { padding-left: 0 }.additional li { list-style: none; padding-left: 35px; position: relative }.additional svg { vertical-align: middle; margin-right: 5px; position: absolute; left: 0 }.projects.bg-light { background-image: none; padding: 50px 10px; } .served h2, .industries h2, .industries p { text-align: center; }.served .wrap { top: 50%; transform: translateY(-50%); }.served h2 { color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, .8); font-size: 36px; }.bgimg.served { height: 365px; margin: 0 0 15px; }.industries p { color: #0058A5; margin-top: 0; }.industries svg {stroke-width: 1.2;}.industries .grid div:hover p { color: #D55929; transition-duration: 0.5s; }.industries .grid div:hover svg { stroke: #0058A5; transition-duration: 0.5s; }.iso {max-width: 860px; min-width: 200px;} .gallery-container { max-width: 1080px; margin: 20px auto 0; position: relative; border-radius: 10px; } .slider-container { width: 100%; position: relative; overflow: hidden; margin-bottom: 40px; } .slider-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); height: 400px; align-items: center; } .slide { flex: 0 0 calc(33.333% - 20px); margin: 0 10px; transition: all 0.4s ease; position: relative; height: 310px; transform: scale(1); overflow: hidden; min-width: 0; border-radius: var(--radius-100); }.slide img { width: auto; height: 100%; object-fit: cover; transition: all 0.4s ease; border-radius: 5px; } .thumbnails { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; display: none; } .thumbnail { width: 6.5rem; height: 5rem; cursor: pointer; transition: all 0.3s ease; opacity: 0.8; border-radius: 2px; overflow: hidden; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); }.slide-main { position: relative; }.thumbnail.active { opacity: 1; transform: scale(1.1); }.thumbnail img { width: 100%; height: 100%; object-fit: cover; } .gallery-radio { display: none; } #slide1:checked ~ .slider-container .slider-track { transform: translateX(0%); }#slide2:checked ~ .slider-container .slider-track { transform: translateX(-33.333%); }#slide3:checked ~ .slider-container .slider-track { transform: translateX(-66.666%); } #slide1:checked ~ .slider-container .slide:nth-child(2),#slide2:checked ~ .slider-container .slide:nth-child(3),#slide3:checked ~ .slider-container .slide:nth-child(4) { transform: scaleX(1.8); opacity: 1; z-index: 1; height: 390px; } #slide1:checked ~ .thumbnails .thumbnail:nth-child(1),#slide2:checked ~ .thumbnails .thumbnail:nth-child(2),#slide3:checked ~ .thumbnails .thumbnail:nth-child(3) { opacity: 1; border-color: #3498db; transform: scale(1.1); } .arrow { position: absolute; top: 40%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background-repeat: no-repeat; background-size: contain; z-index: 10; transition: all 0.3s ease; }.arrow:hover { transform: translateY(-50%) scale(1.1); }.arrow.prev { left: -3rem; background-image: url('/images/arrow-left.svg'); }.arrow.next { right: -3rem; background-image: url('/images/arrow-right.svg'); } #slide1:checked ~ .arrow.prev-3,#slide1:checked ~ .arrow.next-2,#slide2:checked ~ .arrow.prev-1,#slide2:checked ~ .arrow.next-3,#slide3:checked ~ .arrow.prev-2,#slide3:checked ~ .arrow.next-1 { display: flex; } .arrow { display: none; } .client { margin: 40px 0; }.client__marquee { width: 100%; overflow: hidden; position: relative; white-space: nowrap; display: flex; justify-content: flex-start; }.client__marquee-track { display: flex; white-space: nowrap; animation: marquee 20s linear infinite; padding: 20px 0; align-items: center; }.client__grid-box { display: inline-block; width: 250px; padding: 0 30px; vertical-align: middle; }.client__logo { max-width: 100%; height: auto; max-height: 60px; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease; display: block; margin: 0 auto; }.client__logo:hover { filter: grayscale(0%); opacity: 1; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); }} .client__marquee:hover .client__marquee-track { animation-play-state: paused; }.client__marquee:hover .client__marquee-content { animation-play-state: paused; } .osha { background-image: url(/images/hero-contact.jpg); background-position: top; position: relative; }.osha:before { content: ""; width: 100%; height: 100%; background-image: linear-gradient(to right,rgba(0,0,0,.9) 30%,transparent); position: absolute; top: 0; left: 0; }.osha h2 { max-width: 500px; }.osha p { margin: 40px 0; padding-left: 40px; border-left: 5px solid #eee; }.techno { display: flex; flex-wrap: wrap; background-color: var(--main-bg); margin: 40px 0; border-radius: 10px; padding: 10px }.techno li { margin: 15px; flex-grow: 1 }.bg-light { padding: 30px; } form { margin: 40px 0; }form .grid { grid-gap: 0 10px; }form label { display: block; }form input[type=text], input[type=number], input[type=date], 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: 'Archivo', Arial, Helvetica, sans-serif; font-size: 16px; }form input[type=text], input[type=number], input[type=date], form input[type=email], form input[type=tel], form select, form textarea, form input[type=password] { background-color: var(--main-bg, #fff); margin-bottom: 10px; padding: 0 10px; border: 2px solid #eee; border-radius: 5px; }form input[type=text], input[type=number], input[type=date], form input[type=email], form input[type=tel], form select, form input[type=password] { height: 45px; }form input[type=text], input[type=number], input[type=date], form input[type=email], form input[type=tel], form textarea, form input[type=password] { width: 100%; box-sizing: border-box; }form select { width: 100%; }form input[type=file] { margin-left: 10px; border-radius: 0; }form textarea { height: 170px; padding: 15px 10px; }form input[type=submit], .btn { display: inline-block; text-align: center; line-height: 1.5; background-color: var(--primary); color: var(--primary-comp); padding: 10px 40px; margin: 10px 0; border: none; border-radius: 5px; 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(--primary-comp); }form input[type=number] { width: 50px; } footer .wrap { padding: 30px 10px 40px; }footer h2 { padding-right: 20px; }footer h2 span { font-weight: 400; }footer h3 { margin: 30px 0 0; }footer .phone { margin-top: 20px; }footer .social li { margin: 10px 5px 0 0; }footer hr { border-color: rgba(255,255,255,.1); }.subfoot .grid { grid-template-columns: 1fr 150px; }.subfoot li { line-height: 1; padding-right: 10px; margin-right: 5px; border-right: 1px solid var(--light-comp); }.subfoot li:last-of-type { border: none; }.subfoot img { max-width: 150px; height: auto; }.ccpaNotice { text-align: center !important; background-color: var(--light) !important; border-color: var(--light) !important; } main { padding: 40px 10px 50px; }main h1, main h2, .home h3, .featured h2 span, footer h2 { font-size: 24px; }main h3, .services h2 { font-size: 20px; }main h4, footer h3 { font-size: 18px; }main ul, main ol { padding-left: 25px; }main li, footer li { margin: 5px 0; }.nolist, footer ul, .contact ul { list-style: none; padding-left: 0; }.about > div { padding: 40px 10px }.services .grid { grid-template-columns: 1fr 450px; }.services h1 { margin-bottom: 0; }.services h2 { margin: 0; color: #6699d5; }.start { max-height: 620px; background-color: #eee; padding: 30px 20px 0; margin-top: -100px; border-radius: 10px; }.start h2 { font-size: 24px; color: var(--secondary); }.start p { margin-top: 0; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); }.footer-grid div:first-child { grid-row: 1 / 4; }.gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }.gallery a img { width: 100%; border-radius: 10px; overflow: hidden; }.latest-projects { display: grid; grid-template-columns: repeat(2, 1fr); }.latest-projects div { padding: 20px; margin: 20px; background-attachment: fixed; text-align: left; background-color: var(--light); }.latest-projects img.logo { float: right; margin-left: 10px; max-width: 40%; }.latest-projects h2 { margin-bottom: 0; padding-bottom: 0; }.latest-projects div div { border: none; padding: 0; margin: 0; }.latest-projects div p:first-of-type { margin-top: 0; padding-top: 0; font-style: italic; } .gallery a { position: relative; }.fire-services { grid-gap: 20px }.fire-services a { position: relative; padding-bottom: 60px }.fire-services h2 { line-height: 1.15; }.fire-services a:hover { text-decoration: none; }.fire-services a > span { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%) }.fire-services .btn { white-space: nowrap } .keyfob {padding: 20px;border: 2px solid var(--light);margin: 20px 0;border-radius: 5px;}.notice {background-color: var(--light);border: 2px solid var(--light-comp);padding: 20px;margin: 20px 0;border-radius: 5px;} @media(max-width:1200px) { #slide2:checked ~ .slider-container, .slider-track { transform: translateX(-10%) !important; } .slide { margin: 0 0; } .arrow.next { right: 1rem; } .arrow.prev { left: 0rem; } .grid.half:has(.start) { grid-template-columns: 1fr; } .start { margin-top: 10px; }} @media(max-width:999px) { .logo img { margin: 0 auto } header .grid.half, .subfoot .grid.half, .footer-grid { grid-template-columns: 1fr; } nav ul, footer ul, footer li, footer h2, footer h3, footer p { text-align: center !important; } nav ul ul { display: none !important; } .imgLeft, .imgRight { float: none; max-width: 100%; margin: 0 0 0 0; } .grid.techno { display: grid; grid-template-columns: 1fr 1fr 1fr; } footer div:nth-of-type(3) h3, footer div:nth-of-type(4) { display: none; } .techno li { flex: 1 0 165px }} @media(max-width:900px) { .offer .grid, .featured .grid, .projects .grid, .choose .grid, .osha .grid, .welcome .grid { grid-template-columns: 1fr; } .featured p { text-shadow: 0 0 5px #fff; color: #000; } .featured a { text-shadow: none; } .additional .grid { grid-template-columns: 1fr; padding: 15px 50px; } .additional .grid > div:first-of-type { display: grid; grid-gap: 5px; grid-template-columns: 1fr 1fr } .additional .grid img:first-of-type { grid-column: 1 / -1 } .additional img:nth-of-type(2) { max-width: 100%; top: unset; right: unset; z-index: unset; } .additional img:nth-of-type(3) { max-width: 100%; position: relative; top: unset; left: unset; z-index: unset; } .additional ul { column-count: 2 } .additional .grid div:last-of-type { padding-left: 0 } .osha h2 { text-align: center; } .latest-projects img.logo { float: none; margin: 0 auto; max-width: 100%; } .gallery { grid-template-columns: repeat(2, 1fr); } .grid.third { grid-template-columns: 1fr 1fr; } .techno li { flex: 1 0 120px }} @media(max-width:767px) { nav li:hover > ul { display: none; } .grid.fourth { grid-template-columns: 1fr 1fr } .contact.segment { padding: 0 0 !important; } .contact .wrap { padding: 0 0 !important; } .contact .emphasis { margin: 0 0; }} @media(max-width:700px) { .latest-projects { grid-template-columns: 1fr; } .techno li { flex: 1 0 105px }} @media(max-width:600px) { nav li { padding: 5px 5px; } .grid.half, .grid.third { grid-template-columns: 1fr; } .grid.techno { display: grid; grid-template-columns: 1fr 1fr; } .imgRight { float: none; margin: 0 auto; max-width: 100%; } .additional ul { column-count: unset } .techno li { flex: 1 0 85px } .keylessform .grid.fourth, .keylessform .grid.half:has(input[type=checkbox]) { width: 100%; }} @media(max-width:560px) {} @media(max-width:500px) { .grid.fourth { grid-template-columns: 1fr; } .grid.fourth.logos img { margin: 10px auto; } .box label { margin: 25px auto !important; } .keylessform form p { text-align: center; } .keylessform form input[type=date] { width: 100% !important; }} @media(max-width:400px) { nav li { padding: 4vw 13vw; margin-left: 0; }}