.book {
  display: flex;
  position: relative;
  height: 90%;
  width: 81.5%;
  margin: 0 auto;

  border-radius: 3vw;

  background-image: linear-gradient(
    135deg,
    rgba(126, 116, 203, 0.137),
    rgba(196, 118, 215, 0.842),
    rgba(38, 106, 223, 0.493),
    rgba(181, 240, 244, 0.721),
    rgba(38, 106, 223, 0.466),
    rgb(196, 118, 215),
    rgb(126, 116, 203)
  );

  transform-style: preserve-3d;

  justify-content: center;
  align-items: center;

  filter: drop-shadow(0px 10px 1px rgba(0, 0, 0, 0.25));
  font-size: 0;
}

.page1::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0%;
  width: 100%;
  height: 100%;
  transform-origin: center;

  background-size: 200% 100%;
  background-position: 100% 0;

  animation: nextPage1 20s  infinite;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
}

.page2::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0%;
  width: 100%;
  height: 100%;
  transform-origin: center;

  background-size: 200% 100%;
  animation: nextPage2 20s  infinite;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
}

@keyframes nextPage1 {
  0% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
  2% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
  2.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-2.jpg");
  }
  27% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-2.jpg");
  }
  27.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-3.jpg");
  }
  52% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-3.jpg");
  }
  52.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-4.jpg");
  }
  77% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-4.jpg");
  }
  77.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
  100% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
}

@keyframes nextPage2 {
  0% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
    left: 0;
  }
  23% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");

  }
  23.5% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-2.jpg");

  }
  48% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-2.jpg");
  }
  48.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-3.jpg");
  }
  72% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-3.jpg");
  }
  72.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-4.jpg");
  }
  96% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-4.jpg");
  }
  96.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
  100% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
}

.page1 {
  position: relative;
  
  width: 47.52%;
  height: 90%;
  transform-style: preserve-3d;
  background-size: 200% 100%;
  background-position: 100% 0;
  border: 0;
}

.page2 {
  position: relative;

  width: 47.52%;
  height: 90%;
  transform-style: preserve-3d;
  background-size: 200% 100%;
  border: 0;

}

.flips {
  width: 50%;
  position: absolute;
  left: 50%;
  height: 90%;
  perspective: 70vw;
  perspective-origin: center;
  transform-style: preserve-3d;
}

.otherFlip {
  position: absolute;
  left: 99.6%;
  height: 100%;
  width: 100%;
  perspective: 140vw;

  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  background-size: 600% 100%;
}

.flip1 {
  position: relative;
  perspective: 140vw;

  height: 100%;
  width: 6.48vw;
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  transition: all 5s;
  animation: flip1-move 5s  linear forwards infinite;

  background-size: 1200% 100%;
  background-position: -600% 0;
}

.flip2 {
  background-size: 1200% 100%;
  animation: otherFlip-move 5s  linear forwards infinite;

  background-size: 1200% 100%;
  background-position: -700% 0;
}
.flip3 {
  background-position: -200% 0;
  animation: otherFlip-move 5s  linear forwards infinite;
  background-size: 1200% 100%;
  background-position: -800% 0;
}
.flip4 {
  background-position: -300% 0;
  animation: otherFlip-move 5s  linear forwards infinite;
  background-size: 1200% 100%;
  background-position: -900% 0;
}
.flip5 {
  background-position: -400% 0;
  animation: otherFlip-move 5s  linear forwards infinite;
  background-size: 1200% 100%;
  background-position: -1000% 0;
}
.flip6 {
  background-position: -500% 0;
  animation: otherFlip-move 5s  linear forwards infinite;
  background-size: 1200% 100%;
  background-position: -1100% 0;
}

.flip1::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0%;
  width: 100%;
  height: 100%;
  transform-origin: center;
  /* backface-visibility: hidden; */

  background-size: 1200% 100%;
  background-position: -600% 0;
  animation: nextFlip-before 20s  infinite;
  border: 0;
}

.flip2::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0%;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-origin: center;

  background-size: 1200% 100%;
  background-position: -700% 0;
  animation: nextFlip-before 20s  infinite;
  border: 0;
}

.flip3::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0%;
  width: 100%;
  height: 100%;
  transform-origin: center;

  background-size: 1200% 100%;
  background-position: -800% 0;
  animation: nextFlip-before 20s  infinite;
}

.flip4::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0%;
  width: 100%;
  height: 100%;
  transform-origin: center;

  background-size: 1200% 100%;
  background-position: -900% 0;
  animation: nextFlip-before 20s  infinite;
}

.flip5::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0%;
  width: 100%;
  height: 100%;
  transform-origin: center;

  background-size: 1200% 100%;
  background-position: -1000% 0;
  animation: nextFlip-before 20s  infinite;
}

.flip6::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0%;
  width: 100%;
  height: 100%;
  transform-origin: center;

  background-size: 1200% 100%;
  background-position: -1100% 0;
  animation: nextFlip-before 20s  infinite;
}

.otherFlip::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0%;
  width: 100%;
  height: 100%;
  transform-origin: center;
  border: 0;
  background-size: 1200% 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.flip1::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0%;
  width: 100%;
  height: 100%;
  transform-origin: center;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background-size: 1200% 100%;
  background-position: -500% 0;
  animation: nextFlip-after 20s  infinite;
  border: 0;
  /* background-color: blue; */
}

.flip2::after {

  background-position: -400% 0;
  animation: nextFlip-after 20s  infinite;
}

.flip3::after {

  background-position: -300% 0;
  animation: nextFlip-after 20s  infinite;
}

.flip4::after {

  background-position: -200% 0;
  animation: nextFlip-after 20s  infinite;
}

.flip5::after {

  background-position: -100% 0;
  animation: nextFlip-after 20s  infinite;
}

.flip6::after {
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background-position: 0 0;
  animation: nextFlip-after 20s  infinite;
}

@keyframes nextFlip-before {
  0% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
  24% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
  24.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-2.jpg");
  }
  49% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-2.jpg");
  }
  49.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-3.jpg");
  }
  74% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-3.jpg");
  }
  74.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-4.jpg");
  }
  99% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-4.jpg");
  }
  99.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
  100% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
}

@keyframes nextFlip-after {
  0% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-2.jpg");
  }
  24% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-2.jpg");
  }
  24.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-3.jpg");
  }
  49% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-3.jpg");
  }
  49.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-4.jpg");
  }
  74% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-4.jpg");
  }
  74.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
  99% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-1.jpg");
  }
  99.1% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-2.jpg");
  }
  100% {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/team-2.jpg");
  }
}
/* 
@keyframes flip1-move {
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(180deg);
  }
} */
@keyframes flip1-move {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(0deg);
  }
  60% {
    transform: rotateY(-180deg);

  }

  96% {
    transform: rotateY(-180deg);
    visibility: hidden;

  }
  96.1% {
    visibility: hidden;

  }
  100% {
    visibility: hidden;
  }
}

@keyframes otherFlip-move {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(0deg);
  }

  45% {
    transform: rotateY(10deg);
  }
  50% {
    transform: rotateY(15deg);
  }
  60% {
    transform: rotateY(0deg);
  }
  96%{
    transform: rotateY(0deg);
    visibility: hidden;
  }
  100% {
    visibility: hidden;
    transform: rotateY(0deg);
  }
}