img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} html {--12px: 0.750rem; --14px: 0.875rem; --15px: 0.9375rem; --16px: 1rem; --17px: 1.0625rem; --18px: 1.125rem; --19px: 1.1875rem; --20px: 1.25rem; --21px: 1.3125rem; --22px: 1.375rem; --25px: 1.5625rem; --28px: 1.75rem; --30px: 1.875rem; --32px: min(2rem,42px); --36px: 2.25rem;--42px:2.625rem; --46px: min(2.875rem,80px); --52px: 3.25rem; --100px: 6.25rem } :root { --light: #fff; --semi-light: #f5f5f5; --light-30: #789956; --light-30-mono: #8F8F80; --light-45: #667F38; --light-45-mono: #72725C; --accent: #b2d470; --dark: #42338f; --dark-accent: #654edb; --dark-muted: #6959a5; --dark-mono: #4d4d4d; } body { font-family: 'Questrial',Arial,sans-serif; font-display: optional; font-size: var(--19px); color: var(--dark-mono); line-height: 1.5; text-align: center; background-image: url('images-design/logo-half.jpg'); background-size: cover; background-attachment: fixed; min-width: 320px; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote, .fakeh1, address { text-align: left; } h1, h2, h3, h4, h5, h6 { text-transform: uppercase; font-weight: normal; } h1, h2, h3, h4, h5, h6, p, .fakeh1, dl, address, fieldset legend { padding-left: 10px; padding-right: 10px } fieldset { border: none; padding: 0 } .video { aspect-ratio: auto 16 / 9; display: block } .fakeh1 { display: block; font-size: var(--32px) } .small { font-size: 85% } .nowrap, a[href^=tel] { white-space: nowrap; } body, nav ul { padding: 0; margin: 0; } footer ul { padding: 0; list-style: none } img, iframe { max-width: 100%; height: auto } a img, iframe { border: none; } p a, main li a { text-decoration-line: underline; text-decoration-color: var(--accent); text-underline-offset: 2px } p a:hover, main li a:hover { text-decoration-color: var(--dark); color: var(--light-45) } a { text-decoration: none; color: var(--dark-accent); transition: all .3s linear 0s; } *:focus-visible, input[type=submit]:focus-visible { outline-style: solid; outline-width: 2px; outline-color: #000; box-shadow: -4px -4px 8px #fff; outline-offset: 4px; border-radius: 3px } a, a:focus, nav a, nav a:hover, .services a h2, .services a:hover h2, .articles a, .articles a:hover, footer a, footer a:hover, input[type=submit], input[type=submit]:focus-visible { transition: all .3s linear .01s; } .hero a:hover, .services a:hover { text-decoration: none; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 30px 0; } .imgLeft, .imgRight, body .post img.imgRight { max-width: 45%; } .imgLeft { float: left; margin: 5px 4% 1% 0; } .imgRight { float: right; margin: 5px 0 1% 4%; } .clear { clear: both; } .center { text-align: center; } .wrap { max-width: 1200px; display: block; margin: 0 auto; position: relative; } .table { display: table; width: 100%; } .table > div, .articles .post { display: table-cell; vertical-align: top; } .table.mid > div, .help > div { vertical-align: middle } .table.half > div { width: 50%; } .table.half > div:first-of-type, .articles .post:first-of-type { padding-right: 2%; } .table.half > div:last-of-type, .articles .post: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 { display: grid; grid-gap: 10px } .grid.half { grid-template-columns: repeat(2,1fr) } .grid.third { grid-template-columns: repeat(3,1fr); } .grid.list{grid-gap:0 20px} .grid.list ul{margin:0} .grid.list ul ul{margin:10px 0} .flex { display: flex; flex-wrap: wrap } .flex.half > * { flex: 1 0 300px } nav ul, nav li { display: inline-block; } .nolist li { list-style: none; } header { width: 100%; background-color: rgba(255,255,255,.9); padding: 6px 0; position: sticky; top: 0; z-index: 999; box-shadow: 0 0 10px rgba(0,0,0,.1); } header .table .logo { width: 100%; text-align: left; } header .grid { grid-template-columns: 240px 1fr; grid-gap: 10px; align-items: center } header .logo img { width: 240px; height: 83px } header a { display: block } nav { font-size: 0; margin-bottom: 10px } nav a { font-size: var(--19px); color: var(--dark-mono); padding: 10px; text-decoration: none; text-decoration-color: var(--accent); text-underline-offset: 4px } nav a:hover { text-decoration-line: underline; color: var(--dark-accent) } nav a.btn, nav a.btn:hover { border: none } nav a[href^=tel] { font-weight: bold; } nav.grid { grid-template-columns: 1fr 180px; } .jump { text-decoration-line: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; position: absolute; background: #fff; left: 150px; top: -10px; padding: 10px; border-width: 2px; border-color: var(--light-30); border-style: none solid solid; transform: translateY(-100%) } .jump:focus { transform: translateY(0%); outline-offset: 0 } dl dt { font-weight: 600 } a.btn, .btn, input[type=submit] { background-color: var(--dark); color: var(--light); padding: 10px 20px; border-radius: 50px; text-align: center; text-shadow: none; text-decoration: none } a:focus.btn, a:hover.btn, input[type=submit], input[type=submit]:focus, input[type=submit]:hover { background-color: var(--dark-accent); color: var(--light) } a.focus.btn.big, a:hover.btn.bg { background-color: var(--light-30); } .hero { height: 300px; font-family: 'Prompt',sans-serif; font-weight: 800; background-size: cover; background-position: center; } .hero .wrap { top: 50%; transform: translateY(-50%); } .hero.interior { background-image: url(/images-design/banner.jpg); } .hero p { max-width: 660px; font-size: var(--32px); text-align: center; color: var(--light); margin: 0 auto; text-shadow: 2px 2px 5px rgba(0,0,0,.5); padding: 10px; background-color: var(--dark-muted); border-radius: 5px } .hero.home { height: 800px; } .thumb { background-image: url(/images-content/thumb0.png); background-size: cover; background-position: bottom; transition-property: background; transition-duration: 0.1ms; transition-timing-function: linear; height: 100%; position: relative; z-index: 2 } .hero.home .overlay { height: calc(100% - 6rem); background-image: linear-gradient( transparent 80%,#fff); padding: 3rem 0 } .hero.home .wrap { top: 35%; transform: translateY(-35%); } .hero.home h1 { font-weight: bold; max-width: 480px; font-size: var(--52px); text-align: left; line-height: 1.1; margin: 0; text-shadow: 3px 5px 10px rgba(0,0,0,.8); color: var(--light); } .countup { padding-top: 10px } .countup p { font-size: var(--24px); text-align: center; color: var(--dark-accent); } .countup strong { display: block; font-family: 'Prompt',sans-serif; font-weight: 800; font-size: var(--46px); line-height: 1.2; color: var(--light-30); } .countup .table > div { background-position: top center; background-repeat: no-repeat; } .countup .table > div:nth-of-type(1) { background-image: url(/images-content/icons/exchange.png); } .countup .table > div:nth-of-type(2) { background-image: url(/images-content/icons/note.png); } .countup .table > div:nth-of-type(3) { background-image: url(/images-content/icons/envelope.png); } .countup .table > div:nth-of-type(4) { background-image: url(/images-content/icons/handshake.png); } .services { margin: 50px 0 70px; } .services a h2 { border-bottom: 2px solid transparent } .services a:hover h2, .services a:focus h2 { border-color: var(--accent) } .services .grid div { background-color: var(--semi-light); background-repeat: no-repeat; background-position: 5% center; border: 1px solid #eee } .services .grid.half { grid-gap: 10px } .services a { display: block; padding: 15px 30px 5px; height: 100%; box-sizing: border-box } .services h2, .services p, fieldset legend { text-align: center; } .services h2, .articles h2 { font-size: var(--24px); } .services p { color: var(--dark-mono); } .services .grid > div:nth-of-type(3), .services .grid > div:nth-of-type(4) { background-position: 95% center } .services .grid > div:nth-of-type(1) { background-image: url(/images-content/icons/computer.png); } .services .grid > div:nth-of-type(2) { background-image: url(/images-content/icons/homepage.png); } .services .grid > div:nth-of-type(3) { background-image: url(/images-content/icons/speedometer.png); } .services .grid > div:nth-of-type(4) { background-image: url(/images-content/icons/code.png); } .services .grid > div:nth-of-type(5) { background-image: url(/images-content/icons/bullhorn.png); } .services .grid > div:nth-of-type(6) { background-image: url(/images-content/icons/mouse.png); } .featured { overflow: hidden } .featured a { display: block; height: 100%; box-sizing: border-box; padding: 10px 0 } .featured a, .getstarted h2, .getstarted legend { color: var(--light); } .featured h2 { margin: 0; } .featured h2, .featured p { padding: 0 } .featured p, .featured li, .featured h2, .getstarted h2, .getstarted legend { text-shadow: 1px 1px 1px #222,-1px -1px 1px #222, 1px -1px 1px #222,-1px 1px 1px #222 } .featured span { color: var(--accent); } .featured ul { list-style: none; padding-left: 0; margin: 0 } .featured .grid { grid-template-columns: 1fr 1fr 1fr; grid-gap: 0 } .featured .panel > div { background-size: cover; } .featured .panel > div:nth-of-type(1) { background-image: url(/images-design/pro-bg.jpg); background-position: center; } .featured .panel > div:nth-of-type(2) { background-image: url(/images-design/seo-bg.jpg); background-position: left; } .featured .panel > div:nth-of-type(3) { background-image: url(/images-design/marketing-bg.jpg); background-position: top; } .featured .overlay { height: 100%; box-sizing: border-box } .panel > div:hover { box-shadow: 0 0 10px rgba(0,0,0,.3); } .panel .overlay { transition: background 2s; padding: 40px 5%; } .featured .overlay { background-color: rgba(0,0,0,.6) } .featured .panel > div:hover .overlay { background-color: rgba(66,51,143,.8) } .active h2 { font-size: var(--32px); text-align: left; text-shadow: none; } .active span { display: inline; } .inactive .overlay { background-color: rgba(0,0,0,.2) } .inactive h2 { font-size: var(--32px); text-align: center; line-height: 1.2; padding-top: 200px; text-shadow: 2px 2px 5px rgba(0,0,0,.8); } .inactive p, .inactive ul { display: none; } .articles { background-image: url(/images-design/news-bg.png); background-position: center; padding: 50px 0; background-size: contain; background-repeat: no-repeat; background-attachment: fixed } .articles a { display: block; margin-top: 20px; } .getstarted { background-image: url(/images-design/cta-bg.jpg); background-size: cover; background-position: center; background-attachment: fixed } .getstarted h2, .getstarted label, .getstarted legend { text-shadow: 2px 2px 5px rgba(0,0,0,.8); } .getstarted .overlay { background-color: rgba(0,0,0,.3); padding: 50px 0 70px; } main { padding: 20px 0 0; } #jumptarget { overflow: hidden } main h1, .fakeh1 { font-size: var(--32px); color: var(--light-30); margin-top: 0; padding-top: .83em } main h2 { font-size: var(--25px); letter-spacing: .5px } main h3 { font-size: var(--22px); } main h4 { font-size: var(--20px); } main h5 { font-size: var(--19px); } main p, main li, main h1, main h2, main h3, main h4, blockquote { text-shadow: 1px 1px 1px #fff,-1px -1px 1px #fff, 1px -1px 1px #fff,-1px 1px 1px #fff } main li em { text-shadow: none } main ul, main ol { padding: 0 10px 0 40px; margin: 0 } main li { margin: 10px 0; } .values { padding-bottom: 0 0 20px; margin: 60px 0; border-top: 2px solid #f1f1f1; border-bottom: 2px solid #f1f1f1; } .values .grid { grid-gap: 0; align-items: center; list-style: none; padding: 0; margin: 0; } .values .grid > li { font-size: var(--20px); padding: 20px 60px 20px 3.75rem; position: relative; margin: 0 } .values em, .values i { position: absolute; } .values p { position: relative; z-index: 888; } .values em { font-size: var(--19px); font-weight: bold; font-style: normal; background-color: var(--light-30); color: var(--light); padding: .3125rem .875rem; border-radius: 50px; left: 15px; top: 50%; transform: translateY(-50%); } .values i { font-size: var(--100px); color: rgba(93,74,170,.1); left: 30%; transform: translateX(-30%); top: 50%; transform: translateY(-50%); z-index: 0; } .values h2, .team h2 { font-size: var(--30px); text-align: center; } .team .grid { grid-gap: 15px } .team .grid > div { background-color: #fff; border: 1px solid var(--accent); clear: both; } .team img { width: 50%; max-width: 250px; float: right; margin: 0 0 8px 16px; display: block } .team h3 { font-size: var(--19px); color: var(--dark-accent); margin-top: 5px; } .team h3 span { display: block; text-transform: none; color: var(--light-45); } .team p { font-size: var(--16px); } .team p:last-of-type { margin-bottom: 8px } h2 span { color: var(--light-30); text-decoration-line: underline; text-decoration-color: var(--accent); text-underline-offset: 4px } li::marker { font-size: 150%; color: var(--accent) } .testimonials blockquote { background: url(/images-design/quote.png)center center no-repeat; width: auto; min-height: 55px; background-size: contain; border: none; font-size: 100% } blockquote { padding: 20px; margin: 1em 4%; border-width: 10px; border-style: none solid; border-color: var(--accent); font-size: 120% } cite { display: block; text-align: right; position: relative; right: 0; margin-top: 10px; border-bottom: 1px solid #eee; padding-bottom: 20px; font-size: var(--15px); } .thumbnails { padding: 0; text-align: center; } .thumbnails li { display: inline-block; vertical-align: top; list-style-type: none; text-align: center; margin: 0 5px; } .thumbnails a { display: block; text-decoration: none; width: 130px; margin: 10px auto; } .thumbnails img { border: 1px solid #ccc; } .thumbnails span { display: block; font-size: var(--14px); } .thumbnails li .tagline { display: none; } .serve { min-width: 300px; font-size: var(--19px); display: block; } .btn { display: inline-block } .center .btn { margin: 10px; } .btn:hover { text-decoration: none } h3 .btn { text-transform: none } .video { width: 100%; height: 54vw; max-height: 540px } .table.third.address > div { background-position: center; background-repeat: no-repeat; padding: 20px 0; } .table.third.address > div:nth-of-type(1) { background-image: url(/images-content/icons/refresh.png); } .table.third.address > div:nth-of-type(2) { background-image: url(/images-content/icons/mobile.png); } .table.third.address > div:nth-of-type(3) { background-image: url(/images-content/icons/home.png); } .address p, .secure h2 { text-align: center; } .secure { margin: 50px 0; } .secure h2 { margin-bottom: 0; } .secure .center .btn { display: block; max-width: 250px; margin: 20px auto; } .secure .grid > div { background-color: var(--semi-light); background-position: 95% center; background-repeat: no-repeat; padding: 30px; border: 1px solid #eee } .secure .grid > div:first-of-type { background-image: url(/images-content/icons/payment.png); } .secure .grid > div:last-of-type { background-image: url(/images-content/icons/data.png); } .partner h1 { margin-bottom: 0; } .partner .tag > div { vertical-align: middle; } .partner .tag > div:first-of-type { width: calc(100% - 300px); } .partner .tag > div:last-of-type { width: 250px; padding-left: 50px; } .partner h2 { color: var(--light-30); font-weight: bold } .partner .features { background-image: url(/images-design/business-partners.jpg); background-size: cover; background-position: center; background-attachment: fixed; margin: 40px 0; } .partner .features .overlay { background-color: rgba(66,51,143,.8); padding: 40px 0; } .partner .features ul, .partner .exclusive ul { list-style: none; padding: 0; } .partner .features li { color: #fff; margin: 30px 10px 30px 80px; position: relative; text-shadow: 1px 1px 1px #111,-1px -1px 1px #111, 1px -1px 1px #111,-1px 1px 1px #111 } .partner .features i { position: absolute; top: 50%; transform: translateY(-50%); left: -70px; } .partner .features strong { display: block; font-size: var(--20px); font-weight: normal; text-transform: uppercase; } .partner .exclusive { margin-bottom: 50px; text-align: left } .partner .exclusive li { padding-left: 30px; position: relative } .partner .exclusive i { color: var(--dark); position: absolute; left: 0; top: 4px; width: 25px; height: 19px; display: block } .partner .getstarted .overlay { padding: 40px 0 0; } .mt40 { margin-top: 40px; } .help { margin: 20px 0 40px; } .help .overlay { background-color: rgba(0,0,0,.4); padding: 60px 0 80px; } .help ul { list-style: none; padding-left: 10px; } .help > div:first-of-type li { margin: 15px 0; } .help > div:first-of-type li i { vertical-align: middle; color: var(--light-30); margin-right: 10px; border: 2px solid var(--accent); border-radius: 50px; padding: 6px 4px; } .help > div:last-of-type h2, .help > div:last-of-type h2 span, .help > div:last-of-type p, .help > div:last-of-type li, .help > div:last-of-type a { text-align: center; color: #fff; text-shadow: 1px 1px 3px #000; } .help > div:last-of-type h2 { font-size: var(--32px); } .help > div:last-of-type h2 span { display: block; } .help > div:last-of-type li a:hover { text-decoration: none; color: var(--accent); } .help > div > div { font-size: var(--24px); background-image: url(/images-content/collaborative-work.jpg); background-size: cover; background-position: center; } .help > div:last-of-type .btn { font-size: var(--19px); text-shadow: none; margin-top: 60px; } .rmp h2 { font-size: var(--24px); background-color: var(--dark); color: var(--light); padding: 10px 20px; margin: 40px 10px 0; text-shadow: none; } .rmp .flex div { position: relative; padding-left: 100px; } .rmp .flex div svg { position: absolute; top: 10px; left: 0; } .rmp .advantages > ul { margin-top: 20px; } .rmp .advantages img { margin: 40px 10px; } .rmp .cta, .rmp .cta span { display: block; margin: 0 10px; } .rmp .cta { background-color: rgba(238,238,238,.3); color: var(--dark-mono); padding: 40px 20px; margin: 40px 10px 60px; border: 3px solid var(--accent); border-radius: 100px; text-align: center } .rmp .cta span { color: var(--dark-accent) } .rmp .faq .mbnone { margin-bottom: 0; } .rmp .faq span { font-size: var(--20px); color: var(--light-30); } .rmp .faq li { margin: 5px 0; } form { margin: 20px 10px; } legend { font-size: var(--25px); text-transform: uppercase } form .table.half > div:first-of-type { padding-right: 1%; } form .table.half > div:last-of-type { padding-left: 1%; } form .grid { grid-gap: 0 15px; } form input, form textarea { display: block; border-radius: 0; } form input::placeholder, form textarea::placeholder { color: var(--dark-mono, #4d4d4d) } form label { text-align: left; display: block; letter-spacing: 1px; margin-bottom: 15px } .getstarted label { color: var(--light); font-size: var(--20px); } form input[type=text], form input[type=email], form input[type=tel], form input[type=submit], form textarea { font-family: 'Questrial',sans-serif; font-size: var(--19px); font-display: optional } form input[type=text], form input[type=email], form input[type=tel] { padding: 0 20px; } form input[type=text], form input[type=email], form input[type=tel], form textarea { background-color: var(--semi-light); border: 1px solid #eee } 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; } #update .grid { grid-template-columns: 1fr 2fr } #update textarea { height: 204px } .formbox label input { display: inline-block } .formbox { text-align: left; padding: 9px 20px; border: 2px solid var(--semi-light); margin-bottom: 20px } .formbox label { vertical-align: middle; display: inline-block; margin: 0 0 0 20px } form textarea { height: 150px; padding: 20px; } form input[type=submit] { background-color: var(--dark); color: #fff; padding: 15px 40px; border: none; border-radius: 50px; display: inline-block; -webkit-appearance: none; } form input[type=submit]:hover, form input[type=submit]:focus { cursor: pointer; } .getstarted #contact input[type=text], .getstarted #contact input[type=email], .getstarted #contact input[type=tel], .getstarted #contact textarea { background-color: rgba(255,255,255,.9); } .form-margin { margin: 40px 0 50px; } .templates { font-size: var(--18px); text-align: left; margin: 40px 10px 0; } .templates a { display: block; background-color: #f5f5f5; color: var(--dark-mono); box-shadow: 0 5px 10px rgba(0,0,0,.2); margin: 20px 0 } .templates a:hover .btn { background-color: var(--dark-accent); } .templates.grid { grid-gap: 20px; } .templates.grid div { position: relative; } .templates h2 { color: var(--dark); margin: 20px 0 0 10px; } .templates p { margin: 0 0 10px 10px; } .templates li { margin: 0; } .templates .btn { margin: 40px 20px 20px; transition: ease-in-out .3s; } .templates img { object-fit: cover; object-position: top; width: 100%; max-height: 400px; } footer .wrap { padding: 20px 0 } footer .table > div:nth-of-type(3) p { text-align: right; } .social a { display: block; text-align: center; padding: 0; color: var(--light-45-mono); margin: 5px } .social i { display: block; width: 38px; height: 38px; } .social a:hover { color: var(--light-30) } .social li { display: inline-block; } .social img { height: 25px; width: 25px; top: 50%; transform: translateY(-50%); position: relative } .back { margin: 0; font-size: var(--15px); text-align: center } .policies li { display: inline-block } .policies a { padding: 5px 20px; margin: 5px; display: block; border-radius: 50px; text-align: center } .hide { display: none; } .ccpaNotice { background-color: transparent !important; } .error { font-weight: bold; color: #ff0000; } .plan-row { display: flex; flex-direction: row; flex-wrap: nowrap; border-bottom: 1px solid #ccc; align-items: center; align-content: stretch; } .plan-row div { text-align: center; padding: 10px; flex: 1 0 0 } .plan-row:first-of-type { border-bottom: 0; background-color: rgba(66, 51, 143, .9); } .plan-row div:first-of-type { text-align: left; } .plan-mobile { display: none } .plans h2, .plans .headers span { color: #fff; text-shadow: none } .plans h2 { font-size: var(--22px); text-align: center; line-height: 1.2; color: var(--light); margin: 0; } .plans h2 .smaller { font-size: var(--16px); text-transform: none; display: block; } .plans .fa { font-size: var(--14px); padding: 8px 6px; border-radius: 100%; } .plans .fa-check, .plan-mobile .fa-check { background-color: rgba(68, 219, 151, .1); color: #34A874; } .plans .fa-times { background-color: rgba(219, 117, 101, .1); color: #D46E5B; } .plan-row b { font-weight: normal } main .post .postThumbnail img { display: block; float: none !important; width: 100% !important; height: 100% !important; max-width: 100%; object-fit: cover; object-position: 50% 40%; margin: 0; padding: 0 } .articles .postThumbnail { padding: 0 10px; width: calc(100% - 20px) } .postThumbnail { height: 250px; width: 100% } .postThumbnail:empty { display: none } main .post .postThumbnail img { display: block; float: none !important; width: 100% !important; height: 100% !important; max-width: 100%; object-fit: cover; object-position: 50% 40%; margin: 0; padding: 0 } .articles .postThumbnail { padding: 0 10px; width: calc(100% - 20px) } .posts .post > p:nth-of-type(2):first-letter { color: var(--light); border-radius: 3px; box-shadow: 4px 4px 2px var(--dark); background-color: var(--light-30); padding: 6px 9px 3px; margin: 0 10px 6px 0; float: left; font-size: var(--46px); line-height: .9; text-shadow: 1px 1px 1px #000 } .posttags { margin-top: 60px } .blogintro + .blogs .posttags { margin-top: 1em } #secure .table div .table div p { margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0; } #secure .table div:nth-of-type(2) p:last-of-type { padding-top: 0; margin-top: 2px; } #secure fieldset fieldset legend { font-size: var(--18px); text-transform: none; font-weight: bold } #ccpa input[type=checkbox], #ccpa input[type=radio] { display: inline; } a[onclick="target='_blank'"], a[target="_blank"] { position: relative } a[onclick="target='_blank'"] em, a[target="_blank"] em { padding: 4px; border: 1px solid black; color: #000; background-color: #fff; text-decoration: none; position: absolute; left: 0; bottom: -30px; z-index: 999; width: 130px; display: none; font-size: var(--12px); font-style: normal; font-weight: 400; font-family: sans-serif; text-align: center !important;text-transform:none;letter-spacing:0 } a[onclick="target='_blank'"]:hover em, a[target="_blank"]:hover em, a[onclick="target='_blank'"]:focus em, a[target="_blank"]:focus em { display: block;} header a[onclick="target='_blank'"] em, header a[target="_blank"] em { left: 0; } .ccpaNotice a em { bottom: unset !important; top: -30px } .thumbnails a i { width: 120px; left: 0 } @media(prefers-reduced-motion) { * { transition: all 0s !important;animation:none } } @media(max-width:62.5rem) { .cf-landing { width: 100%; max-width: 100%; } header .grid { grid-template-columns: 1fr } header { padding: 10px 0; position: relative } .jump { top: -11px } header .logo img { width: 360px; height: 124px; margin: 0 auto } nav ul { display: block; width: auto !important; text-align: center !important } nav li a { padding: 5px; margin: 5px } .featured h2 span { display: block } .hero.home h1 { max-width: 100%; text-align: center; } .featured .overlay { background-color: rgba(0,0,0,.5); } .featured h2 { font-size: var(--28px) } .articles { background-position: 50% 15%; background-attachment: local } .thumbnails li { width: calc(20% - 10px); } .thumbnails a { max-width: 100% } .articles, .getstarted { background-attachment: scroll } .partner .exclusive ul { padding-left: 10px } .partner .exclusive li { width: auto !important; display: block; } #webAssessment { background: none; } .postThumbnail { margin-top: -10px !important } .plans { overflow: hidden } .plans h2 { padding: 0 } .plan-blank { display: none } .plan-row { flex-wrap: wrap } .plan-row > div:first-of-type { width: 100%; flex: 1 0 100%; text-align: center; font-size: var(--20px); padding: 20px 0 } .plan-row > div:last-of-type { display: none } .plan-row > div { flex: 1 1 0; width: auto } .extra { display: none } .plan-mobile { display: block } .plan-mobile ul { list-style: none } .plan-mobile .fa-check { margin-right: 8px } .values .grid { grid-template-columns: 1fr 1fr } .values .grid > li { padding: 20px 10px 20px 60px; } .rmp .imgRight { float: none; max-width: calc(100% - 20px) !important; margin: 20px 10px 0 !important; } } @media(max-width:47.99rem) { .hero.home { height: 40rem } .hero.home .wrap { top: 15% } .articles { background-position: top; background-repeat: repeat; background-color: rgba(255,255,255,.5); background-blend-mode: lighten; } .countup .table.quad > div { display: inline-block; width: 50% } .services { margin: 20px 0 40px } footer .table > div { display: block; width: auto !important; padding: 0 !important; vertical-align: unset !important } footer p, footer ul { text-align: center !important } footer { padding: 0 } .grid.third.address { grid-template-columns: 1fr } .secure .table > div { display: block; width: 93%; } .featured .grid.panel { grid-template-columns: 1fr } .featured .panel > div { height: auto } .featured .overlay { padding: 40px 15px; } .featured h2 span { display: inline } .blank { display: none !important } #update .grid { grid-template-columns: 1fr } .policies a { border: 1px solid var(--accent) } } @media(max-width:43.75rem) { .thumbnails li { width: calc(25% - 10px) } .rmp h2 { margin: 40px 0 } .team .grid.half, #secure .grid.half { grid-template-columns: 1fr } .team img { margin: 0 0 0 24px } body #blogsidebar ul:first-of-type { grid-template-columns: 1fr 1fr } .hero p { border-radius: 0 } } @media(max-width:37.5rem) { .services { margin: 20px 0 0 } .grid.half, .grid.third { grid-template-columns: 1fr } form .grid.half > div { width: 100%; margin: 0 } .articles .post, .table.tag > div { display: block; width: auto !important; padding: 0 !important } .grid.half > div { margin: 1em auto } .services .grid.half > div:nth-of-type(odd), .secure .grid.half > div:nth-of-type(odd) { background-position: 5% center !important } .services .grid.half > div:nth-of-type(even), .secure .grid.half > div:nth-of-type(even) { background-position: 95% center !important } .secure .grid > div { padding: 30px 3% } .services .table { border: none !important } .services .table > div { border-width: 10px; border-color: #fff; border-style: none none solid !important } .services .table > div:first-of-type { background-position: 5% center !important } .services .table > div:last-of-type { background-position: 95% center !important } .services a { padding: 15px 30px; min-height: 0 } .articles .post:last-of-type { border-bottom: none } .articles { padding: 10px 0 } .articles .postThumbnail { padding: 0; width: 100% } .values .grid { grid-template-columns: 1fr } .values .grid > li { padding: 0 10px 0 3.75rem } main .blogsidebar ul:first-of-type { grid-template-columns: 1fr 1fr } .templates .grid.half > div { margin: 0 } } @media(max-width:31.25rem) { .table.half > div, .table.third > div { display: block; width: auto !important; padding: 0 !important } .hero.home h1 { font-size: var(--42px) } .team img { float: none; width: 250px; margin: 0 auto } .team h3 { text-align: center } .team .table { display: inline } .team .table > div { padding: 20px 10px !important; outline: none; margin: 10px 0 } .team br { display: none } main .imgRight, main .imgLeft { float: none; max-width: 100%; margin: 0 auto; width: 100% } .thumbnails li { width: calc((100% / 3) - 10px) } form input[type=text], form input[type=email], form input[type=tel] { padding: 0 10px; width: calc(100% - 20px) } form textarea { padding: 20px 10px; width: calc(100% - 20px) } .plans { width: 500px; } .plan-blank { display: flex; color: #fff; position: relative } .plan-row > div:first-of-type { text-align: center } .plan-row b { display: block } .mobile-scroll { overflow-x: scroll } body main .postThumbnail { width: 100%; height: 250px } } @media(max-width:25rem) { .countup .table.quad > div { display: block; width: auto } .countup strong { font-size: var(--36px) } .countup p { font-size: var(--19px); padding: 0 } .countup div { background-size: contain } .hero.home h1 { font-size: var(--36px) } .hero.home .wrap { top: 30px; transform: none } .thumbnails li { width: calc(50% - 10px) } header .logo img { width: 300px; height: 103px; margin: 0 auto } #blogsidebar ul:first-of-type { grid-template-columns: 1fr !important } .rmp .flex div svg { position: relative; top: unset; left: unset; margin: 0 auto; display: block; } .rmp .flex div { padding: 0 } .rmp .flex p { text-align: center } }