/* NAMU Heading */
@font-face {
  font-family: 'NAMU-heading';
  src: url('park_fonts/NAMU-1400.otf') format('opentype');
  font-weight: bold;
}

/* NAMU Paragraph */
@font-face {
  font-family: 'NAMU-paragraph';
  src: url('park_fonts/NAMU-1990.otf') format('opentype');
  font-weight: bold;
}


:root {
  --app-height: 100vh;
  --app-width: 100vw;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: var(--app-width);
  overflow-x: hidden;
}

body{
  margin: 0px;
  width: 100%;
}

/* ---------- Utilities --------- */
.image-circle {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}

.image-square {
  width: 100%;
  max-width: 375px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  pointer-events: none;
  display: block;
  margin: 0 auto;
}

.poster_image {
  display: block;
  width: 100%;
}

.show_poster_button {
  width: 350px;
  max-width: 100%;
  height: auto;
}

.modal_card_image {
  width: 100%;
  height: 100%;
  max-height: 414px;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.modal_card_image--top {
  object-position: center 45%;
}

/* ---------- Header --------- */
header{
  height: 4em;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  width: var(--app-width);
  position: fixed;
  z-index: 1000;
}

.nav_top{
  width: 100%;
}

.logo_photo{
  height: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo{
  left: 3.125em;
  padding-left: 1em;
}

.logo img {
  height: 4em;
}

.nav_bar {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  list-style: none;
  position: relative;
}

.menu {
  display: flex;
}

.menu li a {
  text-decoration: none;
  color: white;
  text-align: center;
  transition: 0.15s ease-in-out;
  position: relative;
  margin: 0 0.625em;
  font-family: 'NAMU-paragraph';
  height: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav_link {
  transition: color 0.3s ease-in-out;
  font-size: 1.2em;
}

.menu li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  transition: 0.15s ease-in-out;
}

.menu li a:hover:after {
  width: 100%;
}

.open-menu,
.close-menu {
  position: absolute;
  color: white;
  cursor: pointer;
  font-size: 1.5rem;
  display: none;
}

.open-menu {
  top: 50%;
  right: 1.25em;
  transform: translateY(-50%);
}

.close-menu {
  top: 1.25em;
  right: 1.25em;
}

#check {
  display: none;
}

/* ---------- /Header --------- */



/* ---------- initial_part --------- */

#initial_part{
  position: relative;
  background-image: url('media/parts/inital/FF/background_desktop.webp');
  background-position: 50% 50%;
  background-size: cover;
  height: var(--app-height);
  min-height: var(--app-height);
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.initial_text_overlay{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  display: block;
}

.initial_text_overlay_top_filling{
  width: 100%;
  top: 0;
  height: 0;
  background-color: black;
  position: absolute; /* Allow it to overlap */
}

.initial_text_overlay_top {
  background-image: url('media/parts/inital/FF/overlay_top.webp');
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  aspect-ratio: 1920 / 256;
  position: absolute; /* Allow it to overlap */
  top: 3.16em;
  left: 0;
  z-index: 0;
}

.initial_text_overlay_middle {
  background-image: url('media/parts/inital/FF/overlay_middle.webp');
  background-position: 50% 50%;
  background-size: cover;
  position: absolute; /* Allow it to overlap */
  height: var(--app-height);
  min-height: var(--app-height);
  width: 100%;
  z-index: 1;
}

.initial_text_overlay_bottom {
  background-image: url('media/parts/inital/FF/overlay_bottom.webp');
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  aspect-ratio: 1920 / 444;
  bottom: 0;
  left: 0;
  z-index: 0;
  position: absolute; /* Allow it to overlap */
}

.initial_text_overlay_bottom_filling {
  width: 100%;
  bottom: 0;
  height: 0;
  background-color: black;
  position: absolute; /* Allow it to overlap */
}

.text{
  position: relative;
  height: 32%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}

.h1{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

#initial_part h1{
  font-size: 8.5em;
  margin: 0px;
  font-family: 'NAMU-heading';
  color: white;
  line-height: 0.9;
}

#initial_part h2 {
  font-size: 3.8em;
  font-family: 'NAMU-paragraph';
  color: white;
  line-height: 0.95;
  margin: 0px;
  text-align: center;
}

.h2_block{
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scroll_down_container{
  bottom: 5vh;
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: bounce 2s infinite;
  text-decoration-color: white;
  text-underline-offset: 0.1em;
  visibility: hidden;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

@keyframes bounce-h {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(35%) translateY(-50%);
  }

  40% {
    transform: translateX(calc(35% - 10px)) translateY(-50%);
  }

  60% {
    transform: translateX(calc(35% - 5px)) translateY(-50%);
  }
}

.scroll_down_text{
  font-size: 1.5em;
  font-family: 'NAMU-paragraph';
  color: white;
  margin: 0px;
  text-align: center;
  margin-bottom: -25px;
}

.tickets {
  background-image: url('media/parts/inital/ticket.webp');
  background-position: 50% 50%;  
  background-size: contain;
  background-repeat: no-repeat;
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  right: 0%;
  transform: 
    translateX(35%)
    translateY(-50%);
  visibility: hidden;

  animation: bounce-h 2s infinite;
}

/* ---------- /initial_part --------- */



/* ---------- about_project_part --------- */

#about_project_part {
  background-image: url('media/parts/about-project/background.webp');
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
  height: 800px;
  min-height: 800px;
}

.about_project_part_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.about_project_part_overlay h3 {
  width: 55%;
  text-align: center;
  color: white;
  font-family: 'NAMU-paragraph';
  font-size: 1.5em;
  padding: 1.25px;
}

/* ---------- /about_project_part --------- */



/* ---------- about_us_part --------- */

#about_us_part {
  height: fit-content;
  min-height: fit-content;
  background-image: url('media/parts/about-us/background.webp');
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
}

.about_us_part_heading{
  font-family: 'NAMU-heading';
  font-size: 7em;
  margin: 0px;
  padding: 75px 0px 43px 75px;
  color: white;
  text-transform: uppercase;
}

.about_us_part_paragraph {
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  width: 100%;
  /* height: 100%; */
  /* background-color: rgba(0, 0, 0, 0.5); */
  display: flex;
  justify-content: center;
  align-items: center;
}

.about_us_part_paragraph h3 {
  width: 55%;
  /* text-align: center; */
  color: white;
  font-family: 'NAMU-paragraph';
  font-size: 1.5em;
  padding: 1.25px;
  padding-bottom: 75px;
}

.about_us_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 95%;
  margin: auto;
}

.about_us_content_media {
  display: none;
}

.about_us_content>div {
  flex: 0 0 30%;
  max-width: 30%;
  box-sizing: border-box;
  padding: 10px 30px 80px 30px;
}

.about_us_cards {
  text-decoration: none;
  flex-shrink: 0;
}

.about_us_cards h2{
  font-family: 'NAMU-paragraph';
  color: white;
  font-size: 2.6rem;
  margin: 30px 0 5px;
  text-align: center;
}

.about_us_cards p {
  font-family: 'NAMU-paragraph';
  color: white;
  font-size: 1.5rem;
  text-align: center;
}

.about_us_img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
  text-align: center;
}

/* ---------- /about_us_part --------- */



/* ---------- theatre_part --------- */

#theatre_part {
  height: fit-content;
  min-height: fit-content;
  background-image: url('media/parts/theatre/background.webp');
  background-color: black;
  background-position: 50% 50%;
  background-size: cover;
  position: relative;

}

.theatre_part_heading {
  font-family: 'NAMU-heading';
  font-size: 7em;
  margin: 0px;
  padding: 75px 0px 70px 75px;
  color: white;
  text-transform: uppercase;
}


/* модальное окно №1 */

.our_shows {
  padding-left: 75px;
  padding-right: 75px;
  height: fit-content;
  min-height: fit-content;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 100px;
}

#call-form {
  /* font-family: "NAMU-paragraph";
  font-size: 2em; */
  width: 350px;
  height: max-content;
}

.btn-reset,
.btn-reset_2,
.btn-reset_3 {
  border: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
}

/* .btn {
  border-radius: 3px;
  padding: 16px;
  font-family: inherit;
  font-weight: 700;
  font-size: 18px;
  color: #000;
  background-color: white;
} */

.modal_gallery_all {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
}

.modal_gallery {
  width: 100%;
}

.modal_swiper {
  width: 100%;
}

.modal_swiper_slide {
  width: 100%;
}

.modal_gallery_cards {
  flex-shrink: 0;
}

.modal_card_image {
  border-radius: 5px;
  max-height: 600px !important;
}

.modal_gallery_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  gap: 50px;
}

.modal_gallery__btn {
  width: 28px;
  height: 28px;
}

.modal_gallery__btn svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  fill: white;
}

/* модальное окно №2 */

.modal-parent {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 60px;
  height: 100%;
  padding-top: 0px;
}

.modal-parent--open {
  opacity: 1;
  visibility: visible;
}

.modal {
  margin: 30px 0;
  width: 100%;
  height: 85%;
  border-radius: 5px;
  padding: 40px 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: scroll;
}

.modal_info {
  width: 80%;
  margin-left: 10px;
  margin-bottom: 50px;
}

.modal_title {
  margin: 0;
  margin-bottom: 30px;
  text-align: start;
  font-family: "NAMU-paragraph";
}

h2.modal_title {
  font-size: 2.5em;
}

.modal_text {
  font-family: "NAMU-paragraph";
  width: 100%;
  margin-bottom: 20px;
  text-align: start;
}

p.modal_text {
  font-size: 18px;
}

.buy_ticket {
  font-family: "NAMU-paragraph";
  border-radius: 5px;
  border: 1px solid black;
  padding: 7px;
  text-decoration: none;
  color: black;
}

#call-form-2 {
  /* font-family: "NAMU-paragraph";
  font-size: 2em; */
  width: 350px;
  height: max-content;
}

#call-form-3 {
  /* font-family: "NAMU-paragraph";
  font-size: 2em; */
  width: 350px;
  height: max-content;
}

/* .btn_2 {
  border-radius: 3px;
  padding: 16px;
  font-family: inherit;
  font-weight: 700;
  font-size: 18px;
  color: #000;
  background-color: white;
} */

.modal-wrapper {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body-lock {
  overflow: hidden;
  position: fixed;
  /* Для предотвращения прокрутки на iOS */
  width: 100%;
}

/* ---------- /theatre_part --------- */



/* ---------- affiche_part --------- */

#affiche_part {
  height: 800px;
  min-height: 800px;
  width: 100%;
  background-image: url('media/parts/affiche/background.webp');
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
}

.affiche_part_heading {
  font-family: 'NAMU-heading';
  font-size: 7em;
  color: white;
  padding: 75px 0px 120px 75px;
  text-transform: uppercase;
}

.afisha{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.afisha_event {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #6c879d;
  padding: 10px 20px;
  width: 80%;
  height: 79px;
}

.afisha_description{
  display: flex;
  flex-direction: row;
}

.afisha_date {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
}

.afisha_day {
  font-size: 36px;
  line-height: 1;
}

.afisha_text{
  color: white;
  font-family: "NAMU-paragraph";
}

.afisha_month {
  font-size: 15px;
  text-align: center;
}

.afisha_title {
  font-size: 24px;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.afisha_info {
  flex-grow: 1;
  padding-left: 30px;
}

.afisha_time {
  font-size: 18px;
}

.afisha_action {
  margin-left: 20px;
}

.afisha_ticket{
  color: white;
  border: 1px solid white;
}

a.disabled {
  pointer-events: none;
  color: gray;
}

.afisha_no_events {
  width: 55%;
  text-align: center;
  color: white;
  font-family: 'NAMU-paragraph';
  font-size: 1.5em;
  padding: 1.25px;
}

/* ---------- /affiche_part --------- */



/* ---------- actors_part --------- */

#actors_part {
  height: 1000px;
  min-height: 1000px;
  background-image: url('media/parts/actors/background.webp');
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
}

.actors_part_heading {
  font-family: 'NAMU-heading';
  font-size: 7em;
  color: white;
  padding: 75px 0px 91px 75px;
  text-transform: uppercase;
}

.actors_gallery_content {
  overflow: hidden;
}

.about_us_content_media {
  overflow: hidden;
}

.actors_cards {
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.actors_cards h2{
  font-family: 'NAMU-paragraph';
  color: white;
  font-size: 2.6rem;
  margin: 30px 0 5px;
  text-align: center;
}

.actors_gallery_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  gap: 50px;
}

.about_us_gallery_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  gap: 50px;
}

.actors_gallery__btn {
  width: 28px;
  height: 28px;
}

.actors_gallery__btn svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  fill: white;
}

.about_us_gallery__btn {
  width: 28px;
  height: 28px;
}

.about_us_gallery__btn svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  fill: white;
}

/* ---------- /actors_part --------- */



/* ---------- contacts_part --------- */

#contacts_part {
  height: 750px;
  min-height: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  background-image: url('media/parts/footer/background.webp');
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
  --contacts-color: #A9A9A9;
}

.contacts_part_content {
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.contacts_part_heading {
  font-family: 'NAMU-heading';
  font-size: 7em;
  margin: 0px;
  color: var(--contacts-color);
  text-transform: uppercase;
}

.contacts_part_description{
  font-family: 'NAMU-paragraph';
  color: var(--contacts-color);
  font-size: 1em;
  text-align: start;
  margin-bottom: 2em;
}

.contacts_part_overlay {
  background-color: rgba(0, 0, 0, 0.8);
}

.contacts_table {
  width: auto;
  border-collapse: separate;
  border-spacing: 50px 0px;
}

.contacts_table_media {
  width: auto;
  border-collapse: separate;
  border-spacing: 50px 0px;
}

.table_head_row {
  padding-bottom: 20px;  
}

.table_body_row {
  padding: 5px 0px;
}

.table_heading {
  width: 250px !important;
  font-family: 'NAMU-paragraph' !important;
  text-align: start !important;
  color: var(--contacts-color) !important;
}

.contact_person {
  font-family: 'NAMU-paragraph';
  color: var(--contacts-color);
  font-size: 1em;
  text-align: start;
}

.contact_name {
  font-size: 1.5em;
  text-align: start;
}

.contact_email {
  text-align: start;
}

.contact_description {
  text-align: start;
  width: 300px;
}

.contact-link {
  color: var(--contacts-color);
}

.media_links {
  padding-top: 10px;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
}

.media_links_2 {
  display: flex;
  justify-content: start;
  align-items: center;
}

.social_links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social_links i {
  font-size: 45px;
}

.social_links--light .fa-brands,
.social_links--light .icon {
  color: var(--contacts-color);
  fill: var(--contacts-color);
}

.icon {
  width: 36px;
  height: 36px;
  fill: var(--contacts-color);
  vertical-align: bottom;
}

.social_links a {
  text-decoration: none;
}

.fa-brands {
  color: var(--contacts-color)
}

.fa-instagram {
  font-size: 55px;
}

.fa-youtube {
  font-size: 55px;
}

.fa-telegram {
  font-size: 55px;
}

.fa-vk {
  font-size: 55px;
}

.google_form_button {
  color: var(--contacts-color);
  border: 1px solid var(--contacts-color);
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- /contacts_part --------- */


.contacts_table_media {
  display: none;
}