/* cards */
article.card {
  margin: 15px;
  margin-bottom: 0px;
}
article.card h6 {
  margin-bottom: 0px;
}
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.card {
  flex: 0 0 180px;
  width: 180px;
  height: 220px; /* 180px image + ~40px texte */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.card img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  transition: transform 0.3s ease;
}
.card .text {
  height: 40px;
  width: 100%;
  padding: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .text h3 {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.card {
  box-shadow: 4px 4px 12px 0px black;
}
/*.card img:hover {
box-shadow: 4px 4px 12px 0px white;
}
*/
@keyframes glow-pulse {0% {
  box-shadow: 0 0 40px 15px rgba(255,20,147,0.5);
}
50% {
  box-shadow: 0 0 60px 25px rgba(255,20,147,0.8);
}
100% {
  box-shadow: 0 0 40px 15px rgba(255,20,147,0.5);
}

}
.card img {
transition: transform 0.3s ease;
border-radius: 6px;
}
.card img:hover {
transform: scale(1.08);
animation: glow-pulse 1.5s infinite ease-in-out;
}
/* galerie */
#galerie {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: start;
}
#galerie ul {
padding-left: 10%;
}
#galerie li {
display: inline-block;
margin: 0.625em;
}
#galerie img {
width: 260px !important;
height: auto !important;
max-width: 100%;
display: block;
margin: 0 auto;
-webkit-box-shadow: 0 0 0.313em rgba(0,0,0,.05);
-moz-box-shadow: 0 0 0.313em rgba(0,0,0,.05);
box-shadow: 4px 4px 12px 0px black;
-webkit-transition: -webkit-box-shadow .3s ease,border-color .3s ease;
-moz-transition: -moz-box-shadow .3s ease,border-color .3s ease;
-ms-transition: -ms-box-shadow .3s ease,border-color .3s ease;
-o-transition: -o-box-shadow .3s ease,border-color .3s ease;
transition: box-shadow .3s ease,border-color .3s ease;
}
#galerie img:hover {
border-color: #0D3338;
-webkit-box-shadow: 0 0 0.938em rgba(0,0,0,.25);
-moz-box-shadow: 0 0 0.938em rgba(0,0,0,.25);
box-shadow: 0 0 20px 10px deeppink;
}
/* imageLightbox */
.imagelightbox-open {
user-select: none;
overflow: hidden;
}
/* IMAGE LIGHTBOX SELECTOR */
#imagelightbox {
cursor: pointer;
position: fixed;
z-index: 10000;
top: 50%;
-ms-touch-action: none;
touch-action: none;
box-shadow: 0 0 80px 25px deeppink;
transition: box-shadow 0.3s ease;
max-width: 95vw;
max-height: 95vh;
object-fit: contain;
}
/* WITH OVERLAY */
.imagelightbox-overlay {
background-color: rgba(30,30,30,0.9);
position: fixed;
z-index: 9998;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* WITH "CLOSE" BUTTON */
.imagelightbox-close {
border: none;
cursor: pointer;
width: 3em;/* 40 */
height:3em;/* 40 */
background-color:rgba(130,130,130,0.8);
position: fixed;
z-index: 10002;
top: 20px;/* 40 */
right:20px;/* 40 */
border-radius:50%;
transition: color .3s ease;
}
.imagelightbox-close:hover {
background-color: #111;
}
.imagelightbox-close:before,
.imagelightbox-close:after {
width: 2px;
background-color: #fff;
content: '';
position: absolute;
top: 20%;
bottom: 20%;
left: 50%;
margin-left: -1px;
}
.imagelightbox-close:before {
transform: rotate(45deg);
}
.imagelightbox-close:after {
transform: rotate(-45deg);
}
/* WITH CAPTION */
.imagelightbox-caption {
text-align: center;
color: #fff;
background-color: #666;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0.625em;/* 10 */
opacity:1;
transition: opacity .5s ease;
}
/* WITH NAVIGATION */
.imagelightbox-nav {
background-color: rgba(0,0,0,.5);
position: fixed;
z-index: 10001;
left: 50%;
bottom: 3.75em;/* 60 */
padding:0.313em;/* 5 */
transform:translateX(-50%);
border-radius: 14px;
}
.imagelightbox-nav a {
position: relative;
top: 0.2em;
width: 1em;/* 20 */
height:1em;/* 20 */
border:1px solid #fff;
display: inline-block;
margin: 0 0.313em;/* 5 */
border-radius:50%;
}
.imagelightbox-nav .active {
animation: fade-in 0.45s linear;
background-color: #fff;
}
.imagelightbox-navitem:active {
background: #808080;
}
/* WITH ARROWS */
.imagelightbox-arrow {
border: none;
border-radius: 50%;
cursor: pointer;
width: 30px;/* 53.3 */
height:30px;/* 53.3 */
background-color:gray;
vertical-align: middle;
display: none;
position: fixed;
z-index: 10001;
bottom: 40px;
padding: 0;
margin-top: -3.75em;/* 60 */
}
.imagelightbox-arrow:hover {
background-color: #111;
}
.imagelightbox-arrow:active {
background-color: #111;
}
.imagelightbox-arrow-left {
left: 2.5em;/* 40 */
}
.imagelightbox-arrow-right {
right: 2.5em;/* 40 */
}
.imagelightbox-arrow:before {
width: 0;
height: 0;
border: 1em solid transparent;
content: '';
display: inline-block;
margin-bottom: -7%;
}
.imagelightbox-arrow-left:before {
border-left: none;
border-right-color: #F5FFEA;
margin-left: -0.35em;
}
.imagelightbox-arrow-right:before {
border-right: none;
border-left-color: #F5FFEA;
margin-left: 0.2em;
}
.imagelightbox-loading,
.imagelightbox-overlay,
.imagelightbox-close,
.imagelightbox-nav,
.imagelightbox-arrow {
animation: fade-in 0.25s linear;
}
@keyframes fade-in {from {
opacity: 0;
}
to {
opacity: 1;
}

}
@media only screen and (max-width:41.250em) {/* 660 */
#container {
width: 100%;
}
.imagelightbox-close {
top: 1.25em;/* 20 */
right:1.25em;/* 20 */
}
.imagelightbox-arrow {
width: 30px;/* 40 */
height:30px;/* 60 */
margin-top:-1.875em;/* 30 */
}
.imagelightbox-arrow-left {
left: 1.25em;/* 20 */
}
.imagelightbox-arrow-right {
right: 1.25em;/* 20 */
}

}
@media only screen and (max-width:20em) {/* 320 */
.imagelightbox-arrow-left {
left: 0;
}
.imagelightbox-arrow-right {
right: 0;
}

}