body, button, input, select, textarea, h1, h2, h3, h4, h5, h6 {font-family: 'Open Sans', Roboto, Helvetica, Arial, sans-serif; } body, button, input, select, textarea {font-size: 16px; font-weight: 300} .hidden {display: none;} :root { --primary: #3E637E; --metallic: #3E637E; --darker: #2B4558; --silver-1: #F2F3F5; --silver: #F0F0F5; --text: #292929; --muted: #777; --disabled: #cacaca; } body {color: var(--text);} .primary, h1, h2 {color: var(--metallic);} .unlink {color: inherit;} .addr {font-weight: 400;} article {min-height: 530px; } ::selection {background-color: var(--darker); color: white;} .btn-primary {background-color: var(--metallic); color: white; font-weight: 400} .main-content {min-height: 650px;} main section h3 {color: var(--metallic); text-align: left; font-size: 24px; font-weight: 600; line-height: 28px; margin-top: 32px; margin-bottom: 12px;} main section h4 {color: var(--metallic); text-align: left; font-size: 18px; font-weight: 600; line-height: 20px; margin-top: 32px; margin-bottom: 12px;} main section h3 .muted {display: block; color: var(--muted); font-size: 60%; padding-top: 6px;} a.superstar {font-style: italic; color: var(--metallic); font-weight: normal;} header .vin {word-break: break-all;} .car-page .gallery h2 span {word-break: break-all} .site-header {padding: 10px 0;} .site-header .brand {display: inline-block; float: left;} .site-header .brand a {color: var(--metallic); font-weight: bold;} .site-header .brand a {background-color--: var(--metallic); color--: white; display: inline-block; line-height: 1.4; padding: 2px 8px;} .site-header .brand a {transform--: skewX(-20deg); transform-none: perspective(100px) rotateY(40deg);} .site-header .brand a img {display: none;} .site-header .menu {text-align: right;} .site-header .menu li {font-weight: 300; margin-left: 20px; color: black;} .site-header .menu li.lang-switcher {text-transform: uppercase; position: relative; border: solid 1px silver; padding-left: 4px; padding-right: 4px;} .site-header .menu li.lang-switcher ul {position: absolute; z-index: 2; display: none; margin: 0; padding: 0; padding-top: 4px; border: solid 1px silver; width: 100%; left: -1px; background-color: rgba(255,255,255,0.8)} .site-header .menu li.lang-switcher:hover a {text-decoration: none;} .site-header .menu li.lang-switcher:hover ul {display: block;} .site-header .menu li.lang-switcher ul li {margin-left: 0; display: block; text-align: left; line-height: 1.6; padding: 0 4px;} .site-header .menu li.lang-switcher ul li a {font-size: 90%; display: block;} .site-header .menu li.lang-switcher ul li:hover {background-color: #eee;} .site-header .menu li.lang-switcher .icon { content: ""; display: inline-block; background-repeat: no-repeat; height: 12px; width: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z' fill='silver' /%3E%3C/svg%3E"); } .site-header .flex {display: flex;} .site-header .flex {display: flex; align-items: center; justify-content: space-between;} .site-header .flex form {background-color: #f0f0f5aa; padding: 6px 6px; border-radius: 18px; position: relative; flex-basis: 360px} .site-header .flex form .search-input {border: white; border-radius: 14px; padding-left: 8px; width: 100%; line-height: 34px; box-sizing: border-box;} .site-header .flex form .search-input:focus {outline: none} .site-header .flex form .submit {position: absolute; right: 6px; top: 6px; width: 100px; border: none; outline: none; background-color: #f0f0f5aa; box-sizing: border-box; line-height: 20px; border-radius: 0 12px 12px 0; color: var(--muted); background-color: var(--primary); color: white;} .site-header .flex nav ul {padding-left: 0;} .site-header .flex nav ul li:first-of-type {margin-left: 0;} @media (min-width: 1500px) { .site-header .flex .brand {flex-basis: 400px;} .site-header .flex form {flex-basis: 460px;} } @media (max-width: 986px) { .site-header .flex {flex-direction: column; row-gap: 12px;} .site-header .menu {text-align: center;} .site-header .flex {align-items: stretch; align-items: center;} .site-header .flex form {width: 300px; max-width: 100%; flex-basis: unset;} .site-header .flex form .search-input {width: 100%;} } @media (max-width: 460px) { .site-header .menu {margin-top: 12px} .site-header .menu>li {display: block; margin-left: 0;} .site-header .menu li.lang-switcher {display: inline-block; width: auto; margin-top: 8px; padding: 8px 12px;} .site-header .menu li.lang-switcher ul {top: 38px;} .site-header .menu li.lang-switcher ul li {padding: 4px 12px;} } .hero {background-color: var(--metallic); color: white; text-align: center; padding-top: 50px; padding-bottom: 50px;} .hero h1, .hero h2, hero h3 {color: white;} .hero h1 {font-size: 36px;text-shadow: 1px 1px 1px var(--text);} .hero h1.upper {text-transform: uppercase;} .hero .intersection {font-size: 14px; color: white;} .hero-minimal {padding: 20px 0;} .hero-minimal h2 {margin: 0;} .hero-minimal h1 {margin: 10px 0;} #hero .tagline {margin-top: 0; margin-bottom: 0px; font-weight: 900;} #hero .vin {margin: 10px; font-size--: 36px; font-weight: 900;} #hero form {} #hero form .main-input {font-size: 28px; font-weight: 300; background-color: white; padding: 10px 20px;} #hero form .main-input {box-shadow: inset 4px 4px 4px 0px #ccc; border: solid 1px #08475d; text-align: left;} #hero form .main-input::placeholder {font-weight: 300;} #hero-small {padding-top: 20px; padding-bottom: 30px;} #hero-small h2 {margin: 0;} section.secondary {} section.secondary {background-color: var(--silver); padding: 20px 0; box-shadow: inset 0px 4px 14px #cdcdcd;} section.secondary .title {margin: 0; font-weight: 600; font-size: 24px;} section.secondary .price {margin: 0; font-weight: 300; font-size: 24px;} section.secondary .price strong {font-weight: 600;} section.secondary a {color: inherit; text-decoration: none;} section.secondary a i {} /* HOME */ #home-brands {background-color: var(--silver); padding: 30px; box-shadow: 0px 4px 4px #cdcdcd;} #home-brands .title {margin-top: 0; font-weight: normal; font-size: 13px; margin-bottom: 15px;} #home-brands .slider-container {position: relative; overflow: hidden; min-height: 50px;} #home-brands .slider-container ul {white-space: nowrap; } #home-brands .slider-container ul {position: absolute; left: 50%; transform: translateX(-50%);} #home-brands .slider-container ul li {font-size: 24px; font-weight: 400; padding: 0 15px; margin-bottom: 12px; color: black} .home-page .recent {} .home-page .recent .title {text-align: center; margin-top: 40px; margin-bottom: 20px;} .home-page .recent .grid {gap: 20px;} .home-page .recent .grid .car {max-width: 260px; padding: 0; margin: 0} .home-page .recent .car {transition: all 200ms linear;} .home-page .recent .car:hover {box-shadow: 0px 0px 4px #456;} .home-page .recent .car:hover .brand {background-color: transparent; color: var(--text);} .home-page .recent .car .title {text-transform: uppercase; color: var(--metallic); font-size: 22px; font-weight: 400; margin: 5px 0;} .home-page .recent .car .vin {display: block; font-size: 20px; letter-spacing: 0.7px; margin: 8px 0;} .home-page .recent .car .year {display: inline-block; margin-right: 20px;} .home-page .recent .car strong {color: var(--metallic); font-weight: normal;} .home-page .recent .car .price {} .home-page .recent .car .picture {display: block; margin-top: 12px;} .home-page .recent .car .picture img {max-width: 100%;} .home-page .recent .grid {justify-items: flex-start;} .home-page .recent .car .brand {position: relative; display: block;} .home-page .recent .car .brand a {display: inline-block; background-color: white; padding: 0 8px; letter-spacing: 2px; color: var(--metallic)} .home-page .recent .car .brand:before {position: absolute; display: block; content: ""; border-top: dotted 4px #eee; top: 10px; left: 0; width: 100%; z-index: -2;} .home-page .recent .car .title {line-height: 30px; height: 30px; overflow: hidden;} section.filters {background-color: var(--silver); padding: 20px 0; box-shadow: 0px 4px 4px #cdcdcd;} section.filters .title {display: block; text-align: center; margin-bottom: 12px;} section.filters form {} section.filters form .grid {display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px;} section.filters form fieldset {border: none;} section.filters form fieldset label {display: block;} section.filters form fieldset .input {display: inline-block;} section.filters form fieldset .input {border: solid 1px #C0C0C4; padding: 8px 8px; box-shadow: inset 0px 0px 6px 0px #F0F0F5; font-size: 14px; line-height: 1; text-transform: uppercase;} section.filters form fieldset input.input {width: 100px;} section.filters form fieldset .input:focus-visible {outline: none; border-color: #909093; border-color: var(--primary); font-weight: bold; color: var(--primary);} section.filters form fieldset select.input {background-color: white;} section.filters form fieldset.btn-group {} section.filters form fieldset.btn-group .btn {cursor: pointer; border: solid 1px var(--primary); text-transform: uppercase; font-size: 14px;} section.filters form fieldset.page {display: none;} section.filters form fieldset .f-brand {width: 200px;} section.filters form fieldset .f-model {width: 280px;} section.divider {border: solid 8px var(--metallic);} section.filter-results ul {min-height: 300px;} section.filter-brand-only {padding-top: 0; padding-bottom: 10px;} section.filter-brand-only .f-single {} @media (max-width: 380px) { #hero form .main-input {max-width: 94%; box-sizing: border-box;} section.filter-brand-only {padding-top: 0; padding-bottom: 10px;} section.filters form .grid {display: block; text-align: center;} section.filters form fieldset {text-align: center;} section.filters form fieldset .f-brand, section.filters form fieldset .f-model {width: calc(100% - 30px); margin: 0 auto;} section.filters form fieldset label {text-align: center;} } /* CAR PAGE */ .car-page .details {margin-top: 20px;} .car-page .details h2 {text-transform: uppercase; } .car-page .details .breadcrumbs {background-color: #f0f0f5aa; border-bottom--: solid 1px var(--disabled); display: inline-block; margin-bottom: 12px; padding: 6px 12px; color: var(--disabled); border-radius: 8px;} .car-page .details .breadcrumbs a {color: var(--muted); text-decoration: none;} .car-page .details .breadcrumbs a:hover {text-decoration: underline;} .car-page .details .col-left {text-align: center; } .car-page .details .col-left img {max-width: 100%;} .car-page .details .col-left img {filter: brightness(1.1) contrast(1.1);} .car-page .details .col-left img.lightbox-init {cursor: pointer;} .car-page .details .col-right {box-sizing: border-box; padding-top: 20px;} .car-page .details .col-right table {width: 100%;} .car-page .details .col-right table tr {} .car-page .details .col-right table tr td {border: solid 1px var(--silver); padding: 4px 16px; border-bottom-width: 0;} .car-page .details .col-right table tr td:first-of-type {border-right: none;} .car-page .details .col-right table tr:last-of-type td {border-bottom-width: 1px;} .car-page .hero .label {font-weight: 300; font-size: 16px;} .car-page .hero .label span {font-weight: 900; display: block; font-size: 28px; text-shadow: 1px 1px 1px var(--text); margin-top: 8px;} .car-page .navi {display: flex; align-items: center; align-content: center; justify-content: space-between; margin-top: 20px;} .car-page .navi .model {margin: 0; font-size: 28px; word-break: break-all; text-align: right;} @media (max-width: 920px) { .car-page .navi {flex-direction: column; row-gap: 12px;} .car-page .navi .model {text-align: left;} .car-page .details {margin-top: 0;} } .car-page .breadcrumbs {background-color: #f0f0f5aa; padding: 6px 12px; color: var(--disabled); border-radius: 8px;} .car-page .breadcrumbs a {color: var(--muted); text-decoration: none;} .car-page .breadcrumbs a:hover {text-decoration: underline;} .car-page .col-right h3.text {color: inherit; font-size: 16px; font-weight: 300; margin: 0;} .car-page .col-right ul.specs {} .car-page .col-right ul.specs li h4 {color: inherit; font-size: 16px; font-weight: 300; margin: 0; line-height: 32px;} @media (min-width: 1240px) { .car-page .details .rowx {} .car-page .details .rowx>div {float: left; width: 50%;} .car-page .details .rowx:after {clear: both; display: block; content: "";} .car-page .details .col-right {padding-left: 40px;} .car-page .details .col-right {padding-top: 0;} } .car-page .gallery {margin-bottom: 30px;} .car-page .gallery h2 {position: relative; display: block; width: 100%; margin-top: 30px; margin-bottom: 30px;} .car-page .gallery h2 span {display: inline-block; background-color: white; padding: 0 20px; margin-left: 40px;} .car-page .gallery h2 span {} .car-page .gallery h2 span::before {content: ""; background-color: var(--silver); height: 20px; width: 100%; position: absolute; left: 0; top: 0; z-index: -2;} .car-page .gallery .grid {gap: 5px;} .car-page .gallery .grid a {display: inline-block;} .car-page .gallery .grid a img {filter: grayscale(1) contrast(1); max-height: 250px;} .car-page .gallery .grid a img:hover {filter: grayscale(0) brightness(1.1) contrast(1.1);} .car-page .gallery .grid a img:hover {filter: none;} @keyframes slidenext { from { opacity: 0; } to { opacity: 1; } } #gallery .slbImageWrap-- {animation-duration: 80ms!important; animation-name: slidenext!important;} #gallery .slbImageWrap {animation: none!important;} #gallery .slbOverlay {animation-duration: 100ms} @media (min-width: 1240px) { #gallery img.slbImage {zoom: 1.4; padding-top: 40px;} #gallery .slbImageWrap:after {background-color: transparent;} #gallery .slbCloseBtn {right: -50px;} } .car-page section.details .col-right {} .car-page section.details .col-right .highlight {font-size: 18px; margin-top: 0; background-color: var(--silver); padding: 8px 24px;} .car-page section.details .col-right .secondary {font-weight: normal;} .car-page section.details .col-right ul {} .car-page section.details .col-right ul li {line-height: 32px} .car-page section.details .col-right ul li a {color: var(--primary);} .details .lSSlideWrapper .lSAction>a {opacity--: 1; zoom: 1.4; filter--: brightness(1.5) contrast(1.5); transition: none;} .details .lSSlideWrapper .lSAction>a.lSPrev {left--: 5px;} .details .lSSlideWrapper .lSAction>a.lSNext {right--: 5px;} .details .lSSlideWrapper .lSAction>a.lSPrev::before, .details .lSSlideWrapper .lSAction>a.lSNext::before {background-color--: gray; width: 100%; height: 100%; content: ""; display: inline-block; z-index: -2; position--: absolute; } #cta {} #cta .btn-container {padding-top: 40px; padding-bottom: 30px;} #cta .btn {font-size: 22px; padding: 26px 48px; font-weight: 600} #cta .btn-- {border-radius: 8px;} #article {} #article h4-- {color: var(--text);} section.site-info {background-color: var(--silver); padding: 40px 0;} section.site-info .container {min-height: 100px;} section.site-info .container h3 {margin-bottom: 10px; padding-bottom--: 0;} section.site-info .container p {margin-top: 0; line-height: 1.8; font-size: 18px;} .site-footer {background-color: var(--metallic); color: white;} .site-footer .site-credits {font-weight: 400; font-size: 14px; line-height: 2;} .site-footer .site-credits .container {text-align: center;} .site-footer .site-credits .container .copyright {float--: left;} .site-footer .site-credits .container .footer-stats {} section.brand-index {} section.brand-index ul {padding: 0; margin-top: 20px; list-style: none;} section.brand-index ul li header h2:before {content: '\f1b9'; font-family: FontAwesome; display: inline-block; line-height: 34px; float: right; color: var(--metallic);} section.brand-index ul li header h2 {text-transform: uppercase; padding-right: 60px; margin-bottom: 0; margin-top: 20px; } section.brand-index ul li header h2 {background-color: var(--silver); padding: 6px 18px;} section.brand-index ul li header h2:first-of-type {margin-top: 0;} section.brand-index ul li p {line-height: 1.5; margin-top: 12px; padding-right: 60px; padding-left: 8px;} section.brand-index ul li a {color: var(--metallic);} section.brand-index ul li header a {text-decoration: none; display: block;} section.brand-index ul li header a i {text-decoration: none; display: block;} section.brand-index ul li header a:hover {text-decoration: underline;} @media (min-width: 800px) { section.brand-index ul {columns--: 2; gap: 30px;} section.brand-index ul li {break-inside: avoid; break-after: auto} section.brand-index ul li header {} section.brand-index ul li header a {break-after: avoid;} section.brand-index ul li header a h2 {} section.brand-index ul li p {break-inside: avoid;} } @media (min-width: 1300px) { section.brand-index ul {columns--: 3; gap: 40px;} } section.auctions-list {} section.auctions-list table {width: 100%; padding-top--: 20px; margin-bottom: 30px;} section.auctions-list table thead {} section.auctions-list table thead tr {} section.auctions-list table thead tr th {padding: 8px 4px;} section.auctions-list table tr {} section.auctions-list table tr td {border-bottom: solid 1px #ccc; padding: 2px 4px;} section.auctions-list table tr:hover td {background-color: #fafafa} section.auctions-list table tr>* {text-align: right;} section.auctions-list table tr>*:first-of-type {text-align: left} section.auctions-list table tr td a {text-decoration: none; color: var(--metallic); font-weight: 400;} section.showcase {margin: 20px 0;} section.showcase .no-container {padding: 0 40px;} section.showcase .section-title {text-align: left; font-size: 28px; text-transform: uppercase;} section.showcase .section-title-- {margin-top: 0; margin-bottom: 22px;} section.showcase .section-title.centered {text-align: center;} section.showcase .section-title .seemore {display: inline-block; padding-left: 12px;} section.showcase .section-title .seemore {font-size: 18px; text-transform: none; color: var(--primary); font-weight: 300; text-decoration: none;} section.showcase .section-title .seemore:hover {text-decoration: underline;} section.showcase ul {} section.showcase ul:not(.lSPager) li {background-color: var(--metallic); color: white; border: none; box-sizing--: border-box; text-align: center; border-radius--: 20px;} section.showcase ul li a {text-decoration: none; color: inherit;} section.showcase ul li em {font-style: normal;} section.showcase ul li header {color: white; padding: 10px 0;} section.showcase ul li header .title {font-weight: 400; margin: 0; padding: 0; line-height: 22px; height: 22px; overflow: hidden;} section.showcase ul li header .title {color: white; text-align: center; font-size: 16px;} section.showcase ul li header .year {text-transform: uppercase; font-size: 12px;} section.showcase ul li .year {} section.showcase ul li figure {position: relative;} section.showcase ul li figure img {max-width: 100%;} section.showcase ul li figure img {filter: grayscale(0) brightness(1.1) contrast(1.1) blur(0.1px);} section.showcase ul li figure img {transition: transform 250ms linear(0 0%, 0.76 24.85%, 1 100%)} section.showcase ul li:hover figure img {transform: scale(1.05)} section.showcase ul li figure .price {position: absolute; left: 0; z-index: 2; color: white; background-color: rgba(0,0,0,0.48);} section.showcase ul li figure .price {line-height: 28px; padding: 0 10px; width: 100%; box-sizing: border-box;} section.showcase ul li figure .price {bottom: 0px; font-weight: bold;} section.showcase ul li figure .price em {display: none;} section.showcase ul li footer {background-color: white; color: var(--text,black); padding: 12px;} section.showcase ul li footer .price {display: none;} section.showcase ul li footer .price em {display: none;} section.showcase ul li footer .vin {} section.showcase {} section.showcase .lSAction>a {filter: invert(1); display: inline-block; background-color: rba(255,255,255,0.5);} section.showcase ul.grid {gap: 10px; margin: 0; padding: 0; list-style-type: none;} section.showcase ul.grid .car {max-width: 312px;} .home-content> section.showcase:nth-of-type(n+2) .section-title {margin-top: 0;} section.brand-tags {padding: 15px 0;} section.brand-tags .container {display: flex; align-items: center; justify-content: left; column-gap: 20px;} section.brand-tags .title {font-weight: bold; color: var(--metallic);} section.brand-tags .tags {} section.brand-tags .tags a {display: inline-block; padding: 5px 10px; border: solid 1px var(--metallic); cursor: pointer} section.brand-tags .tags a.active {background-color: var(--metallic); color: white;} section.top-brands {background-color: var(--silver); padding: 30px 0; box-shadow: 0px 4px 4px #cdcdcd;} section.top-brands .label {display: block; margin-top: 0; font-weight: normal; font-size: 13px; margin-bottom: 15px;} section.top-brands ul {} section.top-brands ul li {} section.top-brands ul li a {display: inline-block; font-size: 24px; line-height: 36px; font-weight: 400; padding: 0 15px; color: black; text-decoration: none;} section.top-brands ul li.active a {border: solid 2px var(--metallic); background-image--: linear-gradient(45deg, var(--metallic) 0%, transparent 50%); border-radius: 20px;} section.top-brands3 {background-color: var(--silver); padding: 10px 0;} section.top-brands3 .title {display: block; font-weight: bold; font-size: 16px; margin-bottom: 15px; color: var(--primary);} section.top-brands3 ul {max-height: 105px; overflow: hidden;} section.top-brands3 ul li {text-align: center; } section.top-brands3 ul li img {height: 48px;} section.top-brands3 ul li .name {text-align: center; margin: 0; padding-top: 10px;} section.top-brands3 ul li a {text-decoration: none; color: var(--primary); font-style: italic;} section.top-brands3 .lSAction>a {visibility: hidden; display--: inline-block;} section.top-brands3:hover .lSAction>a {filter: invert(1); height: 32px; margin-top: -15px; transition: none; background-size: 64px; visibility: visible;} h2.grand-title {position: relative; display: block; width: 100%; margin-top: 30px; margin-bottom: 30px;} h2.grand-title span {display: inline-block; background-color: white; padding: 0 20px; margin-left: 40px;} h2.grand-title span::before {content: ""; background-color: var(--silver); height: 20px; width: 100%; position: absolute; left: 0; top: 0; z-index: -2;} table.stats {border-collapse: collapse; margin: 20px auto; min-width: 240px; max-width: 960px; } table.stats tr td {border: solid 1px #dadada; padding: 2px 12px;} table.stats tr td.int {text-align: right; white-space: pre;} table.stats tr td:first-of-type {text-align: right;} table.stats tr td:last-of-type {} table.stats-3 {} table.stats-3 tr td:first-of-type {font-size: 11px; line-height: 1.2} section.brand_description {} section.brand_description .container {border-bottom: solid 1px var(--silver); } section.brand_description .container .content {max-width: 960px; margin: 0 auto;} .m10 {margin: 10px;} .site-footer .site-credits {padding: 20px 0;} .pagination {margin-top: 20px; margin-bottom: 50px;} .pagination ul {padding-left: 0;} .pagination ul li {} .pagination ul li a {display: inline-block; padding: 6px 12px; border: solid 1px #648297; text-decoration: none; color: var(--primary)} .pagination ul li.active a {background-color: var(--primary); color: White;} .pagination ul li.disabled a {border-color: var(--disabled); color: var(--disabled)} .pure-table {} .pure-table tr th {font-weight: normal; color: var(--primary)}