.close-bibli {
  position: absolute;
  top: 1.2rem;
  right: 2rem;
  font-size: 5rem;
  color: #4d0e67;
  cursor: pointer;
  border: none;
  background: none;
}

/* -------------------------- */
/* CLASSES TO MAKE MODAL WORK */

#bibli {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  transform: translate(-50%, -50%);
  /* background-color: cadetblue; */
  width: 40%;
  height: 70vh;
  background-color: #f6e7d7;
  padding: 6rem;
  border-radius: 30px;
  box-shadow: 0 3rem 5rem rgb(0 0 0 / 30%);
  z-index: 10;
  background-image: url(../images/pulpette.png), url(../images/Group\ 320.png);
  background-repeat: no-repeat;
  background-size: cover, 110%;
  background-position-x: -441px;
  background-position-y: -86px;

  background-position: -441px -86px, 376px 311px;
}

#bibli.hidden {
  display: none;
}

.deck {
  width: 200px;
  height: 250px;
}

.rotate1 {
  transform: rotate(5deg);
}

.rotate2 {
  transform: rotate(-5deg);
}
.card.b {
  background-size: 102.5% 101.5%;
  background-position: center;
}
.card.k {
  background-size: 101% 102%;
  background-position: 0% -5px;
  width: 400px;
  height: 550px;
  transform: scale(0.5, 0.5);
  transform-origin: left top;
  padding: 20px;
  margin-top: 10px;
}
.card p {
  font-size: 1em;
  text-align: justify;
  overflow: hidden;
}

.card {
  height: 18em;
  width: 13.5em;
  border-radius: 16px;
  margin-bottom: 4px;

  position: absolute;
  top: 0px;

  background-color: #f8f5ed;
  overflow: hidden;

  box-sizing: border-box;
  transition: 0.6s;
  font-size: 18px;

  z-index: 2;
  /*   transform-origin: left top; */
}

.hasShadow .card.b {
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
}
.card p {
  padding: 0px;
  margin-top: 0px;
  font-size: 0.8em;
  font-weight: bold;
}
.card .h4,
h4 {
  font-weight: bold;
  margin: 4%;
}
.card h5 {
  margin: 0 4% 9px 4%;
  font-size: 1.1em;
  font-weight: 700;
}

.flip-container .card {
  -webkit-font-smoothing: antialiased;
  transform-origin: right top;
}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  z-index: 2;
}

.flip-container.flip .flipper {
  transform: rotateY(180deg) translate(-50%, -35%);
  z-index: 50;
}

.flip-container.hide .flipper {
  z-index: 1;
  /*   transition: 0.3s; */
  /*   transition-delay: 0.3s; */
  animation: animationFrames linear 0.55s forwards;
  animation-iteration-count: 1;
}
.flip-container.hide .card {
  z-index: 1;
}
.flip-container .b {
  border: 0;
}

.flip-container.flip .front .card {
  transform: scale(2, 2);
}
.flip-container.flip .back .card {
  transform: scale(1, 1);
}

.flipper,
.front,
.back {
  width: 200px;
  height: 275px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  transform-origin: left center;
}

/* hide back of pane during swap */
.front,
.back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  /* 	z-index: 2; */
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
}

@keyframes animationFrames {
  0% {
    transform: translateX(0) rotateY(180deg);
    z-index: 2;
  }
  50% {
    transform: translateX(-200%) rotateY(0deg) rotateZ(15deg) scale(0.7, 0.7);
    z-index: 1;
  }
  100% {
    transform: translateX(0) rotateY(0deg) scale(0.9, 0.9);
    z-index: 1;
  }
}
.card.g.b {
  background-color: green;
}

.test {
  position: absolute;
  z-index: 0;
  width: 200px;
  height: 300px;
  background-color: red;
}
.flip-container.stayBack {
  z-index: 1;
  position: absolute;
}
.flipcard {
  position: absolute;
  top: 100;
  left: 100;
  z-index: 2;
}

.flip-container.hide {
  z-index: -1;
  /*   transition: 0.3s; */
  /*   transition-delay: 0.3s; */
  animation: animationHide linear 0.55s forwards;
  animation-iteration-count: 1;
}

@keyframes animationHide {
  0% {
    z-index: 1;
  }
  50% {
    z-index: -10;
  }
  100% {
    z-index: -10;
  }
}

.card.b img {
  object-fit: cover;
  height: 100%;
}

#textContainer {
  width: 90%;
  height: 90%;
  overflow: hidden;
  margin: auto;
}
#textContainer p {
  margin: auto;
}

#bibli button.talk {
  top: 6%;
  position: absolute;
  right: 8%;
  border: none;
  background: none;
  transform: scale(1.5);
  color: #4d0e67;
}

#bibli #logo{
  position: absolute;
    top: 5%;
    /* margin: auto; */
    left: 28%;
    /* right: 50%;
}