/*.video-js .vjs-tech {
position: relative;
top: 24%;
left: 0px;
width: 100%;
height: 50%;}*/
body {
  background-color: #121212;
  overflow: hidden;
}

.video-js.vjs-playing .vjs-tech {
  pointer-events: none;
}

.tabook-video-dimensions.vjs-fluid {
  padding: 0 !important;
}

.video-js.video-js .vjs-big-play-button {
  background-color: #000000;
  opacity: 0.7;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
}
/* 
  This rule sets the location and size
  of the triangular play icon in the
  big play button 
  */
.video-js.video-js .vjs-big-play-button:before {
  margin-top: 27px;
  margin-left: 30px;
  font-size: 4em;
  color: white;
  opacity: 0.9;
}

.vjs-big-play-button .vjs-icon-placeholder::before {
  font-size: 70px;
  top: 25px !important;
}

.vjs-control-bar {
  display: none !important;
  opacity: 0;
}

.vjs-tech {
  object-fit: cover;
}

#main-wrapper {
  max-height: 100vh;
  justify-content: center;
}

#tabbok-video-mobile,
#tabbok-video-desktop,
#tabook-video-tablet {
  display: none;
  z-index: 0;
}

/*-----------------BOOK BUTTONS-----------*/

.book{
  opacity: 1;
  margin: auto;
  display: none;
  position: absolute;
  z-index: 10;
  cursor: pointer;
  transition: all 0.4s;
  border-radius: 6px;
  border: none;
  font-weight: bold;
  background-color: rgb(3, 3, 3, 0.2);
  color: #ffffff;

}

.book:hover {
  background-color: black;
  color: white;
}


/*--------------------------Book Container menu--------------------------*/
.book-cont {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
  text-align: center;
}

.book-cont a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  top: 0;
  right: 5px; 
  font-size: 3rem;
  color: #414141;
  display: block;
  transition: 0.3s;
}

.book-cont a:hover {
  color: crimson;
}

.closebtn {
  text-shadow: -1px -1px 0 firebrick, 1px -1px 0 firebrick, -1px 1px 0 firebrick,
    1px 1px 0 firebrick;
  position: absolute;
  top: 38px;
  right:-8px; 
  font-size: 3rem;
  margin-left: 50px;
  z-index: 2;
  font-weight: bolder;
  color: firebrick;
}

.closebtn:hover {
  cursor: pointer;
}

@media screen and (max-height: 450px) {
  .book-cont {
    padding-top: 15px;
  }
  .book-cont a {
    font-size: 18px;
  }
}

/*--------------------------CSS 4 the book-------------------------------*/
.scene {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 54vw;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  background-color: transparent;
  -webkit-perspective: 4000px;
  perspective: 4000px;
  -webkit-perspective-origin: 50% 0%;
  perspective-origin: 50% 0%;
}

.book-wrap {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 57vw;
  margin-top: 8vw;
  margin-bottom: 8vw;
  padding-right: 1%;
  padding-left: 1%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-perspective: 4000px;
  perspective: 4000px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transform: translate3d(0px, 5%, -264px) rotateX(27deg) rotateY(0deg)
    rotateZ(-10deg);
  transform: translate3d(0px, 5%, -264px) rotateX(27deg) rotateY(0deg)
    rotateZ(-10deg);
  -webkit-transition: -webkit-transform 2000ms
    cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 2000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 2000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 2000ms cubic-bezier(0.165, 0.84, 0.44, 1),
    -webkit-transform 2000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.book-wrap:hover {
  -webkit-transform: translate3d(0px, 5%, -264px) rotateX(13deg) rotateY(0deg)
    rotateZ(-3deg);
  transform: translate3d(0px, 5%, -264px) rotateX(13deg) rotateY(0deg)
    rotateZ(-3deg);
}

.book-cover-left {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-top-left-radius: 4%;
  border-bottom-left-radius: 4%;
  background-color: #2e1800;
  box-shadow: inset 4px -4px 4px 1px #635648, inset 7px -7px 4px 0 #221b14;
  -webkit-perspective: 4000px;
  perspective: 4000px;
  -webkit-transform: translate3d(0px, 0px, -1px);
  transform: translate3d(0px, 0px, -1px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.book-cover-right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-top-right-radius: 4%;
  border-bottom-right-radius: 4%;
  background-color: #2e1800;
  box-shadow: inset -4px -4px 4px 1px #635648, inset -7px -7px 4px 0 #221b14;
}

.layer1 {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 10px 10px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-transform: translate3d(0px, 0px, 5px);
  transform: translate3d(0px, 0px, 5px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.page-left {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-top-left-radius: 1%;
  border-bottom-left-radius: 1%;
  background-color: #fff;
  box-shadow: inset 0 0 26px 2px #d8cccc, -1px 1px 13px 0 rgba(34, 27, 20, 0.81);
}

.layer-text {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 97%;
  margin: 20px 10px 18px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 4000px;
  perspective: 4000px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transform: translate3d(0px, 0px, 32px);
  transform: translate3d(0px, 0px, 32px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.layer-text.right {
  -webkit-transform: translate3d(-37px, 0px, 32px);
  transform: translate3d(-37px, 0px, 32px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.page-left-2 {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-top-left-radius: 18%;
  border-bottom-left-radius: 1%;
  background-color: #fff;
  box-shadow: inset 0 0 7px 4px hsla(0, 13%, 82%, 0.43),
    -1px 1px 13px 0 rgba(34, 27, 20, 0.49);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg);
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition: -webkit-transform 650ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 650ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 650ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 650ms cubic-bezier(0.165, 0.84, 0.44, 1),
    -webkit-transform 650ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.page-left-2:hover {
  -webkit-transform: rotateX(0deg) rotateY(7deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(7deg) rotateZ(0deg);
}

.left-side {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 49%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 4000px;
  perspective: 4000px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
  -webkit-transform: rotateX(0deg) rotateY(20deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(20deg) rotateZ(0deg);
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.right-side {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 49%;
  -webkit-perspective: 4000px;
  perspective: 4000px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
  -webkit-transform: rotateX(0deg) rotateY(-1deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(-1deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.center {
  width: 3%;
  background-image: -webkit-radial-gradient(
      circle farthest-corner at 56% -8%,
      #fff 8%,
      transparent 0
    ),
    -webkit-radial-gradient(circle farthest-corner at 50% 108%, #fff 8%, transparent
          0),
    -webkit-linear-gradient(0deg, #635648, #2e1800 21%, #635648 30%, #2e1800 48%, #635648
          68%, #2e1800 79%, #635648);
  background-image: radial-gradient(
      circle farthest-corner at 56% -8%,
      #fff 8%,
      transparent 0
    ),
    radial-gradient(circle farthest-corner at 50% 108%, #fff 8%, transparent 0),
    linear-gradient(
      90deg,
      #635648,
      #2e1800 21%,
      #635648 30%,
      #2e1800 48%,
      #635648 68%,
      #2e1800 79%,
      #635648
    );
}

.corner-fold {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  border-right: 1px solid hsla(0, 13%, 82%, 0.55);
  border-bottom: 1px solid hsla(0, 13%, 82%, 0.55);
  background-image: -webkit-linear-gradient(
    315deg,
    transparent 47%,
    #f0f0f0 48%,
    #fff 55%,
    #f6f6f6
  );
  background-image: linear-gradient(
    135deg,
    transparent 47%,
    #f0f0f0 48%,
    #fff 55%,
    #f6f6f6
  );
  box-shadow: 6px 6px 9px -4px hsla(0, 13%, 82%, 0.53);
}

.corner {
  position: absolute;
  left: 0px;
  top: 27px;
  width: 5vw;
  height: 5vw;
  background-image: -webkit-linear-gradient(315deg, #fff 30%, transparent);
  background-image: linear-gradient(135deg, #fff 30%, transparent);
  box-shadow: inset 13px 0 17px -12px hsla(0, 13%, 82%, 0.43);
}

.corner2 {
  position: absolute;
  left: 28px;
  top: 0px;
  width: 5vw;
  height: 5vw;
  background-image: -webkit-linear-gradient(315deg, #fff 31%, transparent);
  background-image: linear-gradient(135deg, #fff 31%, transparent);
  box-shadow: inset 0 13px 17px -12px hsla(0, 13%, 82%, 0.43);
}

#page_book,
#letter_page{
  overflow: hidden;
}

.page-text {
  position: relative;
  display: block;
  height: 94%;
  width: 71%;
  margin-top: 25px;
  margin-right: auto;
  margin-left: auto;
  font-family: Georgia, Times, "Times New Roman", serif;
}

.page-text p {
  margin-bottom: 0px;
  font-size: 0.85vw;
  line-height: 1.5;
}

.vjs-big-play-button{
  display: none !important;
}

.page-text h3 {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-style: italic;
}

.page-text h6 {
  font-family: "PT Sans", sans-serif;
  font-size: 9px;
  text-decoration: none;
}

.page-text a {
  color: #da5a13;
}

.layer2 {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 10px 13px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-transform: translate3d(2px, 0px, 10px);
  transform: translate3d(2px, 0px, 10px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.layer2.right {
  -webkit-transform: translate3d(-5px, 0px, 10px);
  transform: translate3d(-5px, 0px, 10px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.layer3 {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 10px 13px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-transform: translate3d(4px, 0px, 20px);
  transform: translate3d(4px, 0px, 20px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.layer3.right {
  -webkit-transform: translate3d(-10px, 0px, 20px);
  transform: translate3d(-10px, 0px, 20px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.layer4 {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 10px 15px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-transform: translate3d(6px, 0px, 30px);
  transform: translate3d(6px, 0px, 30px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.layer4.right {
  -webkit-transform: translate3d(-15px, 0px, 30px);
  transform: translate3d(-15px, 0px, 30px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.page-right-2 {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-top-right-radius: 1%;
  border-bottom-right-radius: 1%;
  background-color: #fff;
  box-shadow: inset 0 0 7px 4px hsla(0, 13%, 82%, 0.43),
    1px 1px 13px 0 rgba(34, 27, 20, 0.49);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: rotateX(0deg) rotateY(-3deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(-3deg) rotateZ(0deg);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform 850ms ease;
  transition: -webkit-transform 850ms ease;
  transition: transform 850ms ease;
  transition: transform 850ms ease, -webkit-transform 850ms ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.page-right-2:hover {
  -webkit-transform: rotateX(0deg) rotateY(-17deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(-17deg) rotateZ(0deg);
}

.page-right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-top-right-radius: 1%;
  border-bottom-right-radius: 1%;
  background-color: #fff;
  box-shadow: inset 0 0 26px 2px #d8cccc, 1px 1px 13px 0 rgba(34, 27, 20, 0.81);
}

.tooltip-big-text {
  --balloon-font-size: 1rem;
}

@media only screen and (max-width: 600px) {
  .tooltip-big-text {
    --balloon-font-size: 0.8rem;
  }

  .book:after{
    pointer-events: all !important;
  }
}

/*THE PAPER FOR SMALL/VERTICAL SCREENS*/
html, body {
  overflow-x: hidden;
}
body {
  position: relative;
}


#container-letter {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
  text-align: center;
}

h3.H3 {
  margin: -2rem 0 0;
  text-align: right;
  transform:  rotate(-10deg);
}

.letter {
  background: #fafafa;
  box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 300px 25px rgba(222,198,122,0.7) inset;
  width: 70vw;
  height: 80vh;
  margin: 0rem;
  top: 5vh;
  left: 7vw;
  padding: 5vh 5vw 0vh 10vw;
  position: absolute;
  z-index: 1;
  font-size: 1.2rem;
}

.letter:before, .letter:after {
  content: "";
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0,0,0,0.2), inset 0 0 300px rgba(222,198,122,0.7);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -2;
  transition: .5s;
}

.letter:before {
  left: -5px;
  top: 2px;  
  transform: rotate(-1.5deg);
}

.letter:after {
  right: -3px;
  top: 0px;
  transform: rotate(2.4deg);
}

.letter:hover:before {
transform: rotate(0deg);
border: solid rgba(111,99,61,0.4);
border-width: 0px 0px 0px 1px;
left: -6px;
top: -6px; 
}

.letter:hover:after {
transform: rotate(0deg);
border: solid rgba(111,99,61,0.4);
border-width: 0px 0px 0px 1px;
right: 3px;
top: -3px;
}
/*------------------------------------*/

@media (max-width: 991px) {

  .scene {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 200vw;
    height: 100vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: right;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: inherit;
    background-color: transparent;
    -webkit-perspective: 4000px;
    perspective: 3846px;
    -webkit-perspective-origin: 50% 0%;
    perspective-origin: 130% 30%;
}

  .book-wrap {
    width: 190vw;
    margin-top: 1vw;
    margin-bottom: 25vw;
    padding-right: 5%;
    padding-left: 1%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-perspective: 4000px;
    perspective: 4000px;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 99% 31%;
    transform-style: flat;
  }
  .book-cont {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: -100vw;
    overflow-x: hidden;
    transition: 0.5s;
    text-align: center;
    
  }
  #container-letter {
    display:block !important;
  }
  .page-left-2 {
    border-top-left-radius: 20%;
  }
  .corner-fold {
    left: 0%;
    top: -1%;
    width: 3.5vw;
    height: 3.5vw;
    max-height: 35px;
    background-image: -webkit-linear-gradient(
      315deg,
      transparent 50%,
      #f0f0f0 51%,
      #fff 52%,
      #f6f6f6
    );
    background-image: linear-gradient(
      135deg,
      transparent 50%,
      #f0f0f0 51%,
      #fff 52%,
      #f6f6f6
    );
  }
  .corner {
    top: 8%;
  }

  .page-text {
    position: relative;
    display: block;
    height: 94%;
    width: 93%;
    margin-top: 25px;
    margin-right: auto;
    margin-left: auto;
    font-family: Georgia, Times, "Times New Roman", serif;
  }

  .page-text h1 {
    font-size: 4vw;
  }
  .page-text h2 {
    font-size: 4vw;
  }
  .page-text h3 {
    font-size: 4vw;
  }
  .page-text h4 {
    font-size: 3vw;
  }
  .page-text h5 {
    font-size: 2vw;
  }
  .page-text h6 {
    font-size: 1vw;
  }
  .page-right-2 {
    padding-left: 9%;
  }
}

@media (max-width: 767px) {
  .book-wrap {
    width: 80vw;
    margin-bottom: 2vw;
  }
  .layer-text {
    width: 94%;
    -webkit-transform: translate3d(0px, 0px, 20px);
    transform: translate3d(0px, 0px, 20px);
  }
  .layer-text.right {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-transform: translate3d(-34px, 0px, 24px);
    transform: translate3d(-34px, 0px, 24px);
  }
  .page-left-2 {
    border-top-left-radius: 23%;
    -webkit-transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg)
      translate(9px, 0px);
    transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg) translate(9px, 0px);
  }
  .corner-fold {
    width: 4.5vw;
    height: 4.5vw;
    max-height: 29px;
    min-width: 29px;
    background-image: -webkit-linear-gradient(
      310deg,
      transparent 48%,
      #f0f0f0 49%,
      #fff 50%,
      #f6f6f6
    );
    background-image: linear-gradient(
      140deg,
      transparent 48%,
      #f0f0f0 49%,
      #fff 50%,
      #f6f6f6
    );
  }
  .page-text {
    margin-top: 2vw;
  }
  .page-text h3 {
    margin-top: 0vw;
    font-size: 3vw;
  }
  .layer2 {
    -webkit-transform: translate3d(2px, 0px, 6px);
    transform: translate3d(2px, 0px, 6px);
  }
  .layer2.right {
    -webkit-transform: translate3d(-5px, 0px, 6px);
    transform: translate3d(-5px, 0px, 6px);
  }
  .layer3 {
    -webkit-transform: translate3d(4px, 0px, 12px);
    transform: translate3d(4px, 0px, 12px);
  }
  .layer3.right {
    -webkit-transform: translate3d(-10px, 0px, 12px);
    transform: translate3d(-10px, 0px, 12px);
  }
  .layer4 {
    -webkit-transform: translate3d(6px, 0px, 18px);
    transform: translate3d(6px, 0px, 18px);
  }
  .layer4.right {
    -webkit-transform: translate3d(-15px, 0px, 18px);
    transform: translate3d(-15px, 0px, 18px);
  }
  .page-right-2 {
    width: 92%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
  }
}

@media (max-width: 479px) {
  .scene {
    height: 69vw;
  }
  .corner-fold {
    width: 5.5vw;
    height: 5.5vw;
    min-width: 21px;
  }
}