/*************************************************
partfileimagegallery-2.10
*************************************************/

/* config */
.partContentFileImageGallery {
    --partContentFileImageGalleryMargin: 25px;
}

main .partContentFileImageGallery.single {
    margin-bottom: var(--partContentFileImageGalleryMargin);	
}

.partContentFileImageGallery.single {
    width: 100%; /* prevents that the image is not shown when the parent is display:flex or float is applied */
}

.partContentFileImageGallery.multiple {
    margin-bottom: 0;
}

@media screen and (max-width: 480px){
    .partContentFileImageGallery.multiple {
        --partContentFileImageGalleryMargin: calc(var(--partContentMargin) / 2);
    }

    .partContentFileImageGallery.multiple {
        padding-bottom: var(--partContentFileImageGalleryMargin);
    }
}

/* fundementals */
.partContentFileImageGallery figure {
    margin:0;
    max-width: 100%; /* responsive */
}

    .partContentFileImageGallery figure > a {
        display: block;
    }

        .partContentFileImageGallery figure > a[data-partpopup-slide-id] {
            cursor: zoom-in;
        }

    .partContentFileImageGallery figure .imagePlaceholderContainer {
        position: relative;
        overflow: hidden;
    }

        /* image placeholder */
        .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {
            /* padding-bottom is calculated and set by back-end except when you use external images */
        }

        .partContentFileImageGallery figure .imagePlaceholderContainer picture {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

            .partContentFileImageGallery figure .imagePlaceholderContainer img {
                width: 100%;
                height:100%;
                object-fit: cover;
            }

    .partContentFileImageGallery figure figcaption {
        text-align: center;
        font-size: 0.7777777778em;
        line-height: 1.4em;
        margin-top: 6.25px;
        margin-top: calc(var(--partContentFileImageGalleryMargin) / 4);
    } 

        .partContentFileImageGallery figure figcaption a {
            color: inherit;
        } 

/* mulitple images */

    /* images in a row */
    .partContentFileImageGallery.imagesInRow .contentFileImageContainer {
        display: flex; 
        flex-wrap: wrap; 
        margin-left: -12.5px; /* fall back */ 
        margin-left: calc(-1 * var(--partContentFileImageGalleryMargin) / 2); /* * -1 makes it a negative value */
        margin-right: -12.5px; /* fall back */ 
        margin-right: calc(-1 * var(--partContentFileImageGalleryMargin) / 2); /* * -1 makes it a negative value */
    }

        .partContentFileImageGallery.imagesInRow .contentFileImageContainer .contentFileImage {
            margin-left: 12.5px; /* fall back */ 
            margin-left: calc(var(--partContentFileImageGalleryMargin) / 2);
            margin-right: 12.5px; /* fall back */ 
            margin-right: calc(var(--partContentFileImageGalleryMargin) / 2);
            margin-bottom: 25px; /* fall back */ 
            margin-bottom: var(--partContentFileImageGalleryMargin);
        }

    /* images in a row with set width */
    .partContentFileImageGallery.imagesInRow1 .contentFileImage {width: calc(100% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow1 .contentFileImage {width: calc(100% - var(--partContentFileImageGalleryMargin));}
    .partContentFileImageGallery.imagesInRow2 .contentFileImage {width: calc(50% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow2 .contentFileImage {width: calc(50% - var(--partContentFileImageGalleryMargin));}
    .partContentFileImageGallery.imagesInRow3 .contentFileImage {width: calc(33.3333333333% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow3 .contentFileImage {width: calc(33.3333333333% - var(--partContentFileImageGalleryMargin));}
    .partContentFileImageGallery.imagesInRow4 .contentFileImage {width: calc(25% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow4 .contentFileImage {width: calc(25% - var(--partContentFileImageGalleryMargin));}
    .partContentFileImageGallery.imagesInRow5 .contentFileImage {width: calc(20% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow5 .contentFileImage {width: calc(20% - var(--partContentFileImageGalleryMargin));}
    .partContentFileImageGallery.imagesInRow6 .contentFileImage {width: calc(16.6666666667% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow6 .contentFileImage {width: calc(16.6666666667% - var(--partContentFileImageGalleryMargin));}

/* responsive */
@media screen and (max-width: 767px){
    .partContentFileImageGallery.imagesInRow6 .contentFileImage {width: calc(20% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow6 .contentFileImage {width: calc(20% - var(--partContentFileImageGalleryMargin));}
    .partContentFileImageGallery.imagesInRow5 .contentFileImage {width: calc(25% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow5 .contentFileImage {width: calc(25% - var(--partContentFileImageGalleryMargin));}
    .partContentFileImageGallery.imagesInRow4 .contentFileImage {width: calc(33.3333333333% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow4 .contentFileImage {width: calc(33.3333333333% - var(--partContentFileImageGalleryMargin));}
}

@media screen and (max-width: 667px){
    .partContentFileImageGallery.imagesInRow6 .contentFileImage {width: calc(25% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow6 .contentFileImage {width: calc(25% - var(--partContentFileImageGalleryMargin));}
    .partContentFileImageGallery.imagesInRow5 .contentFileImage {width: calc(33.3333333333% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow5 .contentFileImage {width: calc(33.3333333333% - var(--partContentFileImageGalleryMargin));}
    .partContentFileImageGallery.imagesInRow4 .contentFileImage, .partContentFileImageGallery.imagesInRow3 .contentFileImage {width: calc(50% - 25px);} /* fall back */
    .partContentFileImageGallery.imagesInRow4 .contentFileImage, .partContentFileImageGallery.imagesInRow3 .contentFileImage {width: calc(50% - var(--partContentFileImageGalleryMargin));}
}

/* center align */
.partContentFileImageGallery.centerAlign .contentFileImage {
    display:flex; justify-content: center; align-items: center;
}
   
    .partContentFileImageGallery.centerAlign .contentFileImage figure {
        width: 100%; /*  fallback for the combination centerAlign = true and ThumbnailFrontEndForcedMaximalWidth = false, for external images there is no ThumbnailFrontEndForcedMaximalWidth option  */
    }

        .partContentFileImageGallery.centerAlign figure .imagePlaceholderContainer img {
            object-fit: contain; /* do not use object-fit: cover for logos/icons, cuts off pixels */
        }   

/* external images */
.partContentFileImageGallery.external figure picture {
    display: block;
}

    .partContentFileImageGallery.external figure picture img {
        display: block; max-width: 100%; /* prevents external image getting bigger than the container */ 
    }

    .partContentFileImageGallery.external.centerAlign figure picture img {
        margin-left: auto; margin-right: auto; /* fixes an issue related to width:100% on the figure element */
    }

/* blur effect on load */
.partContentFileImageGallery figure .imagePlaceholderContainer img.lazyload.blurOnLoad, .partContentFileImageGallery figure .imagePlaceholderContainer img.lazyloading.blurOnLoad {
    opacity: 0;
    filter: blur(25px);
    transition: opacity 400ms;
}

.partContentFileImageGallery figure .imagePlaceholderContainer img.lazyloading.blurOnLoad {
    opacity: 1;
}

    /* when loaded animate blur to 0 */
    .partContentFileImageGallery figure .imagePlaceholderContainer img.lazyloaded.blurOnLoad {
        filter: blur(0);
        transition: filter 400ms;    
    } 

    /* disabled animation when image is cashed */
    .partContentFileImageGallery figure .imagePlaceholderContainer img.ls-is-cached.blurOnLoad {
        transition: filter 0ms;    
    }