/* HTML */

.f-none {
    display: none;
}

.f-html {
    --f-html-padding: 20px;
}

.f-html {
    border-radius: 10px;
}

/* SLIDER */

.slider {
    position: relative;
}

.slider .f-carousel {
    --f-carousel-gap: 20px;
    --f-carousel-slide-width: 60%;
    --f-carousel-slide-max-width: 80%;
    --f-carousel-slide-padding: 0;
    --f-carousel-slide-bg: none;
    --f-carousel-dots-position: 'absolute';
}

.slider .f-carousel {
    height: auto;
}

.slider .f-carousel .shortstory {
    height: 100%;
}

    /* CAROUSEL */

.f-carousel {
    --f-carousel-gap: 10px;
    --f-carousel-slide-width: max-content;
    --f-carousel-slide-max-width: 80%;
    --f-carousel-slide-padding: 0;
    --f-carousel-slide-bg: #eee;
    --f-carousel-dots-position: 'absolute';
}

.f-carousel {
    height: 400px
}

@media screen and (max-width: 600px) {
    .f-carousel {
        height: 260px
    }
}

.f-carousel.is-single {
    background-color: var(--f-carousel-slide-bg);
}

/* buttons */
.f-carousel .f-button.is-arrow {
    background-color: rgba(105, 105, 105, 0.8);
    color: white !important;
    font-size: 1.25rem;
    width: 36px;
    height: 60px;
    margin: 10px;
    border-radius: 10px;
}

.f-carousel .f-button[aria-disabled] {
    cursor: default;
    color: white !important;
    display: none;
}

.f-carousel .f-button.is-arrow.is-prev {
    /*border-radius: 0 10px 10px 0;*/
}

.f-carousel .f-button.is-arrow.is-next {
    /*border-radius: 10px 0 0 10px;*/
}

/* DOTS */

.f-carousel .f-carousel__dots {
    gap: 5px;
    padding: 10px;
}

.f-carousel .dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background-color: dimgray;
}

/* THUMBS */

div.xfieldimagegallery .f-thumbs {
    --f-thumbs-gap: 10px;
    --f-thumb-width: 120px;
    --f-thumbs-padding-x: 10px;
    --f-thumbs-padding-y: 0px;
    --f-thumbs-margin: 0;
    --f-thumb-img-fit: cover;
    --f-thumb-selected-shadow: none;
    --f-thumb-selected-opacity: 1;
    --f-thumb-opacity: 0.8;
    --f-thumb-selected-border: 4px solid dimgray; /* main color */
}

/* FIX */

.fancybox__container .f-counter span {
    line-height: var(--f-button-height);
}