*{
    --swiper-pagination-bullet-inactive-opacity:0.7;
    --swiper-pagination-bullet-inactive-color:#fff;
}
.galleryContainer {
    z-index: 120;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
    /* transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1) !important;
    transition-duration: 1s !important; */
}
.galleryButtonClose{
    top:calc(10px + var(--headerHeight)) !important;
}
.buttonGalleryNext, .buttonGalleryPrev, .galleryButtonCLose{
    transition: transform 0.5s 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}
.galleryContainer.hidden .galleryButtonCLose{
    transform: translateY(-500px) !important;
}
.galleryContainer.hidden .buttonGalleryNext{
    transform: translateX(100px) !important;
}
.galleryContainer.hidden .buttonGalleryPrev{
    transform: translateX(-100px) !important;
}

.galleryContainer.hidden .gallery {
    opacity: 0;
}

.gallery {
    transition: opacity 0.5s ease-in-out;
    width: 100%;
    height: 100%;
    background-color: #000000a0;
    backdrop-filter: blur(5px);
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-image {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.slide-container {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}

.slide-caption {
    width: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%) !important;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    color: var(--colorWhite);
    padding: 30px 0;
}

.buttonGalleryNext,
.buttonGalleryPrev {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: all;
}

.buttonGalleryPrev {
    left: 10px;
    right: auto;
}

.iconNext {
    background-image: var(--iconNext);
}

.iconPrev {
    background-image: var(--iconPrev);
}

.swiper-button-prev,
.swiper-button-next {
    display: none;
}

.swiper-pagination-bullet-active {
    background: var(--colorRed);
    box-shadow: 0 0 0 2px #ffffff;
}

@media (max-width: 768px) {
    .slide-caption {
        bottom: 10px;
    }
}