:root {
    --blue_main: #0058a7;
    --blue_main-transparent: #0058a7aa;
    --blue_hover: #326999;
    --grey: #888a;
    --card-bg: #f7f7f7;
    --card-bg-transparent: #f7f7f7aa;
}

.col-1_5 {
    max-width: 11.333333%;
    flex: 0 0 11.333333%;
}

.typesCard {
    /* border: 1px solid #999; */
    box-shadow: 5px 5px 15px var(--grey);
    border-radius: 20px;
    /* padding: 70px 0; */
    /* height: 15em; */
}

.typesCard:hover {
    /* border: 1px solid #0058a7; */
    box-shadow: 5px 5px 15px var(--blue_main-transparent);
    transform: scale(1.1);
    transition: 0.3s linear;
}

.cardTires {
    visibility: visible;
    position: absolute;
    transform: scaleY(0);
}

#SVGID_1_ {
    position: relative;
    width: 50px;
    height: 50px;
}

.visibleCard {
    visibility: visible;
    position: relative;
    transform: scaleY(1);
    animation: fold 0.3s both;
}

.blue path {
    fill: var(--blue_main);
    width: 200px;
}

.svg_image {
    position: relative;
}

.cardCar {
    background-image: url(/img/manufacturerpages/starmaxx/home-bg.jpg.webp);
    background-size: cover;
    z-index: 0;
}

.cardTruck {
    background-image: url(/img/manufacturerpages/starmaxx/linear-shadow-bg.jpg);
    background-size: cover;

    z-index: 0;
}

.cardIndustrial {
    background-image: url(/img/manufacturerpages/starmaxx/mud_bg.jpg);
    background-size: cover;
    z-index: 0;
}

.cardOTR {
    background-image: url(/img/manufacturerpages/starmaxx/sand_texture.jpg);
    background-size: cover;
    z-index: 0;
}

.cardLift {
    background-image: url(/img/manufacturerpages/starmaxx/black_texture.jpg);
    z-index: 0;
}

.cardUni {
    background-image: url(/img/manufacturerpages/starmaxx/sand-bg.jpg);
    background-size: cover;
    z-index: 0;
}

.cardDelivery {
    background-image: url(/img/manufacturerpages/starmaxx/deliveryBg.png);
    background-size: cover;
    z-index: 0;
}

.carusel {
    position: relative;
    transition: 0.4s linear;
}

.paginationItem {
    width: 40px;
    height: 5px;
    border: 1px solid #fff;
    border-radius: 5px;
    margin: 20px 10px;
    cursor: pointer;
}

.deliveryVanIcon {
    display: block;
    margin: auto;
    width: 100%;
    height: 80px;
    fill: #7f8285;
}

.del .paginationItem_active {
    background-color: #fff;
}

.pagination {
    width: 100%;
    display: flex;
    justify-content: center;
}

.carusel_item {
    width: 100%;
    transition: 0.4s linear;
    /* transform: translateX(-96%); */
}

.close_btn {
    position: absolute;
    display: none;
    z-index: 3;
    width: 30px;
    height: 30px;
    margin-left: 95%;
    margin-top: 0.5%;
    cursor: pointer;

    /* background-color: #000; */
}

.close_btn:hover {
    transform: scale(1.1);
    transition: transform 0.3s linear;
}

.title_starmax {
    background-color: var(--blue_main);
    border-radius: 0 0 10px 0;
    width: fit-content;
    box-shadow: 5px 5px 15px #000a;
}

.reverse_animation {
    animation: fold reverse 0.3s linear;
}

.title_bar {
    background-color: var(--card-bg);
    /* width: 102%; */
    box-shadow: 5px 5px 25px #000;
}

.card_holder {
    overflow: hidden;
}

.list-arrow::before {
    box-shadow: 5px 5px 15px #000a;
    content: "";
    background-color: aliceblue;
    border-radius: 50%;
    margin: 0 50px;
    background-image: url(/img/manufacturerpages/starmaxx/arrow.png);
    background-position: center;
    background-size: cover;
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.border_bottom {
    border-bottom: 1px solid var(--grey);
}

.seasons_bg {
    background-color: #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 5px 5px 15px #000a;
}

.models {
    background-color: var(--card-bg-transparent);
    backdrop-filter: blur(5px);
    margin-right: -15px;
    margin-left: -15px;
}

.tires_box:hover {
    background-color: #fffa;
    border-radius: 20px;
    transform: scale(1.1);
    transition: 0.3s linear;
}

.btn-danger {
    background-color: var(--blue_main);
    border-color: var(--blue_main);
}

.btn-danger:hover {
    background-color: var(--blue_hover);
    border-color: var(--blue_hover);
}

.bannerosobowe {
    background-position: center;
}

@keyframes fold {
    from {
        transform: translateY(-100%);
        visibility: hidden;
    }

    to {
        transform: translateY(0%);
        visibility: visible;
    }
}

@media (min-width: 700px) {
    .col-md-1_5 {
        max-width: 11.333333%;
        flex: 0 0 11.333333%;
    }
}

@media (max-width: 767px) {
    .close_btn {
        margin-left: 90%;
        margin-top: 2%;
    }
}