Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/vreg/assets/css/ |
@font-face {
font-family: sfProDisplay-Regular;
src: local(sfProDisplay-Regular), url('~/assets/fonts/sfProDisplay-Regular.otf') format('opentype');
}
@font-face {
font-family: sfProDisplay-Bold;
src: local(sfProDisplay-Bold), url('~/assets/fonts/sfProDisplay-Bold.otf') format('opentype');
}
@font-face {
font-family: sfProDisplay-Semibold;
src: local(sfProDisplay-Semibold), url('~/assets/fonts/sfProDisplay-Semibold.otf') format('opentype');
}
@font-face {
font-family: sfProDisplay-Medium;
src: local(sfProDisplay-Medium), url('~/assets/fonts/sfProDisplay-Medium.otf') format('opentype');
}
@font-face {
font-family: sfProDisplay-Light;
src: local(sfProDisplay-Light), url('~/assets/fonts/sfProDisplay-Light.otf') format('opentype');
}
@font-face {
font-family: license;
src: local(license), url('~/assets/fonts/license.ttf') format('truetype');
}
/* All common codes for desktop and mobile version */
html, body {
min-height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body.no-scroll {
overflow: hidden;
}
a {
cursor: pointer;
}
a:focus, button:focus {
outline: none !important;
box-shadow: none !important;
text-decoration: none;
}
.btn-green {
display: block;
width: 100%;
background: #29A30B;
border: none;
border-radius: 2px;
height: 47px;
padding: 13px 20px;
font: 600 18px / 21px sfProDisplay-Semibold;
color: #fff;
text-shadow: none;
transition: all .2s ease-in;
}
.btn-green:hover, .btn-green:focus {
color: #fff;
}
.m-f-top {
margin-top: 95px;
}
.how-m-f-top {
margin-top: 78px;
}
@media only screen and (min-width: 1200px) {
.container {
max-width: 1110px;
}
}
/* Top Bar */
.top-fixed {
position: fixed;
left: 0;
top: 0;
right: 0;
background: #fff;
z-index: 99999;
transition: all .2s ease-in;
}
.top-fixed.howToPage {
background: transparent;
display: flex;
flex-direction: column;
min-height: 1px;
}
.top-fixed.howToPage.white-bg {
background: #fff;
}
.top-fixed.full-height.howToPage {
min-height: 100%;
}
.top-bar {
background: #182D40;
}
.top-bar-inner {
width: 100%;
padding: 7px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-bar .left {
flex-grow: 1;
}
.top-bar p {
margin: 0;
color: #9AB5CE;
font: 400 12px / 15px sfProDisplay-Regular;
}
.top-bar .top-bar-link {
cursor: pointer;
color: #2FABFF;
display: inline-flex;
align-items: center;
font-weight: 400;
font-family: sfProDisplay-Regular;
}
.top-bar .top-bar-link .more {
margin-left: 3px;
}
.top-bar .top-bar-link .less {
display: none;
margin-left: 3px;
}
.top-bar .top-bar-link.open .more {
display: none;
}
.top-bar .top-bar-link.open .less {
display: block;
}
.top-bar .text {
margin-right: 4px;
}
.top-bar .top-bar-arrow {
margin-left: 4px;
display: block;
transition: all .2s ease-in;
}
.top-bar .top-bar-link.open .top-bar-arrow {
transform: rotate(180deg);
}
.top-bar .right {
flex-shrink: 0;
margin-left: 10px;
display: flex;
align-items: center;
}
.top-bar .right a {
margin-left: 19px;
}
.top-bar .right svg {
display: block;
}
.top-hidden-content {
padding-bottom: 10px;
padding-right: 190px;
/*display: none;*/
}
/* Menu bar animation css */
.navbar {
padding: 12px 0 12px 0;
background: #fff;
}
.howToPage .navbar {
background: transparent;
position: relative;
padding-top: 52px;
transition: all .2s ease-in
}
.howToPage .navbar .navbar-brand {
position: absolute;
left: 0;
top: 12px;
}
.howToPage .navbar .navbar-toggler {
position: absolute;
right: 0;
top: 12px;
}
.howToPage .mobile-menu-icons {
display: flex !important;
align-items: center;
justify-content: space-between;
margin-top: 100px;
width: 100px;
}
.howToPage .main-menu {
flex-grow: 1;
display: flex;
align-items: stretch;
}
.howToPage .main-menu .navbar {
height: 100%;
}
.navbar .navbar-toggler {
border: none;
padding: 10px 12px;
}
.navbar .navbar-toggler svg {
display: block;
overflow: visible;
}
.howToPage .navbar .navbar-toggler.collapsed svg line {
stroke: #fff;
transition: all .2s ease-in;
}
.howToPage.white-bg .navbar .navbar-toggler.collapsed svg line {
stroke: #112288;
}
.navbar .navbar-toggler.collapsed svg .top {
transform: rotateZ(0deg);
transition: all .2s ease-in;
}
.navbar .navbar-toggler.collapsed svg .middle {
opacity: 1;
transition: all .1s ease-in;
}
.navbar .navbar-toggler.collapsed svg .bottom {
transform: rotateZ(0deg);
transition: all .2s ease-in;
}
.navbar .navbar-toggler svg .top {
transition: all .2s ease-in;
transform: rotateZ(45deg) translateY(6px);
transform-origin: 50% 50%;
}
.navbar .navbar-toggler svg .middle {
opacity: 0;
transition: all .1s ease-in;
}
.navbar .navbar-toggler svg .bottom {
transition: all .2s ease-in;
transform: rotateZ(-45deg) translateY(-6px);
transform-origin: 50% 50%;
}
.navbar-brand {
padding: 0;
}
.navbar-brand img {
display: block;
height: 40px;
}
.navbar .navbar-nav .nav-link {
padding: 8px 18px;
color: #182D40;
font: 400 14px / 24px sfProDisplay-Regular;
display: flex;
align-items: center;
}
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus {
color: #182D40;
}
.navbar .navbar-nav .nav-link svg {
display: block;
margin-left: 5px;
transition: all .2s ease-in;
}
.navbar .navbar-nav .nav-link.get-started {
color: #29A30B;
}
.navbar .navbar-nav .nav-link.login {
color: #2FABFF;
}
.navbar .dropdown-toggle::after {
display: none;
}
.navbar .navbar-nav .dropdown.show .nav-link svg {
transform: rotate(180deg);
}
.navbar .dropdown-menu {
min-width: 120px;
border: none;
}
.navbar .dropdown-item {
color: #182D40;
font: 400 14px / 17px sfProDisplay-Regular;
padding: 8px 18px;
}
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus {
background: #fff;
}
.navbar .dropdown-item span {
display: block;
color: #9CA3B5;
font: italic 400 12px / 14px sfProDisplay-Regular;
}
.howToPage .navbar .navbar-nav {
padding-top: 15px;
padding-bottom: 5px;
width: 140px;
margin-right: auto !important;
}
.howToPage .navbar .dropdown-menu {
margin: 0;
padding: 0 0 0 10px;
}
.howToPage .navbar .dropdown-item span {
display: inline-block;
}
.howToPage .navbar-collapse.show {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
opacity: 0;
transition: all .2s ease-in;
}
/* .howToPage .navbar-collapse:not(.show) {
display: none;
} */
.howToPage .navbar-collapse.show {
opacity: 1;
}
.howToPage .navbar .navbar-nav .nav-link {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
font-size: 18px;
}
/* Banner section */
.home-banner {
background: #E4DBD2;
overflow: hidden;
}
.home-banner .banner-text-wrapper {
z-index: 10;
}
.home-banner .banner-img-row-wrapper {
z-index: 1;
}
.home-banner .banner-img-wrapper {
display: flex;
align-items: flex-end;
justify-content: center;
height: 100%;
}
.home-banner .banner-img-wrapper img {
display: block;
max-width: 560px;
}
.home-banner h1 {
margin: 94px 0 15px 0;
color: #182D40;
font: 700 46px / 55px sfProDisplay-Bold;
}
.home-banner p {
margin: 0 0 34px 0;
color: #182D40;
font: 20px / 28px sfProDisplay-Regular;
}
.home-banner .home-row {
max-width: 475px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 93px;
}
.home-banner .home-row .left {
flex-grow: 1;
min-width: 250px;
margin-right: 15px;
}
.home-banner .home-row .right {
width: 160px;
flex-shrink: 0;
text-align: center;
line-height: 0;
}
.home-banner .form-group {
margin-bottom: 15px;
position: relative;
}
.home-banner .custom-select {
background: #fff;
border: none;
box-shadow: none;
border-radius: 2px;
padding: 13px 35px 13px 20px;
color: #29A30B;
font: 500 18px / 21px sfProDisplay-Medium;
height: 47px;
}
.home-banner .select-arrow {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.home-banner .btn-green {
margin-bottom: 10px;
}
.home-banner .how-link {
display: inline-flex;
align-items: center;
color: #2FABFF;
font: 14px / 17px sfProDisplay-Regular;
}
.home-banner .how-link:hover, .home-banner .how-link:focus {
color: #2FABFF;
text-decoration: none;
}
.home-banner .how-link svg {
margin-left: 4px;
}
.home-banner .bubble {
position: relative;
width: 266px;
height: 47px;
background: url(~/static/images/bubble.svg) center center / 100% 100% no-repeat;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 34px;
padding-bottom: 3px;
display: none;
}
.home-banner .bubble .bike {
position: absolute;
left: -29px;
bottom: -13px;
}
.home-banner .bubble .shopper-approved {
display: block;
margin-right: 7px;
}
.home-banner .bubble .star-wrapper {
display: flex;
align-items: center;
}
.home-banner .bubble .star-wrapper svg {
display: block;
margin: 0 1px;
}
.home-banner .bubble .rating {
background: #245B92;
border-radius: 15px;
padding: 3px 6px;
margin-left: 6px;
}
.home-banner .bubble .rating p {
margin: 0;
color: #fff;
font: 8px / 9px sfProDisplay-Regular;
}
.home-banner .home-banner-gif {
display: block;
width: 300px;
max-width: 100%;
margin: 0 0 34px -20px;
}
/* Home Info 1 */
.home-info-1 {
background: #FFFCF6;
padding: 43px 0 40px 0;
}
.home-info-1 h4 {
text-align: center;
margin: 0 0 12px 0;
color: #030A69;
font: 600 16px / 19px sfProDisplay-Regular;
}
.home-info-1 h2 {
text-align: center;
color: #182D40;
margin: 0 0 65px 0;
font: 600 36px / 43px sfProDisplay-Semibold;
}
.home-info-1 img {
display: block;
margin: 0 auto 24px auto;
border-radius: 12px;
}
.home-info-1 h5 {
margin: 0 0 15px 0;
color: #182D40;
font: 600 16px / 21px sfProDisplay-Semibold;
}
.home-info-1 p {
margin: 0 0 40px 0;
color: #182D40;
font: 400 14px / 19px sfProDisplay-Regular;
}
/* Home Info 2 */
.home-info-2 {
background: #BBE7F1;
line-height: 0;
position: relative;
overflow: hidden;
}
.home-info-2-img {
position: absolute;
left: 60%;
bottom: 0;
z-index: 1;
max-height: 100%;
}
.home-info-2 > .container {
position: relative;
z-index: 5;
}
.home-info-2 > .container > .row {
position: relative;
z-index: 3;
}
.home-info-2-content {
width: 100%;
max-width: 580px;
}
.home-info-2 .img-wrapper {
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
.home-info-2 h6 {
color: #030A69;
margin: 100px 0 12px 0;
font: 600 16px / 19px sfProDisplay-Regular;
}
.home-info-2 h2 {
color: #182D40;
margin: 0 0 18px 0;
font: 600 36px / 40px sfProDisplay-Semibold;
}
.home-info-2 p {
color: #182D40;
margin: 0 0 18px 0;
font: 16px / 22px sfProDisplay-Regular;
max-width: 430px;
}
.home-info-2 .learn-link {
display: inline-flex;
align-items: center;
margin-bottom: 113px;
color: #2FABFF;
font: 500 16px / 19px sfProDisplay-Regular;
}
.home-info-2 .learn-link:hover, .home-info-2 .learn-link:focus {
color: #2FABFF;
text-decoration: none;
}
.home-info-2 .learn-link svg {
margin-left: 4px;
margin-top: 2px;
}
/* Home Testimonials */
.home-test {
background: #FFFCF7;
padding: 43px 0 55px 0;
line-height: 0;
}
.home-test .container {
position: relative;
}
.home-test h4 {
text-align: center;
color: #030A69;
margin: 0 0 12px 0;
font: 600 16px / 19px sfProDisplay-Regular;
}
.home-test h2 {
text-align: center;
color: #182D40;
margin: 0 0 18px 0;
font: 600 36px / 43px sfProDisplay-Semibold;
}
.home-test h3 {
text-align: center;
color: #182D40;
margin: 0 auto 64px auto;
max-width: 655px;
font: 16px / 21px sfProDisplay-Regular;
}
.home-test h3 span {
display: inline-block;
background: url(~/static/images/blue-stroke.svg) center center / contain no-repeat;
}
.home-test .test-box {
background: #FFFFFF;
box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.05);
border-radius: 10px;
padding: 15px;
}
.home-test .owl-carousel .owl-item .user-img {
width: 76px;
border-radius: 50%;
margin-bottom: 15px;
}
.home-test .icon-wrapper {
width: 10%;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 16px;
line-height: 0;
}
.home-test .icon-wrapper img {
display: block;
margin-right: 4px;
width: 13px;
}
.home-test .test-box p {
color: #182D40;
margin: 0 0 16px 0;
font: 14px / 18px sfProDisplay-Regular;
}
.home-test .test-box h6 {
color: #182D40;
margin: 0;
font: 500 14px / 18px sfProDisplay-Semibold;
}
.home-test .owl-carousel .owl-stage-outer {
padding-bottom: 15px;
}
.home-test .owl-theme .owl-nav.disabled + .owl-dots {
margin-top: 35px;
}
.home-test .owl-theme .owl-dots .owl-dot span {
width: 9px;
height: 16px;
margin: 5px 3px;
background: transparent;
border-bottom: 1px solid #C9BFB3;
border-radius: 0;
}
.home-test .owl-theme .owl-dots .owl-dot.active span {
width: 16px;
background: url(~/static/images/slider-active.svg) center center / 100% 100% no-repeat;
border-bottom: 0;
margin-bottom: 3px;
}
.home-test .approved-img {
position: absolute;
right: 15px;
bottom: -34px;
width: 84px;
}
/* Home Info 3 */
.home-info-3 {
background: #F8EEE4;
padding: 43px 0 70px 0;
line-height: 0;
}
.home-info-3 h4 {
/* display: flex;
align-items: center;
justify-content: center; */
text-align: center;
margin: 0 0 50px 0;
color: #030A69;
font: 600 16px / 20px sfProDisplay-Regular;
}
.home-info-3 h4 svg {
margin-left: 6px;
}
.home-info-3 .box {
max-width: 380px;
margin: 0 auto 27px auto;
position: relative;
overflow: hidden;
border-radius: 12px;
display: flex;
justify-content: flex-end;
z-index: 2;
}
.home-info-3 .box-inner {
position: absolute;
left: 0;
bottom: 0;
height: 80%;
width: 100%;
border-radius: 12px;
background: #E4E4EC;
z-index: 1;
}
.home-info-3 .box-inner svg {
position: absolute;
left: 20px;
top: 20px;
}
.home-info-3 .info-img {
position: relative;
z-index: 5;
}
/* .home-info-3 .info-img.third {
width: 75.5%;
} */
.home-info-3 h3 {
color: #182D40;
margin: 0 0 21px 0;
font: 500 22px / 26px sfProDisplay-Semibold;
}
.home-info-3 .box-outer {
width: 100%;
max-width: 380px;
margin: 0 auto;
}
.home-info-3 .box-outer h3 {
display: none;
}
.home-info-3 p {
color: #182D40;
margin: 0 0 24px 0;
font: 14px / 20px sfProDisplay-Regular;
}
.home-info-3 p b {
font-weight: 600;
font-family: sfProDisplay-Semibold;
}
.home-info-3 p a {
color: #2FABFF;
}
.home-info-3 p a:hover, .home-info-3 p a:focus {
color: #2FABFF;
text-decoration: none;
}
.home-info-3 .more-link {
display: inline-flex;
align-items: center;
color: #2FABFF;
font: 14px / 17px sfProDisplay-Regular;
}
.home-info-3 .more-link:hover, .home-info-3 .more-link:focus {
color: #2FABFF;
text-decoration: none;
}
.home-info-3 .more-link svg {
margin-left: 3px;
margin-top: 1px;
}
/* Home Info 4 */
.home-info-4 {
background: #5F97B5 url(~/static/images/table-img.jpg) calc(50% + 350px) bottom / auto 90% no-repeat;
padding: 34px 0 5px 0;
overflow: hidden;
}
.home-info-4 .people-img {
float: right;
display: block;
}
.home-info-4 h4 {
color: #fff;
font: 500 16px / 19px sfProDisplay-Regular;
margin: 0 0 12px 0;
}
.home-info-4 h2 {
color: #fff;
margin: 0 0 34px 0;
font: 600 36px / 43px sfProDisplay-Semibold;
max-width: 455px;
}
.home-info-4 .box {
border-radius: 12px;
background: #fff;
max-width: 523px;
padding: 33px 45px 40px 45px;
margin-bottom: 40px;
}
.home-info-4 .home-row {
display: flex;
align-items: center;
line-height: 0;
padding: 14px 0;
border-bottom: 1px solid #DCDCDC;
}
.home-info-4 .home-row:first-child {
border-bottom: none;
padding: 0 0 5px 0;
}
.home-info-4 .home-row.last {
border-bottom: none;
}
.home-info-4 .home-row .des {
flex-grow: 1;
padding-right: 10px;
position: relative;
}
.home-info-4 .home-row .des .alert-icon {
position: absolute;
top: 50%;
left: -20px;
transform: translateY(-50%);
}
.home-info-4 .home-row .icon {
flex-shrink: 0;
width: 110px;
display: flex;
justify-content: center;
}
.home-info-4 .home-row .icon:last-child {
width: 128px;
margin-left: 20px;
}
.home-info-4 .box p {
margin: 0;
color: #182D40;
font: 600 14px / 17px sfProDisplay-Regular;
}
.home-info-4 .box .icon svg {
display: block;
margin: 0 auto;
}
.home-info-4 .btn-green {
margin: 40px auto 0 auto;
max-width: 285px;
font-size: 16px;
height: auto;
}
.tooltip-inner {
font: 400 14px / 17px sfProDisplay-Regular;
padding: 10px 8px;
}
/* Homepage Faq */
.faq-section {
background: #FFFCF6;
padding: 43px 0 95px 0;
}
.faq-section h4 {
text-align: center;
color: #030A69;
margin: 0 0 12px 0;
font: 600 16px / 19px sfProDisplay-Regular;
}
.faq-section h2.title {
text-align: center;
color: #182D40;
margin: 0 0 60px 0;
font: 600 36px / 43px sfProDisplay-Semibold;
}
.faq-section .faq-content {
max-width: 724px;
margin: 0 auto;
}
.faq-section .card {
border: none;
border-radius: 0;
background: transparent;
}
.faq-section .accordion > .card {
border-bottom: 1px solid #E4DBD2;
}
.faq-section .accordion > .card:last-of-type {
border-bottom: none;
}
.faq-section .card-header {
background: transparent;
border: none;
padding: 20px 0;
}
.faq-section .card-header .btn {
padding: 5px 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
color: #182D40;
font: 500 16px / 19px sfProDisplay-Semibold;
}
.faq-section .card-header .btn:hover, .faq-section .card-header .btn:focus {
text-decoration: none;
}
.faq-section .card-header .btn .arrow {
margin-top: 4px;
margin-left: 30px;
flex-shrink: 0;
transition: all .2s ease-in;
}
.faq-section .card-header .btn .arrow path {
transition: all .2s ease-in;
}
.faq-section .card-header .btn:not(.collapsed) .arrow {
transform: rotate(180deg);
}
.faq-section .card-header .btn:not(.collapsed) .arrow path {
fill: #182D40;
stroke: #182D40;
}
.faq-section .card-header .btn:hover .arrow path {
fill: #182D40;
stroke: #182D40;
}
.faq-section .card-body {
padding: 0 0 30px 0;
}
.faq-section .card-body p {
margin: 0;
color: #182D40;
font: 16px / 22px sfProDisplay-Regular;
}
/* Footer */
.footer {
padding: 40px 0 26px 0;
background: #182D40;
line-height: 0;
position: relative;
z-index: 2;
}
.footer-row {
display: flex;
align-items: flex-start;
}
.footer-row .left {
flex-grow: 1;
padding-right: 20px;
}
.footer-row .right {
flex-shrink: 0;
width: 528px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.footer-row .right .column {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer h4 {
color: #9AB5CE;
margin: 0 0 17px 0;
font: 600 18px / 21px sfProDisplay-Semibold;
}
.footer-form-row {
width: 100%;
max-width: 384px;
margin-bottom: 50px;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.footer-form-row .input-wrapper {
flex-grow: 1;
padding-right: 10px;
}
.footer-form-row .btn-wrapper {
width: 112px;
flex-shrink: 0;
}
.footer-form-row .form-control {
background: #EDEAEA;
border-radius: 2px;
border: none;
box-shadow: none;
height: 39px;
padding: 10px 20px;
color: #182D40;
font: 500 16px / 19px sfProDisplay-Medium;
}
.footer-form-row .form-control::-webkit-input-placeholder {
color: #9CA3B5;
}
.footer-form-row .form-control:-moz-placeholder {
color: #9CA3B5;
opacity: 1;
}
.footer-form-row .form-control::-moz-placeholder {
color: #9CA3B5;
opacity: 1;
}
.footer-form-row .form-control:-ms-input-placeholder {
color: #9CA3B5;
}
.footer-form-row .form-control::-ms-input-placeholder {
color: #9CA3B5;
}
.footer-form-row .form-control::placeholder {
color: #9CA3B5;
}
.footer .btn-subscribe {
background: transparent;
box-shadow: none;
border: 1px solid #2FABFF;
border-radius: 2px;
height: 39px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font: 500 16px / 19px sfProDisplay-Semibold;
color: #2FABFF;
width: 100%;
}
.footer-row .right .column h5 {
color: #9AB5CE;
margin: 0 0 16px 0;
font: 600 14px / 17px sfProDisplay-Semibold;
}
.footer-row .right .column a {
display: inline-flex;
font: 14px / 20px sfProDisplay-Regular;
color: #9AB5CE;
margin-bottom: 8px;
}
.footer-row .right .column a:hover, .footer-row .right .column a:focus {
text-decoration: none;
color: #9AB5CE;
}
.footer .footer-logo {
margin-bottom: 13px;
display: inline-flex;
}
.footer .footer-logo img {
display: block;
}
.footer-row.bottom {
padding-top: 13px;
border-top: 1px solid #0C3C68;
align-items: center;
}
.footer p {
color: #9AB5CE;
margin: 0;
font: 12px / 14px sfProDisplay-Regular;
max-width: 265px;
}
.footer p b {
font-weight: 600;
font-family: sfProDisplay-Semibold;
}
.footer-row.bottom .right {
align-items: center;
}
.footer-row.bottom .right .column a {
margin-bottom: 0;
display: flex;
align-items: center;
}
.footer-row.bottom .right .column a svg {
margin-left: 14px;
}
.footer p.small-text {
font-size: 10px;
line-height: 12px;
}
/* Review Page */
.reviews-banner {
overflow: hidden;
background: #C7E4EA;
}
.reviews-banner h4 {
margin: 70px 0 12px 0;
color: #030A69;
font: 600 16px / 19px sfProDisplay-Regular;
}
.reviews-banner h1 {
color: #182D40;
margin: 0 0 18px 0;
font: 700 46px / 55px sfProDisplay-Bold;
}
.reviews-banner p {
color: #182D40;
margin: 0 0 25px 0;
font: 20px / 28px sfProDisplay-Regular;
}
.review-banner-badge {
margin: 0 0 40px 0;
display: flex;
align-items: center;
}
.reviews-banner .badge-img {
display: block;
width: 103px;
margin: 0 23px 0 0;
}
.reviews-banner .shopper-img {
display: block;
width: 171px;
margin: 0;
}
.reviews-banner .text-wrapper {
z-index: 10;
}
.reviews-banner-img-wrapper {
display: flex;
align-items: flex-end;
justify-content: center;
height: 100%;
width: 100%;
max-width: 439px;
margin: 0 auto;
background: url(~/static/images/reviews/hero-1.webp) center bottom / contain no-repeat;
animation: review-faq 1s step-end infinite paused;
transition: all 0s linear;
}
.reviews-banner:hover .reviews-banner-img-wrapper {
animation-play-state: running;
}
.reviews-banner-img-wrapper img {
display: block;
}
@keyframes review-faq {
0% {
background-image: url(~/static/images/reviews/hero-1.webp);
}
33% {
background-image: url(~/static/images/reviews/hero-2.webp);
}
66% {
background-image: url(~/static/images/reviews/hero-3.webp);
}
}
.reviews-section {
background: #FFFDF9;
padding: 84px 0 114px 0;
}
.reviews-section .review-box {
margin-bottom: 20px;
background: #FFFFFF;
box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.05);
border-radius: 10px;
padding: 15px;
}
.reviews-section .review-box .inner {
display: flex;
margin-bottom: 16px;
}
.reviews-section .review-user {
display: block;
width: 60px;
border-radius: 50%;
margin-right: 15px;
flex-shrink: 0;
}
.reviews-section .icon-wrapper {
display: flex;
align-items: center;
}
.reviews-section .icon-wrapper img {
display: block;
margin-right: 4px;
}
.reviews-section .review-box p {
color: #182D40;
margin: 0 0 0px 0;
font: 14px / 18px sfProDisplay-Regular;
}
.reviews-section .review-box h6 {
color: #182D40;
margin: 0 0 10px 0;
font: 500 14px / 18px sfProDisplay-Semibold;
}
.reviews-section .review-box h6 .user-city {
font-weight: 400;
font-family: sfProDisplay-Regular;
}
/* FAQ Page */
.faq-banner {
background: #5F97B5;
padding: 25px 0;
transition: all .2s ease-in;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 27px;
display: block;
z-index: 100;
}
.faq-banner h1 {
margin: 0 0 25px 0;
color: #fff;
font: 600 36px / 43px sfProDisplay-Semibold;
text-align: center;
}
.faq-banner-select {
width: 100%;
max-width: 260px;
margin: 0 auto;
position: relative;
}
.faq-banner-select .custom-select {
background: #fff;
border: none;
box-shadow: none;
border-radius: 2px;
padding: 10px 35px 10px 20px;
color: #9CA3B5;
font: 500 14px / 17px sfProDisplay-Medium;
height: 37px;
}
.faq-banner-select .select-arrow {
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.faq-topic-wrapper {
width: 100%;
max-width: 288px;
margin: 0 auto;
background: #fff;
position: relative;
border-radius: 2px;
transition: all .3s ease-in;
}
.faq-topic-wrapper.open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.1);
}
.faq-topic-wrapper .topic-header {
height: 39px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 10px 10px 10px 20px;
border-radius: 2px;
}
.faq-topic-wrapper .topic-header p {
margin: 0;
color: #9CA3B5;
font: 400 16px / 19px sfProDisplay-Regular;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.faq-topic-wrapper .topic-header p.selected {
color: #182D40;
font-weight: 600;
}
.faq-topic-wrapper .topic-header .select-arrow {
transition: all .2s ease-in;
}
.faq-topic-wrapper .topic-header.clicked .select-arrow {
transform: rotateZ(180deg);
}
.faq-topic-wrapper .topic-body {
padding: 12px 23px 20px 20px;
background: #fff;
/*display: none;*/
position: absolute;
left: 0;
width: 100%;
top: 100%;
max-height: calc(100vh - 230px);
overflow: auto;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.1);
}
.faq-topic-wrapper .topic-body h6 {
margin: 0 0 12px 0;
color: #182D40;
font: 600 16px / 19px sfProDisplay-Regular;
}
.faq-topic-wrapper .topic-body a {
display: block;
max-width: 214px;
border-radius: 4px;
margin: 0 0 3px 0;
font: 400 16px / 19px sfProDisplay-Regular;
padding: 4px 10px 4px 10px;
color: #9CA3B5;
background: transparent;
transition: all .2s ease-in;
}
.faq-topic-wrapper .topic-body a:hover, .faq-topic-wrapper .topic-body a:focus {
color: #182D40;
text-decoration: none;
background: #E4DBD2;
}
.faq-topic-wrapper .topic-body a.last {
margin-bottom: 15px;
}
.faq-page {
padding: 50px 0 25px 0;
background: #FFFCF6;
position: relative;
z-index: 2;
}
.faq-page h4 {
font: 500 22px / 26px sfProDisplay-Semibold;
margin: 0 0 60px 0;
color: #182D40;
padding: 0 20px;
}
.faq-page .faq-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
max-width: 986px;
margin: 0 auto;
}
.faq-page .faq-column {
width: 100%;
max-width: 430px;
}
.faq-page .faq-box {
padding: 0 0 30px 0;
border-bottom: 1px solid #E4DBD2;
margin-bottom: 50px;
}
.faq-page .faq-box-inner {
padding: 20px 20px 2px 20px;
border-radius: 2px;
border: 1px solid transparent;
transition: all .3s ease-in;
}
.faq-page .faq-box.selected .faq-box-inner {
border-color: #E4DBD2;
}
.faq-page .faq-column .faq-box:last-child {
border-bottom: none;
}
.faq-page h6 {
font: 600 18px / 21px sfProDisplay-Semibold;
color: #182D40;
margin: 0 0 20px 0;
}
.faq-page p {
margin: 0 0 20px 0;
color: #182D40;
font: 16px / 21px sfProDisplay-Regular;
}
.faq-page ul {
margin: 0;
padding: 0 0 0 20px;
}
.faq-page p a {
color: #2FABFF;
text-decoration: none;
}
.faq-page p a:hover, .faq-page p a:focus {
text-decoration: none;
color: #2FABFF;
}
.faq-page p b .circle {
width: 6px;
height: 6px;
border-radius: 50%;
background: #182D40;
display: inline-block;
vertical-align: middle;
margin: 0 3px 3px 0;
}
.faq-bottom {
background: #5F97B5;
}
.faq-bottom-row {
display: flex;
width: 100%;
max-width: 686px;
margin: 0 auto;
}
.faq-bottom-row .left {
flex-grow: 1;
}
.faq-bottom-row .right {
display: flex;
align-items: flex-end;
justify-content: center;
flex-shrink: 0;
width: 339px;
}
.faq-bottom h2 {
font: 600 36px / 43px sfProDisplay-Semibold;
color: #fff;
margin: 94px 0 50px 0;
}
.faq-bottom p {
color: #fff;
margin: 0 0 20px 0;
font: 500 28px / 36px sfProDisplay-Regular;
}
.send-message-section {
padding: 40px 0 85px 0;
background: #FFFCF6;
position: relative;
z-index: 2;
}
.send-message-section .inner {
width: 100%;
max-width: 614px;
margin: 0 auto;
}
.send-message-section h4 {
margin: 0 0 12px 0;
color: #030A69;
font: 600 16px / 19px sfProDisplay-Regular;
text-align: center;
}
.send-message-section h2 {
color: #182D40;
margin: 0 0 50px 0;
font: 600 36px / 43px sfProDisplay-Semibold;
text-align: center;
}
.send-message-section .send-row {
display: flex;
margin-left: -6px;
margin-right: -6px;
}
.send-message-section .send-col {
padding: 0 6px;
width: 50%;
}
.send-message-section .form-group {
margin-bottom: 12px;
position: relative;
}
.send-message-section .form-control {
box-shadow: none;
height: 50px;
border: 1px solid #9AB5CE;
border-radius: 2px;
background: #fff;
padding: 13px 20px 14px 20px;
font: 16px / 20px sfProDisplay-Regular;
color: #182D40;
}
.send-message-section .form-control::-webkit-input-placeholder {
color: #9CA3B5;
}
.send-message-section .form-control:-moz-placeholder {
color: #9CA3B5;
opacity: 1;
}
.send-message-section .form-control::-moz-placeholder {
color: #9CA3B5;
opacity: 1;
}
.send-message-section .form-control:-ms-input-placeholder {
color: #9CA3B5;
}
.send-message-section .form-control::-ms-input-placeholder {
color: #9CA3B5;
}
.send-message-section .form-control::placeholder {
color: #9CA3B5;
}
.send-message-section textarea.form-control {
min-height: 170px;
z-index: 1;
position: relative;
padding-bottom: 20px;
}
.send-message-section .textarea.form-group::after {
content: '';
z-index: 1;
pointer-events: none;
position: absolute;
width: 15px;
height: 15px;
background: #fff;
bottom: 2px;
right: 2px;
}
.send-message-section .textarea .resize-handle {
z-index: 2;
pointer-events: none;
width: 12px;
height: 12px;
background: transparent;
position: absolute;
bottom: 8px;
right: 8px;
border-radius: 2px;
border-right: 1px solid #9AB5CE;
border-bottom: 1px solid #9AB5CE;
}
.send-message-section .btn-green {
width: auto;
margin: 0 auto;
font-size: 16px;
padding: 13px 30px;
}
/* How It Works Page CSS */
.green-bar {
background: #29A30B;
padding: 14px 0;
}
.green-bar h4 {
margin: 0;
color: #fff;
font: 400 16px / 19px sfProDisplay-Regular;
text-align: center;
}
.green-bar h4 a {
text-decoration: underline;
font-weight: 600;
color: #fff
}
.how-banner {
position: relative;
padding: 115px 0 45px 0;
}
.how-banner .how-video {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
object-fit: cover;
z-index: 1;
}
.how-banner .video-overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(24, 45, 64, 0.4);
}
.how-banner .container {
position: relative;
z-index: 5;
}
.how-banner h5 {
color: #fff;
margin: 0 0 6px 0;
text-align: center;
font: 20px / 24px sfProDisplay-Regular;
}
.how-banner h1 {
margin: 0 0 70px 0;
color: #fff;
text-align: center;
font: 700 76px / 91px sfProDisplay-Bold;
}
.how-banner .how-row {
width: 100%;
max-width: 800px;
margin: 0 auto 10px auto;
display: flex;
justify-content: space-between;
}
.how-banner .how-box {
margin: 0 0 30px 0;
/* width: 185px; */
flex-basis: 0;
flex-grow: 1;
}
.how-banner .how-box svg {
display: block;
margin: 0 auto 20px auto;
}
.how-banner .how-box h4 {
margin: 0;
font: 600 20px / 24px sfProDisplay-Regular;
color: #fff;
text-align: center;
}
.how-banner .btn-green {
max-width: 194px;
margin: 0 auto 76px auto;
}
.how-banner .remark {
position: relative;
width: 100%;
max-width: 560px;
margin: 0 auto;
color: #fff;
font: 12px / 14px sfProDisplay-Regular;
padding-left: 10px;
}
.how-banner .remark span {
position: absolute;
left: 0;
top: 0;
}
.how-info-2-content {
max-width: 460px;
}
.how-info-2-img {
left: 35%;
}
.how-info-1 h6 {
color: #030A69;
font: 400 14px / 19px sfProDisplay-Regular;
margin: 0 0 5px 0;
}
.how-works-section {
background: #F8EDE1;
padding: 50px 0 90px 0;
}
.how-works-section h2 {
text-align: center;
color: #182D40;
font: 600 36px / 43px sfProDisplay-Semibold;
margin: 0 0 64px 0;
}
.how-works-section .how-inner {
width: 100%;
max-width: 892px;
margin: 0 auto;
position: relative;
}
.how-works-section .v-bar {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 111px;
width: 8px;
height: calc(100% - 235px);
background: #DECEBF;
}
.how-works-section .v-bar-inner {
width: 100%;
height: 0px;
background: #030A69;
position: relative;
z-index: 2;
transition: all .3s linear;
}
.how-works-section .v-bar-inner.half {
height: 50%;
}
.how-works-section .v-bar-inner.full {
height: 100%;
}
.how-works-section .v-circle {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background: #DECEBF;
width: 16px;
height: 16px;
border-radius: 50%;
z-index: 5;
transition: all .2s ease-in;
}
.how-works-section .v-circle.top {
top: 0;
}
.how-works-section .v-circle.middle {
top: 50%;
}
.how-works-section .v-circle.bottom {
top: 100%;
}
.how-works-section .v-circle.blue {
background: #030A69;
}
.how-works-section .how-row {
display: flex;
justify-content: space-between;
margin-bottom: 165px;
}
.how-works-section .how-row:last-child {
margin-bottom: 0;
}
.how-works-section .box {
width: 100%;
max-width: 372px;
border-radius: 12px;
position: relative;
background: #fff;
opacity: 0.3;
transition: all .3s ease-in;
}
.how-works-section .box.entered {
opacity: 1;
}
.how-works-section .inner {
position: relative;
z-index: 10;
background: #fff;
padding: 26px 26px 33px 30px;
border-radius: 12px;
}
.how-works-section .box.img {
padding: 0;
overflow: hidden;
}
.how-works-section .box-shadow {
position: absolute;
left: -30px;
top: 30px;
width: 100%;
height: 100%;
border-radius: 12px;
background: #F9E8D9;
}
.how-works-section .triangle {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -22px;
}
.how-works-section h5 {
margin: 0 0 26px 0;
color: #030A69;
font: 600 16px / 19px sfProDisplay-Regular;
}
.how-works-section h3 {
color: #182D40;
margin: 0 0 12px 0;
font: 600 26px / 31px sfProDisplay-Regular;
}
.how-works-section p {
margin: 0;
color: #182D40;
font: 16px / 22px sfProDisplay-Regular;
}
.how-costs {
background: #F8EDE1;
padding: 47px 0 450px 0;
position: relative;
}
.how-costs .how-costs-img {
position: absolute;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
max-width: 100%;
display: block;
}
.how-costs .container {
position: relative;
z-index: 5;
}
.how-costs h4 {
margin: 0 0 12px 0;
color: #030A69;
font: 600 16px / 19px sfProDisplay-Regular;
text-align: center;
}
.how-costs h2 {
margin: 0 auto 25px auto;
color: #182D40;
font: 600 36px / 43px sfProDisplay-Semibold;
text-align: center;
max-width: 480px;
}
.how-costs .starting-cost {
background: #fff;
border-radius: 5px;
margin: 0 auto 29px auto;
width: 100px;
padding: 10px 12px 8px 12px;
}
.how-costs .starting-cost h3 {
margin: 0 0 0px 0;
color: #030A69;
font: 600 16px / 19px sfProDisplay-Regular;
display: flex;
align-items: flex-start;
justify-content: center;
}
.how-costs .starting-cost h3 .dollar {
font-size: 36px;
line-height: 30px;
}
.how-costs .starting-cost h6 {
margin: 0;
color: #222779;
font: 600 10px / 14px sfProDisplay-Regular;
text-align: center;
}
.how-costs p {
color: #182D40;
font: 400 16px / 22px sfProDisplay-Regular;
margin: 0 auto 15px auto;
text-align: center;
max-width: 424px;
}
.how-info-4 {
background: #BBE7F0;
padding: 50px 0 0 0;
}
.how-info-4 h4 {
text-align: center;
color: #030A69;
}
.how-info-4 h2 {
text-align: center;
color: #182D40;
margin-bottom: 38px;
max-width: 100%;
}
.how-info-4 .box-outer {
position: relative;
max-width: 614px;
margin: 0 auto;
padding-bottom: 61px;
}
.how-info-4 .box {
max-width: 614px;
margin: 0 auto;
position: relative;
z-index: 5;
}
.how-info-4 .table-guy {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 394px;
transform: translateX(-100%);
z-index: 1;
}
.how-info-4 .table-girl {
position: absolute;
right: 0;
bottom: 0;
display: block;
width: 500px;
transform: translateX(80%);
z-index: 1;
}
.how-info-4 .home-row .icon:last-child {
margin-left: 55px;
}
.how-info-4 .table-img-wrapper {
display: flex;
align-items: flex-end;
justify-content: center;
}
.how-info-4 .table-img-wrapper img.guy {
display: block;
max-width: 45%;
}
.how-info-4 .table-img-wrapper img.girl {
display: block;
max-width: 55%;
}
.how-test {
padding: 50px 0 43px 0;
background: #FFF5EB;
}
.how-test .owl-stage {
display: flex;
flex-wrap: wrap;
}
.how-test .owl-item {
display: flex;
height: auto !important
}
.how-test h2 {
margin-bottom: 50px;
}
.how-test .test-box {
padding: 20px 30px;
width: 270px;
height: 100%;
transition: all .3s ease-in;
}
.how-test .test-box:hover {
box-shadow: -10px 10px 0px 0px #F9E8D9;
}
.how-test .test-box .circle {
margin: 0 0 16px 0;
background: #BBE7F0;
width: 30px;
height: 30px;
border-radius: 50%;
}
.how-test .test-box svg {
display: block;
margin-bottom: 16px;
}
.how-test .test-box h6 {
margin: 0 0 16px 0;
font: 600 16px / 21px sfProDisplay-Regular;
}
.how-test .test-box p {
font: 14px / 20px sfProDisplay-Regular;
margin: 0;
color: #888;
}
/* About Us Page */
.about-banner {
padding: 50px 0 0 0;
background: #B7E7F4;
}
.about-banner h4 {
text-align: center;
color: #030A69;
margin: 0 0 12px 0;
font: 600 16px / 19px sfProDisplay-Regular;
}
.about-banner h1 {
margin: 0 auto 30px auto;
text-align: center;
width: 100%;
max-width: 730px;
font: 700 46px / 55px sfProDisplay-Bold;
}
.about-banner .about-banner-img {
display: block;
margin: 0 auto;
}
.about-timer {
padding: 60px 0;
background: #fff;
}
.about-timer h2 {
text-align: center;
font: 600 36px / 43px sfProDisplay-Semibold;
color: #182D40;
margin: 0 0 15px 0;
}
.about-timer p {
color: #182D40;
margin: 0 auto 35px auto;
text-align: center;
max-width: 820px;
font: 16px / 22px sfProDisplay-Regular;
}
.about-timer .timer {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 11px;
}
.about-timer .timer .box {
width: 51px;
height: 59px;
border-radius: 6px;
border: 3px solid #B7E6F6;
background: #B7E6F6;
margin: 0 3px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.about-timer .timer .box .inner {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
z-index: 1;
background: #C4C4C4;
mix-blend-mode: multiply;
opacity: 0.4;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.about-timer .timer .box h6 {
margin: 0;
position: relative;
z-index: 5;
color: #030A69;
font: 600 36px / 43px sfProDisplay-Semibold;
}
.about-timer h5 {
text-align: center;
margin: 0;
color: #030A69;
font: 600 16px / 22px sfProDisplay-Regular;
}
.about-cert {
position: relative;
padding: 70px 0 74px 0;
background: #F8EEE4;
overflow: hidden;
}
.about-cert .cert-outer {
width: 100%;
max-width: 550px;
border-radius: 20px;
background: #fff;
padding: 17px;
}
.about-cert .cert-inner {
padding: 27px 23px 9px 23px;
border: 1px solid #006BCD;
border-radius: 4px;
}
.about-cert h6 {
color: #030A69;
margin: 0 0 25px 0;
text-align: center;
font: 600 16px / 22px sfProDisplay-Regular;
}
.about-cert p {
text-align: center;
color: #182D40;
font: 16px / 22px sfProDisplay-Regular;
margin: 0 0 24px 0;
}
.about-cert p b {
font-weight: 600;
}
.about-cert p.before-last {
margin-bottom: 12px;
}
.about-cert p.last {
margin-bottom: 10px;
}
.about-cert .sign {
width: 75px;
display: block;
margin: 0 auto;
}
.about-cert .container {
position: relative;
z-index: 5;
}
.about-cert .cert-img {
position: absolute;
left: 48%;
bottom: 0;
display: block;
z-index: 1;
height: 91%;
max-height: 100%;
}
.about-matters {
padding: 12px 0 0 0;
background: #FFFCF9;
}
.about-matters .about-row {
display: flex;
}
.about-matters .img-wrapper {
flex-shrink: 0;
width: 400px;
display: flex;
align-items: flex-end;
}
.about-matters .text-wrapper {
flex-grow: 1;
padding-left: 56px;
}
.about-matters h6 {
margin: 85px 0 12px 0;
color: #030A69;
font: 600 16px / 19px sfProDisplay-Regular;
}
.about-matters h2 {
color: #182D40;
margin: 0 0 18px 0;
font: 600 36px / 43px sfProDisplay-Semibold;
}
.about-matters p {
color: #182D40;
font: 16px / 22px sfProDisplay-Regular;
margin: 0 0 15px 0;
}
.about-matters p.last {
margin-bottom: 50px;
}
.about-info-1 {
padding: 45px 0 10px 0;
background: #B7E6F6;
}
.about-info-1 img {
margin-bottom: 20px;
}
.about-cust {
padding: 50px 0 0 0;
background: #fff;
}
.about-cust h4 {
text-align: center;
font: 600 16px / 19px sfProDisplay-Regular;
color: #030A69;
margin: 0 0 12px 0;
}
.about-cust h2 {
text-align: center;
color: #182D40;
margin: 0 auto 53px auto;
max-width: 600px;
font: 600 36px / 43px sfProDisplay-Semibold;
}
.about-cust-img-wrapper {
background: linear-gradient(to bottom, #fff 0 144px, #F8EEE4 144px 100%);
position: relative;
}
.about-cust-img-wrapper .wrapper-for-hover {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
z-index: 5;
}
.about-cust-img-wrapper .wrapper-for-hover .half-box {
width: 50%;
flex-shrink: 0;
}
.about-cust-img-wrapper .about-img-box {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.about-cust-img-wrapper .img-box {
position: relative;
z-index: 5;
display: flex;
align-items: flex-end;
justify-content: center;
transition: all .3s ease-in;
}
.about-cust-img-wrapper .img-box.move-right {
margin-left: 150px;
}
.about-cust-img-wrapper .img-box.move-left {
margin-right: 150px;
}
.about-cust-img-wrapper .cust-lady {
position: relative;
display: block;
width: 240px;
margin-right: -15px;
transform: scale(1);
transform-origin: 50% 100%;
transition: all .3s ease-in;
}
.about-cust-img-wrapper .cust-lady.selected {
transform: scale(1.08);
z-index: 5;
}
.about-cust-img-wrapper .cust-lady.not-selected {
filter: blur(5px);
transform: scale(.9);
}
.about-cust-img-wrapper .cust-guy {
position: relative;
margin-left: -15px;
display: block;
width: 300px;
transform-origin: 50% 100%;
transform: scale(1);
transition: all .3s ease-in;
}
.about-cust-img-wrapper .cust-guy.selected {
transform: scale(1.08);
z-index: 5;
}
.about-cust-img-wrapper .cust-guy.not-selected {
filter: blur(5px);
transform: scale(.9);
}
.about-cust-img-wrapper .review-box {
position: absolute;
bottom: 50px;
width: 300px;
opacity: 0;
transition: all .3s ease-in;
}
.about-cust-img-wrapper .lady-review {
left: 0;
transform: translateX(-20px);
}
.about-cust-img-wrapper .lady-review.visible-now {
opacity: 1;
transform: translateX(0);
}
.about-cust-img-wrapper .guy-review {
right: 0;
transform: translateX(20px);
}
.about-cust-img-wrapper .guy-review.visible-now {
opacity: 1;
transform: translateX(0);
}
.about-cust-img-wrapper .review-box p {
color: #182D40;
margin: 0 0 10px 0;
font: 400 14px / 18px sfProDisplay-Regular;
}
.about-cust-img-wrapper .review-box h6 {
color: #182D40;
margin: 0;
font: 400 14px / 19px sfProDisplay-Regular;
}
.about-cust-img-wrapper .review-box h6 b {
font-weight: 600;
}
.about-cust-mobile-wrapper {
min-height: 110px;
padding: 30px 0;
}
.about-cust-mobile-wrapper .review-box-mobile {
display: none;
}
.about-cust-mobile-wrapper p {
color: #182D40;
margin: 0 0 10px 0;
font: 400 14px / 18px sfProDisplay-Regular;
}
.about-cust-mobile-wrapper h6 {
color: #182D40;
margin: 0;
font: 400 14px / 19px sfProDisplay-Regular;
}
.about-cust-mobile-wrapper h6 b {
font-weight: 600;
}
/* Contact Us Page */
.contact-banner {
background: #E4DBD2;
padding: 0;
}
.contact-banner h4 {
margin: 120px 0 12px 0;
color: #030A69;
font: 600 16px / 19px sfProDisplay-Regular;
}
.contact-banner h1 {
color: #182D40;
margin: 0 0 40px 0;
font: 700 46px / 55px sfProDisplay-Bold;
max-width: 465px;
}
.contact-banner p {
margin: 0 0 20px 0;
color: #2FABFF;
}
.contact-banner p a {
text-decoration: none;
font: 600 18px / 22px sfProDisplay-Regular;
color: #2FABFF;
width: 211px;
height: 44px;
background: #FFF6ED;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
padding-right: 10px;
word-break: break-all;
}
.contact-banner p a:hover, .contact-banner p a:focus {
text-decoration: none;
color: #2FABFF;
}
.contact-banner p a svg {
display: block;
margin-right: 20px;
flex-shrink: 0;
transition: all .2s ease-in;
}
.contact-banner p a:hover svg, .contact-banner p a:focus svg {
margin-right: 25px;
}
.contact-banner-img-wrapper {
display: flex;
align-items: flex-end;
justify-content: center;
}
.contact-info-section {
padding: 53px 0 45px 0;
background: #FFFDF9;
}
.contact-info-section .contact-wrapper {
display: flex;
justify-content: space-between;
}
.contact-info-section .box {
flex-shrink: 0;
margin-bottom: 20px;
}
.contact-info-section p {
margin: 0 0 15px 0;
color: #182D40;
font: 14px / 18px sfProDisplay-Regular;
}
.contact-info-section h6 {
color: #182D40;
margin: 0;
font: 600 16px / 21px sfProDisplay-Regular;
}
/* Login Page */
.login-banner {
background: #fff;
padding: 89px 0 158px 0;
}
.login-inner {
width: 100%;
max-width: 464px;
margin: 0 auto;
}
.login-banner h2 {
color: #182D40;
margin: 0 0 7px 0;
letter-spacing: 0.01em;
font: 600 38px / 45px sfProDisplay-Semibold;
}
.login-banner h5 {
color: #868686;
margin: 0 0 39px 0;
font: 400 15px / 19px sfProDisplay-Regular;
}
.form-group.with-animation {
position: relative;
margin-bottom: 12px;
}
.form-group.with-animation .placeholder-text {
margin: 0;
color: #868686;
letter-spacing: 0.01em;
font: 16px / 19px sfProDisplay-Light;
position: absolute;
left: 16px;
top: 16px;
pointer-events: none;
transition: all .2s ease-in;
}
.form-group.with-animation.focused .placeholder-text {
font-size: 12px;
top: 7px;
}
.form-group.with-animation .form-control {
height: 50px;
box-shadow: none;
border: 1px solid #DCDCDC;
padding: 24px 15px 6px 20px;
color: #182D40;
letter-spacing: 0.01em;
border-radius: 2px;
font: 600 16px / 18px sfProDisplay-Regular;
transition: all .2s ease-in;
}
.form-group.with-animation .form-control.with-border {
border: 1px solid #819BB4;
box-shadow: 0 0 2px #819BB4;
}
.login-banner .btn-green {
margin: 50px 0 0 0;
width: 100%;
height: 50px;
padding: 10px 15px;
font: 600 16px / 19px sfProDisplay-Regular;
letter-spacing: 0.01em;
display: flex;
align-items: center;
justify-content: center;
}
.login-banner .btn-green:hover, .login-banner .btn-green:focus {
text-shadow: none;
}
.login-banner .btn-green svg {
margin-left: 10px;
transition: all .2s ease-in;
}
.login-banner .btn-green:hover svg, .login-banner .btn-green:focus svg {
margin-left: 14px;
}
/* Order Status Page */
.order-status-header {
padding: 12px 0;
background: #fff;
}
.order-status-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.order-status-header .logo img {
display: block;
height: 40px;
}
.order-status-header-inner .right {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.order-status-header-inner .right p {
margin: 0 40px 0 0;
}
.order-status-header-inner .right .user-name {
display: block;
color: #1D2E59;
font: 600 16px / 18px sfProDisplay-Regular;
}
.order-status-header-inner .right .user-email {
display: block;
color: #9CA3B5;
font: 400 14px / 18px sfProDisplay-Regular;
}
.order-status-header-inner .right .btn-logout {
display: flex;
align-items: center;
color: #FF0000;
font: 14px / 18px sfProDisplay-Regular;
}
.order-status-header-inner .right .btn-logout:hover, .order-status-header-inner .right .btn-logout:focus {
text-decoration: none;
color: #FF0000;
}
.order-status-header-inner .right .btn-logout svg {
margin-left: 5px;
}
.order-status-section {
padding: 58px 0 100px 0;
background: #fff;
}
.order-status-section-inner {
width: 100%;
max-width: 837px;
margin: 0 auto;
}
.order-status-section h4 {
color: #1D2E59;
margin: 0 0 30px 0;
font: 600 18px / 21px sfProDisplay-Regular;
}
.order-status-section .order-box {
padding: 30px;
border: 1px solid #DCDCDC;
border-radius: 6px;
margin-bottom: 50px;
}
.order-status-section .order-header {
display: flex;
align-items: center;
margin-bottom: 50px;
}
.order-status-section .order-header .left {
display: flex;
align-items: center;
}
.plate.small {
width: 62px;
height: 31px;
margin-right: 18px;
background: #fff url(~/static/images/plate-bg.svg) center center / 100% 100% no-repeat;
border-radius: 4px;
border: 1px solid #9CA3B5;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
.plate.small h3 {
position: relative;
z-index: 10;
margin: 2px 0 0 0;
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.95);
color: #00633F;
font: 12px / 14px license;
}
.plate.small .orange-wrapper {
position: relative;
z-index: 1;
width: 18px;
height: 20px;
}
.plate.small .orange-wrapper img {
width: 33px;
position: absolute;
left: 50%;
top: 50%;
opacity: .7;
width: 25px;
transform: translate(-59%, -45%);
}
.order-status-section .order-header .header-sub {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.order-status-section .order-header h4 {
margin: 0 15px 0 0;
color: #00633F;
letter-spacing: 0.01em;
font: 600 14px / 15px sfProDisplay-Regular;
}
.order-status-section .order-header .header-sub p {
margin: 0;
color: #9CA3B5;
letter-spacing: 0.01em;
font: 15px / 18px sfProDisplay-Regular;
}
.order-status-section .order-header .header-sub p .order-status-time {
display: block;
font-size: 15px;
color: #2FABFF;
}
.order-status-section .order-box h5 {
color: #1D2E59;
letter-spacing: 0.01em;
margin: 0 0 15px 0;
font: 600 16px / 19px sfProDisplay-Regular;
}
.order-status-section .order-details {
padding: 15px;
border-radius: 2px;
border: 1px solid #DCDCDC;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.order-status-section .order-details p {
margin: 0 0 2px 0;
color: #8C92A3;
font: 14px / 18px sfProDisplay-Regular;
}
.order-status-section .order-details h6 {
margin: 0;
color: #1D2E59;
font: 600 16px / 18px sfProDisplay-Regular;
}
.order-status-section .order-button {
display: block;
text-align: center;
padding: 6px 10px;
color: #fff;
border-radius: 2px;
font: 14px / 17px sfProDisplay-Regular;
}
.order-status-section .order-button:hover, .order-status-section .order-button:focus {
text-decoration: none;
color: #fff;
}
.order-status-section .order-button.blue-bg {
background: #2FABFF;
}
.order-status-section .order-button.yellow-bg {
background: #FCB911;
}
.order-status-section .order-button.green-bg {
background: #29A30B;
}
.order-status-section .red-notice {
margin-bottom: 30px;
position: relative;
padding: 10px 11px 10px 35px;
background: #FFECEC;
border: 1px solid #FAD9D7;
border-radius: 2px;
}
.order-status-section .red-notice .cross-icon {
position: absolute;
left: 11px;
top: 10px;
width: 14px;
cursor: pointer;
}
.order-status-section .red-notice p {
margin: 0;
color: #1D2E59;
letter-spacing: 0.01em;
font: 12px / 16px sfProDisplay-Regular;
}
.order-status-section .digital-copy {
padding: 15px;
border: 1px solid #DCDCDC;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: space-between;
}
.order-status-section .digital-copy .text {
flex-grow: 1;
padding-right: 20px;
}
.order-status-section .digital-copy .text p {
margin: 0;
color: #1D2E59;
font: 12px / 17px sfProDisplay-Regular;
}
.order-status-section .digital-copy .text p b {
font-weight: 600;
display: block;
margin-bottom: 3px;
}
.order-status-section .digital-copy .btn-wrapper {
flex-shrink: 0;
display: flex;
align-items: flex-start;
}
.order-status-section .digital-copy .btn-wrapper svg.tt-icon {
display: block;
margin-right: 8px;
}
.order-status-section .contact-box {
margin-bottom: 50px;
border: 1px solid #DCDCDC;
border-radius: 6px;
padding: 10px 30px 6px 30px;
}
.order-status-section .contact-box p {
margin: 0 0 4px 0;
color: #1D2E59;
font: 14px / 18px sfProDisplay-Regular;
}
.order-status-section .contact-box p.user-name {
font-weight: 600;
}
.order-status-section .contact-text {
margin: 0;
text-align: center;
color: #1D2E59;
font: 12px / 15px sfProDisplay-Regular;
}
.order-status-section .contact-text a {
color: #2FABFF;
text-decoration: none;
}
.order-status-section .contact-text a:hover, .order-status-section .contact-text a:focus {
text-decoration: none;
color: #2FABFF;
}
@media only screen and (min-width: 768px) {
/* Review Page CSS */
.reviews-section > .container > .row {
margin-left: -10px;
margin-right: -10px;
}
.reviews-section > .container > .row > .col-md-4 {
padding-left: 10px;
padding-right: 10px;
}
}
@media only screen and (min-width: 1440px) {
/* Homepage */
.home-info-2-content {
max-width: 700px;
}
}
@media only screen and (min-width: 1200px) {
/* Homepage */
.home-info-1 .row {
margin-left: -20px;
margin-right: -20px;
}
.home-info-1 .col-md-4 {
padding-left: 20px;
padding-right: 20px;
}
.home-info-1 img {
width: 100%;
}
.home-info-3 .row {
margin-left: -20px;
margin-right: -20px;
}
.home-info-3 .col-md-4 {
padding-left: 20px;
padding-right: 20px;
}
}
@media only screen and (min-width: 992px) {
/* About Us page */
.about-cust-img-wrapper .review-box {
bottom: 0;
height: calc(100% - 144px);
padding: 20px 0;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Order Status Page */
.order-status-header-inner .right .user-email {
font-family: sfProDisplay-Light;
}
.order-status-section .order-header .header-sub p {
font-family: sfProDisplay-Light;
}
.order-status-section .order-header .header-sub p span {
font-family: sfProDisplay-Regular;
}
.order-status-section .order-details p {
font-family: sfProDisplay-Light;
}
.order-status-section .contact-box p.user-name {
font-family: sfProDisplay-Light;
}
}
@media only screen and (max-width: 1199px) {
/* Home Banner */
.home-banner h1 br {
display: none;
}
}
@media only screen and (max-width: 991px) {
/* Homepage */
.home-info-4 {
background: #5F97B5;
padding-bottom: 0;
}
.home-info-4 h4 {
text-align: center;
}
.home-info-4 h2 {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.home-info-4 .box {
margin: 0 auto 20px auto;
}
/* How it works Page */
.how-info-4 {
background: #BBE7F0;
}
.how-info-4 .box-outer {
padding-bottom: 0;
}
.how-info-4 .table-img-mobile {
width: 100%;
}
/* About Us Page */
.about-cert {
padding-bottom: 0;
}
.about-cert .cert-outer {
margin: 0 auto 30px auto;
}
.about-cert .cert-img {
left: auto;
bottom: auto;
margin: 0 auto;
position: relative;
}
.about-matters .about-row {
flex-direction: column-reverse;
}
.about-matters .img-wrapper {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.about-matters .text-wrapper {
padding-left: 0;
}
.about-matters h6 {
margin-top: 40px;
}
.about-cust-img-wrapper .wrapper-for-hover {
display: none;
}
/* Contact Page */
.contact-banner h4 {
text-align: center;
margin: 50px 0 12px 0;
}
.contact-banner h1 {
margin: 0 auto 30px auto;
text-align: center;
}
.contact-banner p a {
justify-content: center;
margin: 0 auto;
}
.contact-banner-img-wrapper {
margin-top: 20px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
/* Homepage */
.home-banner h1 {
margin-top: 59px;
}
.home-banner .home-row {
margin-bottom: 62px;
}
.home-info-2 h6 {
margin-top: 50px;
}
.home-info-2 .learn-link {
margin-bottom: 50px;
}
.home-info-4 {
background-size: auto 70%;
background-position: calc(50% + 300px) bottom;
}
/* Footer */
.footer-row .right {
width: 500px;
}
/* Reviews Page */
.reviews-banner h4 {
margin-top: 59px;
}
/* How it Works Page */
.how-costs {
padding-bottom: 350px;
}
/* About Us Page */
.about-matters h6 {
margin-top: 55px;
}
.about-cust-img-wrapper .review-box {
width: 250px;
}
.about-cert .cert-img {
left: 54%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.top-fixed {
display: flex;
flex-direction: column;
min-height: 1px;
}
.top-bar {
flex-shrink: 0;
}
/* Navbar */
.main-menu {
flex-grow: 1;
display: flex;
align-items: stretch;
}
.main-menu .navbar {
padding-top: 46px;
height: 100%;
}
.navbar-brand img {
height: 35px;
}
.top-fixed.full-height {
min-height: 100%;
}
.main-menu .navbar-brand {
position: absolute;
left: 0;
top: 12px;
}
.main-menu .navbar-toggler {
position: absolute;
right: 0;
top: 12px;
}
.mobile-menu-icons {
display: flex !important;
align-items: center;
justify-content: space-between;
margin-top: 100px;
width: 100px;
}
.navbar .navbar-nav {
padding-top: 15px;
padding-bottom: 5px;
width: 140px;
margin-right: auto !important;
}
.navbar .dropdown-menu {
margin: 0;
padding: 0 0 0 10px;
}
.navbar .dropdown-item span {
display: inline-block;
}
.navbar-collapse {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
opacity: 0;
transition: all .2s ease-in;
}
.navbar-collapse.show {
opacity: 1;
}
.navbar .navbar-nav .nav-link {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
font-size: 18px;
}
.top-hidden-content {
padding-right: 100px;
}
/* Homepage */
.home-banner h1 {
margin-top: 59px;
text-align: center;
}
.home-banner h1 br {
display: block;
}
.home-banner p {
text-align: center;
max-width: 630px;
margin: 0 auto 30px auto;
}
.home-banner .home-row {
margin: 0 auto 20px auto;
}
.home-banner .how-link {
margin-bottom: 50px;
}
.home-banner .bubble {
margin: 0 auto 20px auto;
}
.home-banner .home-banner-gif {
margin: 0 auto 20px auto;
}
.home-banner .banner-img-wrapper img {
width: 100%;
max-width: 668px;
}
.home-info-1 h2 {
margin-bottom: 50px;
}
.home-info-1 img {
max-width: 260px;
}
.home-info-1 h6 {
text-align: center;
}
.home-info-1 h5 {
text-align: center;
}
.home-info-1 p {
text-align: center;
max-width: 465px;
margin: 0 auto 50px auto;
}
.home-info-2 {
overflow: hidden;
}
.home-info-2-content {
max-width: 100%;
text-align: center;
}
.home-info-2 h6 {
margin-top: 50px;
text-align: center;
}
.home-info-2 h2 {
text-align: center;
max-width: 600px;
margin: 0 auto 18px auto;
}
.home-info-2 p {
text-align: center;
max-width: 500px;
margin: 0 auto 18px auto;
}
.home-info-2 .learn-link {
margin: 0 auto 10px auto;
}
.home-info-2-img {
position: relative;
display: block;
float: right;
left: 15%;
}
.home-info-3 h3 {
font-size: 20px;
}
.home-info-4 .people-img {
float: none;
max-width: 120%;
}
/* Footer */
.footer-form-row {
margin-bottom: 30px;
}
.footer .container .footer-row:first-child {
flex-direction: column;
}
.footer .container .footer-row:first-child .left {
width: 100%;
}
.footer .container .footer-row:first-child .right {
width: 100%;
}
.footer-form-row .form-control {
margin-bottom: 15px;
}
.footer-row.bottom .right .column a svg {
margin-left: 8px;
}
.footer .footer-logo {
margin-top: 50px;
}
.footer p.small-text {
width: 100px;
}
.footer .container .footer-row:last-child .right {
width: 440px;
}
.footer .container .footer-row:last-child .right .column:first-child {
padding-left: 50px;
}
.footer .container .footer-row:last-child .right .column:nth-child(2) {
padding-right: 50px;
}
/* Reviews Page */
.reviews-banner h4 {
text-align: center;
margin-top: 59px;
}
.reviews-banner h1 {
text-align: center;
}
.reviews-banner p {
text-align: center;
}
/* .reviews-banner .shopper-img {
margin-left: auto;
margin-right: auto;
} */
.reviews-banner-img-wrapper img {
max-width: 100%;
display: block;
}
.reviews-banner-img-wrapper {
height: 477px;
}
.review-banner-badge {
justify-content: center;
}
.reviews-banner .reviews-banner-img-wrapper {
animation-play-state: running;
animation-duration: 3s;
}
/* FAQ Page */
.faq-page .faq-column {
max-width: 330px;
}
/* How it Works Page */
.how-costs {
padding-bottom: 340px;
overflow: hidden;
}
.how-costs .how-costs-img {
max-width: 120%;
width: 120%;
}
.how-works-section .box {
max-width: 300px;
}
.how-works-section h5 {
margin-bottom: 16px;
}
.how-works-section .box.img {
display: flex;
align-items: center;
justify-content: center;
}
.how-info-2 img {
max-width: 130%;
}
/* About us page */
.about-cust-mobile-wrapper {
min-height: 180px;
padding: 30px 0;
}
.about-banner .about-banner-img {
width: 100%;
}
/* Contact Us Page */
.contact-info-section {
padding-bottom: 30px;
}
.contact-info-section .contact-wrapper {
flex-wrap: wrap;
}
.contact-info-section .box {
width: 50%;
margin-bottom: 40px;
}
.contact-banner-img-wrapper img {
max-width: 400px;
display: block;
margin: 0 auto;
}
}
@media only screen and (max-width: 767px) {
body.no-scroll {
overflow: hidden;
}
.top-fixed {
display: flex;
flex-direction: column;
min-height: 1px;
}
.top-bar {
flex-shrink: 0;
}
.main-menu {
flex-grow: 1;
display: flex;
align-items: stretch;
}
.main-menu .navbar {
padding-top: 46px;
height: 100%;
}
.navbar-brand img {
height: 35px;
}
.top-fixed.full-height {
min-height: 100%;
}
.main-menu .navbar-brand {
position: absolute;
left: 0;
top: 12px;
}
.main-menu .navbar-toggler {
position: absolute;
right: 0;
top: 12px;
}
.mobile-menu-icons {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 130px;
width: 100px;
}
.m-f-top {
margin-top: 89px;
}
.how-m-f-top {
margin-top: 78px;
}
/* Navbar */
.navbar .navbar-nav {
padding-top: 15px;
padding-bottom: 5px;
width: 140px;
margin-right: auto !important;
}
.navbar .dropdown-menu {
margin: 0;
padding: 0 0 0 10px;
}
.navbar .dropdown-item span {
display: inline-block;
}
.navbar-collapse {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
opacity: 0;
transition: all .2s ease-in;
}
.navbar-collapse.show {
opacity: 1;
}
.navbar .navbar-nav .nav-link {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
font-size: 18px;
}
/* Top Bar */
.top-bar .right {
display: none;
}
.top-bar p {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 9px;
line-height: 9px;
}
.top-bar .text {
margin-right: 20px;
}
.top-bar .top-bar-link {
font-size: 10px;
line-height: 12px;
margin-bottom: 2px;
}
.top-bar .top-bar-arrow {
margin-top: 2px;
}
.top-hidden-content {
padding-right: 70px;
}
/* Homepage */
.home-banner h1 {
margin-top: 22px;
font-size: 35px;
line-height: 42px;
margin-bottom: 10px;
}
.home-banner p {
font-size: 16px;
line-height: 22px;
margin-bottom: 20px;
}
.home-banner .home-row {
margin-bottom: 20px;
flex-direction: column;
}
.home-banner .home-row .left {
margin-right: 0;
}
.home-banner .form-group {
margin-bottom: 20px;
}
.home-banner .home-row .right {
width: 100%;
}
.home-banner .how-link {
margin-bottom: 24px;
}
.home-banner .bubble {
margin: 0 auto;
}
.home-banner .home-banner-gif {
margin: 0 auto;
}
.home-info-1 {
padding: 46px 0 20px 0;
}
.home-info-1 h2 {
font: 600 36px / 40px sfProDisplay-bold;
margin-bottom: 34px;
}
.home-info-1 img {
width: 100%;
max-width: 380px;
margin-bottom: 30px;
}
.home-info-1 h5 {
font-size: 20px;
line-height: 26px;
}
.home-info-1 p {
font-size: 16px;
line-height: 22px;
margin-bottom: 26px;
}
.home-info-2 h6 {
margin-top: 46px;
}
.home-info-2 h2 {
font: 600 36px / 40px sfProDisplay-bold;
margin-bottom: 10px;
}
.home-info-2 .learn-link {
margin-bottom: 15px;
}
.home-info-2-img {
position: relative;
width: 100%;
height: 700px;
object-fit: cover;
left: auto;
object-position: 26% 50%;
}
.home-test {
padding: 46px 0 40px 0;
}
.home-test h4 {
margin-bottom: 22px;
}
.home-test h2 {
font: 600 36px / 40px sfProDisplay-bold;
margin-bottom: 14px;
}
.home-test h3 {
margin-bottom: 40px;
}
.home-test .approved-img {
position: relative;
bottom: auto;
right: auto;
margin: 0 auto 33px auto;
width: 112px;
display: block;
}
.home-test .test-box p {
font-size: 16px;
line-height: 20px;
}
.home-test .test-box h6 {
font-size: 16px;
line-height: 20px;
}
.owl-carousel .owl-stage {
margin-left: -13px;
}
.home-info-3 {
padding: 46px 0 5px 0;
}
.home-info-3 h4 {
margin-bottom: 63px;
}
.home-info-3 h3 {
display: none;
}
.home-info-3 .box-outer {
position: relative;
padding-top: 15px;
}
.home-info-3 .box-outer h3 {
display: block;
margin: 0;
font-size: 26px;
line-height: 31px;
position: absolute;
left: 0;
top: 0px;
z-index: 5;
max-width: 161px;
}
.home-info-3 p {
font-size: 16px;
line-height: 22px;
}
.home-info-3 .more-link {
font-size: 16px;
line-height: 19px;
margin-bottom: 50px;
}
.home-info-4 {
padding-top: 46px;
}
.home-info-4 h4 {
text-align: left;
font-weight: 600;
}
.home-info-4 h2 {
max-width: 100%;
text-align: left;
font: 600 36px / 40px sfProDisplay-bold;
margin-bottom: 26px;
}
.home-info-4 .box {
padding-left: 20px;
padding-right: 20px;
}
.home-info-4 .home-row .des {
padding-left: 10px;
}
.home-info-4 .home-row .icon:last-child {
margin-left: 16px;
width: 60px;
}
.home-info-4 .home-row .des .alert-icon {
left: -10px;
}
.home-info-4 .home-row .icon {
width: 60px;
}
.home-info-4 .btn-green {
max-width: 100%;
}
.faq-section {
padding: 46px 0 25px 0;
}
.faq-section h4 {
margin-bottom: 22px;
}
.faq-section h2.title {
font: 600 36px / 40px sfProDisplay-bold;
margin-bottom: 25px;
}
/* Footer */
.footer {
padding: 46px 0 23px 0;
}
.footer-row {
flex-direction: column;
}
.footer-row .left {
padding: 0;
width: 100%;
}
.footer-row .right {
flex-direction: column;
width: 100%;
}
.footer-row.bottom .right {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.footer h4 {
font-size: 26px;
line-height: 31px;
}
.footer-form-row {
margin-bottom: 55px;
flex-wrap: nowrap;
}
.footer-form-row .btn-wrapper {
width: 92px;
}
.footer-row .right .column {
margin-bottom: 50px;
}
.footer-row .right .column h5 {
font-size: 16px;
line-height: 19px;
margin-bottom: 18px;
}
.footer-row .right .column a {
font-size: 16px;
margin-bottom: 10px;
}
.footer p {
max-width: 100%;
margin-bottom: 50px;
}
.footer-row.bottom .right .column:last-child {
margin-bottom: 0;
}
.footer-row.bottom .right .column a {
margin-right: 40px;
}
.footer p.small-text {
margin-bottom: 0;
}
/* Reviews Page */
.reviews-banner h4 {
margin-top: 22px;
}
.reviews-banner h1 {
font: 600 36px / 40px sfProDisplay-bold;
margin-bottom: 10px;
}
.reviews-banner p {
font-size: 16px;
line-height: 22px;
margin-bottom: 20px;
}
.reviews-banner-img-wrapper {
height: 380px;
}
.reviews-banner .reviews-banner-img-wrapper {
animation-play-state: running;
animation-duration: 3s;
}
.reviews-section {
padding-top: 30px;
}
/* FAQ Page */
.faq-banner {
top: -16px;
}
.faq-banner h1 {
font-size: 34px;
line-height: 41px;
}
.faq-page .faq-row {
flex-direction: column;
}
.faq-page .faq-column {
max-width: 100%;
}
.faq-bottom-row {
flex-direction: column;
}
.faq-bottom-row .right {
width: 100%;
}
.faq-bottom h2 {
text-align: center;
margin-top: 50px;
margin-bottom: 30px;
}
.faq-bottom p {
font-size: 23px;
word-break: break-all;
text-align: center;
}
.faq-topic-wrapper .topic-body {
max-height: calc(100vh - 270px);
}
.send-message-section h2 {
font: 600 36px / 40px sfProDisplay-bold;
margin-bottom: 34px;
}
.send-message-section .send-row {
flex-direction: column;
}
.send-message-section .send-col {
width: 100%;
}
/* How it Works Page */
.how-banner {
padding-top: 108px;
}
.how-banner h1 {
font-size: 49px;
line-height: 70px;
margin-bottom: 40px;
}
.how-banner .how-row {
/* flex-direction: column; */
justify-content: center;
}
.how-banner .how-box {
margin-bottom: 40px;
flex-basis: auto;
margin-left: 8px;
margin-right: 8px;
flex-grow: 0;
width: 80px;
}
.how-banner .how-box.last {
width: 90px;
}
.how-banner .how-box h4 {
font-size: 16px;
line-height: 20px;
}
.how-banner .how-box svg {
height: 24px;
margin-bottom: 10px;
}
.how-banner .btn-green {
margin-bottom: 46px;
width: 100%;
max-width: 100%;
}
/* How it Works Page */
.how-costs {
padding-bottom: 0px;
}
.how-costs .how-costs-img {
position: relative;
left: auto;
transform: translateX(0);
bottom: auto;
}
.how-info-2-img {
height: auto;
}
.how-works-section .how-inner {
padding-top: 50px;
padding-bottom: 80px;
}
.how-works-section .v-bar {
height: 100%;
top: 0;
}
.how-works-section .v-bar-inner {
transition: all .5s linear;
}
.how-works-section .triangle {
right: auto;
top: auto;
left: 50%;
transform: translate(-50%, 0);
bottom: -22px;
}
.how-works-section .how-row {
flex-direction: column;
margin: 0 auto 100px auto;
max-width: 372px;
position: relative;
border-radius: 12px;
background: #fff;
}
.how-works-section .box {
margin: 0 auto 0px auto;
opacity: 1;
position: static;
border-radius: 0;
background: transparent;
}
.how-works-section .box.img {
margin-top: 0px;
position: relative;
z-index: 5;
padding-left: 11px;
padding-right: 11px;
padding-bottom: 25px;
}
.how-works-section .box.img.two-img {
padding-bottom: 25px;
}
.how-works-section .box.img.third-img {
padding: 0 20px 25px 20px;
}
.how-works-section .box-shadow {
display: none;
}
.how-works-section .inner {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 23px;
}
.how-info-4 h4 {
text-align: center;
}
.how-info-4 h2 {
text-align: center;
font: 600 36px / 40px sfProDisplay-bold;
}
.how-works-section h2 {
font: 600 36px / 40px sfProDisplay-bold;
}
.how-costs h2 {
font: 600 36px / 40px sfProDisplay-bold;
}
/* About Us Page */
.about-banner {
background: #BDE7F1;
}
.about-banner h1 {
font: 600 36px / 40px sfProDisplay-bold;
}
.about-banner .about-banner-img {
width: 100%;
}
.about-timer {
padding-top: 40px;
}
.about-timer h2 {
font: 600 36px / 40px sfProDisplay-bold;
}
.about-matters h2 {
font: 600 36px / 40px sfProDisplay-bold;
}
.about-cust h2 {
font: 600 36px / 40px sfProDisplay-bold;
}
.about-cust-img-wrapper {
background: linear-gradient(to bottom, #fff 0 30%, #F8EEE4 30% 100%);
overflow: visible;
}
/* .about-cust-img-wrapper .cust-lady {
max-width: 40%;
}
.about-cust-img-wrapper .cust-guy {
max-width: 50%;
} */
.about-cust-img-wrapper .wrapper-for-hover {
display: none;
}
.about-cust-img-wrapper .review-box {
display: none;
}
.about-cust-img-wrapper .cust-guy.not-selected {
filter: blur(2px);
}
.about-cust-img-wrapper .cust-lady.not-selected {
filter: blur(2px);
}
.about-cust-mobile-wrapper {
min-height: 230px;
padding: 30px 0;
}
.about-cert .cert-img {
width: 100%;
}
/* Contact Us Page */
.contact-banner h4 {
margin-top: 35px;
text-align: center;
}
.contact-banner h1 {
font: 600 36px / 40px sfProDisplay-bold;
text-align: center;
}
.contact-banner p a svg {
width: 20px;
height: 20px;
}
.contact-banner p a {
font-size: 18px;
line-height: 24px;
justify-content: center;
margin: 0 auto;
}
.contact-banner p {
margin-bottom: 10px;
}
.contact-banner p:last-of-type {
margin-bottom: 20px;
}
/* .contact-banner p:first-of-type a {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.contact-banner p:last-of-type a {
border-top-left-radius: 0;
border-top-right-radius: 0;
} */
.contact-info-section {
padding-bottom: 30px;
}
.contact-info-section .contact-wrapper {
flex-direction: column;
}
.contact-info-section .box {
width: 100%;
margin-bottom: 40px;
}
/* Login Page */
.login-banner h2 {
font: 700 38px / 36px sfProDisplay-bold;
}
/* Order Status Page */
.order-status-section .order-details {
flex-direction: column;
}
.order-status-section .order-details > .box {
width: 100%;
margin-bottom: 15px;
display: flex;
}
.order-status-section .order-details > .box:last-child {
margin-bottom: 0;
}
.order-status-section .order-details > .box p {
width: 110px;
}
.order-status-section .order-details > .box .order-button {
width: 100%;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.order-status-section .digital-copy {
flex-direction: column;
}
.order-status-section .digital-copy .text p {
text-align: center;
margin-bottom: 15px;
}
.order-status-section .digital-copy .btn-wrapper {
width: 100%;
flex-direction: column;
align-items: center;
}
.order-status-section .digital-copy .btn-wrapper.pending {
flex-direction: row;
align-items: flex-start;
justify-content: center;
padding-right: 22px;
}
.order-status-section .digital-copy .btn-wrapper.pending .alert-icon {
margin-right: 10px;
}
.order-status-section .digital-copy .btn-wrapper svg.tt-icon {
margin-right: 0;
margin-bottom: 8px;
}
.order-status-section .digital-copy .btn-wrapper .order-button {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
.order-status-section .digital-copy .btn-wrapper.pending .order-button {
width: auto;
}
.order-status-section .order-header {
flex-direction: column;
margin-bottom: 20px;
align-items: flex-start;
}
.order-status-section .order-header .left {
margin-bottom: 22px;
}
}
@media only screen and (max-width: 575px) {
.container {
padding-left: 20px;
padding-right: 20px;
}
/* Homepage */
.home-test .container {
padding: 0;
}
.home-test .container-inner {
padding: 0 20px;
}
/* How-it-works Page */
.green-bar > .container {
padding-left: 10px;
padding-right: 10px;
}
.green-bar h4 {
font-size: 14px;
}
.how-works-section {
background: #FFF5EB;
}
.how-costs {
background: #FFF5EB;
}
/* Order Status Page */
.order-status-header-inner .right {
flex-direction: column;
width: 160px;
flex-grow: 0;
align-items: flex-end;
}
.order-status-header-inner .right p {
margin: 0 0 5px 0;
text-align: right;
}
.order-status-header-inner .right .user-name {
font-size: 13px;
line-height: 16px;
}
.order-status-header-inner .right .user-email {
font-size: 12px;
line-height: 16px;
}
.order-status-section .order-box {
padding: 15px;
}
}
@media only screen and (max-width: 365px) {
.green-bar h4 {
font-size: 12px;
}
.order-status-section .order-details h6 {
font-size: 15px;
}
}
.only-logo {
display: flex;
justify-content: space-between;
align-items: center;
}
.only-logo .left {
/* flex-grow: 1; */
flex-shrink: 1;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.only-logo .right {
flex-shrink: 0;
width: 463px;
display: none;
}
.only-logo .right-inner {
position: relative;
width: 100%;
max-width: 360px;
}
.only-logo h6 {
margin: 6px 0 0 0;
color: #4BBF64;
font: 700 14px / 14px 'Open Sans';
text-decoration: underline;
display: none;
}
.blue-section {
padding: 0px 0;
background: #30CDFF;
display: none;
}
.blue-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.blue-wrapper .left {
flex-grow: 1;
}
.blue-wrapper .right {
flex-shrink: 0;
width: 463px;
}
.blue-wrapper .right-inner {
position: relative;
width: 100%;
max-width: 360px;
padding: 15px 0;
}
.blue-wrapper .right-inner .triangle-arrow {
display: block;
position: absolute;
left: 50%;
top: calc(100% - 2px);
transform: translateX(-50%);
z-index: 10;
}
.blue-section h4 {
text-align: center;
margin: 0;
color: #fff;
font: 500 20px / 26px 'Open Sans';
}
/* loading section css starts */
.loading {
min-height: 457px;
background: #F0F4F8;
padding: 40px 0 50px 0;
}
.loading-box {
width: 100%;
max-width: 580px;
margin: 0 auto;
background: #fff;
border-radius: 4px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
padding: 25px 40px 32px 40px;
}
.loading-bar {
border: 1px solid #9CA3B5;
border-radius: 4px;
background: #ffffff;
width: 100%;
height: 8px;
position: relative;
margin-bottom: 36px;
}
@keyframes progress-animation {
0% {
width: 0%;
}
20% {
width: 14%;
}
55% {
width: 41.2%;
}
100% {
width: 85.4%;
}
}
.loading-bar .inner {
position: absolute;
left: -1px;
top: -1px;
height: 8px;
background: #006BCD;
border-radius: 4px;
width: 85.4%;
animation: progress-animation 20s ease-in-out;
}
/* .loading-bar .inner.one {
width: 14%;
}
.loading-bar .inner.two {
width: 41.2%;
}
.loading-bar .inner.three {
width: 85.4%;
} */
.loading-bar .inner.last {
width: calc(100% + 2px);
animation: progress-animation 5s ease-in-out;
}
#loading-2, #loading-3 {
display: none;
}
.loading-step {
border: 1px solid #9CA3B5;
background: #ffffff;
border-radius: 4px;
margin-bottom: 15px;
position: relative;
padding: 13px 45px 14px 18px;
transition: all .3s ease-in;
}
.loading-step p {
margin: 0;
color: #1D2E59;
font: 600 16px / 22px 'Open Sans';
}
.loading-step .loading-image {
position: absolute;
right: 3px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
transition: all .3s ease-in;
}
.loading-step .loaded-image {
position: absolute;
right: 12px;
top: 47%;
transform: translateY(-50%);
opacity: 0;
transition: all .3s ease-in;
}
.loading-step.done {
border: 1px solid #4BBF64;
}
.loading-step.done .loading-image {
opacity: 0;
}
.loading-step.done .loaded-image {
opacity: 1;
}
@media only screen and (max-width: 767px) {
.loading-box {
padding: 25px 20px 32px 20px;
}
}
/* loading section css ends */
/* banner section */
.banner {
background: url(/images/portal/banner-bg.jpg) center top / cover no-repeat;
}
.banner-overlay {
padding: 65px 0 55px 0;
background: rgba(29, 46, 89, .95);
position: relative;
}
.banner-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.banner-content .left {
flex-grow: 1;
padding-right: 15px;
}
.banner-content .right {
width: 463px;
flex-shrink: 0;
}
.banner h1 {
margin: 0 0 24px 0;
color: #ffffff;
font: 700 50px / 58px 'Open Sans';
letter-spacing: -.01em;
}
.banner p {
margin: 0 0 34px 0;
color: #ffffff;
font: 600 15px / 20px 'Open Sans';
}
.banner .btn-green {
max-width: 360px;
}
.banner-message {
width: 100%;
max-width: 390px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.banner-message-inner {
padding: 24px 18px 53px 18px;
background: url(/images/portal/message-bg.svg) left top / 100% 100% no-repeat;
}
.banner-message-inner h6 {
margin: 0 0 15px 0;
color: #fff;
font: 600 20px / 27px 'Open Sans';
}
.banner-message-inner p {
margin: 0;
color: #fff;
font: 16px / 23px 'Open Sans';
}
.banner-message img {
margin-top: 2px;
width: 50px;
}
/* about section */
.about-section {
background: #F0F4F8;
padding: 35px 0;
}
.about-wrapper {
display: flex;
justify-content: space-between;
}
.about-wrapper .left {
flex-grow: 1;
margin-right: 10px;
}
.about-wrapper .right {
flex-shrink: 0;
width: 463px;
}
.about-wrapper .box {
width: 100%;
height: 100%;
padding: 38px 50px 40px 50px;
}
.about-wrapper .left .box {
background: #E0EBF4;
}
.about-wrapper .right .box {
background: #9AB5CE;
}
.about-wrapper h4 {
margin: 0 0 25px 0;
color: #1D2E59;
font: 600 20px / 24px 'Open Sans';
}
.about-wrapper p {
color: #1D2E59;
margin: 0 0 20px 0;
font: 16px / 22px 'Open Sans';
}
.about-wrapper p:last-child {
margin-bottom: 7px;
}
.review-section {
background: #F7F9FB;
padding: 70px 0 53px 0;
}
.review-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.review-wrapper .left {
flex-grow: 1;
padding-right: 20px;
}
.review-wrapper .right {
width: 515px;
flex-shrink: 0;
}
.review-wrapper h2 {
color: #1D2E59;
margin: 0 0 20px 0;
font: 600 40px / 44px 'Open Sans';
}
.review-wrapper .left p {
color: #1D2E59;
margin: 0 0 28px 0;
font: 16px / 22px 'Open Sans';
max-width: 415px;
}
.review-wrapper .item {
background: #fff;
border-radius: 4px;
padding: 25px 17px;
height: 100%;
}
.star-wrapper {
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin-bottom: 25px;
}
.star-wrapper img {
display: block;
width: 16px !important;
margin: 0 4px 0 0;
}
.review-wrapper .item p {
color: #1D2E59;
font: italic 600 16px / 22px 'Open Sans';
margin: 0 0 25px 0;
}
.review-wrapper .item h6 {
margin: 0;
color: #9E9EA3;
font: 600 14px / 19px 'Open Sans';
}
.about-2 .right .box {
background: #1D7E9F;
}
.about-2 .right .box h4 {
color: #ffffff;
}
.about-2 .right .box p {
color: #ffffff;
}
.modal {
background: rgba(0, 0, 0, 0.8);
}
.modal-dialog {
max-width: 446px;
margin-top: 58px;
margin-bottom: 58px;
}
.modal-content {
border-radius: 4px;
border: 1px solid #fff;
}
.modal-body {
padding: 25px 38px 31px 38px;
}
.u-modal h4 {
color: #1D2E59;
margin: 0 0 19px 0;
font: 700 20px / 20px 'Open Sans';
display: flex;
align-items: center;
}
.u-modal h4 svg {
width: 20px;
margin-right: 14px;
}
.u-modal p {
margin: 0 0 25px 0;
color: #1D2E59;
font: 16px / 26px 'Open Sans';
}
.u-modal p a {
transition: all .2s ease-in;
}
.u-modal p a:hover, .u-modal p a:focus {
text-decoration: none;
}
/* Checkout page */
.checkout-header {
padding: 24px 15px;
background: #fff;
text-align: center;
}
.checkout-section {
background: #F0F4F8;
padding: 40px 0 125px 0;
}
.checkout-box {
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
border-radius: 4px;
background: #fff;
padding: 25px 40px 40px 40px;
max-width: 580px;
margin: 0 auto;
}
.indicator-wrapper {
margin-bottom: 47px;
width: 100%;
height: 8px;
border: 1px solid #9CA3B5;
background: #fff;
border-radius: 4px;
position: relative;
}
.indicator-wrapper .indicator {
position: absolute;
left: -1px;
top: -1px;
border-radius: 4px;
height: 8px;
background: #006BCD;
}
.indicator-wrapper .indicator.first {
width: 33.33%;
}
.indicator-wrapper .indicator.sec {
width: 66.66%;
}
.indicator-wrapper .indicator.last {
width: calc(100% + 2px);
}
.checkout-box p {
color: #1D2E59;
margin: 0 0 5px 0;
/*font: 600 13px / 18px 'Open Sans';*/
}
.checkout-box .form-group {
margin-bottom: 20px;
}
.check-row {
display: flex;
margin-left: -5px;
margin-right: -5px;
}
.check-row .check-col {
flex-basis: 0;
flex-grow: 1;
padding: 0 5px;
}
.check-info-box {
background: #F3F3F4;
border: 1px solid #9CA3B5;
border-radius: 4px;
padding: 15px 25px;
margin: 10px 0 30px 0;
}
.check-info-box.mt-0 {
margin-top: 0;
}
.check-info-box p {
margin: 0;
color: #1D2E59;
/*font: 600 14px / 19px 'Open Sans';*/
text-align: center;
}
.checkout-box label {
color: #1D2E59;
margin: 0 0 5px 0;
/*font: 600 13px / 18px 'Open Sans';*/
}
.checkout-box .form-group .form-control {
border: 1px solid #9CA3B5;
}
.checkout-box h6 {
color: #1D2E59;
margin: 0 0 16px 0;
/*font: 600 16px / 22px 'Open Sans';*/
}
.radio-row {
display: flex;
margin-bottom: 30px;
transition: all .2s ease-in;
}
.radio-row.mb-20 {
margin-bottom: 20px;
}
.radio-row label {
position: relative;
margin: 0;
display: block;
width: 50%;
z-index: 1;
}
.radio-row label.left-col {
transform: translateX(1px);
margin-left: -1px;
width: calc(50% + 1px);
}
.radio-row label:hover, .radio-row label:focus, .radio-row label.focused {
z-index: 2;
}
.radio-row label input {
position: absolute;
width: 0;
height: 0;
z-index: 1;
}
.radio-box {
border: 1px solid #9CA3B5;
width: 100%;
height: 50px;
position: relative;
z-index: 2;
cursor: pointer;
padding: 0 7px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all .2s ease-in;
}
.radio-row label:hover .radio-box {
border: 1px solid #006BCD;
}
.radio-box.left {
border-radius: 4px 0 0 4px;
}
.radio-box .space {
width: 19px;
height: 19px;
}
.radio-box.right {
border-radius: 0 4px 4px 0;
}
.radio-box img {
opacity: 0;
transition: all .2s ease-in;
}
.radio-box p {
margin: 0;
color: #B4B4BC;
/*font: 600 16px / 19px 'Open Sans';*/
text-align: center;
transition: all .2s ease-in;
}
.radio-row label:hover .radio-box img {
opacity: 1;
}
.radio-row label:hover .radio-box p {
color: #006BCD;
}
.radio-row input:checked + .radio-box {
background: #006BCD;
border-color: #006BCD;
}
.radio-row input:checked + .radio-box img {
opacity: 0;
}
.radio-row input:checked + .radio-box p {
color: #fff;
}
.checkout-box .btn-wrapper {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.checkout-box .btn-wrapper.both {
justify-content: space-between;
margin-top: 30px;
}
.checkout-box .btn-wrapper .btn-green {
max-width: 227px;
}
.checkout-box h4 {
color: #1D2E59;
margin: 0 0 20px 0;
/*font: 600 21px / 29px 'Open Sans';*/
}
.diff-mail-address {
margin-bottom: 10px;
display: none;
margin-top: -10px;
}
.checkout-box .agree-box {
position: relative;
margin-bottom: 32px;
}
.agree-box input {
position: absolute;
width: 0;
height: 0;
}
.agree-inner {
position: relative;
z-index: 2;
background: #fff;
padding-left: 27px;
cursor: pointer;
}
.agree-box .outer {
position: absolute;
left: 0;
top: 4px;
width: 18px;
height: 18px;
border-radius: 2px;
border: 1px solid #9CA3B5;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s ease-in;
}
.agree-box .inner {
width: 12px;
height: 12px;
background: #fff;
transition: all .2s ease-in;
}
.agree-box input:checked + .agree-inner .outer {
border-color: #006BCD;
}
.agree-box input:checked + .agree-inner .inner {
background: #006BCD;
}
.agree-box p {
margin: 0;
color: #1D2E59;
/*font: 14px / 21px 'Open Sans';*/
}
.agree-box p a {
color: #1D2E59;
text-decoration: underline;
}
.agree-box p a:hover, .agree-box p a:focus {
color: #1D2E59;
text-decoration: underline;
}
.checkout-box .btn-back {
color: #1D2E59;
text-decoration: none;
/*font: 600 13px / 18px 'Open Sans';*/
display: flex;
align-items: center;
transition: all .2s ease-in;
}
.checkout-box .btn-back svg {
margin-right: 6px;
margin-top: 1px;
transition: all .2s ease-in;
}
.order-summary {
margin-top: 10px;
margin-bottom: 50px;
}
.order-summary p {
color: #1D2E59;
margin: 0 0 15px 0;
/*font: 600 16px / 20px 'Open Sans';*/
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.order-summary p span {
margin-left: 15px;
}
.order-summary p.strong {
font-weight: 700;
}
.order-summary .line {
width: 100%;
height: 1px;
background: #9CA3B5;
margin-bottom: 15px;
}
.checkout-box .with-image {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: 33px;
}
.checkout-box .with-image .card-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.checkout-box .with-image .space {
width: 48px;
}
.sec-number-no {
margin-top: -10px;
margin-bottom: 15px;
display: none;
}
.sec-number-yes {
margin-top: -10px;
margin-bottom: 15px;
overflow: hidden;
display: none;
}
.security-no {
display: none;
}
.check-row h3 {
color: #1D2E59;
margin: 0 0 15px 0;
text-align: center;
/*font: 600 16px / 22px 'Open Sans';*/
}
.yes-security-no {
display: none;
}
/* secondary pages */
.sec-banner {
padding: 60px 0 65px 0;
}
.sec-banner h1 {
text-align: center;
margin: 0;
}
.sec-content {
background: #F7F9FB;
padding: 40px 0;
}
.sec-content h3 {
margin: 0 0 22px 0;
color: #1D2E59;
/*font: 700 25px / 34px 'Open Sans';*/
}
.sec-content h4 {
margin: 0 0 20px 0;
color: #244687;
/*font: 600 21px / 27px 'Open Sans';*/
}
.sec-content p {
color: #1D2E59;
margin: 0 0 20px 0;
/*font: 18px / 28px 'Open Sans';*/
position: relative;
word-break: break-word;
}
.sec-content p.last {
margin-bottom: 30px;
}
.sec-content p.with-tick {
margin: 0 0 20px 0;
padding-left: 25px;
}
.sec-content p.with-tick.last {
margin: 0 0 30px 0;
}
.sec-content p.with-tick img {
position: absolute;
left: 0;
top: 4px;
width: 18px;
}
.sec-content p a {
text-decoration: none;
color: #4da3ff;
transition: all .2s ease-in;
}
.sec-content p a:hover, .sec-content p a:focus {
text-decoration: none;
color: #0062cc;
}
/* Thank you page CSS */
/* Form Steps - 2nd step - CSS */
.form-step-box {
margin: 40px 0 0 0;
}
.form-step-box h2 {
color: #1D2E59;
margin: 0 0 20px 0;
/*font: 600 21px / 29px 'Open Sans';*/
}
.form-step-box p.info {
color: #1D2E59;
margin: 0 0 40px 0;
/*font: 600 13px / 18px 'Open Sans';*/
}
.form-plate-box {
border-top: 1px solid #B4B4BC;
border-bottom: 1px solid #B4B4BC;
margin-bottom: 40px;
padding: 25px 0 15px 0;
}
.form-plate-box h4 {
color: #1D2E59;
margin: 0 0 5px 0;
/*font: 600 16px / 22px 'Open Sans';*/
}
.form-plate {
margin-bottom: 20px;
display: flex;
cursor: pointer;
min-height: 228px;
}
.form-plate .left {
flex-shrink: 0;
width: 222px;
border-radius: 4px 0px 0px 4px;
border: 1px solid #9CA3B5;
background: #F5F5F5;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
transition: all .3s ease-in;
}
.form-plate .left p {
margin: 5px 0 0 0;
color: #1D2E59;
/*font: 10px / 17px 'Open Sans';*/
transition: all .3s ease-in;
}
.form-plate .plate {
width: 179px;
min-height: 91px;
border-radius: 4px;
border: 1px solid #9CA3B5;
display: flex;
justify-content: center;
align-items: center;
background: #fff url(/images/portal/plate-bg.svg) center center / 100% 100% no-repeat;
}
.form-plate .plate h3 {
position: relative;
z-index: 10;
margin: 8px 0 0 0;
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.95);
color: #00633F;
/*font: 40px / 50px license;*/
}
.form-plate .orange-wrapper {
position: relative;
z-index: 1;
width: 38px;
height: 50px;
}
.form-plate .orange-wrapper img {
position: absolute;
left: 50%;
top: 50%;
opacity: .7;
transform: translate(-59%, -45%);
}
.form-plate .right {
flex-grow: 1;
padding: 35px 25px 15px 25px;
border: 1px solid #9CA3B5;
border-left: none;
border-radius: 0 4px 4px 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
background: #fff;
transition: all .3s ease-in;
}
.form-plate .link-wrapper {
position: absolute;
right: 1px;
top: 2px;
display: flex;
align-items: center;
}
.form-plate .link-wrapper a {
margin-right: 8px;
color: #1D2E59;
/*font: 700 12px / 16px 'Open Sans';*/
padding: 5px;
text-decoration: none;
}
.form-plate .link-wrapper a:hover, .form-plate .link-wrapper a:focus {
text-decoration: none;
outline: none;
}
.form-plate .right p {
margin: 0;
/*font: 14px / 24px 'Open Sans';*/
color: #1D2E59;
}
.form-step-box .btn-wrapper.both {
align-items: center;
}
.form-step-box .multiple-btn {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.form-step-box .multiple-btn .btn {
max-width: 154px;
margin-left: 20px;
}
.form-step-box .multiple-btn .btn-blue {
background: #007BFF;
}
.form-step-box .multiple-btn .btn-blue svg {
margin: 0 5px 0 0;
}
.form-step-box .multiple-btn .btn-blue:hover svg, .form-step-box .multiple-btn .btn-blue:focus svg {
margin-right: 10px;
}
.form-step-box .radio-wrapper {
margin: 0 0 20px 0;
position: relative;
display: block;
}
.form-step-box .radio-wrapper .select-plate {
position: absolute;
width: 0;
height: 0;
opacity: 0;
visibility: hidden;
}
.form-step-box .select-plate:checked + .form-plate .left {
background: #006BCD;
border-color: #006BCD;
}
.form-step-box .select-plate:checked + .form-plate .left p {
color: #E7ECF8;
}
.form-step-box .select-plate:checked + .form-plate .right {
border: 4px solid #006BCD;
border-left: none;
}
.form-step-box .radio-content {
margin-bottom: 30px;
overflow: hidden;
display: none;
}
.form-step-box .radio-row {
margin-bottom: 20px;
}
.form-step-box .btn-tooltip {
padding: 6px;
border: none;
box-shadow: none;
text-shadow: none;
background: transparent;
}
.form-step-box .btn-tooltip:hover, .form-step-box .btn-tooltip:focus {
outline: none;
text-decoration: none;
background: transparent;
}
.form-step-box .btn-tooltip svg {
display: block;
width: 12px;
}
.tooltip.show {
opacity: 1;
}
.tooltip-inner {
max-width: 242px;
background: #848484;
border-radius: 4px;
padding: 8px 15px 10px 15px;
/*font: 12px / 17px 'Montserrat';*/
color: #fff;
text-align: left;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
border-top-color: #848484;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
border-bottom-color: #848484;
}
/* Flow 3 form pages CSS */
.flow3-vehicle-wrapper .remove-wrapper {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 10px;
}
.flow3-vehicle-wrapper .remove-wrapper a {
display: flex;
align-items: center;
color: #FF0000;
/*font: 600 14px / 19px 'Open Sans';*/
}
.flow3-vehicle-wrapper.second .remove-wrapper a {
color: #1D2E59;
}
.flow3-vehicle-wrapper .remove-wrapper a img {
margin-left: 10px;
}
.flow3-vehicle-wrapper .remove-wrapper a:hover, .flow3-vehicle-wrapper .remove-wrapper a:focus {
outline: none;
text-decoration: none;
color: #FF0000;
}
.flow3-vehicle-wrapper.second .remove-wrapper a:hover, .flow3-vehicle-wrapper.second .remove-wrapper a:focus {
color: #1D2E59;
}
.flow3-vehicle-wrapper .vehicle-info {
margin-bottom: 35px;
}
.vehicle-info-header {
background: #006BCD;
border-radius: 4px 4px 0 0;
padding: 10px 25px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.vehicle-info-header h2 {
margin: 0;
color: #fff;
/*font: 600 21px / 29px 'Open Sans';*/
}
.vehicle-info-body {
background: #F5F5F5;
border: 1px solid #9CA3B5;
border-top: none;
border-radius: 0 0 4px 4px;
padding: 20px 25px 25px 25px;
}
.vehicle-info-body h4 {
color: #1D2E59;
margin: 0 0 20px 0;
/*font: 600 21px / 29px 'Open Sans';*/
}
.vehicle-info-body label {
font-size: 14px;
line-height: 19px;
}
.vehicle-info-body .form-control {
padding-right: 15px;
}
.vehicle-info-body .form-control::placeholder {
color: #9CA3B5;
}
.vehicle-info-body .form-control::-webkit-input-placeholder {
color: #9CA3B5;
}
.vehicle-info-body .form-control:-moz-placeholder {
color: #9CA3B5;
opacity: 1;
}
.vehicle-info-body .form-control::-moz-placeholder {
color: #9CA3B5;
opacity: 1;
}
.vehicle-info-body .form-control:-ms-input-placeholder {
color: #9CA3B5;
}
.vehicle-info-body .form-control::-ms-input-placeholder {
color: #9CA3B5;
}
.vehicle-info-body h5 {
margin: 0px 0 10px 0;
text-align: center;
color: #1D2E59;
/*font: 600 14px / 19px 'Open Sans';*/
}
.vehicle-info-body .btn-big {
width: 100%;
max-width: 100%;
background: #DDE7FF;
border: 1px solid #007BFF;
/*font: 600 16px / 22px 'Open Sans';*/
color: #1D2E59;
margin: 0 0 10px 0;
height: auto;
min-height: 51px;
}
.vehicle-info-body .btn-big img {
margin-right: 10px;
vertical-align: baseline;
}
.vehicle-info .small-text {
margin: 0;
color: #1D2E59;
/*font: 10px / 17px 'Open Sans';*/
}
.add-vehicle-wrapper {
padding: 0 0 50px 0;
border-bottom: 1px solid #8C92A3;
margin-top: 50px;
}
.add-vehicle-wrapper .btn-add-vehicle {
background: #006BCD;
}
.form-step-box .btn-wrapper.both.flow3 {
margin-top: 20px;
}
.flow3-vehicle-wrapper.second .remove-wrapper {
justify-content: space-between;
}
.flow3-vehicle-wrapper.second .remove-wrapper p {
margin: 0;
color: #1D2E59;
/*font: 600 14px / 19px 'Open Sans';*/
}
.flow3-vehicle-wrapper .plate.small {
width: 65px;
min-height: 31px;
border-radius: 4px;
border: 1px solid #9CA3B5;
display: flex;
justify-content: center;
align-items: center;
background: #fff url(/images/portal/plate-bg.svg) center center / 100% 100% no-repeat;
}
.flow3-vehicle-wrapper .plate.small h3 {
position: relative;
z-index: 10;
margin: 2px 0 0 0;
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.95);
color: #00633F;
/*font: 12px / 14px license;*/
}
.flow3-vehicle-wrapper .small .orange-wrapper {
position: relative;
z-index: 1;
width: 18px;
height: 20px;
}
.flow3-vehicle-wrapper .small .orange-wrapper img {
position: absolute;
left: 50%;
top: 50%;
opacity: .7;
width: 25px;
transform: translate(-59%, -45%);
}
.vehicle-info-header .plate {
margin-right: 18px;
}
.vehicle-info-header p {
margin: 0 18px 0 0;
color: #fff;
/*font: 12px / 14px 'Open Sans';*/
}
.vehicle-info-header p:last-child {
margin-right: 0;
}
.vehicle-info-body h6 {
font-size: 14px;
line-height: 19px;
margin-bottom: 5px;
}
.vehicle-info-body .radio-box {
background: #fff;
}
.vehicle-info-body .radio-row p {
line-height: 16px;
}
.vehicle-info-body .radio-row p span {
font-size: 12px;
}
.vehicle-info-body .radio-row.three-ans > label {
width: auto;
flex-shrink: 0;
flex-grow: 1;
}
.vehicle-info-body .three-ans .radio-box {
height: 100%;
min-height: 50px;
padding-top: 7px;
padding-bottom: 7px;
}
.vehicle-info-body .three-ans .radio-box.middle {
justify-content: center;
border-right: none;
}
.flow3-vehicle-wrapper h1 {
color: #1D2E59;
margin: 0 0 20px 0;
/*font: 600 21px / 29px 'Open Sans';*/
}
.flow3-vehicle-wrapper p.info {
margin: 0 0 20px 0;
color: #1D2E59;
/*font: 600 13px / 18px 'Open Sans';*/
}
.flow3-vehicle-wrapper .plate-details {
padding: 20px 0;
border-top: 1px solid #B4B4BC;
border-bottom: 1px solid #B4B4BC;
}
.flow3-vehicle-wrapper .plate-details-row {
margin-bottom: 20px;
display: flex;
align-items: center;
}
.flow3-vehicle-wrapper .plate-details-row:last-child {
margin-bottom: 0;
}
.flow3-vehicle-wrapper .plate-details-row .left {
flex-shrink: 0;
width: 66px;
}
.flow3-vehicle-wrapper .plate-details-row .right {
flex-grow: 1;
padding-left: 21px;
}
.flow3-vehicle-wrapper .plate-details-row h6 {
color: #1D2E59;
margin: 0 0 5px 0;
/*font: 700 14px / 17px 'Open Sans';*/
}
.flow3-vehicle-wrapper .plate-details-row h6 span {
margin-right: 10px;
}
.flow3-vehicle-wrapper .plate-details-row h6 span:last-child {
margin-right: 0;
}
.flow3-vehicle-wrapper .plate-details-row p {
margin: 0;
color: #1D2E59;
/*font: 12px / 17px 'Open Sans';*/
}
.flow3-vehicle-wrapper .plate-details-row p span {
margin-right: 7px;
}
.flow3-vehicle-wrapper .plate-details-row p a {
color: #007bff;
text-decoration: none;
margin-right: 6px;
}
.flow3-vehicle-wrapper .plate-details-row p a:hover, .flow3-vehicle-wrapper .plate-details-row p a:focus {
color: #007bff;
text-decoration: none;
outline: none;
}
.flow3-vehicle-wrapper .plate-details-row p a:last-child {
margin-right: 0;
}
.flow3-vehicle-wrapper .shipping-details {
padding: 20px 0;
margin: 0 0 20px 0;
border-bottom: 1px solid #B4B4BC;
}
.flow3-vehicle-wrapper .shipping-details p {
margin: 0 0 2px 0;
color: #1D2E59;
/*font: 12px / 18px 'Open Sans';*/
}
.flow3-vehicle-wrapper .shipping-details a {
/*font: 12px / 18px 'Open Sans';*/
color: #007bff;
}
.flow3-vehicle-wrapper .shipping-details a:hover, .flow3-vehicle-wrapper .shipping-details a:focus {
text-decoration: none;
outline: none;
color: #007bff;
}
.flow3-vehicle-wrapper .billing-notice {
background: #F5F5F5;
border: 1px solid #B4B4BC;
margin: 0 0 20px 0;
padding: 21px 20px;
}
.flow3-vehicle-wrapper .billing-notice p {
margin: 0;
color: #1D2E59;
/*font: 13px / 18px 'Open Sans';*/
}
.flow3-vehicle-wrapper .billing-notice p b {
margin-bottom: 8px;
display: block;
}
.flow3-vehicle-wrapper .order-title {
display: flex;
align-items: center;
justify-content: space-between;
background: #DDE7FF;
border: 1px solid #007BFF;
border-radius: 4px 4px 0 0;
padding: 11px 20px;
cursor: pointer;
}
.flow3-vehicle-wrapper .order-title h3 {
margin: 0;
color: #1D2E59;
/*font: 600 21px / 29px 'Open Sans';*/
}
.flow3-vehicle-wrapper .order-title img {
display: block;
margin-bottom: 3px;
margin-top: 0;
transform-origin: center center;
transition: all .3s ease-in;
}
.flow3-vehicle-wrapper .order-title.clicked img {
margin-bottom: 0;
transform: rotate(180deg);
}
.flow3-vehicle-wrapper .order-details {
padding: 20px 0 10px 0;
border-bottom: 1px solid #8C92A3;
display: none;
}
.flow3-vehicle-wrapper .order-row {
margin-bottom: 10px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.flow3-vehicle-wrapper .order-row .left {
flex-grow: 1;
padding: 0 10px;
}
.flow3-vehicle-wrapper .order-row .right {
flex-shrink: 0;
width: 75px;
padding: 0 10px 0 0;
}
.flow3-vehicle-wrapper .order-row p {
margin: 0;
color: #1D2E59;
/*font: 600 14px / 24px 'Open Sans';*/
}
.flow3-vehicle-wrapper .order-row .right p {
text-align: right;
}
.flow3-vehicle-wrapper .order-row.total {
margin-bottom: 40px;
padding-top: 13px;
padding-bottom: 12px;
border-bottom: 1px solid #8C92A3;
}
.flow3-vehicle-wrapper .order-row.total p {
font-weight: 700;
font-size: 16px;
}
.form-step-box .btn-wrapper.both.flow3-third {
margin-top: 30px;
}
/* Flow 2 form pages CSS */
.form-step-box.flow2 h2 {
margin-bottom: 10px;
}
.form-step-box p.info {
margin-bottom: 20px;
}
.flow2 .form-plate-box {
padding: 20px 0 5px 0;
border-top: 1px solid #8C92A3;
border-bottom: 1px solid #8C92A3;
margin-bottom: 20px;
}
.flow2 .form-plate-box h4 {
margin-bottom: 15px;
}
.flow2 .form-plate {
background: #F5F5F5;
border: 1px solid #9CA3B5;
border-radius: 4px;
margin-bottom: 0;
min-height: auto;
cursor: auto;
transition: all .3s ease-in;
}
.flow2 .form-plate.clicked {
background: #007BFF;
border-color: #007BFF;
}
.flow2 .form-plate .left {
border-radius: 0;
border: none;
background: transparent;
padding: 15px 25px;
width: 230px;
}
.flow2 .form-plate .right {
border: none;
border-radius: none;
background: transparent;
padding: 10px 25px 15px 10px;
}
.flow2 .plate-small-info {
margin: 0;
color: #1D2E59;
/*font: 10px / 17px 'Open Sans';*/
}
.flow2 .plate-vehicle-info {
display: flex;
align-items: center;
justify-content: center;
padding: 0 0 3px 0;
}
.flow2 .plate-vehicle-info p {
color: #1D2E59;
margin: 0 25px 5px 0;
/*font: 600 13px / 18px 'Open Sans';*/
}
.flow2 .plate-vehicle-info p:last-child {
margin-right: 0;
}
.flow2 .btn-blue {
background: #007BFF;
}
.flow2 .clicked .btn-blue {
background: #006BCD;
}
.flow2 .btn-blue .one {
display: block;
}
.flow2 .btn-blue .two {
display: none;
}
.flow2 .clicked .btn-blue .one {
display: none;
}
.flow2 .clicked .btn-blue .two {
display: block;
}
.form-step-box.flow2 .btn-wrapper.both {
margin-top: 20px;
}
.form-step-box.flow2 .btn-wrapper.both.with-border {
border-top: 1px solid #8C92A3;
padding-top: 20px;
margin-top: 33px;
}
.flow2 .flow3-vehicle-wrapper .remove-wrapper {
justify-content: space-between;
}
.flow2 .flow3-vehicle-wrapper .remove-wrapper p {
margin: 0;
/*font: 600 14px / 19px 'Open Sans';*/
}
/* Portal Page CSS */
.portal-header .right {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.portal-header p {
margin: 0 40px 0 0;
color: #1D2E59;
/*font: 14px / 19px 'Open Sans';*/
}
.portal-header .user-name {
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
}
.portal-header .btn-borderless {
background: transparent;
color: #006BCD;
border: 1px solid #006BCD;
border-radius: 2px;
padding: 7px 15px;
font-weight: 600;
font-size: 16px;
line-height: 22px;
width: auto;
height: auto;
flex-shrink: 0;
}
.portal-header .btn-borderless:hover, .portal-header .btn-borderless:focus, .portal-header .btn-borderless:not(:disabled):not(.disabled):active {
color: #006BCD;
border: 1px solid #006BCD;
background: transparent;
}
.portal-section .checkout-box {
box-shadow: none;
border-radius: 0;
background: transparent;
padding: 0;
max-width: 835px;
}
.portal-section h1 {
color: #1D2E59;
margin: 0 0 15px 0;
/*font: 600 20px / 27px 'Open Sans';*/
}
.portal-section .form-step-box {
margin: 0;
}
.portal-section .vehicle-info-header {
padding: 13px 25px;
}
.portal-section .flow3-vehicle-wrapper .plate.small {
width: 79px;
height: 41px;
margin-right: 34px;
background: #fff url(/images/portal/plate-bg-blue.svg) center center / 100% 100% no-repeat;
border: none;
}
.portal-section .flow3-vehicle-wrapper .plate.small h3 {
font-size: 17px;
line-height: 17px;
}
.portal-section .flow3-vehicle-wrapper .small .orange-wrapper img {
width: 33px;
}
.portal-section .vehicle-info-header .header-sub {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: space-between;
}
.portal-section .vehicle-info-header .header-sub h4 {
margin: 0 15px 0 0;
color: #fff;
/*font: 600 18px / 22px 'Open Sans';*/
}
.portal-section .vehicle-info-header .header-sub h4 b {
font-size: 19px;
}
.portal-section .vehicle-info-header .header-sub p {
margin: 0;
color: #fff;
/*font: 12px / 14px 'Open Sans';*/
max-width: 200px;
}
.portal-section .vehicle-info-body {
padding: 25px;
border-radius: 0;
background: #fff;
}
.portal-row {
display: flex;
align-items: center;
}
.portal-row .portal-right {
width: 188px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.portal-row .portal-right.body {
border-left: 1px solid #B4B4BC;
}
.portal-row .portal-left {
flex-grow: 1;
padding-right: 15px;
}
.portal-section .vehicle-info-body p {
color: #8C92A3;
margin: 0 0 3px 0;
/*font: 14px / 18px 'Open Sans';*/
}
.portal-section .vehicle-info-body h6 {
margin: 0;
color: #1D2E59;
font-size: 16px;
line-height: 19px;
}
.portal-section .btn-receipt {
display: flex;
align-items: center;
justify-content: center;
color: #006BCD;
/*font: 600 14px / 16px 'Open Sans';*/
}
.portal-section .btn-receipt:hover, .portal-section .btn-receipt:focus {
color: #006BCD;
text-decoration: none;
outline: none;
}
.portal-section .btn-receipt span {
display: block;
}
.portal-section .btn-receipt img {
margin-left: 12px;
}
.portal-section .vehicle-info-footer {
background: #F5F5F5;
border: 1px solid #B4B4BC;
border-top: none;
border-radius: 0 0 10px 10px;
padding: 12px 25px;
}
.portal-section .vehicle-info-footer p {
margin: 0;
color: #1D2E59;
/*font: 12px / 17px 'Open Sans';*/
}
.portal-section .vehicle-info-footer p b {
font-weight: 600;
}
.portal-section .vehicle-info-footer .btn-green {
height: 31px;
width: auto;
/* max-width: 159px; */
max-width: 100%;
font-size: 12px;
line-height: 16px;
padding: 7px 10px;
}
.portal-section .flow3-vehicle-wrapper .vehicle-info {
margin-bottom: 20px;
}
.portal-section .contact-info {
margin-bottom: 25px;
border: 1px solid #B4B4BC;
background: #fff;
border-radius: 10px;
padding: 20px 25px;
}
.portal-section .contact-info p {
margin: 0 0 10px 0;
color: #1D2E59;
/*font: 14px / 17px 'Open Sans';*/
}
.portal-section .contact-info h6 {
margin: 0 0 3px 0;
color: #1D2E59;
/*font: 14px / 17px 'Open Sans';*/
text-transform: uppercase;
}
.portal-section .contact-info h6 b {
font-weight: 600;
font-variant: small-caps;
text-transform: uppercase;
}
.portal-section .support {
margin: 0;
text-align: center;
color: #1D2E59;
/*font: 12px / 14px 'Open Sans';*/
}
.portal-section .support a {
color: #006BCD;
text-decoration: none;
}
.portal-section .support a:hover, .portal-section .support a:focus {
color: #006BCD;
outline: none;
text-decoration: none;
}
.portal-modal .modal-dialog {
max-width: 275px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
.portal-modal .modal-content {
border: none;
border-radius: 0;
}
.portal-modal .modal-header {
padding: 15px;
border: none;
}
.portal-modal .modal-header .close {
padding: 15px;
opacity: 1;
}
.portal-modal .modal-header .close img {
transition: all .3s ease-in;
display: block;
}
.portal-modal .modal-header .close:hover img, .portal-modal .modal-header .close:focus img {
transform: rotate(90deg);
}
.portal-modal .modal-body {
padding: 5px 15px 25px 15px;
}
.portal-modal .order-details {
padding-bottom: 10px;
border-bottom: 1px solid #B4B4BC;
margin-bottom: 10px;
}
.portal-modal .modal-row {
display: flex;
}
.portal-modal .modal-row .left {
flex-shrink: 0;
width: 50%;
}
.portal-modal .modal-row .right {
flex-grow: 1;
}
.portal-modal .modal-row p {
color: #8C92A3;
margin: 0;
/*font: 10px / 14px 'Open Sans';*/
}
.portal-modal .modal-row h6 {
margin: 0 0 10px 0;
color: #1D2E59;
/*font: 600 12px / 15px 'Open Sans';*/
}
.portal-modal .fees {
margin: 0 0 10px 0;
padding: 0 0 10px 0;
border-bottom: 1px dashed #B4B4BC;
color: #8C92A3;
/*font: 10px / 12px 'Open Sans';*/
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.portal-modal .fees .fee-number {
font-weight: 700;
margin-left: 25px;
}
.portal-modal .fees.total {
justify-content: flex-end;
border-bottom: none;
padding: 0;
margin: 0;
font: 600 12px / 14px 'Open Sans';
color: #1D2E59;
}
/* Login page CSS */
.login-section .checkout-box {
padding: 60px 40px 50px 40px;
}
.login-section h4 {
color: #1D2E59;
margin: 0 0 10px 0;
/*font: 600 21px / 29px 'Open Sans';*/
}
.login-section h6 {
color: #1D2E59;
margin: 0 0 20px 0;
/*font: 500 14px / 18px 'Open Sans';*/
}
.login-section label {
font-size: 14px;
font-weight: 600;
line-height: 18px;
}
.login-section .form-control {
padding-left: 20px;
padding-right: 20px;
}
.login-section .form-control::placeholder {
color: #9CA3B5;
}
.login-section .form-control::-webkit-input-placeholder {
color: #9CA3B5;
}
.login-section .form-control:-moz-placeholder {
color: #9CA3B5;
opacity: 1;
}
.login-section .form-control::-moz-placeholder {
color: #9CA3B5;
opacity: 1;
}
.login-section .form-control:-ms-input-placeholder {
color: #9CA3B5;
}
.login-section .form-control::-ms-input-placeholder {
color: #9CA3B5;
}
.login-section .small-text {
margin: 5px 0 0 0;
font-size: 10px;
line-height: 17px;
font-weight: normal;
position: relative;
padding-left: 10px;
}
.login-section .small-text span {
position: absolute;
left: 0;
top: 0;
}
.login-section .btn-green {
margin-top: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.only-logo .right {
width: 390px;
}
.blue-wrapper .right {
width: 390px;
}
.banner-content .right {
width: 390px;
}
.about-wrapper .right {
width: 390px;
}
.footer .right a {
margin-right: 30px;
}
.review-wrapper .right {
width: 390px;
}
.owl-stage {
left: -50px;
}
.owl-theme .owl-dots .owl-dot:last-child {
margin-right: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.only-logo .right {
width: 40%;
}
.blue-wrapper .right {
width: 40%;
}
.banner-content .right {
width: 40%;
}
.banner-message-inner {
padding-bottom: 60px;
}
.banner h1 {
font-size: 47px;
}
.about-wrapper .right {
width: 40%;
}
.about-wrapper .box {
padding: 30px 25px 30px 25px;
}
.footer .footer-logo {
margin-bottom: 0;
}
.footer .right a {
margin-right: 38px;
}
.footer p {
margin-top: 15px;
}
.banner-2 h1 {
font-size: 40px;
line-height: 48px;
}
.banner-form .btn-green {
font-size: 15px;
}
.review-wrapper h2 {
font-size: 37px;
}
.review-wrapper .right {
width: 40%;
}
.owl-stage {
left: -20px;
}
.owl-theme .owl-dots .owl-dot:last-child {
margin-right: 40px;
}
/* Portal page CSS */
}
@media only screen and (max-width: 767px) {
.top-bar p {
font: 500 10px / 16px 'Open Sans';
}
.header {
padding: 20px 0;
}
.header.small-header {
padding: 15px 0;
}
.header-wrapper.only-logo {
justify-content: center;
}
.header h4 {
display: none;
}
.only-logo .left {
text-align: center;
}
.only-logo .right {
display: none;
}
.only-logo h6 {
display: none;
}
.blue-section {
display: block;
}
.blue-wrapper .right {
width: 100%;
}
.blue-wrapper .right-inner {
max-width: 100%;
}
.banner-overlay {
padding-top: 35px;
padding-bottom: 50px;
}
.banner-content {
flex-direction: column;
}
.banner-content.second {
flex-direction: column-reverse;
}
.banner-message {
margin: 30px auto 0px auto;
}
.banner-message-inner {
padding-top: 20px;
}
.banner .btn-green {
max-width: 390px;
margin: 0 auto 10px auto;
}
.banner-content .left {
padding-right: 0;
}
.banner-content .right {
width: 100%;
}
.banner h1 {
font-size: 38px;
line-height: 40px;
text-align: center;
}
.banner p {
text-align: center;
margin-bottom: 34px;
}
.banner-message-inner p {
text-align: left;
}
.about-wrapper {
flex-direction: column;
}
.about-wrapper .left {
margin-right: 0;
margin-bottom: 10px;
}
.about-wrapper .right {
width: 100%;
}
.about-wrapper .box {
padding: 30px 20px 25px 20px;
}
.footer-wrapper {
flex-direction: column;
align-items: flex-start;
}
.footer-wrapper .right {
flex-direction: column;
}
.footer .footer-logo {
margin-bottom: 30px;
}
.footer .right a {
margin-right: 0;
margin-bottom: 15px;
}
.footer p {
margin-top: 10px;
}
.banner-form {
max-width: 100%;
margin: 30px 0 10px 0;
}
.banner-2 p {
text-align: left;
}
.banner-form p.agree {
text-align: center;
}
.banner-form .btn-green {
font-size: 16px;
margin-bottom: 40px;
}
.review-wrapper {
flex-direction: column;
}
.review-wrapper .right {
width: 100%;
margin-top: 40px;
}
.owl-stage {
left: -15px;
}
.owl-theme .owl-dots .owl-dot:last-child {
margin-right: 30px;
}
.modal-body {
padding-left: 20px;
padding-right: 20px;
}
.checkout-header {
padding-top: 20px;
padding-bottom: 20px;
}
.checkout-box {
padding-left: 20px;
padding-right: 20px;
}
.check-row {
flex-direction: column;
}
.checkout-box .btn-wrapper.both {
flex-direction: column-reverse;
}
.checkout-box .btn-wrapper .btn-green {
margin-bottom: 20px;
}
.sec-banner {
padding: 40px 0 50px 0;
}
.thanks-box {
padding-left: 30px;
padding-right: 30px;
}
/* Form Steps - 2nd step - CSS */
.form-plate {
flex-direction: column;
}
.form-plate .left {
width: 100%;
border-radius: 4px 4px 0 0;
}
.form-plate .right {
border: 1px solid #9CA3B5;
border-top: none;
border-radius: 0 0 4px 4px;
}
.form-step-box .select-plate:checked + .form-plate .right {
border: 4px solid #006BCD;
border-top: none;
}
.form-step-box .multiple-btn {
/* flex-direction: column; */
margin-bottom: 15px;
width: 100%;
justify-content: center;
}
.form-step-box .multiple-btn .btn {
margin-left: 5px;
font-size: 14px;
padding: 6px 10px;
}
.form-step-box .btn-wrapper .btn-blue {
margin-left: 0;
margin-right: 5px;
}
.form-step-box h6 {
font-size: 14px;
line-height: 20px;
}
.form-step-box .radio-box {
padding: 0;
}
.form-step-box .radio-box p {
font-size: 14px;
}
/* Flow 3 form pages CSS */
.add-vehicle-wrapper .btn-add-vehicle {
font-size: 16px;
}
.vehicle-info-body .radio-row.three-ans > label {
flex-basis: 0;
}
.vehicle-info-body .radio-row.three-ans .space, .vehicle-info-body .radio-row.three-ans img {
display: none;
}
.vehicle-info-body .radio-row.three-ans .radio-box {
justify-content: center;
padding: 7px;
}
.vehicle-info-header {
padding-left: 15px;
padding-right: 15px;
}
.vehicle-info-body {
padding-left: 15px;
padding-right: 15px;
}
.form-step-box .btn-wrapper.both.flow3-third .btn-back {
margin-top: 35px;
}
/* Flow 2 form pages CSS */
.flow2 .form-plate .left {
width: 100%;
padding-bottom: 5px;
padding-top: 20px;
}
.flow2 .form-plate .right {
padding-left: 25px;
padding-right: 25px;
padding-bottom: 20px;
}
.flow2 .btn-blue {
max-width: 400px;
margin: 0 auto;
}
/* Portal page CSS */
.portal-section .portal-row {
flex-direction: column;
}
.portal-row .portal-right.body {
border: none;
}
.portal-row .portal-right {
width: 100%;
border: none;
margin-top: 15px;
}
.portal-section .vehicle-info-footer {
padding-bottom: 20px;
}
.portal-section h1 {
font-size: 16px;
line-height: 22px;
}
.portal-section .vehicle-info-header {
border-radius: 10px 10px 0 0;
}
.portal-section .vehicle-info-footer {
border-radius: 0 0 10px 10px;
padding: 15px 35px 25px 35px;
}
.portal-row .portal-left {
padding-right: 0;
}
.portal-section .vehicle-info-body {
padding: 30px 35px;
}
.portal-row .portal-left .row > div {
display: flex;
align-items: flex-start;
}
.portal-section .vehicle-info-body p {
margin: 0 0 15px 0;
width: 110px;
flex-shrink: 0;
}
.portal-section .vehicle-info-body h6 {
margin-bottom: 15px;
}
.portal-section .btn-receipt {
width: 100%;
padding: 8px 15px;
border: 1px solid #006BCD;
border-radius: 4px;
}
.portal-section .btn-receipt br {
display: none;
}
.portal-section .btn-receipt img {
width: 14px;
}
.portal-section .vehicle-info-footer p {
font-size: 10px;
line-height: 14px;
text-align: center;
}
.portal-section .vehicle-info-footer p b {
font-size: 12px;
line-height: 17px;
}
.portal-section .vehicle-info-footer .btn-green {
max-width: 100%;
width: 100%;
}
.portal-section .support {
line-height: 17px;
}
/* Login Page CSS */
.login-section .checkout-box {
padding: 40px 30px 50px 30px;
}
}
@media only screen and (max-width: 575px) {
.thanks-box {
padding-left: 20px;
padding-right: 20px;
}
/* Portal page css */
.portal-header .header-wrapper {
align-items: flex-start;
}
.portal-header .logo {
width: 84px;
}
.portal-header .right {
flex-direction: column;
flex-grow: 0;
width: 155px;
}
.portal-header p {
margin: 0 0 10px 0;
font-size: 10px;
line-height: 12px;
}
.portal-header .user-name {
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
}
.portal-header .btn-borderless {
font-size: 12px;
line-height: 16px;
display: block;
max-width: 100%;
padding: 3px 6px;
width: 100%;
}
.portal-section .vehicle-info-header {
padding-left: 15px;
padding-right: 15px;
}
.portal-section .flow3-vehicle-wrapper .plate.small {
margin-right: 15px;
width: 100px;
}
.login-section .small-text {
line-height: 12px;
}
}
.pull-right {
float: right !important;
}
.pa-plate {
background: none;
}
.pa-plate .bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
height: 6px;
}
.pa-plate .bar.top {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: #00008D;
}
.pa-plate .bar.bottom {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: #FFFF00;
}
.pa-plate .bar .circle {
width: 4px;
height: 2px;
background: #DCDCDC;
border-radius: 4px;
transform: matrix(1, 0, 0, -1, 0, 0);
}
.pa-plate .pa-plate-body {
padding: 4px 5px 1px 5px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.pa-plate h3 {
margin: 0;
color: #00008D;
font: 12px / 14px license;
}
.pa-plate .plate-center-icon {
display: block;
margin: 0 4px 2px 4px;
width: 6px;
}