/* ______________страница контактов______________ */
.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: 30vw;
  height: 22vw;
  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: 30vw;
  height: 22vw;
  background-color: transparent;
  margin: 12vw 15vw;
  position: absolute;
  top: 10vw;
  left: 28vw;
  overflow: hidden;
  animation: imageRotate 0.6s linear infinite;
  animation-play-state: paused;
}
.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: 30vw;
  height: 22vw;
  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;
}

/* _______________форма для записи_______________ */
form {
  width: 30%;
  height: 22vw;
  background-color: #0504ff;
  padding: 2vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2vw;
  align-items: center;
  z-index: 10;
  position: absolute;
  top: 13vw;
  left: 54vw;
}

.placeholder input,
select {
  width: 100%;
  height: 2.5vw;
  background-color: #6767fc;
  border-color: transparent;
  color: #fdfdfd;
}
.placeholder input,
.placeholder {
  position: relative;
  z-index: 1;
  background-color: #6767fc;
  border-color: transparent;
  width: 100%;
}
.placeholder::before {
  position: absolute;
  top: 0.7vw;
  left: 0.5vw;
  content: 'Placeholder';
  font-family: 'Architexture';
  font-size: 1.2vw;
  color: #fdfdfd;
  transition: all ease 0.3s;
  z-index: 10;
}
.placeholder:has(input[name='userName'])::before {
  content: 'Имя пользователя';
}
.placeholder:has(input[name='email'])::before {
  content: 'Электронная почта';
}
.placeholder:has(input[name='phone'])::before {
  content: 'Номер телефона';
}
input:focus,
select:focus {
  outline-color: #6767fc;
}
.placeholder:has(input:focus)::before,
.placeholder:has(:not(:placeholder-shown))::before {
  font-size: 1vw;
  opacity: 0;
  top: 0.5vw;
}

form button {
  width: 50%;
  height: 3.2vw;
  border: 0.1vw solid #fdfdfd;
  background-color: transparent;
  color: #fdfdfd;
  font-family: 'Architexture';
  font-size: 1.6vw;
  transition: all ease 0.3s;
}

form button:hover {
  cursor: pointer;
  background-color: #6767fc;
  color: #fdfdfd;
}

.formButton {
  width: 10vw;
  height: 2vw;
  position: absolute;
  top: 44.2vw;
  left: 41vw;
  z-index: 10;
  background-color: #0504ff;
  border-color: transparent;
  color: #fdfdfd;
  font-family: 'Architexture';
  font-size: 1vw;
  transition: all ease 0.3s;
  cursor: pointer;
}
.formButton:hover {
  background-color: #6767fc;
}
.exit_form {
  width: 1vw;
  height: 1vw;
  background-color: #fdfdfd;
  position: absolute;
  top: 13.4vw;
  left: 82.6vw;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Stezhok';
  font-size: 1.6vw;
  cursor: pointer;
  z-index: 10;
  display: none;
}
.form {
  opacity: 0;
  pointer-events: none;
}
.form.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ______________окна с информацией______________ */
.contentScreen {
  width: 59.5%;
}
.windowScreen_1,
.windowScreen_2,
.windowScreen_3,
.windowScreen_4,
.windowScreen_5,
.windowScreen_6 {
  width: 60%;
  height: 6vw;
  background-color: #0504ff;
  position: absolute;
  top: 2.5vw;
  left: 39.5vw;
  display: none;
}
.stroke_7 {
  position: absolute;
  width: 58.3vw;
  height: 4.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: 1.8vw;
  top: 0.5vw;
  left: 0.4vw;
  outline-style: solid;
  outline-width: 0.15vw;
  outline-color: #fdfdfd;
  margin: 1.9vw 0.5vw 0.5vw 1.3vw;
  display: flex;
  flex-direction: column;
}
.exit_1,
.exit_2,
.exit_3,
.exit_4,
.exit_5,
.exit_6 {
  width: 1vw;
  height: 1vw;
  background-color: #fdfdfd;
  position: absolute;
  top: -1.4vw;
  left: 56.6vw;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Stezhok';
  font-size: 1.6vw;
  cursor: pointer;
}
.text_1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.stroke_8 hr {
  width: 100%;
  margin-top: -7.5vw;
}
#mainInfo {
  width: 100%;
  height: 100%;
  margin-top: 0.9vw;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  display: flex;
  flex-direction: column;
}
#info {
  width: 100%;
  height: 15%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#teleg {
  font-family: 'Architexture';
  font-size: 1vw;
  font-weight: 400;
  color: #fdfdfd;
  margin-left: 0.3vw;
  margin-top: 0.6vw;
}
#leftT,
#rightT {
  font-family: 'Architexture';
  font-size: 1vw;
  font-weight: 400;
  color: #fdfdfd;
}
#leftT {
  text-decoration: none;
  color: #fdfdfd;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}
#leftT:hover {
  color: #dadada;
}
#describeInfo {
  width: 70%;
  height: 35%;
  padding-left: 1.1vw;
  margin-top: -5vw;
  display: flex;
  align-items: start;
}
#downT {
  font-family: 'Architexture';
  font-size: 0.9vw;
  font-weight: 400;
  line-height: 1.1vw;
  color: #fdfdfd;
}
.images_1 {
  width: 100%;
  height: 100%;
  padding: 1vw;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  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: 100%;
  height: 200%;
  padding: 0.2vw;
}