.pt20 {
  padding-top:30px
}
.min-h300 {
  min-height:185px;
  font-family:"Playfair Display",serif;
  font-style:italic;
  color:#333;
  font-size:25px;
  font-weight:400
}
@keyframes preLoad {
  0%,
  20%,
  40% {
    background-image:url("./flip_thum_brochure_1.webp")
  }
  10%,
  30% {
    background-image:url("./flip_thum_brochure_2.webp")
  }
  100% {
    display:none
  }
}
.book {
  position:relative;
  top:-206px;
  left:88px;  
}
.page,
.page:nth-child(6)::after {
  width:210px;
  position:absolute;
  top:0;
  background-size:420px 440px;
  height:440px;
}
.page {
  background-color:#bbb;
  right:50%;
  transform-origin:100% 100%;
  border:2px solid #555;
  background-position:center
}
.page:first-child {
  transform:rotateX(60deg) rotateY(3deg)
}
.page:nth-child(2) {
  transform:rotateX(60deg) rotateY(4.5deg)
}
.page:nth-child(3) {
  transform:rotateX(60deg) rotateY(6deg);
  animation:25s steps(1) -24s infinite nextPage;
  background-size:420px 440px;
  background-position:-2px -2px
}
.page:nth-child(4) {
  transform:rotateX(60deg) rotateY(177deg)
}
.page:nth-child(5) {
  transform:rotateX(60deg) rotateY(175.5deg)
}
.page:nth-child(6) {
  transform:rotateX(60deg) rotateY(174deg);
  overflow:hidden
}
.page:nth-child(6)::after {
  content:"";
  right:0;
  transform-origin:center;
  transform:rotateY(180deg);
  animation:25s steps(1) -20s infinite nextPage;
  background-position:100% -2px
}
@keyframes nextPage {
  0%,
  40%,
  80% {
    background-image:url("./flip_thum_brochure_1.webp")
  }
  20%,
  60% {
    background-image:url("./flip_thum_brochure_2.webp")
  }
}
.gap {
  width:10px;
  height:440px;
  background:0 0;
  transform:rotateX(60deg);
  transform-origin:bottom;
  position:absolute;
  top:0;
  left:calc(50% - 5px)
}
.flip,
.flip::after {
  position:absolute; 
  top:0;
  background-size:420px 440px;
}
.gap::after {
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translate(-50%,50%);
  background-color:#555;
  width:10px;
  height:5px;
  border-radius:50%
}
.flip {
  width:32px;
  height:440px;
  transform-origin:100% 100%;
  right:100%;
  border:solid #555;
  border-width:2px 0;
  perspective:4200px;
  perspective-origin:center;
  transform-style:preserve-3d
}
.flip::after {
  content:"";
  right:0;
  width:100%;
  height:100%;
  transform-origin:center
}
.flip.flip1 {
  right:50%;
  animation:5s ease-in-out infinite flip1;
  border-width:2px 2px 2px 0
}
.flip.flip1::after {
  animation:25s steps(1) -20s infinite nextFlip1
}
.flip:not(.flip1) {
  right:calc(100% - 2px);
  top:-2px;
  transform-origin:right;
  animation:5s ease-in-out infinite flip2
}
.flip.flip2::after {
  animation:25s steps(1) -20s infinite nextFlip2
}
.flip.flip3::after {
  animation:25s steps(1) -20s infinite nextFlip3
}
.flip.flip4::after {
  animation:25s steps(1) -20s infinite nextFlip4
}
.flip.flip5::after {
  animation:25s steps(1) -20s infinite nextFlip5
}
.flip.flip6::after {
  animation:25s steps(1) -20s infinite nextFlip6
}
.flip.flip7 {
  width:30px;
  border-width:2px 0 2px 2px
}
.flip.flip7::after {
  animation:25s steps(1) -20s infinite nextFlip7
}
@keyframes flip1 {
  0%,
  20% {
    transform:rotateX(60deg) rotateY(6deg)
  }
  100%,
  80% {
    transform:rotateX(60deg) rotateY(174deg)
  }
}
@keyframes flip2 {
  0%,
  20% {
    transform:rotateY(0) translateY(0)
  }
  50% {
    transform:rotateY(-15deg) translateY(0)
  }
}
@keyframes nextFlip1 {
  0%,
  40%,
  80% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-178px -2px;
    transform:rotateY(0)
  }
  10%,
  50%,
  90% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-210px -2px;
    transform:rotateY(180deg)
  }
  20%,
  60% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-178px -2px;
    transform:rotateY(0)
  }
  30%,
  70% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-210px -2px;
    transform:rotateY(180deg)
  }
}
@keyframes nextFlip2 {
  0%,
  40%,
  80% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-148px -2px;
    transform:rotateY(0)
  }
  10.5%,
  50.5%,
  90.5% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-238px -2px;
    transform:rotateY(180deg)
  }
  20%,
  60% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-148px -2px;
    transform:rotateY(0)
  }
  30.5%,
  70.5% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-238px -2px;
    transform:rotateY(180deg)
  }
}
@keyframes nextFlip3 {
  0%,
  40%,
  80% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-118px -2px;
    transform:rotateY(0)
  }
  11%,
  51%,
  91% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-268px -2px;
    transform:rotateY(180deg)
  }
  20%,
  60% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-118px -2px;
    transform:rotateY(0)
  }
  31%,
  71% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-268px -2px;
    transform:rotateY(180deg)
  }
}
@keyframes nextFlip4 {
  0%,
  40%,
  80% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-88px -2px;
    transform:rotateY(0)
  }
  11.5%,
  51.5%,
  91.5% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-298px -2px;
    transform:rotateY(180deg)
  }
  20%,
  60% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-88px -2px;
    transform:rotateY(0)
  }
  31.5%,
  71.5% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-298px -2px;
    transform:rotateY(180deg)
  }
}
@keyframes nextFlip5 {
  0%,
  40%,
  80% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-58px -2px;
    transform:rotateY(0)
  }
  12%,
  52%,
  92% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-328px -2px;
    transform:rotateY(180deg)
  }
  20%,
  60% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-58px -2px;
    transform:rotateY(0)
  }
  32%,
  72% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-328px -2px;
    transform:rotateY(180deg)
  }
}
@keyframes nextFlip6 {
  0%,
  40%,
  80% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-28px -2px;
    transform:rotateY(0)
  }
  12.5%,
  52.5%,
  92.5% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-358px -2px;
    transform:rotateY(180deg)
  }
  20%,
  60% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-28px -2px;
    transform:rotateY(0)
  }
  32.5%,
  72.5% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-358px -2px;
    transform:rotateY(180deg)
  }
}
@keyframes nextFlip7 {
  0%,
  40%,
  80% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-2px -2px;
    transform:rotateY(0)
  }
  13%,
  53%,
  93% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-388px -2px;
    transform:rotateY(180deg)
  }
  20%,
  60% {
    background-image:url("./flip_thum_brochure_2.webp");
    background-position:-2px -2px;
    transform:rotateY(0)
  }
  33%,
  73% {
    background-image:url("./flip_thum_brochure_1.webp");
    background-position:-388px -2px;
    transform:rotateY(180deg)
  }
}