img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root { --main-bg: #fff; --light: #f5f5f5; --light-comp: #333; --dark: #333; --dark-comp: #fff; --primary: #1c75bc; --primary-comp: #fff; --secondary: #228de2; --secondary-comp: #fff; --accent: #1ba2b6; --dark-accent: #1ba2b6; } *:focus-visible { outline-width: 1px; outline-offset: 4px; } html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-size: 18px; line-height: 1.5; text-align: center; font-family: "Roboto", sans-serif; } body, .top a, footer h3, footer a, .featured .grid > a:nth-of-type(even) h3, .articles h3 a, .emphasis a:hover, .industries .featured .grid > a:nth-of-type(even) h2 { color: var(--light-comp); } body, header ul, nav ul, footer ul, .hero h1, .hero p { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote, footer .social, .subfoot { text-align: left; } h1, h2, h3, h4, h5, h6, .articles h3 a:hover { color: var(--primary); } h1, h2, h3, h4, h5, h6, .hero strong { text-transform: uppercase; line-height: 1.1; font-family: "Oswald", sans-serif; font-weight: 500; } img, iframe, svg { max-width: 100%; height: auto; display: block; margin: 0 auto } iframe { aspect-ratio: auto 16 / 9; width: 100%; margin: 1em auto; } .fullwidth { width: 100%; } img{object-position:50% 35%} a img, iframe { border: none; } a { transition: ease-in-out .3s; } a, header a:hover, nav a:hover, footer a:hover, form input[type=submit]:hover, .btn:hover, .featured .grid > a:hover, .articles h3 a:hover, .emphasis a:hover { text-decoration: none; } a, .top a:hover, footer a:hover { color: var(--secondary); } a:hover { text-decoration: underline; } footer .bg-primary a:hover { color: var(--primary-comp); background-color: var(--secondary); outline: 8px solid var(--secondary); border-radius: 5px } hr { border-width: 2px; border-color: #eee; border-style: none none solid; margin: 40px 0; } .imgLeft, .imgRight, .featured .grid > a, .articles .postThumbnail, .team img { border-radius: 5px; } .imgLeft, .imgRight { max-width: 55%; } .imgLeft { float: left; margin: 10px 4% 2% 0; } .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, .premier h2, .premier p, .team h3, .emphasis h2 { text-align: center; } .wrap { display: block; max-width: 1080px; margin: 0 auto; position: relative; } .bg-dark, .bg-dark a, .bg-primary, .bg-primary a, nav a, .hero h1, .hero p, footer .grid.fourth > div:first-of-type h3, .featured .grid > a:nth-of-type(odd) h3, .featured .grid > a:nth-of-type(odd), .team h3, .emphasis h2, .industries .featured .grid > a:nth-of-type(odd) h2 { color: var(--dark-comp); } .bg-dark { background-color: var(--dark); } .bg-primary, nav, .featured .grid > a:nth-of-type(odd) { background-color: var(--primary); } .bg-secondary { background-color: var(--secondary); } .bg-light, .featured .grid > a:nth-of-type(even) { background-color: var(--light); color: var(--light-comp); } .mid { align-items: center; align-self: center; } .grid { display: grid; grid-gap: 10px 40px; } .grid.half { grid-template-columns: repeat(2,1fr); } .grid.third { grid-template-columns: repeat(3,1fr); } .grid.fourth { grid-template-columns: repeat(4,1fr); } .subfoot .grid, .featured .grid, .team .grid { grid-gap: 10px; } :is(header, nav) a{display:block;} header a{margin:5px;padding:5px} header a[href="/"]{position:relative;z-index:999} header .grid { grid-template-columns: 220px 1fr; grid-gap:0} header img { width:100%; max-width:220px} header svg { stroke: #777 } header *{line-height:1} header .social{margin-top:-5px} header .social a:hover svg { stroke: var(--secondary) } .top ul, nav ul { text-align: right; } .top li, nav li, footer .social li { display: inline-block; } nav { line-height: 1; margin-top: -40px; } nav a{margin:5px 5px 5px 20px;padding:8px} nav a.nav-cta { background-color: #fff; color: #1c75bc; border-radius: 5px; padding: 8px 16px; font-weight: 500; } nav a.nav-cta:hover { background-color: #f5f5f5; } .portal a { color: #1c75bc; } .bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0 } .hero { background-color: var(--dark) } .hero{ background-size: cover; background-position: center; position: relative; } .hero:before { content: ""; width: 100%; height: 100%; background-image: linear-gradient(transparent,rgba(0,0,0,.5)); position: absolute; top: 0; left: 0; inset: 0; z-index: 1; } .bgimg > img { object-position: 50% 27%; } .hero > .wrap { top: 80%; transform: translateY(-80%); z-index: 1; } .hero h1, .hero p, .team h3 { padding: 0 10px; text-shadow: 2px 2px 2px rgba(0,0,0,.6), -1px -1px 1px rgba(0,0,0,.2); } .hero h1, .hero strong, .home h2 { font-size: min(13vw, 48px); } .hero p { text-align: right; } .hero strong { padding-bottom: 10px; } .hero .btn { text-shadow: none; } .hero { height: 300px; border-bottom: 10px solid var(--primary) } .hero > .wrap { top: 50%; transform: translateY(-50%) } .hero p { max-width: 500px; text-align: left; margin: 20px 0 } .dtc { display: none } .featured, .premier { padding: 40px 0 60px; } .featured .grid { padding: 20px 0;overflow:hidden } .featured .grid > a, .industries .featured .grid > a { text-align: left; padding: 30px clamp(20px, 3vw, 35px); } .featured .grid h3, .featured .grid p, .industries .featured .grid p { margin: 10px 0; } .featured svg { margin-left: 0 } .articles { padding: 40px 10px 30px; } .articles h2 { margin-bottom: 0; } .articles .blogs { display: block; } .articles .posttags, .articles .postcats { display: none; } .articles .post { padding: 20px 0; border-color: #eee; } .articles .postThumbnail { margin: -40px 0 40px 40px; } .comments, .commitment, .premier { padding: 60px 10px 80px; } .comments figure, .premier p { max-width: 900px; } .comments figure { font-size: 30px; margin: 20px auto; } svg.icon-tabler-star { display: inline-block } .commitment{position:relative} .commitment img{opacity:.2} .commitment p { max-width: 600px; } .premier p { margin: 30px auto; } form { margin: 40px 0; } form .grid { grid-gap: 0 10px; } form label, .hero strong, .team h3 span, .emphasis a { display: block; } form :is(input, textarea, select) { display: block; width: 100%; box-sizing: border-box; padding: 10px; border-radius: 5px; border: 1px solid var(--light); background-color: var(--light); font-size: 20px; font-family: 'Univers', sans-serif; margin-bottom: 10px; } form input, form textarea, form select, ::placeholder { color: #999; } form textarea { height: 200px } form input[type=option] {color: #000 !important;} form input[type=submit], .btn { display: inline-block; min-width: 120px; text-align: center; line-height: 1; background-color: var(--primary); color: var(--primary-comp); padding: 10px 40px; margin: 10px 0; border: none; transition: ease-in-out .3s; width: auto } form input[type=submit]:hover, .btn:hover { cursor: pointer; background-color: var(--secondary); color: var(--primary-comp); } form input[type=submit] { min-width: 250px; } footer .wrap { padding: 10px 10px; } footer .grid{grid-gap:10px clamp(10px, 2vw, 30px)} footer .grid.fourth { grid-template-columns: 250px 1fr 1fr 1fr; } footer .grid.fourth > div:nth-of-type(1) { margin: -60px 0 20px; padding: 20px clamp(20px, 3vw, 30px); } footer .grid.fourth > div:nth-of-type(2){padding-left:10px} footer .grid.fourth h3 { margin-bottom: 0; } footer .grid.fourth ul { margin: 30px 0; } footer .social li{margin:0} footer .social a {margin:4px;padding:4px;display:block; outline-color: var(--secondary) } footer .social svg { stroke: var(--primary-comp) } .subfoot { background-color: var(--primary-comp); border-top: 10px solid var(--primary); } .subfoot .wrap { padding: 40px 10px; } .subfoot .grid { grid-template-columns: 1fr 150px; } .ccpaNotice { text-align: center !important; } main { padding: 40px 10px 80px; } main h1, main h2 { font-size: 40px; margin: 20px 0; } main h3, footer h3, .emphasis h2 { font-size: 34px; } main h4 { font-size: 32px; } main h5 { font-size: 28px; } main h6, .team h3 span { font-size: 24px; } main ul, main ol { padding-left: 25px; } main li, footer li { margin: 5px 0; } .nolist, footer ul, .contact ul { list-style: none; padding-left: 0; } .history { padding: 40px 0 200px 0; margin-top: 60px;position:relative } .team .grid { padding-top: 20px; } .team img { object-fit: cover; width: 100%; height: 400px; filter: grayscale(100%); } .team h3 { background-image: linear-gradient(transparent,rgba(0,0,0,.8)); padding: 26px 0; margin: 0; border-radius: 0 0 5px 5px; position: relative; top: -120px; } .emphasis { padding: 30px 10px; margin: 50px 0 60px; } .emphasis a { margin-top: 10px; } .solutions h3 { margin: 0 } .solutions .grid.half img { border-radius: 5px; } .partners .grid.third { align-items: center; justify-items: center; } .partners .grid.third img { margin: 20px; width: 100%; height: 120px; object-fit: contain; } .partners .grid.fourth { align-items: center; justify-items: center; grid-gap: 10px 60px; } .partners .grid.fourth img { margin: 0 30px; width: 100%; height: 120px; object-fit: contain; } .partners .grid.full { justify-items: center; margin-bottom: 30px; } .partners .featured-partner { width: 100%; max-width: 500px; height: auto; object-fit: contain; margin: 20px; } .testimonials { max-width: 1200px; margin: 0 auto; padding: 20px; } .testimonials h1 { margin-bottom: 40px; } .telco-solutions .grid.third > div { padding: 30px clamp(20px, 3vw, 35px); text-align: left; border-radius: 5px; background-color: var(--light); } .telco-solutions .grid.third > div:nth-of-type(odd) { background-color: var(--primary); color: var(--primary-comp); } .telco-solutions .grid.third > div:nth-of-type(odd) h3 { color: white; } .testimonials > div:not(h1) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .testimonials .testimonial-item { background-color: var(--light); padding: 25px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: left; } .testimonials .testimonial-item:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .testimonials .testimonial-item q { display: block; font-style: italic; color: var(--dark); margin-bottom: 15px; line-height: 1.6; } .testimonials .testimonial-item p { font-weight: bold; color: var(--primary); margin: 0; } .testimonials p:nth-of-type(even) { font-weight: bold; } .solutions .grid img { height: 100%; width: 100%; object-fit: cover } .solutions .grid:nth-of-type(even) img { order: 2 } .solutions .featured{padding-left:0;padding-right:0} .mitel {padding: 20px; margin:20px; margin-top: 50px;} .mitel div img {width: 350px; border-radius: 20px; box-shadow: 2px 2px 50px #333;} .right {text-align: right;} .enterprise div {padding: 12px; border-bottom: 2px solid #1c75bc;} .mitel ul li {font-weight: bold; color:#1c75bc;} .mitel ul li p {font-weight: normal; color:#333;} .before-after-container { max-width: 800px; margin: 40px auto; } .before-after-slider { position: relative; width: 100%; overflow: hidden; border-radius: 5px; cursor: ew-resize; user-select: none; overscroll-behavior: contain; touch-action: none; } .before-after-slider .before { position: relative; } .before-after-slider .before img { width: 100%; height: auto; display: block; } .before-after-img { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; } .before-after-img.after { z-index: 2; width: 50%; } .before-after-img.after img { width: 200%; height: 100%; object-fit: cover; } .slider-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: var(--primary); z-index: 4; transform: translateX(-50%); box-shadow: 0 0 10px rgba(0,0,0,.3); pointer-events: none; } .slider-handle:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: var(--primary); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--primary-comp); } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: ew-resize; z-index: 3; opacity: 0; margin: 0; padding: 0; border: none; background: none; } .slider-hint { text-align: center; margin-top: 10px; font-size: 14px; color: #999; display: none; } .rainbow-section { margin: 60px 10px; } .rainbow-bg-light { background-color: var(--light); padding: 60px 10px; margin: 40px 0; } .rainbow-cert-card { padding: 20px; background-color: #f0f4f8; border-left: 4px solid var(--primary); } .rainbow-cert-card h3 { margin-top: 0; } .rainbow-cert-card p { margin: 0; } .rainbow-cert-card p + p { margin-top: 10px; } .rainbow-benefits .grid.half > div { padding: 30px clamp(20px, 3vw, 35px); text-align: left; border-radius: 5px; background-color: var(--light); } .rainbow-benefits .grid.half > div h3 { color: var(--primary); text-transform: uppercase; } .rainbow-usecases .grid.half > div { padding: 30px clamp(20px, 3vw, 35px); text-align: left; border-radius: 5px; background-color: #ffffff; border: 2px solid #e0e0e0; } .rainbow-usecases .grid.half > div:nth-of-type(odd) { background-color: var(--primary); color: var(--primary-comp); border-color: var(--primary); } .rainbow-usecases .grid.half > div:nth-of-type(odd) h3 { color: var(--primary-comp); } .rainbow-usecases .grid.half > div:nth-of-type(odd) p { color: var(--primary-comp); } .rainbow-usecases .grid.half > div:nth-of-type(even) h3 { color: var(--primary); text-transform: uppercase; } @media(max-width:767px) { .slider-hint { display: block; } } .process-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 40px 0; } .process-gallery figure { margin: 0; } .process-gallery img { width: 100%; height: 250px; object-fit: cover; border-radius: 5px; } .process-gallery figcaption { text-align: center; margin-top: 10px; font-weight: 500; color: var(--primary); } @media(max-width:999px) { footer .grid.fourth > div:nth-of-type(2) { padding-left: 0 } footer .grid.fourth { grid-template-columns: 1fr 1fr } footer .grid.fourth :is(h3, li, .social) { text-align: center } .mobile-hide {display: none !important;} } @media(max-width:700px) { .testimonials > div:not(h1) { grid-template-columns: 1fr; } } @media(max-width:767px) { header .grid { grid-template-columns: 1fr; grid-template-areas: "logo" "social" "nav" } nav a { margin: 5px; padding: 10px 15px} .top ul, nav ul { text-align: center } nav{margin-top:0} .blogs .post p:nth-of-type(1) { display: none } body main .postThumbnail { float: none; margin: 15px 0 15px 0 !important; max-width: 100%; width: 100%; } .banner { height: auto; padding: 0 } .grid.half { grid-template-columns: 1fr; } #contact .grid, footer .grid,.featured .grid { grid-template-columns: 1fr 1fr } .solutions .grid.half img { order: unset; height: clamp(200px, 40vw, 300px); } } @media(max-width:600px) { .imgLeft, .imgRight { float: none; max-width: 100%; margin: 0 auto; } .grid.half, .grid.third, .grid.fourth { grid-template-columns: 1fr } .partners .featured-partner { border: 2px solid var(--primary); border-radius: 8px; padding: 10px; } .table > div { display: block; width: auto !important; padding: 0 !important; } } @media(max-width:500px) { nav a { text-align: center } h1,footer li { text-align: center; } .bgimg > img { object-position: 35% 27%; } .banner .main h1 { font-size: 36px; } .banner .main p { font-size: 28px } footer .wrap{padding:10px 0} footer .grid.fourth { grid-template-columns: auto !important; grid-gap: 0; } footer .grid.fourth > div:nth-of-type(1){margin:0;padding:0 10px} footer .grid.fourth > div{padding:0 10px} .subfoot .wrap { padding: 20px 10px } .subfoot .grid.mid { grid-template-columns: 1fr; } .subfoot img { margin: 0 auto; } } @media(max-width:400px){ nav a{padding:10px} }