img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { min-width: 320px; }body, .bgdark { background-color: #011a5c; color: #fff; }body { font-family: 'Lexend', sans-serif; font-size: 18px; line-height: 1.5; text-align: center; }body, nav a { color: #403d39; }h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; }body, header ul, footer ul { padding: 0; margin: 0; }img, iframe { max-width: 100%; height: auto; display: block; margin: 1em auto }iframe { width: 100%; aspect-ratio: auto 16 / 9 }.fullwidth { width: 100%; }a img, iframe { border: none; }a, a:hover, form input[type=submit], .btn, form input[type=submit]:hover, .btn:hover { transition: ease-in-out .3s; }a, header a:hover, footer a:hover, aside li a:hover { text-decoration: none; color: #a71c1c; }a:hover { text-decoration: underline; }header a:hover, .featured a:hover, footer a:hover, .voice a:hover, aside li a:hover { text-decoration: none; }hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 40px 0; }.imgLeft, .imgRight { max-width: 45%; border-radius: 5px; }.imgLeft { float: left; margin: 5px 4% 2% 0; }.imgCenter { display: block; margin: 0 auto; }.imgRight { float: right; margin: 5px 0 2% 4%; }.clear { clear: both; }.nowrap { white-space: nowrap; }.hide { display: none !important; }.container, .quality li, .spotlight .wrap { background-color: #fff; }.wrap { display: block; max-width: 1080px; margin: 0 auto; position: relative; }.center, .hero p, .quality li, .intro .wrap > *, .featured .grid a > *, .spotlight .wrap > *, .comments .wrap > *, .cloud .featurelist h2 { text-align: center; }.flex { display: flex; flex-wrap: wrap; }.flex > * { flex: 1 }.grid { display: grid; grid-gap: 10px; }.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; }.span3 { grid-column: span 3; }.pad { padding-left: 10px; padding-right: 10px }.bgimg { position: relative }.bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0; margin: 0 }.bgimg > .wrap { z-index: 2 } .top, footer { font-size: 16px; }.top, .top a { color: #a4a2a0; }.top a.btnstyle4 { color: #eee; }.top p { margin: 0; }.top svg, .quality svg, footer svg, .top li { vertical-align: middle; }.top ul, nav, footer .grid:last-of-type { text-align: right; }.top a { position: relative; min-height: 24px }.top svg { left: 0; position: relative }header a, .hero strong, main h1 span, main h2 span { display: block; }header a { padding: 5px; margin: 5px }header .grid.third .btnstyle4 { margin: 0 auto; text-align: center; height: 60px; width: 165px; color: #000; }header .grid.third .btnstyle4:hover { color: #b92121; }header .grid.third .btnstyle4 svg { z-index: 0; position: absolute; margin: 0; width: 100%; height: 100%; inset: 0; color: #A4A2A0; }header .grid.third .btnstyle4 p { z-index: 1; position: absolute; text-align: center; text-shadow: 1px 2px 1px rgb(219, 219, 219); margin: 13% 0; font-weight: bold; }header li, .voice a { display: inline-block; }header ul { list-style: none; }header img { margin: 0; }.logo img { max-width: 250px }.logo.grid { grid-template-columns: 300px 1fr; }nav { margin-top: 2rem; }nav li { font-size: 17px; }.btnstyle3 { background-color: #f10404; color: #eee; text-align: center; font-weight: bolder; display: inline-block; padding: 10px 20px; margin: 10px 5px; border-radius: 5px; border: none; }.btnstyle3:hover { color: #eee; background-color: #b92121; text-decoration: none; }.btnstyle4 { background-color: #f10404; color: #eee; text-align: center; font-weight: bolder; display: inline-block; padding: 5px 20px; margin: 10px 5px; border-radius: 5px; border: none; font-size: 14px; }.btnstyle4:hover { color: #eee; background-color: #b92121; text-decoration: none; } .hero { position: relative; z-index: 888; padding: 0 15px }.hero { height: clamp(350px, 26vw, 700px) }.hero:before { content: ""; background-color: rgba(0,0,0,.5); position: absolute; inset: 0; z-index: 1 }.hero .wrap { top: 50%; transform: translateY(-50%); }.hero p, .featured .grid a, .comments, footer, footer a { color: #fff; }.hero p { text-shadow: 2px 2px 4px rgba(0,0,0,.5); }.hero p, .intro p, .spotlight p { max-width: 750px; margin: 0 auto; }.hero strong { font-size: 30px; padding-bottom: 20px; position: relative; }.hero strong:after { content: ""; width: 40%; height: 1px; background-color: rgba(255,255,255,.5); position: absolute; top: 45px; left: 50%; transform: translateX(-50%) }.hero .btn { min-width: 210px; margin-top: 40px; } .home { position: relative; top: -70px; z-index: 999; }.quality li, .featured .grid a, .spotlight .wrap, .about.grid div:first-of-type, .about.grid img, .location.grid div, .cloud .featurelist, .cloud .featurelist h3, .more { border-radius: 5px; }.quality li, .spotlight .wrap .more { box-shadow: 0 0 10px rgba(0,0,0,.2); }.quality li { padding: 30px; }.intro { padding: 30px 10px 0; }.featured { background-image: url(/images/bg-featured.jpg); background-position: right; background-repeat: no-repeat; padding: 80px 10px; }.featured .grid a { font-size: 16px; padding: 40px 20px 100px; position: relative }.featured .icon-tabler-circle-plus { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%) }.featured .design { background-color: #a71c1c; }.featured .managed { background-color: #a6832d; }.featured .ctap { background-color: #63560e; }.featured .customer { background-color: #012176; }.spotlight .wrap { padding: 40px 0; margin: 20px auto 0; position: relative; z-index: 999; }.spotlight .youtube { max-width: 900px; margin: 40px auto 20px; }.comments { padding: 300px 10px 100px; position: relative; top: -200px; z-index: 888; }.comments:before { content: ""; width: 100%; height: 100%; background-color: rgba(167,28,28,.9); position: absolute; inset: 0; z-index: 1 }.comments img { object-position: 50% 35% }.partners { position: relative; top: -120px; }.partners ul { padding: 0 }.partners li { display: inline-block; margin: 1em 20px; vertical-align: middle }.partners img { max-width: 170px; max-height: 60px; vertical-align: middle; }.partners a { filter: grayscale(100%); opacity: .5; display: block; }.partners a:hover { filter: grayscale(0); opacity: 1; }.cta { padding: 100px 10px 0; position: relative; }.cta img { max-width: 250px; position: absolute; top: -250px; right: 0; } main, footer .wrap, aside { padding: 40px 10px; }main h1, .hero p, .home h2, .cta h2 { font-size: 24px; }main h1 span { font-weight: 400; }main h2 { font-size: 22px; }main h3 { font-size: 20px; }main h4, main h1 span { font-size: 18px; }main ul, main ol { padding-left: 25px; }main li, footer li { margin: 5px 0; }aside li { margin: 10px 0 }aside h2 { margin-top: 70px; font-size: 20px }aside ul { padding: 0; list-style: none; font-weight: bold; }aside a { color: #693D39; }.hide { display: none; }.nolist, footer ul, .quality ul, .location ul { list-style: none; padding: 0; }.about.grid { grid-template-columns: 1fr 350px; margin-bottom: 40px; }.about.grid div:first-of-type, .location.grid div { background-color: #eee; }.about.grid div:first-of-type { padding: 20px 40px; }.about.grid div:last-of-type img { object-fit: cover; object-position: top; width: 100%; max-height: 400px; }.voice a { width: 180px; min-height: 150px; margin: 1em 5px; padding: 27px 0; background-color: #eee; vertical-align: top; border-radius: 400px; }.voice svg { background-color: #011a5c; color: #fff; padding: 10px; border-radius: 100px; width: 60px; height: 60px; display: block; margin: 0 auto }.voice h2, .voice p { text-align: center; }.voice h2 { font-size: 18px; font-weight: 800; line-height: 1; color: #a71c1c; margin: 20px 0 0; }.voice p { width: 130px; font-weight: 600; text-transform: uppercase; padding: 10px; margin: 29px auto 0 auto; border: 2px solid #b92121; border-radius: 50px; }.voice a:hover { background-color: #a71c1c; transition: all .3s linear .01s; }.voice a:hover svg, .voice p { display: none; }.voice a:hover h2, .voice a:hover p { color: #fff; }.voice a:hover p, .voice span { display: block; }.voice a:hover p { border: 2px solid #fff; }.location.grid { margin-top: 50px; }.location.grid div { padding: 20px 40px 30px; }.location hr { border-color: #fff; }.map { width: 100%; height: 400px; }.cloud .featurelist, .grid.more { margin: 50px 0 20px; }.cloud .featurelist { border: 1px solid #eee; }.cloud .featurelist > .grid { grid-template-columns: 2fr 1fr; padding: 0 20px; grid-gap: 0 20px }.cloud .featurelist .grid.half { grid-gap: 0 }.cloud .featurelist ul { padding-left: 30px }.cloud .featurelist li { margin: 0 0 5px }.cloud .featurelist th, .cloud .featurelist td { vertical-align: top; padding-left: 20px; }.cloud .featurelist h3 { background-color: #eee; margin: 0; padding: 10px 20px; }.cloud .featurelist tr:nth-of-type(2) td:last-of-type { padding-right: 20px; }.grid.more { grid-template-columns: 350px 1fr; }.grid.more img { object-fit: cover; height: 100%; border-radius: 5px 0 0 5px; }.grid.more div:last-of-type { padding: 20px 40px; }.terms ol { counter-reset: item; }.terms ol > li { display: block; }.terms ol > li:before { content: counter(item) "."; counter-increment: item; font-weight: bold; }.terms ol > li > ol > li:before { content: counters(item, ".") " "; counter-increment: item }.terms ul { list-style: disc; }.resources h3, .resources h4, .resources p { text-align: center }.resources a { font-weight: bold; }.resources li { margin: 10px auto; text-align: left }#catalog-sidebar { display: none; text-align: left; } .rotate { transform: rotate(-6deg); position: relative; z-index: 1; }.rotate span { display: block; }.rotatetext { border-radius: 10px; font-weight: 800; border: 1px dashed red; position: absolute; text-align: center; left: 50%; transform: translate(-50%, 0); padding: 3% 6%; background: rgba(255, 255, 255, 0.8); width: 50%; }.rotatetext:hover { text-decoration: none; background: #fff; } form { margin: 20px 0; }form label, form input[type=file], form input, form textarea { display: block; width: 100%; box-sizing: border-box }form label { text-align: left; }form input[type=text], form input[type=email], form input[type=tel], form input[type=file], form input[type=submit], form select, form input[type=file], form textarea { font-family: 'Lexend', sans-serif; font-size: 18px; }form input[type=text], form input[type=email], form input[type=tel], form select, form input[type=file], form textarea { background-color: #fff; margin-bottom: 5px; padding: 0 15px; border: 1px solid #eee; }form .grid input { margin-bottom: 0 !important; }form .grid, form > label { margin-bottom: 10px }form input[type=text], form input[type=email], form input[type=tel], form input[type=file], form textarea { box-sizing: border-box; }form input[type=text], form input[type=email], form input[type=tel], form select { height: 50px; }form select { width: 100%; }form input[type=file] { padding: 13px 15px; }form textarea { height: 200px; padding: 15px; }form input[type=submit], .btn { display: inline-block; min-width: 160px; font-weight: bold; text-align: center; color: #fff; padding: 10px 20px; margin: 10px 0; border-radius: 5px; border: none; }form input[type=submit], .btn.style1 { background-color: #a71c1c; }form input[type=submit]:hover, .btn.style1:hover { background-color: #c12020; }.btn.style2 { background-color: #011a5c; }.btn.style2:hover { background-color: #012176; }form input[type=submit] { min-width: 250px; padding: 13px 20px; margin: 0; }form input[type=submit]:hover, .btn:hover { cursor: pointer; text-decoration: none; color: #fff; }.cta #contact { margin: 20px 0 0; }#quote, #analysis { width: 300px; padding: 40px; margin: 0 auto; background-color: #fff; }#quote input[type=submit], #analysis input[type=submit] { width: 100%; margin-top: 5px; }#support { margin-top: 40px; }.top .grid .topnavigation { grid-template-columns: 475px 1fr; padding: 0 3%; }.socialheadericons { padding: 5px; margin: 5px; }.socialheadericons li a { padding: 0 5px; margin: 0; }.socialheadericons li:last-child a { padding-right: 20px; border-right: 1px solid #eee; } footer { clear: both }footer hr { border-color: rgba(255,255,255,.3); }footer hr:first-of-type { display: none; }footer .grid a { display: block; margin: 4px; padding: 4px }.a8bmark img { margin: 1em 0 1em auto } .businessfoundation { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; margin-top: 5%; }.businessfoundation td, .businessfoundation th { border: 1px solid #ddd; padding: 8px; }.businessfoundation tr:nth-child(even) { background-color: #f2f2f2; }.businessfoundation tr:hover { background-color: #ddd; }.businessfoundation th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #012176; color: #fff; }.businessfoundation td:nth-of-type(2) { white-space: nowrap }.businessfoundationcol { padding: 5% 0; }.businessfoundationcol h2 { text-transform: uppercase; padding: 10px }.businessfoundationcol h2, .businessfoundationcol p { text-align: center; }.businessfoundationcol div { border-right: 1px solid #eee; padding: 0 3%; }.businessfoundationcol div:last-child { border-right: none; }.bf2designcol1, .bf2designcol2, .bf2designcol3 { color: #fff; border-radius: 10px; }.bf2designcol1 { background: #a0027b; }.bf2designcol2 { background: #12179d; }.bf2designcol3 { background: #14967c; } .automotive { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 0; }.automotive .block { background-color: #aaa; color: #fff; padding: 20px; margin: 20px auto; height: 250px; width: 300px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); overflow: hidden; transition: transform 0.6s ease-in-out, background-color 0.6s ease-in-out; transform-style: preserve-3d; perspective: 1000px; } .automotive .block:hover { transform: rotateY(180deg); background-color: #666; } .automotive .block:hover div:nth-of-type(1) { display: none; transform: rotateY(180deg); } .automotive .block:hover div:nth-of-type(2) { display: inline-block; transform: rotateY(180deg); } .block h2 { text-align: center; font-size: 2em; margin-top: 15px; }.block svg { width: 60px; height: 60px; margin: 0 auto; }.block div:nth-of-type(1) { display: inline-block; }.block div:nth-of-type(2) { display: none; }.block ul { padding-top: 60px; }.callout { background-color: #a71c1c; color: #fff; padding: 20px; margin: 20px auto; width: 60%; text-align: center; border-radius: 5px; }.callout .btn { background-color: #fff; color: #a71c1c; } @media(max-width:999px) { .quality svg, .quality span { display: block; } .quality svg { margin: 5px auto } .featured > .wrap > .grid { grid-template-columns: 1fr } .featured h2, .featured p { text-align: center } footer .wrap { padding: 40px 10px 70px } footer .grid.fourth { grid-template-columns: 1fr 1fr } .cta { padding: 120px 10px 0 } .cta img { top: -300px; right: 50%; transform: translateX(50%) } .rotatetext { width: 60%; } nav { padding: 0 5px; } .top .grid .topnavigation { grid-template-columns: 1fr; padding: 0 5px; } .automotive { grid-template-columns: 1fr; }} @media(max-width:767px) { .about.grid, .cloud .featurelist > .grid, .grid.more, .location.grid { grid-template-columns: 1fr } .location.grid div:first-of-type { order: 1 } .about.grid div:last-of-type img { object-fit: contain } .grid.more img { height: 350px; width: 100%; margin: 0; border-radius: 5px 5px 0 0 } .location > div { margin: 10px } .rotatetext { width: 70%; } .logo.grid { grid-template-columns: 1fr; } .logo img { max-width: 300px; margin: 0 auto; } .top p, .top ul { text-align: center; margin: 10px 0 } .top .grid .topnavigation { grid-template-columns: 1fr; } .socialheadericons li:last-child a { border-right: none; } nav a.btnstyle4 { display: block; margin: 12px auto; width: clamp(200px, 75%, 350px) } nav a.btnstyle4:first-of-type { margin-top: 20px; } .container:has(.signup) { display: flex; flex-flow: column; } .container:has(.signup) header { order: 2; } .container:has(.signup) .top nav li a, .topnavigation li a, .topnavigation li svg { color: #000; stroke: #000; } .container:has(.signup) .wrap:has(main) { order: 1; }} @media(max-width:700px) { .logo.grid, header .grid.third { grid-template-columns: 1fr } header .grid.third .address { order: 2; } header .grid.third .darkweb { order: 1; } header .grid.third .links { order: 3; } nav { text-align: center } .container .content { grid-template-columns: 1fr } .content aside, .content main { order: unset } .content aside { border-top: 1px solid #eee } .content aside h2 { margin-top: 0 } nav ul { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 5px } nav a { text-align: center } .rotatetext { width: 80%; } .grid.businessfoundationcol { grid-template-columns: 1fr; } .businessfoundationcol div { padding: 0; border: none } .businessfoundationcol h2 { padding: 20px 10px } .businessfoundationcol h2 span { display: inline } .top .grid .topnavigation { grid-template-columns: 1fr; }} @media(max-width:500px) { .imgRight, .imgLeft { float: none; margin: 1em auto; max-width: 100% } .quality svg, .quality span, .top a, .bf2designcol3 span { display: inline; } .quality .grid.third, .grid.half, .top .grid, footer .grid.fourth { grid-template-columns: 1fr } .quality li { margin: 0 10px } footer p, footer li, nav a { text-align: center } .a8bmark img { margin: 1em auto } .cloud .featurelist > .grid ul { margin: 0 } .cloud .featurelist > .grid ul:first-of-type { margin-top: 1em } .cloud .featurelist > .grid ul:last-of-type { margin-bottom: 1em } nav ul { grid-template-columns: 1fr 1fr } .rotatetext { width: 90%; } .businessfoundation th { text-align: center; padding: 12px 4px }} @media(max-width:400px) { .location.grid div { padding: 20px 20px 30px; margin: 10px 0 } .about.grid div:first-of-type, .grid.more div:last-of-type { padding: 20px }}