/* figure Settings */
figure, figcaption {
  margin: 0;
  padding: 0;
}

#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  gap: 1em;
}

#gallery figure {
  position: relative;
  overflow:hidden;
}

#gallery figure:before {
  content: "?";
  position: absolute;
  bottom: 1em;
  left: 1em;
  background: white;
  color: black;
  opacity: 0.7;
  width: 1.5em;
  height: 1.5em;
  border-radius: 1em;
  text-align: center;
  font-size: 1.5em;
  line-height: 1.5em;
  transition: all 1s ease;
}

#gallery figure:hover:before {
  opacity: 0;
}

figure img {
  width: 100%;
  display: block;
}

#gallery > figure > figcaption {
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 3em;
  color: white;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  bottom: -3em;
  transition: all 1s ease;
}
figure.mitte figcaption {
  width: 0;
  left: 50%;
}

#gallery > figure.rechts > figcaption {
  width: 0;
  bottom: 50%;
  left: 50%;
}

#gallery > figure:hover > figcaption {
  opacity: 1;
  bottom: 0;
  left: 0;
  width: 100%;
}

#gallery > figcaption {
  grid-column: 1 / -1;
   text-align: center;
}

/* MODAL */
.modalDialog {
 position: Fixed;
 font-family: Verdana, Sans-Serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0, 0, 0, 0.6);
 z-index: 99999;
 opacity: 0;
 transition: opacity 400ms ease-in;
 pointer-events: None;
}

.modalDialog:target {
 opacity: 1;
 pointer-events: Auto;
}

.modalDialog > div {
 width: 600px;
 position: relative;
 margin: 50px Auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 /* background-color: #FFFFFF;
 background: linear-gradient(#FFFFFF, #999999); */
 cursor: Default;
}

.close {
 background-color: #ee4494;
 color: #FFFFFF;
 line-height: 25px;
 position: Absolute;
 right: -12px;
 text-align: Center;
 top: -10px;
 width: 24px;
 text-decoration: None;
 font-weight: Bold;
 border-radius: 12px;
 box-shadow: 1px 1px 3px #000000;
}

.close:hover {
 background-color: #35b181;