img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root { --primary: #22549e; --secondary: #000; --tertiary: #db2f31; --quaternary: #ffffff; --primarylight: #A9A9A9; --secondarydark: #4d4d4d; } .bg-primary { background-color: var(--primary); }.bg-secondary { background-color: var(--secondary); }.bg-primary, .bg-secondary { color: var(--quaternary); }.mid { align-items: center; align-self: center; } html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; min-width: 320px; }body { font-family: 'Urbanist', Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.5; text-align: center; color: var(--secondarydark); }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 { text-align: left; }nav { text-transform: uppercase; }h1, h2, h3, h4, h5, h6 { line-height: 1.3; }h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; align-items: center; gap: 10px; } h4 { font-size: 1em; } h5 { font-size: 0.83em; } h6 { font-size: 0.67em; } img, iframe { max-width: 100%; height: auto; }iframe { display: block; aspect-ratio: auto 16 / 9; width: 100%; margin: 5vw auto; }.fullwidth { width: 100%; }a img, iframe { border: none; }a { transition: ease-in-out .3s; text-decoration: none; color: var(--tertiary); }a:hover { cursor: pointer }.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 { text-align: center; }.wrap { display: block; max-width: 1080px; margin: 0 auto; position: relative; padding: 0 15px; }.nolist { list-style: none; padding-left: 0px; }main > .wrap { max-width: 100% } .btn { display: inline-block; text-shadow: none; margin-top: 2vw; background-color: var(--tertiary); padding: 10px 60px; color: var(--quaternary); transition: all .3s linear .01s; text-transform: uppercase; }.btn:hover { background-color: var(--primary); text-decoration: none } .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); } .flex { display: flex; flex-wrap: wrap; gap: 10px; } header, .hero { position: relative; padding: 10px; }header { background-color: var(--quaternary); }header .grid { grid-template-columns: repeat(2, 1fr); align-items: center; display: grid; }header .grid .third { grid-template-columns: repeat(3, 1fr); display: grid; }header ul li { display: inline-block; }header a { color: var(--primarylight); }header a:hover { color: var(--tertiary); }header .grid > div { justify-items: start; display: grid; }header .grid > div img { padding-left: 10px; }header svg { display: inline-block; justify-items: center; padding: 5px; border: 1px solid #eee; }header p { margin: 0; padding: 0; font-size: 12px; text-align: center !important; } nav { padding: 25px; }nav ul li, footer .grid.fourth > div:last-of-type li { display: inline-block; }nav .grid ul:nth-of-type(1) { justify-content: flex-start; }nav .grid ul:nth-of-type(2) { justify-content: flex-end; }nav ul { margin: 0; padding: 0; display: flex; align-items: center; }nav ul li svg { color: var(--quaternary); width: 20px; height: auto; transition: all .3s linear .01s; }nav ul li svg:hover { color: var(--tertiary); }nav a { color: var(--quaternary); padding: 15px 10px; }nav .grid ul:nth-of-type(1) li a:hover { border-bottom: 2px solid var(--tertiary); }nav ul:last-of-type li:last-of-type { background-color: var(--tertiary); padding: 10px 20px; margin-left: 20px; transition: all .3s linear .01s; }nav ul:last-of-type li:last-of-type:hover { background-color: var(--primary); } nav ul li ul { margin: 0; padding: 0; display: none; position: absolute; background-color: var(--quaternary); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; padding: 15px; z-index: 9999; }nav ul li:hover ul { display: block; }nav ul li ul li, nav ul li ul:last-of-type li:last-of-type, nav ul li ul:last-of-type li:last-of-type:hover { display: block; text-align: left; border-bottom: none; padding: 0; margin: 0; background-color: var(--quaternary); color: #fff; }nav ul li ul li a { display: block; color: var(--secondarydark); text-transform: none; } .hero { background-size: cover; background-position: center; position: relative; height: 200px; background-image: url(/images/bkg.jpg); background-position-y: 70% }.hero:before { content: ""; position: absolute; }.hero:before { width: 100%; height: 100%; background-color: rgba(0,0,0,.3); top: 0; left: 0; }.hero > .wrap { top: 45%; transform: translateY(-45%); }.hero p:nth-of-type(1) { font-size: 4em; }.hero p:nth-of-type(2) { display: block; font-size: 1em; }.hero h1, .hero p { color: var(--quaternary); padding: 0 26px; text-shadow: 2px 2px 3px rgba(0,0,0,.3); }.bannerTitle p { text-align: left; margin: 0; padding: 0; }span { display: block; } footer li, .contact li { list-style: none; }.about .grid { padding: 40px 0 50px; }.about { display: block; margin: 5px 0; }.solutions .grid { grid-template-columns: 300px 1fr; grid-gap: 10px 40px; padding: 40px 0 60px; }.bg-light { background-color: #fff; padding: 20px; } .row2 hr { border: 1px solid #fff; max-width: 100px; }.row2 h3, .row2 ul li { text-align: center; list-style: none; }.row2 svg { border: 1px solid #fff; stroke: var(--primary); background: var(--quaternary); padding: 15px; height: auto; border-radius: 5px; width: 50px; }.row2 p { text-align: center; }.row2 { padding: 70px 0 50px 0; }.row2 a { color: #fff; }.row2 a:hover, .row7 a:hover { text-decoration: none }.row2 a:hover hr, .row7 .post h3 a:hover { transition: ease-in-out .3s; color: var(--tertiary); border-color: var(--tertiary); } .row3 { padding: clamp(10px, 5vw, 70px) 40px; margin: 15px 0; }.row3 .circle { position: relative; margin-top: -70px; width: 100px; height: 100px; background-color: #22549e; border-radius: 50%; left: 50%; transform: translateX(-50%); }.row3 p { text-align: center; }.row3 .nametitle { padding: 10px 0; }.row3 .nametitle p { margin: 0; padding: 0; }.row3 hr { border: 1px solid #22549e; max-width: 100px; }.row3 .grid > div { border: 3px solid #eee; position: relative; padding: 20px 0; }.row3 blockquote { font-style: italic; } .row4 { background-size: cover; background-position: center; background-image: url(/images/help-desk-man.jpg); padding: 50px; }.row4 h2, .row4 p { color: #fff; text-shadow: 1px 1px 2px #000; }.row4 p { font-size: 20px; margin-top: 0; }.row4 h2 { font-size: 32px; margin-bottom: 0; } .partnerscroll { height: 60px; overflow: hidden; padding: 40px 0 clamp(10px, 2vw, 25px); }.partnerscroll img { margin: 0 40px; display: inline-block; width: 150px; height: auto; } .row6 { background-size: cover; background-position: center; background-image: url(/images/output1.jpg); padding: clamp(20px, 5vw, 126px) 0; } .row7 { padding: 60px 10px 50px; }.row7 h3 { line-height: 1.5em; }.row7 .btn { margin-bottom: 3vw; }.row7 svg { display: block; float: left; padding: 5px; margin-right: 10px; }.row7 .posts { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 16px; }.row7 .post { display: flex; flex-flow: wrap; padding-bottom: 15px; }.row7 .post { box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; }.row7 .post .postThumbnail { order: 1; }.row7 .post .postThumbnail { max-height: 180px; overflow: hidden; margin-bottom: 5px; }.row7 .post h3 { order: 2; padding: 0 20px; margin-bottom: 0; }.row7 .post h3 a { color: var(--primary) }.row7 .post p { order: 4; padding: 0 20px; margin-bottom: 0; }.row7 .posttags, .row7 .postcats, .row7 .posttags { display: none; }.row7 .post p:nth-of-type(3n) a { display: inline-block; text-shadow: none; margin-top: 2vw; background-color: var(--tertiary); padding: 10px 60px; color: var(--quaternary); }.row7 .post p:nth-of-type(3n) a:hover { background-color: #22549e; transition: all .3s linear .01s; }.row7 .post p:nth-of-type(3n) { padding: 0 20px; } .solution h2 strong { display: block; font-weight: normal; }.solution-boxes p, .solution-boxes h2 { text-align: center; color: #333; }.solution .cabling h2:first-of-type { text-align: center; }.solution .cabling .grid.half :is(ul) { padding: 0 25px 0 15px; }.solution p:has(i) { text-align: center; color: #db2f31; }.solution .layer { display: grid; flex-wrap: wrap; justify-content: space-evenly; align-items: start; gap: 10px; flex-direction: column; grid-template-columns: 1fr 1fr; }.solution .layer h3 { text-align: left; }.solution .bg-primary { margin: 20px 0; }.solution .bg-primary h2 { color: #fff }.layer ul .nolist { margin-left: -20px; font-weight: bold; }.advantage h2 { text-align: center; }.advantage li { font-size: 16px; margin: 20px 0 }.advantage img, .appt img, .unified-coms img { width: 100%; height: 350px; object-fit: cover; border-radius: 10px }.cta { text-align: center; margin: 20px 0 0 0; padding: 50px 15px; background-color: var(--primary); color: var(--quaternary); }.cta h2, .cta p.center { text-align: center; }.solution-card, .solution-boxes a, .aboutgrid div { box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; padding: 25px 50px 50px 50px; border-top: 5px solid var(--primary); margin-bottom: 50px; }ul.checklist li { position: relative; padding-left: 25px; margin-bottom: 10px; }ul.checklist li:before { content: '✔'; position: absolute; left: 0; } .partners { display: flex; flex-wrap: wrap; flex-direction: row; gap: 80px; align-items: center; justify-content: space-evenly; }.partners img { width: 165px; align-self: start; }.testimonials .stars { display: flex; flex-wrap: wrap; flex-direction: row; gap: 3px; align-items: center; justify-content: flex-start; margin-top: 15px; }.testimonials p:has(strong) { margin-left: 15px; } form { margin: 20px 0; }form .table.half > div:first-of-type { padding-right: 1%; }form .table.half > div:last-of-type { padding-left: 1%; }form input[type=text], form input[type=email], form input[type=tel], form input[type=submit], form select, form textarea { color: var(--primarylight); border: 1px solid #eee; }form input[type=text], form input[type=email], form input[type=tel], form select { margin-bottom: 15px; }form input[type=text], form input[type=email], form input[type=tel], form select, form textarea { padding: 0 20px; }form input[type=text], form input[type=email], form input[type=tel], form textarea { width: calc(100% - 42px); }form input[type=text], form input[type=email], form input[type=tel], form select { height: 50px; }form select { width: 100%; }form textarea:nth-of-type(1) { height: 60px; padding: 20px; margin-bottom: 15px; }form textarea { height: 100px; padding: 20px; margin-bottom: 15px; }form input[type=submit] { text-transform: uppercase; background-color: var(--tertiary); color: var(--quaternary); padding: 15px 30px; } form input[type=submit]:hover { cursor: pointer; text-decoration: none; background-color: var(--primary); color: var(--quaternary); transition: all .3s linear .01s; } .mailinglist input[type=text], .mailinglist input[type=email] { height: 30px; font-size: 12px; }.mailinglist input[type=submit] { background-color: var(--primary); border: none; color: var(--quaternary); width: 100%; font-size: 12px; }.mailinglist input[type=submit]:hover { cursor: pointer; text-decoration: none; background-color: var(--tertiary); transition: all .3s linear .01s; } footer { padding: 65px 0; }footer h3 :is(a) { color: #ffffff; }footer ul { margin-left: 0; margin-top: 20px; padding: 0; }footer ul li { font-size: 12px; }footer ul li a { color: var(--quaternary); }footer ul li a:hover, footer h3:hover :is(a) { color: var(--tertiary); }footer > .wrap { padding: 0 35px; margin: 0 auto; }footer svg { color: var(--quaternary); transition: all .3s linear .01s; }footer svg:hover { color: var(--tertiary); }footer .grid.fourth > div:last-of-type li { margin: 5px; }footer hr { border: 1px solid #22549e; width: 30%; margin-left: 0; }footer .subfoot .grid > div:last-of-type { text-align: right; }.footersociaicons { display: flex; justify-content: flex-end; } .subfoot { margin-top: 20px; font-size: 12px; padding: clamp(2px, 1.5vw, 16px); }.subfoot img { width: 120px; height: auto; }.subfoot a { color: var(--quaternary); }.subfoot a:hover { color: var(--tertiary); }.subfoot hr { border: none; border-top: 0.5px solid #eee; opacity: 0.5; width: 100%; }.ccpaNotice { text-align: center !important; } .aboutimg { width: 800px; height: 300px; object-fit: cover; }main { padding: 20px 0 }main .wrap { padding: 20px 10px }main a:hover { text-decoration: underline; }main svg { vertical-align: middle }main h1 { color: var(--primary) }main h2 { font-size: 24px }main h3 { font-size: 20px }main h4 { font-size: 18px }main li { margin: 5px 0 }.mt50 { margin-top: 50px }.grid .box { box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; padding: 20px; border-top: 5px solid var(--primary); margin-bottom: 40px; }.grid.half .box { padding: 20px 40px 40px }.appt { font-size: 16px; padding: 40px 0; margin: 40px auto }.appt img { height: 250px }.appt .btn:hover { background-color: var(--tertiary) }.zultys { padding: 20px 0; margin: 40px auto }.unified-coms h3 { margin-bottom: 0 }.unified-coms .flex p { font-size: 16px; margin: 0 } @media(max-width:999px) { body .bannerTitle { width: 100%; } .bannerTitle p { text-align: center; } .grid.fourth { grid-template-columns: 1fr 1fr; } .grid.fifth { grid-template-columns: 1fr 1fr 1fr; } footer .mid { align-items: normal; } .footersociaicons { justify-content: unset; }} @media(max-width:767px) { nav .grid.half, .row4 .grid.half, .row6 .grid.half, .solution .layer div { grid-template-columns: 1fr; } header .grid { display: flex; flex-direction: column; } header .grid, header .grid div:nth-of-type(1), nav .grid ul:nth-of-type(1), nav .grid ul:nth-of-type(2) { justify-content: center; } header .grid .third { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-evenly; grid-gap: 5px; } header .grid .third > div { justify-items: center; margin: 0 10px; } header :is(p,ul,li), header .grid > div:last-of-type { text-align: center; } header svg { float: none; display: inline-block; margin: 0 5px; } nav ul { flex-direction: column; margin: 10px 0; } nav ul ul { display: none; } nav .grid ul:nth-of-type(2) { margin-top: 0; } nav li { margin: 10px 0; } nav ul:last-of-type li:last-of-type { margin-left: 0; } footer .grid.fourth, .row2 .grid.fourth, .row7 .posts { grid-template-columns: 1fr 1fr; } .footersociaicons { justify-content: left; } footer h3:has(about) { margin-top: 0; } .wrap:has(.row3), .wrap:has(.advantage), .wrap:has(.cybersec) { padding: 0; } .row2:has(.grid.fourth) { padding: 25px 15px; margin-bottom: 40px; } .row6 :is(h2,p) { text-shadow: 1px 1px 2px rgb(0 0 0); } .solution .bg-primary { padding: 50px 15px; } .partnerscroll { height: 70px; } .imgRight, .imgCenter, .imgLeft { float: none; max-width: 100%; margin: 0; }} @media(max-width:700px) { .row3 .grid.half, .row2 .grid.fourth, .row7 .posts, .grid.half, .grid.fourth { grid-template-columns: 1fr; } .row3 .grid > div { margin: 25px 0; } .solution-boxes .grid.half > a { padding: 45px 75px; }} @media(max-width:600px) { h3 :is(svg), .solution .layer h3:is(svg), .unified-coms .flex svg, .unified-coms .nolist svg { display: block; margin: 0 auto; } h3:has(svg), .solution .layer h3:has(svg) { text-align: center; } .row3 { padding: clamp(10px, 5vw, 70px) 10px; } .solution .layer div svg { float: none; padding-right: 0; } .unified-coms .flex { flex-direction: column; justify-content: space-evenly } .unified-coms .nolist svg { height: 50px; width: 50px; } footer .grid.fourth, .subfoot .grid.half { grid-template-columns: 1fr; } footer :is(h3,p,ul,li), footer .subfoot .grid > div:last-of-type { text-align: center; } .footersociaicons { justify-content: center; } footer hr { margin-left: auto; }} @media(max-width:400px) { body .bannerTitle p:first-of-type { font-size: 3em !important; } .solution-boxes .grid.half > a { padding: 45px 10px; }}