/*****

Little Clothbound Classics


***/
@font-face {
  font-family: "LTC Caslon";
  src: url("../fonts/ITCFoundersCaslon42Roman_normal_normal.woff2") format("woff2"), url("../fonts/ITCFoundersCaslon42Roman_normal_normal.woff") format("woff"); }
@font-face {
  font-family: "LTC Caslon";
  font-style: italic;
  src: url("../fonts/ITCFoundersCaslon42Italic_italic_normal.woff2") format("woff2"), url("../fonts/ITCFoundersCaslon42Italic_italic_normal.woff") format("woff"); }
:root {
  --serif: "LTC Caslon", serif;
  --sans-serif: gill-sans-nova, sans-serif;
  --doc-height:100%; }

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  width: 100%;
  overflow-x: hidden;
  height: 100%;
  scroll-behavior: smooth; }

*,
*:before,
*:after {
  box-sizing: inherit; }

body {
  color: #ffffff;
  background-color: #e54649;
  font-family: var(--serif); }

/* Start */
aside {
  background-color: transparent;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: -999;
  visibility: hidden;
  padding: 3rem 8vw 0;
  overflow-y: scroll;
  color: #b3bd78;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transition: background-color ease-in 0.1s; }
  aside::-webkit-scrollbar {
    display: none; }
  aside.open {
    z-index: 5;
    background-color: #293636;
    visibility: visible; }
    aside.open .modal_inner {
      opacity: 1; }
  aside .modal_inner {
    opacity: 0;
    transition: opacity ease-in 0.25s; }
  aside .modal_inner > a {
    display: block;
    color: inherit;
    flex-basis: 100%;
    text-decoration: none; }
  aside .modal_inner h3 {
    font-weight: 400;
    display: block;
    flex-basis: 100%;
    color: white;
    font-size: 1.7rem;
    margin: 2 rem 0 1rem; }
  aside h2 {
    font-size: 3rem;
    font-weight: 400;
    margin: 0 0 2rem; }
  aside ul {
    padding: 0;
    list-style: none; }
    aside ul li:hover a {
      color: #e3e7ce;
      cursor: pointer; }
    aside ul li a {
      transition: color ease 0.2s;
      color: inherit;
      text-decoration: none;
      font-size: min(5vw, 1.6rem);
      display: inline-block;
      padding-bottom: 1rem;
      width: 100%; }
      aside ul li a span {
        font-style: italic; }

.book-content {
  width: min(98%, 820px);
  z-index: 1;
  position: relative;
  margin: 0 auto; }
  .book-content p:first-child {
    margin-top: 3rem; }
  .book-content * {
    color: var(--detailColor);
    font-size: 1.4rem;
    text-align: center; }
    .book-content *::selection {
      color: var(--backgroundColor);
      background-color: var(--detailColor); }
  .book-content .penguin_logo {
    cursor: pointer;
    opacity: 0;
    width: 200px;
    margin: 2rem auto 0;
    transition: opacity ease 0.8s;
    transition-delay: 0.4s; }
    .book-content .penguin_logo svg {
      max-width: 65px;
      margin: 0 auto;
      display: block; }
      .book-content .penguin_logo svg path {
        fill: var(--detailColor); }
      .book-content .penguin_logo svg line {
        stroke: var(--detailColor); }
    .book-content .penguin_logo.is-inview {
      opacity: 1; }

.book-section {
  padding: 90px 30px 120px;
  outline: 4px solid var(--detailColor);
  outline-offset: -15px;
  background-color: var(--backgroundColor);
  position: relative;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100); }
  .book-section .diamond {
    position: relative;
    display: flex;
    z-index: 1;
    justify-content: center; }
    .book-section .diamond h2 {
      position: absolute;
      text-align: center;
      height: 60%;
      display: flex;
      flex-direction: column;
      margin: 0;
      align-items: center;
      justify-content: center;
      width: min(60%, calc(410px * .6));
      top: 20%;
      font-weight: 400;
      font-family: var(--serif);
      font-size: min(7vw, 2.1rem);
      color: var(--detailColor); }
      .book-section .diamond h2 span.b_author {
        margin-bottom: 15px; }
      .book-section .diamond h2 span::selection {
        color: var(--backgroundColor);
        background-color: var(--detailColor); }
    .book-section .diamond svg {
      fill: var(--detailColor);
      max-width: 410px; }
      @supports (min-width: -webkit-fill-available) {
        .book-section .diamond svg {
          height: min(calc(100vw * 1.1), 475px); } }

footer {
  background-color: black;
  padding: 20px 0; }
  footer div.footer_inner {
    max-width: 1390px;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto; }

.footer_prh_left {
  display: flex;
  align-items: center;
  justify-content: flex-start; }
  .footer_prh_left img {
    width: 100%;
    max-width: 70px;
    margin-right: 15px; }
  .footer_prh_left p {
    font-family: "Arial";
    font-size: 12px;
    color: white; }
    .footer_prh_left p a {
      font-size: inherit;
      color: #c7511f;
      display: inline-block;
      margin-top: 5px;
      text-decoration: none; }
      .footer_prh_left p a:hover {
        text-decoration: underline; }

.footer_prh_right {
  order: -1;
  margin-bottom: 20px; }
  .footer_prh_right p {
    font-family: "Arial";
    font-size: 11px;
    color: #757474; }
    .footer_prh_right p a {
      font-size: inherit;
      color: white;
      display: inline-block;
      margin-bottom: 5px;
      text-decoration: none; }
      .footer_prh_right p a:hover {
        text-decoration: underline; }

.in_preparation_text {
  font-size: min(5vw, 1.6rem);
  margin-top: 0; }

main {
  width: 100%; }

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  position: relative;
  transition: background ease 0.2s;
  margin-bottom: 3rem;
  background: url("../images/diamond.png") center center/min(96vw, 720px) auto #e54649 no-repeat; }
  .landing h1 {
    text-align: center;
    font-size: clamp(36px, 10vw, 75px);
    font-weight: 400;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
    .landing h1 span {
      display: block; }
      .landing h1 span::selection {
        background-color: #590409; }
  .landing a {
    color: inherit;
    text-decoration: none;
    font-family: var(--sans-serif);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 200;
    position: absolute;
    bottom: 5%;
    display: flex;
    flex-direction: column;
    align-items: center; }
    .landing a::visited {
      color: inherit; }
    .landing a span {
      display: inline-block;
      margin-bottom: 15px; }
    @media (max-height: 560px) {
      .landing a img {
        display: none; } }

.main_logo {
  width: 60px;
  margin-bottom: 15px; }
  .main_logo svg path {
    fill: white; }
  .main_logo svg line {
    stroke: white; }

section > div:not(.diamond):not(.book-content) {
  z-index: 0; }

.modal_covers {
  display: none; }

.modal_inner {
  display: flex;
  flex-wrap: wrap; }

/* Book Sections */
[data-section-id="babettes-feast"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="babettes-feast"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="babettes-feast"]:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 90%;
  z-index: 0;
  background-image: url("../images/babettes-feast/border.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: -15px; }
  @media (max-width: 500px) {
    [data-section-id="babettes-feast"]:before {
      background-size: 300% auto; } }
[data-section-id="babettes-feast"]:after {
  display: none;
  content: "";
  position: absolute;
  bottom: 15px;
  height: 70px;
  left: 15px;
  width: calc(100% - 30px);
  background-image: url("../images/babettes-feast/border.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  background-position: bottom; }
  @media (max-width: 400px) {
    [data-section-id="babettes-feast"]:after {
      background-size: 300% auto; } }
[data-section-id="babettes-feast"] .section_image {
  position: absolute;
  background-repeat: no-repeat; }
  [data-section-id="babettes-feast"] .section_image[class^="dish"] {
    display: none;
    background-image: url("../images/babettes-feast/dish.png");
    background-size: 100% auto; }
  [data-section-id="babettes-feast"] .section_image.dish_1 {
    width: 140px;
    height: 118px;
    top: 27%;
    left: 30px; }
  [data-section-id="babettes-feast"] .section_image.dish_2 {
    background-position: bottom;
    width: 140px;
    height: 118px;
    top: 13%;
    right: 30px; }
  [data-section-id="babettes-feast"] .section_image.dish_3 {
    background-position: bottom;
    width: 30px;
    height: 123px;
    top: 9%;
    left: 15px;
    background-size: auto 200%; }
  [data-section-id="babettes-feast"] .section_image[class^="star"] {
    background-image: url("../images/babettes-feast/star.jpg");
    background-size: 20px;
    width: 20px;
    height: 20px; }
  [data-section-id="babettes-feast"] .section_image.star_1 {
    top: max(100px, 3%);
    left: 30px; }
  [data-section-id="babettes-feast"] .section_image.star_2 {
    top: max(130px, 3%);
    right: 15px;
    width: 10px; }
  [data-section-id="babettes-feast"] .section_image.star_3 {
    top: min(400px, calc(100vw + 30px));
    right: 55px;
    width: 20px; }
  [data-section-id="babettes-feast"] .section_image.star_4, [data-section-id="babettes-feast"] .section_image.star_5, [data-section-id="babettes-feast"] .section_image.star_6, [data-section-id="babettes-feast"] .section_image.star_9 {
    display: none; }
  [data-section-id="babettes-feast"] .section_image.star_7 {
    bottom: 30px;
    left: 20%; }
  [data-section-id="babettes-feast"] .section_image.star_8 {
    bottom: 15px;
    right: 14%;
    height: 12px; }

[data-section-id="big-blonde"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="big-blonde"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="big-blonde"]:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 90%;
  z-index: 0;
  background-image: url("../images/big-blonde/background.png");
  background-size: min(38vw, 180px) auto;
  background-repeat: repeat-x;
  background-position-x: center; }

[data-section-id="breakfast-at-tiffanys"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="breakfast-at-tiffanys"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="breakfast-at-tiffanys"]:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 90%;
  z-index: 0;
  background-image: url("../images/breakfast-at-tiffanys/background.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: -15px; }
  @media (max-width: 400px) {
    [data-section-id="breakfast-at-tiffanys"]:before {
      background-size: 300% auto; } }
[data-section-id="breakfast-at-tiffanys"]:after {
  content: "";
  position: absolute;
  bottom: 15px;
  height: 45px;
  left: 15px;
  width: calc(100% - 30px);
  background-image: url("../images/breakfast-at-tiffanys/background.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: center; }
  @media (max-width: 400px) {
    [data-section-id="breakfast-at-tiffanys"]:after {
      background-size: 300% auto; } }

[data-section-id="cosmicomics"] div.cosmicomics_border {
  background-image: url("../images/cosmicomics/cosmicomics_border.png");
  position: absolute;
  width: calc(100% - 30px);
  height: 40px;
  background-size: auto 40px; }
  [data-section-id="cosmicomics"] div.cosmicomics_border.top {
    top: 15px;
    left: 15px; }
  [data-section-id="cosmicomics"] div.cosmicomics_border.bottom {
    bottom: 15px;
    left: 15px;
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1); }
[data-section-id="cosmicomics"] div.section_image {
  position: absolute;
  z-index: 0;
  background-image: url("../images/cosmicomics/cosmicomics_image.png");
  height: 140px;
  width: 60px;
  background-size: 140px; }
  [data-section-id="cosmicomics"] div.section_image.img_1 {
    right: 15px;
    top: 31%;
    width: 30px; }
  [data-section-id="cosmicomics"] div.section_image.img_2 {
    left: 11px;
    top: 67px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  [data-section-id="cosmicomics"] div.section_image.img_3 {
    width: 80px;
    left: 42px;
    bottom: -18px;
    background-size: 200px;
    height: 140px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }
  [data-section-id="cosmicomics"] div.section_image.img_4 {
    width: 50px;
    left: 15px;
    top: 43%;
    height: 220px;
    background-image: none;
    display: none; }
    [data-section-id="cosmicomics"] div.section_image.img_4 .inner {
      width: 50px;
      background-size: 200px;
      height: 220px;
      background-image: url("../images/cosmicomics/cosmicomics_image.png");
      background-repeat: no-repeat;
      -webkit-transform: scale(-1, -1);
      transform: scale(-1, -1); }
  [data-section-id="cosmicomics"] div.section_image.img_5 {
    width: 70px;
    right: 30%;
    top: 15px;
    background-size: 330px;
    height: 300px;
    -webkittransform: rotate(-90deg);
    transform: rotate(-90deg);
    background-repeat: no-repeat;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    display: none; }

[data-section-id="hell-screen"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="hell-screen"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 110px;
    width: 110px;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    z-index: -1;
    -webkit-transform: rotate(46deg);
    transform: rotate(46deg);
    display: none; }
  [data-section-id="hell-screen"] .diamond::before {
    content: "";
    background-color: var(--backgroundColor);
    height: 110px;
    width: 110px;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(-46deg);
    transform: rotate(-46deg);
    display: none; }
[data-section-id="hell-screen"] .bottom-border {
  position: absolute;
  width: calc(100% - 30px);
  height: 120px;
  background-image: url("../images/hell-screen/border-bottom.png");
  background-repeat: no-repeat;
  background-size: 200%;
  left: 15px;
  bottom: 15px;
  background-position: bottom; }
  @media (min-width: 600px) {
    [data-section-id="hell-screen"] .bottom-border {
      background-size: 150%; } }
[data-section-id="hell-screen"] .left_side {
  position: absolute;
  width: calc((100% - 340px) / 2);
  top: 0px;
  left: 15px;
  height: 410px;
  background-image: url("../images/hell-screen/sides.png");
  background-size: auto 320px;
  background-position: bottom right;
  background-repeat: no-repeat;
  display: none; }
[data-section-id="hell-screen"] .right_side {
  position: absolute;
  width: calc((100% - 340px) / 2);
  top: 210px;
  right: 15px;
  height: 410px;
  background-image: url("../images/hell-screen/sides.png");
  background-size: auto 320px;
  background-position: top left;
  background-repeat: no-repeat;
  display: none; }
[data-section-id="hell-screen"] .top-border {
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 120px;
  background-image: url("../images/hell-screen/border-bottom.png");
  background-repeat: no-repeat;
  background-size: 200%;
  background-position: bottom left;
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1); }
  @media (min-width: 600px) {
    [data-section-id="hell-screen"] .top-border {
      background-size: 150%; } }

[data-section-id="ice"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="ice"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="ice"]:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 90%;
  z-index: 0;
  background-image: url("../images/ice/background.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: -15px; }
  @media (max-width: 400px) {
    [data-section-id="ice"]:before {
      background-size: 300% auto; } }
[data-section-id="ice"]:after {
  content: "";
  position: absolute;
  bottom: 15px;
  height: 220px;
  left: 15px;
  width: calc(100% - 30px);
  background-image: url("../images/ice/background.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1);
  display: none; }
  @media (max-width: 400px) {
    [data-section-id="ice"]:after {
      background-size: 300% auto; } }

[data-section-id="lady-susan"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="lady-susan"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 220px;
    width: 220px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="lady-susan"] div.border-bottom {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 30px;
  background-image: url("../images/lady-susan/pen.png");
  background-repeat: repeat-x;
  background-size: auto 150px;
  background-position: bottom;
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1); }
[data-section-id="lady-susan"] div.border-top {
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 150px;
  background-image: url("../images/lady-susan/pen.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: top center; }

[data-section-id="lolly-willowes"] div.section_image {
  position: absolute;
  z-index: 0;
  --imageSize:120px;
  width: var(--imageSize);
  height: var(--imageSize);
  background-size: calc(2 * var(--imageSize)); }
  [data-section-id="lolly-willowes"] div.section_image.mob_img_1 {
    top: 15px;
    left: 45px;
    background-image: url("../images/lolly-willowes/lollywillowes_mob_1.png"); }
  [data-section-id="lolly-willowes"] div.section_image.mob_img_2 {
    top: 370px;
    right: 15px;
    background-image: url("../images/lolly-willowes/lollywillowes_mob_1.png");
    background-position: top right; }
  [data-section-id="lolly-willowes"] div.section_image.mob_img_3 {
    bottom: 15px;
    left: 15px;
    background-image: url("../images/lolly-willowes/lollywillowes_mob_1.png");
    background-position: bottom left; }
  [data-section-id="lolly-willowes"] div.section_image.img_4 {
    top: 5%;
    right: 5%;
    background-image: url("../images/lolly-willowes/lollywillowes_mob_1.png");
    background-position: bottom right;
    display: none; }
  [data-section-id="lolly-willowes"] div.section_image.img_5 {
    top: 15px;
    right: 20%;
    background-image: url("../images/lolly-willowes/lollywillowes_mob_2.png");
    background-position: top right;
    height: 60px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    display: none; }
  [data-section-id="lolly-willowes"] div.section_image.img_6 {
    top: 40%;
    right: 5%;
    background-image: url("../images/lolly-willowes/lollywillowes_mob_2.png");
    background-position: top left;
    display: none; }
  [data-section-id="lolly-willowes"] div.section_image.img_7 {
    top: 33%;
    left: 15px;
    background-image: url("../images/lolly-willowes/lollywillowes_mob_2.png");
    background-position: top left;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    width: 90px;
    display: none; }
  [data-section-id="lolly-willowes"] div.section_image.img_8 {
    top: 55%;
    left: 4%;
    background-image: url("../images/lolly-willowes/lollywillowes_mob_2.png");
    background-position: top right;
    display: none; }
  [data-section-id="lolly-willowes"] div.section_image.img_9 {
    bottom: 25%;
    right: 4%;
    background-image: url("../images/lolly-willowes/lollywillowes_mob_2.png");
    background-position: bottom left;
    display: none; }
  [data-section-id="lolly-willowes"] div.section_image.img_10 {
    height: 100px;
    --imageSize:180px;
    bottom: 15px;
    right: 3.3%;
    background-image: url("../images/lolly-willowes/lollywillowes_mob_2.png");
    background-position: top right;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    display: none; }

[data-section-id="metamorphosis"] {
  --size:120px;
  padding-bottom: calc(30px + var(--size)); }
  @media (min-width: 450px) {
    [data-section-id="metamorphosis"] {
      --size:150px; } }
  [data-section-id="metamorphosis"] div.corner {
    background-image: url("../images/metamorphosis/corner_image.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: absolute;
    width: var(--size);
    height: var(--size); }
    [data-section-id="metamorphosis"] div.corner.bottom_left {
      bottom: 15px;
      left: 15px;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg); }
    [data-section-id="metamorphosis"] div.corner.bottom_right {
      bottom: 15px;
      right: 15px; }
    [data-section-id="metamorphosis"] div.corner.top_left {
      top: 15px;
      left: 15px;
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg); }
    [data-section-id="metamorphosis"] div.corner.top_right {
      top: 15px;
      right: 15px;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg); }
  [data-section-id="metamorphosis"] div.horiz_border {
    --height:13vw;
    width: 50%;
    height: var(--height);
    background-image: url("../images/metamorphosis/horiz_border.png");
    background-repeat: no-repeat;
    background-position: calc((-1 * var(--height)) - 18px) bottom;
    background-size: auto var(--height);
    position: absolute;
    z-index: 0;
    left: 25%; }
    [data-section-id="metamorphosis"] div.horiz_border.bottom {
      bottom: 14px;
      -webkit-transform: scale(1, -1);
      transform: scale(1, -1); }
    [data-section-id="metamorphosis"] div.horiz_border.top {
      -webkit-transform: scale(-1, 1);
      transform: scale(-1, 1);
      top: 14px; }
  [data-section-id="metamorphosis"] div.vert_border {
    display: none;
    background-image: url("../images/metamorphosis/vert_border.png");
    height: calc(100% - 90px);
    width: 100px;
    position: absolute;
    background-size: 60%;
    background-repeat: repeat-y;
    top: 15px; }
    [data-section-id="metamorphosis"] div.vert_border.left {
      left: 15px; }
    [data-section-id="metamorphosis"] div.vert_border.right {
      right: 15px;
      -webkit-transform: scale(-1, -1);
      transform: scale(-1, -1); }

[data-section-id="of-ghosts-and-goblins"] div.hands_1 {
  background-image: url("../images/of-ghosts-and-goblins/hand_image_1.png");
  width: calc(50% - 15px);
  position: absolute;
  top: 14px;
  right: 14px;
  height: 120px;
  background-repeat: no-repeat;
  background-size: auto 120px;
  background-position: top left; }
[data-section-id="of-ghosts-and-goblins"] div.hands_2 {
  background-image: url("../images/of-ghosts-and-goblins/ghosts_goblins.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  width: 90px;
  height: 60px;
  position: absolute;
  top: 70px;
  left: 15px;
  background-size: 230%; }
[data-section-id="of-ghosts-and-goblins"] div.hands_3 {
  background-image: url("../images/of-ghosts-and-goblins/hand_image_2.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  height: 120px;
  position: absolute;
  bottom: 15px;
  right: 15px;
  background-size: 100%;
  aspect-ratio: 1.8/1; }
[data-section-id="of-ghosts-and-goblins"] div.hands_4 {
  background-image: url("../images/of-ghosts-and-goblins/ghosts_goblins.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  width: 70px;
  height: 90px;
  position: absolute;
  top: 300px;
  left: 15px;
  background-size: 410%;
  background-position-x: -52px;
  display: none; }
[data-section-id="of-ghosts-and-goblins"] div.hands_5 {
  background-image: url("../images/of-ghosts-and-goblins/ghosts_goblins.png");
  background-repeat: no-repeat;
  background-position: top left;
  width: 200px;
  height: 160px;
  position: absolute;
  top: 370px;
  right: 12px;
  background-size: 200%;
  display: none; }
[data-section-id="of-ghosts-and-goblins"] div.hands_6 {
  background-image: url("../images/of-ghosts-and-goblins/ghosts_goblins.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  width: 180px;
  height: 35px;
  position: absolute;
  bottom: 15px;
  left: 11px;
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
  background-size: 200%; }
[data-section-id="of-ghosts-and-goblins"] div.hands_7 {
  position: absolute;
  top: 15px;
  left: 135px;
  display: none; }
  [data-section-id="of-ghosts-and-goblins"] div.hands_7 .inner {
    background-image: url("../images/of-ghosts-and-goblins/hand_image_1.png");
    background-repeat: no-repeat;
    width: 300px;
    height: 150px;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    background-size: 150%;
    background-position-y: -70px; }

[data-section-id="passing"] .passing_image {
  background-image: url("../images/passing/passing_image.png");
  position: absolute;
  background-repeat: no-repeat; }
  [data-section-id="passing"] .passing_image.image_1 {
    width: 75px;
    height: 110px;
    top: 10px;
    right: 15px;
    background-size: 230px; }
  [data-section-id="passing"] .passing_image.image_2 {
    width: 75px;
    height: 110px;
    top: 70px;
    left: 15px;
    background-size: 230px;
    background-position-x: -70px; }
  [data-section-id="passing"] .passing_image.image_3 {
    width: 100px;
    height: 100px;
    background-size: 200px;
    background-position: bottom left;
    right: -1px;
    top: 100vw; }
    @media (min-width: 500px) {
      [data-section-id="passing"] .passing_image.image_3 {
        top: 460px; } }
  [data-section-id="passing"] .passing_image.image_4 {
    width: 130px;
    height: 130px;
    background-size: 260px;
    background-position: bottom right;
    left: 0px;
    bottom: -22px;
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg); }
  [data-section-id="passing"] .passing_image.image_5 {
    width: 150px;
    height: 150px;
    top: 380px;
    right: calc(50% - 150px - 300px);
    background-size: 300px;
    background-position-x: top left;
    display: none;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    display: none; }
  [data-section-id="passing"] .passing_image.image_6 {
    width: 78px;
    height: 150px;
    top: 15px;
    left: calc(50% - 150px - 60px);
    background-size: 300px;
    background-position: -53px bottom;
    display: none;
    -webkit-transform: rotateY(180deg) rotate(90deg);
    transform: rotateY(180deg) rotate(90deg);
    -webkit-transform-origin: top left;
    transform-origin: top left; }
  [data-section-id="passing"] .passing_image.image_7 {
    width: 160px;
    height: 160px;
    background-size: 320px;
    background-position: bottom right;
    left: calc(50% - 160px - 200px);
    top: 400px;
    display: none; }
  [data-section-id="passing"] .passing_image.image_8 {
    width: 80px;
    height: 160px;
    background-size: 320px;
    right: 15px;
    top: 66%;
    display: none; }
  [data-section-id="passing"] .passing_image.image_9 {
    width: 160px;
    height: 60px;
    background-size: 320px;
    left: calc(50% - 160px);
    bottom: 15px;
    display: none; }
  [data-section-id="passing"] .passing_image.image_10 {
    width: 80px;
    height: 160px;
    background-size: 320px;
    left: 15px;
    top: 50%;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    display: none; }
  [data-section-id="passing"] .passing_image.image_11 {
    width: 160px;
    height: 60px;
    background-size: 320px;
    left: calc(50%);
    bottom: 15px; }

[data-section-id="reginalds-christmas-revel"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="reginalds-christmas-revel"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="reginalds-christmas-revel"]:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 90%;
  z-index: 0;
  background-image: url("../images/reginalds-christmas-revel/background.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: -15px; }
  @media (max-width: 400px) {
    [data-section-id="reginalds-christmas-revel"]:before {
      background-size: 300% auto; } }
[data-section-id="reginalds-christmas-revel"]:after {
  content: "";
  position: absolute;
  bottom: 15px;
  height: 70px;
  left: 15px;
  width: calc(100% - 30px);
  background-image: url("../images/reginalds-christmas-revel/background.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: center; }
  @media (max-width: 400px) {
    [data-section-id="reginalds-christmas-revel"]:after {
      background-size: 300% auto; } }

[data-section-id="snow-country"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="snow-country"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="snow-country"]:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 90%;
  z-index: 0;
  background-image: url("../images/snow-country/background.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: -15px; }
  @media (max-width: 500px) {
    [data-section-id="snow-country"]:before {
      background-size: 300% auto; } }
[data-section-id="snow-country"]:after {
  content: "";
  position: absolute;
  bottom: 15px;
  height: 100px;
  left: 15px;
  width: calc(100% - 30px);
  background-image: url("../images/snow-country/background.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  background-position-y: 110%; }
  @media (max-width: 400px) {
    [data-section-id="snow-country"]:after {
      background-size: 260% auto;
      background-position: center 40%; } }
[data-section-id="snow-country"] .section_image {
  position: absolute; }
  [data-section-id="snow-country"] .section_image.corner_image_1 {
    display: none;
    top: 11px;
    left: 11px;
    height: 340px;
    width: 150px;
    background-image: url("../images/snow-country/ephemera-1.png");
    background-size: 100% auto;
    background-repeat: no-repeat; }
  [data-section-id="snow-country"] .section_image.corner_image_2 {
    display: none;
    top: 11px;
    right: 11px;
    height: 340px;
    width: 340px;
    background-image: url("../images/snow-country/ephemera-2.png");
    background-size: 100% auto;
    background-repeat: no-repeat; }
  [data-section-id="snow-country"] .section_image.dot_1 {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url("../images/snow-country/dot.jpg");
    top: 30px;
    left: 30px; }
  [data-section-id="snow-country"] .section_image.dot_2 {
    width: 40px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url("../images/snow-country/dot.jpg");
    top: 15px;
    right: 35%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  [data-section-id="snow-country"] .section_image.dot_3 {
    width: 20px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 200% auto;
    background-position: right;
    background-image: url("../images/snow-country/dot.jpg");
    top: 300px;
    left: 15px; }
  [data-section-id="snow-country"] .section_image.dot_4 {
    width: 40px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url("../images/snow-country/dot.jpg");
    bottom: 15px;
    left: 33%;
    z-index: 1; }

[data-section-id="street-haunting"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="street-haunting"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="street-haunting"]:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 90%;
  z-index: 0;
  background-image: url("../images/street-haunting/background.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: -15px; }
  @media (max-width: 500px) {
    [data-section-id="street-haunting"]:before {
      background-size: 300% auto; } }
[data-section-id="street-haunting"]:after {
  content: "";
  position: absolute;
  bottom: 15px;
  height: 100px;
  left: 15px;
  width: calc(100% - 30px);
  background-image: url("../images/street-haunting/background.jpg");
  background-size: 110% auto;
  background-repeat: no-repeat;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  background-position-y: 110%; }
  @media (max-width: 400px) {
    [data-section-id="street-haunting"]:after {
      background-size: 260% auto;
      background-position: center 40%; } }

[data-section-id="the-ballad-of-the-sad-cafe"] .ballad_border-bottom {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 40px;
  background-image: url("../images/the-ballad-of-the-sad-cafe/border_horiz.png");
  background-repeat: repeat-x;
  background-size: auto 40px;
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1); }
[data-section-id="the-ballad-of-the-sad-cafe"] .ballad_border-left {
  position: absolute;
  top: 57px;
  left: 15px;
  width: 40px;
  height: calc(100% - 114px);
  background-image: url("../images/the-ballad-of-the-sad-cafe/border.png");
  background-repeat: repeat-y;
  background-size: 40px auto;
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
  display: none; }
[data-section-id="the-ballad-of-the-sad-cafe"] .ballad_border-right {
  position: absolute;
  top: 57px;
  right: 15px;
  width: 40px;
  height: calc(100% - 114px);
  background-image: url("../images/the-ballad-of-the-sad-cafe/border.png");
  background-repeat: repeat-y;
  background-size: 40px auto;
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
  display: none; }
[data-section-id="the-ballad-of-the-sad-cafe"] .ballad_border-top {
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 40px;
  background-image: url("../images/the-ballad-of-the-sad-cafe/border_horiz.png");
  background-repeat: repeat-x;
  background-size: auto 40px; }

[data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image {
  position: absolute; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.right-hand-side, [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.left-hand-side {
    display: none;
    top: 11px;
    height: calc(100% - 22px);
    width: 45px;
    background-image: url("../images/the-adventure-of-the-blue-carbuncle/blue-carbuncle_grass_vertical.png");
    background-size: 100% auto;
    background-repeat: repeat-y;
    z-index: 1; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.bottom-side {
    bottom: 15px;
    width: calc(100% - 30px);
    left: 15px;
    height: 30px;
    background-image: url("../images/the-adventure-of-the-blue-carbuncle/blue-carbuncle_grass.png");
    background-size: auto 100%;
    background-repeat: repeat-x; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.geese-horizontal {
    width: calc(100% - 30px);
    top: 15px;
    left: 15px;
    height: 110px;
    background-image: url("../images/the-adventure-of-the-blue-carbuncle/blue-carbuncle_geese-horiz.jpg");
    background-position: top center;
    background-size: auto 100%; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.goose-left, [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.goose-right {
    display: none; }
[data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container {
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  z-index: 0; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    background-color: white; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_1 {
      top: 150px;
      left: 15px; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_2 {
      top: 120px;
      left: calc(50% - 130px);
      width: 8px;
      height: 8px; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_3 {
      top: 380px;
      left: 30px; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_4 {
      display: none; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_5 {
      top: 150px;
      right: 15px; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_6 {
      top: 120px;
      right: calc(50% - 100px);
      width: 5px;
      height: 5px; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_7 {
      top: 380px;
      right: 30px; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_8 {
      top: 340px;
      right: 10%;
      width: 8px;
      height: 8px; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_9 {
      bottom: 60px;
      right: 10%;
      width: 8px;
      height: 8px; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_10 {
      bottom: 48px;
      left: calc(50% - 100px);
      width: 12px;
      height: 12px; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_11 {
      bottom: 68px;
      left: 30px;
      width: 5px;
      height: 5px; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_12 {
      bottom: 30%;
      left: 80px;
      width: 5px;
      height: 5px;
      display: none; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_13 {
      bottom: auto;
      top: 330px;
      left: -3px;
      width: 10px;
      height: 10px; }
    [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_14 {
      bottom: auto;
      top: 330px;
      right: -3px;
      width: 10px;
      height: 10px; }

[data-section-id="the-cossacks"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="the-cossacks"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="the-cossacks"]:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 90%;
  z-index: 0;
  background-image: url("../images/the-cossacks/background.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: -15px; }
  @media (max-width: 500px) {
    [data-section-id="the-cossacks"]:before {
      background-size: 300% auto; } }
[data-section-id="the-cossacks"]:after {
  content: "";
  position: absolute;
  bottom: 15px;
  height: 60px;
  left: 15px;
  width: calc(100% - 30px);
  background-image: url("../images/the-cossacks/background.jpg");
  background-size: 110% auto;
  background-repeat: no-repeat;
  background-position-y: -5px; }
  @media (max-width: 400px) {
    [data-section-id="the-cossacks"]:after {
      background-size: 260% auto; } }
[data-section-id="the-cossacks"] [class^="cossacks_dot"] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  display: none; }
[data-section-id="the-cossacks"] .cossacks_dot_1 {
  top: 50%;
  lefT: 60px; }
[data-section-id="the-cossacks"] .cossacks_dot_2 {
  top: 80%;
  lefT: 30px; }
[data-section-id="the-cossacks"] .cossacks_dot_3 {
  top: 70%;
  left: 150px; }
[data-section-id="the-cossacks"] .cossacks_dot_4 {
  top: 50%;
  right: 60px; }
[data-section-id="the-cossacks"] .cossacks_dot_5 {
  top: 80%;
  right: 30px; }
[data-section-id="the-cossacks"] .cossacks_dot_6 {
  top: 61%;
  right: 150px; }

[data-section-id="the-gift-of-the-magi"] .section_image.magi_ribbon {
  background-image: url("../images/the-gift-of-the-magi/magi_ribbon.png");
  width: 140px;
  max-width: 27%;
  height: 200px;
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_ribbon.ribbon_top-left {
    top: 11px;
    left: 11px;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1); }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_ribbon.ribbon_top-right {
    top: 11px;
    right: 11px; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_ribbon.ribbon_bottom-left {
    bottom: 11px;
    left: 11px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    display: none; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_ribbon.ribbon_bottom-right {
    bottom: 11px;
    right: 11px;
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1);
    display: none; }
[data-section-id="the-gift-of-the-magi"] .section_image.magi_dots {
  background-image: url("../images/the-gift-of-the-magi/magi_dots.png");
  width: 30px;
  height: 30px;
  background-size: 60px;
  background-repeat: no-repeat;
  position: absolute; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_1 {
    top: 20px;
    left: 33%;
    background-position: top left; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_2 {
    top: 350px;
    right: 22px;
    background-position: top right; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_3 {
    top: 490px;
    left: 11px;
    width: 20px;
    background-position-x: -10px; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_4 {
    bottom: 11px;
    height: 18px;
    background-position: top right; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_5 {
    bottom: 51px;
    left: 55%;
    background-position: top left; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_6 {
    bottom: 30px;
    right: 50px;
    background-position-x: right; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_7 {
    top: 43%;
    left: 130px;
    background-position-x: right;
    display: none; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_8 {
    top: 41%;
    right: 230px;
    background-position-x: left;
    display: none; }

[data-section-id="the-lottery"] .lottery_border {
  background-image: url("../images/the-lottery/mobile_border.png");
  position: absolute;
  width: calc(100% - 30px);
  background-size: 100% auto;
  aspect-ratio: 5/2;
  background-repeat: no-repeat;
  left: 15px; }
  [data-section-id="the-lottery"] .lottery_border.top {
    top: 15px;
    background-position: top left; }
  [data-section-id="the-lottery"] .lottery_border.bottom {
    bottom: 15px;
    background-position: bottom left; }
[data-section-id="the-lottery"] .lottery_shapes {
  display: none; }
@media (min-width: 600px) {
  [data-section-id="the-lottery"] {
    padding-bottom: 90px; } }

[data-section-id="the-masque-of-the-red-death"] .bird-left {
  position: absolute;
  background-image: url("../images/the-masque-of-the-red-death/bird.png");
  left: calc(50% - 340px);
  top: calc(50% - 75px);
  background-size: contain;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  display: none; }
[data-section-id="the-masque-of-the-red-death"] .bird-right {
  position: absolute;
  left: auto;
  right: calc(50% - 340px);
  display: none;
  top: calc(50% - 75px); }
  [data-section-id="the-masque-of-the-red-death"] .bird-right .inner {
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    width: 120px;
    height: 120px;
    background-image: url("../images/the-masque-of-the-red-death/bird.png");
    background-size: contain;
    background-repeat: no-repeat; }
[data-section-id="the-masque-of-the-red-death"] .bottom_border {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 60px;
  background-image: url("../images/the-masque-of-the-red-death/horiz_border.png");
  background-repeat: repeat-x;
  background-size: auto 60px; }
[data-section-id="the-masque-of-the-red-death"] .left_border {
  width: 60px;
  position: absolute;
  top: 75px;
  left: 14px;
  height: calc(100% - 150px);
  background-image: url("../images/the-masque-of-the-red-death/vert_border.png");
  background-repeat: repeat-x;
  background-size: 60px auto;
  background-position: center;
  display: none; }
[data-section-id="the-masque-of-the-red-death"] .right_border {
  width: 60px;
  position: absolute;
  top: 75px;
  right: 14px;
  height: calc(100% - 150px);
  background-image: url("../images/the-masque-of-the-red-death/vert_border.png");
  background-repeat: repeat-x;
  background-size: 60px auto;
  background-position: center;
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
  display: none; }
[data-section-id="the-masque-of-the-red-death"] .top_border {
  width: calc(100% - 30px);
  position: absolute;
  bottom: 15px;
  left: 15px;
  height: 60px;
  background-image: url("../images/the-masque-of-the-red-death/horiz_border.png");
  background-repeat: repeat-x;
  background-size: auto 60px;
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1); }

[data-section-id="the-nutcracker"] div[class^="soldier"] {
  background-image: url("../images/the-nutcracker/soldier.png");
  background-repeat: no-repeat;
  height: 100px;
  background-size: 200px auto;
  position: absolute; }
[data-section-id="the-nutcracker"] .soldier_1 {
  width: 100px;
  top: 11px;
  right: 11px; }
[data-section-id="the-nutcracker"] .soldier_2, [data-section-id="the-nutcracker"] .solider_3, [data-section-id="the-nutcracker"] .solider_4 {
  display: none; }
[data-section-id="the-nutcracker"] div[class^="crown"] {
  background-image: url("../images/the-nutcracker/crown.png");
  background-repeat: no-repeat;
  height: 75px;
  background-size: 131px auto;
  position: absolute; }
[data-section-id="the-nutcracker"] .crown_1 {
  top: 15px;
  left: 15px;
  background-position: right;
  width: 60px; }
[data-section-id="the-nutcracker"] .crown_2, [data-section-id="the-nutcracker"] .crown_3 {
  display: none; }
[data-section-id="the-nutcracker"] div[class^="cutlass"] {
  background-image: url("../images/the-nutcracker/cutlass.png");
  background-repeat: no-repeat;
  position: absolute;
  width: 30px;
  height: 70px;
  background-size: 30px auto; }
[data-section-id="the-nutcracker"] .cutlass_1 {
  top: 400px;
  right: 50px; }
  @media (max-width: 400px) {
    [data-section-id="the-nutcracker"] .cutlass_1 {
      top: 100vw; } }
[data-section-id="the-nutcracker"] .cutlass_2, [data-section-id="the-nutcracker"] .cutlass_3, [data-section-id="the-nutcracker"] .cutlass_4, [data-section-id="the-nutcracker"] .cutlass_5 {
  display: none; }
[data-section-id="the-nutcracker"] div[class^="star"] {
  background-image: url("../images/the-nutcracker/star.png");
  background-repeat: no-repeat;
  position: absolute;
  width: 15px;
  height: 15px;
  background-size: 15px; }
[data-section-id="the-nutcracker"] .star_1 {
  top: 100px;
  left: 50px; }
[data-section-id="the-nutcracker"] .star_2 {
  top: 30px;
  left: 40%; }
[data-section-id="the-nutcracker"] .star_3 {
  top: 90px;
  right: 38%; }
[data-section-id="the-nutcracker"] .star_4, [data-section-id="the-nutcracker"] .star_5, [data-section-id="the-nutcracker"] .star_9, [data-section-id="the-nutcracker"] .star_10, [data-section-id="the-nutcracker"] .star_11 {
  display: none; }
[data-section-id="the-nutcracker"] .star_6 {
  top: 400px;
  left: 14px; }
[data-section-id="the-nutcracker"] .star_7 {
  top: min(130vw, 435px);
  right: 30px; }
[data-section-id="the-nutcracker"] .star_8 {
  top: 135px;
  right: 10%; }
[data-section-id="the-nutcracker"] .star_12 {
  bottom: 30px;
  left: 10%; }
[data-section-id="the-nutcracker"] .star_13 {
  bottom: 10px;
  right: 45%; }

[data-section-id="the-prophet"] {
  padding-top: 120px; }
  [data-section-id="the-prophet"] div.prophet_border {
    --borderHeight:80px;
    position: absolute;
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: var(--borderHeight);
    background-image: url("../images/the-prophet/border.png");
    background-repeat: repeat-x;
    background-size: auto var(--borderHeight); }
    [data-section-id="the-prophet"] div.prophet_border.bottom {
      top: auto;
      bottom: 15px;
      transform: scale(1, -1); }

[data-section-id="the-queen-of-spades"] .diamond {
  position: relative; }
  [data-section-id="the-queen-of-spades"] .diamond .hearts {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --distance: 90px; }
    [data-section-id="the-queen-of-spades"] .diamond .hearts [class^="heart_"] {
      width: 30px;
      height: 30px;
      position: absolute;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      background-size: contain;
      background-image: url("../images/the-queen-of-spades/heart.png");
      background-repeat: no-repeat; }
    @media (min-width: 400px) {
      [data-section-id="the-queen-of-spades"] .diamond .hearts {
        --distance: 130px; }
        [data-section-id="the-queen-of-spades"] .diamond .hearts [class^="heart_"] {
          height: 50px;
          width: 50px; } }
    @media (min-width: 600px) {
      [data-section-id="the-queen-of-spades"] .diamond .hearts {
        --distance: 150px; } }
    [data-section-id="the-queen-of-spades"] .diamond .hearts .heart_1 {
      left: calc((50% - 50px) - var(--distance));
      top: calc((50% - 50px) - var(--distance));
      -webkit-transform: rotate(180deg);
      transform: rotate(270deg); }
    [data-section-id="the-queen-of-spades"] .diamond .hearts .heart_2 {
      right: calc((50% - 50px) - var(--distance));
      top: calc((50% - 50px) - var(--distance)); }
    [data-section-id="the-queen-of-spades"] .diamond .hearts .heart_3 {
      left: calc((50% - 50px) - var(--distance));
      bottom: calc((50% - 50px) - var(--distance));
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg); }
    [data-section-id="the-queen-of-spades"] .diamond .hearts .heart_4 {
      right: calc((50% - 50px) - var(--distance));
      bottom: calc((50% - 50px) - var(--distance));
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg); }
[data-section-id="the-queen-of-spades"] [class^="pushkin_border_"] {
  position: absolute;
  background-image: url("../images/the-queen-of-spades/chevrons.png");
  background-repeat: repeat-x;
  height: 20px;
  background-size: 40px;
  width: calc(50% - 18px); }
[data-section-id="the-queen-of-spades"] .pushkin_border_top_left {
  top: 18px;
  left: 18px;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }
[data-section-id="the-queen-of-spades"] .pushkin_border_top_right {
  top: 18px;
  right: 18px; }
[data-section-id="the-queen-of-spades"] .pushkin_border_bottom_left {
  bottom: 18px;
  left: 18px;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }
[data-section-id="the-queen-of-spades"] .pushkin_border_bottom_right {
  bottom: 18px;
  right: 18px; }
[data-section-id="the-queen-of-spades"] .pushkin_border_left_first {
  display: none;
  top: 40px;
  width: 20px;
  height: calc(50% - 40px);
  left: 18px;
  background-size: 20px;
  background-repeat: repeat-y;
  transform-origin: center center;
  transform: rotate(180deg);
  background-image: url("../images/the-queen-of-spades/chevrons_vert.png"); }
[data-section-id="the-queen-of-spades"] .pushkin_border_left_second {
  display: none;
  bottom: 40px;
  width: 20px;
  height: calc(50% - 40px);
  left: 18px;
  background-size: 20px;
  background-repeat: repeat-y;
  background-image: url("../images/the-queen-of-spades/chevrons_vert.png"); }
[data-section-id="the-queen-of-spades"] .pushkin_border_right_first {
  display: none;
  top: 40px;
  width: 20px;
  height: calc(50% - 40px);
  right: 18px;
  background-size: 20px;
  background-repeat: repeat-y;
  transform-origin: center center;
  transform: rotate(180deg);
  background-image: url("../images/the-queen-of-spades/chevrons_vert.png"); }
[data-section-id="the-queen-of-spades"] .pushkin_border_right_second {
  display: none;
  bottom: 40px;
  width: 20px;
  height: calc(50% - 40px);
  right: 18px;
  background-size: 20px;
  background-repeat: repeat-y;
  background-image: url("../images/the-queen-of-spades/chevrons_vert.png"); }

[data-section-id="the-star-child"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="the-star-child"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="the-star-child"]:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 90%;
  z-index: 0;
  background-image: url("../images/the-star-child/background.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: -15px; }
  @media (max-width: 400px) {
    [data-section-id="the-star-child"]:before {
      background-size: 300% auto; } }

[data-section-id="a-spy-in-the-house-of-love"] .section_image {
  position: absolute;
  background-image: url("../images/a-spy-in-the-house-of-love/corner-image.png");
  top: 10px;
  width: calc(50% - 10px);
  max-width: 400px;
  height: 315px;
  background-repeat: no-repeat;
  background-size: 100%; }
  [data-section-id="a-spy-in-the-house-of-love"] .section_image.corner_image_1 {
    left: 10px; }
  [data-section-id="a-spy-in-the-house-of-love"] .section_image.corner_image_2 {
    right: 10px;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg); }

[data-section-id="about-love"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="about-love"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="about-love"] .border {
  position: absolute;
  width: calc(100% - 22px);
  left: 11px;
  height: 30px;
  background-image: url("../images/about-love/border.png");
  background-size: auto 100%;
  background-repeat: repeat-x; }
  [data-section-id="about-love"] .border.top_border {
    top: 10px; }
  [data-section-id="about-love"] .border.bottom_border {
    bottom: 10px;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg); }
[data-section-id="about-love"] .section_image {
  position: absolute;
  width: calc(50% - 15px);
  height: 600px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  top: 10px;
  max-width: 800px;
  background-position: center right;
  background-image: url("../images/about-love/flower.png"); }
  [data-section-id="about-love"] .section_image.flower_2 {
    right: 15px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  @media (max-width: 580px) {
    [data-section-id="about-love"] .section_image.flower_1 {
      width: calc(100% - 20px);
      top: 60px;
      left: 15px;
      background-image: url("../images/about-love/mob_bg.png");
      height: 100vw;
      background-size: 93%;
      background-position: center; }
    [data-section-id="about-love"] .section_image.flower_2 {
      display: none; } }

[data-section-id="bliss"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="bliss"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="bliss"] .section_bg {
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  height: 40%;
  background-image: url("../images/bliss/bg.jpg");
  background-size: cover;
  background-position: bottom center; }
[data-section-id="bliss"] .section_image {
  position: absolute; }
  [data-section-id="bliss"] .section_image.plant_1 {
    top: 15px;
    left: 15px;
    width: 150px;
    height: 150px;
    background-image: url("../images/bliss/plant_1.png");
    background-size: 150%;
    background-position: bottom right;
    background-repeat: no-repeat; }
  [data-section-id="bliss"] .section_image.plant_2 {
    top: 15px;
    right: 15px;
    width: 150px;
    height: 150px;
    background-image: url("../images/bliss/plant_1.png");
    background-size: 170%;
    background-position: bottom right;
    background-repeat: no-repeat;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  [data-section-id="bliss"] .section_image.plant_3, [data-section-id="bliss"] .section_image.plant_4 {
    display: none; }
  [data-section-id="bliss"] .section_image.plant_5 {
    display: block;
    bottom: 15px;
    left: 15px;
    width: 150px;
    height: 70px;
    background-image: url("../images/bliss/plant_1.png");
    background-size: 100%;
    background-position: 100% 110%;
    background-repeat: no-repeat;
    -webkit-transform: rotateX(180deg) rotateY(180deg);
    transform: rotateX(180deg) rotateY(180deg); }

[data-section-id="dream-story"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="dream-story"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="dream-story"] .section_bg {
  width: calc(100% - 30px);
  top: 15px;
  left: 15px;
  position: absolute;
  height: 50%;
  background-position: top;
  background-image: url("../images/dream-story/large-bg.jpg");
  background-repeat: no-repeat;
  background-size: 340%; }

[data-section-id="letters-to-a-young-poet"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="letters-to-a-young-poet"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="letters-to-a-young-poet"] .section_bg {
  width: calc(100% - 30px);
  top: 15px;
  left: 15px;
  position: absolute;
  height: 100%;
  background-position: top;
  background-image: url("../images/letters-to-a-young-poet/background.jpg");
  background-repeat: no-repeat;
  background-size: 1110px; }

[data-section-id="moonlight"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="moonlight"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="moonlight"] .section_bg {
  width: calc(100% - 30px);
  top: 15px;
  left: 15px;
  position: absolute;
  height: 100%;
  background-position: top;
  background-image: url("../images/moonlight/background.jpg");
  background-repeat: no-repeat;
  background-size: 1180px; }

[data-section-id="of-mice-and-men"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="of-mice-and-men"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="of-mice-and-men"] .book-content {
  margin-bottom: 3rem; }
[data-section-id="of-mice-and-men"] .border {
  position: absolute;
  background-image: url("../images/of-mice-and-men/border.jpg");
  left: 15px;
  width: calc(100% - 30px);
  height: 150px;
  background-repeat: repeat-x;
  background-size: auto 150px;
  border-bottom: 5px solid var(--detailColor);
  z-index: 0; }
  [data-section-id="of-mice-and-men"] .border.top {
    top: 13px;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg); }
  [data-section-id="of-mice-and-men"] .border.bottom {
    bottom: 13px; }
[data-section-id="of-mice-and-men"] .dots {
  z-index: 0;
  position: absolute;
  width: calc(100% - 30px);
  left: 15px;
  top: 15px;
  background-repeat: repeat;
  background-size: 360px;
  background-image: url("../images/of-mice-and-men/dots.png");
  height: 550px; }

[data-section-id="shooting-an-elephant"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="shooting-an-elephant"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="shooting-an-elephant"] .border {
  background-image: url("../images/shooting-an-elephant/bamboo.jpg");
  position: absolute;
  background-repeat: repeat-x;
  width: 30px;
  left: 15px;
  height: calc(100vw - 30px);
  background-size: 15px;
  background-repeat: repeat-y; }
  [data-section-id="shooting-an-elephant"] .border.top-and-left {
    transform-origin: top left;
    -webkit-transform: rotateY(180deg) rotate(90deg);
    transform: rotateY(180deg) rotate(90deg);
    top: 15px; }
  [data-section-id="shooting-an-elephant"] .border.bottom-and-right {
    bottom: 15px;
    right: -15px;
    left: auto;
    transform-origin: bottom left;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg); }
[data-section-id="shooting-an-elephant"] .dots {
  z-index: 0;
  position: absolute;
  width: calc(100% - 30px);
  left: 15px;
  top: 15px;
  background-repeat: repeat;
  background-size: 360px;
  background-image: url("../images/shooting-an-elephant/dots.png");
  height: 550px; }
  [data-section-id="shooting-an-elephant"] .dots.bottom {
    height: 105px;
    top: auto;
    bottom: 15px; }
[data-section-id="shooting-an-elephant"] .diagonal_bamboo {
  display: none; }
[data-section-id="shooting-an-elephant"] .plant {
  position: absolute;
  background-repeat: no-repeat;
  background-image: url("../images/shooting-an-elephant/plant.png"); }
  [data-section-id="shooting-an-elephant"] .plant.plant_1 {
    left: 15px;
    height: 220px;
    width: 100px;
    background-size: auto 190px;
    top: 40px;
    background-position: right; }
  [data-section-id="shooting-an-elephant"] .plant.plant_2 {
    right: 15px;
    top: 40px;
    height: 200px;
    background-position: right;
    background-size: auto 180px;
    width: 60px;
    transform: rotateY(180deg); }
  [data-section-id="shooting-an-elephant"] .plant.plant_3, [data-section-id="shooting-an-elephant"] .plant.plant_4 {
    display: none; }

[data-section-id="territory-of-light"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="territory-of-light"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="territory-of-light"] .border {
  width: calc(100% - 30px);
  position: absolute;
  left: 15px;
  background-image: url("../images/territory-of-light/pattern.jpg");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 300px; }
  [data-section-id="territory-of-light"] .border.top {
    top: 15px;
    height: 300px; }
  [data-section-id="territory-of-light"] .border.bottom {
    height: 60px;
    bottom: 15px;
    background-position: center bottom;
    background-size: auto 200px;
    transform: rotateX(180deg); }

[data-section-id="the-enchanted-april"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="the-enchanted-april"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="the-enchanted-april"] .image {
  position: absolute;
  top: 10px;
  background-image: url("../images/the-enchanted-april/image_1.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: min(calc(50% - 30px), 350px);
  height: 250px; }
  [data-section-id="the-enchanted-april"] .image.top-left {
    left: 10px;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  [data-section-id="the-enchanted-april"] .image.top-right {
    right: 10px; }
  [data-section-id="the-enchanted-april"] .image.bottom-left {
    bottom: 12px;
    top: auto;
    left: 10px;
    height: 100px;
    background-position: bottom;
    -webkit-transform: rotateY(180deg) rotateX(180deg);
    transform: rotateY(180deg) rotateX(180deg);
    width: min(calc(50% - 30px), 250px); }
  [data-section-id="the-enchanted-april"] .image.bottom-right {
    bottom: 12px;
    top: auto;
    right: 10px;
    height: 100px;
    background-position: bottom;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    width: min(calc(50% - 30px), 250px); }
[data-section-id="the-enchanted-april"] .side-image {
  position: absolute;
  top: 200px;
  background-image: url("../images/the-enchanted-april/image_2.png");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 180px;
  height: 310px;
  display: none; }
  [data-section-id="the-enchanted-april"] .side-image.left {
    left: 13px;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  [data-section-id="the-enchanted-april"] .side-image.right {
    right: 13px; }
[data-section-id="the-enchanted-april"] .dots {
  z-index: 0;
  position: absolute;
  width: calc(100% - 30px);
  left: 15px;
  top: 15px;
  background-repeat: repeat;
  background-size: 360px;
  background-image: url("../images/the-enchanted-april/dots.png");
  height: 550px; }
  [data-section-id="the-enchanted-april"] .dots.bottom {
    height: 105px;
    top: auto;
    bottom: 15px; }

[data-section-id="the-lagoon"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="the-lagoon"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="the-lagoon"] .border {
  position: absolute;
  left: 15px;
  background-image: url("../images/the-lagoon/palms.jpg");
  background-position: top center;
  background-repeat: repeat-x;
  background-size: 150px;
  width: calc(100% - 30px); }
  [data-section-id="the-lagoon"] .border.top {
    height: 200px;
    top: 15px; }
  [data-section-id="the-lagoon"] .border.bottom {
    bottom: 15px;
    height: 80px;
    background-position: bottom center;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg); }

[data-section-id="white-nights"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="white-nights"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="white-nights"] .bg {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 450px;
  background-image: url("../images/white-nights/mob-bg.jpg");
  background-size: 100%;
  background-repeat: no-repeat; }

[data-section-id="the-imitation-of-the-rose"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="the-imitation-of-the-rose"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="the-imitation-of-the-rose"] .bg_image {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 450px;
  background-image: url("../images/the-imitation-of-the-rose/bg_image.png");
  background-size: auto 100%;
  background-repeat: repeat-x; }

[data-section-id="bonjour-tristesse"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="bonjour-tristesse"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="bonjour-tristesse"] .bg_image {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 450px;
  background-image: url("../images/bonjour-tristesse/bg.jpg");
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: top center; }

[data-section-id="babylon-revisited"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="babylon-revisited"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="babylon-revisited"] .bg_image {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 320px;
  background-image: url("../images/babylon-revisited/bg.jpg");
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: top center; }

[data-section-id="summer"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="summer"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="summer"] .bg_image {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 320px;
  background-image: url("../images/summer/bg.jpg");
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: top center; }
  [data-section-id="summer"] .bg_image.bottom {
    top: auto;
    bottom: 15px;
    height: 60px;
    background-size: auto 500%; }

[data-section-id="death-in-midsummer"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="death-in-midsummer"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="death-in-midsummer"] .bg_image {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 320px;
  background-image: url("../images/death-in-midsummer/bg.jpg");
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: top center; }
  @media (min-width: 451px) {
    [data-section-id="death-in-midsummer"] .bg_image {
      background-image: url("../images/death-in-midsummer/bg_desktop.jpg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: bottom center; } }

[data-section-id="nabokovs-dozen"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="nabokovs-dozen"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="nabokovs-dozen"] .bg_image {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 370px;
  background-image: url("../images/nabokovs-dozen/bg.jpg");
  background-size: 55px;
  background-repeat: repeat;
  background-position: top center; }
[data-section-id="nabokovs-dozen"] .butterfly {
  width: 151px;
  height: 162px;
  position: absolute;
  top: 15px;
  left: 15px;
  background-image: url("../images/nabokovs-dozen/butterfly.png");
  background-size: 100%;
  background-repeat: no-repeat; }
  [data-section-id="nabokovs-dozen"] .butterfly.butterfly_2 {
    right: 15px;
    top: 15px;
    left: auto;
    transform: rotateY(180deg);
    background-position: bottom;
    height: 70px;
    width: 151px;
    background-position-x: -30px; }
  [data-section-id="nabokovs-dozen"] .butterfly.butterfly_3, [data-section-id="nabokovs-dozen"] .butterfly.butterfly_4 {
    display: none; }

[data-section-id="calypso-in-london"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="calypso-in-london"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="calypso-in-london"] .bg_image {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 320px;
  background-image: url("../images/calypso-in-london/bg.jpg");
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: top center; }

[data-section-id="the-library-of-babel"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="the-library-of-babel"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="the-library-of-babel"] .bg_image {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 440px;
  background-image: url("../images/the-library-of-babel/bg.jpg");
  background-size: auto 110%;
  background-repeat: repeat-x;
  background-position: bottom center; }

[data-section-id="the-fall"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="the-fall"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="the-fall"] .bg_image {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 440px;
  background-image: url("../images/the-fall/bg.jpg");
  background-size: auto 110%;
  background-repeat: repeat-x;
  background-position: bottom center; }

[data-section-id="chess"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="chess"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="chess"] .bg_image {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 440px;
  background-image: url("../images/chess/bg.jpg");
  background-size: auto 110%;
  background-repeat: repeat-x;
  background-position: bottom center; }

[data-section-id="my-friend-maigret"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="my-friend-maigret"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="my-friend-maigret"] .bg_image {
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 440px;
  background-image: url("../images/my-friend-maigret/bg.jpg");
  background-size: auto 110%;
  background-repeat: repeat-x;
  background-position: bottom center; }

[data-section-id="the-awakening"] .diamond {
  margin: 0 auto;
  max-width: 410px; }
  [data-section-id="the-awakening"] .diamond::after {
    content: "";
    background-color: var(--backgroundColor);
    height: 64vw;
    width: 64vw;
    max-width: 310px;
    max-height: 310px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: -1;
    -webkit-transform: rotate(46deg) skew(6deg, 3deg);
    transform: rotate(46deg) skew(6deg, 3deg);
    display: block; }
[data-section-id="the-awakening"] .book-content *, [data-section-id="the-awakening"] .diamond h2 {
  color: #8a181d; }
[data-section-id="the-awakening"] .bg_image {
  width: calc(50% - 15px);
  position: absolute;
  top: 15px;
  left: 15px;
  height: 440px;
  background-image: url("../images/the-awakening/bg.jpg");
  background-size: auto 110%;
  background-repeat: repeat-x;
  background-position: bottom center; }
  [data-section-id="the-awakening"] .bg_image.right {
    left: auto;
    right: 15px;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg); }

section .diamond.summer::after {
  max-width: 318px;
  max-height: 318px;
  transform: rotate(46deg) skew(6deg, 4deg); }

/* Nav icon animation */
#bars {
  width: 33px;
  height: 33px;
  position: fixed;
  z-index: 6;
  margin: 2rem auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  top: 0;
  right: 30px; }

#bars span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out; }

#bars span:nth-child(1) {
  top: 0px; }

#bars span:nth-child(2) {
  top: 11px; }

#bars span:nth-child(3) {
  top: 22px; }

#bars.open span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg); }

#bars.open span:nth-child(2) {
  opacity: 0;
  left: -60px; }

#bars.open span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg); }

span[data-scroll] {
  opacity: 0;
  transition: all ease-in 0.4s;
  display: block; }
  span[data-scroll].fadeUp {
    transform: translateY(30px);
    transition: all ease-in 0.8s; }
  span[data-scroll].is-inview {
    opacity: 1; }
    span[data-scroll].is-inview.fadeUp {
      transform: translateY(0); }
  .main_heading span[data-scroll]:nth-child(2) {
    transition-delay: 0.2s; }
  .main_heading span[data-scroll]:nth-child(3) {
    transition-delay: 0.4s; }

*[data-delay="0.2"] {
  transition-delay: 0.2s !important; }

*[data-delay="0.4"] {
  transition-delay: 0.4s !important; }

*[data-delay="0.6"] {
  transition-delay: 0.6s !important; }

*[data-delay="0.8"] {
  transition-delay: 0.8s !important; }

*[data-delay="1"] {
  transition-delay: 1s !important; }

@media (min-width: 768px) {
  #bars {
    right: 45px; }

  @supports (min-width: -webkit-fill-available) {
    .book-section .diamond svg {
      height: 470px; } }

  footer div.footer_inner {
    flex-direction: row; }
    footer div.footer_inner > div {
      flex-basis: 50%; }

  .footer_prh_right {
    order: 2;
    margin-bottom: 0;
    text-align: right; }

  .main_logo {
    width: 80px;
    margin-bottom: 0px; }

  section.section {
    position: relative; }

  .landing h1 {
    -webkit-transform: none;
    transform: none; }
  .landing a {
    position: static; }

  [data-section-id="babettes-feast"]:after,
  [data-section-id="babettes-feast"]:before {
    background-size: 150% auto;
    display: block; }

  [data-section-id="babettes-feast"] .section_image {
    position: absolute; }
    [data-section-id="babettes-feast"] .section_image.dish_1, [data-section-id="babettes-feast"] .section_image.dish_2 {
      display: block; }
    [data-section-id="babettes-feast"] .section_image.star_1 {
      top: 150px; }
    [data-section-id="babettes-feast"] .section_image.star_2 {
      top: 90px; }
    [data-section-id="babettes-feast"] .section_image.star_4 {
      display: block;
      right: 27%;
      top: 480px; }
    [data-section-id="babettes-feast"] .section_image.star_5 {
      display: block;
      left: 27%;
      top: 170px; }
    [data-section-id="babettes-feast"] .section_image.star_6 {
      display: block;
      left: 90px;
      top: 480px; }
    [data-section-id="babettes-feast"] .section_image.star_7 {
      bottom: 100px; }
    [data-section-id="babettes-feast"] .section_image.star_8 {
      bottom: 110px;
      right: 10%;
      height: 20px; }

  [data-section-id="ice"]:after,
  [data-section-id="breakfast-at-tiffanys"]:after,
  [data-section-id="ice"]:before,
  [data-section-id="breakfast-at-tiffanys"]:before,
  [data-section-id="reginalds-christmas-revel"]:before,
  [data-section-id="reginalds-christmas-revel"]:after,
  [data-section-id="the-star-child"]:before,
  [data-section-id="the-cossacks"]:before,
  [data-section-id="the-cossacks"]:after,
  [data-section-id="snow-country"]:before,
  [data-section-id="snow-country"]:after,
  [data-section-id="street-haunting"]:before {
    background-size: 100% auto; }

  [data-section-id="the-cossacks"] {
    padding-bottom: 160px; }
    [data-section-id="the-cossacks"]:after {
      height: 100px; }

  [data-section-id="hell-screen"] .top-border, [data-section-id="hell-screen"] .bottom-border {
    background-size: 100%; }
  [data-section-id="hell-screen"] .left_side, [data-section-id="hell-screen"] .right_side {
    display: block; }
  [data-section-id="hell-screen"] .diamond::after, [data-section-id="hell-screen"] .diamond::before {
    display: block; }

  [data-section-id="lolly-willowes"] div.section_image.mob_img_2 {
    display: none; }

  [data-section-id="lolly-willowes"] div.section_image.img_4,
  [data-section-id="lolly-willowes"] div.section_image.img_5,
  [data-section-id="lolly-willowes"] div.section_image.img_7,
  [data-section-id="lolly-willowes"] div.section_image.img_10 {
    display: block; }

  [data-section-id="metamorphosis"] div.horiz_border {
    background-size: auto 100px;
    background-position: top center;
    background-repeat: repeat-x;
    width: calc(100% - 30px);
    left: 15px; }

  [data-section-id="of-ghosts-and-goblins"] div.hands_1 {
    background-position: top right; }
  [data-section-id="of-ghosts-and-goblins"] div.hands_2 {
    width: 200px;
    height: 140px;
    top: 70px;
    background-size: 200%; }

  [data-section-id="passing"] .passing_image.image_2 {
    width: 150px;
    height: 150px;
    background-size: 300px;
    background-position: top left; }
  [data-section-id="passing"] .passing_image.image_3 {
    top: 200px;
    background-size: 300px;
    width: 150px;
    height: 150px;
    right: calc(50% - 150px - 220px); }
  [data-section-id="passing"] .passing_image.image_6, [data-section-id="passing"] .passing_image.image_7, [data-section-id="passing"] .passing_image.image_9, [data-section-id="passing"] .passing_image.image_11 {
    display: block; }

  [data-section-id="snow-country"] .section_image.corner_image_1, [data-section-id="snow-country"] .section_image.corner_image_2 {
    display: block; }
  [data-section-id="snow-country"] .section_image.dot_1 {
    top: 7%;
    left: calc(50% - 200px); }
  [data-section-id="snow-country"] .section_image.dot_3 {
    width: 40px;
    background-size: 100% auto;
    left: 15%;
    top: 400px; }

  [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.geese-horizontal {
    height: 180px; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.bottom-side {
    height: 45px; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_1 {
    top: 250px;
    left: calc(50% - 340px); }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_2 {
    top: 195px;
    left: 100px; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_3 {
    top: 420px;
    left: calc(50% - 300px); }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_4 {
    top: 340px;
    left: 10%;
    width: 8px;
    height: 8px;
    display: block; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_5 {
    top: 250px;
    right: calc(50% - 340px); }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_6 {
    top: 195px;
    right: 100px; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_7 {
    top: 420px;
    right: calc(50% - 300px); }

  [data-section-id="the-gift-of-the-magi"] .section_image.magi_ribbon {
    width: 160px;
    height: 234px;
    max-width: 45%; }
    [data-section-id="the-gift-of-the-magi"] .section_image.magi_ribbon.ribbon_bottom-left, [data-section-id="the-gift-of-the-magi"] .section_image.magi_ribbon.ribbon_bottom-right {
      display: block; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_4 {
    left: 30%; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_6 {
    right: 25%; }
  [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_7, [data-section-id="the-gift-of-the-magi"] .section_image.magi_dots.dot_8 {
    display: block; }

  [data-section-id="the-masque-of-the-red-death"] .bird-left, [data-section-id="the-masque-of-the-red-death"] .bird-right {
    display: block; }

  [data-section-id="the-nutcracker"] .section_image.soldier_1 {
    width: 200px;
    top: 30px;
    right: auto;
    left: calc(50% + 120px); }
  [data-section-id="the-nutcracker"] .section_image.soldier_2 {
    width: 200px;
    top: 330px;
    right: 0px;
    display: block;
    transform-origin: center center;
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg); }
  [data-section-id="the-nutcracker"] .section_image.soldier_3 {
    width: 110px;
    top: 320px;
    left: 15px;
    display: block;
    -webkit-transform: rotateX(180deg) rotateY(180deg);
    transform: rotateX(180deg) rotateY(180deg); }
  [data-section-id="the-nutcracker"] .section_image.soldier_4 {
    width: 120px;
    bottom: 15px;
    left: 15px;
    display: block;
    transform-origin: bottom right;
    -webkit-transform: rotate(90deg) translateY(120px);
    transform: rotate(90deg) translateY(120px); }
  [data-section-id="the-nutcracker"] .section_image.crown_1 {
    width: 131px;
    left: calc(50% - 300px);
    transform-origin: top right;
    transform: rotate(-35deg);
    top: 5px; }
  [data-section-id="the-nutcracker"] .section_image.crown_2 {
    display: block;
    width: 131px;
    left: 15%;
    top: 475px; }
  [data-section-id="the-nutcracker"] .section_image.crown_3 {
    display: block;
    right: calc(50% - 250px);
    top: 435px;
    width: 131px;
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg); }
  [data-section-id="the-nutcracker"] .section_image.cutlass_1 {
    top: 160px; }
  [data-section-id="the-nutcracker"] .section_image.cutlass_3 {
    left: calc(50% - 280px);
    top: 250px;
    transform: rotate(45deg);
    display: block; }
  [data-section-id="the-nutcracker"] .section_image.cutlass_4 {
    left: 11px;
    top: 150px;
    display: block;
    height: 25px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }
  [data-section-id="the-nutcracker"] .section_image.cutlass_5 {
    right: 40%;
    bottom: 11px;
    display: block;
    height: 70px;
    transform: rotate(90deg); }
  [data-section-id="the-nutcracker"] .section_image.star_4 {
    display: block;
    top: 160px;
    left: 15%; }
  [data-section-id="the-nutcracker"] .section_image.star_6 {
    left: 35px;
    top: 480px; }
  [data-section-id="the-nutcracker"] .section_image.star_8 {
    top: 45px;
    right: 10%; }
  [data-section-id="the-nutcracker"] .section_image.star_9 {
    top: 70%;
    left: 11px;
    display: block; }
  [data-section-id="the-nutcracker"] .section_image.star_10 {
    top: 66%;
    right: 11px;
    display: block; }
  [data-section-id="the-nutcracker"] .section_image.star_12 {
    left: 25%; }
  [data-section-id="the-nutcracker"] .section_image.star_13 {
    right: 25%; }

  [data-section-id="the-lottery"] .lottery_border {
    aspect-ratio: 20/1;
    background-image: url("../images/the-lottery/desktop_border.png"); }
    [data-section-id="the-lottery"] .lottery_border.bottom {
      bottom: 12px;
      -webkit-transform: rotateX(180deg);
      transform: rotateX(180deg);
      background-position: top; }
  [data-section-id="the-lottery"] .lottery_shapes {
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    background-image: url("../images/the-lottery/desktop_designs.png"); }
    [data-section-id="the-lottery"] .lottery_shapes.top_left {
      top: 25px;
      left: 5px;
      width: 263px;
      height: 290px;
      background-size: 800px;
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      -webkit-transform-origin: top left;
      transform-origin: top left; }
    [data-section-id="the-lottery"] .lottery_shapes.top_right {
      top: 25px;
      right: 15px;
      width: 263px;
      height: 210px;
      background-size: 530px;
      background-position: top right; }
    [data-section-id="the-lottery"] .lottery_shapes.bottom_left {
      bottom: -260px;
      left: 15px;
      width: 320px;
      height: 290px;
      background-size: 800px;
      -webkit-transform: scale(0.8) rotateX(180deg);
      transform: scale(0.8) rotateX(180deg);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      background-position: -80px; }
    [data-section-id="the-lottery"] .lottery_shapes.bottom_right {
      bottom: -260px;
      left: 15px;
      width: 320px;
      height: 290px;
      background-size: 800px;
      -webkit-transform: scale(0.8) rotateX(180deg);
      transform: scale(0.8) rotateX(180deg);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      background-position: -80px; }

  [data-section-id="a-spy-in-the-house-of-love"] .section_image {
    height: 600px; }

  [data-section-id="about-love"] .section_image {
    position: absolute;
    width: calc(50% - 15px);
    height: 600px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    top: 10px;
    max-width: 800px;
    background-position: center right;
    background-image: url("../images/about-love/flower.png"); }
    [data-section-id="about-love"] .section_image.flower_1 {
      right: 50%; }
    [data-section-id="about-love"] .section_image.flower_2 {
      right: 15px;
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg); }

  [data-section-id="bliss"] .section_image.plant_1 {
    width: 210px;
    height: 210px;
    background-size: 100%;
    background-position: top; }
  [data-section-id="bliss"] .section_image.plant_3 {
    display: block;
    top: 370px;
    left: 15px;
    width: 150px;
    height: 70px;
    background-image: url("../images/bliss/plant_1.png");
    background-size: 120%;
    background-position: bottom center;
    background-repeat: no-repeat;
    transform-origin: top left;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg); }
  [data-section-id="bliss"] .section_image.plant_4 {
    display: block;
    top: 460px;
    right: 15px;
    width: 250px;
    height: 70px;
    background-image: url("../images/bliss/plant_1.png");
    background-size: 120%;
    background-position: 100% 110%;
    background-repeat: no-repeat;
    transform-origin: top right;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }
  [data-section-id="bliss"] .section_image.plant_5 {
    width: 250px;
    height: 110px; }

  [data-section-id="dream-story"] .section_bg {
    background-size: 200%; }

  [data-section-id="letters-to-a-young-poet"] .section_bg {
    background-size: 1340px; }
  [data-section-id="letters-to-a-young-poet"] .book-content p:first-child {
    margin-top: 10rem; }

  [data-section-id="the-enchanted-april"] .side-image {
    display: Block; }

  [data-section-id="white-nights"] .bg {
    background-image: url("../images/white-nights/desktop-bg.jpg");
    height: 600px; }

  [data-section-id="nabokovs-dozen"] .butterfly {
    width: 250px;
    height: calc(250px * 1.075); }
    [data-section-id="nabokovs-dozen"] .butterfly.butterfly_2 {
      height: 120px;
      width: 250px; }
    [data-section-id="nabokovs-dozen"] .butterfly.butterfly_3 {
      display: block;
      left: auto;
      right: 44px;
      top: 180px;
      -webkit-transform: rotate(-40deg);
      transform: rotate(-40deg); } }
/* End media query */
@media (min-width: 992px) {
  .book-section > div:not(.diamond):not(.book-content) {
    touch-action: none; }

  .landing {
    background-size: auto max(760px, 99vh);
    height: max(760px, 100vh);
    background-position: center .5vh; }

  .modal_books_list {
    flex-basis: 50%; }

  .modal_covers {
    display: flex;
    flex-basis: 50%;
    justify-content: center;
    align-items: flex-start; }
    .modal_covers .modal_book_cover_container {
      display: flex; }
      .modal_covers .modal_book_cover_container img {
        max-width: 300px;
        cursor: pointer; }

  /* Books */
  [data-section-id="lolly-willowes"] div.section_image.mob_img_1 {
    left: 160px;
    --imageSize:150px; }

  [data-section-id="babettes-feast"]:after,
  [data-section-id="babettes-feast"]:before {
    background-size: 100% auto; }

  [data-section-id="babettes-feast"] .section_image.dish_1 {
    width: 180px;
    height: 155px;
    left: calc(50% - 460px); }
  [data-section-id="babettes-feast"] .section_image.dish_2 {
    width: 180px;
    height: 153px;
    right: calc(50% - 410px); }
  [data-section-id="babettes-feast"] .section_image.dish_3 {
    display: block;
    width: 50px;
    height: 180px;
    background-position: bottom right; }
  [data-section-id="babettes-feast"] .section_image.star_1 {
    left: 120px; }
  [data-section-id="babettes-feast"] .section_image.star_2 {
    top: min(140px, 14%);
    width: 20px;
    right: 8%; }

  [data-section-id="cosmicomics"] div.section_image.img_1 {
    width: 180px;
    height: 200px;
    background-size: 180px;
    background-repeat: no-repeat; }

  [data-section-id="cosmicomics"] div.section_image.img_2 {
    top: 15px;
    width: 120px;
    background-size: 220px;
    height: 110px; }

  [data-section-id="cosmicomics"] div.section_image.img_4,
  [data-section-id="cosmicomics"] div.section_image.img_5 {
    display: block; }

  [data-section-id="hell-screen"] div.left_side, [data-section-id="hell-screen"] div.right_side {
    background-size: auto 410px; }
  [data-section-id="hell-screen"] div.left_side {
    top: 90px; }

  [data-section-id="ice"] {
    padding-bottom: 200px; }
    [data-section-id="ice"]:after {
      display: block; }

  [data-section-id="lady-susan"] div.border-top {
    height: 200px; }

  [data-section-id="metamorphosis"] div.vert_border {
    display: block; }

  [data-section-id="of-ghosts-and-goblins"] div.hands_4, [data-section-id="of-ghosts-and-goblins"] div.hands_5, [data-section-id="of-ghosts-and-goblins"] div.hands_7 {
    display: block; }

  [data-section-id="passing"] .passing_image.image_1 {
    right: 7.5%;
    width: 150px;
    height: 110px;
    background-size: 300px;
    background-position-y: -40px;
    top: 15px; }
  [data-section-id="passing"] .passing_image.image_2 {
    left: calc(50% - 150px - 320px);
    top: 170px; }
  [data-section-id="passing"] .passing_image.image_5, [data-section-id="passing"] .passing_image.image_8 {
    display: block; }
  [data-section-id="passing"] .passing_image.image_6 {
    left: 2%; }

  [data-section-id="street-haunting"]:after {
    height: 100px;
    background-size: 100% auto;
    background-position-y: 100%; }

  [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.left-hand-side {
    left: 11px;
    display: block; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.right-hand-side {
    right: 11px;
    display: block;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.bottom-side {
    width: calc(100% - 120px);
    left: 60px;
    z-index: 1; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.goose-left {
    display: block;
    bottom: 20px;
    left: 15px;
    height: 155px;
    width: 100px;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image: url("../images/the-adventure-of-the-blue-carbuncle/blue-carbuncle-goose.jpg");
    background-size: 100% auto;
    z-index: 0; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .section_image.goose-right {
    display: block;
    bottom: 20px;
    right: 95px;
    height: 175px;
    width: 110px;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image: url("../images/the-adventure-of-the-blue-carbuncle/blue-carbuncle-goose.jpg");
    background-size: 100% auto;
    z-index: 0;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1); }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_9 {
    right: 40%; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_11 {
    left: 240px; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_12 {
    display: block; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_13 {
    bottom: 41%;
    top: auto;
    left: 89px;
    width: 12px;
    height: 12px;
    display: block; }
  [data-section-id="the-adventure-of-the-blue-carbuncle"] .blue-carbuncle-dots-container .circle.circle_14 {
    bottom: 38%;
    top: auto;
    right: 59px;
    width: 12px;
    height: 12px;
    display: block; }

  [data-section-id="the-ballad-of-the-sad-cafe"] .ballad_border-left, [data-section-id="the-ballad-of-the-sad-cafe"] .ballad_border-right {
    display: block; }

  [data-section-id="the-cossacks"] .cossacks_dot_1, [data-section-id="the-cossacks"] .cossacks_dot_2, [data-section-id="the-cossacks"] .cossacks_dot_4, [data-section-id="the-cossacks"] .cossacks_dot_5 {
    display: block; }

  [data-section-id="the-gift-of-the-magi"] .section_image.magi_ribbon {
    width: 200px;
    height: 300px; }

  [data-section-id="the-masque-of-the-red-death"] .left_border, [data-section-id="the-masque-of-the-red-death"] .right_border {
    display: block; }
  [data-section-id="the-masque-of-the-red-death"] .bird-left {
    width: 150px;
    left: calc(50% - 380px);
    top: calc(50% - 90px); }
  [data-section-id="the-masque-of-the-red-death"] .bird-right {
    right: calc(50% - 380px);
    top: calc(50% - 90px);
    left: auto; }
    [data-section-id="the-masque-of-the-red-death"] .bird-right .inner {
      width: 150px; }

  [data-section-id="the-nutcracker"] .section_image.crown_3 {
    right: calc(50% - 300px); }
  [data-section-id="the-nutcracker"] .section_image.cutlass_2 {
    display: block;
    top: 250px;
    right: calc(50% - 280px);
    transform: rotate(170deg); }
  [data-section-id="the-nutcracker"] .section_image.star_3 {
    top: 120px; }
  [data-section-id="the-nutcracker"] .section_image.star_5 {
    top: 270px;
    left: 18%;
    display: block; }
  [data-section-id="the-nutcracker"] .section_image.star_11 {
    top: 77%;
    right: 90px;
    display: block; }

  [data-section-id="the-prophet"] {
    padding-top: 180px;
    padding-bottom: 180px; }
    [data-section-id="the-prophet"] div.prophet_border {
      --borderHeight:120px; }

  [data-section-id="the-queen-of-spades"] .pushkin_border_left_first, [data-section-id="the-queen-of-spades"] .pushkin_border_right_first, [data-section-id="the-queen-of-spades"] .pushkin_border_left_second, [data-section-id="the-queen-of-spades"] .pushkin_border_right_second {
    display: block; }

  [data-section-id="the-lottery"] .lottery_shapes.top_left {
    top: 35px;
    width: 400px;
    -webkit-transform: none;
    transform: none; }
  [data-section-id="the-lottery"] .lottery_shapes.top_right {
    top: 35px;
    width: 350px;
    height: 300px;
    background-size: 720px; }
  [data-section-id="the-lottery"] .lottery_shapes.bottom_left {
    left: 15px;
    width: 340px;
    height: 290px;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    background-position: -60px;
    bottom: -210px; }

  [data-section-id="bliss"] .section_image.plant_1 {
    width: 300px;
    height: 300px;
    left: 30px; }
  [data-section-id="bliss"] .section_image.plant_2 {
    width: 300px;
    height: 210px;
    background-size: 110%; }

  [data-section-id="dream-story"] .section_bg {
    background-size: 100%; }

  [data-section-id="shooting-an-elephant"] .border {
    height: calc(100% - 30px); }
    [data-section-id="shooting-an-elephant"] .border.top-and-left {
      -webkit-transform: none;
      transform: none; }
    [data-section-id="shooting-an-elephant"] .border.bottom-and-right {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg); }
  [data-section-id="shooting-an-elephant"] .diagonal_bamboo {
    position: absolute;
    display: block;
    right: 410px;
    width: 30px;
    background-image: url("../images/shooting-an-elephant/full-bamboo.png");
    background-repeat: repeat-y;
    height: 634px;
    background-size: 30px;
    top: 7.5px;
    transform-origin: top center;
    transform: rotate(-40deg); }
    [data-section-id="shooting-an-elephant"] .diagonal_bamboo:after {
      position: absolute;
      top: -8px;
      right: -2px;
      content: "";
      width: 33px;
      height: 11px;
      background: var(--backgroundColor);
      transform: rotate(40deg); }
  [data-section-id="shooting-an-elephant"] .plant.plant_1 {
    height: 350px;
    width: 260px;
    background-size: cover;
    top: 150px; }
  [data-section-id="shooting-an-elephant"] .plant.plant_2 {
    height: 330px;
    background-size: auto 250px;
    width: 220px; }
  [data-section-id="shooting-an-elephant"] .plant.plant_3 {
    width: 260px;
    top: 15px;
    height: 100px;
    background-position: bottom;
    display: block; }
  [data-section-id="shooting-an-elephant"] .plant.plant_4 {
    width: 260px;
    top: 15px;
    height: 140px;
    background-position: bottom;
    display: block;
    left: calc(50% - 310px);
    background-size: 210px; }

  [data-section-id="the-lagoon"] .border {
    background-size: 230px; }
    [data-section-id="the-lagoon"] .border.top {
      height: 300px; }
    [data-section-id="the-lagoon"] .border.bottom {
      height: 120px; }

  [data-section-id="nabokovs-dozen"] .butterfly.butterfly_4 {
    display: block;
    left: auto;
    right: calc(50% - 15px);
    top: 5px;
    -webkit-transform: rotate(-73deg);
    transform: rotate(-73deg); } }
@media (min-width: 1200px) {
  .modal_covers {
    align-items: center; }
    .modal_covers .modal_book_cover_container img {
      max-width: 360px; }

  [data-section-id="lolly-willowes"] div.section_image.img_8,
  [data-section-id="lolly-willowes"] div.section_image.img_6,
  [data-section-id="lolly-willowes"] div.section_image.img_9 {
    display: block; }

  [data-section-id="babettes-feast"] .section_image.star_8 {
    bottom: 200px; }
  [data-section-id="babettes-feast"] .section_image.star_9 {
    bottom: 320px;
    left: 11.5%;
    display: block; }

  [data-section-id="cosmicomics"] div.section_image.img_4 {
    width: 140px; }
    [data-section-id="cosmicomics"] div.section_image.img_4 .inner {
      width: 140px; }

  [data-section-id="hell-screen"] div.top-border, [data-section-id="hell-screen"] div.bottom-border {
    background-size: 66%;
    background-repeat: repeat-x; }

  [data-section-id="of-ghosts-and-goblins"] div.hands_3 {
    height: 165px; }
  [data-section-id="of-ghosts-and-goblins"] div.hands_6 {
    height: 142px; }

  [data-section-id="passing"] .passing_image.image_10 {
    display: block; }

  [data-section-id="street-haunting"]:before {
    background-position-y: -60px; }

  [data-section-id="the-cossacks"] .cossacks_dot_3, [data-section-id="the-cossacks"] .cossacks_dot_6 {
    display: block; }

  [data-section-id="the-prophet"] {
    padding-top: 240px;
    padding-bottom: 240px; }
    [data-section-id="the-prophet"] div.prophet_border {
      --borderHeight:160px; }

  [data-section-id="a-spy-in-the-house-of-love"] .section_image {
    max-width: 500px; }

  [data-section-id="bliss"] .section_image.plant_1 {
    left: 100px; }
  [data-section-id="bliss"] .section_image.plant_3 {
    top: 550px;
    width: 239px;
    height: 130px; } }
@media (min-width: 1460px) {
  [data-section-id="hell-screen"] div.right_side {
    height: 600px;
    background-size: 100%; }

  [data-section-id="lolly-willowes"] div.section_image.img_6 {
    right: 15%; }

  [data-section-id="white-nights"] .bg {
    background-position: bottom center; } }