:root {
    --f-carousel-dots-position: absolute;
    --f-carousel-dots-top: calc(100% - 60px);
    --f-carousel-dots-bottom: auto;
    --f-carousel-dots-width: 14px;
    --f-carousel-dots-height: 14px;
    --f-carousel-dots-z-index: 3;
    --f-carousel-dot-width: 8px;
    --f-carousel-dot-height: 8px;
    --f-carousel-dot-border-radius: 100%;
    --f-carousel-dot-bg: #353535;
    --f-carousel-dot-hover-bg: #fff;
    --f-carousel-dot-selected-bg: #fff;
    --f-carousel-dot-opacity: 1;
    --f-carousel-dot-hover-opacity: 1;
    --f-carousel-dot-selected-opacity: 1;
    --f-carousel-dot-transition: all .25s ease;
}

.f-carousel.has-dots {
    margin-bottom: var(--f-carousel-dots-height)
}

.f-carousel__dots {
    position: var(--f-carousel-dots-position);
    top: var(--f-carousel-dots-top);
    right: 13%;
    bottom: var(--f-carousel-dots-bottom);
    left: auto;
    z-index: var(--f-carousel-dots-z-index);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--f-carousel-dots-gap, 0)
}

.in-fullscreen-mode>.f-carousel__dots,
.in-expanded-mode>.f-carousel__dots {
    top: auto;
    bottom: 0
}

.f-carousel__dot {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: var(--f-carousel-dots-width);
    height: var(--f-carousel-dots-height);
    opacity: var(--f-carousel-dot-opacity);
    border: 0;
    color: currentColor;
    background-color: transparent;
    transition: var(--f-carousel-dot-transition)
}

.f-carousel__dot:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    width: var(--f-carousel-dot-width);
    height: var(--f-carousel-dot-height);
    background-color: var(--f-carousel-dot-bg);
    border-radius: var(--f-carousel-dot-border-radius);
    transition: inherit;
}

.f-carousel__dot:hover {
    cursor: pointer;
    opacity: var(--f-carousel-dot-hover-opacity)
}

.f-carousel__dot:hover:after {
    background-color: var(--f-carousel-dot-hover-bg);
    border-color: #000;
}

.f-carousel__dot[aria-current] {
    opacity: var(--f-carousel-dot-selected-opacity, 1);
}

.f-carousel__dot[aria-current]:after {
    background-color: var(--f-carousel-dot-selected-bg);

    border-color: none;
}

.f-carousel__dot.small:after {
    transform: translate(-50%, -50%) scale(.65)
}

.f-carousel__dot.micro:after {
    transform: translate(-50%, -50%) scale(.34)
}

.f-carousel__dot.hidden {
    width: 0
}

.f-carousel__dot.hidden:after {
    transform: translate(-50%, -50%) scale(0)
}

.f-carousel__dot:first-child.active,
.f-carousel__dot:first-child.padd {
    margin-left: calc(var(--f-carousel-dots-width) * 2)
}

.f-carousel__dot:first-child.small {
    margin-left: calc(var(--f-carousel-dots-width) * 1)
}

@media screen and (max-width: 991px){
    .f-carousel__dots {
        right: 0;
        left: 0;
    }

}
@media screen and (max-width: 575px){
	:root{
	   

        --f-carousel-dots-top: 45%;
	}
}