img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { font-family: 'Poppins', Verdana, sans-serif; font-size: 16px; background-color: #2487c9; color: #4d4d4d; line-height: 1.5; text-align: center; } *:focus{outline-offset:4px} h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } body, header ul, .top ul, nav ul, .subnav, .cycle-slideshow ul, .social, .logos { padding: 0; margin: 0; } img, iframe,svg, video { max-width: 100%; display: block;margin:0 auto;height:auto } a img, iframe { border: none; } iframe { aspect-ratio: auto 16 / 9; height: auto;width:100% } iframe,.youtube{outline:1px solid #eee} a, nav a:hover, .subnav a:hover, .articles h1 a:hover { text-decoration: none; color: #2487c9; transition: ease-out .3s; } a:hover { text-decoration: underline; transition: ease-in .3s; } header a:hover, .cycle-slideshow a:hover, .featured a:hover, .solutions a:hover, .btn2:hover, .btn3:hover, footer a:hover { text-decoration: none; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 30px 0; clear: both; } .imgLeft, .imgRight { max-width: 50%; } .imgLeft { float: left; margin: 5px 4% 2% 0; } .imgCenter { display: block; margin: 40px auto 20px; } .imgRight { float: right; margin: 5px 0 2% 4%; } .clear { clear: both; } .nowrap, a[href^=tel] { white-space: nowrap; } .hide { display: none !important; } .center { text-align: center; } .container { background-color: #fff; } .wrap { max-width: 1080px; display: block; margin: 0 auto; position: relative; } .table { display: table; width: 100%; } .table > div { display: table-cell; vertical-align: top; } .table.half > div { width: 50%; } .table.half > div:first-of-type { padding-right: 2%; } .table.half > div:last-of-type { padding-left: 2%; } .table.third > div { width: calc(100% / 3); } .table.third > div:nth-of-type(1) { padding-right: 2%; } .table.third > div:nth-of-type(2) { padding-left: 1%; padding-right: 1% } .table.third > div:nth-of-type(3) { padding-left: 2%; } .table.quad > div { width: 25%; } .grid { display: grid; grid-gap: 20px } .grid.mid{align-items:center} .grid.half { grid-template-columns: repeat(2,1fr) } .grid.third { grid-template-columns: repeat(3,1fr) } header .table > div, header i, .testimonials .table > div, footer .table > div { vertical-align: middle; } .top li, nav li, .subnav li, .cycle-slideshow li, .social li, .logos li { display: inline-block; } .bgimg { position: relative } .bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0 } .icon-tabler-caret-left{display:inline-block;vertical-align:middle;} details{display:block;margin:1em 0;padding:4px} details:hover{cursor:pointer} summary{text-align:left} header { background-image: url(/images-design/bg-header.png); background-size: cover; } header img { filter: drop-shadow(-5px -10px 5px #ccc); } header .table > div:first-of-type { width: 230px; text-align: left; padding-bottom: 20px; } header .table > div:first-of-type img { margin-top: -30px; padding-left: 10px; } header .table > div:last-of-type { width: calc(100% - 230px); } header i { margin-right: 5px; } .top { font-size: 13px; background-color: #2487c9; } .top a { color: #fff; padding: 4px; margin: 4px; } .top a:hover, footer a:hover { color: #ccc; } .top ul { padding-left: 220px; } .top, nav, footer .table > div:last-of-type { text-align: right; } header a { display: block; } nav { padding-right: 10px; } nav a { color: #4d4d4d; padding: 5px; margin: 5px } nav li:last-of-type a { background-color: #355378; color: #fff; padding: 7px 35px; border-radius: 3px; margin-left: 10px; } .subnav { padding: 30px 0 10px; margin-bottom: 60px; border-bottom: 1px solid #eee; } main .subnav a { display: block; padding: 8px 24px;margin:5px;min-width:unset } .cycle-slideshow { height: 600px; position: relative; overflow: hidden; } .cycle-slideshow article, .banner { background-size: cover; background-position: center; } .cycle-slideshow article { display: block; width: 100%; height: 100%; background-blend-mode: overlay; background-color: rgba(0,0,0,.3); } .cycle-slideshow .wrap, .banner .wrap, .cta .wrap { top: 50%; transform: translateY(-50%); } .cycle-slideshow .wrap { text-align: right } .cycle-slideshow p, .cycle-slideshow a, .banner p { color: #fff; } .cycle-slideshow.main p, .cycle-slideshow ul { text-align: right; padding: 0 50px; } .cycle-slideshow p, .banner p { text-shadow: 1px 1px 3px rgba(0,0,0,.8); } .cycle-slideshow.main p { max-width: 700px; display: inline-block; height: 150px } .cycle-slideshow ul { top: 40px; } .cycle-slideshow strong, .banner strong { display: block; font-size: 24px; margin-bottom: 20px; } .cycle-slideshow li { font-size: 14px; margin: 10px 5px; } .cycle-slideshow a { display: inline-block; width: 200px; text-align: center; padding: 10px 0; border-radius: 3px; } .cycle-slideshow li:first-of-type a { background-color: #355378; } .cycle-slideshow li:last-of-type a { background-color: #666; } .cycle-slideshow li:first-of-type a:hover { background-color: #406591; } .cycle-slideshow li:last-of-type a:hover { background-color: #808080; } .cycle-prev, .cycle-next { position: absolute; top: 0; width: 50px; z-index: 888; height: 100%; cursor: pointer; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0; } .cycle-prev { left: 0; background-image: url(/images-design/arrow-prev.png); } .cycle-next { right: 0; background-image: url(/images-design/arrow-next.png); } .cycle-prev:hover, .cycle-next:hover { opacity: .3; transition: all .3s linear .01s; } .slide1 { background-image: url(/images-design/slides/it-management.jpg); } .slide2 { background-image: url(/images-design/slides/surveillance.jpg); } .slide3 { background-image: url(/images-design/slides/cloud-computing.jpg); } .banner { height: 400px;background-color:#999 } .banner > img { filter: brightness(0.7); object-position: center } .banner p { max-width: 700px; text-align: center; margin: 0 auto; padding: 0 10px } .bg, .news { background-size: cover; } .bg { background-image: url(/images-design/bg-about.jpg); background-position: top; } .intro { padding: 80px 0 60px; } .intro h1, .intro p, .featured h3, .featured p, .questions h2, .questions p, .solutions h2, .solutions p { text-align: center; } .intro h1, .featured h2, .press h2, .news h2, .testimonials h2, .questions h2 { font-size: 24px; margin-top: 15px; } .intro h1, .featured h2, .news h2, .news h3 a { color: #4d4d4d; } .intro p { width: 80%; margin: 20px auto; } .intro .btn { background-color: #666; margin-top: 15px; } .intro .btn:hover { background-color: #808080; } .intro span { color: #355378; } .featured { padding: 20px 0 80px; } .featured { padding: 20px 0 80px; } .featured h2 { margin: 0 10px 40px; } .featured h2:after, .press h2:after { content: ""; height: 1px; position: absolute; top: 20px; right: 10px; } .featured h2:after { width: 70%; background-color: rgba(0,0,0,.3); } .solutions { margin-left: -10px; width: calc(100% + 20px) } .featured.solutions { margin: 0; width: auto } .featured.solutions h2 { font-size: 24px; text-align: left; margin: 20px 0 } .solutions h3, .solutions h2, .solutions p { margin: 0; } .solutions h3, .solutions h2 { transition: ease-out .3s; } .solutions p { font-size: 14px; } .solutions a:hover h2, .solutions a:hover h3 { color: #2487c9; } .solutions p, .solutions h3 { text-align: center; } .solutions p { color: #4d4d4d } .solutions .grid { grid-gap: 10px } .solutions .grid > div { background-color: #eee; z-index: 0; position: relative } .solutions .grid img { z-index: 1 } .solutions .grid div div { background-color: #eee; z-index: 2; position: relative } .solutions a div { padding: 10px } .solutions a { display: block; background-size: cover; background-position: center } .solutions a.bgimg:nth-of-type(1) > img { object-position: 50% 75% } .featured.solutions a { padding-top: 300px; } .press, .news, .questions { padding: 40px 10px 50px; } .press { background-color: #eee } .press h2:after { width: 80%; background-color: rgba(53,83,120,.5); } .press h2 { margin: 20px 0; } .press h3, .news h3 { font-size: 18px; line-height: 1.4; } .press h3 a:hover, .news h3 a:hover { text-decoration: none; transition: ease-in .3s; } .press h3 { margin-top: 40px; } .press .table.half > div:first-of-type { padding: 0 3% 0 0; } .press .table.half > div:last-of-type { padding: 0 0 0 3%; } .press .posttags, .news .posttags, .press .postcats, .news .postcats { display: none; } .news { margin: 5px 0; } .news h2 { margin: 15px 0 0; } .news h3 { margin: 40px 0 0; } .testimonials { font-size: 14px; background-color: #c4c4a6; } .testimonials h2, .testimonials p { color: #fff; } .testimonials h2 { margin-top: -40px; } .testimonials .table > div:first-of-type { width: 200px; padding: 0 20px 0 10px; } .testimonials .table > div:last-of-type { width: calc(100% - 303px); height: 220px; padding: 0 10px 0 60px; border-left: 3px solid #fff;overflow:hidden } .testimonials .cycle-slideshow { height: 220px; } .testimonials .cycle-slideshow a { display: block; width: 100%; height: 100%; padding: 0; } .testimonials .cycle-slideshow p { width: 100%; text-align: left; line-height: 1.5; margin: 15px 0; position: relative; top: auto; right: auto; text-shadow: none; } .testimonials .cycle-prev, .testimonials .cycle-next { height: 40px; background-color: #355378; opacity: 1; position: absolute; top: 120px; padding: 0 20px; } .testimonials .cycle-prev { left: 10px; border-radius: 3px 0 0 3px; } .testimonials .cycle-next { left: 80px; border-radius: 0 3px 3px 0; } .questions { background-color: #eee; margin-top: 5px; } .questions p { margin: 20px 10px 40px; } main { padding: 40px 10px; } main h1, main h2, main h3, main h4 { color: #355378; } main h2, main h3, main h4 { margin-top: 40px; } main h1, .bigger { font-size: 24px; } main h2 { font-size: 20px; } main h3 { font-size: 18px; } main h4 { font-size: 16px; } main ul, main ol { padding-left: 25px; } main ul ul, main ul ol, main ol ol, main ol ul { margin-top: 5px; } main li { margin-bottom: 5px; } .nolist { list-style: none; padding: 0; } .btn, .btn2, .btn3,.subnav a { display: inline-block; min-width: 200px; font-size: 14px; text-align: center; color: #fff; padding: 10px 0; margin: 20px 0; border-radius: 3px; } .btn,.subnav a { background-color: #355378; } .btn2 { background-color: #666; } .btn2:hover { background-color: #808080; } .btn3 { background-color: #abab91; } .btn3:hover { background-color: #c4c4a6; } .team .table > div:first-of-type { width: 200px; } .team .table > div:last-of-type { width: calc(100% - 250px); padding-left: 50px; } .team h2 { font-size: 24px; margin-top: 50px; } .team h2, .team h3, .address h2, .address li, .address p { text-align: center; } .team h3 { color: #4d4d4d; margin-top: 10px; } .team h3 span { display: block; font-size: 16px; font-weight: normal; } .team img { width: 200px; margin-top: 25px; } .foundations { margin-bottom: 40px; } .video { width: 100%; height: 60vh; max-height: 608px; margin: 10px 0; } .solutions { padding: 30px 0 20px; } .solutions h2 { font-size: 18px; } .solutions .grid { grid-gap: 10px } .solutions .grid > div a { padding-top: 200px; display: block } .solutions .grid div:nth-of-type(1) a { background-image: url(/images-content/solution-cloud.jpg); background-position: 50% 75% } .solutions .grid div:nth-of-type(2) a { background-image: url(/images-content/solution-managed-it.jpg); } .solutions .grid div:nth-of-type(3) a { background-image: url(/images-content/solution-surveillance.jpg); } .solutions .grid div:nth-of-type(4) a { background-image: url(/images-content/solution-phone.jpg); } .solutions .grid div:nth-of-type(5) a { background-image: url(/images-content/solution-continuity.jpg); } .solutions .grid div:nth-of-type(6) a { background-image: url(/images-content/solution-communication.jpg); } .solutions .grid div:nth-of-type(7) a { background-image: url(/images-content/solution-video.jpg); } .solutions .grid div:nth-of-type(8) a { background-image: url(/images-content/solution-virtualization.jpg); } .solutions .grid div:nth-of-type(9) a { background-image: url(/images-content/solution-contact.jpg); } .solutions .grid div:nth-of-type(10) a { background-image: url(/images-content/solution-cabling.jpg); } .solutions .grid div:nth-of-type(11) a { background-image: url(/images-content/solution-connectivity.jpg); } .solutions .grid div:nth-of-type(12) a { background-image: url(/images-content/solution-technology.jpg); } .logos { margin: 50px 0 20px; } .logos li { vertical-align: middle; margin: 20px 25px; } .logos a { display: block } .resources { width: calc(50% - 1px); display: inline-block; border-collapse: collapse; border-spacing: 0; margin: 0; vertical-align: top; border-width: 1px; border-color: #eee; border-style: solid solid none; table-layout: fixed } .resources:last-of-type { margin-left: -5px } .resources th, .resources td { padding: 5px 20px; border-bottom: 1px solid #eee; font-size: 16px; min-height: 26px; height: 26px } .resources td:nth-of-type(even) { text-align: right; } .resources td:first-of-type { padding: 5px 5px 5px 20px } .resources td:last-of-type { padding: 5px 20px 5px 5px; width: 140px; font-family: verdana, sans-serif; font-size: 14px } .resources th { background-color: #f5f5f5; width: 140px } .resources tr:first-of-type th { width: 50%; } .resources .filler td { height: 63px } .time { margin-top: 40px; } .pr { list-style: none; padding: 0; } .articles .blogsidebar h3:last-of-type { margin-top: 40px; } .articles .blogsidebar ul { list-style: none; padding: 0; } .articles h2 { margin-top: 40px; } .articles h1 a, .articles h2 a { color: #355378; } .articles .post { padding: 15px 0; } .articles .post:last-of-type { border: none; } .articles li h3 { margin-top: 20px; } .address { padding: 30px 0 60px; } .address h2 { margin-top: 30px; } .address ul { list-style: none; padding: 0; margin-bottom: 40px; } .address i { margin: 0 2px; } .address > div { background-color: #eee; outline: 5px solid #fff; } 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 input[type=text], form input[type=email], form input[type=tel], form label, form input[type=file], form select, form input[type=submit], form textarea { font-family: 'Poppins', sans-serif; font-size: 14px; } form input[type=text], form input[type=email], form input[type=tel], form label, form select, form textarea { background-color: #fff; margin-bottom: 15px; padding: 0 20px; border: none; } form input[type=text], form input[type=email], form input[type=tel], form label, form textarea { width: calc(100% - 40px); } form input[type=text], form input[type=email], form input[type=tel], form select { height: 50px; } form label { display: inline-block; text-align: left; padding: 13px 20px; } form select { width: 100%; } form input[type=file] { margin-left: 10px; } form textarea { height: 150px; padding: 20px; } form input[type=submit] { min-width: 200px; background-color: #355378; color: #fff; padding: 10px 0; border: none; border-radius: 3px; transition: ease-out .3s; } form input[type=submit]:hover, nav li:last-of-type a:hover, .btn:hover,.subnav a:hover { cursor: pointer; text-decoration: none; background-color: #406591; color: #fff; transition: ease-in .3s; } #support { margin: 40px 0; } #support input, #support textarea { border: 1px solid #2487c9 } #webinar input[type=text], #webinar input[type=email], #webinar select { background-color: #f5f5f5; } #webinar input[type=submit] { width: 100%; padding: 17px 0; border-radius: 0; line-height: 1 } #survey input[type=text], #survey select, #survey textarea { background-color: #f5f5f5; } footer {clear: both} footer, footer a, footer p { color: #fff; } footer .grid{grid-template-columns:1fr 200px;padding:10px 10px 20px} footer .a8bmark img{margin:0 auto 0 0} footer a{display:block;} footer svg{margin:5px;} .policies{padding:0;display:flex;flex-wrap:wrap;list-style:none;justify-content:space-evenly} .policies li{flex:1 0 0;} .policies a { white-space: nowrap; text-align: center; padding: 5px 10px; margin: 4px; } .cta { background-image: url(); background-size: cover; background-position: center; padding: 10px } .cta .overlay { height: 400px; } .cta p { max-width: 420px; font-size: 24px; font-weight: bold; margin: 0; text-shadow: 1px 1px 1px #000,2px -1px 3px #000 } .cta .btn { font-size: 16px; font-weight: normal; margin-top: 40px; padding: 9px 0; } .pad { padding-left: 10px; padding-right: 10px } .youtube { aspect-ratio: auto 16 / 9; } .aboutimgs img { height: 100%; object-fit: cover } .banner.surveillance { background-image: url(/images-design/banners/security-camera.jpg); } .banner.cabling { background-image: url(/images-design/banners/cabling.jpg); } #catalog { display: none; } @media(max-width:999px) { .cycle-slideshow { height: 500px } .featured h2:after, .press h2:after { display: none !important; } .featured h2, .news h2 { border-bottom: 1px solid #4d4d4d } .press h2 { border-bottom: 1px solid #355378 } .top { font-size: 14px } .featured.solutions h2 { margin: 20px 10px } } @media(max-width:767px) { .resources { width: 100%; } .resources:last-of-type { border-style: none solid; margin: 0 } .resources .filler { display: none } .resources tr:first-of-type th { width: 1% } } @media(max-width:700px) { .solutions .grid { grid-template-columns: repeat(2,1fr) } .post img { margin-left: -10px; width: calc(100% + 20px); max-width: calc(100% + 20px) } .table.address > div { display: block; width: auto !important; padding: 10px 0 !important } .address h2, .address ul { margin: 10px 0 } .testimonials .cycle-slideshow .table > div:first-of-type, .testimonials .cycle-next, .testimonials .cycle-prev { display: none } .testimonials .cycle-slideshow .table > div:last-of-type { width: auto; padding: 0 10px; border: none; display: block } .testimonials .cycle-slideshow { height: auto } } @media(max-width:600px) { main .table.half > div { display: block; width: auto !important; padding: 0 !important } header .table > div { display: block; width: auto !important; padding: 0 !important } header .table > div:first-of-type img { margin: -30px auto 0; padding: 0 } header a, header ul, .featured h2, .news h2, .press h2,footer p { text-align: center } .top ul { padding: 0 } .top { padding: 10px 0 30px } header { padding: 0 0 10px } .press .btn, .press .btn3 { display: block } .cycle-slideshow p, .cycle-slideshow ul { text-align: center; height: auto } .team .table > div { display: block; width: auto !important; padding: 0 !important } .team .table > div:first-of-type { float: left; margin: 0 20px 0 0 } .logos { margin-left: -10px; width: calc(100% + 20px) } .logos li { margin: 20px 10px; width: calc(50% - 20px - 0.25em); text-align: center } .logos img { margin: 0 auto } .grid.half, footer .grid { grid-template-columns: 1fr } .aboutimgs img{width:100%;height:auto} footer .a8bmark img{margin: 0 auto} } @media(max-width:500px) { footer .table > div { display: block; width: auto !important; padding: 0 !important } footer p, footer ul, footer .table div { text-align: center !important; margin: 1em 0 } footer .table { padding: 0 } footer a img { margin: 0 auto } .imgRight, main .blogs .postThumbnail { float: none; margin: 1em 0; width: calc(100% + 20px); margin: 0 -10px; max-width: calc(100% + 20px) } .testimonials .table > div:last-of-type{height:320px} } @media(max-width:400px) { .solutions .grid { display: block } .solutions .grid > div { margin: 1em 0 } .ccpaNotice a { display: block } .ccpaNotice { text-align: center !important } .team .table > div:first-of-type { float: none; margin: 1em 0 } .team img { margin: 0 auto } .resources td { display: block } .resources td:first-of-type { padding: 5px 20px } .resources td:last-of-type { padding: 5px 20px 5px 40px; text-align: left; width: auto } }