* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Roboto", sans-serif;
  background-color: #621402;
  color: #fff;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
}

.header {
  background: linear-gradient(180deg, rgba(98, 20, 2, 0.31) 0%, #621402 85.62%),
    url(../img/bg.png) no-repeat center top/cover;
  margin-bottom: 60px;
}

.navbar {
  display: flex;
  align-items: center;
  padding-top: 31px;
}

.nav_svg {
  display: none;
}

.menu {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin: 0 0 0 57px;
}

.menu .link {
  margin-right: 25px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}

.menu .link:hover {
  text-decoration: underline;
}

.avatar {
  width: 33px;
  height: 33px;
  border-radius: 50%;
}

.user {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.hello_user {
  color: #fff;
  margin-right: 11px;
  font-size: 16px;
}

/*информация о фильме*/
.about_film {
  margin-top: 92px;
  margin-bottom: 69px;
}

.about_film_wrapper {
  display: flex;
  align-items: center;
}

.about_film_wrapper .text {
  max-width: 570px;
}
.about_film_wrapper .play {
  margin: auto;
}

.about_film_wrapper .text h2 {
  font-size: 24px;
  line-height: 150%;
  color: #ffffff;
  opacity: 0.5;
}

.about_film_wrapper .text h1 {
  font-size: 36px;
  line-height: 42px;
  color: #ffffff;
}

.about_film_wrapper .text p {
  font-size: 16px;
  line-height: 150%;
  color: #ffffff;
}

.play:hover {
  opacity: 0.75;
}

.film_information {
  display: flex;
  justify-content: start;
  margin-top: 53px;
}

.film_information p {
  font-size: 16px;
  line-height: 150%;
  color: #ffffff;
}

.time {
  display: flex;
  align-items: center;
  margin-right: 34px;
}

.time img {
  width: 20px;
  height: 20px;
  margin-right: 14px;
}

.rating {
  display: flex;
  align-items: center;
}

.rating img {
  width: 35px;
  height: 18px;
  margin-right: 12px;
}

.rating span {
  font-weight: bold;
  font-size: 24px;
  line-height: 150%;
}
/*информация о фильме*/

/*выбор даты, времени и кинотеатра*/
.session {
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  padding-top: 46px;
  padding-bottom: 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.session-label {
  display: block;
  margin-bottom: 20px;
}
.session-date {
  display: flex;
  flex-direction: column;
}
.session-block {
  display: flex;
}
.session-date-items {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  padding: 9px 27px;
  margin-right: 15px;
}
.session-date-items:hover {
  background: #fe8e05;
  color: #621402;
}
.date-items-activity {
  background: #fe8e05;
  color: #621402;
}
.date-items-mounth {
  font-size: 16px;
  line-height: 19px;
}
.date-items-day {
  font-weight: 900;
  font-size: 30px;
  line-height: 35px;
}
.date-items-week {
  font-size: 19px;
  line-height: 22px;
}
select {
  cursor: pointer;
}
.select-cinema {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  min-width: 470px;
  padding: 23px 18px;
  font-size: 16px;
  line-height: 150%;
  color: #fff;
}
.select-time {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  min-width: 108px;
  padding: 23px 18px;
  font-size: 16px;
  line-height: 150%;
  color: #fff;
}
/*выбор даты, времени и кинотеатра*/

.hall {
  margin-bottom: 62px;
}
.hall path:not(.screen_light, .svg_legends) {
  cursor: pointer;
  fill: rgba(255, 255, 255, 0);
}
.booked {
  fill: rgba(255, 255, 255, 0.05);
  opacity: 0.3;
}
path.booked:hover:not(.svg_legends) {
  cursor: not-allowed;
}
.hall path.activity {
  fill: rgba(254, 142, 5, 1);
}
.hall path.activity_legends {
  fill: rgba(254, 142, 5, 1);
}
.legends_seats {
  height: 85px;
  background: rgba(36, 36, 36, 0.18);
  margin-top: -4px;
}
.legends_seats_block {
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: start;
  padding-left: 15px;
}
.legends_hall {
  margin-top: 22px;
  display: flex;
  align-items: center;
  margin-right: 30px;
}
.legends_hall svg {
  margin-right: 17px;
}
.price_block {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  display: flex;
  flex-direction: column;
}
.price_text {
  font-size: 18px;
  line-height: 21px;
}
.price_sum {
  margin-top: 12px;
  font-size: 52px;
  line-height: 61px;
}
.price_total {
  margin-right: 15px;
}
.pay_button {
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  line-height: 21px;
  color: #fff;
  padding: 24px 52px;
  background: rgba(254, 142, 5, 1);
  border-radius: 5px;
}
.pay_button:hover {
  color: rgba(98, 20, 2, 1);
}

@media (max-width: 1200px) {
  .container {
    max-width: 900px;
  }
  .session {
    flex-wrap: wrap;
  }
  .session-date {
    order: 1;
  }
  .session-cinema {
    order: 3;
    margin-top: 20px;
  }
  .session-time {
    order: 2;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 750px;
  }
  .about_film_wrapper {
    flex-direction: column;
  }
  .about_film_wrapper .play {
    margin-top: 25px;
  }
  .film_information {
    justify-content: center;
  }
  .session-cinema {
    margin-top: 20px;
  }
}

@media (max-width: 375px) {
  .container {
    max-width: 350px;
  }
  .header {
    background: linear-gradient(
        180deg,
        rgba(98, 20, 2, 0.31) 0%,
        #621402 85.62%
      ),
      url(../img/bg-small.png) no-repeat 3% top/cover;
  }
  .menu {
    z-index: 2;
    background: rgba(98, 20, 2, 0.9);
    position: absolute;
    top: 72px;
    left: 57px;
    margin: 0;
    flex-direction: column;
    border-radius: 5px;
    padding: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s;
  }
  .menu_open {
    visibility: visible;
    opacity: 1;
  }
  .menu li:not(:last-child) {
    margin-bottom: 15px;
  }
  .menu .link {
    font-size: 18px;
  }
  .nav_svg {
    display: block;
    margin-left: 25px;
    height: 30px;
    width: 35px;
    cursor: pointer;
  }
  .select-cinema {
    min-width: 60%;
  }
  .session {
    justify-content: center;
  }
  .session-date-items:last-child {
    display: none;
  }
  .session-label {
    display: none;
  }
  .session-time {
    margin: 20px 0;
  }
  .legends_hall svg {
    width: 20px;
  }
  .legends_seats {
    height: 100%;
  }
  .legends_seats_block {
    flex-direction: column;
    align-items: start;
  }
  .price_sum {
    font-size: 35px;
  }
  .pay_button {
    padding: 10px 15px;
    border-radius: 15px;
  }
}