fix log

assets/css/gp-style-core.css

@@ -68,6 +68,45 @@ body{
     font-family: var(--font-family);
 }
 
+.modal{
+    position: fixed;
+    top: 0;
+
+    height: 100vh;
+    width: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: rgba(17, 17, 20, .8);
+
+    z-index: 100;
+
+    pointer-events: none;
+
+    transition: opacity .3s;
+    opacity: 0;
+}
+.modal.active{
+    pointer-events: auto;
+
+    opacity: 1;
+}
+
+.modal__item{
+    padding: 88px 64px;
+
+    background-color: var(--background-main);
+
+    position: relative;
+
+    display: none;
+}
+.modal__item.active{
+    display: block;
+}
+
 /* text */
 .title-1{
     font-weight: 700;
@@ -162,6 +201,10 @@ body{
     border-radius: 4px;
 
     transition: background-color .3s;
+    background-color: rgba(17, 17, 20, 0);
+
+    cursor: pointer;
+    border: none;
 }
 .btn-big--border{
     padding: 21px 32px;
@@ -171,12 +214,30 @@ body{
 .btn-big--border--blood{
     border-color: var(--blood);
 }
+.btn-big--border--blood:hover{
+    background-color: var(--red);
+}
+.btn-big--border--blood:active{
+    background-color: var(--blood);
+}
 .btn-big--border--white{
     border-color: var(--text-white);
 }
+.btn-big--border--white:hover{
+    background-color: var(--background-grey-hover);
+}
+.btn-big--border--white:active{
+    background-color: rgba(17, 17, 20, 0);
+}
 .btn-big--blood{
     background-color: var(--blood);
 }
+.btn-big--blood:hover{
+    background-color: var(--red);
+}
+.btn-big--blood:active{
+    background-color: var(--blood);
+}
 
 .btn-big--social{
     padding-right: 66px;

assets/css/gp-style-desktop.css

@@ -26,6 +26,17 @@
 .text-3{
     font-size: 16px;
 }
+@media only screen and (min-width: 992px) and (max-width: 1500px) {
+.wrapper{
+    max-width: 100%;
+    width: 100%;
+
+    padding: 0 20px;
+}
+.header__wrapper{
+    padding: 20px;
+}
+}
 /* text */
 
 /* header */
@@ -103,6 +114,7 @@
 .header-menu__list li:first-child{
     margin-left: 0;
 }
+
 .header-menu__list a{
     color: var(--text-white);
     text-decoration: none;
@@ -113,10 +125,181 @@
     background-image: url(/assets/img/icon/arrow-bottom.svg);
     background-repeat: no-repeat;
     background-position: center right;
+
+    display: block;
+}
+.header-menu-list__sub{
+    margin-top: 30px;
+
+    position: absolute;
+
+    width: 300px;
+
+    padding: 14px 0;
+
+    list-style-type: none;
+    background-color: var(--background-grey);
+
+    opacity: 0;
+    pointer-events: none;
+
+    transition: all .3s;
+}
+.header-menu-list__sub.open{
+    opacity: 1;
+    pointer-events: auto;
+}
+.header-menu-list__sub li{
+    margin-left: 0;
+}
+.header-menu-list__sub li > a{
+    padding: 14px 24px;
+
+    transition: all .3s;
+
+    display: block;
+}
+.header-menu-list__sub > li:hover{
+    padding-right: 23px;
+
+    background-color: var(--background-grey-hover);
+    border-right: 1px solid var(--text-white);
+}
+.header-menu-list__sub > li > ul{
+    transition: all .3s;
+}
+.header-menu-list__sub > li:hover > ul{
+    opacity: 1;
+    pointer-events: auto;
+}
+.header-menu-list__sub ul{
+    position: absolute;
+    top: 0;
+    left: 100%;
+
+    width: 100%;
+    height: 100%;
+
+    display: block;
+
+    background-color: var(--background-grey-hover);
+    list-style-type: none;
+
+    opacity: 0;
+    pointer-events: none;
+}
+.header-menu-list__sub ul.open{
+    opacity: 1;
+    pointer-events: auto;
 }
 .header-menu__search{
+    display: flex;
+    align-items: center;
+
+    position: relative;
+}
+.header-menu-search__open{
     width: 32px;
     aspect-ratio: 1;
+
+    background: none;
+    overflow: hidden;
+
+    border: none;
+
+    cursor: pointer;
+}
+.header-menu__search.active .header-menu-search__open img:first-child{
+    display: none;
+}
+.header-menu-search__block{
+    position: absolute;
+    top: 58px;
+    right: 0;
+
+    width: 400px;
+
+    transition: all .3s;
+
+    pointer-events: none;
+
+    opacity: 0;
+}
+.header-menu__search.active .header-menu-search__block{
+    pointer-events: auto;
+
+    opacity: 1;
+}
+.header-menu-search__input{
+    padding: 14px 64px 14px 24px;
+
+    width: 100%;
+
+    font-weight: 400;
+    font-size: 16px;
+    text-transform: uppercase;
+    color: var(--text-white);
+
+    border: 1px solid var(--text-white);
+    border-radius: 4px;
+
+    background-color: var(--background-grey-hover);
+}
+.header-menu-search__input::placeholder{
+    color: var(--link);
+}
+.header-menu-search__btn{
+    position: absolute;
+    top: 8px;
+    right: 24px;
+
+    width: 32px;
+    aspect-ratio: 1;
+
+    background: none;
+    border: none;
+
+    background-image: url(/assets/img/icon/search.svg);
+    /* background-image: url(/assets/img/icon/close.svg); */
+}
+.header-menu-search__found{
+    margin-top: 24px;
+
+    padding: 24px;
+
+    background-color: var(--background-grey-hover);
+    border-radius: 4px;
+
+    display: none;
+}
+.header-menu-search__found.active{
+    display: block;
+}
+.header-menu-search__error{}
+.header-menu-search__item{
+    margin-top: 24px;
+
+    display: flex;
+}
+.header-menu-search__item:first-child{
+    margin-top: 0;
+}
+.header-menu-search-item__img{
+    width: 72px;
+    aspect-ratio: 1;
+
+    border-radius: 8px;
+}
+.header-menu-search-item__content{
+    margin-left: 16px;
+}
+.header-menu-search-item__art{
+    margin-top: 8px;
+
+    color: var(--link);
+}
+.phone-search{
+    display: none;
 }
 /* header */
 
@@ -174,13 +357,18 @@
 /* footer */
 
 /* Стили для лептопов  */
-@media only screen and (min-width: 992px) and (max-width: 1400px) {
+@media only screen and (min-width: 992px) and (max-width: 1500px) {
 .wrapper{
     width: 100%;
 
     padding: 20px;
 }
-
+.header-menu-list-next__content {
+    top: 72px;
+}
+.header-menu-search__block {
+    top: 78px;
+}
 /* header */
 .header__wrapper{
     flex-wrap: wrap;
@@ -355,7 +543,7 @@
 
 @media only screen and (min-width: 992px) {
 .gym__item{
-    width: calc(50% - 40px) !important;
+    width: calc(50% - 44px) !important;
 }
 .gym .swiper-slide:nth-child(3){
     width: 100% !important;
@@ -365,14 +553,15 @@
 /* projects */
 .projects{
     margin: 37px -20px -20px -20px;
-
+}
+.projects .swiper-wrapper{
     display: flex;
     flex-wrap: wrap;
 }
 .projects__item{
     margin: 20px;
 
-    width: calc(50% - 40px);
+    width: calc(50% - 44px) !important;
 
     display: flex;
     flex-direction: column;
@@ -425,6 +614,9 @@
     display: flex;
     justify-content: center;
 }
+.projects__counter{
+    display: none;
+}
 /* projects */
 
 /* how */
@@ -552,6 +744,15 @@
     width: 336px;
     height: 336px;
 }
+
+@media only screen and (min-width: 992px) and (max-width: 1481px) {
+.how-content-item__img{
+    display: none;
+}
+.how-content-item__text{
+    width: 100%;
+}
+}
 /* how */
 
 /* free */
@@ -604,16 +805,25 @@
     margin-left: 40px;
 
     width: 100%;
-}
-.reviews-item-content-header__item{
-    margin-top: 16px;
-
-    width: 100%;
 
     display: flex;
     justify-content: space-between;
 }
-.reviews-item-content-header__item:first-child{
+.reviews-item-content-header__item{
+    width: 100%;
+
+    /* display: flex; */
+    /* justify-content: space-between; */
+}
+.reviews-item-content-header__item:nth-child(2){
+    display: flex;
+    justify-content: end;
+    align-items: start;
+}
+.reviews-item-content-header__item .text-2{
+    margin-top: 16px;
+}
+.reviews-item-content-header__item .text-2:first-child{
     margin-top: 0;
 }
 .reviews-item-content-header__pin{
@@ -640,6 +850,26 @@
 
     flex-shrink: 0;
 }
+.reviews-item__img-block{
+    margin-left: 164px;
+
+    width: 577px;
+    height: 600px;
+    border-radius: 4px;
+
+    object-fit: cover;
+
+    flex-shrink: 0;
+
+    position: relative;
+}
+.reviews .reviews-item__img-block .swiper-pagination{
+    bottom: 16px;
+
+    padding-right: 0px;
+
+    text-align: center;
+}
 .reviews .swiper-pagination{
     position: absolute;
     right: 32px;
@@ -714,6 +944,9 @@
 .text-form__content{
     width: 100%;
 }
+.text-form__content .text-2{
+    margin-top: 40px;
+}
 .text-form__form{
     margin-left: 40px;
 
@@ -742,6 +975,12 @@
 
     align-items: start;
 }
+
+@media only screen and (min-width: 992px) and (max-width: 1082px) {
+.text-form__form{
+    width: 40%;
+}
+}
 /* text and form */
 
 /* services */
@@ -778,7 +1017,7 @@
     aspect-ratio: 1;
 }
 .services__content{
-    height: 89px;
+    min-height: 89px;
 
     /* display: flex; */
 }
@@ -814,5 +1053,47 @@
     flex-direction: column;
     justify-content: space-between;
 }
+@media only screen and (min-width: 992px) and (max-width: 1063px) {
+.call__content{
+    width: 100%;
+}
+}
 /* call */
+
+/* modal */
+.modal__item{
+    width: 1000px;
+
+    position: relative;
+}
+.modal__item > .title-1{
+    text-align: center;
+}
+.modal__item > .text-1{
+    text-align: center;
+}
+.modal__item > .text-1{
+    margin-top: 24px;
+}
+.modal__item > .form{
+    padding: 56px 36px 0 36px;
+}
+.modal-item__close{
+    position: absolute;
+    top: 40px;
+    right: 40px;
+
+    width: 24px;
+    aspect-ratio: 1;
+
+    background-image: url(/assets/img/icon/close.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+
+    background-color: rgba(42, 42, 45, 0);
+    border: none;
+
+    cursor: pointer;
+}
+/* modal */
 @media only screen and (min-width: 992px) and (max-width: 1032px) {}

assets/css/gp-style-mobile.css

@@ -62,3 +62,20 @@
 }
 /* footer */
 }
+
+/* services */
+@media only screen and (max-width: 576px) {
+.services__content .title-4{
+    margin-bottom: 0;
+}
+.services__item .text-2{
+    display: none;
+}
+}
+/* services */
+
+/* call */
+.call .title-3{
+    font-size: 20px;
+}
+/* call */

assets/css/gp-style-tablet.css

@@ -17,6 +17,9 @@
 .title-3{
     font-size: 32px;
 }
+.title-4{
+    font-size: 20px;
+}
 .text-1{
     font-size: 18px;
 }
@@ -87,39 +90,76 @@
 
     transition: opacity .3s;
 }
-.button-menu__close{
+
+.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: 0;
+    left: 100%;
 
     width: 100%;
     height: 100%;
 
-    transition: opacity .3s;
-    opacity: 0;
-}
-.button-menu.open .button-menu__open{
-    opacity: 0;
-}
-.button-menu.open .button-menu__close{
-    opacity: 1;
-}
+    padding: 104px 16px 40px 16px;
 
-.phone-menu{
-    position: absolute;
-    top: 112px;
-    right: 0;
+    background-color: var(--background-main);
+
+    transition: all .5s;
+
+    overflow-y: auto;
+}
+.phone-menu__sub.open{
     left: 0;
-    
-    width: 100%;
 }
-.phone-menu__block-content{
-    /* height: 0; */
-    /* overflow: hidden; */
+.phone-menu__sub > li:nth-child(2) a{
+    font-weight: 700;
+    font-size: 32px;
 }
-.phone-menu__content{
-    padding: 0 16px 40px 16px;
+.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;
@@ -177,16 +217,123 @@
 .phone-menu__text--no-line{
     text-decoration: none;
 }
-
 .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;
 
@@ -330,3 +477,320 @@ main{
 }
 }
 /* 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-item__img-block{
+    margin-top: 24px;
+    margin-left: 0;
+
+    height: 300px;
+    width: 100%;
+}
+.swiper-reviews-img{
+    height: 100%;
+}
+.reviews-item__img-block .swiper-slide{
+    width: 100%;
+    height: 100%;
+}
+.reviews-item__img-block .swiper-slide img{    
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+}
+.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) {}

assets/js/main.js

@@ -13,10 +13,9 @@ const gymSwiper = new Swiper('.gym-swiper', {
     }
 });
 
-
-
 const reviewsSwiper = new Swiper('.reviews-swiper', {
     spaceBetween: 24,
+    allowTouchMove: false,
     // If we need pagination
     pagination: {
         el: '.swiper-pagination',
@@ -42,23 +41,69 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
     }
 })
 
-// gymSwiper.destroy();
+let swiperReviews = document.querySelectorAll('.swiper-reviews-img');
+let reviewsSwiperImgs = {};
+swiperReviews.forEach((review, index) => {
+    let newClass = `swiper-reviews-img-${index}`;
+    review.classList.add(newClass);
+
+    reviewsSwiperImgs[index] = new Swiper(`.${newClass}`, {
+        pagination: {
+            el: ".swiper-pagination",
+            clickable: true,
+            renderBullet: function (index, className) {
+                return '<span class="' + className + '">' + "</span>";
+            },
+        },
+    });
+})
+
+
+
+const projectsSwiper = new Swiper('.projects-swiper', {
+    direction: 'horizontal',
+    breakpoints: {
+        320:{
+            slidesPerView: 1,
+            spaceBetween: 24,
+        },
+        996: {
+            slidesPerView: 10
+        },
+    },
+    // Navigation arrows
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },    
+    runCallbacksOnInit: true,
+    // === new change
+    on: {
+        slideChange: function(){
+            let offer = document.querySelector('#numberProjects');
+            offer.innerHTML = (this.activeIndex +  1);
+        }
+    }
+});
+
+
+
 
 // how
+let itemButtons = document.querySelectorAll('.how-control__item');
+itemButtons.forEach((button) => {
+    let num = button.dataset.num;
 
-function howPc() {
-    let itemButtons = document.querySelectorAll('.how-control__item');
+    button.onclick = function name(params, index) {
 
-    itemButtons.forEach((button) => {
-        let num = button.dataset.num;
+        let activeContent = document.querySelector('.how-content__item-block.active'),
+            activeButton = document.querySelector('.how-control__item.active');
 
-        button.onclick = function name(params, index) {
+        if (activeContent.dataset.num == button.dataset.num) return;
         
-            let activeContent = document.querySelector('.how__content').querySelector('.active'),
-                activeButton = document.querySelector('.how__control').querySelector('.active');
-
-            if (activeContent.dataset.num == button.dataset.num) return;
+        activeContent.style.height = `${activeContent.offsetHeight}px`;
         
+        setTimeout(() => {
             activeContent.style.height = '0px';
             activeContent.classList.remove('active');
             activeButton.classList.remove('active');
@@ -72,35 +117,333 @@ function howPc() {
                 newActive.style.height = newHeight;
                 newActive.classList.add('active');
                 newButton.classList.add('active');
+
+                setTimeout(() => {
+                    newActive.style.height = 'auto';
+                }, 300);
             }, 300);
-        }        
-    })
+        }, 0);
+    }        
+})
+
+let screenWidth = window.screen.width;
+if (screenWidth <= 992) {
+    howPhone();
+}else{
+    howPc();
 }
 
-howPc();
+function howPc() {
+    if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
+        return;
+    }
+
+    let blocks =  document.querySelectorAll('.how-content__item-block'),
+        content = document.querySelector('.how__content');
+
+    blocks.forEach(block => {
+        content.appendChild(block)
+    });
+}
+function howPhone() {
+    
+    if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {    
+        return;
+    }
+    
+    let buttons =  document.querySelectorAll('.how-control__item');
+
+    buttons.forEach(button => {
+        let num = button.dataset.num,
+            block = document.querySelector(`.how-content__item-block[data-num='${num}']`);
+            
+            button.after(block);
+    });
+}
+// how end
+
+// phone menu
+addClosePhoneMenu('.phone-menu__content');
+addClosePhoneMenu('.phone-menu__sub');
+
+let btnOpenMenu = document.querySelector('.button-menu__open');
+btnOpenMenu.onclick = function () {
+    let block = document.querySelector('.phone-menu'),
+        content = document.querySelector('.phone-menu__content'),
+        contentHeight = content.offsetHeight + 'px';
+
+    block.style.height = contentHeight;
+}
+
+let closeMenu = document.querySelector('.phone-menu-content__close');
+closeMenu.onclick = function () {
+    let block = document.querySelector('.phone-menu');
+
+    block.style.height = '0px';
+}
+
+let phoneList = document.querySelectorAll('.phone-menu__list');
+phoneList.forEach(list => {
+    let elementList = list.querySelectorAll('li');
+
+    elementList.forEach(element => {
+        let nextList = element.querySelector('.phone-menu__sub');
+
+        if (nextList) {
+            let button = element.querySelector('a');
+
+            button.onclick = function () {
+                nextList.classList.add('open')           
+            }
+            
+            nextList.querySelector('.phone-menu-content__close').onclick = function () {
+                nextList.classList.remove('open')           
+            }
+            
+        }
+    })
+})
+
+function addClosePhoneMenu(classAdd) {
+    document.querySelectorAll(classAdd).forEach(element => {
+        let button = document.createElement('button');
+        button.className = "phone-menu-content__close";
+
+        let referenceElement = element.firstElementChild;
+
+        element.insertBefore(button, referenceElement);
+    })
+    
+}
+// phone menu end
+
+// search
+let openBtnSearch = document.querySelector('.header-menu-search__open'),
+    blockSearchPc = document.querySelector('.header-menu__search');
+
+openBtnSearch.onclick = function () {
+    blockSearchPc.classList.toggle('active');
+}
+
+let btnOpenSearchPhone = document.querySelector('.phone__open-search'),
+    searchPhone = document.querySelector('.phone-search');
+
+btnOpenSearchPhone.onclick = function () {
+    if (!searchPhone.classList.contains('hidden')) {
+        setTimeout(() => {
+            searchPhone.classList.add('hidden');
+        }, 300);
+    }else{
+        searchPhone.classList.remove('hidden');
+    }
+
+    btnOpenSearchPhone.classList.toggle('active');
+    searchPhone.classList.toggle('active');
+}
+
+// pc
+let inputSearchPc = document.querySelector('.header-menu-search__input'),
+    btnSearchPc = document.querySelector('.header-menu-search__btn');
+
+btnSearchPc.onclick = function () {
+    let value = inputSearchPc.value,
+        newPost = {
+            value: value,
+        };
+
+    postSearch(newPost, 'pc');
+}
+
+// phone
+let inputSearchPhone = document.querySelector('.phone-search__input');
+
+inputSearchPhone.addEventListener('input', function(event) {
+    let value = event.target.value,
+        newPost = {
+            value: value,
+        };
+
+    postSearch(newPost, 'phone');
+});
+
+function postSearch(newPost, device) {
+    let contentPc = document.querySelector('.header-menu-search__found'),
+        contentPhone = document.querySelector('.phone-search__found');
+
+    fetch('http://jsonplaceholder.typicode.com/posts', {
+        method: 'POST',
+        // body: JSON.stringify(newPost),
+        headers: {
+          'Content-type': 'application/json; charset=UTF-8',
+        },
+      })
+        .then((data) => {
+            if (device == 'pc') {
+                contentPc.innerHTML = '';
+
+                contentPc.innerHTML = `<div class="header-menu-search__item">
+                                    <img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
+
+                                    <div class="header-menu-search-item__content">
+                                        <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
+                                        <p class="header-menu-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
+                                    </div>
+                                </div>`;
+
+                contentPc.classList.add('active');
+            }else{
+                contentPhone.innerHTML = '';
+
+                contentPhone.innerHTML = `<div class="phone-search__item">
+                            <img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img">
+                        
+                            <div class="phone-search-item__content">
+                                <p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
+                                <p class="phone-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
+                            </div>
+                        </div>`;
+
+                contentPhone.classList.add('active');
+            }
+        }).catch(
+            () => {
+              if (device == 'pc') {
+                postError(contentPc);
+              }else{
+                postError(contentPhone);
+              }
+            }
+        )
+}
+
+function postError(divContent) {
+    divContent.innerHTML = ''
+                
+    let p = document.createElement("p");
+    p.textContent = "Произошла ошибка"
+    p.className = "header-menu-search__error text-2";
+
+    divContent.appendChild(p);
+}
 
 
-// function howPc() {
-//     let itemButtons = document.querySelectorAll('.how-control__item'),
-//         itemBlocks = document.querySelectorAll('.how-content__item-block');
+// search end
 
-//     itemButtons.forEach((button, index) => {
-//         let block = itemBlocks[index];
+// open-modal
 
-//         button.onclick = function () {
-//             let activeContent = document.querySelector('.how__content').querySelector('.active'),
-//                 activeButton = document.querySelector('.how__control').querySelector('.active');
+let openModals = document.querySelectorAll('.open-modal'),
+    modal = document.querySelector('.modal');
 
-//             activeContent.style.height = '0px';
-//             activeContent.classList.remove('active');
-//             activeButton.classList.remove('active');
+openModals.forEach(openModal => {
+    let modalName = openModal.dataset.modal;
 
-//             setTimeout(() => {
-//                 let newHeight = block.querySelector('.how-content__item').offsetHeight + 'px';
-//                 block.style.height = newHeight;
-//                 block.classList.add('active');
-//                 button.classList.add('active');
-//             }, 300);
-//         }
-//     })
-// }
+    openModal.onclick = function () {
+        let modalItem = document.querySelector(`.modal__item.${modalName}`);
+
+        modalItem.classList.add('active');
+        modal.classList.add('active');
+    }
+})
+
+modal.onclick = function (event) {
+    if (event.srcElement.classList.contains('modal')) {
+        document.querySelector(`.modal__item.active`).classList.remove('active');
+        modal.classList.remove('active');
+    }
+}
+
+let itemModels = document.querySelectorAll('.modal__item');
+
+itemModels.forEach(item => {
+    let btnClose = item.querySelector('.modal-item__close');
+
+    btnClose.onclick = function () {
+        item.classList.remove('active');
+        modal.classList.remove('active');
+    }
+})
+// open-modal end
+
+// masks
+
+let phoneInputs = document.querySelectorAll('.input__field[type=phone]');
+
+phoneInputs.forEach(phoneInput => {
+    phoneInput.onfocus = function (event) {
+        let value = phoneInput.value;
+
+        if (value.length == 0) {
+            phoneInput.value = '+7 '
+        }
+    }
+
+    phoneInput.addEventListener('input', function(event) {
+        let value = phoneInput.value,
+            data = event.data,
+            length = value.length;
+
+        if (value.charAt(0) == '+' && length == 1) return;
+
+        if (isNaN(data)) {
+            phoneInput.value = value.slice(0, -1);
+        }
+    
+        if (typeof data != 'object') {
+            if (length == 2 || length == 6 || length == 10) {
+                phoneInput.value = value + ' ';
+            }
+            if (length == 3 || length == 7 || length == 11) {
+                if (data != ' ') {
+                    phoneInput.value = value.slice(0, -1) + ' ' + data;
+                }
+            }
+        }
+        
+        if (length <= 3) {
+            phoneInput.value = '+7 '
+        }
+                
+    });
+})
+
+// masks end
+
+// pc menu
+
+let listMenu = document.querySelectorAll('.header-menu__list > li');
+
+listMenu.forEach(li => {
+    if (li.querySelector('.header-menu-list__next')) {
+        let nextButton = li.querySelector('.header-menu-list__next'),
+            sub = li.querySelector('.header-menu-list__sub');
+
+        nextButton.addEventListener('mouseover', function (event) {
+            let openSubMenu = document.querySelector('.header-menu-list__sub.open');
+
+            if (openSubMenu) {
+                openSubMenu.classList.remove('open');
+            }
+
+            sub.classList.add('open');
+        })
+
+        sub.addEventListener('mouseout', function (event) {
+            if (event.relatedTarget.offsetParent.tagName != 'UL') {
+                sub.classList.remove('open');
+            }
+        })
+    };
+})
+
+// pc menu end
+
+// resize
+window.addEventListener('resize', () => {
+    let screenWidth = window.screen.width;
+    
+    if (screenWidth <= 992) {
+        howPhone();
+    }else{
+        howPc();
+    }
+});