/* <a data-fancybox='gallery' href='<?=$path?>'><div class='<?=$css?>' style='background-image:url(<?=$path?>)'></div></a>
<div class="img-back-50 rounded-circle border-grey-mid border-1 ml-2" style="background-image:url(<?=$user->getCheminPhoto()?>)"></div>
 */
/* ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥ IMAGE ♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥ */
.borderImage
{
    overflow:hidden;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    -ms-border-radius: 5%;
    -o-border-radius: 5%;
    border-radius: 5%;
    border: 1px solid rgba(255,255,255,0.6);
    margin: 0px 0px;
    padding: 0px 0px;
}
.roundedImage
{
    overflow:hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.6);
    display: flex;
    justify-content: flex-end;
    margin: 0px 0px;
    padding: 0px 0px;
}
.roundedImage img
{
    margin: 0px 0px;
    padding: 0px 0px;
}

.img-back-allH-450L
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 450px;
    height: 100%;
}


.img-back-450H-allL
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 450px;
}

.img-back-400H-allL
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 400px;
}

.img-back-300H-allL
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
}

.img-back-200H-allL
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
}
.img-back-100H-allL
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
}
.img-back-80H-allL
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 80px;
}
.img-back-50H-allL
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 50px;
}
.img-back-200
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
}
.img-back-180
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 180px;
    height: 180px;
}
.img-back-150
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 150px;
    height: 150px;
}
.img-back-120
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;
}
.img-back-90
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 90px;
    height: 90px;
}
.img-back-70
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
}
.img-back-50
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
}
.img-back-45
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
}
.img-back-30
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}
.img-back-20
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}
.img-back-15
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
}

.img-back
{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* FILTRES */
.filter-nb-60-blur-8{
    /* Préfixes vendeurs */
    -webkit-filter: grayscale(60%) blur(8px);
    -moz-filter: grayscale(60%) blur(8px);
    -o-filter: grayscale(60%) blur(8px);
    -ms-filter: grayscale(60%) blur(8px);

    filter: grayscale(60%) blur(8px);
}

.filter-blur-8{
    /* Préfixes vendeurs */
    -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);

    filter: blur(8px);
}

.filter-nb-100{
    /* Préfixes vendeurs */
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

#background_image{
    /* position: absolute; */
    position:fixed;
    top:0;
    left:0;
	width:100%;
    height: 100%;
    z-index: -1;
    background-position: center; /* Center the image */
    background-repeat: repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
}


/* GALERIE PHOTO GRID */
    .gallery {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-width: 33%;
        -moz-column-width: 33%;
        column-width: 33%;
    }

    @media (max-width: 450px) {
        .gallery {
            -webkit-column-count: 1;
            -moz-column-count: 1;
            column-count: 1;
            -webkit-column-width: 100%;
            -moz-column-width: 100%;
            column-width: 100%;
        }
    }
        
    @media (max-width: 400px) {
        .btn.filter {
            padding-left: 1.1rem;
            padding-right: 1.1rem;
        }
    }