/* Стили для планшетов */ @media only screen and (max-width: 992px) { .wrapper{ width: 100%; } .phone--hone{ display: none; } /* text */ .title-1{ font-size: 32px; } .title-2{ font-size: 32px; } .title-3{ font-size: 32px; } .title-4{ font-size: 20px; } .text-1{ font-size: 18px; } .text-2{ font-size: 16px; } /* text */ /* component */ .btn-big{ padding: 23.5px 19.5px; font-size: 14px; } /* component */ /* header */ .header{ padding: 24px 16px; display: flex; justify-content: space-between; align-items: center; position: relative; } .header__wrapper{ padding: 0; } .header__phone{ display: flex; align-items: center; } .header-phone__item{ margin-left: 24px; width: 32px; height: 32px; transition: opacity .3s; } .header-phone__item > img{ width: 100%; height: 100%; } .header-phone__item:first-child{ margin-left: 0; } .header-phone__item:active{ opacity: .8; } .button-menu{ width: 100%; height: 100%; position: relative; overflow: hidden; } .button-menu__open{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .3s; } .phone-menu{ position: absolute; top: 0px; right: 0; left: 0; height: 0; width: 100%; background-color: var(--background-main); z-index: 10; overflow: hidden; transition: all .3s; } .phone-menu.active{ height: 100vh; overflow-y: auto; } .phone-menu__block-content{ height: 0; overflow: hidden; z-index: 10; transition: all .5s; } .phone-menu__content{ padding: 104px 16px 40px 16px; position: relative; } .phone-menu__sub{ position: absolute; top: 0; left: 100%; width: 100%; transition: all .3s; height: 100vh; background-color: var(--background-main); } .phone-menu__sub.active{ left: 0; overflow-y: auto; } .phone-menu__sub .title-1{ margin-bottom: 32px; } .phone-menu-content__close{ position: absolute; top: 40px; right: 16px; width: 32px; aspect-ratio: 1; background-image: url(/assets/img/icon/close.svg); background-repeat: no-repeat; background-position: center; background-color: var(--background-main); border: none; } .phone-menu__block{ margin-top: 32px; } .phone-menu__title{ font-weight: 700; font-size: 32px; color: var(--text-white); } .phone-menu__list{ list-style-type: none; font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--text-white); } .phone-menu__list a{ font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--text-white); text-decoration: none; } .phone-menu__list li{ margin-top: 24px; } .phone-menu__list li:first-child{ margin-top: 0; } .phone-menu--next{ display: block; background-image: url(/assets/img/icon/arrow-right.svg); background-repeat: no-repeat; background-position: center right; } .phone-menu__text{ margin-top: 24px; display: block; font-weight: 400; font-size: 16px; color: var(--text-white); } .phone-menu__text:first-child{ margin-top: 0; } .phone-menu__text > a { color: var(--text-white); } .phone-menu__text--no-line{ text-decoration: none; } .phone-menu__sub .title-1{ text-transform: capitalize; } .phone-social{ margin-top: 24px; display: flex; align-items: center; } .phone-menu{ display: block; } .phone-search{ position: absolute; top: 112px; left: 0; width: 100%; height: 0; display: block; transition: all .3s; overflow: hidden; } .phone-search.active{ height: 79px; } .phone-search.hidden{ overflow: visible; } .phone-search__content{ padding: 16px; background-color: var(--background-grey-hover); } .phone-search__input{ width: 100%; padding: 14.5px 23px; font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--text-white); border: 1px solid var(--text-white); border-radius: 4px; background-color: rgba(0, 0, 0, 0); outline: none; } .phone-search__input::placeholder{ color: var(--link); } .phone-search__found{ position: absolute; top: 95px; left: 16px; right: 16px; max-height: 256px; width: calc(100% - 32px); padding: 16px; background-color: var(--background-grey-hover); border-radius: 4px; overflow-y: auto; display: none; } .phone-search__found.active{ display: block; } .phone-search__item{ } .phone-search__item{ margin-top: 24px; display: flex; } .phone-search__item:first-child{ margin-top: 0; } .phone-search-item__img{ width: 64px; aspect-ratio: 1; border-radius: 8px; } .phone-search-item__content{ margin-left: 16px; } .phone-search-item__art{ margin-top: 8px; color: var(--link); } .phone__open-search{ width: 32px; aspect-ratio: 1; overflow: hidden; border: none; background-color: rgba(0, 0, 0, 0); } .phone__open-search.active img:first-child{ display: none; } /* header */ /* footer */ .footer{ margin-top: 96px; } .footer__wrapper{ padding: 0 16px; justify-content: start; } .footer__item:nth-child(2){ margin-left: 38px; } .footer__contact{ margin-top: 20px; flex-wrap: wrap; } .footer__contact .footer__item:nth-child(3){ margin-top: 20px; margin-left: 0; width: 100%; } /* footer */ } /* footer */ @media only screen and (max-width: 829px) { .footer__about{ flex-direction: column; } } @media only screen and (max-width: 630px) { .footer__wrapper{ justify-content: center; } .footer__contact{ flex-direction: column; justify-content: center; } .footer__contact .footer__item:nth-child(2){ margin-top: 20px; margin-left: 0; } } /* footer */ main{ padding: 0 16px; } /* space */ @media only screen and (max-width: 992px) { .space{ margin-top: 32px; } .space__content{ margin-top: 24px; flex-direction: column; align-items: center; } .space__consultation{ order: 1; margin-left: 0; max-width: 100%; width: 100%; } .space__consultation .btn-big{ margin-top: 40px; } .space__statistics{ order: 2; margin-top: 40px; width: auto; height: auto; padding: 0; flex-wrap: wrap; justify-content: space-between; } .space-statistics__img{ position: static; width: 100%; min-height: 300px; } .space-statistics__item{ margin-top: 16px; margin-left: 0; width: calc(50% - 8px); height: 160px; background: #2a2a2d; } } /* space */ @media only screen and (max-width: 992px) { .main__item{ margin-top: 96px; } } /* gym */ @media only screen and (max-width: 992px) { .gym{ margin: 40px -16px 0 0; overflow: hidden; } .gym .swiper-wrapper{ flex-wrap: nowrap; } .gym .swiper-slide:nth-child(3){ display: flex; flex-direction: column-reverse; } .gym__item{ margin: 0; flex-direction: column-reverse; height: auto; } .gym-item__img, .gym-item__text{ max-width: 100%; width: 100%; height: 179px; } .gym-item__img{ margin-top: 24px; } .gym-item-text__header .text-1{ margin-bottom: 5px; } .gym-item-text__header .title-2{ margin-left: 8px; } } /* gym */ /* projects */ @media only screen and (max-width: 992px) { .projects{ overflow: hidden; margin: 0; } .projects .swiper-wrapper{ margin: 40px 0 0 0; flex-wrap: nowrap; } .projects__item{ margin: 0; width: 100% !important; } .projects-item__img{ height: 200px; } .projects-item__content{ padding: 16px; min-height: auto; } .projects-item__tag{ margin-left: 24px; } .projects-item__text{ margin-top: 16px; } .projects-item__text .text-1{ font-size: 20px; } .projects__next{ display: none; } .projects__counter{ margin-top: 40px; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 18px; color: var(--text-white); } .projects .swiper-button-next::after, .projects .swiper-button-prev::after{ position: static; font-size: 0; } .projects .swiper-button-next, .projects .swiper-button-prev{ position: static; margin-top: 0; width: 32px; height: 32px; } .projects .swiper-button-next{ margin-left: 40px; background-image: url(/assets/img/icon/slider-righ.svg); background-repeat: no-repeat; } .projects .swiper-button-prev{ margin-right: 40px; background-image: url(/assets/img/icon/slider-left.svg); background-repeat: no-repeat; } } /* projects */ /* how */ @media only screen and (max-width: 992px) { .how{ margin-top: 40px; } .how__content{ display: none; } .how__control{ width: 100%; } .how-control__item{ flex-direction: column; align-items: start; } .how-control-item__number{ width: 40px; font-size: 20px; } .how-control__item__name{ margin-top: 16px; margin-left: 0; max-width: 100%; font-size: 20px; } .how-content__item-block{ position: static; } .how-content__item-block.active{ margin-top: 16px; } .how-content__item{ padding: 16px; } .how-content-item__text{ width: 100%; } .how-content-item__img{ display: none; } } /* how */ /* free */ @media only screen and (max-width: 992px) { .free{ padding: 40px 16px 39px 16px; } .free__content{ margin-top: 40px; width: 100%; } .form__item--two{ flex-direction: column; } .form__item--two .input__block{ width: 100%; } .form__item--two .input__block:nth-child(2){ margin-top: 16px; } .form__additional, .form input[type=submit]{ margin-top: 24px; } .form__checkbox-block{ align-items: start; } .free .title-1{ text-align: center; } } /* reviews */ @media only screen and (max-width: 992px) { .reviews__item{ padding-bottom: 71px; flex-direction: column; } .reviews-item-content-header__img{ width: 80px; height: 80px; } .reviews-item-content-header__block{ margin-left: 16px; flex-direction: column; } .reviews-item-content-header__item .text-2{ margin-top: 12px; } .reviews-item-content-header__item:nth-child(2){ margin-top: 12px; justify-content: start; } .reviews-item-content__text{ margin-top: 24px; } .reviews-item__img{ margin-top: 24px; margin-left: 0; height: 300px; width: 100%; } .reviews .swiper-pagination{ bottom: 87px; padding-right: 0px; text-align: center; } .reviews .swiper-pagination-bullet{ width: 53px; } } /* reviews */ /* text-form */ @media only screen and (max-width: 992px) { .text-form__form{ display: none; } .text-form__content .text-2{ margin-top: 24px; } } /* text-form */ /* services */ @media only screen and (max-width: 992px) { .services{ margin: 40px 0 0 0; } .services__item{ margin: 24px 0 0 0; padding: 16px; height: auto; display: flex; flex-direction: column; justify-content: space-between; } .services__item:nth-child(n){ width: 100%; } .services__item:first-child{ margin-top: 0; } .services__img{ width: 40px; } .services__content{ min-height: auto; } .services__content .title-4{ margin-top: 24px; /* margin-bottom: 0; */ } .services__item .text-2{ /* display: none; */ } } /* services */ /* call */ @media only screen and (max-width: 992px) { .call{ padding: 40px 16px 39px 16px; } .call__content{ margin-top: 40px; width: 100%; height: auto; flex-direction: column; } .call__item{ margin-top: 24px; } .call__item:first-child{ margin-top: 0; } .call__item a{ margin-top: 24px; } .call__item a:first-child{ margin-top: 0; } } /* call */ /* modal */ .modal__item{ padding: 64px 16px; } .modal__item > .form{ padding: 40px 0 0 0; } .modal-item__close{ top: 20px; right: 20px; } .modal__item .text--bo-line.form__link{ margin-top: 6px; margin-left: 0; } /* modal */ @media only screen and (max-width: 992px) {}