@media screen and (max-width: 1600px){
	#advantages .item{font-size: 16px; padding: 0 20px}
	.grid.grid-7{grid-template-columns: repeat(4, 1fr);}
}

@media screen and (max-width: 1340px){
	#promo__about{padding: 120px 0 40px}
	#promo__about .logo{width: 100%;}
	#promo__about .logo img{margin: 0 auto;}
	#promo__about .data{gap: 25px}
}


@media screen and (max-width: 1200px){
	.grid.grid-5,.grid.grid-7{grid-template-columns: repeat(3, 1fr); gap: 20px}
	#course__advantages .grid.grid-3,#memberships .grid.grid-3{gap: 20px; grid-template-columns: repeat(2, 1fr);}


	#promo{padding-bottom: 50px}


	#services .grid.grid-5{grid-template-columns: repeat(2, 1fr); gap: 40px}


	#portfolio .swiper{overflow-x: inherit;}
	#portfolio .swiper-slide{width: 235px}


	#values .image{width: 100%; margin-bottom: 40px;}
	#values .image img{border-radius: 2px;}
	#values .items{grid-template-columns: repeat(2, 1fr); width: 100%;}


	#brands .flex{gap: 15px}
	#brands .flex img{max-height: 70px}


	#reviews .swiper{overflow-x: inherit;}
	#reviews .swiper-slide{width: 235px}


	#about__project .text{width: 100%; margin-bottom: 40px}
	#about__project .image{width: 100%}
	#about__project .image img{margin: 0 auto;}
	#about__project .bt__note{width: 100%;}


	#contacts .form img{width: 100%; margin-bottom: 40px}
	#contacts .form form{width: 100%;}


	#promo__service{padding: 250px 0 40px;}
	#promo__service .info img{position: absolute; top: 100px; left: 30px; max-width: 336px}
	#promo__service .info p{position: absolute; top: 190px; left: 0; margin: 0; width: 100%; box-sizing: border-box; padding: 0 30px; text-align: left;}
	#promo__service .image{width: 100%; margin-bottom: 40px;}
	#promo__service .info{width: 100%;}


	#video h2{max-width: 100%; width: 100%;}
	#video .more{padding: 20px 0 0; width: 100%;}


	#installation .item{width: 100%;}


	#experts .bt{max-width: 335px; line-height: 140%;}
	#experts .slider-sw .swiper-button-next,#experts .slider-sw .swiper-button-prev{top: -168px}
	#experts .slider-sw .swiper-button-next{right: 0;}
	#experts .slider-sw .swiper-button-prev{left: calc(100% - 90px)}


	#promo__about .image,#promo__about .info{max-width: calc(50% - 15px)}


	footer ul{gap: 15px}
	footer ul li a{padding: 0 18px; font-size: 15px}
}


@media screen and (max-width: 767px){
	.container{padding: 0 12px;}

	.section{padding: 40px 0;}


	.bt{margin-bottom: 20px; font-size: 16px; line-height: 140%;}
	.bt__note{margin-bottom: 20px; letter-spacing: -0.02em; font-size: 24px; line-height: 112%;}
	.bt__content{margin-bottom: 20px}
	.bt__text{font-size: 12px;}


	.grid{grid-template-columns: repeat(1, 1fr)!important; gap: 20px}

	.btn-more{font-size: 14px;}


	header{height: 52px; padding: 12px 0;}
	header .logo a{font-size: 22px; line-height: 90%;}
	header .data{gap: 10px}
	header .data svg{width: 28px; height: 28px;}
	header.header__blue{background: #1f283e}


	#navigation{padding: 68px 12px 40px; background: #30394d}
	#navigation ul li{width: 100%; margin-bottom: 12px;}
	#navigation ul li a{height: 98px; font-size: 16px;}
	#navigation ul li a:after{bottom: 24%;}
	#navigation .ct{justify-content: flex-start; gap: 20px;}
	#navigation .ct a{width: 100%; font-size: 16px;}


	#promo{padding-bottom: 100px; background: url("../img/promo_image_mobile.jpg") 50% 0 no-repeat; background-size: cover;}
	#promo h1{font-size: 40px; line-height: 96%; max-width: 200px; float: right;}
	#promo h1 span{font-size: 14px;}


	#advantages .item{height: auto; padding: 32px 20px; font-size: 14px;}


	#services .item{padding: 0}
	#services .item h3{font-size: 14px; margin-bottom: 10px}
	#services .item .excerpt{font-size: 12px;}
	#services .item .detail{position: relative; padding: 10px 0 0; margin-top: 10px}


	#portfolio .btn-gold-tr{width: 100%; padding: 0; margin-bottom: 20px}


	#values .items .item{padding-left: 20px}
	#values .items .item:after{top: 3px}
	#values .items .item h3{font-size: 14px;}
	#values .items .item p{font-size: 12px;}


	#brands .flex img{max-height: 40px}


	#reviews .slider-sw .swiper-button-next,#reviews .slider-sw .swiper-button-prev{top: -28px}
	#reviews .slider-sw .swiper-button-next{right: 0;}
	#reviews .slider-sw .swiper-button-prev{left: calc(100% - 90px)}

	#photos .slider-sw .swiper-button-next,#photos .slider-sw .swiper-button-prev{top: -28px}
	#photos .slider-sw .swiper-button-next{right: 0;}
	#photos .slider-sw .swiper-button-prev{left: calc(100% - 90px)}
	#photos .swiper-slide{width: 100%;}


	#about__project .name{gap: 20px; margin-bottom: 20px}
	#about__project .name .btn{background: transparent; width: 100%;}
	#about__project .text{font-size: 12px}
	#about__project .text .item{padding-left: 20px}
	#about__project .text .item:after{top: 3px}


	#contacts .data{gap: 20px}
	#contacts .data .ct{gap: 20px; width: 100%;}
	#contacts .data .ct a{width: 100%; justify-content: flex-start;}


	#promo__service .info img{left: 12px}
	#promo__service .info p{padding: 0 12px;}
	#promo__service .items{gap: 20px}


	#service__in ul li{width: 100%; margin-bottom: 20px; padding-left: 20px; font-size: 12px;}
	#service__in ul li:after{top: 5px;}
	#service__in ul li:last-child{margin-bottom: 0;}


	#promo__portfolio{padding: 100px 0 40px;}
	#promo__portfolio .data{gap: 40px}
	#promo__portfolio h1{font-size: 24px;}
	#promo__portfolio .image{width: 100%; max-width: 100%;}
	#promo__portfolio .image img{width: 100%; height: auto; max-width: 100%;}


	#about__portfolio .container{padding: 0 12px}
	#about__portfolio .content{font-size: 12px;}
	#about__portfolio .content p{margin-bottom: 12px}
	#about__portfolio .content img{width: 100%; margin-bottom: 12px}




	.form .form__item{margin-bottom: 20px}
	.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="password"], .form textarea, .form select{height: 48px; padding: 0 14px; font-size: 14px;}
	.form textarea{padding-top: 14px; height: 203px}
	.form .label{font-size: 14px;}
	.form .flex__start span{font-size: 12px}


	.content{font-size: 12px;}


	#promo__about{padding: 100px 0 40px}
	#promo__about .logo img{max-width: 220px;}
	#promo__about .image{width: 100%; max-width: 100%;}
	#promo__about .image img{max-width: 245px; height: auto; margin: 0 auto;}
	#promo__about .info{width: 100%; text-align: center; max-width: 100%;}
	#promo__about .info p{font-size: 16px; line-height: 160%; margin-bottom: 0;}
	#promo__about .info .btn{display: none;}


	#video .video a{background-size: 42px;}
	#video h2{font-size: 16px; line-height: 140%;}
	#video .more{font-size: 12px;}
	#note .text{padding: 0 50px; font-size: 16px; line-height: 140%;}
	#note .text:after{top: 0; background-size: 27px}
	#note .text:before{top: calc(100% - 27px); background-size: 27px}


	#installation .item{padding: 30px; margin-bottom: 20px}
	#installation .item .title{font-size: 16px; margin-bottom: 20px}
	#installation .item ol li{font-size: 12px;}
	#installation .btn{width: 100%; padding: 0;}


	#club__advantages .item img{margin-bottom: 12px; width: 30px; height: 30px;}
	#club__advantages .item .title{margin-bottom: 12px}
	#club__advantages .item .text{font-size: 12px;}


	#course__advantages .item span{font-size: 30px; margin-bottom: 10px}
	#course__advantages .item p{font-size: 16px; margin-bottom: 10px}
	#course__advantages .item img{height: 195px}


	#experts .slider-sw .swiper-button-next, #experts .slider-sw .swiper-button-prev{top: -118px}
	#experts .swiper-slide{max-width: 280px; box-sizing: border-box;}


	footer ul{gap: 15px}
	footer ul li{width: 100%;}
	footer .logo span{font-size: 32px;}
	footer .logo p{font-size: 14px;}
}



/*Apadtive APP*/

@media screen and (max-width: 1023px){
	#merch .grid.grid-4,#feed .grid.grid-4{grid-template-columns: repeat(3, 1fr);}


	#app__categories{text-align: left;}
	#app__categories .swiper{overflow-x: inherit;}
	#app__categories .swiper-wrapper{justify-content: flex-start;}


	#merch__item .gallery{width: 100%; margin-bottom: 24px}
	#merch__item .info{width: 100%;}


	#app__memberships .grid{gap: 20px!important; grid-template-columns: repeat(1, 1fr)!important;}
}



@media screen and (max-width: 767px){
	.btn-yellow-tr{height: 40px; font-size: 14px;}

	#merch .grid.grid-4,#feed .grid.grid-4{grid-template-columns: repeat(2, 1fr)!important; gap: 12px!important}

	.grid.grid-2.grid-video{grid-template-columns: repeat(2, 1fr)!important;}


	#page__name{font-size: 20px; padding-bottom: 16px;}


	#app__categories{padding-bottom: 24px;}
	#app__categories h2{font-size: 14px}
	#app__categories .swiper-slide a{height: 42px; font-size: 14px;}


	#feed .data{padding: 12px;}
	#feed .data .date{font-size: 12px;}
	#feed .data a.play{top: 12px; right: 12px;}
	#feed .image img{height: 190px}
	#feed .info{padding: 12px;}
	#feed .category{font-size: 12px;}
	#feed .title{font-size: 18px; line-height: 112%;}



	.pagination{padding: 24px 0 0;}
	.pagination .btn{padding: 0; width: 100%;}


	#allert__closed img{width: 152px;}



	#app__menu{padding: 0px 0px 16px 0px; background: #212b43;}
	#app__menu .container{padding: 0;}
	#app__menu ul,#app__menu nav{width: 100%; border-radius: 0;}
	#app__menu li{width: 20%;}
	#app__menu li a{width: 100%; height: 60px; background: transparent; font-size: 10px}


	#app__navigation nav li a{height: 66px; justify-content: left; font-size: 12px; padding: 0 26px;}
	#app__navigation .copyright{padding: 24px 0 0; gap: 12px; justify-content: center;}
	#app__navigation .copyright a{width: 100%; font-size: 16px;}


	#merch__item h2{font-size: 28px; margin-bottom: 24px; line-height: 130%;}
	#merch__item .gallery .swiper__gallery img{height: 335px;}
	#merch__item .gallery .list__swiper-th .swiper{overflow-x: inherit;}
	#merch__item .info .tags{margin-bottom: 24px; justify-content: center;}
	#merch__item .info .buy{margin-bottom: 24px;}
	#merch__item .info .tth{font-size: 14px; line-height: 140%;}
	#merch__item .info .tth p{margin-bottom: 24px;}
	#merch__item .info .buy .btn{padding: 0}


	#app__memberships .memberships__items .item{padding: 24px;}


	#subscription__cancel p{margin-bottom: 24px; font-size: 14px; line-height: 140%;}


	.cart__list,.row__note,.row__title{margin-bottom: 24px;}
	.row__note{font-size: 14px; line-height: 140%;}
	.cart__item{gap: 0}
	.cart__item .price{width: 90px}
	.cart__item .title{width: calc(100% - 100px)}


	.app__form .app__item{width: 100%;}
	.app__form .privacy{padding: 12px 0 0;}
	label.checkbox{margin-bottom: 24px;}
	.app__form .btn{width: 100%; padding: 0}


	.pagination .btn-yellow-normal{width: 100%; padding: 0}


	#app__article .image{margin-bottom: 12px; border-radius: 6px; overflow: hidden; border-bottom: 1px solid var(--yellow);}
	#app__article .image h1{padding: 12px; font-size: 28px; line-height: 130%; color: #fff;}
	#app__article .data{font-size: 16px; margin-bottom: 24px;}


	.app__content{font-size: 14px; line-height: 140%;}
	.app__content img{float: none!important; width: 100%!important; max-width: 100%!important; margin: 0 0 20px!important; height: auto!important;}
	.app__content br{display: none;}


	#app__article .media h1{margin-bottom: 12px; font-size: 28px; line-height: 130%;}
	#app__article .video img{height: 190px}


	#app__guide .data .info{width: 100%; margin-bottom: 24px;}
	#app__guide .data h1{font-size: 20px;}
	#app__guide .data .text{width: 100%;}
	#app__guide .data .ct{font-size: 14px; line-height: 130%;}
	#app__guide .data .ct ul{padding-left: 20px;}
	#app__guide .data .btn{padding: 0; width: 100%;}


	#app__account .tab{text-align: left;}
	#app__account .tab .btn{width: 100%!important; padding: 0}

	#app__account .tab .pagination span a{padding: 0; width: auto; display: inline-block;}


	.app__form .app__item.ap__info{order: 1}
	.app__form .app__item.ap__form{order: 0; margin-bottom: 24px;}


	#app__calendar .calendar__notes{gap: 20px}
	#app__calendar .calendar__notes svg path{fill: var(--yellow);}


	#merch .item .image img{height: 190px}


	#app__calendar .col{height: 64px; width: calc(100% - 3px); border-radius: 4px;}
	#app__calendar table td{padding-bottom: 6px;}
	#app__calendar .col .action{height: calc(100% - 20px); border-radius: 4px;}
	#app__calendar .col span{font-size: 10px; top: -2px;}
	#app__calendar .col .action .eventClass svg{width: 16px; height: 16px;}
}
/*Apadtive APP*/