/* Table Of Contents 1.) Typography 2.) Header 3.) Content - Main 4.) Footer 5. ) Modal ========================================*/ /* 1.) Typography ----------------------------------------*/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, ol, ul, li { padding: 0; margin: 0; } /*= Body =======================================================*/ body { -webkit-font-smoothing: antialiased; font-family: "Lato", sans-serif; font-size: 1.25rem; font-weight: 400; line-height: 1.5; color: #525456; background: white; margin: 0; padding: 0; } h1 + p { font-size: 1.5rem; margin-top: 0.5rem; } sub, sup { font-size: 50%; } img { max-width: 100%; height: auto; } /*= Links =======================================================*/ a { text-decoration: underline; text-underline-offset: 0.125rem; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; cursor: pointer; } a:hover, a:focus, a:active { text-decoration: underline; } a:visited { outline: 0; } a[href^="tel:"], a[href^="fax:"] { color: #F22E06; text-decoration: underline; } a:hover[href^="tel:"], a:focus[href^="tel:"], a:hover[href^="fax:"], a:focus[href^="fax:"] { color: #CE2206; text-decoration: underline; } /*= Heading H1, H2, H3, H4, H5, H6, P =======================================================*/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 900; color: #121416; padding-bottom: 24px; } h1, .h1 { font-size: 4rem; line-height: 1.13; } h2, .h2 { font-size: 48px; line-height: 60px; } .box h2 { font-size: 64px; } h3, .h3 { font-size: 32px; line-height: 48px; } h4, .h4 { font-size: 24px; line-height: 32px; } h5, .h5 { font-size: 22px; line-height: 30px; } h6, .h6 { font-size: 20px; line-height: 28px; } h1 .light { font-weight: 500; } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a { font-weight: inherit; font-style: inherit; color: inherit; text-decoration: none; } h1 a:hover, .h1 a:hover, h2 a:hover, .h2 a:hover, h3 a:hover, .h3 a:hover, h4 a:hover, .h4 a:hover, h5 a:hover, .h5 a:hover, h6 a:hover, .h6 a:hover { color: #CE2206; text-decoration: underline; } h1:last-child, .h1:last-child, h2:last-child, .h2:last-child, h3:last-child, .h3:last-child, h4:last-child, .h4:last-child, h5:last-child, .h5:last-child, h6:last-child, .h6:last-child { padding-bottom: 0; } p { padding-bottom: 36px; } p:last-child { padding-bottom: 0; } em { font-style: italic; } em.fal, em.far, em.fas, em.fab { font-style: normal; } strong { font-weight: 700; } @media (max-width: 1199px) { h1, .h1, h2, .h2 { font-size: 40px; line-height: 52px; } h3, .h3 { font-size: 28px; line-height: 42px; } h4, .h4 { font-size: 22px; line-height: 30px; } h5, .h5 { font-size: 20px; line-height: 28px; } h6, .h6 { font-size: 18px; line-height: 26px; } p { padding-bottom: 32px; } } @media (max-width: 767px) { h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { padding-bottom: 16px; } h1, .h1, h2, .h2 { font-size: 32px; line-height: 42px; } h3, .h3 { font-size: 26px; line-height: 36px; } h4, .h4 { font-size: 20px; line-height: 28px; } h5, .h5 { font-size: 18px; line-height: 26px; } h6, .h6 { font-size: 16px; line-height: 24px; } p { padding-bottom: 24px; } } /*= Unorder List =======================================================*/ ul, ol { padding-left: 48px; list-style: none; } li { position: relative; padding-bottom: 8px; } li:last-child { padding-bottom: 36px; } ul li ul, ol li ol { padding: 10px 0 0 0; } ul:last-child li:last-child, ol:last-child li:last-child { padding-bottom: 0; } @media (max-width: 1199px) { li { padding-bottom: 12px; } li:last-child { padding-bottom: 32px; } } @media (max-width: 767px) { li { padding-left: 30px; padding-bottom: 8px; } li:last-child { padding-bottom: 24px; } ul li:before { width: 22px; height: 22px; background-size: 22px auto; top: 2px; } } /*= Order List =======================================================*/ ol { counter-reset: item; } ol>li { counter-increment: item; padding-left: 25px; } ol>li:before { content: counter(item)"."; font-weight: 600; color: #121416; position: absolute; top: 0; left: 0; padding: 0; margin: 0; } /* #Input ================================================= */ select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: 0; } select, textarea, input { -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; } label { width: 100%; float: none; display: inline-block; vertical-align: top; font-family: "Lato", sans-serif; font-weight: 400; font-size: 16px; color: #121416; line-height: 24px; letter-spacing: normal; padding: 0 0 8px 0; margin: 0; } select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { width: 100%; height: 64px; font-family: "Lato", sans-serif; font-weight: 400; font-size: 16px; color: #121416; line-height: 24px; letter-spacing: normal; white-space: nowrap; text-overflow: ellipsis; background: #ffffff; box-shadow: none; border: 1px solid #c8c8c8; border-radius: 8px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; position: relative; padding: 24px 24px; margin: 0; } textarea { height: 210px; white-space: normal; outline: none; resize: none; padding-top: 24px; padding-bottom: 24px; } ::-webkit-input-placeholder, ::-webkit-textarea-placeholder { color: #080707; } input::-moz-placeholder, textarea::-moz-placeholder { color: #080707; } ::-moz-placeholder { color: #080707; } ::-ms-input-placeholder { color: #080707; } select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { outline: 0; border-color: #055DA0; } @media (max-width: 1199px) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { height: 56px; border-radius: 6px; padding: 16px 20px; } textarea { height: 180px; padding-top: 16px; padding-bottom: 16px; } } @media (max-width: 767px) { label { font-size: 14px; line-height: 20px; } select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { height: 48px; font-size: 14px; line-height: 18px; border-radius: 4px; padding: 10px 16px; } textarea { height: 160px; padding-top: 10px; padding-bottom: 10px; } } /* #Buttons ================================================== */ button { background: none; border: none; box-shadow: none; text-decoration: none; white-space: normal; cursor: pointer; outline: 0; padding: 0; margin: 0; } button:hover, button:focus, button:active, button:active:focus, button.active, button.active:focus { outline: 0; } .btn, .button, input[type="button"], input[type="submit"] { display: inline-flex; vertical-align: middle; font-family: "Lato", sans-serif; font-weight: 700; font-size: 20px; color: #ffffff; line-height: 1.6; letter-spacing: normal; text-align: center; text-transform: none; text-decoration: none; white-space: normal; background: linear-gradient(180deg, #F22E06 0%, #CE2206 100%); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); border-radius: 8px; border: none; overflow: hidden; position: relative; z-index: 1; cursor: pointer; outline: 0; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; padding: 1rem 2rem 1rem 1rem; margin: 0; } .btn.nav-link { display: block; } .btn:hover, .btn:focus, .btn:active, .btn:active:focus, .btn.active, .btn.active:focus, .button:hover, .button:focus, .button:active, .button:active:focus, .button.active, .button.active:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active, input[type="button"]:active:focus, input[type="button"].active, input[type="button"].active:focus, input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active, input[type="submit"]:active:focus, input[type="submit"].active, input[type="submit"].active:focus .btn:not(:disabled):not(.disabled).active, .button:not(:disabled):not(.disabled):active { color: #ffffff; text-decoration: none; background: linear-gradient(180deg, #CE2206 0%, #F22E06 100%); } .btn-blue { background: linear-gradient(180deg, #3194E9 0%, #257CC7 100%); } .btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue:active:focus, .btn-blue.active, .btn-blue.active:focus, input[type="button"].btn-blue:hover, input[type="button"].btn-blue:focus, input[type="button"].btn-blue:active, input[type="button"].btn-blue:active:focus, input[type="button"].btn-blue.active, input[type="button"].btn-blue.active:focus, input[type="submit"].btn-blue:hover, input[type="submit"].btn-blue:focus, input[type="submit"].btn-blue:active, input[type="submit"].btn-blue:active:focus, input[type="submit"].btn-blue.active, input[type="submit"].btn-blue.active:focus { background: linear-gradient(180deg, #257CC7 0%, #3194E9 100%); } .disabled { cursor: not-allowed; filter: alpha(opacity=65); opacity: .65; } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } a.btn.disabled, fieldset[disabled] a.btn { pointer-events: none; } .btn-out { float: none; display: inline-block; vertical-align: top; margin: 0 -10px -16px -10px; } .btn-out a { margin: 0 10px 16px 10px; } @media (max-width: 1199px) { .btn, .button, input[type="button"], input[type="submit"] { font-size: 18px; line-height: 28px; border-radius: 6px; padding: 14px 28px; } .btn-out { margin: 0 -6px -12px -6px; } .btn-out a { margin: 0 6px 12px 6px; } } @media (max-width: 767px) { .btn, .button, input[type="button"], input[type="submit"] { font-size: 16px; line-height: 24px; border-radius: 6px; padding: 12px 24px; } } figure, .figure { vertical-align: top; } /* #Owl-carousel =======================================================*/ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { width: 100%; display: inline-block; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* Owl Carousel - Animate Plugin */ .owl-carousel .animated { animation-duration: 100ms; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* Owl Carousel - Auto Height Plugin */ .owl-height { transition: height 500ms ease-in-out; } /* Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item { /** This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong calculation of the height of the owl-item that breaks page layouts */ } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { max-height: 0; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } /* Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } /* Previous and Next */ .owl-nav button { width: 39px; height: 39px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-weight: inherit; font-size: 14px; color: #055DA0; line-height: 1em; text-decoration: none; text-align: center; background: #ffffff; box-shadow: none; border: 1px solid rgba(5, 93, 160, 0.3); border-radius: 360px; position: absolute; top: 50%; transform: translate(0, -50%); cursor: pointer; z-index: 2; outline: 0; padding: 0; margin: 0; } .owl-nav button:hover, .owl-nav button:focus, .owl-nav button:active { color: #ffffff; background: #055DA0; outline: 0; } .owl-nav button.owl-prev { left: 0; padding-right: 2px; } .owl-nav button.owl-next { right: 0; padding-left: 2px; } .owl-nav button.disabled { color: rgba(5, 93, 160, .20); cursor: default; } .owl-nav button.disabled:hover, .owl-nav button.disabled:focus, .owl-nav button.disabled:active { color: rgba(5, 93, 160, .20); } .owl-nav.disabled { display: none; } /* Bullets */ .owl-dots { width: 100%; float: none; display: inline-block; vertical-align: top; text-align: center; line-height: .5em; margin: 32px 0 0 0; } .owl-dots button.owl-dot { width: 16px; height: 16px; float: none; display: inline-block; vertical-align: top; text-align: center; background: none; border-radius: 360px; box-shadow: none; border: 1px solid #055DA0; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; cursor: pointer; padding: 0; margin: 0 6px; } .owl-dots button.owl-dot:hover, .owl-dots button.owl-dot:focus, .owl-dots button.owl-dot:active, .owl-dots button.owl-dot.active { background: #055DA0; } .owl-dots.disabled { display: none; } /*= Container - Main =======================================================*/ .container-main { width: 100%; /* float: left; */ background: #FFFFFF; position: relative; overflow: hidden; } .container { width: 100%; max-width: 1295px; padding: 0 40px; } @media (max-width: 767px) { .container { max-width: 600px; padding: 0 20px; } } /* Social - Links */ .social-links { width: 100%; float: none; display: inline-block; vertical-align: top; } .social-links ul { float: none; display: inline-block; vertical-align: top; padding: 0; margin: 0 -5px -10px -5px; } .social-links ul li { float: none; display: inline-block; vertical-align: top; padding: 0 5px 10px 5px; margin: 0; } .social-links ul li:before { display: none; } .social-links ul li a { font-size: 28px; color: #121416; line-height: 1em; text-align: center; text-decoration: none; border-radius: 360px; } .social-links ul li a span { display: none; } .social-links ul li a:hover, .social-links ul li.active a { color: #F22E06; } /* Heading - Txt */ .heading-txt { width: 100%; float: none; display: inline-block; vertical-align: top; color: #323436; text-align: center; padding: 0 0 120px 0; } .heading-txt:last-child { padding-bottom: 0; } .heading-txt .aside { width: 100%; float: none; display: inline-block; vertical-align: top; } @media (max-width: 1199px) { .heading-txt { padding: 0 0 80px 0; } } @media (max-width: 767px) { .heading-txt { padding: 0 0 60px 0; } } /* 2.) Header ----------------------------------------*/ .header-main { --shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); background: #FFFFFF; box-shadow: var(--shadow); position: sticky; inset-block-start: 0; z-index: 10; display: flex; inline-size: 100%; } /* Fade in shadow on scroll when supported */ @supports (animation-timeline: scroll()) { .header-main { animation: scroll-shadow linear both; animation-timeline: scroll(); animation-range: 0rem 4rem; } @keyframes scroll-shadow { from { box-shadow: none; } to { box-shadow: var(--shadow); } } } .header-main > * { display: flex; align-items: center; } .header-main .brand { height: 32px; line-height: 32px; position: relative; z-index: 1; margin-inline-end: auto; } .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } .header-main .brand img { max-height: 32px; vertical-align: top; } .header-main .btn-out { /* float: right; */ padding: 0; margin: 20px -16px 0 -16px; } .header-main .btn-out a { margin: 0 16px; } .header-main .btn-out .btn { font-size: 16px; line-height: 24px; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 7px 16px 9px 16px; } .header-main .btn-out .install { font-weight: 700; font-size: 16px; color: #222222; line-height: 24px; text-decoration: none; padding: 7px 12px 9px 12px; } .header-main .btn-out .install:hover, .header-main .btn-out .install:focus, .header-main .btn-out .install:active { color: #CE2206; } /* 3.) Content - Main ----------------------------------------*/ .content-main { width: 100%; float: left; } .section-header { text-align: center; text-wrap: pretty; } .section-header p { color: #424446; text-align: center; font-size: 1.25rem; line-height: 1.6; } /* Banner - Main */ .banner-main { width: 100%; float: none; display: inline-block; vertical-align: top; margin-block-start: 6rem; } .banner-main:last-child { padding-bottom: 0; } .banner-main .row>div { position: relative; padding: 0 16px 4px 16px; } .banner-main .row>div .video-box { width: 100%; float: left; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); border-radius: 12px; overflow: hidden; position: relative; } .banner-main .row>div .video-box img { width: 100%; border-radius: 12px; } .banner-main .row>div .video-box video { width: 100%; float: left; text-align: center; border-radius: 12px; overflow: hidden; } .banner-main .row>div .aside { width: 100%; } .row>div .aside { padding-block: 2rem; } .img-shadow { border-radius: 0.43056rem; background: #FFF; box-shadow: 0px 0px 13.778px 0px rgba(0, 0, 0, 0.20); } #message-type { color: #027AD1; font-weight: 900; text-decoration-line: underline; text-underline-offset: 0.5rem; } @media (min-width: 1680px) { .banner-main { background-size: auto 540px; } } @media (max-width: 1199px) { .banner-main { margin-block-start: 5rem; } } @media (max-width: 767px) { .banner-main { background-size: 45% auto; margin-block-start: 0rem; } .banner-main .row>div .aside .btn-out { width: 100%; text-align: center; } .banner-main .row>div .aside .btn-out a { margin: 0; } } /* Content - Inner */ .content-inner { width: 100%; overflow: hidden; } @media (max-width: 1199px) { .content-inner { padding: 0px 0; } } @media (max-width: 767px) { .content-inner { padding: 0px 0; } } /* Partners - Logo */ .businesses-logo { width: 100%; float: none; display: inline-block; vertical-align: top; text-align: center; padding: 0 0 120px 0; } .businesses-logo:last-child { padding-bottom: 0; } .businesses-logo .box { width: 100%; float: left; color: #222426; background: #F2F4F6; border-radius: 12px; padding: 48px 48px 48px 48px; } .businesses-logo .box p { padding-bottom: 32px; } .businesses-logo .box p:last-child { padding-bottom: 0; } .businesses-logo .box ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; margin: 0 -20px -32px -20px; } .businesses-logo .box ul li { padding: 0; margin: 0 20px 32px 20px; } .businesses-logo .box ul li img { max-height: 40px; } .businesses-logo .box ul li:before { display: none; } @media (max-width: 1199px) { .businesses-logo { padding: 0 0 80px 0; } .businesses-logo .box { padding: 32px 24px; } .businesses-logo .box ul { margin: 0 -16px -32px -16px; } .businesses-logo .box ul li { margin: 0 16px 32px 16px; } .businesses-logo .box ul li img { max-height: 36px; } } @media (max-width: 767px) { .businesses-logo { padding: 0 0 60px 0; } .businesses-logo .box { padding: 32px 24px; } .businesses-logo .box ul { margin: 0 -12px -24px -12px; } .businesses-logo .box ul li { margin: 0 12px 24px 12px; } .businesses-logo .box ul li img { max-height: 32px; } .banner-main { background: none; } } /* Get Started */ .get-started { width: 100%; float: none; display: inline-block; vertical-align: top; text-align: center; padding: 0 0 120px 0; } .get-started:last-child { padding-bottom: 0; } .get-started .box { --gap: 1rem; width: 100%; float: left; color: #222426; border-radius: 16px; background: rgba(0, 93, 160, 0.08); padding: 3rem 0rem; display: flex; flex-direction: column; gap: var(--gap); } .get-started h2 { padding: 0; } .get-started .box p { color: #222426; text-align: center; font-family: Lato; font-size: 2rem; font-style: normal; font-weight: 400; line-height: 1.25; /* 125% */ } .get-started .box h3 { margin: 0; padding: 0; } .get-started .box h3 ~ p { color: #424446; text-align: center; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 1.6; padding: 0; } .get-started .box p:last-child { padding-bottom: 0; } .get-started .box ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; margin: 0 -20px -32px -20px; } .get-started .box ul li { padding: 0; margin: 0 20px 32px 20px; } .get-started .box ul li img { max-height: 40px; } .get-started .box ul li:before { display: none; } @media (max-width: 1199px) { .get-started { padding: 0 0 80px 0; } .get-started .box { padding: 32px 24px; } .get-started .box ul { margin: 0 -16px -32px -16px; } .get-started .box ul li { margin: 0 16px 32px 16px; } .get-started .box ul li img { max-height: 36px; } } @media (max-width: 767px) { .get-started { padding: 0 0 60px 0; } .get-started .box { padding: 32px 24px; } .get-started .box ul { margin: 0 -12px -24px -12px; } .get-started .box ul li { margin: 0 12px 24px 12px; } .get-started .box ul li img { max-height: 32px; } } /* Testimonials */ .testimonials-slider { width: 100%; float: none; display: inline-block; vertical-align: top; padding: 0 0 120px 0; } .testimonials-slider .quotemark:before { content: '"' font-size: 64px; font-style: normal; font-weight: 900; line-height: 32px; /* 50% */ } .testimonials-slider:last-child { padding-bottom: 0; } .testimonials-slider .inner-cont { width: 100%; max-width: 1010px; float: none; display: inline-block; vertical-align: top; text-align: left; } .testimonials-slider .box { width: 100%; float: left; color: #222426; border-radius: 16px; background: rgba(0, 93, 160, 0.08); padding: 64px 0px; gap: 32px; display: flex; } .testimonials-slider .box .aside { font-size: 24px; color: #121416; line-height: 32px; flex-grow: 4; } .testimonials-slider .box .aside p { padding-bottom: 20px; } .testimonials-slider .box .aside p:last-child { padding-bottom: 0; } .testimonials-slider .box .aside .author-cont { display: flex; flex-wrap: wrap; align-items: center; } .testimonials-slider .box .aside .author-cont .name { font-weight: 700; font-size: 20px; line-height: 24px; padding-bottom: 5px; } .testimonials-slider .box .aside .author-cont .name:last-child { padding-bottom: 0; } .testimonials-slider .box .aside .author-cont .position { font-size: 16px; color: rgba(18, 20, 22, 0.6); line-height: 20px; } .testimonials-slider .box .aside .author-cont .author-txt { padding: 0 12px 0 0; } .testimonials-slider .box .aside .author-cont .btn-out { width: 60%; text-align: right; padding: 0 0 0 12px; margin: 0; } .testimonials-slider .box .aside .author-cont .btn-out a { margin: 0; } .testimonials-slider .box .aside .author-cont .btn-out .btn { font-size: 16px; line-height: 24px; box-shadow: none; background: linear-gradient(192.62deg, #0774C7 15.87%, #055DA0 90.3%); border-radius: 6px; padding: 12px 16px; } .testimonials-slider .box .aside .author-cont .btn-out .btn:hover, .testimonials-slider .box .aside .author-cont .btn-out .btn:focus, .testimonials-slider .box .aside .author-cont .btn-out .btn:active, .testimonials-slider .box .aside .author-cont .btn-out .btn:active:focus, .testimonials-slider .box .aside .author-cont .btn-out .btn.active, .testimonials-slider .box .aside .author-cont .btn-out .btn.active:focus { background: linear-gradient(192.62deg, #055DA0 15.87%, #0774C7 90.3%); } .testimonials-slider .box .aside .author-cont .btn-out .btn em { font-weight: 300; font-size: 150%; line-height: 1em; position: relative; top: 4px; margin-left: 6px; } .testimonials-slider .owl-nav { text-align: right; position: absolute; bottom: 47px; right: 0; } .testimonials-slider .owl-nav button { float: none; display: inline-block; vertical-align: top; position: relative; top: 0; transform: translate(0, 0); margin: 0 9px; } @media (max-width: 1199px) { .testimonials-slider { padding: 0 0 80px 0; } .testimonials-slider .item .box .figure-out { width: 240px; padding: 0 0 24px 24px; margin-right: -240px; } .testimonials-slider .item .box .figure-out:before { width: 180px; height: 180px; } .testimonials-slider .item .box .aside { font-size: 22px; line-height: 30px; padding: 0 0 0 272px; } .testimonials-slider .item .box .aside p { padding-bottom: 56px; } .testimonials-slider .item .box .aside .author-cont .name { font-size: 18px; } .testimonials-slider .owl-nav { bottom: 0; } } @media (max-width: 991px) { .testimonials-slider .item .box .aside p { padding-bottom: 48px; } .testimonials-slider .item .box .aside .author-cont .author-txt { width: 100%; padding: 0 0 24px 0; } .testimonials-slider .item .box .aside .author-cont .btn-out { width: 100%; text-align: left; padding: 0; } } @media (max-width: 767px) { .testimonials-slider { padding: 0 0 60px 0; } .testimonials-slider .item .box { justify-content: center; } .testimonials-slider .item .box .figure-out { width: 200px; padding: 0 0 18px 18px; margin: 0 0 24px 0; } .testimonials-slider .item .box .figure-out:last-child { margin-bottom: 0; } .testimonials-slider .item .box .figure-out:before { width: 160px; height: 160px; } .testimonials-slider .item .box .figure { width: 100%; float: left; text-align: center; box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.16); border-radius: 360px; overflow: hidden; position: relative; z-index: 2; } .testimonials-slider .item .box .figure img { width: 100%; border-radius: 360px; } .testimonials-slider .item .box .aside { font-size: 20px; line-height: 28px; text-align: center; padding: 0; } .testimonials-slider .item .box .aside p { padding-bottom: 32px; } .testimonials-slider .item .box .aside .author-cont .name { font-size: 16px; line-height: 20px; } .testimonials-slider .item .box .aside .author-cont .position { font-size: 14px; line-height: 18px; } .testimonials-slider .item .box .aside .author-cont .btn-out { text-align: center; } .testimonials-slider .owl-nav { text-align: center; position: relative; bottom: 0; margin: 32px 0 0 0; } } /* Two - Col - Articles */ .two-col-articles:last-child { padding-bottom: 0; } .two-col-articles .row { align-items: center; padding: 0 0 120px 0; margin: 0 -16px -32px -16px; } .two-col-articles .row:last-child { padding-bottom: 0; } .two-col-articles .row>div { position: relative; padding: 0 16px 32px 16px; margin: 0; } .two-col-articles .row>div .video-box { width: 100%; float: left; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); border-radius: 12px; overflow: hidden; position: relative; } .two-col-articles .row>div .video-box img { width: 100%; border-radius: 12px; } .two-col-articles .row>div .video-box video { width: 100%; float: left; text-align: center; border-radius: 12px; overflow: hidden; } .two-col-articles .row>div .aside { width: 100%; } @media (min-width: 768px) { .two-col-articles .row:nth-child(odd)>div:first-child { left: 50%; } .two-col-articles .row:nth-child(odd)>div:nth-child(even) { right: 50%; } } @media (max-width: 1199px) { .two-col-articles { padding: 0 0 80px 0; } .two-col-articles .row { padding: 0 0 80px 0; } } @media (max-width: 767px) { .two-col-articles { padding: 0 0 60px 0; } .two-col-articles .row { padding: 0 0 60px 0; } } /* Two - Col - Interactive */ .two-col-interactive h3 { color: rgba(0, 130, 224, 0.40); } .two-col-interactive.active h3, .two-col-interactive:hover h3 { color: rgb(0, 130, 224); cursor: pointer; } /* CTA - Cont */ .cta-cont { width: 100%; float: none; display: inline-block; vertical-align: top; background: #F2F4F6; border-radius: 12px; padding: 72px 100px; margin-bottom: 120px; } .cta-cont:last-child { margin-bottom: 0; } .cta-cont .box { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; color: #121416; } .cta-cont .box .aside { width: 100%; padding: 0 248px 0 0; } .cta-cont .box .aside h3, .cta-cont .box .aside .h3 { padding-bottom: 0; } .cta-cont .box .btn-out { width: 200px; position: relative; z-index: 1; padding: 0; margin: 0 0 0 -200px; } .cta-cont .box .btn-out .btn { width: 100%; padding-right: 24px; padding-left: 24px; margin: 0; } .cta-btn-gmail-outlook { display: inline-block; cursor: pointer; text-decoration: none; } .cta-btn-demo { min-width: 80px; color: #FFFFFF !important; font-size: 20px; font-weight: bold; letter-spacing: 0; line-height: 28px; text-align: center; background: linear-gradient(180deg, #00AC47 0%, #00832D 100%); box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); border-radius: 6px; padding: 16px 24px; display: inline-block; cursor: pointer; text-decoration: none; } .cta-btn-demo:hover, .cta-btn-demo:focus{ color: #fff; } @media (max-width: 1199px) { .cta-cont { padding: 48px 48px; margin-bottom: 80px; } .cta-cont:last-child { margin-bottom: 0; } .cta-cont .box { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; color: #121416; } .cta-cont .box .aside { padding: 0 232px 0 0; } } @media (max-width: 767px) { .cta-cont { text-align: center; padding: 32px 24px; margin-bottom: 60px; } .cta-cont .box .aside { padding: 0 0 24px 0; } .cta-cont .box .aside h3, .cta-cont .box .aside .h3 { padding-bottom: 8px; } .cta-cont .box .btn-out { width: 100%; margin: 0; } .cta-cont .box .btn-out .btn { width: auto; margin: 0; } } /* Feature - List */ .feature-list { width: 100%; overflow: hidden; padding: 0 0 120px 0; } .feature-list:last-child { padding-bottom: 0; } .feature-list .heading-txt { padding-bottom: 64px; } .feature-list .heading-txt:last-child { padding-bottom: 0; } .feature-list .article-out { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -16px -32px -16px; } .feature-list .article { width: 33.33%; padding: 0 16px 32px 16px; } .feature-list .article .box { width: 100%; height: 100%; float: left; font-weight: inherit; font-size: 16px; color: #FFFFFF; line-height: 24px; text-decoration: none; background: linear-gradient(180deg, #0774C7 0%, #055DA0 100%); border-radius: 12px; padding: 24px 24px 32px 24px; position: relative; } .feature-list .article .box h1, .feature-list .article .box h2, .feature-list .article .box h3, .feature-list .article .box h4, .feature-list .article .box h5, .feature-list .article .box h6 { color: inherit; } .feature-list .article .box p a, .feature-list .article .box li a { color: #FFFFFF; text-decoration: none; } .feature-list .article .box p a:hover, .feature-list .article .box p a:focus, .feature-list .article .box p a:active, .feature-list .article .box li a:hover, .feature-list .article .box li a:focus, .feature-list .article .box li a:active { color: #FFFFFF; text-decoration: underline; } .feature-list .article .box h4, .feature-list .article .box .h4 { padding-bottom: 8px; } .feature-list .article .box h4:last-child, .feature-list .article .box .h4:last-child { padding-bottom: 0; } .feature-list .article .box .icon { width: 100%; height: 40px; float: left; margin-bottom: 16px; } .feature-list .article .box .icon img { max-height: 40px; } @media (max-width: 1199px) { .feature-list { padding: 0 0 80px 0; } .feature-list .heading-txt { padding-bottom: 56px; } .feature-list .article { width: 50%; } } @media (max-width: 767px) { .feature-list { padding: 0 0 60px 0; } .feature-list .heading-txt { padding-bottom: 48px; } .feature-list .article { width: 100%; } } /* Quick - Status */ .email-overload { width: 100%; text-align: left; overflow: hidden; padding: 0 0 120px 0; } .email-overload h4 { font-size: 1.5rem; padding-bottom: 8px; text-align: left; } .email-overload .features p { color: #626466; text-align: left; font-size: 1.125rem; line-height: 1.333; } .email-overload:last-child { padding-bottom: 0; } .email-overload .row { margin: 0 -16px -32px -16px; text-align: left; } .email-overload .row>div { padding: 0 16px 32px 16px; } .email-overload .row>div .box { display: flex; flex-direction: column; } .email-overload .row>div .box .icon { width: 100%; height: 120px; float: left; margin-bottom: 16px; } .email-overload .row>div .box .icon img { max-height: 120px; } .email-overload .row>div .box .number { width: 100%; font-weight: 900; font-size: 48px; color: #121416; line-height: 60px; overflow: hidden; margin-bottom: 8px; } @media (max-width: 1199px) { .email-overload { padding: 0 0 80px 0; } .email-overload .row>div .box .icon { height: 100px; } .email-overload .row>div .box .icon img { max-height: 100px; } .email-overload .row>div .box .number { font-size: 36px; line-height: 48px; } } @media (max-width: 767px) { .email-overload { padding: 0 0 60px 0; } .email-overload .row>div .box .icon { margin-bottom: 12px; } .email-overload .row>div .box .number { font-size: 30px; line-height: 40px; margin-bottom: 5px; } } /* Boundaries */ .boundaries { width: 100%; overflow: hidden; padding: 0 0 120px 0; } .boundaries:last-child { padding-bottom: 0; } .boundaries .row { margin: 0 -16px -32px -16px; } .boundaries .row>div { padding: 0 16px 32px 16px; } .boundaries .row>div .box { width: 100%; height: 100%; float: left; font-weight: inherit; color: #525456; text-decoration: none; } .boundaries .row>div .box .icon { width: 100%; height: 120px; float: left; margin-bottom: 16px; } .boundaries .row>div .box .icon img { max-height: 120px; } .boundaries .row>div .box .number { width: 100%; font-weight: 900; font-size: 48px; color: #121416; line-height: 60px; overflow: hidden; margin-bottom: 8px; } @media (max-width: 1199px) { .boundaries { padding: 0 0 80px 0; } .boundaries .row>div .box .icon { height: 100px; } .boundaries .row>div .box .icon img { max-height: 100px; } .boundaries .row>div .box .number { font-size: 36px; line-height: 48px; } } @media (max-width: 767px) { .boundaries { padding: 0 0 60px 0; } .boundaries .row>div .box .icon { margin-bottom: 12px; } .boundaries .row>div .box .number { font-size: 30px; line-height: 40px; margin-bottom: 5px; } } /* Demo */ .demo { background: rgba(0, 93, 160, 0.08); } /* 4.) Footer ----------------------------------------*/ .footer-main { width: 100%; font-weight: 400; font-size: 16px; color: #ffffff; line-height: 24px; background: linear-gradient(187.66deg, #1A7AC4 4.13%, #1367A7 53.86%, #034D84 93.86%); overflow: hidden; position: relative; padding: 62px 0 32px 0; } .footer-main .container { max-width: 1090px; } .footer-main .pre-footer { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 32px; } .footer-main .pre-footer:last-child { padding-bottom: 0; } .footer-main .pre-footer .brand { width: 92px; position: relative; z-index: 2; margin-right: -92px; } .footer-main .pre-footer .brand img { max-height: 43px; } .footer-main .pre-footer .footer-links { width: 100%; padding-left: 208px; } .footer-main .pre-footer .footer-links .article h3, .footer-main .pre-footer .footer-links .article .h3 { font-weight: 700; font-size: 20px; color: #ffffff; line-height: 24px; padding-bottom: 16px; } .footer-main .pre-footer .footer-links .article h3:last-child, .footer-main .pre-footer .footer-links .article .h3:last-child { padding-bottom: 0; } .footer-main .pre-footer .footer-links .article ul { padding: 0; margin: 0; } .footer-main .pre-footer .footer-links .article ul li { font-weight: inherit; padding: 0 0 16px 0; margin: 0; } .footer-main .pre-footer .footer-links .article ul li:last-child { padding-bottom: 0; } .footer-main .pre-footer .footer-links .article ul li:before { display: none; } .footer-main a { color: rgba(255, 255, 255, 0.8); text-decoration: none; } .footer-main a:focus, .footer-main a:active, .footer-main a:hover { color: #FFFFFF; } .footer-main .pre-footer .footer-links .article { width: 25%; padding: 0 16px 32px 16px; } .footer-main .pre-footer .footer-links .article-out { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -16px -32px -16px; } .footer-main .copyrights { width: 100%; overflow: hidden; } .footer-main .copyrights p { color: rgba(255, 255, 255, 0.6); } .footer-main .copyrights .social-links { border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 24px; margin-bottom: 24px; } .footer-main .copyrights .social-links ul li a { color: rgba(255, 255, 255, 0.8); } .footer-main .copyrights .social-links ul li a:hover, .footer-main .copyrights .social-links ul li.active a { color: rgba(255, 255, 255, 1); } @media (max-width: 1089px) { #footer-main .pre-footer .footer-links { width: 100%; padding-left: 154px; } } @media (max-width: 991px) { .footer-main .pre-footer .footer-links { width: 100%; padding-left: 208px; } .footer-main .pre-footer .footer-links .article { width: 50%; padding: 0 16px 32px 16px; } } @media (max-width: 767px) { .footer-main { padding: 48px 0 32px 0; } .footer-main .container { max-width: 550px; } .footer-main .pre-footer .brand { width: 100%; margin: 0 0 32px 0; } .footer-main .pre-footer .brand img { max-height: 43px; } .footer-main .pre-footer .footer-links { padding-left: 0; } .footer-main .pre-footer .footer-links .article { width: 50%; padding: 0 12px 32px 16px; } .footer-main .pre-footer .footer-links .article-out { margin: 0 -12px -32px -12px; } } @media (max-width: 479px) { .footer-main .pre-footer .footer-links .article { width: 100%; } } /* 5.) Modal ----------------------------------------*/ .modal-open-section { background: #F2F4F6; width: 100%; padding: 62px 0px; } .modal-open-section h3 { font-family: 'Lato'; font-style: normal; font-weight: 900; font-size: 32px; line-height: 48px; text-align: center; color: #121416; } .modal-open-section .btn-box { max-width: 280px; margin-left: auto; margin-right: auto; } .modal-open-section a { font-family: 'Lato'; font-style: normal; font-weight: 700; font-size: 20px; line-height: 32px; text-align: center; color: #FFFFFF; height: 62px; } .request__box { background: #FFFFFF; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.3); border-radius: 12px; padding: 32px; min-height: 633px; } .request__box label { font-style: normal; font-weight: 700; font-size: 16px; line-height: 24px; color: #323436; } .request__box .success-msg { color: #121416; font-size: 20px; } .request .container { position: relative; } .request .container::before { content: ""; width: 280px; height: 296px; position: absolute; background: url(../images/people_with_cat.svg) no-repeat left center; background-size: auto; background-size: auto; bottom: -80px; left: 5px; z-index: 99; background-size: 280px; } .request .mb-5 { font-size: 20px; } .request .green__ul li { font-size: 24px !important; } .request .green__ul li { margin-left: 36px; } .py-5 .green__ul li { margin-left: 24px; } .flex-row { --wrap: wrap; --align: start; --justify: space-between; display: flex; gap: 1rem; flex-wrap: var(--wrap); align-items: var(--align); justify-content: var(--justify); } .card { display:flex; flex-direction:column; align-items: center; height: 100%; padding: 2rem; border-radius: 0.75rem; background: #FFF; max-width: 32rem; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.20); margin: auto; } .card strong { color: #121416; text-align: center; font-family: Lato; font-size: 1.25rem; font-style: normal; font-weight: 900; line-height: 1.2; /* 120% */ } .card p { color: #121416; font-family: Lato; font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: 1.33; /* 133.333% */ } li.nav-item { padding-bottom: 0; display: flex; } .navbar .btn { font-size: 0.875rem; padding: 0.5rem 1rem; display: inline; justify-content: center; align-items: center; flex-wrap: nowrap; line-height: 1.71; font-weight: 400; box-shadow: none; border-radius: 0.375rem; } .badge { font-size: 1rem; line-height: 1.5; font-weight: 900; text-transform: uppercase; padding: 0.5rem 1.5rem; left: 1rem; translate: 50%; } .where__img.has-svg { --min-height: 480px; --min-width: 592px; min-height: var(--min-height); min-width: min(var(--min-width), 100%); position: relative; } .where__img.has-svg > img:first-child { /* illustration */ --top: unset; --left: unset; --right: unset; --max-width: 384px; --max-height: 256px; border-radius: 0.75rem; position: absolute; top: var(--top); left: var(--left); right: var(--right); max-width: min(var(--max-width), 100%); max-height: var(--max-height); } .where__img.has-svg > img:last-of-type { /* ui */ --top: unset; --left: unset; --right: unset; --max-width: 384px; --max-height: 256px; position: absolute; top: var(--top); left: var(--left); right: var(--right); max-width: min(var(--max-width), 100%); max-height: var(--max-height); } .where__img.has-svg > svg { /* icon */ --top: unset; --left: unset; --right: unset; --max-width: 96px; --max-height: 96px; position: absolute; top: var(--top); left: var(--left); right: var(--right); max-width: min(var(--max-width), 100%); max-height: var(--max-height); border-radius: 100%; box-shadow: 0px 1.846px 14.769px 0px rgba(0, 0, 0, 0.20); } @media (width img:first-child { display: none; } .where__img.has-svg > img:last-of-type { position: unset; max-width: unset; max-height: unset; } .where__img.has-svg > svg { top: -58px; left: unset; right: -16px; display: none; } } @media (max-width: 1199px) { body { font-size: 1.125rem; line-height: 1.5; } h1 { padding-bottom: 0.5rem; } h1 + p { font-size: 1.25rem; margin-top: 0; } } @media (max-width: 767px) { body { font-size: 1rem; line-height: 1.5; } h1 { padding-bottom: 0.25rem; } h1 + p { font-size: 1rem; margin-top: 0; } } @keyframes scale-down { to { transform: translateY(100%); } } @keyframes slide-in-up { from { transform: translateY(var(--animation-slide-in-up-distance)); } } dialog { --animation-scale-down: scale-down 300ms ease; --animation-slide-in-up: slide-in-up 300ms ease; --animation-slide-in-up-distance: 100%; animation: var(--animation-scale-down) forwards; transition: opacity 0.5s ease; background-color: white; padding: 0; inline-size: min(100%, 38rem); z-index: 9999; border: none; border-radius: 0.5rem; box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.20); } dialog > div { padding: 2rem 4rem; } dialog[open] { --animation-slide-in-up-distance: 50vh; animation: var(--animation-slide-in-up) forwards; } dialog:not([open]) { pointer-events: none; opacity: 0; } body:has(dialog[open]) { overflow: hidden; } dialog::backdrop { background-color: rgba(0 0 0 / 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }