* { box-sizing: border-box; } img { max-width: 100% !important; } .two-columns { display: table; } .two-columns > .column-1, .two-columns > .column-2 { width: 50%; float: left; padding: 0 1em; } .hero-bar { background: #195070; color: #6F90C0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: linear-gradient(120deg, #195076 35%, #2176b9 100%); } .hero-bar-sub { padding: 60px 0; background-color: #E8F0F5; } .hero-bar .brand { color: #E8F0F5; font-size: 28px; float:left; padding: 15px 0; text-decoration: none; letter-spacing: 2px; } .hero-bar .info { text-align: left; padding-left: 20px; } .hero-bar .info h1 { color: white; font-weight: normal; font-size: 36px; font-style: italic; line-height: 56px; margin-bottom: 12px; } .hero-bar .info p { font-size: 18px; line-height: 28px; } .hero-bar ul.nav li { margin: 0 4px; } .hero-bar .video { border: 0px solid #E8F0F5; border-radius: 5px; width: auto; height: 280px; } .hero-bar .embeded_video { height: 0; position: relative; overflow: hidden; padding-bottom: 56%; margin-bottom: 20px; } .hero-bar .embeded_video iframe, .hero-bar .embeded_video object, .hero-bar .embeded_video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero-bar-content { margin: 40px 0; } .hero-bar .btn { min-width: 60px; background: rgba(255,255,255,.1); display: inline-block; margin: 10px 0 0 0; padding: 8px 12px 8px; clear: both; color: #fff; font-size: 14px; text-decoration: none; border: none; } .hero-bar .btn.btn-upper { text-transform: uppercase; } .hero-bar .btn:hover { background: rgba(255,255,255,.25); } .hero-bar .btn:active { -webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); } .hero-bar .btn, .footer-bar .btn { color: white; margin-left: 0.25em; margin-right: 0.25em; } .hero-bar .btn-red, .footer-bar .btn-red { font-size: 16px; border: 2px solid rgba(255,255,255,.4); border-radius: 5px; background-color: #d14836; } .hero-bar .btn-red:hover, .footer-bar .btn-red:hover { background: rgba(209, 72, 54, .9) !important; } .hero-bar .btn-blue, .footer-bar .btn-blue { font-size: 16px; border: 2px solid rgba(255,255,255,.4); border-radius: 5px; background-color: #0F6CBD; } .hero-bar .btn-blue:hover, .footer-bar .btn-blue:hover { background: rgba(15, 108, 189, 0.9) } .footer-bar { margin: 2em auto; } .footer-bar .btn { font-size: 20px; } .hero-bar .btn, .footer-bar .btn .banner .dot { -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); } .home-footer { margin: 10px 0 !important; } footer { color: hsla(0,0%,100%,.7); background: #262831; padding: 3rem 2rem; margin-top: 4rem; } footer h4 { color: #fff; font-weight: 500; font-size: 1.275rem; margin-bottom: 0.5rem; } footer ul, footer li { list-style: none; margin: 0; padding: 0; } footer ul { display: block; padding-bottom: 1.25rem; min-height: 28px; } footer ul > li > a { display: block; padding: .3rem 0; font-size: 1rem; color: hsla(0,0%,100%,.7); text-decoration: none; } footer ul > li > a:hover { color: #fff !important; } footer a.footer-social-link { padding: 0; text-decoration: none; margin: 0 0.5rem 0 0; display: inline-block; } footer a.footer-social-link > img { width: 26px; height: 26px; opacity: 0.7; display: inline-block; } footer a.footer-social-link:hover > img { opacity: 1; } footer .footer-row { margin: 0 auto; max-width: 950px; width: 100%; justify-content: space-between!important; display: flex; flex-wrap: wrap; font-size: 1rem; font-weight: 400; line-height: 1.5; } footer .footer-column { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } @media (min-width: 576px) { footer .footer-column { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media (min-width: 992px) { footer .footer-column { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } .app-feature a { color: #6F90C0; text-decoration: none; } .app-feature a:hover { color: #6F90C0; text-decoration: underline; } .app-feature { padding-left: 56px; font-size: 18px; line-height: 24px; position: relative; } .app-feature .fa { position: absolute; top: 0; left: 0; } .app-feature small, .app-feature small a { display: block; font-size: 13px; } .plans { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; } .plans > .plan { display: block; width: 30%; max-width: 300px; background: rgb(255, 255, 255); box-shadow: rgba(25, 80, 112, 0.25) 0px 0px 0px 1px inset, rgb(0 0 0 / 10%) 0px 5px 10px 0px; border: none; border-radius: 10px; padding: 20px; margin: 0 5px; min-height: 100%; } .plans > .plan ul.plan-column { color: #195070; background-color: #fff; list-style-type: none; border-radius: 10px; border: none; margin: 0; padding: 0; } .plans > .plan ul.plan-column > li { line-height: 24px; padding: 10px; text-align: center; border-bottom: 1px solid rgba(25, 80, 112, 0.1); } .plans > .plan ul.plan-column > li.highlight { background: #E8F0F5; font-weight: 600; } .plans > .plan ul.plan-column > li:last-child { border: none; } .plans > .plan ul.plan-column > li.header { line-height: 40px; font-size: 26px; font-weight: 300; padding: 10px 10px; text-align: center; } .plans > .plan .plan-amount { font-weight: 600; font-size: 20px; line-height: 40px; } .plans > .plan .plan-amount-info { color: #999; font-size: 14px; line-height: 22px; margin-bottom: 8px; font-weight: 500; } .plans > .plan .btn-red { font-size: 18px; padding: 14px 20px; border: none; text-transform: uppercase; } .price-column { float: left; width: 50%; padding: 8px; } .price { color: #195070; background-color: #e5eff5; list-style-type: none; border-radius: 4px; border: 4px solid rgba(25, 80, 112,.5); margin: 0; padding: 0; } .price:hover { } .price li.header { background: white; font-size: 29px; } .price li { line-height: 24px; border-bottom: 1px solid #eee; padding: 10px 10px; text-align: center; border-bottom: 1px solid #ddd; } .price li small{ font-size: 14px; } /*! Lity - v2.2.2 - 2016-12-14 * http://sorgalla.com/lity/ * Copyright (c) 2015-2016 Jan Sorgalla; Licensed MIT */ .lity { z-index: 9990; position: fixed; top: 0; right: 0; bottom: 0; left: 0; white-space: nowrap; background: #0b0b0b; background: rgba(0, 0, 0, 0.9); outline: none !important; opacity: 0; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .lity.lity-opened { opacity: 1; } .lity.lity-closed { opacity: 0; } .lity * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .lity-wrap { z-index: 9990; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: center; outline: none !important; } .lity-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .lity-loader { z-index: 9991; color: #fff; position: absolute; top: 50%; margin-top: -0.8em; width: 100%; text-align: center; font-size: 14px; font-family: Arial, Helvetica, sans-serif; opacity: 0; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .lity-loading .lity-loader { opacity: 1; } .lity-container { z-index: 9992; position: relative; text-align: left; vertical-align: middle; display: inline-block; white-space: normal; max-width: 100%; max-height: 100%; outline: none !important; } .lity-content { z-index: 9993; width: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; -o-transition: -o-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease, -o-transform 0.3s ease; } .lity-loading .lity-content, .lity-closed .lity-content { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .lity-content:after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; display: block; right: 0; width: auto; height: auto; z-index: -1; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } .lity-close { z-index: 9994; width: 35px; height: 35px; position: fixed; right: 0; top: 0; -webkit-appearance: none; cursor: pointer; text-decoration: none; text-align: center; padding: 0; color: #fff; font-style: normal; font-size: 35px; font-family: Arial, Baskerville, monospace; line-height: 35px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); border: 0; background: none; outline: none; -webkit-box-shadow: none; box-shadow: none; } .lity-close::-moz-focus-inner { border: 0; padding: 0; } .lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited { text-decoration: none; text-align: center; padding: 0; color: #fff; font-style: normal; font-size: 35px; font-family: Arial, Baskerville, monospace; line-height: 35px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); border: 0; background: none; outline: none; -webkit-box-shadow: none; box-shadow: none; } .lity-close:active { top: 1px; } /* Image */ .lity-image img { max-width: 100%; display: block; line-height: 0; border: 0; } /* iFrame */ .lity-iframe .lity-container, .lity-youtube .lity-container, .lity-vimeo .lity-container, .lity-facebookvideo .lity-container, .lity-googlemaps .lity-container { width: 100%; max-width: 964px; } .lity-iframe-container { width: 100%; height: 0; padding-top: 56.25%; overflow: auto; pointer-events: auto; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-overflow-scrolling: touch; } .lity-iframe-container iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } .lity-hide { display: none; } /* tablet */ @media (max-width: 980px) { body{ min-width:720px; padding-bottom: 30px;} .hide-mobile { display: none; } .container_24 { margin-left:auto; margin-right:auto; width:720px !important; } .container_24 .grid_8, .container_24 .grid_12, .container_24 .grid_24 { margin-bottom: 20px; width: 100% !important; } .grid_24.header-bar .nav.navbar-nav { float: none; margin: 0 -2em 2em; display: flex; justify-content: center; } .two-columns > .column-1, .two-columns > .column-2 { float: none; width: 100%; } .two-columns > .column-1.column-with-video { float: none; width: 100%; display: contents; } img.image { width: 100%; margin-bottom: 30px; } img.image_smaller { margin-bottom: 30px; } .btn { white-space: normal; } .pull-right { width: 100%; float: none; } .home-footer { font-size: 80%; } .two-columns.columns-flip > .column-1 { display: table-footer-group; } .two-columns.columns-flip > .column-2 { display: table-header-group; } footer ul > li > a { font-size: 120%; line-height: 48px; min-height: 48px; padding: 0; } div.customers { margin: 2em auto; background-size: contain; } .hero-bar .btn { min-width: 10px !important; padding: 10px 13px; font-size: 110% !important; } .jq-dropdown .jq-dropdown-menu, .jq-dropdown .jq-dropdown-panel { width: 100%; max-width: 100%; margin: 0 auto !important; } .jq-dropdown .jq-dropdown-menu label, .jq-dropdown .jq-dropdown-menu li > a, .jq-dropdown .jq-dropdown-menu li > b { font-size: 115% !important; padding: 14px !important; } .jq-dropdown .jq-dropdown-menu li > b { padding-left: 0 !important; } .jq-dropdown .jq-dropdown-menu li { overflow: hidden; border-bottom: 1px solid rgb(232 240 245); } .jq-dropdown.jq-dropdown-tip { margin-top: 1em; left: 0.5em !important; right: 0.5em !important; } .hero-bar ul.nav li { margin: 0 2px; float: none; display: inline-block; } .hero-bar .video { height: auto; } .hero-bar .info p { /*font-size: 14px; line-height: 22px; */ } .header-bar { text-align: center; } } /* mobile */ @media only screen and (max-width: 759px) { body { min-width: 320px; } .container_24 { width: calc(90vw) !important; } .hero-bar .info h1 { line-height: 1.3em } .grid_24.header-bar .nav.navbar-nav { float: none; margin: 0 -2em 2em; display: flex; justify-content: center; } .hero-bar .brand { float: none; } .price-column { width: 100%; } .container_24 .prefix_3 { padding-left: 0px; } .container_24 .suffix_3 { padding-right: 0px; } .hero-bar .info { padding-left: 0px; } .hero-bar-content.clearfix { margin-top: 10px; } .plans { flex-direction: column; margin-left: -10px; } .plans > .plan { width: 100%; display: block; min-width: fit-content; max-width: none; margin-bottom: 10px; } } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .youtube_play_button { background: red; border-radius: 50% / 10%; color: #FFFFFF; font-size: 2em; /* change this to change size */ height: 3em; margin: 20px auto; padding: 0; position: relative; text-align: center; text-indent: 0.1em; transition: all 150ms ease-out; width: 4em; } .youtube_play_button:hover { background: darkorange; } .youtube_play_button::before { background: inherit; border-radius: 5% / 50%; bottom: 9%; content: ""; left: -5%; position: absolute; right: -5%; top: 9%; } .youtube_play_button::after { border-style: solid; border-width: 1em 0 1em 1.732em; border-color: transparent transparent transparent rgba(255, 255, 255, 0.75); content: ' '; font-size: 0.75em; height: 0; margin: -1em 0 0 -0.75em; top: 50%; position: absolute; width: 0; } @media only screen and (max-width: 768px ) { .video-container { margin-bottom: 1em; } div.customers { text-align: center; padding-left: 0px; } div.customers span { text-align: center; line-height: initial; float: none; margin-left: 0; } } .quote-list { width: 100%; direction: ltr; grid-column: 2 / -2; column-count: 2; column-gap: 4em; max-width: 850px; margin: 1em auto; padding: 0; max-height: 170px; } .quote-list-item { margin: 3em 0 0 0; display: inline; } .quote-list-item p { color: #1d2d35; font-size: 125%; margin-bottom: 0.75em; line-height: 1.5; } .quote-list-item cite { display: block; margin: 0; padding: 0; font-size: 100%; font-weight: bold; font-style: italic; line-height: 1.5; } @media only screen and (max-width: 768px ) { .quote-list { grid-column: 1 / -1; column-count: 1; max-height: inherit; } }