@import url(reset.css);
@import url(variables.css);
@import url(layout.css);
@import url(swiper.css);
@import url(fonts.css);

body {
  font-family: 'AtypText', sans-serif;
  font-size: 14px;
  font-weight: 400;
  overflow-x: hidden;
  position: relative;
}

.menu__btn,
.phone__nav {
  display: none;
}


@media(max-width:1170px) {
  .logo img {
    width: 100px;
  }

  .menu li {
    padding: 0 10px;
  }

  .main__title {
    font-size: 32px;
    line-height: 37px;
  }

}

@media(max-width:1000px) {
  .header {
    width: 100%;
    height: 68px;
    padding: 0;
    background: var(--base__color);
  }

  .desktop__nav {
    display: none;
  }

  .menu__btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--base__color);
    cursor: pointer;
    position: relative;
    border: none;
    margin: 0;
    padding: 0;
    height: 30px;
    width: 30px;
  }

  .menu__btn-line {
    width: 30px;
    display: block;
    height: 1px;
    background: var(--primary__text);
    margin: 3px 0;
  }

  .menu__btn-active #menu__btn-line2 {
    display: none;
  }

  .menu__btn-active #menu__btn-line1 {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    margin: 0;
  }

  .menu__btn-active #menu__btn-line3 {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    margin: 0;
  }


  .phone__nav {
    position: absolute;
    top: 68px;
    right: 0;
    background: var(--base__color);
    z-index: 2;
    width: 450px;
    height: 100vh;
    padding: 25px 15px 0 15px;
  }

  .phone__nav-active {
    display: block;
  }

  .phone__nav-item {
    padding-bottom: 45px;
    border-bottom: 1px solid var(--primary__text);
    margin-bottom: 45px;
  }

  .phone__nav-item:nth-child(2) {
    margin: 0;
    border: none;
  }

  .phone__nav-item .menu {
    flex-direction: column;
    align-items: start;
  }

  .phone__nav-item .menu li {
    padding: 0;
    margin-bottom: 20px;
  }

  .phone__nav-item .menu li a {
    font-size: 12px;
  }

  .phone__nav-item .menu li:last-child {
    margin-bottom: 0;
  }

  .phone__nav-title {
    margin-bottom: 30px;
    font-size: 20px;
  }

  .header__nav-contacts li {
    padding: 0;
    font-size: 12px;
    margin-bottom: 30px;
    font-weight: 600;
    color: var(--primary__text);
    max-width: 290px;
    line-height: 22px;
  }

  .header__nav-contacts li a {
    color: var(--primary__text);
    font-size: 12px;
    font-weight: 400;
  }

  .header__nav-contacts li a img {
    margin: 0 0 -3px 3px;
  }

  .header__nav-active {
    border-bottom: 1px solid var(--primary__text);
  }

  .phone__nav .footer__social-wrap {
    display: flex;
    flex-direction: column;
    align-items: end;
  }

  .phone__nav .footer__social-wrap a {
    margin: 0 0 20px;
  }

  .main__screen .container {
    padding: 0;
    flex-direction: column;
  }

  .main__screen-img {
    order: -1;
    height: 460px;
  }

  .main__screen-content,
  .main__screen-img {
    width: 100%;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
  }

  .offer__title {
    font-size: 20px;
    line-height: 23px;
    background: url(../img/draws/2.svg)no-repeat center bottom/contain;
    padding: 30px 0 20px;
    border: none;
  }

  .offer__text {
    padding: 25px;
  }

  .rooms__wrap-item {
    flex-direction: column;
  }

  .room__slider {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .offer__section {
    flex-direction: column;
    padding: 20px 10px;
  }

  .offer__section-content {
    margin: 0 0 20px 0;
  }

  .offer__section-link {
    width: 100%;
    justify-content: center;
    padding: 30px 10px;
  }

  .leisure__wrap {
    grid-template-columns: 1fr;
  }

  .leisure__wrap-item img {
    max-height: 340px;
    object-fit: cover;
  }

  .leisure__item-content {
    padding: 10px 0 10px 20px;
  }

  .leisure__wrap-item:nth-child(3) .leisure__text,
  .leisure__wrap-item:nth-child(4) .leisure__text {
    display: none;
  }

  .leisure__wrap-item:nth-child(3) .leisure__descr,
  .leisure__wrap-item:nth-child(4) .leisure__descr {
    margin-bottom: 0;
  }

  .down__form .main__form {
    padding: 0;
  }

  .footer .container {
    flex-direction: column;
  }

  .footer__item {
    padding: 10px 0 10px 20px;
    margin: 0 0 35px 0;
  }

  .footer__root {
    position: relative;
    text-align: center;
    padding: 20px 0 0;
    right: 0;
  }

  #empty__span2 {
    display: none;
  }

  .footer__social-phone {
    top: 63%;
  }

  .footer__social-wrap {
    display: flex;
    flex-direction: column;
    align-items: end;
  }

  .footer__social-wrap a {
    margin: 0 0 20px 0;
  }

  .footer__item li {
    max-width: 100%;
  }
}

@media(max-width:768px) {
  .header__nav-contacts li {
    max-width: 100%;
  }

  .swiper {
    height: 260px;
  }

  .phone__nav {
    width: 100%;
  }

  .main__screen-img {
    height: 350px;
  }

  .room__title {
    margin-bottom: 24px;
  }

  .room__content {
    width: 100%;
  }

  .room__content-features {
    justify-content: space-between;
  }

  .room__content-features br {
    display: none;
  }

  .room__content-cta {
    position: relative;
    padding-top: 20px;
    align-items: normal;
    text-align: center;
  }

  .slider__button {
    display: none;
  }

  .swiper-pagination-bullet {
    width: 18px;
    height: 18px;
    background: var(--base__text);
    opacity: 1;
  }

  .swiper-pagination-bullet-active {
    background: var(--base__color);
  }

  .gallery__item-img {
    height: 210px;
  }

  .gallery__wrap-item:first-child {
    grid-template-columns: 1.5fr 2fr;
  }

  .gallery__wrap-item:last-child {
    grid-template-columns: 2fr 1.5fr;
  }

  .gallery__wrap-item:first-child .gallery__item-img:nth-child(2),
  .gallery__wrap-item:last-child .gallery__item-img:nth-child(2) {
    display: none;
  }

  .gallery__wrap-item:nth-child(2) {
    display: grid;
  }

  .gallery__wrap-item:nth-child(2) .gallery__item-img {
    height: 250px;
    margin-bottom: 10px;
  }

  .home__space .container {
    justify-content: space-between;
  }

  .home__space-title {
    font-size: 20px;
    line-height: 23px;
    text-align: center;
  }

  .home__space-logo {
    height: 22px;
    margin-right: 20px;
  }
}

@media(max-width:570px) {
  .room__content-features {
    flex-direction: column;
  }
}

@media(max-width:390px) {
  .offer__section-img {
    margin-right: 10px;
    height: 30px;
  }
}

@media(min-width:768px) {
  .swiper-pagination {
    display: none;
  }
}