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: #4d4d4d; --dark: #333; --dark-comp: #fff; --primary: #EE0000; --primary-comp: #fff; --secondary: #9C0E15; --secondary-comp: #fff; } body, input, textarea { font-family: 'Red Hat Display', 'Red Hat Display-fallback' }body { font-size: 1.125rem; line-height: 1.5; text-align: center; }body, footer a { color: var(--light-comp, #4d4d4d); }* { scroll-behavior: smooth; box-sizing: border-box }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, blockquote { text-align: left; }h1, nav, form input[type=submit], .btn, .row7 p { text-transform: uppercase; }h1, h2, h3, h4, h5, h6 { line-height: 1.3; }img, iframe { max-width: 100%; height: auto; display: block; margin: 0 auto }iframe { display: block; aspect-ratio: auto 16 / 9; width: 100%; margin: 1em auto; }a img, iframe { border: none; }a, .row6 img { transition: ease-in-out .3s; }a, header a:hover, form input[type=submit]:hover, .btn:hover, footer a:hover, .row7 a:hover, .solutions a:hover { text-decoration: none; }a, header a:hover, footer a:hover, .row7 a:hover { color: var(--primary, #EF141E); }a:hover { text-decoration: underline; }hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 40px 0; }.imgLeft, .imgRight { max-width: 45%; }.imgLeft { float: left; margin: 10px 4% 2% 0; }.imgRight { float: right; margin: 10px 0 2% 4%; }.clear { clear: both; }.nowrap, a:not(.call)[href^=tel] { white-space: nowrap; }sup { line-height: 0; }.hide { display: none !important; }.center, .ccpaNotice, .row3 h2, .row3 h3, .row3 p, .row7 h2, .row7 p, .row7 li { text-align: center !important; }.wrap { display: block; max-width: 1080px; margin: 0 auto; position: relative; overflow: hidden }.bg-dark, .bg-primary { color: var(--dark-comp, #fff); }.bg-dark { background-color: var(--dark, #333); }.bg-primary { background-color: var(--primary, #EF141E); }.bg-light { background-color: var(--light, #f5f5f5); }details { margin: 20px 0; padding: 0; border-left: 4px solid var(--primary, #EF141E); background-color: #fafafa; border-radius: 3px; overflow: hidden; }details summary { padding: 15px 20px; background-color: #f5f5f5; cursor: pointer; font-weight: 600; font-size: 16px; user-select: none; transition: background-color 0.3s ease-in-out; text-align: left; display: flex; justify-content: space-between; align-items: center; }details summary:hover { background-color: #efefef; color: var(--primary, #EF141E); }details summary::marker { color: var(--primary, #EF141E); font-weight: bold; }details[open] summary { background-color: #f0f0f0; border-bottom: 1px solid #e0e0e0; }details p { padding: 20px 20px; margin: 0; line-height: 1.6; text-align: left; }.solutions-internal > .bg-light:first-of-type { margin-top: 0; }.solutions-internal ul { list-style: none; }.solutions-internal li { position: relative }.solutions-internal ul li:before { content: "▸"; color: var(--primary, #EF141E); font-weight: bold; position: absolute; left: -20px }.solutions-internal table { width: 100%; max-width: 1200px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-radius: 6px; overflow: hidden; margin: 30px auto; }.solutions-internal table thead { background: linear-gradient(135deg, var(--primary, #EF141E), #c70a12); color: #fff; }.solutions-internal table :is(th,td) { padding: 12px clamp(5px, 1vw, 15px); font-size: 14px; text-align: center; text-wrap: balance }.solutions-internal table th { font-weight: 700; }.solutions-internal table td { border-bottom: 1px solid #f0f0f0; }.solutions-internal table td:first-child { font-weight: 600; }.solutions-internal table tbody tr:hover { background-color: #f9f9f9; }.solutions-internal table tbody tr:nth-child(even) { background-color: #fafafa; }.solutions-internal .grid > div { padding: 20px 10px; border-radius: 6px; border-top: 3px solid transparent; transition: all 0.3s ease; }.solutions-internal .grid > img { border-radius: 6px; border-top: 3px solid transparent; transition: all 0.3s ease; }.solutions-internal .grid > :is(div,img):hover, .border { border-top-color: var(--primary, #EF141E); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }.solutions-internal .testimonials blockquote { padding: 18px; margin: 15px 0; border-left: 4px solid var(--primary, #EF141E); background-color: #f9f9f9; border-radius: 4px; transition: all 0.3s ease; min-height: 290px }.solutions-internal .testimonials blockquote:hover { background-color: #f0f0f0; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }.solutions-internal details { margin: 15px 0; padding: 0; border-left: 4px solid var(--primary, #EF141E); background-color: #fafafa; border-radius: 3px; }.solutions-internal details summary { padding: 12px 18px; background-color: #f5f5f5; cursor: pointer; font-weight: 600; font-size: 15px; transition: background-color 0.2s ease; }.solutions-internal details summary:hover { background-color: #efefef; color: var(--primary, #EF141E); }.solutions-internal details[open] summary { background-color: #f0f0f0; border-bottom: 1px solid #e0e0e0; }.solutions-internal details p { padding: 15px 18px; margin: 0; font-size: 15px; }.migration { padding: 30px 10px 20px }.migration > img { filter: grayscale(20%); opacity: .2 }.migration p { text-align: center; text-wrap: balance }.solutions-internal .sixth span, .solutions-internal .fourth span { font-size: 33px; color: #9C0E15; font-weight: bold; font-style: italic; }.grid.choose-solution{grid-gap: 50px; justify-content: center; padding: 0 5px;}.choose-solution img { width:100%;height: 200px; object-fit: cover;object-position:50% 30%;border-radius:4px 4px 0 0;border-bottom:1px solid #eee }.choose-solution.grid div { box-shadow: 0 0 5px rgba(0,0,0,0.3);padding:0 0 5px; }.choose-solution div a:hover { color: #333; text-decoration: none; }.choose-solution div h2 { font-size: 20px; text-align: center;padding:0 10px; color: #333; } .mid { align-items: center; align-self: center; }.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); }.grid.fifth { grid-template-columns: repeat(5,1fr); }.grid.sixth { grid-template-columns: repeat(6,1fr); }.grid.img > :is(img,iframe) { width: calc(100% + 20px); max-width: calc(100% + 20px); margin: 0 -10px; height: 100%; object-fit: cover; }.bgimg { position: relative }.bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0; }.bgimg .wrap { z-index: 2 } header, footer, .about .grid h3 span { font-size: 16px; }header, .hero { position: relative; }header { z-index: 888; }header .grid { grid-template-columns: 270px 1fr; grid-gap: 10px }header .grid img { padding: 10px;max-width:270px }.hero h1, .hero p, nav ul { text-align: right; }.mainnav { position: absolute; width: 100%; background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.3), rgba(0,0,0,.1)) }.mainnav .wrap{overflow:unset}nav li { display: inline-block; font-weight: bold; position: relative; }nav li:hover ul { display: block; }nav a, .hero h1, .hero p, .row7 a { color: var(--dark-comp, #fff); }nav a { display: block; margin: 5px; padding: 5px }nav ul ul { display: none; position: absolute; top: 100%; right: -20px; background-color: rgba(0, 0, 0, 0.85); z-index: 1; margin: 0; }.nav-phones{width:275px}.nav-solutions{width:220px}nav ul ul li{text-align:right} .ctaction { background-color: var(--primary, #EF141E); transition: ease-in-out .3s; }.ctaction:hover { background-color: var(--secondary, #9C0E15); transition: ease-in-out .3s; }.ctaction a { display: inline-block; text-align: center; margin: 5px; padding: 5px; color: var(--primary-comp); font-size: 16px; text-wrap: balance }.ctaction a:hover { text-decoration: none; color: var(--primary-comp) } .topnav { background-color: #000; padding: 10px 0; }.topnav a { text-transform: uppercase; }.topnav .btn { padding: 12px 15px; margin: 0 5px; border-radius: 5px; line-height: 1 } .hero, .row3, .row7 { background-size: cover; background-position: center; position: relative; }.hero:before, .hero .wrap:after, .row3:before, .row7:before { content: ""; position: absolute; }.hero:before, .row3:before, .row7:before { width: 100%; height: 100%; background-color: rgba(0,0,0,.4); top: 0; left: 0; z-index: 1 }.hero .wrap:after { width: 600px; background-color: #fff; height: 1px; top: 80%; right: 150px; }.hero { width: 100%; height: 30vw; min-height: 450px; max-height: 600px; }.hero > .wrap { top: 55%; transform: translateY(-55%); }.hero h1, .hero p, .row3 p, .row7 h2, .row7 p { padding: 0 10px; text-shadow: 2px 2px 3px rgba(0,0,0,.3); }.hero h1, .row7 h2 { font-size: 36px; }.hero p { font-size: 24px; font-weight: bold; }.hero .btn { margin-top: 40px; text-shadow: none; } .row1 .wrap { padding: 50px 10px 40px; }.row1 .grid div:nth-of-type(2) { background: #000; }.row2 .bg-light { padding: 20px 40px 40px; border-left: 10px solid #EF141E; }.row2 .grid { grid-template-columns: 300px 1fr; grid-gap: 10px clamp(20px, 3.5vw, 50px); margin: 50px 0; }.row2 .grid>div{padding:0 10px}.row2 img { border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);height:100%;width:100%;object-fit:cover }.row2 h3 { margin-top: 0; }.row3, .row4 { margin: 60px 0; }.row3 { height: 400px; font-weight: bold; }.row3:before { background-color: rgba(0,0,0,.5); }.row3 .wrap, .row7 .wrap, .solutions .emphasis .wrap { top: 50%; transform: translateY(-50%); }.row3 p { max-width: 900px; margin: 20px auto; }.row4 .wrap { padding: 40px 10px; }.row5 .wrap { padding: 20px 10px; }.row6 .wrap { padding: 20px 10px; }.row6 img { vertical-align: middle; filter: grayscale(100%); opacity: 50%; margin: 40px 40px 20px; width: 200px; height: auto;display:inline-block }.row6 img:hover { filter: grayscale(0); opacity: 100%; }.row7 { height: 600px; font-weight: bold; }.row7 ul { max-width: 850px; padding: 20px 0; margin: 40px auto; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }.row7 p a { padding: 0 10px; }span { display: block; }.check > div,object { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background-color: white; transition: box-shadow 0.3s ease; padding: 15px; }.grid object { padding: 0 }object[type=application\/pdf] { width: 100%; display: block; height: 350px }.check > div:hover,object:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }.check svg { width: 80px; height: 80px; stroke: var(--primary, #EF141E); stroke-width: 1px; background-color: white; width: 100%; }.check h3 { color: var(--primary, #EF141E); background-color: white; margin: 0; padding: 15px; text-align: center; font-size: 18px; }.check ul { list-style: none; padding-left: 35px }.check li { position: relative }.check li::before { content: "✓ "; color: var(--primary, #EF141E); font-weight: bold; position: absolute; left: -25px }ul.icons { padding-left: 40px }.icons li { position: relative; margin: 10px 0 }.icons svg { position: absolute; top: -5px; left: -40px } form { margin: 20px 0; }form .grid { grid-gap: 0 10px; }form :is(label,input,textarea,select) { display: block; text-align: left; font-size: 16px; width: 100%; }form label { text-indent: 10px }form :is(input,textarea) { background-color: var(--main-bg, #fff); margin-bottom: 10px; padding: 10px; border: 1px solid #f5f5f5; }form textarea { height: 120px }form input[type=submit], .btn { display: inline-block; width: auto; min-width: 110px; font-weight: bold; text-align: center; line-height: 1.6; background-color: var(--primary, #EF141E); color: var(--primary-comp, #fff); padding: 10px 25px; margin: 10px 0; border: none; border-radius: 3px; transition: ease-in-out .3s; text-wrap: balance }form input[type=submit] { min-width: 250px; margin: 5px 0 0; }form input[type=submit]:hover, .btn:hover,a:has(.btn):hover .btn { cursor: pointer; background-color: var(--secondary, #9C0E15); color: var(--primary-comp, #fff); }#contact .grid { grid-template-columns: 1fr 1fr 1fr } footer { margin-top: 60px; }footer .grid.fourth { padding: 40px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }.subfoot .grid { grid-template-columns: 1fr 150px; padding: 10px 10px 20px } main { padding: 40px 0 0; }.pad, main .bg-light > .wrap { padding-left: 10px; padding-right: 10px }main .bg-light { padding: 40px 0; margin: 60px 0; }main h1, main h2, .row2 h3, .row3, .row7 li { font-size: 30px; }main h1, main h2, .cta { text-wrap: balance }main h3, .row7 { font-size: 20px; }main h4 { font-size: 18px; }main ul, main ol { padding-left: 25px; }main li, footer li { margin: 5px 0; }.nolist, footer ul, .row7 ul, .contact ul { list-style: none; padding-left: 0; }.about .grid { padding: 50px 0 40px; margin: 50px 0; }.about .grid h3 span { display: block; margin: 5px 0; } .solutions .emphasis { height: 350px; background-color: #8eedff; margin: 40px 0; }.solutions .emphasis .grid { grid-template-columns: 400px 1fr; grid-gap: 0; }.solutions .emphasis img { display: block; object-fit: cover; height: 350px; }.musicsplit { grid-template-columns: 250px 1fr; } .contact .grid.mid { grid-template-columns: 300px 1fr; padding: 40px 0 50px; }.contact .grid.mid img { height: 100%; object-fit: cover }.contact .grid.mid ul { padding: 10px 0 10px 70px; position: relative; }.contact li:first-of-type { position: absolute; top: 10px; left: 20px; } .clienttest { padding: 20px 10px; }.clienttest > div { border-right: 1px solid #f5f5f5; padding: 0 20px; }.clienttest > div:nth-of-type(3) { border-right: none; } .plans { padding: 40px 10px; display: grid; justify-items: center; display: none; }.plans .grid > div { background-color: #fff; border: 1px solid #eee; padding: 40px 0px; margin: 20px 0; position: relative; border-radius: 5px; }.plans .grid > div:nth-of-type(2) { border: 1px solid #eee; background-color: #eee; }.plans .grid > div .btn { position: absolute; left: 0; right: 0; bottom: 30px; margin: 0 auto; display: block; width: 110px; }.plans .grid { grid-gap: 10px; margin-top: 40px; }.plans h3 strong { font-size: 50px; line-height: 1.2; }.plans h3 span { display: block; font-size: 16px; }.plans h3, .plans h4 { text-align: center; }.plans h4 { border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; padding: 10px 0; }.plans ul { padding: 0 15px 80px 60px }.pricingBoxes h3 span strong { color: var(--primary, #EF141E); font-weight: bold; }.pricingBoxes div h3 span:first-of-type { font-size: 16px; }.pricingBoxes div h3 span:last-of-type { font-size: 14px; font-weight: normal; }.pricingBoxes div ul { margin-top: 20px; list-style: none; padding-left: 0; }.pricingBoxes div ul li:before { content: "✓ "; color: var(--primary, #EF141E); font-weight: bold; margin-right: 8px; }.pricingBoxes div ul li { padding-left: 10px; } .testimonial-carousel { position: relative; min-height: 350px; text-align: center; display: flex; align-items: center; justify-content: center; }.testimonial-slide { position: absolute; width: 100%; opacity: 0; transition: opacity 1s ease-in-out; top: 50%; left: 0; transform: translateY(-50%); text-align: center; }.testimonial-slide.active { opacity: 1; }.testimonial-slide p { margin: 0 auto; font-size: 24px; line-height: 1.8; }.testimonial-slide p strong { font-weight: bold; } .social { margin: 0; padding: 0; text-align: left; }.social svg { width: 30px; height: auto; color: var(--light-comp, #4d4d4d); }.social li { display: inline-block; margin-right: 5px; }.contact .social li:first-of-type svg { width: 100%; height: auto; }.row2 h3 { margin-bottom: 0px; } @media(max-width:999px) { nav ul ul{display:none !important} .solutions-internal .grid.third { grid-template-columns: 1fr 1fr } .grid.metrics { grid-template-columns: 1fr } .solutions-internal .grid.third > *:last-of-type:nth-of-type(odd) { grid-column: 1 / -1 } .solutions-internal .testimonials blockquote { min-height: 265px } .solutions-internal .testimonials:nth-of-type(3) blockquote { min-height: unset } .grid.sixth{grid-template-columns:1fr 1fr 1fr}} @media(max-width:767px) { header ul { text-align: center } .hero :is(h1,p) { text-align: center; text-wrap: balance } .hero .wrap:after { display:none } .grid.fourth { grid-template-columns: 1fr 1fr }} @media(max-width:700px) { header .grid, .solutions-internal .grid.third,.row2 .grid { grid-template-columns: 1fr } .grid.third { grid-template-columns: 1fr 1fr } .grid.third > *:last-of-type:nth-of-type(odd) { grid-column: 1 / -1 } .row2 img{height:clamp(250px, 60vw, 350px);} footer :is(h3,li) { text-align: center } header .grid img { margin: 5px auto } .hero { height: auto } .hero > .wrap { top: unset; transform: none; padding: 245px 10px 100px; position: relative } .hero .wrap:after { top: 290px } .solutions-internal .testimonials blockquote { min-height: unset } .choose-solution img{min-height:150px;height:40vw;max-height:250px}} @media(max-width:600px) { header .grid, .contact .grid.mid, .grid.half { grid-template-columns: 1fr } .grid.img>div{order:2} .grid.img > img { order: 1 } .imgRight { float: none; margin: 0 auto; max-width: 100% } .grid.sixth { grid-template-columns: 1fr 1fr }} @media(max-width:500px) { .subfoot .grid, #contact .grid { grid-template-columns: 1fr } .subfoot p { text-align: center; margin: 0 } .solutions-internal table { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px);box-shadow:none }} @media(max-width:400px) { footer .grid.third { grid-template-columns: 1fr } main h1, main h2, .row2 h3, .row3, .row7 li {font-size:26px} .btn{display:block} .testimonial-slide p{font-size:20px}}