:root {
    --font1: 'Rubik', sans-serif;
    --color1: #fff;
    --color2: #000000;
    --color3: #5b5b5b;
    --color4: #161515;
    --color5: #3ceee2;
    --color6: #00ffee90;
    --borderRadius-mini: 10px;
    --borderRadius-max: 14px;
}

#main_slider {
    position: relative;
    width: 100%;
    float: left;
    background: url(/design/img/index/bg.jpg);
    background-size: cover;
    background-position: center;
}

#we_social a svg {
    fill: var(--color6);
}

body,
h1,
h2,
h3,
h4,
h5,
p,
b,
ul,
li,
span,
input,
label,
select,
a,
.btn,
.title,
.sub_title,
.contact_item,
.footer_item,
.car-catalog-entry-label.bonus-4 {
    font-family: var(--font1) !important;
}

.car-catalog-entry-label.bonus-4 {
    font-size: 10px;
    text-align:center;
    padding: 5px;
    opacity: 0.85;
}

/* !1 */
.btn:hover,
#application_form .form_control input,
#car_extras h4,
#car-newest-entries a,
#car-related #car-newest-entries a,
#top_nav .wrapper ul .btn,
#contact_application.popup .wrapper {
    background-color: var(--color1);
}

#car_extras .entry ul li i,
#top_nav .wrapper ul,
#top_nav .wrapper ul li,
#top_nav .wrapper a,
#bot_nav .wrapper ul li a,
#car_right #car_price s,
#burger,
#car_right .header .bonus,
#application .checkbox_wrapper p a,
#top_nav .wrapper ul .btn:hover,
#main_slider-wrapper a:hover,
#car_right #car_price,
#car_text,
#car_extras .entry h5,
.filter__item select {
    color: var(--color1);
}

.fotorama__thumb-border,
#top_nav .wrapper a:hover {
    border-color: var(--color1);
}

#car-newest-entries a:hover {
    box-shadow: unset;
    scale: 1.05;
    opacity: 0.7;
}


/* ?2 */
#wor_up,
#top_nav,
#sub_footer,
.noUi-connect,
.filter__item-sort,
.filter__item input[type="text"],
#car_details,
#application,
.filter__item-sort select,
.filter__item-check label:before,
#top_nav .wrapper ul .btn:hover,
.noUi-horizontal .noUi-handle,
footer {
    background-color: var(--color2);
}

.btn:hover,
#top_nav .wrapper ul .btn,
#bot_nav .wrapper ul li,
#bot_nav .wrapper ul li i,
.car-catalog-info .car-catalog-entry-loan,
#contact_application .application_marketing,
.filter__item input,
.filter__item input::placeholder,
.filter__item label,
.filter__item p,
.car-catalog-info .car-catalog-name,
.car-catalog-info ul li,
#car-related #car-newest-entries .car-catalog-info ul li {
    color: var(--color2);
}

/* *3 */
#application_form,
#charging_stations-txt,
#filters,
.fotorama__wrap--css3 .fotorama__stage {
    background-color: var(--color3);
}

.btn,
#car_detail,
.sub_title,
#contact_application .application_marketing a {
    color: var(--color3);
}

#delivery_partner,
#teams,
#filters,
#gallery,
#car_right,
#car-related {
    background-color: var(--color3);
}

#contact_application .application_marketing a {
    border-color: var(--color3);
}

/* 4 */
body,
#welcome,
#car_loan,
#services {
    background-color: var(--color4);
}

#application_form_button {
    color: var(--color4);
}

/* 5 */

.noUi-connect,
.btn,
.car-catalog-info .car-catalog-entry-loan,
#listing #more_auto div,
#main_slider-wrapper a:hover,
.filter__item-sort.active,
.filter__item-sort.active select {
    background-color: var(--color5);
}

.footer_item-title,
#application_form_button,
.team_items-item .item-info b,
.title,
#main_slider-wrapper h1,
#services_content .step b,
#filters #filter-slider-price #price_from_to input {
    color: var(--color5);
}

#car_extras,
#main_slider-wrapper a:hover {
    border-color: var(--color3);
}

/* 6 */

#we_social b,
#main_slider-wrapper a,

#application .checkbox_wrapper {
    background-color: var(--color6);
}

#car_right .header #links .facebook i,
#we_social,
#we_social i,
.footer_item ul li,
.footer_item ul as,
#car_extras .entry ul li,
#team_txt-right p,
.team_items-item .item-info p,
.team_items-item .item-info a,
#team_txt-left p,
#services_content .step p,
.footer_item ul a,
.footer_item ul p,
#bot_nav .wrapper ul li a:hover {
    color: var(--color6);
}

#bot_nav .wrapper ul li a:hover,
#services_content .step {
    border-color: var(--color6);
}


/* WHITE */
#car_details,
#main_slider-wrapper h2 {
    color: #fff;
}

.car-catalog-info .car-catalog-entry-price {
    background-color: white;
}

/* BLACK */
.btn,
.car-catalog-info .car-catalog-entry-price {
    color: #000;
}

/* BORDER RADIUS MINI */
#car_right,
#car_loan,
#application_form,
#application_form .form_control input,
#car_details,
.fotorama__stage,
#wor_up,
.btn,
.policy.popup .wrapper,
.filter__item input[type="text"],
.filter__item-sort,
#main_slider-wrapper a,
#car-newest-entries a,
.car-catalog-entry-img,
.car-catalog-info .car-catalog-entry-price,
.car-catalog-info .car-catalog-entry-loan {
    border-radius: var(--borderRadius-mini);
}

.car-catalog-entry-img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#bot_nav {
    backdrop-filter: blur(50px);
}

#application_form_button,
#charging_stations-txt {
    border-radius: 0 var(--borderRadius-mini) var(--borderRadius-mini) 0px;
}

/* BORDER RADIUS MAX */
.fotorama__wrap--css3 .fotorama__stage,
.fotorama__thumb-border,
.fotorama__thumb,
.contact_item,
#filters,
#welcome_content .step {
    border-radius: var(--borderRadius-max);
}

.car-catalog-info .car-catalog-price {
    justify-content: space-around;
}

.filter__item input[type="number"] {
    background-color: var(--color2);
    border: none;
    border-radius: var(--borderRadius-mini);
    padding: 5px 15px;
}

#main_slider-wrapper {
    padding: 60px 10px;
    gap: 15px;
}

#main_slider-wrapper h1,
#main_slider-wrapper h2 {
    letter-spacing: 0;
}

#main_slider-wrapper h2 {
    margin-bottom:50px;
    font-size: 45px;
}

#main_slider-wrapper a {
    padding:15px 30px;
    letter-spacing: 0;
    border:unset;
}

#services_content {
    margin-top: 40px;
}

#services_content .step {
    border-width: 1px;
}

#delivery_partner,
#teams,
#top_nav .wrapper ul .btn,
#navigation_rent,
.footer_item:nth-of-type(4),
.footer_item:nth-of-type(5) {
    display: none;
}

@media screen and (min-width: 900px) {
    .car-catalog-entry-label.bonus-4 {
        font-size: 12px;
    }
    
    footer #footer_content {
        grid-template-columns: repeat(3, 1fr);
    }
}

@keyframes discount-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--color5);
    }

    80% {
        box-shadow: 0 0 0 10px #ffffff00;
    }

    100% {
        box-shadow: 0 0 0 0 #ffffff00;
    }
}