@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:400,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap');

html, body {background: #ffffff; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; margin: 0px; padding: 0px;}

h1 {color: #3b3b3b; font-size: 40px; font-weight: bold; margin-bottom: 35px; padding-bottom: 10px; position: relative;}
h1:after {background: #35d843; bottom: -10px; content: ""; left: 0px; height: 5px; position: absolute; width: 300px;}

form a {color: #02ce13;}

.position-relative {position: relative;}

.header-container {background: #ffffff;}
.navbar {padding: 0px;} .navbar .navbar-main {background: #ffffff;}
.navbar-main .navbar-brand img {height: 60px; margin-right: 20px;}
.navbar-main .nav-item {margin: 40px 15px;}
.navbar-main .nav-item a {color: #272727; display: inline-block; font-family: 'Roboto Condensed', sans-serif; font-size: 15px; font-weight: bold; text-transform: uppercase;}
.navbar-main .nav-item.nav-facebook {background: #3b3b3b; margin: 0px; padding: 33px 15px;}
.navbar-main .nav-item.nav-facebook a {background: #ffffff; color: #3b3b3b; padding: 8px 13px;}

.content-container {background: #ffffff url('../images/content-bg.png') bottom center no-repeat; color: #3b3b3b; font-size: 16px; padding: 15px 0px;}
.content-dark-container {background: #efefef; color: #242424; font-size: 16px; padding: 15px 0px;}
.content-dark-container .arrow-bg:after {background: #efefef url('../images/arrow-bg.png') right center no-repeat; content: ""; left: -500px; position: absolute; top: 0px; bottom: 0px; right: -50px; z-index: 0;}

.caruser-container {background: #efefef url('../images/header-bg.png') top center no-repeat; color: #3b3b3b; margin-bottom: 180px; position: relative;}
.caruser-container .caruser-overflow {bottom: -80px; left: 0px; overflow-x: hidden; position: absolute; right: 0px; top: 0px;}
.caruser-container .position-relative {height: 1000px;}
.caruser-container .caruser-title {font-size: 80px; font-weight: bold; line-height: 80px; padding: 30px 0px 0px 0px; width: 70%;}
.caruser-container .caruser-title p {display: block; font-size: 24px; font-weight: normal; line-height: 30px; margin: 20px 0px 0px 0px; padding: 0px;}
.caruser-container .caruser-title span {display: block; font-size: 60px; font-weight: bold; line-height: 60px;}
.caruser-container .caruser-text-1, .caruser-container .caruser-text-2 {color: #ffffff; line-height: 30px; font-size: 18px; height: 480px; padding: 60px 160px; position: absolute; width: 610px;}
.caruser-container .caruser-text-1 {background: url('../images/text-bg-1.png') no-repeat; background-size: cover; bottom: 100px; left: 0px;}
.caruser-container .caruser-text-2 {background: url('../images/text-bg-2.png') no-repeat; background-size: cover; bottom: -160px; left: 500px;}
.caruser-container .caruser-text-1-title, .caruser-container .caruser-text-2-title {color: #3b3b3b; font-size: 40px; font-weight: bold; line-height: 40px; position: absolute; top: -90px; width: 400px;}
.caruser-container .caruser-text-1-title .float-left, .caruser-container .caruser-text-2-title .float-left {color: #33d640; font-size: 60px; margin: 10px 15px 0px 0px;}
.caruser-container .free-shipping-icon {background: url('../images/free-shipping-icon.png') no-repeat; background-size: cover; height: 200px; position: absolute; bottom: 0px; left: calc(50% + 400px); width: 200px;}
.caruser-container .hho-engine {background: url('../images/hho-engine.png') no-repeat; background-size: cover; height: 359px; position: absolute; bottom: 30px; left: calc(50% + 480px); width: 368px;}
.caruser-container .hho-car {background: url('../images/hho-car-2.png') no-repeat; background-size: cover; height: 660px; position: absolute; top: -80px; left: calc(50% + 80px); width: 885px;}

.content-title {color: #3b3b3b; font-size: 34px; font-weight: bold; margin-bottom: 35px; padding-bottom: 10px; position: relative;}
.content-title:after {background: #35d843; bottom: -10px; content: ""; left: 0px; height: 5px; position: absolute; width: 300px;}
.content-title-center {color: #3b3b3b; font-size: 34px; font-weight: bold; margin-bottom: 35px; padding-bottom: 10px; position: relative; text-align: center;}
.content-title-center:after {background: #35d843; bottom: -10px; content: ""; left: calc(50% - 150px); height: 5px; position: absolute; width: 300px;}

.content-box {background: #22d415; color: #ffffff; display: inline-block; font-size: 20px; font-weight: bold; padding: 10px 40px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
.content-box span {display: block; font-size: 34px; line-height: 34px;}
.content-box i {display: block; font-size: 45px; padding: 8px 15px 0px 0px;}

.arrow-content {color: #ffffff; padding-top: 190px; text-align: center; position: relative; z-index: 1;}
.arrow-content i {display: block; font-size: 40px;}
.arrow-content strong {font-size: 18px;} .arrow-content strong span {display: block; font-size: 24px;}

.offer-form-container {margin-left: 65px;}

.price-box {color: #efefef; float: left; padding: 35px 60px; width: 33%;}
.price-box span {color: #03cf13; display: block; font-size: 38px; font-weight: bold; line-height: 40px;}
.price-box img {display: block; height: 60px; padding: 8px 25px 0px 0px;}
.price-box-1 {background: #474747;} .price-box-2 {background: #343434;} .price-box-3 {background: #242424;}

.footer-menu-container {background: #242424;}
.footer-menu-container .navbar-footer .navbar-brand img {height: 60px; margin-right: 20px;}
.footer-menu-container .navbar-footer .nav-item {margin: 40px 15px;}
.footer-menu-container .navbar-footer .nav-item a {color: #757575; display: inline-block; font-family: 'Roboto Condensed', sans-serif; font-size: 15px; font-weight: bold; text-transform: uppercase;}
.footer-menu-container .navbar-footer .nav-item.nav-facebook a {background: #ffffff; color: #3b3b3b; padding: 8px 13px;}

.footer-container {background: #161616; color: #757575; font-family: 'Roboto Condensed', sans-serif; font-size: 16px; padding: 20px 0px;}
.footer-container a {color: #757575; font-family: 'Roboto Condensed', sans-serif; font-size: 16px;}

.btn-success {background: #02ce13; border-color: #02ce13; font-size: 16px; font-weight: bold; padding: 5px 25px; text-transform: uppercase;}


/*---start measurement text and button css ----*/
.measurement-position-margin {margin-right: 10px;}
.measurement-text {background-color: #dad8d9; text-align: left; font-weight: bold !important; font-size: 24px; line-height: 16px; border-left: solid 1px #31d035; border-top: solid 1px #31d035; border-bottom: solid 1px #31d035; padding-top: 8px; padding-left: 5px; padding-right: 5px; padding-bottom: 5px;}
.measurement-text-small {font-size: 12px;}
.measurement-button {width: 100%; background-color: #3b3b3b; color: white; font-size: 24px; font-weight: bold; padding: 10.5px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035;}
.measurement-button:hover {background-color: #31d035; color: white; text-decoration-line: none !important;}

/*---end measurement text and button css ----*/

@media only screen and (max-width: 1499.98px) {
    .caruser-container {margin-bottom: 150px;}
    .caruser-container .position-relative {height: 860px;}
    .caruser-container .caruser-text-1-title, .caruser-container .caruser-text-2-title {font-size: 30px; line-height: 30px; top: -70px; width: 300px;}
    .caruser-container .caruser-text-1-title .float-left, .caruser-container .caruser-text-2-title .float-left {margin-top: 0px;}
    .caruser-container .caruser-text-1, .caruser-container .caruser-text-2 {line-height: 26px; font-size: 18px; height: 430px; padding: 30px 140px; width: 550px;}
    .caruser-container .caruser-text-1 {bottom: 100px; left: 0px;}
    .caruser-container .caruser-text-2 {bottom: -120px; left: 430px;}
    .caruser-container .hho-car {height: 500px; top: -50px; left: calc(50% + 60px); width: 665px;}
    .caruser-container .hho-engine {height: 200px; bottom: 120px; left: calc(50% + 380px); width: 200px;}
    .caruser-container .free-shipping-icon {bottom: 60px; left: calc(50% + 340px); height: 150px; width: 150px;}
}


@media only screen and (max-width: 1199.98px) {
    .navbar-main .nav-item {margin: 38px 12px;}
    .navbar-main .nav-item a {font-size: 12px;}

    .caruser-container {margin-bottom: 110px;}
    .caruser-container .position-relative {height: 800px;}
    .caruser-container .caruser-text-1-title, .caruser-container .caruser-text-2-title {font-size: 30px; line-height: 30px; top: -70px; width: 300px;}
    .caruser-container .caruser-text-1-title .float-left, .caruser-container .caruser-text-2-title .float-left {margin-top: 0px;}
    .caruser-container .caruser-text-1, .caruser-container .caruser-text-2 {line-height: 26px; font-size: 18px; height: 360px; padding: 30px 120px; width: 457px;}
    .caruser-container .caruser-text-1 {bottom: 100px; left: 0px;}
    .caruser-container .caruser-text-2 {bottom: -90px; left: 375px;}
    .caruser-container .hho-car {height: 330px; top: -30px; left: calc(50% + 140px); width: 445px;}
    .caruser-container .hho-engine {height: 150px; bottom: 140px; left: calc(50% + 320px); width: 200px;}
    .caruser-container .free-shipping-icon {bottom: 30px; left: calc(50% + 250px); height: 150px; width: 150px;}

    .price-box {padding: 35px 40px;}

    .footer-menu-container .navbar-footer .nav-item {margin: 38px 12px;}
    .footer-menu-container .navbar-footer .nav-item a {font-size: 12px;}


}

@media only screen and (max-width: 991.98px) {
    body {padding-top: 80px;}

    .header-container {left: 0px; position: fixed; top: 0px; right: 0px; z-index: 500;}
    .navbar-main .nav-item {margin: 10px 15px;}
    .navbar-main .nav-item a {color: #272727; display: inline-block; font-family: 'Roboto Condensed', sans-serif; font-size: 15px; font-weight: bold; text-transform: uppercase;}
    .navbar-main .nav-item.nav-facebook a {background: #ffffff; display: block; text-align: center;}

    .caruser-container .position-relative {height: 700px;}
    .caruser-container .caruser-text-1-title, .caruser-container .caruser-text-2-title {left: 50px;}
    .caruser-container .caruser-text-1, .caruser-container .caruser-text-2 {line-height: 22px; font-size: 14px; height: 270px; padding: 20px 90px; width: 350px;}
    .caruser-container .caruser-text-1 {bottom: 130px; left: 0px;}
    .caruser-container .caruser-text-2 {bottom: 30px; left: 310px;}
    .caruser-container .hho-engine {height: 150px; bottom: 200px; left: calc(50% + 280px); width: 150px;}
    .caruser-container .free-shipping-icon {bottom: 120px; left: calc(50% + 230px);}
    .caruser-container .caruser-title {font-size: 60px;}
    .caruser-container .caruser-title p {font-size: 22px; line-height: 26px; margin-top: 15px;}
    .caruser-container .caruser-title span {font-size: 50px;line-height: 50px;}

    .price-box {padding: 35px 20px;}
    .price-box span {font-size: 30px; line-height: 40px;}
}

@media only screen and (max-width: 767.98px) {
    .caruser-container {margin-bottom: 0px;}
    .caruser-container .position-relative {height: 1050px;}
    .caruser-container .caruser-text-1-title, .caruser-container .caruser-text-2-title {font-size: 24px; line-height: 30px; top: -70px; width: 270px;}
    .caruser-container .caruser-text-1, .caruser-container .caruser-text-2 {line-height: 22px; font-size: 14px; height: 270px; padding: 20px 90px; width: 350px;}
    .caruser-container .caruser-text-1 {bottom: 400px; left: calc(50% - 175px);}
    .caruser-container .caruser-text-2 {bottom: 30px; left: calc(50% - 175px);}
    .caruser-container .hho-car {height: 165px; top: 140px; left: calc(50% + 0px); width: 222px;}
    .caruser-container .hho-engine {height: 120px; top: 170px; left: calc(50% + -150px); width: 120px;}
    .caruser-container .free-shipping-icon {bottom: 720px; left: calc(50% + 90px); height: 90px; width: 90px;}
    .caruser-container .caruser-title {font-size: 30px; width: 100%;}
    .caruser-container .caruser-title p {font-size: 18px; line-height: 22px; margin-top: 0px;}
    .caruser-container .caruser-title span {font-size: 26px; line-height: 28px;}

    .price-box {font-size: 14px; padding: 10px 15px; text-align: center;}
    .price-box .float-left {width: 100%;}
    .price-box span {font-size: 18px; line-height: 26px;}
    .price-box img {display: none;}

    .offer-form-container {margin-left: 0px;}  
}


/*---- measurement quieries ----*/


@media (width: 823px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text { margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 10px; padding-right: 10px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 812px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 10px; padding-right: 10px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 768px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 25px; padding-right: 20px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 736px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 25px; padding-right: 20px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 731px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 10px; padding-right: 10px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 667px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 10px; padding-right: 10px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 640px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 10px; padding-right: 10px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 568px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 10px; padding-right: 10px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 414px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 25px; padding-right: 20px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 411px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 25px; padding-right: 20px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 375px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 20px; padding-right: 20px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 360px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 10px; padding-right: 10px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}

@media (width: 320px){
    /*measurement*/
    .measurement-position-margin {margin-right: 0px; padding: 0px;}
    .measurement-text {margin-bottom: 0; border-right: solid 1px #31d035; border-left: solid 1px #31d035; display: block; width: 100%; display: block; text-align: center; padding-left: 15px; padding-right: 10px; line-height: 20px;}
    .measurement-text-small-display .float-right {display: block; width: 100%;}
    .measurement-text-small-display .float-left {display: block; width: 100%;}
    .measurement-text-small {font-size: 18px;}
    .measurement-button {width: 100%; border-left: solid 1px #31d035; padding: 8px; line-height: 50px; border-bottom: solid 1px #31d035; border-right: solid 1px #31d035; display: block; text-align: center;}
}