img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { min-width: 320px; font-family: 'Montserrat', Verdana, Geneva, Tahoma, sans-serif, sans-serif; font-size: 15px; background-color: #35478c; color: #4d4d4d; line-height: 1.6; text-align: center; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } body, nav ul { padding: 0; margin: 0; } section ul, section ol, footer ul { padding: 0; } img, iframe { max-width: 100%; display: block; margin: 0 auto; } iframe { aspect-ratio: 16 / 9 auto;width: 100%; } a img, iframe { border: none; } a, nav a:hover, .hero p a:hover, .solutions a:hover h3, footer a:hover, .orange { text-decoration: none; color: #f07f4a; transition: all 0.3s ease; } a:hover { text-decoration: underline; transition: all 0.3s ease; } .hero a:hover, .solutions a:hover, .cta a:hover { text-decoration: none; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 40px 0; } .imgLeft, .imgRight { max-width: 40%; } .imgLeft { float: left; margin: 10px 4% 1% 1%; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 10px 1% 1% 4%; } .clear { clear: both; } .hide { display: none; } .center { text-align: center; } .wrap { max-width: 1020px; display: block; margin: 0 auto; position: relative; } .bg-light {background-color: #3a4e99; padding: 20px; color:#eee; text-align: center; margin-bottom: 15px; margin-top: 15px;} .table { display: table; width: 100%; } .table > div { display: table-cell; vertical-align: top; } .table.mid > div { vertical-align: middle } .table .middle > div, .table.partners > div, footer .table.third > div { vertical-align: middle; } nav li, .hero a, footer .table.third li { display: inline-block; } nav li li {display: grid;} .hero a, .hero a:hover, .secure h2, .cta p, .solutions h3, .solutions p, .solutions a, footer, footer a { color: #fff; } .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: 33%; } .table.third > div:nth-of-type(1) { padding-right: 2%; } .table.third > div:nth-of-type(2) { padding: 0 1%; } .table.third > div:nth-of-type(3) { padding-left: 2%; } .table.quad > div { width: 25%; } .grid, .articles .posts { display: grid; grid-gap: 20px } .grid.half { grid-template-columns: repeat(2,1fr) } .grid.third { grid-template-columns: repeat(3,1fr) } .grid.twothird { grid-template-columns: 400px 1fr; } .articles .posts { grid-template-columns: 1fr 1fr } .articles .post h3, .articles .post p { padding: 0 20px } .articles .post h3 { grid-area: h3; margin-top: 1em } .articles .post .postThumbnail { grid-area: img; } .articles .post img { border-bottom: 1px solid #eee } .articles .post p:nth-of-type(2) { grid-area: p } .articles .post p:nth-of-type(3) { grid-area: link } .articles .post p:nth-of-type(1), .articles .posttags, .articles .postcats { display: none } .articles .post { display: grid; grid-template-columns: 1fr; grid-template-areas: "img" "h3" "p" "link"; border: 1px solid #eee } .mid { vertical-align: middle; align-items: center; align-content: center } .nowrap, a[href^=tel] { white-space: nowrap } .btn { display: inline-block; background-color: #f07f4a; color: #fff; padding: 14px 50px; border-radius: 3px; } .container { background-color: #fff; } header { padding: 20px 0; } header .grid { grid-template-columns: 400px 1fr; grid-gap: 0 40px } nav { font-weight: bold; text-align: right; } nav a { color: #4d4d4d; padding: 4px; margin: 4px; display: block; } nav > ul { position: relative; } nav ul ul { display: none; background-color: #f5f5f5; position: absolute; top: 30px; } nav li:hover > ul { display: block; } .hero { background-color: #333 } .hero, .testimonials .comment { height: 600px; position: relative; overflow: hidden; font-weight: bold; } .hero .wrap, .banner .wrap, .testimonials .comment > div { top: 50%; transform: translateY(-50%); } .hero article, .banner { display: block; width: 100%; height: 100%; background-size: cover; background-position: 50% 60%; } .hero h1, .hero p, .banner h1, .banner p { text-align: center; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5); } .hero h1, .banner h1 { line-height: 1.25 } .hero .wrap, .articles h2 { padding: 0 10px; } .hero h1, .banner h1, .banner .fakeh1, .blogintro h1, .blogs h1 { font-size: 36px; margin-top: 0; } .fakeh1 { font-weight: bold } .hero h1 span { display: block; } .hero p, .banner p { font-size: 18px; } .hero p {width:65%; margin:0 auto;} .hero p a { margin: 0 10px; } .hero .btns { font-size: 0 } .hero .btn { width: 180px; font-size: 16px; padding: 15px 10px; margin: 40px 5px 0; border-radius: 3px; } .hero a.con { background-color: #35478c; } .hero a.con:hover { background-color: #3a4e99; } .hero a.dis { background-color: #f07f4a; } .hero a.rem { width: 390px; display: block; margin: 10px auto; background-color: #5A8C27 } .hero a.rem:hover { background-color: #6ba62e } .hero a.dis:hover, form input[type=submit]:hover, .btn:hover { text-decoration: none; background-color: #fc864e; } .overlay { height: 100%; background-color: rgba(0,0,0,0.1); } .testimonials .hero { background-color: #f5f5f5; margin-top: 40px; padding: 40px 0; } .testimonials .comment { padding: 40px 0; } .testimonials .comment > div { font-weight: 400; padding: 0 100px; position: relative; } .testimonials .cycle-prev { left: 0; background-image: url(/images-design/arrow-invert-prev.png); } .testimonials .cycle-next { right: 0; background-image: url(/images-design/arrow-invert-next.png); } .testimonials h2 { line-height: 1.4; margin-top: 0; } .testimonials .imgRight { max-width: 100%; border-radius: 100%; } .testimonials .imgLeft { max-width: 100%; border-radius: 100%; } .testimonials .rolys { margin-top: 0; } .testimonials .ntround { border-radius: 0; } .testimonials p { font-size: 16px; text-align: left; color: #4d4d4d; text-shadow: none; } .testimonials ul { margin-top: 40px; } .testimonials li { margin: 5px 0; } .bgimg { position: relative } .bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover } .banner { height: 250px; background-image: url(/images-design/banner.jpg); } .banner h1 { font-size: 36px; } .speak, .reach,.reachleft { font-size: 16px; font-weight: 400; color: #fff; position: absolute; } .speak, .reach em, .reachlefttwo em { background-color: #35478c; } .speak { padding: 10px 20px 10px 15px; border-radius: 50px 0 0 50px; top: 10px; left: 10px; } .speak span, .reach em, .reach span { display: inline-block; } .speak span, .reach span { vertical-align: middle; color: #fc864e; padding: 0 5px; border: 1px solid #fff; border-radius: 50px; } .speak span { margin-right: 5px; } .reach span { margin-left: 5px; } .reach { max-width: 200px; background-color: #f07f4a; padding: 40px 20px; bottom: 10px; right: 10px; } .reach strong { display: block; font-size: 18px; } .reach em { font-style: normal; padding: 10px 25px 10px 30px; margin-top: 20px; border-radius: 0 50px 50px 0; } .speak:hover, .reach:hover em { background-color: #3a4e99; } .reachTwo, .reachlefttwo { font-size: 16px; font-weight: 400; color: #fff; position: absolute; } .reachTwo em, .reachleft em, .reachlefttwo em { background-color: #35478c; } .reachTwo em, .reachTwo span, .reachlefttwo span { display: inline-block; } .reachTwo span, .reachlefttwo span, .reachleft span:not(.green, .blue) { vertical-align: middle; color: #fc864e; padding: 0 5px; border: 1px solid #fff; border-radius: 50px; } .reachTwo span, .reachlefttwo span, .reachleft span:not(.green, .blue) { margin-left: 5px; } .reachTwo { max-width: 200px; background-color: #f07f4a; padding: 40px 20px; bottom: 250px; right: 10px; } .reachTwo strong { display: block; font-size: 18px; } .reachTwo em, .reachlefttwo em, .reachleft em { font-style: normal; padding: 10px 25px 10px 30px; margin-top: 20px; border-radius: 0 50px 50px 0; } .reachlefttwo a, .reachleft a { margin-top: 5px } .reachTwo:hover em, .reachlefttwo:hover em, .reachleft em:hover { background-color: #3a4e99; } .reachleft { max-width: 200px; background-color: #f07f4a; padding: 40px 20px; bottom: 10px; left: 10px; } .reachlefttwo { max-width: 200px; background-color: #f07f4a; padding: 40px 20px; bottom: 250px; left: 10px; } .green { color: green } .blue { color: blue } .intro { padding: 10px; } .fadeIn { -webkit-animation: animat_show 0.8s; animation: animat_show 0.8s; visibility: visible !important; } .secure h2 { background-color: #35478c; } .secure { margin-bottom: 70px; } .secure .table.quad > div { padding: 0 3%; } .secure h2, .secure h3, .secure p { text-align: center; } .secure h2 { font-size: 30px; padding: 20px 0; margin: 0 0 50px 0; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } .secure h2:after { content: ""; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 25px solid #35478c; position: absolute; top: 85px; left: 50%; transform: translateX(-50%); } .secure h3 em { display: block; font-size: 48px; font-style: normal; color: #35478c; margin-bottom: 0; } .secure h3 { font-size: 18px; color: #4d4d4d; } .solutions { padding-bottom: 50px; background-image: linear-gradient( #fff 5%, #35478c 5% ); text-align: center } .solutions .grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(4,1fr); } .solutions a { display: block; margin: 20px 0; } .solutions h2, .solutions h3, .solutions p { text-align: center; } .solutions h2 { max-width: 600px; font-size: 30px; background-color: #fff; color: #35478c; margin: 20px auto; padding: 10px 20px; border: 1px solid #35478c; border-radius: 5px; display: block } .solutions h3 { font-size: 16px; margin: 20px 0 0; } .solutions p { width: 60%; margin: 40px auto; } .homepad { padding: 50px 10px 30px; } .table.homepad { width: calc(100% - 20px) } .cta { font-size: 18px; line-height: 1.2; background-color: #111; padding: 40px 10px; } .cta .table > div:first-of-type { width: 70%; } .cta .table > div:last-of-type { width: 30%; text-align: right; } .cta h2 { font-size: 30px; color: #f07f4a; margin: 15px 0; } .cta a { color: #fff; padding: 10px 30px 10px 40px; border: 1px solid #35478c; border-radius: 5px; } .cta a:hover { border-color: #fff; } .cta span { font-size: 32px; vertical-align: middle; color: #f07f4a; } .table.partners > div:first-of-type { width: 35%; padding-right: 2%; } .partners h2 { font-size: 42px; } .partners a { display: inline-block; vertical-align: top; width: calc(20% - 16px); height: 150px; margin: 5px; border: 1px solid #ddd; background-repeat: no-repeat; background-position: center; background-size: 90% } .homepad.partners a { width: calc(100%/3 - 16px) } .partners img { display: block; object-fit: contain; object-position: center } .partners a:hover { background-color: #fc864e } .partners .brightmetrics { background-image: url(/images-content/logos/brightmetrics.png) } .partners .atomic8ball { background-image: url(/images-content/logos/atomic8ball.png) } .partners .atomic8ball:hover { background-image: url(/images-content/logos/atomic8ball-white.png) } .partners .avst { background-image: url(/images-content/logos/avst.png) } .partners .avst:hover { background-image: url(/images-content/logos/avst-white.png) } .partners .dell { background-image: url(/images-content/logos/dell.png) } .partners .dell:hover { background-image: url(/images-content/logos/dell-white.png) } .partners .fortinet { background-image: url(/images-content/logos/fortinet.png) } .partners .fortinet:hover { background-image: url(/images-content/logos/fortinet-white.png) } .partners .hp { background-image: url(/images-content/logos/hp.png) } .partners .hp:hover { background-image: url(/images-content/logos/hp-white.png) } .partners .idemia { background-image: url(/images-content/logos/idemia.png) } .partners .idemia:hover { background-image: url(/images-content/logos/idemia-white.png) } .partners .sentinelone { background-image: url(/images-content/logos/sentinelone.png) } .partners .sentinelone:hover { background-image: url(/images-content/logos/sentinelone.png) } .partners .intrado { background-image: url(/images-content/logos/intrado.png) } .partners .intrado:hover { background-image: url(/images-content/logos/intrado-white.png) } .partners .lifevac { background-image: url(/images-content/logos/lifevac.png) } .partners .lifevac:hover { background-image: url(/images-content/logos/lifevac-white.png) } .partners .megaport { background-image: url(/images-content/logos/megaport.png) } .partners .megaport:hover { background-image: url(/images-content/logos/megaport-white.png) } .partners .microsoft { background-image: url(/images-content/logos/microsoft.png) } .partners .microsoft:hover { background-image: url(/images-content/logos/microsoft-white.png) } .partners .mitel { background-image: url(/images-content/logos/mitel.png) } .partners .mitel:hover { background-image: url(/images-content/logos/mitel-white.png) } .partners .netgear { background-image: url(/images-content/logos/netgear.png) } .partners .netgear:hover { background-image: url(/images-content/logos/netgear-white.png) } .partners .ruckus { background-image: url(/images-content/logos/ruckus.png) } .partners .ruckus:hover { background-image: url(/images-content/logos/ruckus-white.png) } .partners .safezone { background-image: url(/images-content/logos/safezone.png) } .partners .safezone:hover { background-image: url(/images-content/logos/safezone-white.png) } .partners .sonicwall { background-image: url(/images-content/logos/sonicwall.png) } .partners .sonicwall:hover { background-image: url(/images-content/logos/sonicwall-white.png) } .partners .sophos { background-image: url(/images-content/logos/sophos.png) } .partners .sophos:hover { background-image: url(/images-content/logos/sophos-white.png) } .partners .switch { background-image: url(/images-content/logos/switch.png) } .partners .switch:hover { background-image: url(/images-content/logos/switch-white.png) } .partners .synapps { background-image: url(/images-content/logos/synapps.png) } .partners .synapps:hover { background-image: url(/images-content/logos/synapps-white.png) } .partners .techus { background-image: url(/images-content/logos/techus.png) } .partners .techus:hover { background-image: url(/images-content/logos/techus-white.png) } .partners .veeam { background-image: url(/images-content/logos/veeam.png) } .partners .veeam:hover { background-image: url(/images-content/logos/veeam-white.png) } .partners .velo { background-image: url(/images-content/logos/velocloud.png) } .partners .velo:hover { background-image: url(/images-content/logos/velocloud-white.png) } .partners .vmware { background-image: url(/images-content/logos/vmware.png) } .partners .vmware:hover { background-image: url(/images-content/logos/vmware-white.png) } .partners .zadara { background-image: url(/images-content/logos/zadara.png) } .partners .zadara:hover { background-image: url(/images-content/logos/zadara-white.png) } .partners .zerto { background-image: url(/images-content/logos/zerto.png) } .partners .zerto:hover { background-image: url(/images-content/logos/zerto-white.png) } section { padding: 20px 10px 40px; } section h2, section h3, section h4, section h5, .blogintro h1 { color: #35478c; } section h2 a, section h2 a:hover { color: #35478c; } section h2 { font-size: 24px; } section h2, section h3 { margin-top: 40px; } section h3 { font-size: 18px; } section h4 { font-size: 16px; } section h5 { font-size: 14px; } section ul { margin-left: 20px; } section li { margin-bottom: 10px; } .nolist { margin-left: 0; } .nolist li { list-style: none; } .table.third.locations:first-of-type { margin-bottom: 30px; } .locations ul { list-style: none; margin-left: 0; } table.cloud { width: 100%; border-collapse: collapse; } table.cloud tr:nth-of-type(odd) { background-color: #fafafa; } table.cloud th { background-color: #f07f4a; color: #fff; } table.cloud th:nth-of-type(2), table.cloud th:nth-of-type(3) { width: 20%; } table.cloud th:nth-of-type(2), table.cloud th:nth-of-type(3), table.cloud td:nth-of-type(2), table.cloud td:nth-of-type(3), .blogintro h1 { text-align: center; } table.cloud td:nth-of-type(2), table.cloud td:nth-of-type(3) { font-size: 20px; color: #35478c; } table.cloud th, table.cloud td { border: 1px solid #eee; } table.cloud th { padding: 10px 20px; } table.cloud td { padding: 5px 20px; } .table.levels { margin-top: 40px; } .table.levels h3 { text-align: center; margin-top: 15px; } .mitelvoip img { display: block; margin: 1em auto 0 } .pr h6 { display: none; } .landing { grid-template-columns: 1fr 300px; grid-gap: 0 40px } .landing > div:first-of-type { padding-bottom: 40px; } .landing > div:first-of-type h3 { margin: 20px 0; } .landing iframe { min-height: 430px; line-height: 2 !important; } .landing > div:last-of-type { padding: 30px 0; border: 1px solid #eee; } .landing > div:last-of-type h3 { margin: 0 20px; } .guide { padding: 40px 0; margin-top: 50px; } .guide .grid { grid-template-columns: 400px 1fr; grid-gap: 0 20px } .guide h2, .guide p { padding-left: 20px; } .guide h2 { margin-top: 0 } .guide img{box-shadow: 0 0 10px rgba(0,0,0,.1);} 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 input[type=submit], form select, form textarea { font-family: 'Montserrat', sans-serif; font-size: 14px; display: block } form input[type=text], form input[type=email], form input[type=tel], form select, form textarea { background-color: #f5f5f5; padding: 0 20px; margin-bottom: 15px; border: none; } form input[type=text], form input[type=email], form input[type=tel], form textarea { width: calc(100% - 40px); } form input[type=text], form input[type=email], form input[type=tel], form select { height: 50px; } form select { width: 100%; } form textarea { height: 150px; padding: 20px; } form input[type=submit] { font-weight: bold; background-color: #f07f4a; color: #fff; padding: 16px 50px; border: none; border-radius: 3px; } form input[type=submit]:hover, .btn:hover { cursor: pointer; color: #fff; transition: all 0.3s ease; } #consult textarea, #cyber textarea { height: 140px; } footer .wrap { padding: 30px 0 20px; } footer h3 { font-size: 18px; } footer ul { list-style: none; } footer li { margin-bottom: 5px; } footer hr { margin: 20px 0; } footer .table > div { padding: 0 10px !important } footer .table.quad > div:last-of-type ul { margin-bottom: 30px; } footer .table.half > div { vertical-align: middle; } footer .table.half > div:last-of-type p { text-align: right; } .a8bmark img { display: inline-block } .red { color: red; } .safezone-heading { text-align: center; } .idemia-heading { text-align: center; } .idemia-vid iframe { padding-top: 20px; } @media(max-width:999px) { nav ul li:first-of-type { display: none } .partners a { width: calc(25% - 16px); height: 20vw } .homepad.partners a { width: calc(50% - 16px) } .reach, .reachTwo, .reachleft, .reachlefttwo { display: none !important; } } @media(max-width:767px) { header .grid { grid-template-columns: 1fr } header .grid > a { margin: 0 auto 10px } nav ul { text-align: center } footer .table.quad > div, .table.homepad.partners > div { display: block; width: auto; padding: 0 !important } .homepad.partners a { width: calc(33% - 16px) } .cta .table > div, .cta h2, .cta p { text-align: center !important } .cta .table > div { display: block !important; width: auto !important; } .cta .imgLeft { float: unset; margin: 0 auto; } footer h3 { padding: 0 10px } footer ul { text-align: left } footer .table.quad li { display: inline-block; background-color: #f07f4a; padding: 5px 15px; border-radius: 10px; margin: 10px; } .testimonials .hero, .testimonials .comment { height: auto; } .testimonials .comment > div { top: unset; transform: none; } form .grid.half { grid-template-columns: 1fr } form .grid.third { grid-template-columns: 1fr } } @media(max-width:700px) { .solutions .grid { grid-template-columns: repeat(3,1fr); } .articles .posts { grid-template-columns: 1fr } .articles .post { grid-template-areas: "h3" "img" "p" "link"; border-style: solid none } .articles .post h3, .articles .post p { padding: 0 10px } .solutions h3 { margin: 1em 0 } .solutions h2 { margin: 20px; display: inline-block; width: calc(90% - 82px) } .grid.twothird { grid-template-columns: 1fr; } } @media(max-width:600px) { .partners a { width: calc(33% - 16px); height: 30vw } .testimonials .comment > div { padding: 0 50px; } } @media(max-width:500px) { section > .wrap > .imgRight { display: block; float: none; margin: 1em auto; max-width: 100% } .table.half > div, .table.third > div { display: block; width: auto; padding: 0 !important } input[type=submit] { width: 100% } footer .table.half p { text-align: center !important; padding: 0 10px } .solutions .grid { grid-template-columns: repeat(2,1fr); } .solutions h3 span { display: block } .hero a.btn { display: block; margin: 10px 20px; width: auto; } .hero { height: auto; } .hero article { padding: 50px 0 } .hero .wrap { top: auto; transform: unset } .hero h1 { margin-top: 60px; } .testimonials .imgRight { float: none; margin: 0 auto; } nav ul { display: grid; grid-template-columns: 1fr 1fr } nav a { text-align: center } .intro h2 { font-size: 22px } .grid.half { grid-template-columns: 1fr } } @media(max-width:400px) { .partners a, .homepad.partners a { width: calc(50% - 16px) } .solutions h2 { width: calc(100% - 82px) } .hero p { font-size: 16px; margin: 0; } .hero article span.nowrap { white-space: normal } .testimonials .comment > div { padding: 0 20px; } }