/* ______________страница с архивом______________ */
.projectScreen {
  width: 100%;
  height: 48vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.buttonScreen {
  width: 39.5%;
  height: 48vw;
  background-color: #0504ff;
  transition:
    width 0.4s ease,
    height 0.4s ease;
}
.buttonScreen_full {
  width: 100%;
  height: calc(100vh - 1vw);
  top: 0;
  left: 0;
  z-index: 10;
}
.stroke_5 {
  width: 37vw;
  height: 44.4vw;
  outline-style: solid;
  outline-width: 0.15vw;
  outline-color: #fdfdfd;
  margin: 0.5vw 0.5vw 0.5vw 1vw;
  transition:
    width 0.4s ease,
    height 0.4s ease;
}
.buttonScreen_full .stroke_5 {
  width: 98vw;
}
.stroke_6 {
  position: absolute;
  width: 36.3vw;
  height: 42.2vw;
  top: 4.3vw;
  left: 0.05vw;
  outline-style: solid;
  outline-width: 0.15vw;
  outline-color: #fdfdfd;
  margin: 0.5vw 0.5vw 0.5vw 1.3vw;
  transition:
    width 0.4s ease,
    height 0.4s ease;
}
.buttonScreen_full .stroke_6 {
  width: 97.3vw;
}
.fullScreenButton {
  width: 1vw;
  height: 1vw;
  background-color: #fdfdfd;
  position: absolute;
  top: 3.3vw;
  left: 36.7vw;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Stezhok';
  font-size: 1.1vw;
  cursor: pointer;
}
.thinScreenButton {
  width: 1vw;
  height: 1vw;
  background-color: #fdfdfd;
  position: absolute;
  top: 3.3vw;
  left: 36.7vw;
  border: none;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'Architexture';
  font-size: 1.4vw;
  cursor: pointer;
}
.buttonScreen_full .fullScreenButton {
  display: none;
}
.buttonScreen_full .thinScreenButton {
  display: flex;
  left: 97.5vw;
}

#windowName_7,
#windowName_8,
#windowName_9,
#windowName_10,
#windowName_11,
#windowName_12 {
  font-family: 'Architexture';
  font-size: 0.9vw;
  color: #fdfdfd;
  font-weight: 500;
  padding-left: 2vw;
  padding-top: 0.9vw;
  position: relative;
  z-index: 2;
  cursor: pointer;
}
hr {
  display: block;
  margin: 0 auto;
}
.rec_7,
.rec_8,
.rec_9,
.rec_10,
.rec_11,
.rec_12 {
  width: 100%;
  height: 2.5vw;
  position: relative;
  background-color: transparent;
  z-index: 1;
  transition: ease 0.6s;
}
.rec_7:hover,
.rec_8:hover,
.rec_9:hover,
.rec_10:hover,
.rec_11:hover,
.rec_12:hover {
  background-color: #6767fc;
}
.pageIcon2 {
  width: 1.4vw;
  position: absolute;
  top: 5.5vw;
  left: 36vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon2:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon2 {
  left: 97vw;
}
.pageIcon3 {
  width: 1.4vw;
  position: absolute;
  top: 8.2vw;
  left: 36vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon3:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon3 {
  left: 97vw;
}
.pageIcon4 {
  width: 1.4vw;
  position: absolute;
  top: 8.2vw;
  left: 34.7vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon4:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon4 {
  left: 95.7vw;
}
.pageIcon5 {
  width: 1.4vw;
  position: absolute;
  top: 10.8vw;
  left: 34.7vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon5:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon5 {
  left: 97vw;
}
.pageIcon6 {
  width: 1.4vw;
  position: absolute;
  top: 10.8vw;
  left: 36vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon6:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon6 {
  left: 95.7vw;
}
.pageIcon7 {
  width: 1.4vw;
  position: absolute;
  top: 10.8vw;
  left: 33.4vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon7:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon7 {
  left: 94.4vw;
}
.pageIcon8 {
  width: 1.4vw;
  position: absolute;
  top: 13.4vw;
  left: 36vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon8:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon8 {
  left: 97vw;
}
.pageIcon9 {
  width: 1.4vw;
  position: absolute;
  top: 13.4vw;
  left: 34.7vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon9:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon9 {
  left: 95.7vw;
}
.pageIcon10 {
  width: 1.4vw;
  position: absolute;
  top: 13.4vw;
  left: 33.4vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon10:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon10 {
  left: 94.4vw;
}
.pageIcon11 {
  width: 1.4vw;
  position: absolute;
  top: 13.4vw;
  left: 32.1vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon11:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon11 {
  left: 93.1vw;
}
.pageIcon12 {
  width: 1.4vw;
  position: absolute;
  top: 16vw;
  left: 36vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon12:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon12 {
  left: 97vw;
}
.pageIcon13 {
  width: 1.4vw;
  position: absolute;
  top: 16vw;
  left: 34.7vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon13:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon13 {
  left: 95.7vw;
}
.pageIcon14 {
  width: 1.4vw;
  position: absolute;
  top: 16vw;
  left: 33.4vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon14:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon14 {
  left: 94.4vw;
}
.pageIcon15 {
  width: 1.4vw;
  position: absolute;
  top: 16vw;
  left: 32.1vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon15:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon15 {
  left: 93.1vw;
}
.pageIcon16 {
  width: 1.4vw;
  position: absolute;
  top: 16vw;
  left: 30.8vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon16:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon16 {
  left: 91.8vw;
}
.pageIcon17 {
  width: 1.4vw;
  position: absolute;
  top: 18.6vw;
  left: 36vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon17:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon17 {
  left: 97vw;
}
.pageIcon18 {
  width: 1.4vw;
  position: absolute;
  top: 18.6vw;
  left: 34.7vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon18:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon18 {
  left: 95.7vw;
}
.pageIcon19 {
  width: 1.4vw;
  position: absolute;
  top: 18.6vw;
  left: 33.4vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon19:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon19 {
  left: 94.4vw;
}
.pageIcon20 {
  width: 1.4vw;
  position: absolute;
  top: 18.6vw;
  left: 32.1vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon20:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon20 {
  left: 93.1vw;
}
.pageIcon21 {
  width: 1.4vw;
  position: absolute;
  top: 18.6vw;
  left: 30.8vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon21:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon21 {
  left: 91.8vw;
}
.pageIcon22 {
  width: 1.4vw;
  position: absolute;
  top: 18.6vw;
  left: 29.5vw;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
  z-index: 2;
}
.pageIcon22:hover {
  animation-play-state: running;
}
.buttonScreen_full .pageIcon22 {
  left: 90.5vw;
}

.hoverScreen_1 {
  width: 15vw;
  height: 12vw;
  background-color: transparent;
  margin: 12vw 15vw;
  position: absolute;
  top: -7vw;
  left: 46vw;
  overflow: hidden;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
}
.hoverScreen_2 {
  width: 15vw;
  height: 22vw;
  background-color: transparent;
  margin: 12vw 15vw;
  position: absolute;
  top: 10vw;
  left: 28vw;
  overflow: hidden;
}
.hoverScreen_3 {
  width: 30vw;
  height: 22vw;
  background-color: transparent;
  margin: 12vw 15vw;
  position: absolute;
  top: 5vw;
  left: 52vw;
  overflow: hidden;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
}
.hoverScreen_4 {
  width: 30vw;
  height: 22vw;
  background-color: transparent;
  margin: 12vw 15vw;
  position: absolute;
  top: -6vw;
  left: 28vw;
  overflow: hidden;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
}
.hoverScreen_5 {
  width: 20vw;
  height: 28vw;
  background-color: transparent;
  margin: 12vw 15vw;
  position: absolute;
  top: 0vw;
  left: 41vw;
  overflow: hidden;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
}
.hoverScreen_6 {
  width: 30vw;
  height: 22vw;
  background-color: transparent;
  margin: 12vw 15vw;
  position: absolute;
  top: 10vw;
  left: 51vw;
  overflow: hidden;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
}
.windowContent,
.windowContent2,
.windowContent3,
.windowContent4,
.windowContent5,
.windowContent6 {
  width: 100%;
  /* height: 100%; */
  position: absolute;
  margin: 0 auto;
  padding: 0.5vw 0.5vw;
  opacity: 0;
}
.windowContent3 {
  transform-style: preserve-3d;
  animation: rotate3d-spin 1.5s linear infinite;
}
.windowContent5 {
  transform-style: preserve-3d;
  animation: rotate3d-spin 1.5s linear infinite;
}

/* ______________________КНИГА______________________ */
.flipbook-section {
  width: 40vw;
  height: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.cover {
  width: 40vw;
  aspect-ratio: 60 / 42.6; /* preserves the original 720:511 proportions */
  height: 30vw;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
}

.book {
  width: 100%;
  height: 100%;
  display: flex;
  perspective: 1200px;
  position: relative;
}

.book__page {
  position: relative;
  width: 50%;
  height: 100%;
  display: grid;
  transform: rotateY(0deg);
  transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin: 0% 0%;
  background-color: #f5f5f5;
  background-image: linear-gradient(
    90deg,
    rgba(227, 227, 227, 1) 0%,
    rgba(247, 247, 247, 0) 18%
  );
}

.book__page:nth-of-type(1) {
  background-image: linear-gradient(
    -90deg,
    rgba(227, 227, 227, 1) 0%,
    rgba(247, 247, 247, 0) 18%
  );
}

.book__page--1 {
  overflow: hidden;
}

.book__page--2 {
  position: absolute;
  right: 0;
  transform-style: preserve-3d;
  background-color: #f5f5f5;
  background-image: linear-gradient(
    90deg,
    rgba(227, 227, 227, 1) 0%,
    rgba(247, 247, 247, 0) 18%
  );
}

.book__page--4 {
  cursor: pointer;
}

.book__page--last {
  position: absolute;
  right: 0;
  z-index: 0;
}

.book__page--sheet-1 {
  z-index: 4;
}

.book__page--sheet-2 {
  z-index: 3;
}

.book__page--sheet-3 {
  z-index: 2;
}

.book__page--sheet-4 {
  z-index: 1;
}

.book__page-front {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg) translateZ(1px);
  overflow: hidden;
  cursor: pointer;
  backface-visibility: hidden;
}

.book__page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg) translateZ(1px);
  overflow: hidden;
  cursor: pointer;
  backface-visibility: hidden;
}

.book__page img,
.book__page-front img,
.book__page-back img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book input[type='radio'] {
  display: none;
}

#page-2:checked ~ .book__page--sheet-1,
#page-2-back:checked ~ .book__page--sheet-1,
#page-3:checked ~ .book__page--sheet-1,
#page-3-back:checked ~ .book__page--sheet-1,
#page-4:checked ~ .book__page--sheet-1,
#page-4-back:checked ~ .book__page--sheet-1,
#page-5:checked ~ .book__page--sheet-1,
#page-3:checked ~ .book__page--sheet-2,
#page-3-back:checked ~ .book__page--sheet-2,
#page-4:checked ~ .book__page--sheet-2,
#page-4-back:checked ~ .book__page--sheet-2,
#page-5:checked ~ .book__page--sheet-2,
#page-4:checked ~ .book__page--sheet-3,
#page-4-back:checked ~ .book__page--sheet-3,
#page-5:checked ~ .book__page--sheet-3,
#page-5:checked ~ .book__page--sheet-4 {
  transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform: rotateY(-180deg);
}

#page-2:checked ~ .book__page--sheet-1 {
  z-index: 5;
}

#page-2-back:checked ~ .book__page--sheet-1 {
  z-index: 4;
}

#page-2-back:checked ~ .book__page--sheet-2 {
  z-index: 5;
}

#page-3:checked ~ .book__page--sheet-1 {
  z-index: 1;
}

#page-3:checked ~ .book__page--sheet-2 {
  z-index: 5;
}

#page-3-back:checked ~ .book__page--sheet-1 {
  z-index: 1;
}

#page-3-back:checked ~ .book__page--sheet-2 {
  z-index: 4;
}

#page-3-back:checked ~ .book__page--sheet-3 {
  z-index: 5;
}

#page-4:checked ~ .book__page--sheet-1 {
  z-index: 1;
}

#page-4:checked ~ .book__page--sheet-2 {
  z-index: 2;
}

#page-4:checked ~ .book__page--sheet-3 {
  z-index: 5;
}

#page-4-back:checked ~ .book__page--sheet-1 {
  z-index: 1;
}

#page-4-back:checked ~ .book__page--sheet-2 {
  z-index: 2;
}

#page-4-back:checked ~ .book__page--sheet-3 {
  z-index: 3;
}

#page-4-back:checked ~ .book__page--sheet-4 {
  z-index: 5;
}

#page-5:checked ~ .book__page--sheet-1 {
  z-index: 1;
}

#page-5:checked ~ .book__page--sheet-2 {
  z-index: 2;
}

#page-5:checked ~ .book__page--sheet-3 {
  z-index: 3;
}

#page-5:checked ~ .book__page--sheet-4 {
  z-index: 5;
}

/* ______________окна с информацией______________ */
.contentScreen {
  width: 59.5%;
}
.windowScreen_1,
.windowScreen_2,
.windowScreen_3,
.windowScreen_4,
.windowScreen_5,
.windowScreen_6 {
  width: 60%;
  height: 45vw;
  background-color: #0504ff;
  position: absolute;
  top: 2.5vw;
  left: 39.5vw;
  display: none;
}
.stroke_7 {
  position: absolute;
  width: 58.3vw;
  height: 44.4vw;
  top: 0vw;
  left: 0.05vw;
  outline-style: solid;
  outline-width: 0.15vw;
  outline-color: #fdfdfd;
  margin: 0.5vw 0.5vw 0.5vw 1.3vw;
}
.stroke_8 {
  position: absolute;
  width: 57.5vw;
  height: 42vw;
  top: 0.5vw;
  left: 0.4vw;
  outline-style: solid;
  outline-width: 0.15vw;
  outline-color: #fdfdfd;
  margin: 1.8vw 0.5vw 0.5vw 1.3vw;
  display: flex;
  flex-direction: row;
}
#bookWindow {
  position: absolute;
  width: 57.5vw;
  height: 42vw;
  top: 0.5vw;
  left: 0.4vw;
  outline-style: solid;
  outline-width: 0.15vw;
  outline-color: #fdfdfd;
  margin: 1.8vw 0.5vw 0.5vw 1.3vw;
  display: flex;
  flex-direction: row;
}
.exit_1,
.exit_2,
.exit_3,
.exit_4,
.exit_5,
.exit_6 {
  width: 1vw;
  height: 1vw;
  background-color: #fdfdfd;
  position: absolute;
  top: 0.8vw;
  left: 58.3vw;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Stezhok';
  font-size: 1.6vw;
  cursor: pointer;
}
#bookInfo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.text_1 {
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#mainInfo {
  width: 100%;
  height: 35%;
  padding-top: 0.3vw;
  padding-left: 0.3vw;
  display: flex;
  flex-direction: column;
}
#info {
  width: 100%;
  height: 15%;
  padding: 0.7vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#leftT,
#rightT {
  font-family: 'Architexture';
  font-size: 1vw;
  font-weight: 400;
  color: #fdfdfd;
}
a#leftT {
  text-decoration: none;
  color: #fdfdfd;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}
a#leftT:hover {
  color: #dadada;
}
#describeInfo {
  width: 100%;
  height: 35%;
  padding: 0.7vw;
  display: flex;
  align-items: end;
}
#describeInfo_book {
  width: 100%;
  height: 60%;
  padding: 0.7vw;
  display: flex;
  align-items: end;
  justify-content: center;
}
#downT {
  font-family: 'Architexture';
  font-size: 0.9vw;
  font-weight: 400;
  line-height: 1.1vw;
  color: #fdfdfd;
}
.images_1 {
  width: 65%;
  height: 100%;
  padding: 1vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: auto;
}
.images_1::-webkit-scrollbar {
  width: 0.3vw;
}
.images_1::-webkit-scrollbar-track {
  background: #0504ff;
}
.images_1::-webkit-scrollbar-thumb {
  background: #6767fc;
  border-radius: 1vw;
}
#imgInfo {
  width: 50%;
  height: 35%;
  padding: 0.2vw;
  cursor: pointer;
}
#imgInfo_poster {
  width: 50%;
  height: 60%;
  padding: 0.2vw;
}
.stamp_1 {
  mix-blend-mode: multiply;
  transform-style: preserve-3d;
  animation: stamps 2s linear infinite;
  animation-play-state: paused;
}
.stamp_1:hover {
  animation-play-state: running;
}

/* _______________стили для выпадающего окна_______________ */
.modalImgWindow_3 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.modalImgWindow_4 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.modalImgWindow_6 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.modalContent {
  text-align: center;
  max-width: 100%;
  max-height: 90vw;
  position: relative;
  padding-top: 5vw;
}
.modalImg {
  max-width: 100%;
  max-height: 80%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.modalText {
  display: none;
  width: 43vw;
  height: 15vw;
  position: absolute;
  top: 37vw;
  left: 28.5vw;
  padding-left: 1.4vw;
  padding-right: 1.4vw;
  text-align: left;
}
.modalText p {
  font-family: 'Architexture';
  color: #fff;
  font-size: 1vw;
  line-height: 1.2vw;
}