html,
body {
  min-height: auto;
}

body {
  background: url(/town/play/picturebook/images/natural-wooden-background.jpg);
  background-size: cover;
}

.layout-screen {
  min-height: auto;
}
.layout-main {
  width: 100vw;
  overflow: hidden;
  padding-bottom: 0;
}
.layout-corner {
  margin-bottom: 0px;
}
.layout-book {
  padding: 0 3%;
  padding-bottom: 30px;
  padding-top: 30px;
}

.container-book {
  position: relative;
  box-shadow: none;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 0;
  overflow: visible;
  background-color: transparent;
}

#picturebook {
  width: 100%;
  height: auto;
  margin: 0 auto 0px 0;
  max-width: 1200px;
  max-height: 605px;
}
#picturebook img {
  display: block;
  width: 100%;
}
#picturebook .page.-r::before, #picturebook .page.-l::before {
  content: "";
  width: 10px;
  height: 100%;
  position: absolute;
  background: red;
}
#picturebook .page.-r::before {
  border-left: 1px solid #ccc;
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
#picturebook .page.-l::before {
  right: 0;
  background: linear-gradient(to right, rgba(254, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
}
.nav-book {
  max-width: 1200px;
  text-align: center;
  list-style: none;
  width: 100%;
  margin: 0 auto 30px auto;
  display: flex;
}
.nav-book > li {
  width: 50%;
}
.nav-book > li .button {
  cursor: pointer;
  margin: 0 auto;
  display: block;
  width: 30px;
  height: 30px;
  position: relative;
  transition: transform 0.3s;
}
.nav-book > li .button:after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;
  background-color: #fff;
}
.nav-book > li .button::before {
  content: "";
  border: 8px solid transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-20%, -50%);
}
.nav-book > li .button#prev::before {
  border-right: 10px solid #ebb217;
  transform: translate(-80%, -50%);
}
.nav-book > li .button#next::before {
  border-left: 10px solid #ebb217;
}
.nav-book > li #prev {
  display: none;
}

ul::after {
  content: "";
  display: block;
  clear: both;
}

#prevpage, #nextpage {
  cursor: pointer;
}

@media (orientation: landscape) and (max-width: 812px) {
  .layout-header,
.layout-corner,
.layout-bread,
.layout-footer {
    display: none;
  }
  .layout-main {
    padding-top: 0;
  }
  .layout-book {
    padding: 0 8%;
  }
  body {
    background-color: #a7855f;
  }
  .nav-book {
    position: fixed;
    top: 50%;
  }
  .nav-book .button {
    position: absolute !important;
    margin-top: -15px !important;
  }
  .nav-book .button:hover {
    transform: scale(1) !important;
  }
  .nav-book .button::after {
    border: 1px solid #fff;
  }
  .nav-book #next {
    right: 5px;
  }
  .nav-book #prev {
    left: 5px;
  }
}/*# sourceMappingURL=book.css.map */