body {
  margin: 0;
  width: 100%;
  height: auto;
}

.scene {
    width: 50%;
    height: 500px;
    margin: 0% 0% 0% 50%;
    perspective: 1000px;
}

.book {
  position: relative;
  width: 100%;
  height: 500px;
  transform-style: preserve-3d;
}

.page {
  cursor: pointer;
  position: absolute;
  color: black;
  width: 100%;
  height: 500px;
  transition: 1.5s transform;
  transform-style: preserve-3d;
  transform-origin: left center;
}
.front,
.back {
  position: absolute;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 51%);
  width: 100%;
  height: 500px;
  padding: 6% 5% 5%;
  box-sizing: border-box;

  backface-visibility: hidden;
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
  background: linear-gradient(to bottom right, #fff, #fff);
}
.back {
  transform: rotateY(180deg);
}

.page.active {
  z-index: 1;
}
.page.flipped {
  transform: rotateY(-180deg);
}
.page.flipped:last-of-type {
  z-index: 1;
}


.qr {
  margin: 50px auto;
  max-width: 50%;
}
.qr img {
  display: block;
}
@media (min-width: 50px) and (max-width: 767px ) {
.scene, .book, .page, .front, .back {
    height:800px !important;
  }
  .front p, .back p {
    font-size: 11px !important;
    text-align: left!important;
    line-height: 18px!important;
  }
  .front h3, .back h3 {
    top:-5px !important;

  }
  .front h1, .back h1 {
    font-size: 14px !important;
    margin: 0 0 5px 0 !important;
  }
  .front h2, .back h2 {
    font-size: 15px !important;
  }
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
  .scene {
    width: 90%;
    height: 90%;
    margin: 5%;
}
}
.front h1, .back h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0px 0 15px 0;
    color: #f07c29;
}
.front p, .back p {
    font-size: 20px;
    color: #000;
    margin: 0 0 10px 0;
        line-height: 28px;
    text-align: justify;
}
.front h2, .back h2 {
    margin: 0 0 5px 0;
    font-size: 20px;
    color: #f07c29;
}
.front h3, .back h3 {
    margin: 0px;
    font-size: 20px;
    position: relative;
    top: -26px;
}
.book_sec {
    width: 100%;
        box-shadow: 0px 0px 5px 0px rgb(0 0 0) inset;
    background: linear-gradient(to bottom right, #fff, #ccc);
}