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