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; } body { font-family: 'Urbanist', Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.5; text-align: center; color: var(--secondarydark); min-width: 320px; }textarea, input, select, button { font-family: 'Urbanist', Arial, Helvetica, sans-serif; font-size: 15px; }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; }.bgimg { position: relative }.bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0 }.bgimg:before { z-index: 1 }.bgimg > .wrap { z-index: 2 } .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: 15px 10px; }nav .wrap { padding: 0 }nav li{ display: inline-block; }nav .grid { grid-gap: 0; grid-template-columns: 1fr 350px }nav .grid > ul:nth-of-type(1) { text-align: left }nav .grid > ul:nth-of-type(2) { text-align: right }nav ul { margin: 0; padding: 0; }nav * { vertical-align: middle }nav svg { width: 20px; height: auto; transition: all .3s linear .01s; width: 30px; height: 30px; }.social svg { color: var(--quaternary); stroke: var(--quaternary);display:block }.social svg:hover { color: var(--tertiary); stroke: var(--tertiary); }nav li:has(.btn) { margin: 0 10px }nav a { color: var(--quaternary); padding: 10px 5px; margin: 5px; display: block }nav a:has(svg) { padding: 5px }nav .btn { margin: 5px; padding: 10px 30px }nav ul:not(.social) a { border-bottom: 2px solid transparent }nav ul:not(.social) a:hover { border-bottom: 2px solid var(--tertiary); }nav ul ul a { color: var(--secondarydark); text-transform: none; white-space: nowrap }nav ul ul li { display: block } nav ul 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: 999; }nav ul li:hover ul { display: block; } .hero { position: relative; height: 200px; }.hero.bgimg > img { object-position: 50% 60% }.hero:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(2, 22, 133, 0.6); inset: 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; text-wrap: balance }span { display: block; } footer li, .contact li { list-style: none; }footer a { display: block }.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 { padding: 50px clamp(10px, 4vw, 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; } .row6 { 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); white-space: nowrap }.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: 42px 0; clear: both }footer h3 :is(a) { color: #ffffff; }footer ul { margin-left: 0; margin-top: 20px; padding: 0; }footer li { font-size: 12px;margin:0 0 4px }footer a { color: var(--quaternary); padding: 4px }footer 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 hr { border: 1px solid #22549e; width: 30%; margin-left: 0; }footer .subfoot .grid > div:last-of-type { text-align: right; }footer .social{text-align:left}footer .social li{display:inline-block}.footsol{grid-column:span 2}.footsol ul{column-count:2} .subfoot { margin-top: 20px; font-size: 12px; padding: clamp(2px, 1.5vw, 16px); }.subfoot .grid { grid-template-columns: 1fr 150px }.subfoot .a8bmark img { width: 120px; height: auto; filter: invert(1) }.subfoot a { color: var(--quaternary); }.subfoot p a {display:inline-block;margin:0 10px}.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; } main .grid.fourth { grid-template-columns: 1fr 1fr; } .grid.fifth { grid-template-columns: 1fr 1fr 1fr; }} @media(max-width:767px) { header .grid, nav .grid, .row4 .grid.half, .row6 .grid.half, .solution .layer div { grid-template-columns: 1fr; } 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), nav .grid.grid ul { text-align: center; } header svg { float: none; display: inline-block; margin: 0 5px; } nav { padding: 10px 0 } nav .wrap { padding: 0 } .row2 .grid.fourth, .row7 .posts, footer .grid.fourth { 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),footer .social { 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,.subfoot .grid { 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; } .footsol{grid-column:unset} .footsol ul{column-count:unset}} @media(max-width:400px) { body .bannerTitle p:first-of-type { font-size: 3em !important; } .solution-boxes .grid.half > a { padding: 45px 10px; } nav .grid > ul:first-of-type { display: grid; grid-template-columns: 1fr 1fr } nav a { text-align: center }}