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: 140px; margin: 0 auto; } .logo img:nth-of-type(2) {max-width: 200px; margin: 0 auto;} .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; bottom: -8px; 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; } .freeresources .btn.style1 { background-color: #f10404; color: #eee; } .freeresources .btn.style1:hover { background-color: #b92121; color: #eee; } .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.third.mid { grid-template-columns: 1fr } .ai-services .grid.third.mid > div { max-width: 400px; margin: 0 auto; } .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: 3; } .container:has(.signup) .top nav li a, .topnavigation li a, .topnavigation li svg { color: #000; stroke: #000; } .container:has(.signup) .hero { order: 2; } .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 } .hero-items { grid-template-columns: 1fr; } .hero-item { padding: 15px 10px; } .hero-item strong { font-size: 20px; margin: 0; } .hero .tagline { font-size: 16px; margin: 10px 0; padding: 0 20px; } .hero .btn { min-width: 180px; margin-top: 15px; } .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:600px) { .hero > .wrap { display: grid; grid-template-columns: 1fr; } .hero > .wrap > .hero-items { display: contents; } .hero > .wrap > .hero-items > .hero-item:first-child { order: 1; } .hero > .wrap > .tagline { order: 2; } .hero > .wrap > .hero-items > .hero-item:last-child { order: 3; } .hero-item { padding: 15px 10px; } .hero:has(.hero-items) { height: 700px; } } @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; gap: 0; margin: 10px 0; } nav li { border-right: 1px solid #a4a2a0; border-bottom: 1px solid #a4a2a0; text-align: center; padding: 20px 15px; } nav li:nth-child(-n+2) { border-top: 1px solid #a4a2a0; } nav li:nth-child(2n) { border-right: none; } nav a { display: block; } .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 } }