/* Theme Name: CARCO Theme URI: https://carco.com.my Description: Used Car Selling Platform custom wordpress theme Author: Jaring Digital Author URI: https://jaringdigital.com Version: 1.0 License: GPL License URI: http://www.gnu.org/copyleft/gpl.html */ /* ================================================== BASIC STYLES ================================================== */ html, body {border: 0; margin: 0; padding: 0; width: 100%; height: 100%; position: relative;} a img {border: 0} html {scroll-behavior: smooth;} *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} body {background: #fff; color: #222; padding: 0; margin: 0!important; font-size: 1rem; line-height: 1.3;} img, object, embed {max-width: 100%; height: auto;} input:focus {outline: none;} *:focus {outline: none;} ::selection {background: #fff2a8;} ::-moz-selection {background: #fff2a8;} .icon::before {display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased;} select {-webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; appearance:none; outline:0; background: #fff; background-image: none; flex: 1; color:#222; cursor:pointer; position: relative; border-radius: 0;} select::-ms-expand {display: none;} .select {position: relative; line-height: 3; display: flex; overflow: hidden;} .select::after {content: '\f078'; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #222; position: absolute; top: 3px; right: 10px; cursor: pointer; pointer-events: none; transition:.25s all ease;} .select:hover::after {color: #23b499;} /* ================================================== LINK ================================================== */ a, input, #submit, textarea, button, button:hover, a i, a:hover i,.thumb a img, .thumb a:hover img, a:hover .thumb img, a .thumb img, a img, .close img, .close img:hover, a .thumb::before, a:hover .thumb::before, .b-menu svg, .b-menu svg:hover {text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} a {-webkit-tap-highlight-color: transparent !important; color: #154eb8;} *{-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;} /* ================================================== TYPOGRAPHY ================================================== */ h1, h2, h3, h4, h5, h6 {font-weight: 700; margin: 0; padding: 0;} ul, li, ol {list-style: none; margin: 0; padding: 0;} p {margin: 0;} body, input, textarea, select, button {font-family: 'Roboto', Helvetica Neue, Helvetica, Arial, "sans-serif"!important;} button, select {cursor: pointer;} button {border: none; padding: 0; box-shadow: 0; background: none;} /* ================================================== LAYOUT CONTROL ================================================== */ .control, .head-control, .dash-control {margin: 0 auto; position: relative;} .control {max-width: 1240px; padding: 0 20px;} .head-control {max-width: 1600px; padding: 0 20px;} .dash-control {max-width: 1200px; padding: 0 20px;} .flot {float: left;} .sec {width: 100%; position: relative;} .js-offcanvas, .b-menu, .showme, .d-btn-post, .user-bar, .hs-hp, .filt-btn, .chp-top, .fancybox-caption-wrap {display: none;} .thumb img {width: 100%; height: auto; margin-bottom: -4px;} .wrapper {padding-top: 61px;} /* ================================================== ELEMENTOR FIX ================================================== */ .elementor-widget-text-editor p {margin-bottom: 15px;} .elementor-widget:not(:last-child), .elementor-widget-text-editor p:last-child {margin-bottom: 0!important;} .elementskit-testimonial-slider .slick-dots {bottom: 10px!important;} .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 3px!important;} .elementor-accordion-icon-right {margin-top: 3px!important;} .elementor-widget-text-editor ul, .elementor-widget-text-editor ol {padding-left: 25px; margin-bottom: 20px;} .elementor-widget-text-editor ul li {list-style: disc; margin-bottom: 5px;} .elementor-widget-text-editor ol li {list-style: decimal;} .i-btn a i, .i-btn a svg {font-size: .7rem; vertical-align: -.5px;} /* ================================================== RANK MATH BREADCRUMB ================================================== */ .rank-math-breadcrumb {font-size: .75rem; line-height: 1.1; font-weight: 400; text-transform: uppercase; color: #222;} .rank-math-breadcrumb a {color: #222; font-weight: 500;} .rank-math-breadcrumb a:hover {color: #000; text-decoration: underline;} .rank-math-breadcrumb .separator {text-indent: -9999px; font-size: .01rem;} .rank-math-breadcrumb .separator::before {content: '\f054'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .5rem; margin: 0 8px; vertical-align: 1px;} .rank-math-breadcrumb .last {text-transform: capitalize;} /* ================================================== HEADER ================================================== */ .head {background: #fff; padding: 10px 0; box-shadow: 0 2px 3px rgba(28, 28, 28, .1); z-index: 9;} .l-head, .r-head {display: flex; align-items: center;} .h-box {display: flex; justify-content: space-between; align-items: center;} .logo {background: url("images/carco-logo.svg") no-repeat; width: 118px; height: 38px; display: block; text-indent: -9999px; background-size: contain;} .nav {margin-left: 30px;} .r-head i {margin-right: 2px;} .h-app {margin-right: 25px;} .h-help a i {font-size: 1.1rem; vertical-align: -1px; margin-right: 1px;} .r-head a, #cssmenu > ul > li > a {color: #222; font-size: 1.05rem; line-height: 1.1; font-weight: 600;} /* ================================================ NAVIGATION ================================================== */ #cssmenu {display: block; padding: 0; margin: 0;} #cssmenu > ul {padding: 0; margin: 0; display: flex; align-items: center;} #cssmenu > ul > li {padding: 0; margin: 0; float: left; display: block; position: relative;} #cssmenu > ul > li > a {padding: 14px 12px; display: block; position: relative;} #cssmenu > ul > li > a:hover {color: #545454;} #cssmenu > ul > li:first-child > a {padding-left: 0;} #cssmenu > ul > li:last-child > a {padding-right: 0;} /** depth **/ #cssmenu ul li.has-sub:hover > a:after {top: 0; bottom: 0;} #cssmenu > ul > li.has-sub > a:after {content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .7rem; vertical-align: 2px; position: relative; margin-left: 5px;} #cssmenu ul li.has-sub:hover > a {z-index: 999; width: auto;} #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div {display: block;} #cssmenu ul li.has-sub:hover > a:after, #cssmenu ul li.has-sub:hover > a {color: #545454;} #cssmenu ul li > ul, #cssmenu ul li > div {display: none; width: auto; position: absolute; top: 45px; left: -8px; z-index: 99;} #cssmenu ul li > ul {width: 235px; background: #fff; padding: 10px; border: 1px solid #ddd; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;} #cssmenu ul li > ul li {display: block; float: left; width: 100%; padding: 0; margin: 0; position: relative;} #cssmenu ul li > ul li a {color: #000; margin: 0; padding: 12px 10px; font-size: 1rem; line-height: 1.1; font-weight: 400; text-transform: capitalize; text-align: left; text-decoration: none; display: block; position: relative; transition: all 0.2s ease-in-out;} #cssmenu ul li > ul li:last-child a {border-bottom: none;} #cssmenu ul li > ul li a:hover {background: #f4f6f8;} /** OTHER NAV **/ .r-ht #cssmenu > ul > li > a {font-size: .82rem; padding: 14px 10px;} .r-ht #cssmenu > ul > li:last-child > a {padding-right: 0;} #cssmenu li.n-new a, #footmenu li.n-new a {display: flex; align-items: center;} #cssmenu li.n-new a::after, #footmenu li.n-new a::after {content: 'New'; padding: 3.5px 4px; background: #d60014; font-size: .54rem; line-height: 1.1; font-weight: 500; letter-spacing: .3; color: #fff; border-radius: 2px; margin-left: 6px; animation: shine 1.5s infinite;} /* ================================================== HOME HERO ================================================== */ .hp-banner {display: none;} .h-banner img {margin-bottom: -5px;} .h-banner .swiper-pagination-bullets {bottom: 15px!important;} .h-banner .swiper-pagination-bullet {margin: 0 3.5px!important;} .h-banner .swiper-button-prev {left: 20px;} .h-banner .swiper-button-next {right: 20px;} .h-banner .swiper-button-next:after, .h-banner .swiper-button-prev:after {font-size: 16px!important; padding-top: 13px; background: #fff; display: block; border-radius: 50%; text-align: center;} .h-banner .swiper-button-next, .h-banner .swiper-button-prev, .h-banner .swiper-button-next:after, .h-banner .swiper-button-prev:after {width: 40px; height: 40px;} /*** HERO ***/ .hero {background: #fff; position: relative;} .hero h1 {font-size: 1.4rem; line-height: 1.3; font-weight: 600; margin-bottom: 15px; text-align: center;} .hhs {max-width: 900px; position: relative; margin: 0 auto;} .hhs .s-text input {padding: 16px 16px 16px 44px; font-size: 1rem; line-height: 1.1; font-weight: 400; border: 1px solid #d5dce6; border-radius: 30px; width: 100%; background: #fff; box-shadow: 0 5px 8px rgba(0, 0, 0, .11);} .hhs .s-text::before {content: ''; background: url('images/search.svg') no-repeat; background-size: contain; width: 17px; height: 17px; top: 17px; left: 18px; position: absolute; display: block; filter: invert(45%) sepia(9%) saturate(1%) hue-rotate(314deg) brightness(102%) contrast(93%);} .hhs .s-text input:focus {border-color: #fdcf33;} .hhs .s-btn {position: absolute; top: 6px; right: 5px;} .hhs .s-btn input {font-size: .9rem; line-height: 1; font-weight: 500; color: #fff; padding: 12px 20px; background: #28a745; border-radius: 30px; border: none; cursor: pointer;} .hhs .s-btn input:hover {background: #23993e;} .hh-two {margin-top: 30px;} .hc-brand .swiper-wrapper, .hc-body .swiper-wrapper {display: flex;} .hc-brand .swiper-slide {width: 10%; padding: 0 10px;} .hc-body .swiper-slide {width: 10%; padding: 0 10px;} .hc-brand .logo-img, .hc-body .logo-img {margin-bottom: 5px;} .hc-brand .logo-img img {width: 36px; height: 36px;} .hc-brand a h6, .hc-body a h6 {font-size: .73rem; line-height: 1.1; font-weight: 500; color: #545454; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; transition: .3s;} .hc-brand a:hover h6, .hc-body a:hover h6 {color: #000;} .hc-body {margin-top: 15px;} .hc-body .logo-img img {width: auto; height: 30px;} .hc-brand a:hover img, .hc-body a:hover img {opacity: .7;} /* ================================================== HOME SECTION ================================================== */ .total-cars {font-size: .98rem; line-height: 1.1;} .dd-list {display: flex; justify-content: flex-end;} .dd-i {position: relative;} .dd-btn {width: 150px; padding: 12px; background: #fff; font-size: .9rem; line-height: 1; font-weight: 500; color: #222; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; transition: .1s; position: relative; margin: 0 5px;} .dd-body .dd-btn {margin-right: 0;} .dd-btn::after {content: '\f078'; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 12px; right: 10px;} .dd-btn:hover {border: 1px solid #333;} .dd-menu {display: none; position: absolute; top: 48px; right: 5px; width: 220px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; z-index: 9;} .dd-box {padding: 10px; max-height: 300px; overflow-y: auto; background: #fff; border-bottom: 1px solid #ddd; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px;} .dd-item {padding: 10px 12px; font-size: .9rem; line-height: 1; font-weight: 500; text-transform: capitalize; cursor: pointer; transition: .1s;} .dd-item img {width: 20px; height: auto; margin-right: 5px; vertical-align: -6px;} .dd-item span {font-size: .8rem; color: #636363; font-weight: 300;} .dd-item:hover {background: #f0f7f3;} .dd-body .dd-menu {right: 0;} .dd-branch .dd-menu {width: 180px;} .dd-branch .dd-item i {font-size: .8rem; color: #e0172f; margin-right: 2px; vertical-align: 1px;} /** HOME BLOG **/ .h-blog .swiper-wrapper {} .h-blog .swiper-slide {} .h-blog .thumb, .h-blog .thumb img {border-radius: 8px;} .h-blog a:hover .thumb img {opacity: .8;} .h-blog .info {margin-top: 12px;} .h-blog a h4 {font-size: 1.2rem; line-height: 1.3; font-weight: 500; color: #222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} .h-blog a:hover h4 {text-decoration: underline;} .h-blog a .excerpt p {font-size: 1rem; line-height: 1.4; color: #4a4a4a; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;} .post-meta {font-size: .85rem; line-height: 1.1; color: #828282; margin: 8px 0 12px;} .post-meta span {font-size: .7rem; margin: 0 2px;} /** END LINK **/ .end-link h4 {margin-bottom: 10px;} .end-link ul {display: flex; flex-wrap: wrap;} .end-link li {width: 25%;} .end-link li a {font-size: 1rem; line-height: 1.1; color: #333; padding: 6px 0; display: block;} .end-link li a:hover {color: #154eb8;} /* ================================================== HOME CAR LISTING ================================================== */ .car-list {} .car-list .box {display: flex; flex-wrap: wrap; margin: 0 -12px;} .car-list .item {width: 33.3333333333%; padding: 0 12px; margin-bottom: 24px;} .car-list a {display: block; position: relative; background: #fff; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px!important; height: 100%;} .car-list .thumb {background: rgba(227,227,227,.3); margin-bottom: -1px; overflow: hidden; position: relative;} .car-list .thumb, .car-list .thumb img {border-top-left-radius: 6px; border-top-right-radius: 6px;} .car-list .bfee-label {width: 100%; text-align: center;} .car-list .bfee-label span {font-size: .88rem; line-height: 1.1; font-weight: 500; background: #e60909; color: #fff; padding: 8px 0; margin-top: -1px; display: block;} .car-list .bfee-label span i {font-size: .75rem; margin-right: 2px;} .car-list .ex-label {position: absolute; top: 10px; left: 10px; display: flex; align-items: center; z-index: 3;} .car-list a .label-pending {font-size: .86rem; line-height: 1; color: #fff; font-weight: 600; padding: 10px 12px 10px 16px; background: #d1031c; border-bottom-left-radius: 16px; position: absolute; top: 0; right: 0; z-index: 3;} .car-list a .label-pending i {font-size: .8rem; vertical-align: 1px; margin-right: 2px;} .car-list a .pending::after {content: ''; background: rgba(0,0,0,.4); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; z-index: 1;} .car-list a .ex-label {} .car-list a .cll-new {background: #3aaa60; margin-right: 4px;} .car-list a .cll-demand {background: #d80005;} .car-list a .cll-new, .car-list a .cll-demand {font-size: .65rem; line-height: 1; font-weight: 500; color: #fff; padding: 5px 6px; border-radius: 3px; text-transform: uppercase;} .car-list a .badge {width: 70px; height: 70px; position: absolute; top: 10px; right: 10px; z-index: 3;} .car-list a .badge.sold {width: 110px; height: auto; top: 0;} .car-list .info {padding: 15px 15px 0; position: relative;} .car-list a h4 {color: #222; font-size: .96rem; line-height: 1.3; font-weight: 500; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} .car-list a .cl-body {font-size: .85rem; line-height: 1.1; font-weight: 400; color: #8e8e8e; text-transform: uppercase; margin: 3px 0 12px;} .car-list a .cl-d {display: flex; font-size: .8rem; line-height: 1.1; color: #4f4f4f; margin-bottom: 10px;} .car-list a .cl-d span {margin: 0 1px; font-size: .6rem;} .car-list a .cl-d .cld-loc {margin-left: 10px;} .car-list a .cl-d .cld-loc i {font-size: .65rem; vertical-align: .5px;} .car-list a .cl-label {font-size: .68rem; line-height: 1.1; font-weight: 500; border-radius: 3px; display: flex; gap: 4px; margin-bottom: 15px;} .car-list a .cl-used {color: #3377b7; background: #e1f0ff; border: 1px solid #488ecf;} .car-list a .cl-cert {color: #000; padding: 5.5px 6px; border: 1px solid #31acbf; margin: 0;} .car-list a .cl-cert span::before {content: '\f058'; font-family: "Font Awesome 6 Free"; font-weight: 400; color: #3185bf; margin-right: 4px;} .car-list a .cl-ptype {padding: 6px 6px; color: #222; background: #fdcf33; border: 1px solid #fdcf33; margin: 0;} .car-list a .cl-ptype span::before {content: '\f51e'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #222; margin-right: 4px;} .car-list a .cl-p {height: 47px; display: flex; flex-direction: column; margin-bottom: 15px;} .car-list a .cl-c h4 {font-size: .75rem; line-height: 1.1; font-weight: 500; color: #626262; text-transform: uppercase;} .car-list a .clp-t {display: flex; align-items: flex-end; margin-top: 2px; font-size: .88rem; line-height: 1.1; font-weight: 400; color: #2e2e2e;} .car-list a .clp-t span {margin-left: 5px; font-weight: 400; color: #696c71; text-decoration: line-through;} .car-list a .cl-disc {margin-left: 10px; height: 19px; padding: 5px 6px; font-size: .7rem; line-height: 1; font-weight: 500; color: #222; background: #fdcf33; border-radius: 3px; display: inline-block;} .car-list a .clp-tm {display: flex; align-items: center;} .car-list a .cp-m {font-size: 1rem; line-height: 1.1; font-weight: 400; color: #e9280d;} .car-list a .cp-m strong {font-size: 1.65rem; font-weight: 900;} .car-list a .clp-wsp {height: 23px; font-size: .7rem; font-weight: 400; background: #32d851; color: #fff; padding: 5px 6px; margin-left: 6px; display: inline-block; border-radius: 4px;} .car-list a .clp-wsp i {margin-right: 1px;} .car-list a .cpm-cash {font-size: 1.65rem; font-weight: 900;} .car-list a .cpmc-label {margin-top: 1px;} .car-list a .cpmc-label span {font-size: .7rem; line-height: 1; font-weight: 500; background: #fff5d6; color: #000; padding: 4px 10px; border-radius: 50px; display: inline-block;} .car-list a .cpmc-label span i {font-size: .6rem; margin-right: 1px;} .car-list .clp-m {display: flex; position: relative;} .car-list .clp-m button {font-size: .95rem; color: #3d82c3; padding: 15px 4px 2px; margin: -8px 0 0 1px; border: none; position: relative;} .car-list .clp-item {top: 30px; left: 0;} .clp-item {display: none; position: absolute; z-index: 99; width: 355px; opacity: 0; transition: opacity 0.3s ease;} .clp-m button:hover + .clp-item, .clp-item:hover {display: block; opacity: 1;} .clp-box {display: block; background: #fff; width: 100%; border-radius: 10px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;} .clp-top {padding: 20px; background: #154687; border-top-left-radius: 10px; border-top-right-radius: 10px;} .clp-btm {padding: 20px;} .clp-box p, .clp-box ul li {font-size: .9rem; line-height: 1.4; color: #232323;} .clp-box ul {margin-top: 10px; padding-left: 18px;} .clp-box ul li {list-style: disc; margin-bottom: 4px;} .clp-box ul li:last-child {margin-bottom: 0;} .clp-top p {color: #fff;} .clp-top .clp {font-size: .95rem; line-height: 1.1; font-weight: 400; color: #f8ca2d;} .clp-top .clp span {margin-right: 2px;} .clp-top .clp strong {font-size: 1.8rem; font-weight: 700; color: #f8ca2d;} .clp-box .cp-m {margin: 12px 0;} .car-list .cl-end {margin-top: 10px; padding: 8px 0; border-top: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between;} .car-list .cl-branch {font-size: .8rem; line-height: 1.1; color: #333;} .car-list .cl-branch i {font-size: .72rem; vertical-align: 1px; margin-right: 1px;} .car-list a .cl-btn {padding: 8px 15px; font-size: .8rem; line-height: 1.1; font-weight: 500; background: #ed264f; color: #fff; border-radius: 5px; display: inline-block; transition: .3s;} .car-list a:hover .cl-btn {background: #ce1b40;} .hp-vc {display: none;} .h-car .btn {margin-top: 10px;} .h-car .btn button {padding: 12px 0; font-size: .95rem; line-height: 1.1; font-weight: 500; text-transform: uppercase; color: #222; width: 250px; background: #fdcf33; border-radius: 4px; display: block;} .h-car .btn button:hover {background: #f7c61e;} #load-more.loading::before {content: ''; display: inline-block; width: 30px; height: 30px; border: 2px solid #fdcf33; border-radius: 50%; border-top-color: transparent; border-bottom-color: transparent; animation: spin 1s linear infinite; margin-bottom: 10px;} @keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }} .vc-gal .swiper-button-prev:after, .vc-gal .swiper-button-next:after {font-size: 20px; color: #000!important;} .vc-gal .swiper-button-prev {left: 5px!important;} .vc-gal .swiper-button-next {right: 5px!important;} .vc-gal .swiper-pagination-bullets {bottom: 10px!important;} .vc-gal .swiper-pagination-bullet {margin: 0 4px!important; width: 6px!important; height: 6px!important; background: #fff!important; opacity: 1!important;} .vc-gal .swiper-pagination-bullet-active {background: #fdcf33!important; width: 16px!important; border-radius: 10px!important;} .vc-gal.has-overlay {position: relative;} .vc-gal.has-overlay .overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 1;} /* ================================================== CAT CAR LISTING ================================================== */ .cat-page {padding: 20px 0;} .car-cat {border-bottom: 1px solid #ddd;} .c-bread {margin-bottom: 20px;} .c-bread span {text-transform: uppercase!important;} .cc-top {padding-bottom: 20px; background: #fff; border-bottom: 1px solid #ddd;} .cc-up {display: flex; justify-content: space-between; align-items: flex-end;} .cc-title h1 {font-size: 1.3rem; line-height: 1.1; margin-bottom: 15px; position: relative;} .cc-title li {font-size: .95rem; line-height: 1.3; position: relative; padding-left: 22px; margin-bottom: 6px;} .cc-title li::before {content: '\f058'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #31ac70; position: absolute; top: -1px; left: 0;} .cc-up .cc-dd {margin-bottom: 6px;} .cc-search {margin-top: 10px;} .cc-search .s-text input {padding: 16px 16px 16px 38px; font-size: 1rem; line-height: 1.1; font-weight: 400; border: 1px solid #d5dce6; border-radius: 4px; width: 100%; background: #fff;} .cc-search .s-text::before {content: ''; background: url('images/search.svg') no-repeat; background-size: contain; width: 16px; height: 16px; top: 18px; left: 14px; position: absolute; display: block; filter: invert(45%) sepia(9%) saturate(1%) hue-rotate(314deg) brightness(102%) contrast(93%);} .cc-search .s-text input:focus {border-color: #fdcf33; box-shadow: 0 6px 10px rgba(0, 0, 0, .15);} .cc-search .s-btn {position: absolute; top: 6.5px; right: 5px;} .cc-search .s-btn input {font-size: .9rem; line-height: 1; font-weight: 500; padding: 12px 30px; background: #f8ca2d; color: #222; text-transform: uppercase; border-radius: 4px; border: none; cursor: pointer;} .cc-search .s-btn input:hover {background: #f3c21d;} /*** CAT FILTER MOBILE ***/ .cfi-wrap {background: #fff; height: 100%; border-top-left-radius: 20px; border-top-right-radius: 20px;} .cfi-title {padding: 15px 0; border-bottom: 1px solid #e2e2e2; border-top-left-radius: 20px; border-top-right-radius: 20px;} .cfi-title h4 {text-align: center;} button.js-offcanvas-close {position: absolute; top: 8px; right: 10px; padding: 8px!important;} .cfi-inner {background: #fff; height: 100%;} .cfi-inner .box {display: flex; height: 100%; margin-bottom: 50px;} #c-tabs {width: 30%;} #c-tabs li {width: 100%; position: relative;} #c-tabs li a {display: block; width: 100%; height: 55px; padding: 0 10px; font-size: .85rem; line-height: 1.1; font-weight: 600; padding-top: 19px; background: #fff9fa; color: #222; border-bottom: .5px solid #d5dce6; cursor: pointer;} #c-tabs li a::before {content: ""; position: absolute; top: 2px; left: 0; display: block; width: 4px; bottom: 2px; background: #ea0f38;} #c-tabs li a.inactive {background: #fff;} #c-tabs li a.inactive::before {content: ""; background: none;} .tab-content {width: 70%; border-left: 1px solid #e2e2e2; padding: 15px; overflow-y: auto;} .t-item {clear: both; width: 100%;} .t-item a span {font-size: .8rem; font-weight: 300;} .t-item .logo-img img {width: auto; height: 30px;} .t-item a h4 {font-size: .85rem; line-height: 1.1; font-weight: 500; color: #222; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} .t-item a h4 span {font-size: .73rem; font-weight: 300;} .t-branch .box, .t-brand .box, .t-body .box {flex-wrap: wrap;} .t-branch .row {width: 100%; margin-bottom: 8px;} .t-branch .row a, .t-body .row a {padding: 9px 7px; font-size: .9rem; line-height: 1.1; text-align: center; color: #2e2e2e; background: #f4f6f8; border-radius: 4px; display: block;} .t-branch .row a i {margin-right: 3px; font-size: .75rem; color: #e0172f; vertical-align: 1px;} .t-brand .row {width: 50%; margin-bottom: 20px;} .t-body .box {margin: 0 -5px;} .t-body .row {width: 50%; padding: 0 5px; margin-bottom: 10px;} /** CAT LISTING **/ .cc-list {padding: 30px 0;} .ccl-total {font-size: .98rem; line-height: 1.1; margin-bottom: 15px;} .end-cta {margin: 40px 0;} .ecf-item {background: url('images/end-cta.svg') #fff bottom right no-repeat; background-size: 386px 300px; border-radius: 10px; display: flex; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;} .ecf-item .row-one {width: 65%; padding: 40px;} .ecf-item .row-two {width: 35%;} .end-cta h3 {font-size: 1.3rem; line-height: 1.2; margin-bottom: 6px;} .end-cta p {font-size: .96rem; line-height: 1.4; color: #5c5c5c;} .end-cta .e-form {margin-top: 25px;} .end-cta .e-form .row {margin-bottom: 18px;} .end-cta .e-form .wpcf7 .wpcf7-list-item :checked + span {font-weight: 400;} .end-cta .e-form .wpcf7 .button input {background: #fdcf33; color: #222;} .end-cta .e-form .wpcf7 .button input:hover {background: #f8ca2d;} /* ================================================== SEARCH PAGE ================================================== */ .search .cc-search {margin: 0 0 15px;} /* ================================================== CARS SINGLE TOP ================================================== */ .csd-top {margin-bottom: 20px;} .csd-top .box {display: flex; justify-content: space-between; align-items: center;} .back button {font-size: 1rem; line-height: 1.1; font-weight: 500; color: #222; cursor: pointer;} .back button i {font-size: .9rem; margin-right: 3px;} .vs-share .modal-btn {color: #222; font-size: .95rem; line-height: 1; font-weight: 500; padding: 8px 16px; background: #fff; border: 1px solid #ccc; border-radius: 20px; display: block;} .vs-share .modal-btn i {font-size: 1rem; color: #222; margin-right: 3px; vertical-align: -1px;} .vs-share .modal-btn:hover {border-color: #222;} .moverlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 999;} .modal {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 4px; z-index: 1000;} .closeModal {position: absolute; background: none;} .closeModal img {width: 40px; height: 40px; padding: 12px; filter: invert(43%) sepia(9%) saturate(270%) hue-rotate(188deg) brightness(87%) contrast(89%); transition: .3s;} /** POPUP SHARE **/ .vsshare {width: 600px; padding: 40px 50px;} .vsshare .closeModal {top: 5px; right: 5px;} .vsshare .v-share {margin: 30px 0;} .vsshare h4, .vsshare p {text-align: center;} .vsshare h4 {font-size: 1.3rem; line-height: 1.2; font-weight: 600; margin-bottom: 12px;} .vsshare p {font-size: .95rem; line-height: 1.3; color: #95979d;} .v-share {margin: 30px 0 25px; display: flex; justify-content: center;} .v-share li {margin: 0 20px;} .v-share a {font-size: .9rem; line-height: 1.1; color: #62646a; text-align: center; display: flex; flex-direction: column; align-items: center;} .v-share i {width: 54px; height: 54px; font-size: 1.7rem; line-height: 1; color: #fff; padding-top: 12px; text-align: center; margin-bottom: 8px; display: block; border-radius: 50%;} .v-share a:hover i {opacity: .6;} .v-share a.vss-fb i {background: #4267b2; border: 1px solid #4267b2;} .v-share a.vss-msggr i {background: #007fff; border: 1px solid #007fff;} .v-share a.vss-twitter i {background: #55acee; border: 1px solid #55acee;} .v-share a.vss-wsp i {background: #00a500; border: 1px solid #00a500;} .v-share a.vss-tele i {background: #0088cc; border: 1px solid #0088cc;} .v-share a.vss-mail i {background: none; color: #999; border: 1px solid #ccc;} .vss-copy {width: 100%; display: flex; flex-direction: column; justify-content: center;} .vss-c {display: flex; width: 100%;} .vss-copy input {width: 100%; padding: 12px; border: 1px solid #ccc; font-size: 1rem; line-height: 1; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px;} .vss-copy button {min-width: 120px; font-size: .92rem; line-height: 1; font-weight: 500; padding: 12px; background: #222; color: #fff; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;} .vss-copy button:hover {background: #000;} .vss-copy #copy-message {margin-top: 5px; font-size: .9rem; line-height: 1; color: #27b530; text-align: center;} /** POPUP SCHEDULE **/ .vsd-wrap {padding-top: 51px;} .vsd-top {padding: 15px 0;} .vsd-top .vsd-title h3 {font-size: 1.4rem; line-height: 1.1;} .vsd-box {display: flex; flex-direction: row-reverse; width: 100%; position: relative;} .vsd-box .row-one {width: 60%; padding-right: 25px;} .vsd-box .row-two {width: 40%;} .vsd-box .frc {background: #fff; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, .1);} .vsd-box .ff-title {padding: 15px 20px; border-bottom: 1px solid #e8e8e8; font-size: .95rem; line-height: 1.1; font-weight: 600;} .vsd-box .frc .rw {padding: 20px 20px 2px;} .vsd-box .ff-note {font-size: .9rem; line-height: 1.2; color: #494949; margin: 10px 0;} .vsd-box .cf-note {margin-top: 10px;} .vsd-box .cf-note .wpcf7-list-item input {margin-top: 0;} .vsd-box .wpcf7 .button {margin-top: 10px; padding: 15px 20px; border-top: 1px solid #e8e8e8;} .vsd-box .fdate::after, .vsd-box .f-time::after {position: absolute; top: 34px; right: 10px; font-size: 1rem; color: #929292;} .vsd-box .fdate::after {content: '\f133'; font-family: "Font Awesome 5 Free"; font-weight: 900;} .vsd-box .f-time::after {content: '\f017'; font-family: "Font Awesome 5 Free"; font-weight: 900;} .vsd-box .row-two .box {background: #fff; border-radius: 8px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, .1);} .vsd-box .row-two .col-one {display: flex; align-items: center; padding: 20px; border-bottom: 1px solid #e8e8e8; } .vsd-box .thumb {width: 30%;} .vsd-box .info {width: 70%; padding-left: 15px;} .vsd-box .info h4 {font-size: .95rem; line-height: 1.2; font-weight: 500; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} .vsd-box .cld-i {font-size: .85rem; line-height: 1.1; color: #6a6a6a; margin-bottom: 10px;} .vsd-box .cld-i span {margin: 0 1px; font-size: .6rem;} .vsd-box .clp-m {font-size: 1.3rem; line-height: 1.1; color: #e9280d;} .vsd-box .clp-m strong {font-weight: 700;} .vsd-box .clp-t {font-size: .95rem; line-height: 1.1; font-weight: 400; margin-top: 3px;} .vsd-box .row-two .col-two {padding: 20px;} .vsd-box .col-two h5 {font-size: .95rem; line-height: 1.1; font-weight: 600; color: #222;} .vsd-box .col-two h5 i {font-size: .8rem; margin-right: 2px; vertical-align: 1px;} .vsd-add {font-size: .9rem; line-height: 1.4; color: #404040; margin-top: 10px;} .vsd-dir {margin-top: 6px;} .vsd-dir a img {width: auto; height: 30px !important;} .vsd-dir a.btn-one {margin-right: 5px;} /* ================================================== CARS SINGLE MAIN ================================================== */ .cs-main {background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 60%, rgba(241,241,241,1) 95%);} .cs-box {display: flex;} .cs-one {width: 63%; padding-right: 35px; position: relative;} .cs-two {width: 37%;} .cs-top .swiper {overflow: hidden;} .cs-top .ex-label {display: flex; position: absolute; top: 14px; left: 14px; z-index: 9;} .cs-top .cll-new {background: #3aaa60; color: #fff; margin-right: 6px; font-size: .75rem; line-height: 1.1; font-weight: 500; text-transform: uppercase; padding: 7px 8px; border-radius: 8px;} .cs-top .label-pending {font-size: 1.2rem; line-height: 1.1; color: #fff; font-weight: 500; padding: 15px 20px 15px 20px; background: #d1031c; border-bottom-left-radius: 16px; top: 0; right: 0; position: absolute; z-index: 4;} .cs-top .label-pending i {font-size: 1rem; margin-right: 2px; vertical-align: .5px;} .cs-top .badge {width: 80px; height: 80px; position: absolute; top: 20px; right: 20px; z-index: 9;} .cs-top .badge.sold {width: 200px; height: auto; top: 0;} .cs-top .csGallery2 .swiper-slide {background: #ddd; border-radius: 10px; overflow: hidden;} .cs-top .swiper img {width: 100%; height: auto; border-radius: 10px; margin-bottom: -5px;} .cs-top .swiper-pagination {font-size: .8rem; line-height: 1.1; padding: 8px 0; width: 76px; color: #fff; background: rgba(0,0,0,.6); border-radius: 5px; bottom: 14px!important; right: 14px; left: inherit;} .cs-top .swiper-pagination .swiper-pagination-current::before {content: '\f302'; font-family: "Font Awesome 6 Free"; font-weight: 400; color: #fff; margin-right: 8px;} .cs-top .swiper-thumbs .swiper-slide {height: 84px; background: #ddd; border-radius: 10px; overflow: hidden; opacity: .5; cursor: pointer; transition: .3s;} .cs-top .swiper-thumbs .swiper-slide:hover {opacity: .7;} .cs-top .swiper-thumbs .swiper-slide.swiper-slide-thumb-active {opacity: 1;} .cs-top .csGallery2 .swiper-button-prev, .cs-top .csGallery2 .swiper-button-next {transition: .3s;} .cs-top .csGallery2:hover .swiper-button-prev, .cs-top .csGallery2:hover .swiper-button-next {display: flex; transition: .3s;} .cs-top .swiper-button-prev {left: 0;} .cs-top .swiper-button-next {right: 0;} .cs-top .swiper-button-prev, .cs-top .swiper-button-next {width: 42px; color: #fff;} .cs-top .swiper-button-prev:after, .cs-top .swiper-button-next:after {font-size: 24px!important; padding-top: 24px; width: 42px; height: 72px; background: rgba(46,46,46,.6);} .cs-top .swiper-button-prev:after {border-radius: 0 40px 40px 0; padding-left: 8px;} .cs-top .swiper-button-next:after {border-radius: 40px 0 0 40px; padding-left: 20px;} .cs-top .swiper-button-prev.swiper-button-disabled, .cs-top .swiper-button-next.swiper-button-disabled {opacity: .2;} .csGallery {margin-top: 10px;} /*** CAR SINGLE SIDE ***/ .cst-hp, .cta-cs {display: none;} .cs-side {padding: 25px; background: #fff; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.09) 0px 6px 50px;} .css-top {display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 15px;} .css-top .cll-demand {color: #ff0000; font-size: .95rem; line-height: 1.1; font-weight: 500; animation: fadeInOut 2s infinite;} .cs-demand p {font-size: .7rem; line-height: 1.3; text-transform: uppercase; color: #595959; margin-top: 4px;} .cs-meta {font-size: .8rem; line-height: 1.1; color: #6c6c6c;} .cs-meta i {margin-right: 2px;} .cs-meta span {font-size: .5rem; vertical-align: 2px; margin: 0 1px;} .cl-label {display: flex; gap: 4px; margin-bottom: 15px;} .cl-label div {padding: 6px 6px; font-size: .7rem; line-height: 1.1; font-weight: 500; border-radius: 3px;} .cl-used {color: #3377b7; background: #e1f0ff; border: 1px solid #488ecf;} .cl-cert {color: #000; border: 1px solid #31acbf;} .cl-ptype {color: #222; background: #fdcf33; border: 1px solid #fdcf33;} .cl-cert span::before {content: '\f058'; font-family: "Font Awesome 6 Free"; font-weight: 400; color: #3185bf; margin-right: 4px;} .cl-ptype span::before {content: '\f51e'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #222; margin-right: 4px;} .fox-app {color: #fff; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 10s ease infinite; border: none;} .fox-app i {margin-right: 2px;} .cst-p {margin: 30px 0;} .cst-p .cl-p {display: flex; flex-direction: column;} .cst-p .clp-cash {margin-top: 5px;} .cst-p .clp-cash span {font-size: .8rem; line-height: 1; font-weight: 500; background: #fff5d6; color: #000; padding: 6px 14px; border-radius: 50px; display: inline-block;} .cst-p .clp-cash span i {font-size: .7rem; margin-right: 3px;} .cst-p .clp-t {display: flex; align-items: flex-end; margin-top: 5px; font-size: 1.05rem; line-height: 1.1; color: #000;} .cst-p .clp-t span {font-size: 1rem; color: #696c71; font-weight: 400; text-decoration: line-through; margin-left: 5px;} .cst-p .clp-disc {font-size: .75rem; line-height: 1.1; font-weight: 500; color: #222; background: #f8ca2d; padding: 5px 6px 4px; border-radius: 3px; margin-left: 10px; display: inline-block;} .cst-p .cp-m {font-size: 1.6rem; line-height: 1.1; font-weight: 600; color: #e9280d;} .cst-p .cp-m span {margin-right: 2px;} .cst-p .cp-m strong {font-size: 2rem; font-weight: 900;} .cst-p .clp-m {display: flex; position: relative;} .cst-p .clp-m button {font-size: .95rem; color: #3d82c3; padding: 11px 4px 0; margin: -2px 0 0 3px; border: none; position: relative;} .cst-p .clp-item {top: 35px; width: 360px; margin: auto; left: 0; right: 0;} .cst-p .clp-c h4 {font-size: .8rem; line-height: 1.1; font-weight: 500; color: #626262; text-transform: uppercase; margin-bottom: 5px;} .cst-title {margin-bottom: 2px;} .cst-title h1 {font-size: 1.09rem; line-height: 1.3; font-weight: 500;} .cst-body {font-size: .88rem; line-height: 1.1; color: #8e8e8e; text-transform: uppercase; margin-bottom: 10px;} .cst-i {font-size: .9rem; line-height: 1.1; color: #6a6a6a;} .cst-i span {margin: 0 3px; font-size: .6rem;} .cst-b {margin-top: 12px; font-size: .9rem; line-height: 1.1;} .cst-b i {font-size: .75rem; color: #37aa60; vertical-align: 1px; margin-right: 1px;} .cst-b a {color: #154eb8;} .cst-b a:hover {text-decoration: underline;} .cs-cta {margin-top: 25px; border-top: 1px solid #ddd;} .csc-book {width: 100%;} .cscb-btn button {padding: 15px 0; font-size: 1.1rem; line-height: 1.2; font-weight: 600; background: #d60014; color: #fff; text-align: center; width: 100%; border-radius: 50px; display: block;} .cscb-btn button:hover {background: #C9061A;} .csc-book span {display: block; font-size: .9rem; line-height: 1.2; color: rgba(0,0,0,.7); margin-top: 10px; text-align: center;} .csc-book span a:hover {text-decoration: underline;} .csc-sch button {font-size: 1rem; line-height: 1.1; padding: 14px 0; color: #0e569a; display: block; text-align: center; width: 100%;} .csc-sch button i {margin-left: 3px; width: 24px; height: 24px; font-size: .7rem; line-height: 1; color: #fff; background: #0e569a; vertical-align: 2px; padding-top: 7px; border-radius: 50%; text-align: center;} .csc-btn {font-size: .88rem; line-height: 1.4; background: #f4f6f8; color: #585a5e; padding: 10px 20px; margin-top: 15px; border-radius: 10px; display: block;} .csc-btn a {font-weight: 600;} .csc-btn a.call {color: #3a99ce;} .csc-btn a.wasap {color: #3db66d; margin-left: 2px;} .csc-btn a.wasap i {font-size: 1.1rem; vertical-align: -1px;} /*** PENDING ***/ .csc-pend {background: #ffe4e9; padding: 20px; border-radius: 8px; margin: 30px 0 10px;} .csc-pend h4 {font-size: 1.2rem; line-height: 1.1; font-weight: 600; margin-bottom: 10px;} .csc-pend h4 i {font-size: 1rem; vertical-align: 1.5px; margin-right: 2px;} .csc-pend p {font-size: .95rem; line-height: 1.3;} .csc-pend .btn {margin-top: 15px;} .csc-pend .btn button {font-size: 1.05rem; line-height: 1.1; font-weight: 600; background: #ea0f38; color: #fff; padding: 14px 0; text-align: center; width: 100%; border-radius: 16px; display: block;} .cscp-wsp {margin-top: 10px; background: #f4f6f8; padding: 10px; font-size: .9rem; line-height: 1.1; color: #525252; border-radius: 8px;} .cscp-wsp a {margin-left: 10px; color: #00ba4b; font-size: .95rem; font-weight: 600;} .cscp-wsp a i {font-size: 1rem; margin-right: 1px;} .modal.vsspending {background: none;} .cs-book {width: 480px; border-radius: 8px;} .csb-top {background: #f8ca2d; padding: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; position: relative;} .csb-top .closeModal {position: absolute; top: 0; right: 0;} .csb-top h4 {font-size: 1.2rem; line-height: 1.2; color: #222; margin-bottom: 8px;} .csb-top p {font-size: .9rem; line-height: 1.2; color: #222;} .csb-item {padding: 20px; background: #fff;} .csb-item p {font-size: .95rem; line-height: 1.2; margin-bottom: 15px;} .csb-item .wpcf7 .button input {background: #ea0f38;} .csb-item .wpcf7 .button input:hover {background: #ce1b40;} /* ================================================== CARS SINGLE BOTTOM ================================================== */ .cs-btm {position: relative;} .cs-btm {padding-top: 40px; background: rgb(241,241,241); background: linear-gradient(180deg, rgba(241,241,241,1) 2%, rgba(255,255,255,1) 50%);} .csb-inner {padding: 40px 40px 0; background: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;} .csd {margin-top: 50px;} .cs-ov.csd {margin-top: 0;} .csm-title {margin-bottom: 15px;} .csm-title h3 {font-size: 1.25rem; line-height: 1.1; font-weight: 700; color: #000;} .csm-ov {margin-top: -5px;} .csov-box {display: flex; flex-wrap: wrap; margin: 0 -5px;} .csov-box .col {width: 33.33333333%; padding: 5px;} .csov-box .col .item {display: flex; align-items: center; background: #f4f6f8; padding: 15px; border-radius: 8px;} .csov-box .ico {font-size: 1.3rem; padding-top: 11px; width: 48px; height: 48px; background: #fff; border-radius: 50%; text-align: center; margin-right: 10px;} .csov-box h4 {font-size: .86rem; line-height: 1.1; font-weight: 400;} .csov-box span {font-size: .98rem; line-height: 1.1; font-weight: 600; color: #222;} .cs-detail .keyh {display: flex; align-items: center; font-size: .9rem; line-height: 1.1; margin: 15px 0 10px;} .csds {margin-top: 5px; padding: 10px 20px; background: #fff; border: 1px solid #e8e8e8; border-radius: 12px;} .csds ul {display: flex; flex-wrap: wrap;} .csds li {width: 33.333333333%; padding: 15px 0; font-size: 1rem; line-height: 1.1; font-weight: 500; border-bottom: 1px solid #f1f1f1;} .csds li strong {display: block; font-size: .9rem; font-weight: 400; margin-bottom: 2px;} .csds li:nth-child(7), .csds li:nth-child(8), .csds li:last-child {border-bottom: none;} .highlight {margin-top: 20px;} .highlight ul {display: flex; flex-wrap: wrap;} .highlight li {font-size: .8rem; line-height: 1.3; font-weight: 400; text-align: center; margin: 0 25px 15px 0;} .highlight li:last-child {margin-right: 0;} .highlight li .ico {width: 60px; height: 60px; background-size: 36px 36px; margin: 0 auto 8px; display: block; border-radius: 50%;} .icon-dashcam .ico {background: url('images/dashcam.svg') #f1f3f8 no-repeat center center;} .icon-bluetooth .ico {background: url('images/bluetooth.svg') #f1f3f8 no-repeat center center;} .icon-seat .ico {background: url('images/seat.svg') #f1f3f8 no-repeat center center;} .icon-rear-camera .ico {background: url('images/rear_camera.svg') #f1f3f8 no-repeat center center;} .icon-android-player .ico {background: url('images/android-player.svg') #f1f3f8 no-repeat center center;} .icon-navigation .ico {background: url('images/navigation.svg') #f1f3f8 no-repeat center center;} .icon-keyless-start .ico {background: url('images/keyless_start.svg') #f1f3f8 no-repeat center center;} .icon-360-camera-view .ico {background: url('images/360_camera.svg') #f1f3f8 no-repeat center center;} .icon-rims .ico {background: url('images/rims.svg') #f1f3f8 no-repeat center center;} .icon-in-house-warranty .ico {background: url('images/in_house_warranty.svg') #f1f3f8 no-repeat center center;} .icon-manufacturer-warranty .ico {background: url('images/manufacturer_waranty.svg') #f1f3f8 no-repeat center center;} .icon-cruise-control .ico {background: url('images/cruise_control.svg') #f1f3f8 no-repeat center center;} .icon-sunroof .ico {background: url('images/sunroof.svg') #f1f3f8 no-repeat center center;} .icon-power-boot .ico {background: url('images/power_boot.svg') #f1f3f8 no-repeat center center;} .icon-power-seat .ico {background: url('images/power_seat.svg') #f1f3f8 no-repeat center center;} .fcs-cta {position: fixed; bottom: 15px; right: 15px; z-index: 9997; animation: moveUpDown 2s ease-in-out infinite;} .fcs-cta a {display: flex; align-items: center;} .fcs-cta a .cta-box {font-size: .9rem; line-height: 1.2; font-weight: 500; color: #000; background: #fff; padding: 10px; border-radius: 4px; margin-right: 5px;} .cta-icon {background: #00C332; color: #fff; font-size: 1.8rem; display: flex; justify-content: center; align-items: center; width: 0; height: 0; padding: 30px; border-radius: 50%; animation-name: pulse; animation-duration: 1.5s; animation-timing-function: ease-out; animation-iteration-count: infinite;} @keyframes pulse { 0% {box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);} 80% {box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);} } /* ================================================== CARS SINGLE CHECKLIST ================================================== */ .cscr-one {background: url('images/point-checklist.webp') #f6f4f8 bottom right no-repeat; background-size: 615px 180px; padding: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; margin-bottom: -1px; position: relative;} .cscr-one .col {width: 75%;} .cscr-one h4 {font-size: 1.5rem; line-height: 1.1; font-weight: 700; margin-bottom: 5px;} .cscr-one h5 {font-size: 1.1rem; line-height: 1.1; font-weight: 400; margin-bottom: 15px;} .cscr-one p {font-size: .95rem; line-height: 1.3;} .cscr-one .btn {margin-top: 10px;} .cscr-one .btn button {font-size: .95rem; line-height: 1.1; font-weight: 600; color: #154eb8;} .cscr-one .btn button:hover {color: #3065c7;} .cscr-one .video {margin-bottom: 0;} .cscr-two {background: #374050; padding: 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;} .cscr-two .box {display: flex; margin: 0 -10px;} .cscr-two .row {width: 20%; padding: 0 40px;} .cscr-two img {width: 60px; height: 60px; margin-bottom: 5px; filter: invert(100%) sepia(97%) saturate(615%) hue-rotate(246deg) brightness(121%) contrast(102%);} .cscr-two p {font-size: .9rem; line-height: 1.4; font-weight: 400; color: #fff;} .cs-ins {margin-top: 50px;} .cs-ins .csi-score {margin-bottom: 10px; font-size: .95rem; line-height: 1.4;} .cs-ins .csi-score span {color: #f48909;} .cs-ins .box {display: flex; flex-wrap: wrap; margin: 0 -5px;} .cs-ins .col {width: 25%; padding: 0 5px; margin-bottom: 10px;} .cs-ins .col .c-item {padding: 20px; background: #fff; border: 1px solid #e8e8e8; display: flex; flex-direction: column; border-radius: 6px;} .cs-ins .cin-info {margin-top: 10px;} .cs-ins .cin-info h4 {font-size: 1rem; line-height: 1.1; font-weight: 400; margin-bottom: 5px;} .cs-ins .cin-info h5 {font-size: 1rem; line-height: 1.1; font-weight: 600;} .cs-ins .cin-info h5 span.score-no {color: #f48909;} .cs-ins .cin-info .cii-pass {font-size: 1.1rem; color: #2AAF78; vertical-align: -1.5px; margin-left: 3px;} .cs-ins .cin-info .cii-fail {font-size: 1.1rem; color: #f4911b; vertical-align: -1.5px; margin-left: 3px;} .cs-ins .cin-ico .cin-pass, .cs-ins .cin-ico .cin-fail {width: 60px; height: 60px; padding: 13px; border-radius: 50%; display: block; text-align: center;} .cs-ins .cin-ico .cin-pass {background: #d6f4e8;} .cs-ins .cin-ico .cin-fail {background: #ffe8cc;} .cs-ins .btn {margin-top: 5px; display: flex; justify-content: center;} .cs-ins .btn button {font-size: .95rem; line-height: 1; font-weight: 500; background: #fdcf33; color: #222; width: 240px; padding: 12px 0; border-radius: 30px; position: relative;} .cs-ins .btn button:hover {background: #fed858;} .cs-ins .btn button i {margin-left: 2px; font-size: .8rem; vertical-align: 1px;} /* ================================================== CARS OTHERS BOTTOM ================================================== */ .cs-proses {margin: 60px 0; padding: 60px 0; background: #f4f6f8;} .cs-proses .box {display: flex; margin: 0 -8px;} .cs-proses .col {width: 25%; padding: 0 8px;} .cs-proses .col .item {padding: 40px 20px; border: 1px solid #ddd; border-radius: 12px; height: 100%; background: rgb(238,238,238); background: linear-gradient(34deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 20%); position: relative; overflow: hidden;} .cs-proses .col img {margin-bottom: 20px; width: auto; height: 70px;} .cs-proses .col h5 {font-size: .9rem; line-height: 1.1; font-weight: 400;} .cs-proses .col h4 {font-size: 1.15rem; line-height: 1.1; margin: 5px 0 10px;} .cs-proses .col p {font-size: .96rem; line-height: 1.4;} .cso-sec {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;} .cs-title {width: 80%; padding-right: 30px;} .cs-more {width: 20%; position: relative; display: flex; justify-content: flex-end;} .cs-title h3 {font-size: 1.2rem; line-height: 1.3;} .cs-cars .swiper-wrapper {display: flex; flex-wrap: wrap; margin: 0 -12px; width: inherit!important;} .cs-cars .swiper-slide {width: 33.3333333%; padding: 0 12px; margin-bottom: 24px;} .cs-cars {padding: 1px!important;} .cs-more a {font-size: .95rem; line-height: 1.1; font-weight: 500; color: #222;} .cs-more a i {font-size: 1rem; color: #222; margin-left: 4px; vertical-align: -1.5px; padding-top: 7px; width: 28px; height: 28px; background: #f1f3f5; border-radius: 50%; display: inline-block; text-align: center; transition: .3s;} .cs-more a:hover i {background: #fdcf33;} .more-hp {display: none;} /* ================================================== CARS SINGLE FAX ================================================== */ .cs-fax {margin: 30px 0 20px;} .fax .csm-title {margin-bottom: 15px;} .fax .box {display: flex;} .faq-main {width: 65%; padding-right: 40px;} .faq-help {width: 35%;} .faq-item {border: 1px solid #d5dce5; border-radius: 6px; margin-bottom: 10px; transition: .3s;} .faq-item:hover {border-color: #ccc;} .faq-item.active {border-color: #ccc; box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;} .faq-q {padding: 16px; position: relative; cursor: pointer;} .faq-q h4 {font-size: .96rem; line-height: 1.4; font-weight: 600; display: inline;} .faq-q i {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease;} .faq-item.active .faq-q i {transform: translateY(-50%) rotate(180deg);} .faq-a {padding: 0 16px 16px;} .faq-a p {font-size: .96rem; line-height: 1.4; margin-bottom: 14px;} .faq-a p em {font-size: .9rem;} .faq-a p:last-child {margin-bottom: 0;} .faq-a ul, .faq-a ol {padding-left: 20px; margin-bottom: 15px;} .faq-a ul:last-child, .faq-a ol:last-child {margin-bottom: 0;} .faq-a ul li, .faq-a ol li {font-size: .96rem; line-height: 1.4;} .faq-a ul li {list-style: disc;} .faq-a ol li {list-style: decimal;} .faq-a a {color: #154eb8;} .faq-a a:hover {text-decoration: underline;} .faq-a p strong, .faq-a li strong {font-weight: 500;} .csc {margin-bottom: 10px;} .csc-wrap {padding: 12px 30px; border: 1px solid #ccc; display: inline-block; border-radius: 15px; position: relative;} .csc-wrap::before {content: ""; position: absolute; bottom: 0; left: 25%; border-style: solid; border-width: 15px 20px 0 0; border-color: #ccc transparent transparent; translate: -50% 100%; transform: skew(-25deg); transform-origin: top;} .csc-wrap::after {content: ""; position: absolute; bottom: 0; left: 25%; border-style: solid; border-width: 13px 17.3px 0 0; border-color: #fff transparent transparent; translate: calc(-50% - 0.6px) 100%; transform: skew(-25deg); transform-origin: top;} .csc-org {margin: 6px 0 5px;} .cs-help h4 {font-size: .96rem; line-height: 1.1; font-weight: 500;} .cs-help .btn a {padding: 12px 30px; color: #000; font-size: .95rem; line-height: 1; font-weight: 500; border-radius: 8px; display: inline-block; text-align: center;} .cs-help .btn a.btn-one {background: #fdcf33; border: 1px solid #fdcf33; margin-right: 5px;} .cs-help .btn a.btn-one i {font-size: .8rem; vertical-align: .5px;} .cs-help .btn a.btn-two {background: #fff; border: 1px solid #000;} .cs-help .btn a.btn-two i {margin-right: 1px;} /*** CAR POPUP ***/ .popup {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 999;} .vid-box {max-width: 1200px; width: 100%; padding: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999;} .vid-box .vid-item {padding: 4px; background: #fff;} .vid-box .video-container {margin: 0;} .cs-vid a.popup-close {position: absolute; top: -15px; right: 10px; font-size: 1rem; line-height: 1.1; font-weight: 600; color: #fff; text-transform: uppercase;} .cs-vid a:hover.popup-close, .cs-vid a:hover.popup-close i {color: #fdcf33;} .csi-full {background: #f4f6f8; width: 100%; height: 100vh; overflow-y: auto;} .fra {background: #fff; padding: 20px; border-radius: 4px; margin-top: 15px;} .csi-top {background: #fff; border-bottom: 1px solid #ddd; padding: 15px 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 3;} .csi-full a.popup-close {font-size: .86rem; line-height: 1.1; font-weight: 500; color: #222;} .csi-full a.popup-close i {font-size: .6rem; vertical-align: 1px;} .ins-rep {padding: 50px 0 40px;} .ci-one {display: flex;} .ci-one .row-one {width: 100%; padding-right: 40px;} .ci-one .row-two {min-width: 340px;} .cio-title h3 {font-size: 2rem; line-height: 1.1;} .cio-title h4 {font-size: 1.5rem; line-height: 1.1; font-weight: 400; color: #727272; margin: 4px 0 10px;} .cio-info {margin-top: 20px;} .cio-info h2 {font-size: 1.2rem; line-height: 1.2; font-weight: 500; margin-bottom: 10px;} .cio-info .cs-meta {margin-top: 8px;} .ci-one .row-two .cs-cta {border: none; margin: 0; padding: 0;} .ci-two {margin: 20px 0;} .insc-title {position: relative;} .insc-title h3 {font-size: 1.6rem; line-height: 1.1; color: #222; text-align: center; background: #fff; padding: 10px; display: inline-block; position: relative; z-index: 3;} .insc-title:before {content: ''; background: #ddd; height: .5px; width: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;} .ins-cond {display: flex; margin-top: 15px;} .ins-cond .row {margin-right: 6px;} .ins-cond .in-term {font-size: .95rem; line-height: 1.1; color: #222; padding: 8px 10px; background: #f6f8fa; border: 1px solid #d7e4f1; border-radius: 4px; display: inline-block;} .ins-cond .in-term i {margin-right: 2px; color: #2aaf40;} .ci-title {margin-bottom: 10px;} .ci-title h3 {font-size: 1.05rem; line-height: 1.1;} .ins-d {} .ins-d ul {column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; column-gap: 60px; grid-column-gap: 60px; -moz-column-gap: 60px;} .ins-d li {display: flex; justify-content: space-between; padding: 6px 0; font-size: .95rem; line-height: 1.1; color: #696c71;} .ind-two {font-weight: 500; color: #333;} .ins-sec {} .ins-sec .box {column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; column-gap: 60px; grid-column-gap: 60px; -moz-column-gap: 60px; column-rule: 1px solid #e9e9e9; width: 100%;} .ins-sec .col {font-size: .95rem; line-height: 1.1; color: #57595d; padding: 6px 0; border-bottom: 1px solid #f6f6f6; width: 100%; display: flex; justify-content: space-between; align-items: center; height: 40px;} .ins-sec .insc-one {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} .ins-sec .insc-two {color: #333; width: 28px; height: 26px; display: flex; align-items: center; justify-content: center;} .ins-sec .pass {font-size: 1.3rem; color: #2aaf40;} .ins-sec .failed {color: #f4911b;} .ins-sec.cfix .box .col:last-child {border-bottom: none;} /* ================================================== FOOTER ================================================== */ .f-box {display: flex;} .footer {background: #141821;} .f-one {padding: 50px 0;} .f-one .f-box {align-items: flex-end;} .f-one .col-one {width: 45%; padding-right: 40px;} .f-one .col-two {width: 55%; padding-left: 40px;} .f-one .col-one .ft {display: flex; align-items: center; margin-bottom: 15px;} .f-one .f-logo {background: url("images/logo.webp") no-repeat; width: 130px; height: 42px; display: block; text-indent: -9999px; background-size: contain;} .f-one .col-one h4 {margin-left: 10px; font-size: 1.1rem; line-height: 1.1; font-weight: 500; color: #fff;} .f-one .col-one p {font-size: .9rem; line-height: 1.4; color: #959ca4;} .f-one .col-two p {font-size: .83rem; line-height: 1.4; color: #959ca4;} .f-one .col-two p a {color: #fff;} .f-one .col-two p a:hover {text-decoration: underline;} .f-one .tnp-subscription {margin: 0!important;} .f-one .tnp form {display: flex; align-items: center;} .f-one .tnp form label {display: none;} .f-one .tnp form .tnp-field {margin: 0 0 15px!important;} .f-one .tnp form input {padding: 14px; border: none; height: 47px;} .f-one .tnp form .tnp-field-email {width: 100%;} .f-one .tnp form .tnp-field-email input {font-size: 1rem; line-height: 1.2; background: #fff; border-top-left-radius: 4px; border-bottom-left-radius: 4px;} .f-one .tnp form .tnp-field-button {max-width: 140px; margin-left: 10px;} .f-one .tnp form .tnp-field-button input {background: #fdcf33; font-size: 1rem; font-weight: 500; color: #222; border-top-right-radius: 4px; border-bottom-right-radius: 4px; cursor: pointer;} .f-one .tnp form .tnp-field-button input:hover {background: #f8ca2d;} .f-two {padding: 40px 0; border-top: 1px solid #2b3141;} .f-two h4 {font-size: 1rem; line-height: 1.1; font-weight: 500; color: #fff; margin-bottom: 15px;} .f-two .col-one {min-width: 460px;} .f-two .col-two {width: 100%; display: flex;} .f-two .col-two .col {width: 33.3333333%; padding-right: 50px;} .f-app p {font-size: .9rem; line-height: 1.4; color: #959ca4;} .f-app p a {color: #fdcf33;} .f-app p a:hover {text-decoration: underline;} .app-btn {margin-top: 15px; display: flex;} .app-btn a {margin-right: 10px;} .app-btn img {width: auto; height: 40px;} /** FOOT BOTTOM **/ .f-btm {padding: 30px 0; border-top: 1px solid #2b3141;} .f-btm .f-box {justify-content: space-between; align-items: center;} .copy p {font-size: .9rem; line-height: 1.4; color: #959ca4;} .copy p strong {font-weight: 600;} .copy p a {font-size: .8rem; color: #959ca4;} .copy p a:hover {color: #fff;} .btm-link a {font-size: .9rem; line-height: 1.1; color: #959ca4;} .btm-link a:hover {color: #fff;} .btm-link span {vertical-align: 1.5px; font-size: .6rem; color: #535761; margin: 0 5px;} /** FOOT OTHER **/ #footmenu > ul, .foot ul {display: flex; flex-wrap: wrap;} #footmenu > ul > li, .foot li {width: 100%; margin-bottom: 10px; position: relative;} #footmenu > ul > li:last-child, .foot li:last-child {margin-bottom: 0;} #footmenu > ul > li > a, .foot li a {padding: 2px 0; font-size: .96rem; line-height: 1.1; color: #959ca4; text-transform: capitalize; display: block;} #footmenu > ul > li > a:hover, .foot li a:hover {color: #fff;} .f-socmed {margin-top: 15px;} .f-socmed ul {display: flex; align-items: center;} .f-socmed li {margin-right: 12px;} .f-socmed li:last-child {margin-right: 0;} .f-socmed li a {width: 30px; height: 30px; padding-top: 4.5px; font-size: 1.4rem; line-height: 1; border-radius: 50%; text-align: center; display: block;} .f-socmed li a, .f-socmed li a i {color: #959ca4;} .f-socmed li a:hover, .f-socmed li a:hover i {color: #fff;} /** CTA BOTTOM **/ .cta-btm {display: none; width: 360px; position: fixed; bottom: 0; right: 10px; background: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; z-index: 999;} .cta-btm, .ctm-top {border-top-left-radius: 6px; border-top-right-radius: 6px;} .ctm-top {padding: 8px 14px; background: #f8ca2d; position: relative; display: flex;} .l-ctm {width: 80%;} .r-ctm {max-width: 90px; position: absolute; right: 25px; bottom: 0;} .ctm-top .close {position: absolute; top: 8px; right: 8px; cursor: pointer; font-weight: bold;} .ctm-top .close img {margin: 0;} .ctm-top h4 {font-size: 1rem; line-height: 1.1; font-weight: 700; margin-bottom: 4px;} .ctm-top p {font-size: .75rem; line-height: 1.3; color: #000;} .c-form {padding: 18px;} .c-form .wpcf7 label {font-size: .9rem;} .c-form .wpcf7 .row input, .c-form .wpcf7 select {font-size: .93rem;} /* ================================================== CARCO FOX FLOATING BUTTON ================================================== */ .cf-float {width: 110px; bottom: 65px; right: 40px; position: fixed; z-index: 99;} /* ================================================== PAGE ================================================== */ .pages {padding: 20px 0 40px; z-index: 3;} .p-title {margin-bottom: 20px;} .p-title h1 {font-size: 1.6rem; line-height: 1.1; font-weight: 700; color: #222; text-transform: capitalize;} .pl-title {position: relative;} .pl-title h1::before, .pl-title h2::before, .pl-title h3::before {position: absolute; top: -15px; left: 50%; display: block; width: 32px; height: 4px; content: ''; background-color: #fdcf33; border-radius: 2px; transform: translateX(-50%); transform: translate3d(-50%, 0, 0);} .sl-form {background: #fff; border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;} .sl-form .wpcf7 {padding: 25px;} .sl-form .wpcf7 label {font-size: .96rem;} .sl-form .wpcf7 .row {margin-bottom: 15px;} .sl-form .wpcf7 .row input, .wpcf7 .row textarea, .wpcf7 select {padding: 11px; border-radius: 2px;} .sl-form .wpcf7 .row textarea {height: 68px;} .sl-form .wpcf7 .wpcf7 .wpcf7-checkbox {margin-top: 22px;} .sl-form .wpcf7 .wpcf7-list-item input {border: 1px solid #cecece; border-radius: .25em;} .sl-form .wpcf7 .row.fradio {margin-top: 20px;} .sl-form .wpcf7 .wpcf7-radio {margin-top: 8px;} .sl-form .cf-note {font-size: .83rem; color: #474747;} .sl-form .wpcf7 .button input {background: #ed264f; color: #fff; padding: 16px 0; font-size: 1.05rem;} .sl-form .wpcf7 .button input:hover {background: #d82046;} .s-no {margin-top: -35px; font-size: 3.4rem; color: #ff7f00; font-weight: 900; width: 98px; height: 98px; background: #F4F6F8; border-top-right-radius: 50px; border-bottom-right-radius: 50px; padding-left: 10px;} .fax-glob .csm-title.pl-title h3::before {display: none;} .fax-glob .csm-title {margin-bottom: 20px;} .fax-glob .csm-title h3 {font-size: 1.6rem;} .l-box ul {padding-left: 1px!important;} .l-box li {margin-bottom: 8px!important; list-style: none!important; padding-left: 22px; position: relative;} .l-box li::before {content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #61c400; position: absolute; top: 0; left: 0;} #l-tabs {max-width: 600px; margin: 0 auto 40px; display: flex;} #l-tabs li {width: 50%; position: relative; padding: 0 5px;} #l-tabs li a {display: block; width: 100%; padding: 15px; font-size: 1rem; line-height: 1.1; font-weight: 700; text-transform: uppercase; background: #FFCC00; color: #222; border-radius: 24px; cursor: pointer; text-align: center;} #l-tabs li a.inactive {background: #f4f4f4;} .ltab-content {width: 100%;} .l-item {clear: both; width: 100%;} .l-item .box {display: flex; margin: 0 -10px;} .l-item .row {width: 33.33333333%; padding: 0 10px; position: relative;} .l-item .row .item {padding: 20px; box-shadow: 30px 40px 97px rgba(105, 108, 113, .14), 0 3.52778px 7.05556px rgba(179, 186, 195, .25); border-radius: 24px; width: 100%; height: 100%;} .l-item .row .no {position: absolute; top: -30px; left: 20px; font-size: 4rem; line-height: 1; font-weight: 700; color: #ff7f00;} .l-item .row img {margin: 20px 0 10px; width: 64px; height: auto;} .l-item .row h4 {font-size: 1.2rem; line-height: 1.3; font-weight: 600; margin-bottom: 10px;} .l-item .row p {font-size: 1rem; line-height: 1.4; color: #373737;} .l-item.conven .row .no {color: #ed264f;} .logo-list .box {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 -10px;} .logo-list .item {width: 20%; padding: 0 10px; margin-bottom: 10px;} .ab-btn {display: flex; align-items: center; gap: 20px; max-width: 400px; margin: 0 auto;} .ab-btn a {padding: 14px 0; font-size: 1rem; line-height: 1.1; font-weight: 500; width: 100%; color: #222; border-radius: 4px; display: block; text-align: center;} .ab-btn a.btn-one {background: #fdcf33;} .ab-btn a.btn-two {background: #fff;} .br-add {font-size: 1rem; line-height: 1.3;} .br-dir {margin: 8px 0 20px; display: flex; align-items: center; gap: 10px;} .br-dir img {width: auto; height: 30px!important;} .br-ctc {display: flex; align-items: center; gap: 8px;} .br-ctc a {padding: 8px 16px; font-size: .95rem; line-height: 1.1; color: #222; border: 1px solid #b0b0b0; display: inline-block; border-radius: 30px;} .br-ctc a i.fa-phone {color: #0068b1;} .br-ctc a i.fa-whatsapp {color: #36b100;} .br-ctc a:hover {border-color: #333;} .p-faqs {display: flex; width: 100%;} .p-faqs .row-one {min-width: 200px;} .p-faqs .row-two {width: 100%; padding-left: 40px;} .fq-list li a {font-size: 1.1rem; line-height: 1.1; font-weight: 600; color: #222; padding: 10px 0; display: block;} .fq-list li a:hover {color: #154eb8;} .faq-title {margin-bottom: 15px;} .faq-title h3 {font-size: 1.4rem; line-height: 1.3; font-weight: 600;} .faq-row {padding-top: 50px;} .faq-row.first {padding: 0;} .faq-row .faq-item {border: none; border-bottom: 1px solid #d5dce5; border-radius: 0; margin-bottom: 0;} .faq-row .faq-item.active {box-shadow: none;} .faq-row .faq-q {padding: 18px 24px 18px 0;} .faq-row .faq-q h4 {font-size: 1rem; line-height: 1.4;} .faq-row .faq-a {padding: 0 0 18px;} .faq-row .faq-a p, .faq-row .faq-a ul li, .faq-row .faq-a ol li, .faq-row .faq-a em {font-size: 1rem; line-height: 1.4;} /* ================================================== PAGE CONTACT ================================================== */ .ctc-box .elementor-widget-wrap {box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; border-radius: 10px;} .ct-title h4 {border-bottom: 1px solid #ddd; padding-bottom: 15px; display: flex; align-items: center;} .pctc-box h4 i {width: 30px; height: 30px; font-size: 1.1rem; color: #fff; padding-top: 6.5px; margin-right: 6px; display: inline-block; border-radius: 50%; text-align: center;} .pctc-box .fa-location-dot {background: #fce0e9; color: #d70b49;} .pctc-box .fa-headset {background: #e6f8e6; color: #09ba09;} .pctc-box .fa-clock {background: #e6fbfd; color: #0896a7;} .p-ctc {display: flex; flex-direction: column; align-items: center;} .p-ctc .p-call, .p-ctc .p-call a {font-size: 1rem; line-height: 1.1;} .p-ctc .p-call {text-align: center;} .p-ctc .p-call a {color: #25439b; font-weight: 500;} .p-ctc .p-call a:hover {text-decoration: underline;} .p-ctc .p-wsp {margin-top: 15px; text-align: center;} .p-ctc .p-wsp a {font-size: 1rem; line-height: 1.1; font-weight: 500; color: #fff; background: #2dcb4a; padding: 12px 0; width: 240px; display: block; text-align: center; border-radius: 10px;} .p-ctc .p-wsp a i {margin-right: 2px; vertical-align: .5px;} .p-ctc .p-wsp a:hover {background: #27bc42;} .p-dir a {display: inline-block;} .p-dir a img {width: auto; height: 32px!important;} .p-dir a.btn-one {margin-right: 5px;} .socmed h4 {font-size: .95rem; line-height: 1.2; margin-bottom: 5px;} .socmed ul {display: flex; align-items: center;} .socmed li {margin-right: 5px;} .socmed li:last-child {margin-right: 0;} .socmed li a {width: 38px; height: 38px; font-size: 1.1rem; line-height: 1; color: #fff; padding-top: 10px; display: block; text-align: center; border-radius: 50%;} .ct-form .wpcf7 .box {gap: 20px;} .ct-form .wpcf7 .row {margin-bottom: 22px;} .ct-form .wpcf7 .wpcf7-list-item {width: inherit;} .ct-form .wpcf7 .button input {background: #ed264f; color: #fff; font-size: 1.05rem; padding: 16px 0;} .ct-form .wpcf7 .button input:hover {background: #d82046;} /* ================================================== PAGE CONTENT ================================================== */ .pg-sec {max-width: 1100px; margin: 0 auto; padding-top: 50px;} .pg-sec .pl-title {margin-bottom: 30px;} .pg-sec .pl-title h1 {font-size: 2rem; line-height: 1.1; text-align: center;} .page-content h2, .page-content h3, .page-content h4 {font-size: 1.4rem; line-height: 1.3; font-weight: 600; margin: 20px 0 15px; text-transform: capitalize;} .page-content p {margin-bottom: 15px; word-wrap: break-word;} .page-content p, .page-content ul li, .page-content ol li {font-size: 1rem; line-height: 1.4;} .page-content a {color: #25439b; font-weight: 500;} .page-content a:hover {text-decoration: underline;} .page-content ul, .page-content ol {margin: 0 0 15px; padding-left: 30px;} .page-content ol li {list-style: decimal;} .page-content ul li {list-style: disc;} .page-content ul li, .page-content ol li {padding: 1px 0; word-wrap: break-word; margin-bottom: 2px;} .page-content table {border-collapse: collapse;} .page-content table th, .page-content table td {font-size: .95rem;} .page-content table td {padding: 8px;} .page-content table tr td:first-child {width: 200px;} .p-sep {background: #333; height: 1px; width: 100%; margin: 40px 0;} /* ================================================== BLOG CATEGORY ================================================== */ .bt-title h2 {font-size: 2.2rem; line-height: 1.2; font-weight: 700; color: #000; margin-bottom: 10px;} .bt-term {margin-top: 15px} .b-term {width: 100%;} .b-term .swiper-slide {width: auto; max-width: 200px;} .b-term .swiper-slide:first-child {margin-left: -20px;} .bt-term a {font-size: .86rem; line-height: 1; font-weight: 500; text-transform: uppercase; color: #222; border: 2px solid #dcdce5; height: 100%; display: inline-block; padding: 8px 18px; border-radius: 30px; text-align: center;} .bt-term a:hover {color: #ed264f; border-color: #ed264f;} .arc {margin: 40px 0 20px;} .arc .box {display: flex; gap: 40px;} .arc .row-one {width: 100%;} .arc .row-two {max-width: 300px;} .b-title {border-bottom: 1px solid #ccc; padding-bottom: 10px;} .b-title h3 {font-size: 1.4rem; line-height: 1.1;} .b-title .bt-h {font-size: .9rem; line-height: 1.1; color: #838383; margin-top: 8px;} /* ================================================== BLOG FEAT ================================================== */ .b-feat .swiper-pagination {display: none;} .b-feat {margin-top: 20px;} .b-feat {background: #F4F6F8; overflow: hidden;} .b-feat .control {max-width: 1600px;} .b-feat .swiper-slide {position: relative; height: 420px; overflow: hidden;} .b-feat .loop {position: relative; width: 100%; height: 100%; background-size: cover; background-position: center;} .b-feat .swiper-slide a::before {content: ''; background: rgba(0,0,0,.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; transition: .3s;} .b-feat .swiper-slide a:hover::before {content: ''; background: rgba(0,0,0,.65);} .b-feat .thumb {position: relative;} .b-feat .thumb img {width: 100%; height: auto; display: block; max-height: 100%; object-fit: cover;} .b-feat .info {text-align: center; padding: 30px 25px; width: 100%; position: absolute; bottom: 0; z-index: 3;} .b-feat a .b-tax {font-size: .7rem; line-height: 1.1; font-weight: 500; text-transform: uppercase; color: #222; padding: 4px 6px; background: #fdcf33; border-radius: 2px; display: inline-block;} .b-feat h4 {margin: 20px 0;} .b-feat a h4 {font-size: 1.4rem; line-height: 1.4; font-weight: 500; color: #fff;} .b-feat a .post-meta {color: #fff;} .b-feat .swiper-button-next, .b-feat .swiper-button-prev {width: inherit; height: inherit; display: none; transition: .3s;} .b-feat:hover .swiper-button-next, .b-feat:hover .swiper-button-prev {display: block;} .b-feat .swiper-button-prev:after {content: '\f053'; font-family: "Font Awesome 5 Free"; font-weight: 900;} .b-feat .swiper-button-next:after {content: '\f054'; font-family: "Font Awesome 5 Free"; font-weight: 900;} .b-feat .swiper-button-prev:after, .b-feat .swiper-button-next:after {background: #fdcf33; color: #222; font-size: 26px!important; padding: 20px 8px; border-radius: 4px;} /* ================================================== BLOG LIST ================================================== */ .b-list .loop {display: flex; gap: 25px; padding: 30px 0; border-bottom: 1px solid #e5e7eb;} .b-list .loop:last-child {border-bottom: none;} .b-list .thumb {width: 50%;} .b-list .info {width: 50%;} .b-list .b-tax {line-height: 1; margin-top: -3px;} .b-list .b-tax a {font-size: .76rem; line-height: 1.1; font-weight: 500; text-transform: uppercase; color: #73787d;} .b-list .b-tax a:hover {color: #8c8c8c;} .b-list h4 {margin: 10px 0;} .b-list h4 a {font-size: 1.6rem; line-height: 1.4; font-weight: 500; color: #222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} .b-list h4 a:hover {text-decoration: underline;} .b-list .excerpt p {font-size: 1rem; line-height: 1.5; color: #4a4a4a; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} .b-list .post-meta {margin: 25px 0 0; color: #73787d; display: flex; justify-content: space-between;} .b-list .wp-pagenavi {margin: 20px 0;} /* ================================================== SINGLE TOP ================================================== */ .post-edit-link {position: fixed; bottom: 20px; left: 20px; font-size: .8rem; line-height: 1; font-weight: 500; padding: 6px 8px 4px; border: 1px solid #ccc; color: #222; background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 27%, rgba(235,235,235,1) 90%); border-radius: 4px; z-index: 99;} .bs-title h1 {font-size: 2rem; line-height: 1.2; font-weight: 600;} .s-meta {margin: 15px 0 20px;} .s-meta {display: flex; align-items: center;} .gravtr {width: 44px; margin-right: 12px;} .gravtr img {border-radius: 50%;} .s-auth {color: #73787d;} .s-auth a {font-weight: 500;} .s-auth a:hover {text-decoration: underline;} .s-auth .sa-one {font-size: .88rem; line-height: 1.1; margin-bottom: 4px;} .s-auth .sa-two {font-size: .85rem; line-height: 1.1;} /* ================================================== ENTRY CONTENT ================================================== */ .bs .post-thumb {margin-bottom: 30px;} .entry-content {} .entry-content h2, .entry-content h3, .entry-content h4 {font-size: 1.4rem; line-height: 1.3; font-weight: 600; color: #222; margin-bottom: 15px; text-transform: capitalize;} .entry-content h3, .entry-content h4 {margin-top: 20px;} .entry-content p {margin-bottom: 15px;} .entry-content p, .entry-content ul li, .entry-content ol li {font-size: 1.08rem; line-height: 1.5; color: #303030;} .entry-content a {color: #154eb8; font-weight: 500;} .entry-content a:hover {text-decoration: underline;} .entry-content img, .page-content img {width: 100%; height: auto; margin-bottom: 15px!important;} .entry-content ul, .entry-content ol {margin: 0 0 15px; padding-left: 30px;} .entry-content ul li, .entry-content ol li {padding: 1px 0; margin-bottom: 2px;} .entry-content ul li {list-style: disc;} .entry-content ol li {list-style: decimal;} .entry-content .caption {color: #6f6f6f; font-size: .9rem; line-height: 1.3; margin-bottom: 25px; margin-top: -10px;} .entry-content .sumber::before {content: '\f03e'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin: 0 3px 0 10px; vertical-align: -1.1px;} .entry-content .sumber a {color: #0576F7;} .entry-content .sumber a:hover {text-decoration: underline;} .entry-content .quote {font-size: 1.2rem; line-height: 1.4; font-style: italic; font-weight: 500; margin: 20px; padding: 20px; border-left: 3px solid #34a853; position: relative; z-index: 2;} .entry-content .quote::after {content: ''; background: url("images/quote.svg") no-repeat; background-size: contain; width: 130px; height: 130px; opacity: .05; position: absolute; right: 0; bottom: 0; z-index: 1;} .entry-content .qname {display: block; font-weight: 300;} .entry-content iframe {display: flex; margin: 0 auto;} .video {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 1200px; margin: 0 auto 20px;} .video iframe, .video object, .video embed, .video video {position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%;} .galeri {display: flex; flex-wrap: wrap; margin: 0 -5px 10px;} .galeri .item {width: 33.333333%; padding: 5px;} .galeri .item a img {transition: .3s;} .galeri .item a:hover img {opacity: .6;} .wp-embedded-content {width: 100%!important;} .twitter-tweet {margin: 0 auto 10px!important;} .sharer {display: flex; flex-direction: column; align-items: center; margin-top: 40px;} .sharer h4 {font-size: 1.1rem; line-height: 1.3; text-transform: uppercase; color: rgba(0,0,0,.86);} .v-share {margin-top: 10px;} .tag {margin-top: 15px;} .tag span {font-size: .8rem; line-height: 1.3; margin: 5px 5px 0 0; color: #333; background: #f3f3f3; padding: 4px 12px; border-radius: 30px; display: inline-block;} .tag span:last-child {margin-right: 0;} /** END CONTENT **/ .end-content {margin: 20px 0 40px;} .end-content .wrap {padding-top: 30px; border-top: 1px solid #ccc;} .end-content .box {max-width: 900px; margin: 0 auto 20px;} .end-content .ec-f {max-width: 640px; font-size: 1.7rem; line-height: 1.3; font-weight: 700; color: #222; text-align: center; margin: 0 auto 20px;} .end-content .ec-f a {color: #ea0f38;} .end-content .ec-f a:hover {text-decoration: underline;} .subs-s {padding: 30px; background: #fff; border-radius: 10px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;} .subs-s h3 {font-size: 1.25rem; line-height: 1.2; text-transform: none;} .subs-s h3 span {display: block;} .subs-s p {font-size: .85rem; line-height: 1.3; color: #616161;} .subs-s div.tnp-subscription {max-width: 100%!important;} .subs-s form {display: flex; align-items: center;} .subs-s .tnp-field label {display: none;} .subs-s .tnp-field {width: 100%!important; float: none!important;} .subs-s .tnp-field-email {margin: 0!important;} .subs-s div.tnp-field-email input {font-size: 1rem!important; padding: 12px!important; background: #fff!important; border: 1px solid #a8a8a8!important; border-radius: 4px!important;} .subs-s .tnp-field-email input:hover, .subs-s .tnp-field-email input:focus {border-color: #818080!important;} .subs-s .tnp-field-button {width: 200px!important; margin-left: 6px; margin-bottom: 0!important;} .subs-s .tnp-field-button input.tnp-submit {font-size: .9rem!important; font-weight: 500; padding: 14px 0; background: #ed264f!important; color: #fff!important; border-radius: 4px!important; cursor: pointer; margin: 0!important; width: 100%;} .subs-s .tnp-field-button input.tnp-submit:hover {background: #ce1b40!important;} .subs-s .trm {font-size: .75rem; line-height: 1.2; color: #616161;} .subs-s .trm a:hover {text-decoration: underline;} /** MORE CARS **/ .cars-more .bsm-title {margin-bottom: 15px;} .cars-more .bsm-title h3 {font-size: 1.6rem; line-height: 1.1;} .cars-more .swiper {overflow: visible;} .cars-more .m-btn {display: flex; justify-content: center;} .cars-more .m-btn a {padding: 12px 0; width: 180px; font-size: .95rem; line-height: 1.1; font-weight: 500; background: #fdcf33; color: #222; border-radius: 4px; display: block; text-align: center;} /* ================================================== SIDEBAR ================================================== */ .side-subs {margin-bottom: 30px; border: 1px solid #ddd; border-top: 4px solid #ffca05; border-bottom: 4px solid #ffca05; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;} .side-subs h3 {font-size: 1.1rem; line-height: 1.3; font-weight: 600; text-transform: none; margin-bottom: 15px;} .side-subs .s-box {padding: 20px 20px 13px;} .side-subs div.tnp-subscription {margin: 0!important;} .side-subs .tnp-field label {display: none;} .side-subs .tnp-field {width: 100%!important; float: none!important;} .side-subs .tnp-field-email {margin-bottom: 8px!important;} .side-subs div.tnp-field-email input {font-size: .9rem!important; padding: 10px!important; background: #fff!important; border: 1px solid #a8a8a8!important; border-radius: 4px!important;} .side-subs .tnp-field-email input:hover, .side-subs .tnp-field-email input:focus {border-color: #818080!important;} .side-subs .tnp-field-button input.tnp-submit {font-size: .9rem!important; font-weight: 500; padding: 10px 20px; background: #ed264f!important; color: #fff!important; border-radius: 4px!important; cursor: pointer; margin: 0!important; width: 100%;} .side-subs .tnp-field-button input.tnp-submit:hover {background: #ce1b40!important;} .side-subs .trm {font-size: .75rem; line-height: 1.2; color: #616161; padding: 15px 20px; background: #efefed;} .side-subs .trm a:hover {text-decoration: underline;} .side-title h3 {font-size: 1.2rem; line-height: 1.1;} .c-side li a {display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid #e5e7eb; position: relative;} .c-side .info {padding-right: 15px; width: 100%;} .c-side li a h4 {font-size: .98rem; line-height: 1.3; color: #333; font-weight: 500; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; transition: .3s;} .c-side li a:hover h4 {text-decoration: underline; color: #222;} .c-side li a .post-meta {font-size: .75rem; color: #5e6d55;} .c-side .thumb {max-width: 100px; height: 100px; overflow: hidden;} .c-side .thumb img {min-width: 160px; height: auto; margin-left: -11%;} .side-follow {margin-top: 30px;} .side-follow .side-title {margin-bottom: 8px;} .side-follow ul {display: flex; align-items: center;} .side-follow li {margin-right: 4px;} .side-follow li:last-child {margin-right: 0;} .side-follow li a {width: 40px; height: 40px; font-size: 1.4rem; color: #fff; padding-top: 6px; text-align: center; display: block; border-radius: 50%;} /* ================================================== BREADCRUMB ================================================== */ .breadcr {margin-top: 10px; padding: 0 20px;} #breadcrumbs {} #breadcrumbs span, #breadcrumbs a {font-size: .8rem; color: #555;} #breadcrumbs a {font-weight: 600; color: #555;} #breadcrumbs a:hover {text-decoration: underline;} #breadcrumbs i {font-size: .6rem; margin: 0 5px; color: #a1a1a1; vertical-align: .5px;} /* ================================================== PAGINATION ================================================== */ .wp-pagenavi {width: 100%; position: relative; margin: 10px 0; display: flex; justify-content: center; align-items: center;} .wp-pagenavi span, .wp-pagenavi a {color: #000; font-size: .95rem; line-height: 1; font-weight: 300; border: none!important; border-radius: 50%; width: 2em; height: 2em; display: flex; align-items: center; justify-content: center;} .wp-pagenavi a.first, .wp-pagenavi a.last {display: none;} .wp-pagenavi a:hover {color: #222;} .wp-pagenavi span.current {background: #fdcf33; color: #222; font-weight: 500!important;} .wp-pagenavi .pages {display: none;} .wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink {font-size: .7rem; padding: 0; margin: 0;} /* ================================================== CF7 ================================================== */ .wpcf7 br {display: none!important;} .wpcf7 .box {display: flex; gap: 20px;} .wpcf7 .row {margin-bottom: 18px; position: relative;} .wpcf7 .box .row {width: 100%;} .wpcf7 label {display: block; font-size: .95rem; line-height: 1; font-weight: 500; margin-bottom: 8px;} .wpcf7 label span {color: #ff0000; font-weight: 700;} .wpcf7 .row input, .wpcf7 .row textarea, .wpcf7 select {width: 100%; padding: 12px; font: 1rem 'Roboto', sans-serif; line-height: 1.1; font-weight: 400; background: #fff; border: 1px solid #a8a8a8; border-radius: 3px;} .wpcf7 .row textarea {height: 105px; line-height: 1.3;} .wpcf7 .row input:hover, .wpcf7 .row textarea:hover, .wpcf7 select:hover {border-color: #787878;} .wpcf7 .row input:focus, .wpcf7 .row textarea:focus {border-color: #008ebc;} .wpcf7 .row.select {display: block;} .wpcf7 .row.select::after {font-size: .9rem; top: 20px; height: 22px;} .wpcf7 select {line-height: 1.1; cursor: pointer; position: relative; display: block;} .wpcf7 select option:first-child {display: none;} .wpcf7 select option {color: #000;} .wpcf7 .col.address textarea {height: 80px;} .wpcf7 .wpcf7-radio {margin-top: 12px; display: block;} .wpcf7 .wpcf7-checkbox {margin-top: 12px; display: flex; flex-wrap: wrap;} .wpcf7 .wpcf7-list-item {margin: 0; padding-right: 20px;} .wpcf7 .wpcf7-list-item input {width: 16px; height: 16px; margin: 0 4px 0 0; padding: inherit; vertical-align: -2.5px;} .wpcf7 .wpcf7-list-item input:focus {border: none; outline: none;} .wpcf7 .wpcf7-list-item label {text-transform: none; font-size: .95rem; line-height: 1.2;} .wpcf7 .wpcf7-list-item label, .wpcf7 .wpcf7-list-item input {cursor: pointer;} .wpcf7 .wpcf7-list-item .wpcf7-list-item-label {color: #000; font-weight: 400;} .wpcf7 .wpcf7-acceptance .wpcf7-list-item {width: 100%;} .wpcf7 .wpcf7-acceptance label {font-size: .9rem; line-height: 1.2;} .wpcf7 .button {position: relative; margin-top: 10px;} .wpcf7 .button input {background: #1ab64f; color: #fff; font-size: 1rem; line-height: 1; text-transform: capitalize; font-weight: 500; padding: 14px 0; text-align: center; width: 100%; display: block; border-radius: 4px; cursor: pointer; border: none;} .wpcf7 .button input:hover {background: #16a446;} .wpcf7 .button input:focus {box-shadow: none;} .wpcf7 .arahan {color: #515151; font-size: .9rem; line-height: 1.3; margin-top: 6px;} .myfile span {cursor: pointer;} .myfile input {padding: 0; border: none!important; cursor: pointer; font-size: .9rem;} .wpcf7-spinner {position: absolute!important; right: 0; top: 14px; margin: 0 10px!important;} .wpcf7-not-valid {border: 1px solid #ff0000!important;} .wpcf7-response-output {padding: 0!important; margin: 15px 0 0!important;} .wpcf7 form.sent .wpcf7-response-output {border: none; text-align: center; font-size: .9rem; line-height: 1.2; color: #46b450;} .wpcf7 form.invalid .wpcf7-response-output {border: none; text-align: left; font-size: .8rem; line-height: 1.2; color: #ff0000;} .wpcf7-not-valid-tip {display: none!important;} .wpcf7 .wpcf7-checkbox.wpcf7-not-valid {border: none!important;} .wpcf7 .wpcf7-checkbox.wpcf7-not-valid .wpcf7-list-item .wpcf7-list-item-label {color: #ff0000;} .cf-note {position: relative; margin: 10px 0 20px;} .cf-note {font-size: .87rem; line-height: 1.2; color: rgba(0,0,0,.7);} .cf-note a:hover {text-decoration: underline;} /* ================================================== MENU MOBILE ================================================== */ .b-menu {margin: 0 -6px 0 20px;} .b-menu a {width: 40px; height: 40px; display: block; padding: 6.5px 5px 5px 5px;} .b-menu .c-button__text img {} .b-menu .c-button__text {display: flex; align-items: center; font-size: .9rem; font-weight: 600; color: #fff;} .c-offcanvas--left {background: #fff;} .canv {} .c-offcanvas--left .js-offcanvas-close {position: absolute; top: 11px; right: 10px;} button.js-offcanvas-close {padding: 8px!important; background: none; margin: 0; width: 30px; height: 30px; position: absolute; top: 8px; right: 10px;} .bb-logo {padding: 15px 20px; border-bottom: 1px solid #e2e2e2;} .bb-nav {padding: 18px 20px 10px; border-bottom: 1px solid #e2e2e2;} .bb-title {margin-bottom: 10px;} .bb-title h4 {font-size: .9rem; line-height: 1.1; font-weight: 600; color: #ed264f; text-transform: uppercase;} .bb-nav li , #hpnav > ul > li {padding: 0; margin: 0; width: 100%; position: relative;} .bb-nav li a, #hpnav > ul > li > a {display: block; position: relative; padding: 6px 0; font-size: 1.05rem; line-height: 1.1; font-weight: 500; color: #2e2e2e;} #hpnav li.n-new a {display: flex; align-items: center;} #hpnav li.n-new a::after {content: 'New'; padding: 3.5px 4px; background: #d60014; font-size: .54rem; line-height: 1.1; font-weight: 500; letter-spacing: .3; color: #fff; border-radius: 2px; margin-left: 6px; animation: shine 1.5s infinite;} .bb-socmed {padding: 20px;} .bb-socmed ul {display: flex; align-items: center;} .bb-socmed li {margin-right: 6px;} .bb-socmed li:last-child {margin: 0;} .bb-socmed li a {width: 38px; height: 38px; padding-top: 9.5px; font-size: 1.2rem; line-height: 1; color: #fff; display: block; text-align: center; border-radius: 50%;} /* ================================================== OFF CANVAS ================================================== */ .c-offcanvas{transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index: 9999!important;}.c-offcanvas-bg.c-offcanvas-bg--push,.c-offcanvas-bg.c-offcanvas-bg--reveal,.c-offcanvas-content-wrap,.c-offcanvas{transition:transform 300ms cubic-bezier(0.4,0,0.6,1)}.c-offcanvas.is-open{transform:translate3d(0,0,0);visibility:visible}.c-offcanvas-content-wrap{z-index:3}.c-offcanvas{position:fixed;min-height:100%;max-height:none;top:0;display:block;overflow-x:hidden;overflow-y:auto}.c-offcanvas--opening{transition-timing-function:cubic-bezier(0.4,0,0.6,1)}.c-offcanvas.is-closed{max-height:100%;overflow:hidden;visibility:hidden;box-shadow:none}.c-offcanvas--overlay{z-index:1080}.c-offcanvas--reveal{z-index:2}.c-offcanvas-bg{position:fixed;top:0;height:100%;width:100%;z-index:1079;left:-100%;background-color:transparent;transition:background-color 400ms cubic-bezier(0.23,1,0.32,1) 0}.c-offcanvas-bg.is-animating,.c-offcanvas-bg.is-open{left:0;background-color:rgba(0,0,0,0.68);visibility:visible}.c-offcanvas-bg.is-closed{visibility:hidden}.c-offcanvas-bg--closing.is-animating{background:transparent}.c-offcanvas--left{width:17em;height:100%;transform:translate3d(-17em,0,0)}.c-offcanvas--right{height:100%;width:17em;right:0;transform:translate3d(17em,0,0)}.c-offcanvas--top{left:0;right:0;top:0;height:12.5em;min-height:auto;width:100%;transform:translate3d(0,-12.5em,0)}.c-offcanvas--bottom{top:auto;left:0;right:0;bottom:0;height:448px;min-height:auto;width:100%;transform:translate3d(0,448px,0)}.c-offcanvas-content-wrap{z-index:3}.c-offcanvas-content-wrap--reveal.c-offcanvas-content-wrap--left.is-open{transform:translate3d(17em,0,0)}.c-offcanvas-content-wrap--reveal.c-offcanvas-content-wrap--right.is-open{transform:translate3d(-17em,0,0)}.c-offcanvas--reveal{z-index:0;transform:translate3d(0,0,0)}.c-offcanvas-bg.c-offcanvas-bg--reveal.c-offcanvas-bg--left.is-open{transform:translate3d(17em,0,0)}.c-offcanvas-bg.c-offcanvas-bg--reveal.c-offcanvas-bg--right.is-open{transform:translate3d(-17em,0,0)}.c-offcanvas--push{z-index:6}.c-offcanvas--push--opening{transition-timing-function:cubic-bezier(0,0,0.2,1)}.c-offcanvas-content-wrap{z-index:3}.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--left.is-open{transform:translate3d(17em,0,0)}.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--right.is-open{transform:translate3d(-17em,0,0)}.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--left.is-open{transform:translate3d(17em,0,0)}.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--right.is-open{transform:translate3d(-17em,0,0)} /* ================================================== TOOLTIP ================================================== */ [aria-label][role~="tooltip"] {position: relative;}[aria-label][role~="tooltip"]::before, [aria-label][role~="tooltip"]::after {transform: translate3d(0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;opacity: 0;pointer-events: none;transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);position: absolute;box-sizing: border-box;z-index: 10;transform-origin: top;}[aria-label][role~="tooltip"]::before {background-size: 100% auto !important;content: "";}[aria-label][role~="tooltip"]::after {background: rgba(17, 17, 17, .9);border-radius: 4px;color: #ffffff;content: attr(aria-label);font-size: var(--microtip-font-size, 14px);font-weight: var(--microtip-font-weight, normal);text-transform: var(--microtip-text-transform, none);padding: .6em 1em;white-space: nowrap;box-sizing: content-box;}[aria-label][role~="tooltip"]:hover::before, [aria-label][role~="tooltip"]:hover::after, [aria-label][role~="tooltip"]:focus::before, [aria-label][role~="tooltip"]:focus::after {opacity: 1;pointer-events: auto;}[role~="tooltip"][data-microtip-position|="top"]::before {background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;height: 6px;width: 18px;margin-bottom: 5px;}[role~="tooltip"][data-microtip-position|="top"]::after {margin-bottom: 11px;}[role~="tooltip"][data-microtip-position|="top"]::before {transform: translate3d(-50%, 0, 0);bottom: 100%;left: 50%;}[role~="tooltip"][data-microtip-position|="top"]:hover::before {transform: translate3d(-50%, -6px, 0);}[role~="tooltip"][data-microtip-position|="top"]::after {transform: translate3d(-50%, 0, 0);bottom: 100%;left: 50%;}[role~="tooltip"][data-microtip-position="top"]:hover::after {transform: translate3d(-50%, -5px, 0);}[role~="tooltip"][data-microtip-position="top-left"]::after {transform: translate3d(calc(-100% + 16px), 0, 0);bottom: 100%;}[role~="tooltip"][data-microtip-position="top-left"]:hover::after {transform: translate3d(calc(-100% + 16px), -5px, 0);}[role~="tooltip"][data-microtip-position="top-right"]::after {transform: translate3d(calc(0% + -16px), 0, 0);bottom: 100%;}[role~="tooltip"][data-microtip-position="top-right"]:hover::after {transform: translate3d(calc(0% + -16px), -5px, 0);}[role~="tooltip"][data-microtip-position|="bottom"]::before {background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;height: 6px;width: 18px;margin-top: 5px;margin-bottom: 0;}[role~="tooltip"][data-microtip-position|="bottom"]::after {margin-top: 11px;}[role~="tooltip"][data-microtip-position|="bottom"]::before {transform: translate3d(-50%, -10px, 0);bottom: auto;left: 50%;top: 100%;}[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {transform: translate3d(-50%, 0, 0);}[role~="tooltip"][data-microtip-position|="bottom"]::after {transform: translate3d(-50%, -10px, 0);top: 100%;left: 50%;}[role~="tooltip"][data-microtip-position="bottom"]:hover::after {transform: translate3d(-50%, 0, 0);}[role~="tooltip"][data-microtip-position="bottom-left"]::after {transform: translate3d(calc(-100% + 16px), -10px, 0);top: 100%;}[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {transform: translate3d(calc(-100% + 16px), 0, 0);}[role~="tooltip"][data-microtip-position="bottom-right"]::after {transform: translate3d(calc(0% + -16px), -10px, 0);top: 100%;}[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {transform: translate3d(calc(0% + -16px), 0, 0);}[role~="tooltip"][data-microtip-position="left"]::before, [role~="tooltip"][data-microtip-position="left"]::after {bottom: auto;left: auto;right: 100%;top: 50%;transform: translate3d(10px, -50%, 0);}[role~="tooltip"][data-microtip-position="left"]::before {background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; height: 18px; width: 6px; margin-right: 6px;margin-bottom: 0;}[role~="tooltip"][data-microtip-position="left"]::after {margin-right: 11px;}[role~="tooltip"][data-microtip-position="left"]:hover::before, [role~="tooltip"][data-microtip-position="left"]:hover::after {transform: translate3d(0, -50%, 0);}[role~="tooltip"][data-microtip-position="right"]::before, [role~="tooltip"][data-microtip-position="right"]::after {bottom: auto;left: 100%;top: 50%;transform: translate3d(-10px, -50%, 0);}[role~="tooltip"][data-microtip-position="right"]::before {background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;height: 18px;width: 6px;margin-bottom: 0;margin-left: 5.5px;}[role~="tooltip"][data-microtip-position="right"]::after {margin-left: 11px;}[role~="tooltip"][data-microtip-position="right"]:hover::before, [role~="tooltip"][data-microtip-position="right"]:hover::after {transform: translate3d(0, -50%, 0);}[role~="tooltip"][data-microtip-size="small"]::after {white-space: initial;width: 80px;}[role~="tooltip"][data-microtip-size="medium"]::after {white-space: initial;width: 150px;}[role~="tooltip"][data-microtip-size="large"]::after {white-space: initial;width: 260px;} /* ================================================== SCROLL TO TOP ================================================== */ #scrollToTopBtn {position: fixed; bottom: 10px; right: 10px; border: none; cursor: pointer; z-index: 1000;} /* ================================================== 404 ================================================== */ .notfound {padding: 5em 0;} .notfound h1 {font-size: 15rem; line-height: 1.1; font-weight: 700;} .notfound p {font-size: 1.2rem; line-height: 1.2;} /* ================================================== ADD ON ================================================== */ .clearfix {clear: both;} .video, .maps {overflow: hidden; margin-bottom: 20px; padding-bottom: 50%; position: relative; height: 0;} .video iframe, .maps iframe {left: 0; top: 0; height: 100%; width: 100%; position: absolute;} .maps {margin-bottom: 0;} .fb {color: #4267b2;} .twit {color: #55acee;} .ig {color: #f24d58;} .pin {color: #e60023;} .utube {color: #ff0000;} .whatsapp {color: #00a500;} .tele {color: #0088cc;} .fb-ico {background: #4267b2;} .twit-ico {background: #55acee;} .ig-ico {background: #d6249f; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);} .pin-ico {background: #cc2127;} .in-ico {background: #0077b5;} .utube-ico {background: #ff0000;} .tiktok-ico {background: #000;} .whatsapp-ico {background: #00a500;} .web-ico {background: #a67c52;} .tele-ico {background: #0088cc;} .messenger-ico {background: #007fff;} /** APP BAR **/ #appBar {display: none; position: relative; z-index: 3;} .app .box {background: #f7f7f7; padding: 8px 15px; align-items: center; justify-content: space-between; width: 100%; display: flex;} .app .close {max-width: 20px; text-align: center;} .app .close button {font-size: 24px; color: #222;} .app .app-box {width: 100%; padding-left: 10px; display: flex; align-items: center;} .app-logo {max-width: 60px;} .app-logo img {border-radius: 16px;} .app-title {padding: 0 12px; width: 100%;} .app-title h4 {font-size: .95rem; line-height: 1.1; color: #000; margin-bottom: 3px;} .app-title p {font-size: .9rem; line-height: 1.3; color: #5a5a5a;} .ap-btn {min-width: 64px; display: flex; } .ap-btn a {font-size: .9rem; line-height: 1; font-weight: 500; padding: 10px 0; background: #fdcf33; color: #222; width: 100%; text-align: center; border-radius: 6px; display: inline-block;} @supports (-moz-appearance:none) { #cssmenu > ul > li > a, .r-head a {font-weight: 500;} .car-list a h4 {font-weight: 400;} .faq-q h4 {font-weight: 500;} } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes fadeInOut { 0%, 100% {opacity: 0;} 50% {opacity: 1;} } @-webkit-keyframes header-phone { 0%,30% {opacity:0; -webkit-transform:translate3d(-20px, 20px, 0); transform:translate3d(-20px, 20px, 0)} 80% {opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)} 100%{opacity:0}} @keyframes header-phone { 0%,30%{opacity:0; -webkit-transform:translate3d(-20px, 20px, 0); transform:translate3d(-20px, 20px, 0)} 80%{opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)} 100%{opacity:0}} @-webkit-keyframes header-phone2 { 0%{opacity:0; -webkit-transform:translate3d(-20px, 20px, 0); transform:translate3d(-20px, 20px, 0)} 70%,90%{opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)} 100%{opacity:0}} @keyframes header-phone2 { 0%{opacity:0; -webkit-transform:translate3d(-20px, 20px, 0); transform:translate3d(-20px, 20px, 0)} 70%,90%{opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)} 100%{opacity:0}} @keyframes shine { 0% { transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } 100% { transform: scale(1); } }