html {
scroll-behavior: smooth;
box-sizing: border-box;
font-size: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
:root {
--max-page-width: 1920px;
--page-padding: 16px;
--sticky-header-height: 57px;
--sticky-toolbar-offset: 16px;
}
@media (min-width: 1024px) {
:root {
--page-padding: 32px;
--sticky-toolbar-offset: 32px;
}
}
body {
overflow-y: scroll;
min-height: 100dvh;
background: #f9f9f9;
line-height: 1.375rem;
scroll-behavior: smooth;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
min-width: 320px;
font-size: 1rem;
color: #000000;
display: flex;
flex-direction: column;
}
.skip-to-page-content[inert],
#header[inert] .row1 .container,
/*#header .row1[inert] .container,*/
#header[inert] .row2 .container,
#shopping-tools[inert],
#sticky-toolbar[inert],
#content[inert],
#footer[inert] {
opacity: 0.6;
}
.main-menu-open {
overflow: hidden;
position: relative;
margin-right: var(--scrollbar-width, 0);
}
.main-menu-open::after {
content: '';
display: block;
background: #eeeeee;
position: fixed;
z-index: 1300;
bottom: 0;
top: 0;
width: var(--scrollbar-width, 0);
right: 0;
}
.fiat-icon {
vertical-align: middle;
font-family: 'Fiat Icons';
font-size: 1rem;
font-style: normal;
font-variant: normal;
line-height: 1;
}
.fiat-icon::before {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
}
.fiat-icon-home::after {
content: '\e93b';
}
.fiat-icon-phone::after {
content: '\e922';
}
.fiat-icon-email::after {
content: '\e930';
}
.fiat-icon-facebook::after {
content: '\e988';
}
.fiat-icon-instagram::after {
content: '\e987';
}
.fiat-icon-online-service::after {
content: '\ea22';
}
.fiat-icon-test-drive::after {
content: '\e95c';
}
.fiat-icon-request-offer::after {
content: '\e93e';
}
.fiat-icon-contacts::after {
content: '\e941';
}
.fiat-icon-contact-form::after {
content: '\e955';
}
.fiat-icon-prices::after {
content: '\e939';
}
.fiat-icon-download::after {
content: '\e939';
}
.fiat-icon-arrow-right::after {
content: '\e952';
}
.skip-to-page-content {
position: fixed;
z-index: 2000;
transition: transform .2s ease-in;
transform: translate(-50%, -100%);
max-width: 300px;
left: 50%;
top: 0;
}
.skip-to-page-content:focus-within {
transform: translate(-50%, 0%);
}
.skip-to-page-content .bg {
display: inline-block;
background: #fee440;
padding: 10px;
}
.skip-to-page-content .bg a {
display: block;
outline: 1px dotted currentColor;
outline-offset: 4px;
color: #000000;
}
.container {
max-width: calc(1360px + var(--page-padding) * 2);
margin: 0 auto;
}
/*
* Header
*/
#header {
display: contents;
}
#header .container {
max-width: calc(1920px + var(--page-padding) * 2);
padding: 0 var(--page-padding);
}
#header .row1 {
width: 100%;
margin: 0 auto;
max-width: var(--max-page-width);
border-bottom: 1px solid #d8d8d8;
background: #ffffff;
padding: 12px 0px;
}
#header .row1 .row1-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
#header .row1 .logo {
flex: 0 1 auto;
}
#header .row1 .logo a {
display: block;
outline-offset: 6px;
}
#header .row1 .logo a img {
display: block;
height: 50px;
}
#header .row1 .amserv-logo a img {
height: 24px;
}
#header .row1 .fiat-logo {
}
@media (min-width: 768px) {
#header .row1 .row1-container {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
/*#header .row1 .fiat-logo {
grid-column: 2;
}*/
}
#header .row2 {
width: 100%;
z-index: 1000;
margin: 0 auto;
max-width: var(--max-page-width);
border-bottom: 1px solid #d8d8d8;
background: #ffffff;
padding: 12px 0px;
position: sticky;
top: 0;
}
#header .row2.stuck {
}
#header .row2 .row2-container {
display: flex;
align-items: center;
min-height: 24px;
gap: 16px;
}
#header .row2 .main-menu-container {
flex: 0 1 auto;
}
#header .row2 .menu-title {
white-space: nowrap;
margin: 5px 0;
text-overflow: ellipsis;
overflow: hidden;
flex: 1;
}
@media (min-width: 768px) {
#header .row2 .main-menu-container {
flex: 1;
}
#header .row2 .main-menu .shopping-tools {
display: none;
}
#header .row2 .menu-title {
display: none;
}
}
/*
* Top menu
*/
#header .top-menu {
display: none;
}
@media (min-width: 768px) {
#header .top-menu {
display: block;
}
#header .top-menu ul {
display: block;
}
#header .top-menu ul li {
display: inline-block;
vertical-align: middle;
line-height: 1rem;
color: #000000;
margin: 8px 0;
}
#header .top-menu ul li a {
color: inherit;
padding: 6px 8px;
position: relative;
margin: -6px 2px;
}
#header .top-menu ul li a span {
position: relative;
z-index: 2;
}
#header .top-menu ul li a span[data-text] {
display: flex;
flex-direction: column;
align-items: center;
}
#header .top-menu ul li a span[data-text]::after {
pointer-events: none;
content: attr(data-text);
visibility: hidden;
font-weight: bold;
overflow: hidden;
user-select: none;
height: 0;
}
@media speech {
#header .top-menu ul li a span[data-text]::after {
display: none;
}
}
#header .top-menu ul li.active a {
font-weight: bold;
}
#header .top-menu ul li a {
overflow: hidden;
border-radius: 3px;
text-decoration: none;
-webkit-backface-visibility: hidden;
transition: color .4s;
display: block;
}
@media (hover: hover) {
#header .top-menu ul li a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#header .top-menu ul li a:hover {
color: #000000;
}
#header .top-menu ul li a:hover::after {
content: '';
width: 120%;
}
}
}
/*
* Main menu toogle
*/
#header .main-menu-toggle {
}
#header .main-menu-toggle button {
overflow: hidden;
position: relative;
z-index: 1300;
display: block;
background: #ffffff;
text-decoration: none;
cursor: pointer;
border: none;
height: 24px;
width: 24px;
padding: 0;
}
#header .main-menu-toggle button .icon {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
transition: opacity 0.2s ease 0s;
transform: translate3d(0, 0, 0);
opacity: 1;
}
#header .main-menu-toggle button .icon-close {
opacity: 0;
}
#header .main-menu-toggle .toggled .icon-menu {
opacity: 0;
}
#header .main-menu-toggle .toggled .icon-close {
opacity: 1;
}
@media (min-width: 768px) {
#header .main-menu-toggle {
display: none;
}
}
/*
* Main menu
*/
@media (max-width: 767px) {
#header .main-menu {
display: none;
background: #f5f5f5;
transition: left 0.2s, display .2s allow-discrete;
top: var(--header-size, 0);
overflow-y: auto;
position: fixed;
bottom: 0;
width: calc(100% - var(--scrollbar-width, 0));
left: -100%;
}
#header .main-menu.main-menu-open {
display: block;
left: 0;
}
@starting-style {
#header .main-menu.main-menu-open {
left: -100%;
}
}
#header .main-menu ul.main-menu-list {
display: block;
}
#header .main-menu ul.main-menu-list > li {
display: block;
}
#header .main-menu ul.main-menu-list > li a {
line-height: 1;
font-size: 1.25em;
text-decoration: none;
border-bottom: 1px solid #f9f9f9;
background: #ffffff;
display: block;
padding: 16px;
color: #000000;
}
#header .main-menu ul.main-menu-list > li.home {
display: none;
}
#header .main-menu ul.main-menu-list > li.stock-cars a,
#header .main-menu ul.main-menu-list > li.webshop a {
font-size: 1.5em;
background: #000000;
color: #ffffff;
}
#header .main-menu ul.main-menu-list > li.active a {
background: #fee440;
color: #000000;
}
}
@media (min-width: 768px) {
#header .main-menu {
display: block;
margin: 0 -10px;
}
#header .main-menu ul.main-menu-list {
display: block;
}
#header .main-menu ul.main-menu-list li {
display: inline-block;
vertical-align: middle;
line-height: 1rem;
color: #000000;
margin: 8px 2px;
}
#header .main-menu ul.main-menu-list li.mobile-only {
display: none;
}
#header .main-menu ul.main-menu-list li a {
color: inherit;
padding: 6px 8px;
position: relative;
margin: -6px 0px;
}
#header .main-menu ul.main-menu-list li a span {
position: relative;
z-index: 2;
}
#header .main-menu ul.main-menu-list li a span[data-text] {
display: flex;
flex-direction: column;
align-items: center;
}
#header .main-menu ul.main-menu-list li a span[data-text]::after {
pointer-events: none;
content: attr(data-text);
visibility: hidden;
font-weight: bold;
overflow: hidden;
user-select: none;
height: 0;
}
@media speech {
#header .main-menu ul.main-menu-list li a span[data-text]::after {
display: none;
}
}
#header .main-menu ul.main-menu-list li.active a {
font-weight: bold;
}
#header .main-menu ul.main-menu-list > li.home span {
display: inline-block;
margin-top: -3px;
}
#header .main-menu ul.main-menu-list > li.home span:last-child {
display: none;
}
#header .main-menu ul.main-menu-list li.home.active a {
font-weight: normal;
}
#header .main-menu ul.main-menu-list li a {
overflow: hidden;
border-radius: 3px;
text-decoration: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: color .4s;
display: block;
}
#header .main-menu ul.main-menu-list li.stock-cars a,
#header .main-menu ul.main-menu-list li.webshop a {
background-color: #fee440;
color: #000000;
}
@media (hover: hover) {
#header .main-menu ul.main-menu-list li a::after {
content: '';
z-index: 1;
display: block;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10px;
top: 0;
}
#header .main-menu ul.main-menu-list li a:hover {
color: #000000;
}
#header .main-menu ul.main-menu-list li a:hover::after {
content: '';
width: calc(100% + 20px);
}
#header .main-menu ul.main-menu-list li.stock-cars a::after,
#header .main-menu ul.main-menu-list li.webshop a::after {
background-color: #000000;
}
#header .main-menu ul.main-menu-list li.stock-cars a:hover,
#header .main-menu ul.main-menu-list li.webshop a:hover {
color: #ffffff;
}
}
}
/*
* Sticky toolbar
*/
#sticky-toolbar .container {
max-width: 1920px;
padding: 0;
}
#sticky-toolbar .sticky-toolbar-wrapper {
padding: 0 var(--page-padding);
float: right;
}
#sticky-toolbar .sticky-toolbar {
position: fixed;
pointer-events: none;
top: calc(var(--header-height, 122px) + var(--model-menu-height, 0px) + var(--sticky-toolbar-offset));
transform: translate(-100%);
z-index: 400;
}
#sticky-toolbar .sticky-toolbar button {
display: block;
pointer-events: auto;
position: absolute;
outline: 0;
top: 0px;
right: 0px;
transition: border-radius .4s linear, background-color .3s, color .3s;
background: #000000;
color: #ffffff;
font-family: inherit;
border-radius: 48px;
height: 48px;
width: 48px;
border: 1px solid #333333;
z-index: 100;
padding: 0;
}
/*@media (max-width: 420px) {
#sticky-toolbar .sticky-toolbar button {
border-radius: 40px;
height: 40px;
width: 40px;
}
#sticky-toolbar .sticky-toolbar button i {
font-size: 14px;
}
}*/
#sticky-toolbar .sticky-toolbar button:focus-visible {
outline: 1px dashed #ffffff;
outline-offset: -8px;
}
#sticky-toolbar .sticky-toolbar.open button {
border: 1px solid transparent;
border-radius: 3px;
background: #000000;
color: #ffffff;
}
@media (hover: hover) {
#sticky-toolbar .sticky-toolbar button {
cursor: pointer;
}
#sticky-toolbar .sticky-toolbar:not(.open) button:hover {
background: #fee440;
color: #000000;
}
}
#sticky-toolbar .sticky-toolbar button i::after {
content: '\e92b';
}
#sticky-toolbar .sticky-toolbar.open button i::after {
content: '\e943';
}
#sticky-toolbar .sticky-toolbar .sticky-toolbar-content {
pointer-events: auto;
background: #000000;
transition: transform .2s linear;
transform: scale(0);
transform-origin: calc(100% - 24px) 24px;
margin-top: -1px;
margin-right: -1px;
min-width: 320px;
border: 1px solid #333333;
padding: 48px 24px 24px 24px;
border-radius: 3px;
color: #ffffff;
}
#sticky-toolbar .sticky-toolbar.open .sticky-toolbar-content {
transform: scale(1);
}
#sticky-toolbar .sticky-toolbar-content ul {
display: flex;
flex-direction: column;
gap: 8px;
}
#sticky-toolbar .sticky-toolbar-content ul li {
display: block;
}
#sticky-toolbar .sticky-toolbar-content ul li a {
display: inline-block;
position: relative;
text-decoration: none;
color: #ffffff;
padding: 4px 6px;
}
#sticky-toolbar .sticky-toolbar-content ul li a span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#sticky-toolbar .sticky-toolbar-content ul li a {
overflow: hidden;
border-radius: 3px;
-webkit-backface-visibility: hidden;
transition: color .4s;
}
#sticky-toolbar .sticky-toolbar-content ul li a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#sticky-toolbar .sticky-toolbar-content ul li a:hover {
color: #000000;
}
#sticky-toolbar .sticky-toolbar-content ul li a:hover::after {
content: '';
width: 120%;
}
}
@media (max-width: 767px) {
#sticky-toolbar .sticky-toolbar.open {
left: 0;
}
}
@media (max-width: 767px), (max-height: 579px) {
#sticky-toolbar .sticky-toolbar {
transition: none;
z-index: 2000;
}
#sticky-toolbar .sticky-toolbar.open {
position: fixed;
transform: none;
top: 0;
bottom: 0;
right: 0;
}
#sticky-toolbar .sticky-toolbar.open button {
position: fixed;
border-radius: 0;
background: transparent;
transition: none;
top: 8px;
right: 8px;
border: 0;
}
#sticky-toolbar .sticky-toolbar .sticky-toolbar-content {
height: 100%;
padding-top: 64px;
transition: none;
border-radius: 0;
margin-top: 0;
margin-right: 0;
border: 0;
}
#sticky-toolbar .sticky-toolbar .sticky-toolbar-content div {
overscroll-behavior: contain;
overflow-y: auto;
height: 100%;
}
}
/*
* Content
*/
#content {
margin: 0 auto;
max-width: var(--max-page-width);
scroll-margin-top: var(--sticky-header-height);
position: relative;
width: 100%;
flex: 1;
}
#content .section {
padding-top: 40px;
}
#content .section:last-child {
padding-bottom: 40px;
}
#content .section .section-title {
padding-bottom: 40px;
text-align: center;
}
#content .section .section-title h1 {
line-height: 2.25rem;
line-height: 1;
font-size: 1.75rem;
}
#content .section .section-title h2 {
line-height: 1.75rem;
line-height: 1;
font-size: 1.25rem;
}
@media (min-width: 1024px) {
#content .section .section-title h1 {
line-height: 3.5rem;
line-height: 1;
font-size: 3rem;
}
#content .section .section-title h2 {
line-height: 3rem;
line-height: 1;
font-size: 2.5rem;
}
#content .section .article {
line-height: 1.4em;
font-size: 1.125em;
}
}
#content .section .container {
padding: 0 var(--page-padding);
}
/*
* Home
*/
#offer-bar {
background: #ffffff;
}
#offer-bar.section {
padding-top: 0;
}
#offer-bar .offer-bar-tablist {
display: flex;
align-items: center;
justify-content: center;
/*padding: 0 16px;*/
}
#offer-bar .offer-bar-tablist button {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 8px;
cursor: pointer;
background: none;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
opacity: .7;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
font-weight: normal;
line-height: 1.25rem;
font-size: 1rem;
}
#offer-bar .offer-bar-tablist button.active {
font-weight: normal;
border-color: #000000;
opacity: 1;
}
#offer-bar .offer-bar-tabs {
display: grid;
background-image: url('/images/offer-bar/mobile-bg.jpg');
background-position: 50% 0px;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
@media (min-width: 400px) {
#offer-bar .offer-bar-tabs {
background-position: 50% min(0px, calc(66px - 16vw));
}
}
@media (min-width: 768px) {
#offer-bar .offer-bar-tabs {
background-image: url('/images/offer-bar/desktop-bg.jpg');
background-position: 50% 0px;
}
}
#offer-bar .offer-bar-tabs .offer-bar-tab {
grid-area: 1 / 1;
visibility: hidden;
opacity: 0;
transition: opacity .2s ease, visibility 0s linear .2s;
z-index: 8;
/*display: none;
transition: opacity 0.2s ease, display 0.2s ease;
transition-behavior: allow-discrete;*/
}
#offer-bar .offer-bar-tabs .offer-bar-tab.active {
z-index: 10;
transition: opacity .2s ease .2s, visibility 0s;
visibility: visible;
opacity: 1;
/*transition: opacity .2s ease .2s, display 0s;
display: block;
@starting-style {
opacity: 0;
}*/
}
#offer-bar .offer-bar-tab-content {
display: flex;
flex-direction: column;
padding: 24px 0;
gap: 24px;
height: 100%;
}
#offer-bar .offer-bar-tab-content .container {
width: 100%;
}
#offer-bar .offer-bar-models-menu {
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
position: relative;
user-select: none;
margin: -2px;
padding: 2px;
}
#offer-bar .offer-bar-models-menu:has(> .offer-bar-models-list button:only-of-type) {
visibility: hidden;
}
#offer-bar .offer-bar-models-list {
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .85);
border-radius: 3px;
white-space: nowrap;
padding: 8px 10px;
position: relative;
gap: 4px;
}
#offer-bar .offer-bar-models-select {
}
#offer-bar .offer-bar-models-list.hidden,
#offer-bar .offer-bar-models-select.hidden {
position: absolute;
visibility: hidden;
}
#offer-bar .offer-bar-models-list button {
-webkit-tap-highlight-color: transparent;
font-size: 1rem;
line-height: 1.5rem;
background: none;
border: 0;
cursor: pointer;
padding: 0 8px;
position: relative;
display: block;
}
#offer-bar .offer-bar-models-list button.active {
}
@media (hover: hover) {
#offer-bar .offer-bar-models-list button:not(.active):hover {
background: rgba(255, 255, 255, 0.5);
border-radius: 3px;
cursor: pointer;
}
}
#offer-bar .offer-bar-models-list-indicator {
position: absolute;
background: #ffffff;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.16);
border-radius: 3px;
z-index: 0;
}
#offer-bar .offer-bar-models-select select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: flex;
font-size: 1rem;
line-height: 1.5rem;
background: rgba(255, 255, 255, .85);
position: relative;
padding: 8px 16px;
border-radius: 3px;
border: 0;
font-family: inherit;
background-image: url('/images/offer-bar/arrow-down.svg');
background-repeat: no-repeat;
background-position: calc(100% - 16px) center;
padding-right: 38px;
background-size: 10px;
}
#offer-bar .offer-bar-models-select select::-ms-expand {
/* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
display: none;
}
@media (hover: hover) {
#offer-bar .offer-bar-models-select select:hover {
cursor: pointer;
}
}
#offer-bar .offer-bar-headers {
display: grid;
align-items: center;
max-width: 1280px;
margin: 0 auto;
}
#offer-bar .offer-bar-headers .offer-bar-header {
display: block;
margin: 0 auto;
grid-area: 1 / 1;
color: #ffffff;
text-align: center;
pointer-events: none;
user-select: none;
visibility: hidden;
opacity: 0;
transform: translateY(-20px);
transition: opacity .4s ease-out .1s, transform .4s ease-out .1s, visibility 0s linear .5s;
will-change: opacity, transform;
}
/*#offer-bar .offer-bar-headers .offer-bar-header:has(~ .active) {
transform: translateY(-20px);
}*/
#offer-bar .offer-bar-headers .offer-bar-header.active {
visibility: visible;
opacity: 1;
transform: none;
transition: opacity .4s ease-out .6s, transform .4s ease-out .6s, visibility 0s linear .6s;
}
#offer-bar .offer-bar-headers .offer-bar-header.reset {
transform: translateY(20px);
transition: none;
}
#offer-bar .offer-bar-headers .offer-bar-header h2 {
font-weight: 300;
line-height: 2rem;
font-size: 1.375rem;
}
#offer-bar .offer-bar-headers .offer-bar-header p {
line-height: 1.375rem;
font-size: 1rem;
}
@media (min-width: 768px) {
#offer-bar .offer-bar-headers .offer-bar-header h2 {
line-height: 2.5rem;
font-size: 2rem;
}
}
#offer-bar .offer-bar-models-wrapper {
overflow: hidden;
padding: 42px 0;
margin: -42px 0;
}
#offer-bar .offer-bar-models {
--copies-per-side: 0;
--model-width: 130vw;
--model-gap: 8px;
display: flex;
align-items: center;
cursor: grab;
touch-action: pan-y;
user-select: none;
gap: var(--model-gap);
transform: translateX(var(--model-offset, 0px));
margin-top: -32px;
margin-bottom: -32px;
/*contain: inline-size;*/
min-width: 100%;
width: 0;
}
#offer-bar .offer-bar-models .offer-bar-model {
flex: 0 0 var(--model-width);
display: flex;
align-items: center;
justify-content: center;
}
/*#offer-bar .offer-bar-models .offer-bar-model:first-child {
margin-left: calc(50% - var(--model-width) / 2 - var(--copies-per-side) * (var(--model-width) + var(--model-gap)));
}*/
#offer-bar .offer-bar-models .offer-bar-model {
position: relative;
left: calc(50% - var(--model-width) / 2 - var(--copies-per-side) * (var(--model-width) + var(--model-gap)));
}
#offer-bar .offer-bar-models .offer-bar-model .offer-bar-car {
position: relative;
margin: 0 32px;
width: 100%;
}
#offer-bar .offer-bar-tab[data-category-id="2"] .offer-bar-models .offer-bar-model .offer-bar-car {
transform: scale(.9);
}
@media (min-width: 768px) {
#offer-bar .offer-bar-models {
--model-width: 70vw;
}
#offer-bar .offer-bar-models .offer-bar-model .offer-bar-car {
transform: scale(1.2);
margin: 0;
}
#offer-bar .offer-bar-tab[data-category-id="2"] .offer-bar-models .offer-bar-model .offer-bar-car {
transform: scale(1.1);
}
}
@media (min-width: 980px) {
#offer-bar .offer-bar-models {
--model-width: 66vw;
}
#offer-bar .offer-bar-models .offer-bar-model .offer-bar-car {
transform: scale(1.2);
margin: 0 32px;
}
#offer-bar .offer-bar-tab[data-category-id="2"] .offer-bar-models .offer-bar-model .offer-bar-car {
transform: scale(1.1);
}
}
@media (min-width: 1024px) {
#offer-bar .offer-bar-models {
--model-width: 60vw;
}
}
@media (min-width: 1200px) {
#offer-bar .offer-bar-models {
margin-bottom: -40px;
}
#offer-bar .offer-bar-models .offer-bar-model .offer-bar-car {
margin: 0 48px;
}
}
@media (min-width: 1400px) {
#offer-bar .offer-bar-models {
margin-top: -50px;
margin-bottom: -50px;
}
}
@media (min-width: 1600px) {
#offer-bar .offer-bar-models {
margin-bottom: -60px;
}
}
#offer-bar .offer-bar-models .offer-bar-model .offer-bar-car-body {
object-fit: contain;
pointer-events: none;
user-select: none;
display: block;
height: 100%;
width: 100%;
}
#offer-bar .offer-bar-models .offer-bar-model .offer-bar-car-wheel {
pointer-events: none;
user-select: none;
display: block;
position: absolute;
object-fit: contain;
height: calc(var(--wheel-radius) * 200%);
width: calc(var(--wheel-radius) * 200%);
bottom: calc((1 - var(--wheel-y)) * 100% - var(--wheel-radius) * 100%);
left: calc(var(--wheel-x) * 100% - var(--wheel-radius) * 100%);
}
#offer-bar .offer-bar-models .offer-bar-model .wheel.front-wheel {
}
#offer-bar .offer-bar-models .offer-bar-model .wheel.rear-wheel {
}
#offer-bar .offer-bar-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
#offer-bar .offer-bar-wrapper .offer-bar-progress-wrapper {
width: 100%;
}
#offer-bar .offer-bar-wrapper .offer-bar-progress {
height: 2px;
margin: 0 auto;
border-radius: 3px;
background: #fff;
max-width: 340px;
width: 100%;
}
#offer-bar .offer-bar-wrapper .offer-bar-progress .offer-bar-progress-fill {
height: 100%;
background: #000000;
transition: width .3s ease-in-out;
}
#offer-bar .offer-bar-wrapper .model-buttons {
margin: 8px 0;
display: grid;
}
#offer-bar .offer-bar-wrapper .model-buttons .model-button {
grid-area: 1 / 1;
visibility: hidden;
z-index: 8;
}
#offer-bar .offer-bar-wrapper .model-buttons .model-button.active {
visibility: visible;
z-index: 10;
}
#offer-bar .offer-bar-wrapper .model-buttons .model-button a {
display: block;
white-space: nowrap;
border-radius: 3px;
text-align: center;
background-color: #ffffff;
line-height: 1.125;
font-weight: bold;
text-align: center;
text-decoration: none;
padding: 12px 24px;
color: #000000;
}
@media (hover: hover) {
#offer-bar .offer-bar-wrapper .model-button a:hover {
background-color: rgb(247, 255, 20);
color: #000000;
}
}
#offer-bar .offer-bar-wrapper .offer-bar-navigation-wrapper {
display: none;
}
#offer-bar .offer-bar-wrapper .offer-bar-navigation button {
border: 0;
background: #ffffff;
color: #000000;
text-align: center;
display: flex;
align-items: center;
cursor: pointer;
font-weight: bold;
font-size: 1rem;
line-height: 1;
border-radius: 32px;
height: 32px;
width: 32px;
padding: 0;
}
@media (hover: hover) {
#offer-bar .offer-bar-wrapper .offer-bar-navigation button:hover {
background: rgb(247, 255, 20);
}
}
#offer-bar .offer-bar-wrapper .offer-bar-navigation button i {
width: 100%;
font-size: 12px;
}
#offer-bar .offer-bar-wrapper .offer-bar-navigation button span i::after {
display: block;
}
#offer-bar .offer-bar-wrapper .offer-bar-navigation button.slide-left i {
margin-left: -1px;
}
#offer-bar .offer-bar-wrapper .offer-bar-navigation button.slide-left i::after {
content: '\e953';
}
#offer-bar .offer-bar-wrapper .offer-bar-navigation button.slide-right i {
margin-left: 1px;
}
#offer-bar .offer-bar-wrapper .offer-bar-navigation button.slide-right i::after {
content: '\e952';
}
@media (min-width: 768px) {
#offer-bar .offer-bar-wrapper {
flex-direction: row;
}
#offer-bar .offer-bar-wrapper .offer-bar-progress-wrapper,
#offer-bar .offer-bar-wrapper .offer-bar-buttons-wrapper,
#offer-bar .offer-bar-wrapper .offer-bar-navigation-wrapper {
flex: 1;
}
#offer-bar .offer-bar-wrapper .offer-bar-progress {
display: none;
}
#offer-bar .offer-bar-wrapper .offer-bar-buttons-wrapper {
display: flex;
justify-content: center;
}
#offer-bar .offer-bar-wrapper .offer-bar-navigation-wrapper {
display: flex;
align-items: center;
justify-content: end;
}
#offer-bar .offer-bar-wrapper .offer-bar-navigation {
display: flex;
margin-right: 64px;
flex-direction: row;
gap: 24px;
}
}
#offer-bar .offer-bar-offers-wrapper {
flex-grow: 1;
}
#offer-bar .offer-bar-offers {
display: grid;
height: 100%;
}
#offer-bar .offer-bar-offers .offer-bar-offer {
display: block;
margin: 0 auto;
grid-area: 1 / 1;
_align-self: start;
background-color: #ffffff;
border-radius: 3px;
visibility: hidden;
z-index: 8;
width: 100%;
padding: 16px;
}
#offer-bar .offer-bar-offers .offer-bar-offer.active {
visibility: visible;
z-index: 10;
}
#offer-bar .offer-bar-offers .offer-bar-offer-box {
display: flex;
flex-direction: column;
gap: 16px;
}
#offer-bar .offer-bar-offers .offer-bar-offer-box .offer-image {
display: none;
}
#offer-bar .offer-bar-offers .offer-bar-offer-box .offer-button a {
display: inline-block;
border-radius: 3px;
text-align: center;
background-color: #000000;
line-height: 1.125;
font-weight: bold;
text-decoration: none;
padding: 12px 24px;
color: #ffffff;
}
@media (hover: hover) {
#offer-bar .offer-bar-offers .offer-bar-offer-box .offer-button a:hover {
background-color: rgb(247, 255, 20);
color: #000000;
}
}
#offer-bar .offer-bar-offers .offer-bar-offer .article p {
margin-bottom: 8px;
line-height: 1.25;
}
#offer-bar .offer-bar-offers .offer-bar-offer .article p:last-child {
margin-bottom: 0;
}
#offer-bar .offer-bar-offers .offer-bar-offer .article p.offer-title {
font-size: 1.375rem;
line-height: 2rem;
}
@media (min-width: 980px) {
#offer-bar .offer-bar-offers .offer-bar-offer {
padding: 24px;
}
#offer-bar .offer-bar-offers .offer-bar-offer-box {
align-items: center;
flex-direction: row;
gap: 24px;
}
#offer-bar .offer-bar-offers .offer-bar-offer-box .offer-image {
flex-shrink: 0;
/*align-self: stretch;*/
display: flex;
width: 240px;
}
#offer-bar .offer-bar-offers .offer-bar-offer-box .offer-image img {
display: block;
border-radius: 3px;
width: 100%;
/*object-fit: cover;*/
}
#offer-bar .offer-bar-offers .offer-bar-offer-box .offer-text {
flex-grow: 1;
}
#offer-bar .offer-bar-offers .offer-bar-offer-box .offer-button {
}
#offer-bar .offer-bar-offers .offer-bar-offer .article p {
line-height: 1.5;
}
#offer-bar .offer-bar-offers .offer-bar-offer .article p.offer-title {
line-height: 1.25;
font-size: 2rem;
}
}
#banners {
}
#banners.section {
padding-top: 0;
}
#banners.section .container {
max-width: calc(1920px + var(--page-padding) * 2);
padding: 0;
}
#banners .banners {
position: relative;
}
#banners .list {
display: block;
position: relative;
}
#banners .list::after {
z-index: 100;
padding: 3px 4px;
line-height: 1;
font-size: 12px;
color: #ffffff;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
content: attr(data-active-banner) ' / ' attr(data-total-banners);
font-variant-numeric: tabular-nums;
position: absolute;
bottom: 16px;
left: 16px;
}
#banners .list::before {
content: '';
display: block;
padding-top: calc(1200 / 2880 * 100%);
}
#banners .list li {
display: none;
position: absolute;
z-index: 100;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
#banners .list li a {
display: block;
}
#banners .list li img {
display: block;
width: 100%;
}
#banners .list li .banner-info {
display: none;
}
#banners .nav-list {
display: none;
}
#banners .navigation {
position: absolute;
text-decoration: none;
background: rgba(0, 0, 0, 0.2);
transform: translateY(-50%);
z-index: 200;
left: 16px;
top: 50%;
right: auto;
border-radius: 40px;
height: 40px;
width: 40px;
color: #ffffff;
}
#banners .navigation.right {
left: auto;
right: 16px;
}
#banners .navigation span {
display: flex;
text-align: center;
align-items: center;
height: 40px;
width: 40px;
}
#banners .navigation span i {
flex: 0 1 100%;
font-size: 22px;
}
#banners .navigation.left span i {
/*transform: rotate(180deg);*/
margin-left: -2px;
}
#banners .navigation.right span i {
margin-left: 2px;
}
#banners .navigation span i::after {
content: '\e953';
}
#banners .navigation.right span i::after {
content: '\e952';
}
@media (hover: hover) {
#banners .navigation {
transition: background-color .2s;
}
#banners .navigation:hover {
background: #fee440;
color: #000000;
}
#banners .navigation span i {
transition: color .2s;
}
#banners .navigation:hover span i {
}
}
#banners .texts {
border-bottom: 1px solid #d8d8d8;
padding: 16px;
}
#banners .texts ul {
display: grid;
}
#banners .texts ul li {
visibility: hidden;
grid-column: 1;
grid-row: 1;
}
#banners .texts ul li.active {
visibility: visible;
}
#banners .banner-info {
display: flex;
flex-direction: column;
pointer-events: none;
}
#banners .banner-info .banner-text {
margin-bottom: 16px;
}
#banners .banner-info .title {
font-size: 1.6em;
font-weight: bold;
margin-bottom: 16px;
line-height: 1.1;
}
#banners .banner-info .text {
}
#banners .banner-info .button {
display: flex;
}
#banners .banner-info .button a {
pointer-events: auto;
display: inline-block;
position: relative;
text-decoration: none;
border: 1px solid #000000;
line-height: 1;
font-weight: bold;
font-size: 1rem;
color: #000000;
padding: 12px 40px;
border-radius: 3px;
}
#banners .banner-info .button a span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#banners .banner-info .button a {
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: color .4s;
}
#banners .banner-info .button a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#banners .banner-info .button a:hover {
text-decoration: underline;
color: #000000;
}
#banners .banner-info .button a:hover::after {
content: '';
width: 120%;
}
}
@media (min-width: 768px) {
#banners .texts {
display: none;
}
#banners .list li .banner-info {
display: block;
position: absolute;
width: calc((100% - 72px * 2) / 2);
color: #ffffff;
left: 72px;
bottom: 16px;
top: 32px;
}
#banners .banner-info .banner-text {
background: rgba(0, 0, 0, 0.4);
border-radius: 3px;
padding: 16px;
}
#banners .banner-info .button a {
background: rgba(255, 255, 255, 0.8);
}
}
@media (min-width: 920px) {
#banners .list li .banner-info {
top: 64px;
}
}
@media (min-width: 1024px) {
#banners .list::after {
font-size: 14px;
bottom: 32px;
transform: translateX(-50%);
left: 50%;
}
#banners .navigation {
left: 32px;
right: auto;
border-radius: 48px;
height: 48px;
width: 48px;
}
#banners .navigation.right {
left: auto;
right: 32px;
}
#banners .navigation span {
height: 48px;
width: 48px;
}
#banners .navigation span i {
font-size: 28px;
}
#banners .list li .banner-info {
width: calc((100% - 112px * 2) / 2);
left: 112px;
}
}
@media (min-width: 1200px) {
#banners .banner-info {
font-size: 1.4em;
}
#banners .banner-info .title {
font-size: 1.8em;
}
}
@media (min-width: 1400px) {
#banners .banner-info {
font-size: 1.6em;
}
}
#content #home .section-title h2 {
font-weight: 300;
line-height: 2.25rem;
line-height: 1;
font-size: 1.75rem;
}
@media (min-width: 768px) {
#content #home .section-title h2 {
line-height: 3.25rem;
line-height: 1;
font-size: 2.75rem;
}
}
@media (min-width: 1200px) {
#content #home .section-title h2 {
line-height: 4.25rem;
line-height: 1;
font-size: 3.75rem;
}
}
#home .generic-list {
display: grid;
margin-bottom: 32px;
grid-template-columns: repeat(1, 1fr);
gap: 16px;
}
@media (min-width: 768px) {
#home .generic-list {
grid-template-columns: repeat(3, 1fr);
}
#home .generic-list.offers {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1120px) {
#home .generic-list.offers {
grid-template-columns: repeat(4, 1fr);
}
}
#home .generic-list .list-item {
background: #ffffff;
overflow: hidden;
flex-direction: column;
display: flex;
}
#home .generic-list .list-item .image a {
display: block;
text-decoration: none;
}
#home .generic-list .list-item .image a img {
display: block;
aspect-ratio: 1840 / 1100;
width: 100%;
}
#home .generic-list.offers .list-item .image a img {
aspect-ratio: 800 / 1000;
}
#home .generic-list .list-item .text {
padding: 16px;
display: flex;
flex-direction: column;
flex: 1;
}
#home .generic-list .list-item .text .title {
margin-bottom: 8px;
font-size: 1.5rem;
line-height: 2rem;
}
#home .generic-list .list-item .text .title a {
text-decoration: none;
display: block;
color: inherit;
}
@media (min-width: 768px) {
#home .generic-list .list-item {
}
@media (hover: hover) {
#home .generic-list .list-item .text .title a:hover {
text-decoration: underline;
}
}
}
#home .generic-list .list-item .text .date {
margin-bottom: 8px;
}
#home .generic-list .list-item .text .intro {
margin-bottom: 16px;
}
#home .models-list {
overflow: hidden;
margin-bottom: 32px;
position: relative;
}
#home .models-list ul {
display: flex;
/*justify-content: center;*/
transform: translateX(calc(var(--list-index, 0) * (100% / var(--list-columns, 1)) * -1));
transition: transform 0.4s;
margin: 0 -8px;
--list-columns: 1;
}
#home .models-list ul.notransition {
transition: none;
}
#home .models-list ul li {
padding: 0 8px;
flex: 0 0 calc(100% / var(--list-columns, 1));
}
#home .models-list ul li a {
text-decoration: none;
display: block;
color: #000000;
}
#home .models-list ul li a .image {
margin-bottom: 8px;
position: relative;
padding: 0 16px;
}
#home .models-list ul li a .image img {
display: block;
width: 100%;
}
#home .models-list ul li a .image .e {
width: calc(100% - 32px);
position: absolute;
left: 16px;
top: 0;
}
#home .models-list ul li a .name {
line-height: 1.4rem;
font-size: 1.2rem;
text-align: center;
}
@media (min-width: 520px) {
#home .models-list ul {
--list-columns: 2;
}
}
@media (min-width: 720px) {
#home .models-list ul {
--list-columns: 3;
}
}
@media (min-width: 920px) {
#home .models-list ul {
--list-columns: 4;
}
}
@media (min-width: 1120px) {
#home .models-list ul {
--list-columns: 5;
}
}
#home .models-list .navigation {
position: absolute;
text-decoration: none;
background: rgba(0, 0, 0, 0.4);
transform: translateY(-50%);
z-index: 200;
left: 0;
top: 50%;
right: auto;
border-radius: 40px;
height: 40px;
width: 40px;
color: #ffffff;
}
#home .models-list .navigation.right {
left: auto;
right: 0;
}
#home .models-list .navigation span {
display: flex;
text-align: center;
align-items: center;
height: 40px;
width: 40px;
}
#home .models-list .navigation span i {
flex: 0 1 100%;
font-size: 22px;
}
#home .models-list .navigation.left span i {
/*transform: rotate(180deg);*/
margin-left: -2px;
}
#home .models-list .navigation.right span i {
margin-left: 2px;
}
#home .models-list .navigation span i::after {
content: '\e953';
}
#home .models-list .navigation.right span i::after {
content: '\e952';
}
@media (hover: hover) {
#home .models-list .navigation {
transition: background-color .2s;
}
#home .models-list .navigation:not(.disabled):hover {
background: #fee440;
color: #000000;
}
#home .models-list .navigation span i {
transition: color .2s;
}
#home .models-list .navigation:hover span i {
}
}
#home .models-list .navigation.disabled {
cursor: default;
opacity: 0.2;
}
@media (min-width: 1024px) {
#home .models-list .navigation {
left: 0;
right: auto;
border-radius: 48px;
height: 48px;
width: 48px;
}
#home .models-list .navigation.right {
left: auto;
right: 0;
}
#home .models-list .navigation span {
height: 48px;
width: 48px;
}
#home .models-list .navigation span i {
font-size: 28px;
}
#home .models-list .list li .banner-info {
left: 112px;
}
}
#home .section-content .button {
margin-top: auto;
text-align: center;
line-height: 0;
font-size: 0;
}
#home .section-content .button a {
display: inline-block;
position: relative;
text-decoration: none;
border: 1px solid #000000;
line-height: 1;
font-weight: bold;
font-size: 1rem;
color: #000000;
padding: 12px 40px;
border-radius: 3px;
}
#home .section-content .button a span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#home .section-content .button a {
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: color .4s;
}
#home .section-content .button a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#home .section-content .button a:hover {
text-decoration: underline;
color: #000000;
}
#home .section-content .button a:hover::after {
content: '';
width: 120%;
}
}
/*
* News
*/
#content .news-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 16px;
}
@media (min-width: 768px) {
#content .news-list {
grid-template-columns: repeat(2, 1fr);
}
}
#content .news-list .news-list-item {
background: #ffffff;
overflow: hidden;
flex-direction: column;
display: flex;
}
#content .news-list .news-list-item .image a {
display: block;
text-decoration: none;
}
#content .news-list .news-list-item .image a img {
display: block;
aspect-ratio: 1840 / 1100;
width: 100%;
}
#content .news-list .news-list-item .text {
padding: 16px;
display: flex;
flex-direction: column;
flex: 1;
}
#content .news-list .news-list-item .text .title {
margin-bottom: 8px;
font-size: 1.5rem;
line-height: 2rem;
}
#content .news-list .news-list-item .text .title a {
text-decoration: none;
display: block;
color: inherit;
}
@media (min-width: 768px) {
#content .news-list .news-list-item {
}
@media (hover: hover) {
#content .news-list .news-list-item .text .title a:hover {
text-decoration: underline;
}
}
}
#content .news-list .news-list-item .text .date {
margin-bottom: 8px;
}
#content .news-list .news-list-item .text .intro {
margin-bottom: 16px;
}
#content .news-list .news-list-item .text .button {
margin-top: auto;
text-align: left;
line-height: 0;
font-size: 0;
}
#content .news-list .news-list-item .text .button a {
display: inline-block;
position: relative;
text-decoration: none;
border: 1px solid #000000;
line-height: 1;
font-weight: bold;
font-size: 1rem;
color: #000000;
padding: 12px 40px;
border-radius: 3px;
}
#content .news-list .news-list-item .text .button a span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#content .news-list .news-list-item .text .button a {
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: color .4s;
}
#content .news-list .news-list-item .text .button a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#content .news-list .news-list-item .text .button a:hover {
text-decoration: underline;
color: #000000;
}
#content .news-list .news-list-item .text .button a:hover::after {
content: '';
width: 120%;
}
}
#content .news-item {
}
#content .news-item .news-date,
#content .news-item .news-image {
margin-bottom: 12px;
}
#content .news-item .news-image img {
aspect-ratio: 1840 / 1100;
display: block;
width: 100%;
}
/*
* Offers
*/
#content .offers-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 16px;
}
@media (min-width: 768px) {
#content .offers-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1120px) {
#content .offers-list {
grid-template-columns: repeat(4, 1fr);
}
}
#content .offers-list .offers-list-item {
background: #ffffff;
overflow: hidden;
flex-direction: column;
display: flex;
}
#content .offers-list .offers-list-item .image a {
display: block;
text-decoration: none;
}
#content .offers-list .offers-list-item .image a img {
display: block;
/*aspect-ratio: 1840 / 1100;*/
aspect-ratio: 800 / 1000;
width: 100%;
}
#content .offers-list .offers-list-item .text {
padding: 16px;
display: flex;
flex-direction: column;
flex: 1;
}
#content .offers-list .offers-list-item .text .title {
margin-bottom: 8px;
font-size: 1.5rem;
line-height: 2rem;
}
#content .offers-list .offers-list-item .text .title a {
text-decoration: none;
display: block;
color: inherit;
}
@media (min-width: 768px) {
#content .offers-list .offers-list-item {
}
@media (hover: hover) {
#content .offers-list .offers-list-item .text .title a:hover {
text-decoration: underline;
}
}
}
#content .offers-list .offers-list-item .text .date {
margin-bottom: 8px;
}
#content .offers-list .offers-list-item .text .intro {
margin-bottom: 16px;
}
#content .offers-list .offers-list-item .text .button {
margin-top: auto;
text-align: left;
line-height: 0;
font-size: 0;
}
#content .offers-list .offers-list-item .text .button a {
display: inline-block;
position: relative;
text-decoration: none;
border: 1px solid #000000;
line-height: 1;
font-weight: bold;
font-size: 1rem;
color: #000000;
padding: 12px 40px;
border-radius: 3px;
}
#content .offers-list .offers-list-item .text .button a span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#content .offers-list .offers-list-item .text .button a {
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: color .4s;
}
#content .offers-list .offers-list-item .text .button a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#content .offers-list .offers-list-item .text .button a:hover {
text-decoration: underline;
color: #000000;
}
#content .offers-list .offers-list-item .text .button a:hover::after {
content: '';
width: 120%;
}
}
#content .offers-item {
}
#content .offers-item .offers-date,
#content .offers-item .offers-image {
margin-bottom: 12px;
}
#content .offers-item .offers-image img {
aspect-ratio: 1840 / 1100;
display: block;
width: 100%;
}
/*
* Our team
*/
#content .our-team-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 16px;
}
@media (min-width: 768px) {
#content .our-team-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
#content .our-team-list {
grid-template-columns: repeat(3, 1fr);
}
}
#content .our-team-list .employee {
overflow: hidden;
background: #ffffff;
text-decoration: none;
border-radius: 3px;
height: 100%;
}
#content .our-team-list .employee .image {
position: relative;
}
#content .our-team-list .employee .image::after {
content: '';
display: block;
aspect-ratio: 16 / 9;
padding-top: calc(9 / 16 * 100%);
background: #f3f3f3;
}
#content .our-team-list .employee .image img {
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
}
#content .our-team-list .employee .text {
padding: 16px;
}
#content .our-team-list .employee .text .name {
margin-bottom: 10px;
text-transform: uppercase;
overflow-wrap: break-word;
font-weight: bold;
font-size: 1.5em;
hyphens: auto;
}
#content .our-team-list .employee .contacts {
padding: 0 16px 16px 16px;
overflow: hidden;
}
#content .our-team-list .employee .contacts .phone,
#content .our-team-list .employee .contacts .email {
display: flex;
align-items: center;
gap: 8px;
}
#content .our-team-list .employee .contacts .phone > span,
#content .our-team-list .employee .contacts .email > span {
flex: 1;
}
#content .our-team-list .employee .contacts .phone > span:first-child,
#content .our-team-list .employee .contacts .email > span:first-child {
flex: 0 1 auto;
}
/*
* Used cars
*/
#content .used-cars tr.disabled {
position: relative;
pointer-events: none;
opacity: 0.6;
}
#content .used-cars tr.disabled::after {
content: attr(data-availability);
position: absolute;
font-size: 16px;
display: block;
background: #fee440;
text-transform: uppercase;
font-weight: bold;
padding: 6px 10px;
border-radius: 2px;
color: #000000;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
#content .used-cars .image a {
display: block;
}
#content .used-cars .image a img {
display: block;
aspect-ratio: 60 / 45;
}
#content .used-cars td.price1:not(.no-price2) span {
text-decoration: line-through;
}
#content .used-cars td.price2:not(.no-price2) span {
font-weight: bold;
color: #f04124;
}
#content .used-cars td.gain:not(.no-price2) span {
font-weight: bold;
color: #43ac6a;
}
@media (max-width: 767px) {
#content .used-cars,
#content .used-cars tbody {
display: block;
}
#content .used-cars tbody {
display: flex;
flex-direction: column;
gap: 16px;
}
#content .used-cars tbody tr {
display: flex;
border-radius: 3px;
flex-direction: column;
}
#content .used-cars tr.disabled::after {
content: attr(data-availability);
position: absolute;
font-size: 13px;
display: block;
background: #fee440;
text-transform: uppercase;
font-weight: bold;
padding: 4px 10px;
border-radius: 2px;
color: #000000;
transform: none;
left: auto;
right: 10px;
top: 28px;
}
#content .used-cars tbody tr:not(:first-child)::before {
content: '';
display: block;
background: #fee440;
margin-left: calc(var(--page-padding) * -1);
margin-right: calc(var(--page-padding) * -1);
margin-bottom: 16px;
height: 2px;
}
#content .used-cars tbody tr td {
background: #ffffff;
}
#content .used-cars tbody tr .image {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
overflow: hidden;
order: 1;
}
#content .used-cars tbody tr .model {
order: 2;
}
#content .used-cars tbody tr .engine,
#content .used-cars tbody tr .transmission,
#content .used-cars tbody tr .bodywork,
#content .used-cars tbody tr .color,
#content .used-cars tbody tr .year,
#content .used-cars tbody tr .mileage,
#content .used-cars tbody tr .price1,
#content .used-cars tbody tr .price2,
#content .used-cars tbody tr .gain,
#content .used-cars tbody tr .more {
padding-left: 16px;
padding-right: 16px;
padding-bottom: 8px;
order: 3;
}
#content .used-cars thead,
#content .used-cars tbody tr .make,
#content .used-cars tbody tr .price2.no-price2,
#content .used-cars tbody tr .gain.no-price2 {
display: none;
}
#content .used-cars tbody tr .model {
padding: 10px 16px 10px 16px;
text-align: center;
background: #fee440;
}
#content .used-cars tbody tr .model a {
text-decoration: none;
line-height: 2.25rem;
font-size: 1.75rem;
color: inherit;
}
#content .used-cars tbody tr .model a::before {
content: attr(data-make) " ";
}
#content .used-cars tbody tr .engine {
padding-top: 16px;
}
/*#content .used-cars tbody tr .engine::after {
content: " / " attr(data-transmission);
}*/
#content .used-cars tbody tr .engine span,
#content .used-cars tbody tr .transmission span,
#content .used-cars tbody tr .bodywork span,
#content .used-cars tbody tr .color span,
#content .used-cars tbody tr .year span,
#content .used-cars tbody tr .mileage span,
#content .used-cars tbody tr .price1 span {
font-weight: bold;
}
#content .used-cars tbody tr .engine::before,
#content .used-cars tbody tr .transmission::before,
#content .used-cars tbody tr .bodywork::before,
#content .used-cars tbody tr .color::before,
#content .used-cars tbody tr .year::before,
#content .used-cars tbody tr .mileage::before,
#content .used-cars tbody tr .price1::before,
#content .used-cars tbody tr .price2:not(.no-price2)::before,
#content .used-cars tbody tr .gain:not(.no-price2)::before {
content: attr(data-text) ": ";
display: block;
}
#content .used-cars tbody tr .more {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
padding-bottom: 16px;
padding-top: 8px;
text-align: center;
}
#content .used-cars tbody tr .more a {
display: inline-block;
position: relative;
text-decoration: none;
border: 1px solid #000000;
line-height: 1;
font-weight: bold;
font-size: 1rem;
color: #000000;
padding: 12px 40px;
border-radius: 3px;
}
#content .used-cars tbody tr .more a span {
position: relative;
z-index: 2;
}
}
@media (min-width: 768px) {
#content .used-cars {
width: 100%;
margin-bottom: 40px;
}
#content .used-cars thead tr {
background: #000000;
color: #ffffff;
}
#content .used-cars thead tr th {
line-height: 1;
font-size: .875rem;
vertical-align: middle;
text-align: left;
padding: 6px;
}
#content .used-cars tbody tr td {
line-height: 1;
border-bottom: 1px solid #333333;
vertical-align: middle;
padding: 6px;
}
#content .used-cars tbody tr td:first-child {
padding-left: 0;
}
#content .used-cars tbody tr td:last-child {
padding-right: 0;
}
/*@media (hover: hover) {
#content .used-cars tbody:hover tr:not(:hover) {
opacity: 0.4;
}
}*/
#content .used-cars .image a img {
width: 60px;
}
#content .used-cars .make a,
#content .used-cars .model a {
text-decoration: none;
color: inherit;
}
#content .used-cars .more {
text-align: center;
line-height: 0;
font-size: 0;
}
#content .used-cars .more a {
display: inline-block;
position: relative;
text-decoration: none;
border: 1px solid #000000;
padding: 2px 4px;
border-radius: 3px;
line-height: 1;
font-size: 1rem;
color: #000000;
}
#content .used-cars .more a span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#content .used-cars .more a {
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: color .4s;
}
#content .used-cars .more a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#content .used-cars .more a:hover {
text-decoration: underline;
color: #000000;
}
#content .used-cars .more a:hover::after {
content: '';
width: 120%;
}
}
}
@media (min-width: 768px) and (max-width: 1200px) {
#content .used-cars thead tr .color,
#content .used-cars tbody tr .color {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
#content .used-cars thead tr .gain,
#content .used-cars tbody tr .gain {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1000px) {
#content .used-cars thead tr .bodywork,
#content .used-cars tbody tr .bodywork {
display: none;
}
}
@media (min-width: 768px) and (max-width: 900px) {
#content .used-cars thead tr .mileage,
#content .used-cars tbody tr .mileage {
display: none;
}
}
#content .used-car-availability {
display: inline-block;
background: #fee440;
margin-top: 8px;
text-transform: uppercase;
font-weight: bold;
padding: 6px 10px;
border-radius: 2px;
color: #000000;
}
#content .used-car {
display: flex;
flex-direction: column;
margin-bottom: 16px;
gap: 16px;
}
#content .used-car .used-car-info table {
width: 100%;
}
#content .used-car .used-car-info table td {
vertical-align: middle;
padding: 4px 0;
width: 50%;
}
#content .used-car .used-car-info table td:first-child {
padding-right: 16px;
font-weight: bold;
}
#content .used-car .used-car-info table td.price1:not(.no-price2) span {
text-decoration: line-through;
}
#content .used-car .used-car-info table td.price2:not(.no-price2) span {
font-weight: bold;
color: #f04124;
}
#content .used-car .used-car-info table td.gain:not(.no-price2) span {
font-weight: bold;
color: #43ac6a;
}
#content .used-car .used-car-description-title,
#content .used-car .used-car-equipment-title {
font-weight: bold;
}
#content .used-car .used-car-info table td:first-child::after,
#content .used-car .used-car-description-title::after,
#content .used-car .used-car-equipment-title::after {
content: ': ';
}
#content .used-car .used-car-equipment .equipment-list {
background: #f3f3f3;
border-radius: 3px;
padding: 10px;
}
#content .used-car .used-car-equipment .equipment-title {
font-weight: bold;
text-transform: uppercase;
}
#content .used-car .used-car-equipment .equipment-items {
margin-bottom: 10px;
}
#content .used-car .used-car-equipment .equipment-items:last-child {
margin-bottom: 0;
}
#content .used-car .used-car-equipment .equipment-items span {
}
#content .used-car .used-car-images {
display: grid;
align-self: start;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
#content .used-car .used-car-images a {
display: block;
background: #ffffff;
border-radius: 3px;
overflow: hidden;
}
#content .used-car .used-car-images a img {
display: block;
width: 100%;
}
#content .used-car .used-car-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
order: 1;
}
#content .used-car .used-car-buttons a {
display: block;
position: relative;
text-decoration: none;
border: 1px solid #000000;
line-height: 1;
font-weight: bold;
font-size: 1rem;
color: #000000;
padding: 12px 40px;
border-radius: 3px;
align-content: center;
text-align: center;
/*flex: 1 1 0px;*/
width: 100%;
}
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
/*#content .used-car .used-car-buttons a {
flex: 1 1 0px;
}*/
}
#content .used-car .used-car-buttons a span {
position: relative;
z-index: 2;
}
#content .used-car .used-car-buttons a.get-an-offer {
background: #000000;
color: #ffffff;
}
#content .used-car .used-car-buttons a.go-back {
margin-left: auto;
}
#content .used-car .used-car-buttons a.go-back svg {
display: inline-block;
vertical-align: middle;
margin-right: 6px;
transform: translateY(-1px);
height: 16px;
width: 16px;
}
@media (hover: hover) {
#content .used-car .used-car-buttons a {
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: color .4s;
}
#content .used-car .used-car-buttons a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#content .used-car .used-car-buttons a:hover {
text-decoration: underline;
color: #000000;
}
#content .used-car .used-car-buttons a:hover::after {
content: '';
width: 120%;
}
}
#content .used-car .used-car-calculator {
position: relative;
}
#content .used-car .used-car-calculator iframe {
display: block;
/*background: #f3f3f3;*/
background: rgb(247, 247, 247);
border-radius: 3px;
height: 640px;
}
#content .used-car .used-car-calculator iframe:not([src]) {
display: none;
}
#content .used-car .used-car-calculator #inbank-notice {
display: none;
}
#content .used-car .used-car-calculator .notice {
position: relative;
background: #f3f3f3;
border-radius: 3px;
padding: 16px;
text-align: center;
}
#content .used-car .used-car-calculator .notice p {
margin-bottom: 10px;
/*font-size: 1em;*/
}
#content .used-car .used-car-calculator .notice button {
border: 1px solid #000000;
position: relative;
background: #000000;
color: #ffffff;
}
#content .used-car .used-car-calculator .notice button:hover {
/*text-decoration: underline;*/
}
#content .used-car .used-car-calculator .notice button span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#content .used-car .used-car-calculator .notice button {
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: color .4s;
}
#content .used-car .used-car-calculator .notice button::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#content .used-car .used-car-calculator .notice button:hover {
text-decoration: underline;
color: #000000;
}
#content .used-car .used-car-calculator .notice button:hover::after {
content: '';
width: 120%;
}
}
@media (min-width: 768px) {
#content .used-car {
display: grid;
grid-template-columns: [left] 1fr [right] 1fr;
grid-template-rows: min-content 1fr;
margin-bottom: 32px;
gap: 16px;
}
#content .used-car.has-description,
#content .used-car.has-equipment,
#content .used-car.has-calculator {
grid-template-rows: min-content min-content 1fr;
}
#content .used-car.has-description.has-calculator,
#content .used-car.has-description.has-equipment,
#content .used-car.has-calculator.has-equipment {
grid-template-rows: min-content min-content min-content 1fr;
}
#content .used-car.has-description.has-calculator.has-equipment {
grid-template-rows: min-content min-content min-content min-content 1fr;
}
#content .used-car .used-car-info,
#content .used-car .used-car-description,
#content .used-car .used-car-equipment,
#content .used-car .used-car-calculator,
#content .used-car .used-car-buttons {
grid-column-start: left;
}
#content .used-car .used-car-buttons {
align-self: start;
order: unset;
}
#content .used-car .used-car-calculator {
align-self: start;
}
#content .used-car .used-car-images {
grid-column-start: right;
grid-row: 1 / span 2;
}
#content .used-car.has-description .used-car-images,
#content .used-car.has-equipment .used-car-images,
#content .used-car.has-calculator .used-car-images {
grid-row: 1 / span 3;
}
#content .used-car.has-description.has-calculator .used-car-images,
#content .used-car.has-description.has-equipment .used-car-images,
#content .used-car.has-calculator.has-equipment .used-car-images {
grid-row: 1 / span 4;
}
#content .used-car.has-description.has-calculator.has-equipment .used-car-images {
grid-row: 1 / span 5;
}
}
/*
* Pagination
*/
#content .pagination {
padding-top: 30px;
text-align: center;
line-height: 0;
font-size: 0;
}
#content .pagination::after {
content: '';
display: table;
}
#content .pagination ul {
display: inline-block;
}
#content .pagination ul li {
display: block;
margin: 0 4px;
float: left;
}
#content .pagination ul li a {
display: block;
position: relative;
text-decoration: none;
border: 1px solid #000000;
font-size: 1rem;
color: #000000;
padding: 0 4px;
border-radius: 3px;
min-width: 32px;
line-height: 30px;
height: 32px;
}
#content .pagination ul li a.active {
background: #fee440;
font-weight: 800;
}
#content .pagination ul li a span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#content .pagination ul li a {
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: color .4s;
}
#content .pagination ul li a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#content .pagination ul li a:hover {
text-decoration: underline;
color: #000000;
}
#content .pagination ul li a:hover::after {
content: '';
width: 120%;
}
}
/*
* Forms
*/
.fancybox-content.gdpr-popup {
border-radius: 3px;
max-width: 800px;
}
#content .responsive-form {
position: relative;
border-radius: 3px;
background: #f3f3f3;
padding: 16px;
}
#content .responsive-form form {
}
#content .responsive-form form .overlay {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
border-radius: 3px;
z-index: 100;
}
@keyframes loading-rotate {
100% {
transform: rotate(360deg);
}
}
#content .responsive-form form .overlay .loading {
animation: loading-rotate 1s linear infinite;
background: transparent;
border: 4px solid #888;
border-bottom-color: #fff;
border-radius: 50%;
height: 24px;
left: 50%;
margin: -12px 0 0 -2px;
opacity: .7;
padding: 0;
position: absolute;
top: 50%;
width: 24px;
z-index: 99999;
}
#content .responsive-form form .form {
display: flex;
flex-direction: column;
gap: 16px;
}
#content .responsive-form form .form .row {
scroll-margin-top: calc(var(--sticky-header-height) + 16px);
}
#content .responsive-form form .form .row.form-section-title {
text-transform: uppercase;
}
/*#content .responsive-form form .form .row.form-section-title::after {
content: '';
margin-top: 6px;
border-bottom: 2px solid #000000;
display: block;
}*/
#content .responsive-form form .form .columns {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 768px) {
#content .responsive-form form .form .columns {
flex-direction: row;
}
#content .responsive-form form .form .columns[data-columns="2"] .row {
flex: 1 1 0px;
}
}
#content .responsive-form form .row.input > label {
display: block;
margin-bottom: 2px;
line-height: 1.1;
}
#content .responsive-form form .row.input > label::after {
content: ':';
}
#content .responsive-form form input[type=text],
#content .responsive-form form textarea {
display: block;
width: 100%;
border: 2px solid #000000;
border-radius: 2px;
color: #000000;
background: #ffffff;
line-height: 22px;
padding: 6px 6px;
font-size: 1rem;
}
#content .responsive-form form textarea {
line-height: 22px;
height: 120px;
}
#content .responsive-form form select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: 2px solid #000000;
background: #ffffff;
display: block;
float: left;
color: #000000;
margin-right: 6px;
border-radius: 2px;
line-height: 22px;
padding: 6px 10px;
padding-right: 28px;
position: relative;
background-image: url('/images/form-arrow-down.svg');
background-repeat: no-repeat;
background-position: calc(100% - 8px) center;
background-size: 10px;
}
@media (hover: hover) {
#content .responsive-form form select:hover {
cursor: pointer;
}
}
#content .responsive-form form select::-ms-expand {
/* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
display: none;
}
#content .responsive-form form select:last-child {
margin-right: 0;
}
#content .responsive-form form .radiobox .check {
border: 2px solid #000000;
height: 20px;
width: 20px;
}
#content .responsive-form form .radiobox .check a {
overflow: hidden;
}
#content .responsive-form form .radiobox .check a span {
margin: 2px;
height: 12px;
width: 12px;
}
#content .responsive-form form .radiobox .check a.checked span {
background: #000000;
}
#content .responsive-form form .checkbox .check {
border: 2px solid #000000;
border-radius: 2px;
height: 20px;
width: 20px;
}
#content .responsive-form form .checkbox .check a {
overflow: hidden;
}
#content .responsive-form form .checkbox .check a span {
border-radius: 0;
height: 12px;
width: 12px;
margin: 2px;
}
#content .responsive-form form .checkbox .check a.checked span {
border-radius: 1px;
background: #000000;
}
#content .responsive-form form .checkbox .check a.checked span::after {
content: none;
}
#content .responsive-form form .models-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 8px 16px;
}
@media (min-width: 460px) {
#content .responsive-form form .models-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 620px) {
#content .responsive-form form .models-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 780px) {
#content .responsive-form form .models-list {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 940px) {
#content .responsive-form form .models-list {
grid-template-columns: repeat(5, 1fr);
}
}
#content .responsive-form form .models-list .model {
}
#content .responsive-form form .models-list .model img {
display: block;
max-width: 320px;
width: 100%;
}
#content .responsive-form form .models-list .model label {
display: block;
}
#content .responsive-form form .models-list .model label .model-table {
display: flex;
gap: 10px;
}
#content .responsive-form form .models-list .model label .model-table .model-input {
height: 22px;
}
#content .responsive-form form .models-list .model label .model-table .model-input .radiobox .check {
margin: 1px 0;
}
#content .responsive-form form .models-list .model label .model-table .model-name {
/*align-content: center;*/
align-self: center;
flex: 1;
}
@media (hover: hover) {
#content .responsive-form form .models-list .model label {
border-radius: 3px;
cursor: pointer;
padding: 10px;
}
#content .responsive-form form .models-list .model label:hover {
background: rgba(0, 0, 0, 0.1);
}
}
#content .responsive-form form .service-items,
#content .responsive-form form .service-offers {
display: flex;
flex-direction: column;
gap: 10px;
}
#content .responsive-form form .service-items li,
#content .responsive-form form .service-offers li {
display: block;
}
@media (min-width: 640px) {
#content .responsive-form form .service-items {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
}
}
@media (min-width: 960px) {
#content .responsive-form form .service-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
}
#content .responsive-form form .service-items li label,
#content .responsive-form form .service-offers li label {
display: block;
line-height: 18px;
padding: 1px 0;
margin-bottom: 0;
padding-left: 26px;
position: relative;
cursor: pointer;
}
#content .responsive-form form .service-items li label .checkbox,
#content .responsive-form form .service-offers li label .checkbox {
overflow: hidden;
position: absolute;
display: block;
top: 0;
left: 0;
}
#content .responsive-form form .service-items li label .checkbox,
#content .responsive-form form .service-offers li label .checkbox {
transform: translateY(-50%);
top: 50%;
}
#content .responsive-form form .service-offers .dates {
font-size: 0.9em;
font-style: italic;
font-weight: 300;
}
#content .responsive-form form .service-offers .dates::before {
content: '(';
}
#content .responsive-form form .service-offers .dates::after {
content: ')';
}
#content .responsive-form form .gdpr-list {
display: flex;
flex-direction: column;
gap: 10px;
}
#content .responsive-form form .gdpr-list li {
display: block;
}
#content .responsive-form form .gdpr-list li label {
display: block;
line-height: 18px;
padding: 1px 0;
padding-left: 26px;
position: relative;
cursor: pointer;
font-weight: 300;
}
#content .responsive-form form .gdpr-list li label .radiobox {
overflow: hidden;
position: absolute;
display: block;
transform: translateY(-50%);
top: calc(50%);
left: 0;
}
#content .responsive-form form .error {
display: none;
color: #f04124;
margin-top: 6px;
line-height: 1.2;
font-size: 0.9em;
}
#content .responsive-form form .generic-error {
display: none;
}
#content .responsive-form form .generic-error p {
display: block;
color: #f04124;
}
#content .responsive-form form .buttons button {
display: block;
position: relative;
text-decoration: none;
border: 1px solid #000000;
background: #ffffff;
line-height: 1;
font-family: inherit;
font-weight: bold;
font-size: 1rem;
color: #000000;
padding: 12px 40px;
border-radius: 3px;
text-align: center;
flex-grow: 1;
}
#content .responsive-form form .buttons button span {
position: relative;
z-index: 2;
}
#content .responsive-form form .buttons button.send {
background: #000000;
color: #ffffff;
}
@media (hover: hover) {
#content .responsive-form form .buttons button {
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: color .4s;
}
#content .responsive-form form .buttons button::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#content .responsive-form form .buttons button:hover {
cursor: pointer;
text-decoration: underline;
color: #000000;
}
#content .responsive-form form .buttons button:hover::after {
content: '';
width: 120%;
}
}
#content .responsive-form form .success {
display: none;
}
/*
* Models
*/
#content #model-title .section-title h2 {
font-weight: bold;
line-height: 2.25rem;
line-height: 1;
font-size: 1.75rem;
}
@media (min-width: 768px) {
#content #model-title .section-title h2 {
line-height: 3.25rem;
line-height: 1;
font-size: 2.75rem;
}
}
@media (min-width: 1200px) {
#content #model-title .section-title h2 {
line-height: 4.25rem;
line-height: 1;
font-size: 3.75rem;
}
}
#content .categories-list,
#model-menu .model-menu-list {
position: relative;
}
#content .categories-list button,
#model-menu .model-menu-list button {
display: block;
font-family: inherit;
content: attr(data-name);
border: 2px solid #000000;
background: #ffffff;
color: #000000;
margin-bottom: 16px;
border-radius: 2px;
line-height: 22px;
padding: 8px 16px;
padding-right: 28px;
position: relative;
font-size: 1em;
background-image: url('/images/arrow-down.svg');
background-repeat: no-repeat;
background-position: calc(100% - 8px) center;
background-size: 10px;
text-align: left;
width: 100%;
}
#model-menu .model-menu-list button {
margin-bottom: 0;
}
#content .categories-list button.toggled,
#model-menu .model-menu-list button.toggled {
background-image: url('/images/arrow-up.svg');
}
#content .categories-list ul,
#model-menu .model-menu-list ul {
display: none;
}
#content .categories-list ul li a,
#model-menu .model-menu-list ul li a {
text-decoration: none;
}
@media (max-width: 767px) {
#content .categories-list button.toggled + ul,
#model-menu .model-menu-list button.toggled + ul {
display: block;
}
#content .categories-list ul,
#model-menu .model-menu-list ul {
background: #ffffff;
border: 2px solid #000000;
border-radius: 2px;
position: absolute;
width: 100%;
top: calc(100% + 2px);
z-index: 100;
}
#content .categories-list ul li,
#model-menu .model-menu-list ul li {
display: block;
}
#content .categories-list ul li a,
#model-menu .model-menu-list ul li a {
display: block;
padding: 12px 16px;
color: inherit;
}
#content .categories-list ul li.active a,
#model-menu .model-menu-list ul li.active a {
font-weight: bold;
background: #fee440;
}
}
@media (min-width: 768px) {
#content .categories-list button,
#model-menu .model-menu-list button {
display: none;
}
#content .categories-list ul {
display: flex;
gap: 8px;
}
#content .categories-list ul li {
display: block;
padding: 16px 0;
}
#content .categories-list ul li a {
display: block;
position: relative;
padding: 6px 10px;
color: #000000;
}
#content .categories-list ul li a span {
position: relative;
z-index: 2;
}
#content .categories-list ul li.active {
border-bottom: 3px solid #000000;
margin-bottom: -2px;
}
#content .categories-list ul li.active a {
font-weight: bold;
}
@media (hover: hover) {
#content .categories-list ul li a {
overflow: hidden;
border-radius: 3px;
-webkit-backface-visibility: hidden;
transition: color .4s;
padding: 4px 6px;
}
#content .categories-list ul li a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#content .categories-list ul li a:hover {
color: #000000;
}
#content .categories-list ul li a:hover::after {
content: '';
width: 120%;
}
}
#model-menu .model-menu-list {
display: block;
margin: 0 -10px;
}
#model-menu .model-menu-list ul {
display: block;
}
#model-menu .model-menu-list ul li {
display: inline-block;
vertical-align: middle;
line-height: 1rem;
color: #000000;
margin: 8px 2px;
}
#model-menu .model-menu-list ul li a {
color: inherit;
padding: 6px 8px;
position: relative;
margin: -6px 0px;
}
#model-menu .model-menu-list ul li a span {
position: relative;
z-index: 2;
}
#model-menu .model-menu-list ul li a span[data-text] {
display: flex;
flex-direction: column;
align-items: center;
}
#model-menu .model-menu-list ul li a span[data-text]::after {
pointer-events: none;
content: attr(data-text);
visibility: hidden;
font-weight: bold;
overflow: hidden;
user-select: none;
height: 0;
}
@media speech {
#model-menu .model-menu-list ul li a span[data-text]::after {
display: none;
}
}
#model-menu .model-menu-list ul li.active a {
font-weight: bold;
}
#model-menu .model-menu-list ul li a {
overflow: hidden;
border-radius: 3px;
text-decoration: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: color .4s;
display: block;
}
@media (hover: hover) {
#model-menu .model-menu-list ul li a::after {
content: '';
z-index: 1;
display: block;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10px;
top: 0;
}
#model-menu .model-menu-list ul li a:hover {
color: #000000;
}
#model-menu .model-menu-list ul li a:hover::after {
content: '';
width: calc(100% + 20px);
}
}
}
#models .models-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 16px;
}
#models .models-list a {
display: flex;
color: #000000;
text-decoration: none;
transition: border-color .2s ease-out, background-color .2s ease-out;
flex-direction: column;
border: 1px solid #cccccc;
border-radius: 3px;
padding: 12px;
gap: 8px;
}
#models .models-list a img {
display: block;
width: 100%;
}
#models .models-list a .image {
position: relative;
}
#models .models-list a .image img {
transform: scale(1.00);
transition: transform .5s ease;
z-index: 100;
}
#models .models-list a .image .e {
position: absolute;
left: 0;
top: 0;
}
#models .models-list a .name {
font-weight: bold;
line-height: 1.1;
}
#models .models-list a .types {
line-height: 1;
font-style: italic;
font-size: 0.8em;
/*align-content: end;
flex: 1;*/
}
@media (hover: hover) {
#models .models-list a:hover {
background: rgba(255, 255, 255, 1);
border-color: #000000;
}
#models .models-list a:hover .image img {
transform: scale(1.05);
}
}
@media (min-width: 520px) {
#models .models-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 720px) {
#models .models-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 920px) {
#models .models-list {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1120px) {
#models .models-list {
grid-template-columns: repeat(5, 1fr);
}
}
#model-menu.section,
#model-intro.section {
padding-top: 0;
}
#model-menu.section {
position: sticky;
top: var(--sticky-header-height);
padding: 12px 0px;
border-bottom: 1px solid #ccc;
background: #f9f9f9;
z-index: 3000;
}
#model-menu.section .container {
max-width: calc(1920px + var(--page-padding) * 2);
padding: 0 var(--page-padding);
}
#model-intro.section .container {
max-width: calc(1920px + var(--page-padding) * 2);
padding: 0;
}
#model-intro video {
display: block;
background: #cccccc;
aspect-ratio: 1920 / 888;
width: 100%;
}
#model-intro img {
display: block;
background: #cccccc;
aspect-ratio: 1920 / 888;
width: 100%;
}
#content .fuel-types {
display: flex;
flex-direction: column;
gap: 16px;
}
#content .fuel-types .divider {
background-color: #000000;
height: 2px;
}
#content .fuel-types .fuel-type {
display: flex;
flex-direction: column;
text-align: center;
gap: 8px;
}
#content .fuel-types .fuel-type .fuel-type-title {
align-self: center;
text-transform: uppercase;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
padding: 2px 10px 2px 10px;
line-height: 1.4;
font-size: 1.2em;
}
#content .fuel-types .fuel-type .fuel-type-data {
align-self: center;
display: flex;
justify-content: space-around;
flex-direction: column;
gap: 8px 32px;
}
@media (min-width: 768px) {
#content .fuel-types .fuel-type .fuel-type-data {
flex-direction: row;
/*display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;*/
}
}
#content .fuel-types .fuel-type .fuel-type-data .value-with-unit {
white-space: nowrap;
display: block;
}
#content .fuel-types .fuel-type .fuel-type-data .value-with-unit .value {
font-weight: 400;
font-size: 1.4em;
line-height: 1;
}
@media (min-width: 940px) {
#content .fuel-types .fuel-type .fuel-type-data .value-with-unit .value {
font-size: 2em;
}
}
#content .fuel-types .fuel-type .fuel-type-data .description {
display: block;
}
#content .fuel-types .about-wltp {
text-align: center;
}
#content .model-images {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (min-width: 440px) {
#content .model-images {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 560px) {
#content .model-images {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 768px) {
#content .model-images {
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 860px) {
#content .model-images {
grid-template-columns: repeat(6, 1fr);
}
}
@media (min-width: 940px) {
#content .model-images {
grid-template-columns: repeat(8, 1fr);
}
}
#content .model-images li {
display: flex;
}
#content .model-images li a {
display: flex;
aspect-ratio: 1;
border-radius: 3px;
background: #cccccc;
justify-items: center;
align-items: center;
padding: 6px;
flex: 1;
}
@media (hover: hover) {
#content .model-images li a {
transform: scale(1.00);
transition: transform .5s ease, background .5s ease;
}
#content .model-images li a:hover {
transform: scale(1.05);
background: #bbbbbb;
}
}
#content .model-images li a img {
display: block;
margin: auto;
border-radius: 3px;
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
#content #model-iframe .container {
position: relative;
min-height: 100px;
}
#content #model-iframe .container iframe {
width: 100%;
}
#content #model-iframe .container .no-data {
display: none;
}
#content #model-iframe .container .loading {
position: absolute;
background: #000;
opacity: 0.8;
top: 0;
left: var(--page-padding);
right: var(--page-padding);
bottom: 0;
height: 100%;
}
@keyframes loading {
to {
transform: rotate(1turn);
}
}
#content #model-iframe .container .loading::after {
content: "";
display: block;
position: absolute;
left: calc(50% - 16px);
top: calc(50% - 16px);
width: 32px;
height: 32px;
border: 6px solid #ececee;
border-top-color: #fee440;
border-radius: 50%;
animation: loading 1s ease infinite;
}
/*
* Cenas un informācija
*/
#prices .models-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 16px;
}
#prices .models-list .model {
display: flex;
color: #000000;
background: #ffffff;
border-radius: 3px;
text-decoration: none;
flex-direction: column;
padding: 12px;
gap: 16px;
}
#prices .models-list .model .image {
position: relative;
}
#prices .models-list .model .image img {
transform: scale(1.00);
transition: transform .5s ease;
}
#prices .models-list .model .image .e {
position: absolute;
left: 0;
top: 0;
}
#prices .models-list .model .name {
font-weight: 400;
font-size: 1.3rem;
line-height: 1.4rem;
}
#prices .models-list .model .download,
#prices .models-list .model .links {
margin-top: auto;
}
#prices .models-list .model .download a,
#prices .models-list .model .links a {
padding: 2px 0;
position: relative;
overflow: hidden;
font-weight: 700;
text-decoration: none;
color: #000000;
display: flex;
align-items: center;
gap: 8px;
}
#prices .models-list .model .links a:not(:last-child) {
margin-bottom: 6px;
}
#prices .models-list .model .download a i,
#prices .models-list .model .download a span,
#prices .models-list .model .links a i,
#prices .models-list .model .links a span {
position: relative;
z-index: 2;
}
#prices .models-list .model .links a i {
font-weight: normal;
}
@media (hover: hover) {
#prices .models-list .model .download a,
#prices .models-list .model .links a {
overflow: hidden;
border-radius: 3px;
-webkit-backface-visibility: hidden;
transition: color .4s;
margin: -4px -6px;
padding: 4px 6px;
}
#prices .models-list .model .download a::after,
#prices .models-list .model .links a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#prices .models-list .model .download a:hover,
#prices .models-list .model .links a:hover {
color: #000000;
}
#prices .models-list .model .download a:hover::after,
#prices .models-list .model .links a:hover::after {
content: '';
width: 120%;
}
}
@media (min-width: 520px) {
#prices .models-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 720px) {
#prices .models-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 920px) {
#prices .models-list {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1120px) {
#prices .models-list {
grid-template-columns: repeat(5, 1fr);
}
}
#prices .models-list .model img {
display: block;
width: 100%;
}
/*
* Noliktavas automašīnas
*/
/*#content:has(#stock-cars) {
background: #fee440;
}*/
#content #stock-cars .section-title h2 {
font-weight: bold;
line-height: 2.25rem;
line-height: 1;
font-size: 1.75rem;
}
@media (min-width: 768px) {
#content #stock-cars .section-title h2 {
line-height: 3.25rem;
line-height: 1;
font-size: 2.75rem;
}
}
@media (min-width: 1200px) {
#content #stock-cars .section-title h2 {
line-height: 4.25rem;
line-height: 1;
font-size: 3.75rem;
}
}
#stock-cars .section-title p a {
color: inherit;
}
#stock-cars .models-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 16px;
}
#stock-cars .models-list .model {
display: flex;
color: #000000;
background: #ffffff;
border-radius: 3px;
border-top: 10px solid #fee440;
text-decoration: none;
flex-direction: column;
padding: 12px;
gap: 10px;
}
#stock-cars .models-list .model > a {
display: block;
text-align: center;
text-decoration: none;
color: inherit;
}
#stock-cars .models-list .model a .image {
position: relative;
}
#stock-cars .models-list .model a .image img {
transform: scale(1.00);
transition: transform .5s ease;
}
#stock-cars .models-list .model a .image .e {
position: absolute;
left: 0;
top: 0;
}
@media (hover: hover) {
#stock-cars .models-list .model a:hover {
background: rgba(255, 255, 255, 1);
border-color: #000000;
}
#stock-cars .models-list .model a:hover .image img {
transform: scale(1.05);
}
}
#stock-cars .models-list .model a .name {
font-weight: 400;
font-size: 1.3rem;
line-height: 1.4rem;
}
#stock-cars .models-list .model a .name span {
font-weight: bold;
}
#stock-cars .models-list .model a .price {
line-height: 1;
font-size: 2em;
}
#stock-cars .models-list .model a .price .prefix {
font-size: 0.5em;
}
#stock-cars .models-list .test-drive {
margin-top: auto;
text-align: center;
}
#stock-cars .models-list .test-drive a {
padding: 2px 0;
position: relative;
overflow: hidden;
/*font-weight: 700;*/
/*text-decoration: none;*/
color: #000000;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
#stock-cars .models-list .test-drive i,
#stock-cars .models-list .test-drive span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#stock-cars .models-list .test-drive a {
overflow: hidden;
border-radius: 3px;
-webkit-backface-visibility: hidden;
transition: color .4s;
margin: -4px -6px;
padding: 4px 6px;
}
#stock-cars .models-list .test-drive a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#stock-cars .models-list .test-drive a:hover {
color: #000000;
}
#stock-cars .models-list .test-drive a:hover::after {
content: '';
width: 120%;
}
}
@media (min-width: 520px) {
#stock-cars .models-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 720px) {
#stock-cars .models-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 920px) {
#stock-cars .models-list {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1120px) {
#stock-cars .models-list {
grid-template-columns: repeat(5, 1fr);
}
}
#stock-cars .models-list .model img {
display: block;
width: 100%;
}
#stock-cars .stock-cars-list {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 1024px) {
#stock-cars .stock-cars-list {
gap: 32px;
}
}
#stock-cars .stock-cars-list .divider {
background: #000000;
height: 2px;
}
#stock-cars .stock-cars-list .stock-car {
display: flex;
flex-direction: column;
gap: 16px;
}
#stock-cars .stock-cars-list .stock-car.disabled {
pointer-events: none;
opacity: 0.6;
}
#stock-cars .stock-cars-list .stock-car .car-info {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 768px) {
#stock-cars .stock-cars-list .stock-car .car-info {
flex-direction: row;
}
#stock-cars .stock-cars-list .stock-car .car-info .image,
#stock-cars .stock-cars-list .stock-car .car-info .data {
width: 50%;
}
}
@media (min-width: 980px) {
#stock-cars .stock-cars-list .stock-car {
flex-direction: row;
}
#stock-cars .stock-cars-list .stock-car .car-info {
flex: 1;
}
#stock-cars .stock-cars-list .stock-car .car-menu {
width: 240px;
}
}
#stock-cars .stock-cars-list .stock-car .car-info .image {
position: relative;
}
#stock-cars .stock-cars-list .stock-car .car-info .image .availability {
position: absolute;
top: 10px;
right: 10px;
font-size: 13px;
}
#stock-cars .stock-cars-list .stock-car .car-info .image .availability span {
display: block;
background: #fee440;
text-transform: uppercase;
font-weight: bold;
padding: 4px 10px;
border-radius: 2px;
color: #000000;
}
#stock-cars .stock-cars-list .stock-car .car-info .image a {
display: block;
}
#stock-cars .stock-cars-list .stock-car .car-info .image a img {
display: block;
width: 100%;
}
#stock-cars .stock-cars-list .stock-car .car-info .image a .e {
position: absolute;
left: 0;
top: 0;
}
#stock-cars .car-title {
margin-bottom: 6px;
align-items: center;
line-height: 1.1;
font-size: 1.5em;
display: flex;
gap: 16px;
}
#stock-cars .car-title .car-model {
text-transform: uppercase;
}
#stock-cars .car-title .car-equipment {
text-align: right;
text-transform: uppercase;
font-size: 0.625em;
margin-left: auto;
}
#stock-cars .car-price {
line-height: 1;
font-size: 1.875em;
padding-top: 6px;
padding-bottom: 6px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-bottom: 10px;
font-weight: bold;
}
#stock-cars .car-price .regular {
color: #7a7b7d;
position: relative;
margin-right: 6px;
}
#stock-cars .car-price .regular::before {
position: absolute;
display: block;
content: '';
background: #1a1a1a;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%) rotate(-8deg);
height: 1px;
}
#stock-cars .section-title .car-price {
margin-bottom: 0;
padding: 0 0 4px 0;
border: 0;
}
#stock-cars .section-title .car-price .regular::before {
height: 2px;
}
@media (min-width: 400px) {
#stock-cars .section-title .car-price {
font-size: 2rem;
}
}
@media (min-width: 600px) {
#stock-cars .section-title .car-price {
font-size: 2.4rem;
}
}
@media (min-width: 768px) {
#stock-cars .section-title .car-price {
font-size: 3.2rem;
}
}
@media (min-width: 1200px) {
#stock-cars .section-title .car-price {
font-size: 4.2rem;
}
}
#stock-cars .car-data ul {
display: flex;
flex-direction: column;
gap: 6px;
}
#stock-cars .car-data ul li {
display: flex;
flex-direction: column;
gap: 3px;
}
@media (min-width: 768px) {
#stock-cars .car-data ul li {
grid-template-columns: 120px 1fr;
display: grid;
}
}
#stock-cars .car-data ul li .label {
text-transform: uppercase;
font-size: 0.8125em;
font-weight: bold;
line-height: 1.4;
}
#stock-cars .car-data ul li .label::after {
content: ':'
}
#stock-cars .car-data ul li .value {
font-weight: 300;
font-size: 0.8125em;
line-height: 1.4;
}
#stock-cars .car-data ul li .value p {
margin-bottom: 6px;
}
#stock-cars .car-menu ul {
display: flex;
flex-direction: column;
gap: 6px;
}
@media (min-width: 768px) {
#stock-cars .car-menu ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px 16px;
}
}
@media (min-width: 980px) {
#stock-cars .car-menu ul {
display: flex;
}
}
#stock-cars .car-menu ul li {
display: block;
}
#stock-cars .section-title h2.stock-car-title {
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
padding: 6px 0;
margin-bottom: 6px;
margin-top: 6px;
}
#stock-cars .section-title h2.stock-car-title .equipment {
font-weight: 300;
}
#stock-cars .stock-car-profile {
display: flex;
flex-direction: column;
gap: 16px;
}
#stock-cars .stock-car-profile .image {
position: relative;
}
#stock-cars .stock-car-profile .image img {
display: block;
border-radius: 3px;
width: 100%;
}
#stock-cars .stock-car-profile .image .availability {
position: absolute;
top: 10px;
right: 10px;
font-size: 13px;
}
#stock-cars .stock-car-profile .image .availability span {
display: block;
background: #fee440;
text-transform: uppercase;
font-weight: bold;
padding: 4px 10px;
border-radius: 2px;
color: #000000;
}
#stock-cars .stock-car-profile .main-info {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 980px) {
#stock-cars .stock-car-profile .main-info {
flex-direction: row;
}
#stock-cars .stock-car-profile .main-info .data {
flex: 1;
}
#stock-cars .stock-car-profile .main-info .car-menu {
width: 240px;
}
}
#stock-cars .stock-car-profile .main-info .car-data .label,
#stock-cars .stock-car-profile .main-info .car-data .value {
font-size: 1em;
}
@media (min-width: 768px) {
#stock-cars .stock-car-profile .main-info .car-data ul li {
grid-template-columns: 160px 1fr;
display: grid;
}
}
@media (min-width: 1024px) {
#stock-cars .stock-car-profile .main-info .car-data ul li {
grid-template-columns: 180px 1fr;
display: grid;
}
#stock-cars .stock-car-profile .main-info .car-data .label,
#stock-cars .stock-car-profile .main-info .car-data .value {
font-size: 1.125em;
}
}
#stock-cars .stock-car-profile .description-title {
text-transform: uppercase;
font-weight: bold;
}
#stock-cars .stock-car-profile .car-images ul {
display: flex;
flex-direction: column;
gap: 16px;
}
#stock-cars .stock-car-profile .car-images ul li {
display: block;
}
#stock-cars .stock-car-profile .car-images ul li a {
display: block;
}
#stock-cars .stock-car-profile .car-images ul li a img {
border-radius: 3px;
display: block;
width: 100%;
}
@media (min-width: 768px) {
#stock-cars .stock-car-profile .car-images ul {
grid-template-columns: repeat(2, 1fr);
display: grid;
}
}
@media (min-width: 1024px) {
#stock-cars .stock-car-profile .car-images ul {
grid-template-columns: repeat(3, 1fr);
display: grid;
gap: 16px;
}
}
#stock-cars .stock-car-profile .car-table ul {
display: flex;
flex-direction: column;
gap: 0;
}
#stock-cars .stock-car-profile .car-table ul li {
border-bottom: 2px solid #000000;
padding-bottom: 6px;
padding-top: 6px;
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
#stock-cars .stock-car-profile .car-table ul li:first-child {
border-top: 2px solid #000000;
}
#stock-cars .stock-car-profile .car-table ul li span {
flex: 1;
}
#stock-cars .stock-car-profile .car-table ul li .label {
padding-left: 8px;
text-transform: uppercase;
font-weight: 300;
}
#stock-cars .stock-car-profile .car-table ul li .value {
padding-right: 8px;
}
#stock-cars .stock-car-profile .car-table ul li .value.line-through {
text-decoration: line-through;
}
#stock-cars .stock-car-profile .car-table ul li.gain {
background-color: #fee440;
}
#stock-cars .stock-car-profile .car-table ul li.gain .label {
}
#stock-cars .stock-car-profile .car-table ul li.gain .value {
font-weight: bold;
}
/*
* Noliktavas auto izvēlnes pogas
*/
#stock-cars .car-menu a,
#stock-cars .get-pdf a {
display: block;
position: relative;
text-decoration: none;
border: 1px solid #000000;
text-transform: uppercase;
line-height: 1;
font-family: inherit;
font-weight: bold;
padding: 12px;
border-radius: 3px;
text-align: left;
flex-grow: 1;
background: #ffffff;
color: #000000;
}
#stock-cars .car-menu a span,
#stock-cars .get-pdf a span {
position: relative;
z-index: 2;
}
#stock-cars .car-menu .black a,
#stock-cars .get-pdf.black a {
background: #000000;
color: #ffffff;
}
#stock-cars .car-menu .gray a {
background: #7f7f7f;
color: #ffffff;
}
@media (hover: hover) {
#stock-cars .car-menu a,
#stock-cars .get-pdf a {
overflow: hidden;
vertical-align: middle;
-webkit-backface-visibility: hidden;
transition: color .4s;
}
#stock-cars .car-menu a::after,
#stock-cars .get-pdf a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#stock-cars .car-menu a:hover,
#stock-cars .get-pdf a:hover {
text-decoration: underline;
color: #000000;
}
#stock-cars .car-menu a:hover,
#stock-cars .get-pdf a:hover {
cursor: pointer;
}
#stock-cars .car-menu a:hover::after,
#stock-cars .get-pdf a:hover::after {
content: '';
width: 120%;
}
}
/*
* Webshop
*/
body:has(#webshop) {
background: #f9f9f9;
line-height: 1.375rem;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
color: #000000;
}
/*body:has(#webshop) #shopping-tools {
position: relative;
}*/
#webshop .webshop-intro {
margin-bottom: 32px;
}
#webshop .webshop-content {
position: relative;
}
/*
* Shopping tools
*/
#shopping-tools {
}
#shopping-tools .shopping-tools {
width: 100%;
margin: 0 auto;
transition: background-color .2s;
-webkit-backface-visibility: hidden;
max-width: var(--max-page-width);
background-color: #000000;
color: #ffffff;
}
#shopping-tools .shopping-tools .container {
max-width: calc(1920px + var(--page-padding) * 2);
padding: 0 var(--page-padding);
}
@media (min-width: 768px) and (min-height: 420px) {
#shopping-tools {
z-index: 100;
position: sticky;
bottom: 0;
}
#shopping-tools.stuck .shopping-tools {
background-color: rgba(0, 0, 0, .64);
}
#shopping-tools.stuck:hover .shopping-tools {
background-color: rgba(0, 0, 0, .84);
}
}
.shopping-tools ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 16px 0;
}
.shopping-tools ul li {
text-align: center;
align-items: center;
flex-direction: column;
display: flex;
}
#header .shopping-tools {
padding: var(--page-padding);
}
#header .shopping-tools ul li {
background: #ffffff;
}
@media (min-width: 768px) {
#shopping-tools ul {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
#shopping-tools ul {
display: flex;
}
#shopping-tools ul li {
flex: 1 1 0px;
flex: 1 1 auto;
}
}
/*
* Shopping tools in header
*/
#header .shopping-tools ul li {
text-align: center;
align-items: stretch;
flex-direction: column;
display: flex;
}
#header .shopping-tools ul li a {
display: flex;
text-decoration: none;
flex-direction: column;
padding: 3px 4px;
line-height: 1.2;
position: relative;
color: #000000;
padding: 24px 16px;
gap: 16px;
flex: 1;
}
#header .shopping-tools ul li a i,
#header .shopping-tools ul li a span {
align-content: center;
position: relative;
z-index: 2;
}
#header .shopping-tools ul li a i {
margin-top: 2px;
font-size: 2rem;
line-height: 1;
}
#header .shopping-tools ul li a span {
font-size: 1.25rem;
}
@media (max-width: 767px) and (hover: hover) {
#header .shopping-tools ul li:hover a {
background: #fee440;
}
}
/*
* Shopping tools in footer
*/
#shopping-tools .shopping-tools ul li a {
display: flex;
text-decoration: none;
flex-direction: column;
align-self: center;
padding: 3px 4px;
line-height: 1.2;
position: relative;
color: #ffffff;
gap: 8px;
}
#shopping-tools .shopping-tools ul li a i,
#shopping-tools .shopping-tools ul li a span {
/*align-content: center;*/
align-self: center;
position: relative;
z-index: 2;
}
#shopping-tools .shopping-tools ul li a i {
margin-top: 2px;
font-size: 1.75rem;
line-height: 1;
}
@media (max-width: 767px) and (hover: hover) {
#shopping-tools .shopping-tools ul li a:hover {
color: #fee440;
}
}
@media (min-width: 768px) {
#shopping-tools .shopping-tools ul {
gap: 16px;
}
#shopping-tools .shopping-tools ul li a {
align-self: start;
flex-direction: row;
margin: -3px -5px;
}
@media (hover: hover) {
#shopping-tools .shopping-tools ul li a {
overflow: hidden;
border-radius: 3px;
-webkit-backface-visibility: hidden;
transition: color .4s;
padding: 3px 5px;
}
#shopping-tools .shopping-tools ul li a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#shopping-tools .shopping-tools ul li:nth-child(4n+1) a::after {
background-color: #ef476f;
}
#shopping-tools .shopping-tools ul li:nth-child(4n+2) a::after {
background-color: #fee440;
}
#shopping-tools .shopping-tools ul li:nth-child(4n+3) a::after {
background-color: #00bbf9;
}
#shopping-tools .shopping-tools ul li:nth-child(4n+0) a::after {
background-color: #acce31;
}
#shopping-tools .shopping-tools ul li a:hover {
color: #000000;
}
#shopping-tools .shopping-tools ul li a:hover::after {
content: '';
width: 120%;
}
}
}
@media (min-width: 1024px) {
#shopping-tools .shopping-tools ul {
gap: 32px;
}
}
@media (min-width: 1200px) {
#shopping-tools .shopping-tools ul {
display: inline-flex;
}
}
/*
* Footer
*/
#footer {
width: 100%;
margin: 0 auto;
-webkit-backface-visibility: hidden;
max-width: var(--max-page-width);
background: #000000;
color: #ffffff;
}
#footer .container {
max-width: calc(1920px + var(--page-padding) * 2);
padding: 0 var(--page-padding);
}
#footer .sitemap {
border-top: 1px solid #333333;
padding: 16px 0;
}
#footer .sitemap .sitemap-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
}
#footer .sitemap .sitemap-name {
font-size: 1.5rem;
line-height: 2rem;
}
#footer .sitemap .sitemap-name button {
display: flex;
cursor: pointer;
justify-content: space-between;
align-items: center;
position: relative;
text-decoration: none;
border: none;
text-align: left;
vertical-align: middle;
background: transparent;
line-height: inherit;
font-family: inherit;
font-size: inherit;
color: #ffffff;
padding: 0;
width: 100%;
}
#footer .sitemap .sitemap-name button::after {
content: '\e954';
vertical-align: middle;
font-family: 'Fiat Icons';
font-size: 1rem;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 1;
}
#footer .sitemap .toggled .sitemap-name button::after {
content: '\e951';
}
#footer .sitemap .sitemap-list {
display: none;
}
@media (min-width: 768px) {
#footer .sitemap .sitemap-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
#footer .sitemap .sitemap-name button::after {
display: none;
}
#footer .sitemap .sitemap-list {
display: block;
}
}
#footer .sitemap ul {
display: flex;
flex-direction: column;
gap: 4px;
}
#footer .sitemap ul li {
display: block;
line-height: 0;
font-size: 0;
}
#footer .sitemap ul li a {
color: inherit;
display: inline-block;
text-decoration: none;
padding: 3px 4px;
position: relative;
margin: -1px -4px;
line-height: 1.375rem;
font-size: .875rem;
}
#footer .sitemap ul li a span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#footer .sitemap ul li a {
overflow: hidden;
border-radius: 3px;
-webkit-backface-visibility: hidden;
transition: color .4s;
padding: 1px 4px;
}
#footer .sitemap ul li a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#footer .sitemap ul li a:hover {
color: #000000;
}
#footer .sitemap ul li a:hover::after {
content: '';
width: 120%;
}
}
#footer .contacts-changes {
border-top: 1px solid #333333;
padding: 16px 0;
}
#footer .social-links {
border-top: 1px solid #333333;
padding: 16px 0;
}
#footer .social-links .social-links-container {
display: flex;
}
@media (min-width: 768px) {
#footer .social-links .social-links-container {
place-content: flex-end;
margin-right: -8px;
}
}
#footer .social-links .social-links-container > div {
flex: 0 1 auto;
margin-right: 16px;
/*align-content: center;*/
align-self: center;
font-size: 1.3125rem;
font-weight: 800;
}
#footer .social-links .social-links-container a {
flex: 0 1 auto;
border-radius: 3px;
transition: background-color .4s, color .4s;
text-decoration: none;
padding: 8px;
display: block;
color: #ffffff;
}
#footer .social-links .social-links-container a span {
display: block;
font-size: 24px;
}
@media (hover: hover) {
#footer .social-links .social-links-container a:hover {
background-color: #fee440;
color: #000;
}
}
#footer .used-cars-consultants {
border-top: 1px solid #333333;
padding: 30px 0;
}
#footer .consultants-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
#footer .consultants-title {
margin-bottom: 8px;
line-height: 1.1;
}
#footer .consultants-list .consultant {
display: flex;
gap: 10px;
}
#footer .consultants-list .consultant .left {
width: 80px;
}
#footer .consultants-list .consultant .left img {
display: block;
aspect-ratio: 2 / 3;
width: 100%;
}
#footer .consultants-list .consultant .right {
display: flex;
flex-direction: column;
gap: 10px;
width: 198px;
}
#footer .consultants-list .consultant .right .name {
line-height: 1.1;
font-weight: bold;
font-size: 1.2em;
}
#footer .consultants-list .consultant .right .phones {
flex-grow: 1;
align-content: center;
line-height: 1.1;
font-size: 0.9em;
}
#footer .consultants-list .consultant .right .phones a {
text-decoration: none;
color: inherit;
font-weight: bold;
}
#footer .consultants-list .consultant .right .btn {
margin-top: auto;
line-height: 1.1;
}
#footer .consultants-list .consultant .right .btn a {
display: block;
position: relative;
text-decoration: none;
line-height: 1;
font-weight: bold;
font-size: 0.8em;
background: #fee440;
color: #000000;
padding: 6px 10px;
border-radius: 3px;
text-align: center;
flex-grow: 1;
}
#footer .consultants-list .consultant .right .btn a span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#footer .consultants-list .consultant .right .btn a:hover {
text-decoration: underline;
}
}
#footer .consultants-title::after,
#footer .consultants-list .phones span::after {
content: ':';
}
#footer .footer-links {
border-top: 1px solid #333333;
padding: 30px 0;
}
#footer .footer-links ul {
display: block;
}
#footer .footer-links ul li {
display: inline-block;
vertical-align: middle;
font-size: .875rem;
}
#footer .footer-links ul li.separator {
display: inline-block;
padding: 0 10px;
}
#footer .footer-links ul li a {
color: inherit;
display: block;
padding: 3px 4px;
position: relative;
margin: -1px -4px;
}
#footer .footer-links ul li a span {
position: relative;
z-index: 2;
}
@media (hover: hover) {
#footer .footer-links ul li a {
overflow: hidden;
border-radius: 3px;
-webkit-backface-visibility: hidden;
transition: color .4s;
padding: 1px 4px;
}
#footer .footer-links ul li a::after {
content: '';
z-index: 1;
overflow: hidden;
position: absolute;
background-color: #fee440;
transform: skew(-24deg);
transition: width .4s;
height: 100%;
width: 0%;
left: -10%;
top: 0;
}
#footer .footer-links ul li a:hover {
color: #000000;
}
#footer .footer-links ul li a:hover::after {
content: '';
width: 120%;
}
}