img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { margin: 0; min-width: 320px; text-align: center; font-family: 'Arimo',sans-backgrounserif; font-size: 16px; line-height: 1.4 } .wrap { max-width: 1080px; margin: 0 auto; position: relative; } h1, h2, h3, h4, h5, h6, p, li, td, dt, dd, .logo, .left { text-align: left; } .banner, .banner .home h1, .center { text-align: center; } h1, h2, h3, h4, h5, h6, header, nav, .fakeh1 { font-family: 'Muli',sans-serif; } img, iframe, video { max-width: 100%; } section ul { padding-left: 20px; } section li { margin: 5px 0 } section.wrap { overflow: hidden; } a { text-decoration: none; color: #35a0e4 } sup { line-height: 1 } .flex { display: flex; flex-wrap: wrap; } .flex > * { flex: 1 } .grid { display: grid; grid-gap: 10px 20px } .mid { align-self: center; align-items: center; } .grid.half { grid-template-columns: repeat(2,1fr); } .grid.third { grid-template-columns: repeat(3,1fr); } .grid.fourth { grid-template-columns: repeat(4,1fr); } .span2 { grid-column: span 2; } .bg-section, .bg-light, .what a > span, .ogsql a > span, .onestop .button { background-color: #f6f6f6; } .bg-dark a, .bg-dark h2, .bg-dark, .bg-color a, .bg-color h2, footer, footer a, .cycle-prev, .cycle-next { color: #f6f6f6; } .bg-nav, .bg-dark, .banner { background-color: #4e555b; } body, .what a > span, .ogsql a > span, .onestop .button { color: #4e555b; } .bg-color, .banner .button { background-color: #d95b32; } .bg-color2 h2 { color: white; } .bg-color2, .btnStyle1:hover { text-decoration: none; background-color: #35a0e4; color: #fff; } h2, nav .highlight { color: #d95b32; } a:hover, .topnav a:hover, .featured a h2:hover, .team a:hover h3 { color: #ff6b3b; } nav a { color: #ddd; } .banner { background-image: url(/images-design/about.jpg); } .top li:nth-of-type(2) { border: 2px #ddd; border-style: none solid; } .bg-nav { border-top: 4px solid #ddd; } h3, h4, h5, h6, header a, .logo a:hover { color: #678ca9; } body { background-color: #678ca9; } header, #partners { background: #FFF; } h1, .banner h1, .banner .button, footer h3, .fakeh1, .topnav a { color: #fff; } .banner h1, .fakeh1 { text-shadow: 4px 4px 8px #222,-4px -4px 8px #222; } .fakeh1 { font-size: 2em; font-weight: bold } .nolist ul, .nolist ol, .nolist li { padding: 0; list-style: none } header .grid { padding: 20px 2%; } header .grid { display: grid; grid-template-columns: 1fr 240px 170px; align-items: center } .top .btnStyle1 { padding: 8px 0; } nav li, .halfCol, .logo, .top, .top li { display: inline-block; vertical-align: top; } .topnav li, .logo img, .logo span, footer ul ul li { display: inline-block; vertical-align: middle; } .topnav { font-size: 18px; font-weight: bold; background-color: #35a0e4; } .topnav ul { padding: 0; margin: 0; } .topnav li { margin: 0 30px } .topnav a { text-align: center } .topnav a, nav a { display: block; padding: 5px 15px; } .top { font-weight: bold; text-align: center; font-size: 14px; } .top ul { padding-left: 0; } .logo a { display: block } .logo img { width: 150px; height: 111px } .logo span { font-size: 22px; font-weight: bold; letter-spacing: 0.5px; text-align: left; } .phonenum { font-size: 20px; font-weight: bold; color: #35a0e4; } .hipaa-badge{height:100px;} .isologo {margin-left:22px; height: 110px; width: 160px;} nav { text-transform: uppercase; } nav ul { padding: 0; margin: 0; text-align: center; display: inline-block } nav a { display: block; font-weight: bold; margin: 5px; font-size: 16px } .header_partner { display: inline-block; } .header_partner img { margin: 0 auto; display: block; } .table { display: table; width: 100%; } .table > div { display: table-cell; vertical-align: top; } .banner .home { height: 400px; position: relative; } .banner .home h1 { margin: 0 auto; padding: 100px 60px 0; font-size: 36px; line-height: normal; } .banner .home h1 span { display: block; } .banner h1, .fakeh1 { margin: 0; top: 50%; transform: translateY(-50%); position: relative } .banner .button { display: inline-block; width: auto; padding: 10px; margin: 60px 0 0; } .banner .wrap { padding: 0 2%; height: 100%; } .cycle-slideshow { height: 100%; position: relative; overflow: hidden; } .cycle-slideshow a { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } .cycle-slideshow a, .cycle-slideshow a:hover { color: #fff; } .cycle-slideshow a:hover span { background-color: #35a0e4; } .cycle-slideshow p { font-size: 18px; text-align: center; padding: 0 70px; margin-bottom: 0; } .cycle-prev, .cycle-next { height: 100%; top: 0; width: 55px; position: absolute; z-index: 999; opacity: .3; } .cycle-prev i, .cycle-next i { position: absolute; top: 45%; display: block; width: 55px; height: 64px } .cycle-prev i { left: 0; } .cycle-next i { right: 0; } .cycle-prev:hover, .cycle-next:hover { opacity: .6; cursor: pointer; } .cycle-prev { left: 5px; } .cycle-next { right: 5px; } .slide0 { background-image: url(/images-design/slides/0.jpg); } .slide1 { background-image: url(/images-design/slides/1.jpg); } .slide2 { background-image: url(/images-design/slides/2.jpg); } .slide3 { background-image: url(/images-design/slides/3.jpg); } .slide4 { background-image: url(/images-design/slides/4.jpg); } .slide5 { background-image: url(/images-design/slides/5.jpg); } .slide6 { background-image: url(/images-design/slides/6.jpg); } .slide7 { background-image: url(/images-design/slides/7.jpg); } .slide8 { background-image: url(/images-design/slides/8.jpg); } .slide9 { background-image: url(/images-design/slides/9.jpg); } .slide10 { background-image: url(/images-design/slides/10.jpg); } .slide11 { background-image: url(/images-design/slides/11.jpg); } .slide12 { background-image: url(/images-design/slides/12.jpg); } .slide13 { background-image: url(/images-design/slides/13.jpg); background-position-y: 18% !important } .slide14 { background-image: url(/images-design/slides/14.jpg); } .slide15 { background-image: url(/images-design/slides/15.jpg); } .slide16 { background-image: url(/images-design/slides/16.jpg); background-position-y: 18% !important } .banner .halfCol { vertical-align: middle; } .banner .halfCol:last-of-type { background-position: center center; background-size: cover; height: 250px; } .banner { height: 250px; background-position: center; background-size: cover; } .carousel { height: 80px; background-color: #fff; overflow: hidden } .carousel img { max-height: 70px; vertical-align: middle; margin: 0 40px; padding: 5px 0 } .featuremain { background: #fff; margin-top: 20px; padding: 50px 10px; display: flex; } .featuremain h2, .featuremain p { text-align: center; } .featuremain h2 { font-size: 18px; } .featuremain a { padding-bottom: 145px; position: relative; } .featuremain p { margin: 15px auto; padding: 0 10px; } .featuremain img { margin: 20px auto; position: absolute; bottom: 0; transform: translateX(-50%); left: 50%; } .featured { background: #FFF; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -5px } .featured a { flex: 1 1 180px; text-transform: uppercase; background-size: cover; vertical-align: middle; padding: 40px 10px; margin: 5px } .featured h2 { text-align: center; font-size: 18px; color: #35a0e4; margin: 0; top: 50%; transform: translateY(-50%); position: relative; } .onestop ul { text-align: left; padding: 0; } .onestop li { display: inline-block; width: 45%; } .onestop .fa-check { margin-right: 5px; } .onestop .button { margin: 20px 0; } .why, .who, .show, .what, .ogsql, .blog, .onestop { display: table; width: 100% } .why, .who, .show, .what, .ogsql { font-size: 17px; } .why > div, .show > div, .what > div, .who > div, .ogsql > div, .blog > div, .onestop > div { display: table-cell; vertical-align: top; position: relative; } .why > div:first-of-type, .show > div:last-of-type, .what > div:first-of-type, .ogsql > div:first-of-type, .onestop > div:last-of-type { padding: 20px 2%; } .who { padding: 20px 0; position: relative; } .bg-dark div.who > div { width: 46%; padding: 0 2% 20px; vertical-align: top; } .who p, .who h2 { text-align: center; padding: 0 10px; } .who p:last-of-type { position: absolute; bottom: 0; text-align: center; margin: 0; width: 96%; } .show p, .show h2, .blog h2, .blog p { text-align: right; } .home-image { width: 40%; background-position: center; background-repeat: no-repeat; background-size: cover; height: 300px; } .onestop .home-image { background-image: url(/images-content/one-stop.jpg); } .why .home-image { background-image: url(/images-content/why-choose.jpg); } .show .home-image { background-image: url(/images-content/show-video.jpg); } .what .home-image { background-image: url(/images-content/what-hand.jpg); } .ogsql .home-image { background-image: url(/images-content/oil-power-station.jpg); } .ogsql .button { font-size: 15px; } .blog.home .postThumbnail img { float: none; display: block; width: 100% !important; height: 100% !important; max-width: 100%; margin: 0; padding: 0; object-fit: cover; object-position: 50% 25% } .blog.home .post h2 { grid-area: title; padding: 20px 20px 0 } .blog.home .postThumbnail { grid-area: img; float: none; margin: 0; width: unset; height: unset; max-width: 100% } .postThumbnail { float: right; width: 300px; height: 200px; margin: -32px 0 20px 20px; overflow: hidden } .blog.home .postThumbnail:empty { display: block; background-image: url(/images-content/announcement.jpg); background-size: cover } .blog.home .post p:nth-of-type(2) { grid-area: p; padding: 0 20px } .blog.home .post p:nth-of-type(3) { grid-area: btn; padding: 0 20px 20px } .blog.home .post { display: grid; grid-template-columns: 40% 1fr; grid-template-areas: "img title" "img p" "img btn" } .blog { font-size: 16px } .blog h2 a { color: #d95b32; } .blog p a { display: inline-block; width: 200px; font-size: 15px; font-weight: bold; text-align: center; background-color: #d95b32; color: #fff; border-radius: 5px; padding: 8px 0; } .blog p:first-of-type, .blog .posttags, .blog .postcats { display: none; } .team { padding: 10px 0 20px; } .team img { object-fit: cover; width: 100%; height: 420px; } .team h3 { text-align: center; margin-top: 5px; } .team h3 span { display: block; font-family: arimo; font-size: 16px; font-weight: normal; color: #4e555b; } footer .wrap { padding: 12px 2%; } footer .links { display: table; width: 100%; } footer ul { padding-left: 0; list-style-type: none; display: table-cell; width: 15%; } footer li { margin: 8px 0; } footer address { margin-bottom: 20px; } footer i { margin: 8px; } footer i:first-of-type { margin-left: 0; } footer hr { border: 2px #769bb8; border-style: none none solid; margin: 20px auto; } .policies.flex { width: 100%; margin: 0; align-items: center } .policies li { text-align: center; margin: 8px; min-width: 90px } .policies a { text-align: center; display: inline-block; margin: 0 auto; padding: 5px } .btnStyle1 { display: inline-block; min-width: 200px; text-align: center; background: #d95b32; color: #fff; font-weight: bold; border-radius: 5px; padding: 10px 20px; } .btnStyle2 { display: inline-block; min-width: 200px; text-align: center; background-color: #35a0e4; color: #fff; font-weight: bold; border-radius: 5px; padding: 10px 20px; margin: 10px 0 } .btnStyle2:hover { background-color: #d95b32; color: #fff } .btnStyle3 { display: inline-block; text-align: center; width: 250px; padding: 20px 0; border-radius: 5px; font-weight: bold; background-color: #d95b32; color:#f6f6f6;} .btnStyle3:hover { background-color: #35a0e4;; color:white;} .btnStyle4 { display: inline-block; text-align: center; width: 240px; padding: 20px 0; border-radius: 5px; font-weight: bold; background-color: #d95b32; color:#f6f6f6;} .btnStyle4:hover { background-color: #35a0e4;; color:white;} .button { display: block; text-align: center; width: 200px; padding: 10px 0; border-radius: 5px; font-weight: bold; } .button:hover { text-decoration: underline; } .halfCont { display: table; width: 100%; } .halfCol { width: 48%; position: relative; display: table-cell; } .halfCol:nth-of-type(odd) { padding-right: 2%; } .halfCol:nth-of-type(even) { padding-left: 2%; } .line:before { content: ""; height: 70%; top: 20%; position: absolute; left: 0; width: 1px; background-color: #ddd; box-shadow: 0 0 1px #ddd; } section hr { border: 1px #ddd; border-style: none none solid; box-shadow: 0 0 1px #ddd; } .nowrap { white-space: nowrap; } .mark { text-align: right; } section { padding: 50px 10px; } .pad { padding-left: 10px; padding-right: 10px } .imgRight, .imgLeft { max-width: 45%; } .imgRight { float: right; margin: 5px 0 1% 2%; } .imgLeft { float: left; margin: 5px 2% 1% 0; } .imgCenter { margin: 0 auto; display: block; } .mw40 { max-width: 40% } .clear { clear: both; } .hide { display: none; } .gas { width: 45%; } .unified img { display: inline-block; vertical-align: middle; margin: 20px 40px; } .partners { background-color: white; padding: 15px 0; text-align: center; } .partners a { display: inline-block; width: 20%; margin: 0; vertical-align: top; padding: 10px 0; } .solutions { list-style: none; padding: 0; margin: 0; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px } .solutions li, .security li { margin: 0 } .solutions a, .security a { display: block; height: 150px; background-position: center; background-size: cover; padding: 0 8px } .solutions li a, .security li a { background-color: rgba(0,0,0,.3); background-blend-mode: color; } .solutions h2, .security h2 { font-size: 20px; text-align: center; text-transform: uppercase; color: #fff; margin: 0; text-shadow: 1px 1px 4px #000, -1px -1px 4px #000; position: relative; top: 50%; transform: translateY(-50%); } .table.third.solutions > div, .table.third.security > div { vertical-align: middle; } .solutions > div:nth-of-type(1) { padding-right: 5px; } .solutions > div:nth-of-type(2) { padding-left: 5px; } .security { list-style: none; padding: 0; margin: 0; grid-template-columns: 1fr 1fr; grid-gap: 15px } .back-office { background-image: url(/images-content/feat-office.jpg); } .managed-it { background-image: url(/images-content/feat-managing.jpg); } .unified-comms { background-image: url(/images-content/feat-communications.jpg); } .data-recovery { background-image: url(/images-content/feat-data-recovery.jpg); } .installations { background-image: url(/images-content/feat-installations.jpg); } .hosted-cloud { background-image: url(/images-content/feat-cloud.jpg); } .cyber-security { background-image: url(/images-content/feat-cyber-security.jpg); } .microsoft-office { background-image: url(/images-content/feat-microsoft-office.jpg); } .structured-cabling { background-image: url(/images-content/cables.jpg); } .security-cameras { background-image: url(/images-content/security-camera-systems.jpg); } .access-control { background-image: url(/images-content/access-control-solutions.jpg); } .cloud-video-surveillance { background-image: url(/images-content/cloud-video-surveillance.jpg); } .intercom-systems { background-image: url(/images-content/intercom-systems.jpg); } .security-systems { background-image: url(/images-content/security-systems.jpg); } #dccn-auto_banner300x250 { width: 300px; margin-left: 40px; } .margintop25 { margin-top: 25px; } .remote { margin: 30px 0; } .remote h3 { font-size: 20px; } #partners { padding: 20px 10px 40px; } #partners h3 { text-align: center; } #partners img { display: inline-block; vertical-align: middle; margin: 10px 40px; } details { text-align: left; margin: 1em 0; } summary { cursor: pointer; color: rgb(103,140,169); padding: 5px 0; font-size: 18px } summary:focus { outline: none } details p { padding-left: 20px } .footnotes { list-style: none; padding-left: 20px } .footnotes li, .testimonials .carousel, .testimonials .pager { position: relative; } .footnotes sup { position: absolute; left: -20px } .office h3 { color: #d95b32 } .testimonials { background-color: #fff; padding-bottom: 40px; } .testimonials .wrap { outline: 1px solid red; } .testimonials h2, .testimonials p { text-align: center; } .testimonials h2 { color: #fff; padding: 20px; margin: 0; } .testimonials strong { display: block; font-size: 20px; } .testimonials span, .testimonials .fa-quote-right { color: #0070B3 } .testimonials .carousel { width: 95% !important; height: 350px; margin-top: 20px; position: relative; left: 40px; } .testimonials .cycle-slide { width: 455px; height: 280px; vertical-align: top; padding: 20px; margin: 20px 10px; box-shadow: 0 0 10px rgba(0,0,0,.1); overflow: hidden; white-space: normal; } .testimonials .width.cycle-slide { width: 970px; } .testimonials .fa-quote-right { font-size: 32px; } .testimonials .pager a { font-size: 40px; color: #35a0e4; padding: 170px 0; position: absolute; z-index: 999; } .testimonials .pager a:hover { color: #ff6b3b; } .testimonials .pager a:first-of-type { left: 0; } .testimonials .pager a:last-of-type { right: 0; } .score { background-color: #fff; height: auto; padding-bottom: 20px } .aspirin { grid-template-columns: 700px 1fr; grid-gap: 10px 40px; } .aspirin .comments > div { background-color: #fff; color: #666; padding: 10px 30px; margin-bottom: 20px; } .aspirin .cta { background-color: #0070B3; padding: 10px 20px; margin-top: 40px; } .aspirin .cta h3 { font-size: 20px; text-align: center; color: #fff; } .aspirin .cta input[type=submit] { width: 100%; font-size: 16px; background-color: #d95b32; padding: 15px 0; } .aspirin .cta input[type=submit]:hover { background-color: #ff6b3b; } form { margin: 20px 0; } form .table.half > div:first-of-type { padding-right: 5px; } form .table.half > div:last-of-type { padding-left: 5px; } form label { display: block; text-align: left; margin-bottom: 10px; } form input[type=text], form input[type=email], form input[type=tel], form input[type=number], form input[type=date], form input[type=submit], form textarea { font-family: 'Arimo',sans-serif; font-size: 14px; } form input[type=text], form input[type=email], form input[type=tel], form input[type=number], form input[type=date], form textarea { width: calc(100% - 40px); background-color: #fff; padding: 0 20px; margin-bottom: 10px; border: 1px solid #ddd; } form input[type=text], form input[type=email], form input[type=tel], form input[type=number], form input[type=date], form select { height: 40px; } form textarea { height: 150px; padding: 20px; } form input[type="checkbox"] { display: inline-block; width: auto; margin: 0 10px 0 0; padding: 0; } form input[type=submit] { width: 200px; background: #0070B3; color: #fff; font-weight: bold; padding: 10px 0; border: none; border-radius: 5px; } form input[type=submit]:hover { cursor: pointer; } #quote .table { margin-bottom: 25px; } #quick { text-align: left; width: 95% } #quick input[type=submit] { font-size: 15px; background-color: #f6f6f6; color: #4e555b; } #policy .accordion-section-content, #policy h4 { padding-left: 10px; padding-right: 10px } #policy details { margin: unset } @media(max-width:999px) { .featured a { flex: 1 1 250px; padding: 20px 10px; } .featuremain h2 span { display: block } .testimonials .carousel { width: 99% !important; left: 0; } .testimonials .pager { display: none; } .logo span{font-size:20px} } @media(max-width:767px) { .logo, .top { display: block; width: auto; text-align: center; } .logo img, .logo span { float: none; margin: 12px auto; max-width: 100%; } header .grid { grid-template-columns: 1fr } .header_partner { margin: auto } .header_partner p,.header_partner p strong { text-align: center} .logo span {text-align: center } .solutions.grid { grid-template-columns: 1fr 1fr } .solutions.grid li:nth-of-type(7) { display: none; } .featuremain h2 span { display: inline } .testimonials .carousel { padding: 0 10px; } .hippa_iso {display: flex; margin:0 auto} .isologo {margin-left: 0px;} } @media(max-width:700px) { .featuremain h2 span { display: block } .featuremain .grid.fourth, .featuremain .grid.third { grid-template-columns: 1fr; } .team .grid.third {display:block;} } @media(max-width:600px) { nav a{font-size:15px} .why > div, .show > div, .what > div, .ogsql > div.home-image, .blog > div { display: block; width: auto; } .blog.home .post { grid-template-columns: 1fr; grid-template-areas: "img" "title" "p" "btn" } .postThumbnail { height: 300px; float: none; margin: 0; width: calc(100% + 20px); margin-left: -10px; overflow: hidden } .who h2 { height: 64px; } .who div:first-of-type h2 { line-height: 64px; } .banner .home h1 { padding-top: 40px; } .what #quick { width: 100%; } footer ul { display: inline-block; vertical-align: top; width: 48%; } footer ul.social { display: block; width: auto } .grid.half, header .grid { grid-template-columns: 1fr } .header_partner { display: block; } .post > .imgRight, section > .imgRight { float: none; margin: 12px auto; max-width: calc(100% + 20px); margin-left: -10px; } section .blogs .postThumbnail { float: none; margin: 0; max-width: calc(100% + 20px); width: auto; margin: 0 -10px; height: 250px } .mark, .copy { text-align: center } } @media(max-width:500px) { .blog h2, .blog p, .what #quick, .logo img, .logo span, footer .halfCol { text-align: center; } .cycle-next, .cycle-prev { display: none; } .banner .home h1, .cycle-slideshow p { padding-left: 15px; padding-right: 15px } .who { padding: 20px 0 30px } .who div:first-of-type h2, .who h2 { height: auto; line-height: normal; } .who .line:before { display: block; position: relative; width: 90%; height: 1px; margin: 30px auto; } .banner .home h1 { width: auto; } .bg-dark div.who > div { display: block; width: auto; padding: 0 0 20px } .show h2, .show p, .what h2, .what p, .ogsql h2, .ogsql p { text-align: center; } .what span.button, .ogsql span.button { display: inline-block; } h3 + .imgRight.mw40, section > .imgRight { float: none; margin: 0 auto; max-width: 100%; } .halfCol { display: block; width: auto; padding: 0 2%; } .halfCol.line:before { display: none; } section, .pad { padding-left: 12px; padding-right: 12px } footer .halfCol { margin: 10px auto; } .solutions.grid { grid-template-columns: 1fr } .featuremain h2 span { display: block } .featuremain .grid.third { grid-template-columns: 1fr; } } @media(max-width:400px) { .banner .home h1 { font-size: 32px; } .halfCol.copy, .halfCol.mark { display: block; width: auto; text-align: center; padding: 0 2%; } footer .wrap { padding-bottom: 0; } .banner .button { margin: 30px 0 } .m365 img { width: 170px; height: 28px } .featuremain h2 span { display: inline } .links ul{display:block;width:auto} .links li,.links h3{text-align:center} }