:root {}

.f-carousel {

    --f-button-next-pos: 30px;
    --f-button-prev-pos: 30px;

    --f-button-color: #fff;
    --f-button-hover-color: #fff;
    --f-button-active-color: #fff;

    --f-button-bg: rgba(0, 0, 0, 0.5);
    --f-button-hover-bg: rgba(0, 0, 0, 0.8);
    --f-button-active-bg: rgba(0, 0, 0, 0.8);

    --f-button-width: 32px;
    --f-button-height: 32px;
    --f-button-border-radius: 50%;

    --f-button-svg-width: 22px;
    --f-button-svg-height: 22px;
    --f-button-svg-stroke-width: 2;

    --f-carousel-dots-width: 8px;
    --f-carousel-dots-height: 8px;
    --f-carousel-dot-radius: 0;
}

@media (min-width: 80rem) {
    .f-carousel {
        --f-button-width: 42px;
        --f-button-height: 42px;
    }
}

.f-carousel__dots li {
    margin: 2px;
}

.f-carousel__dots li button {
    border-radius: 0px;
    background: rgb(6 6 6 / 46%);
}



.f-carousel .f-carousel__dots {
    bottom: -15px;
    display: flex;
    grid-gap: 5px;
}

.f-carousel .f-carousel__dot {
    --border-width: 1px;
    border: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--border-o, 1));
}



/******
** Карусель на главную proizvodim
******/

#myCarouselProizvodim {
    --f-carousel-slide-width: calc(100% / 1);
    --f-carousel-spacing: 0;
}

#myCarouselProizvodim .f-carousel__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 0% 10px;
    opacity: var(--f-opacity);
}

#myCarouselProizvodim .f-carousel__slide-items {
    border-radius: 0%;
    transform: none;
}

@media (min-width: 80rem) {

    /*\@lg*/
    #myCarouselProizvodim {
        --f-carousel-slide-width: calc(94% / 3);
    }

    #myCarouselProizvodim .f-carousel__slide {
        padding: 3% 10px;
    }

    #myCarouselProizvodim .f-carousel__slide-items {
        transform: scale(var(--f-scale, 1)) translateX(var(--f-translateX, 0));
    }
}

/******
** Карусель наши работы
******/

#CarouselNashiRaboty {
    --f-carousel-slide-width: calc((90% - (var(--space-sm) * 1)) / 2);
    --f-carousel-spacing: var(--space-sm);
    --f-carousel-slide-padding: 0 1rem;

    --f-button-prev-pos: 5rem;
    --f-button-next-pos: 5rem;

    --f-carousel-slide-padding: 0px;

    --f-button-prev-pos: 1rem;
    --f-button-next-pos: 1rem;


    --f-button-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

    --f-carousel-dots-width: 8px;
    --f-carousel-dots-height: 8px;
}

@media (min-width: 64rem) {

    /*\@md*/
    #CarouselNashiRaboty {
        --f-carousel-slide-width: calc((100% - (var(--space-sm) * 3)) / 4);
    }
}

#CarouselNashiRaboty .f-carousel__dots li {
    margin: 2px;
}






/******
** Карусель на главную
******/

#CarouselSlider {
    --f-carousel-slide-width: calc(100% / 1);
    --f-carousel-spacing: 0.625rem;
    --f-carousel-slide-padding: 0 1rem;
    --f-carousel-slide-padding: 0px;

    --f-button-prev-pos: 1rem;
    --f-button-next-pos: 1rem;


    --f-button-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

    --f-carousel-dots-width: 8px;
    --f-carousel-dots-height: 8px;
    --f-carousel-dot-width: 0px;
    --f-carousel-dot-height: 0px;
}

@media (min-width: 64rem) {

    /*\@md*/
    #CarouselSlider {
        --f-carousel-slide-width: calc(100% / 1);
    }
}