@media screen and (max-width: 1620px){
	.container{width: 100%; padding: 0 30px}

	header nav li{margin: 0 10px}


	#categories{padding: 120px 30px 0}
	#categories .container{padding: 60px 30px}

	#reviews{padding: 80px 30px 0}
	#reviews .container,#quote .container,#about__page .container,#page__reviews .wrapper,#cards .wrapper,#materials .wrapper{padding: 60px 30px}


	#about .image{width: calc(100% - 680px)}
	#advantages .item{padding: 0 15px 40px}


	.instructors.grid{grid-template-columns: repeat(2, 1fr); gap: 12px}


	.teachers.grid{grid-template-columns: repeat(4, 1fr);}


	#commission .item .title{width: 100%; margin-bottom: 30px}
	#commission .item .text{width: 100%;}


	#faq{padding: 80px 30px 0}
	#faq .container{padding: 60px 30px}


	.list__courses .item .date{width: 200px}
	.list__courses .item .less{width: 300px}


	#faq.page__faq{padding: 60px 30px 0}


	footer .col{width: 200px}
}


@media screen and (max-width: 1200px){
	header nav{display: none;}
	header .lang{display: none;}
	header .pull{display: block; width: 48px; height: 48px; margin-left: 10px; border-radius: 8px; background: #F3F3F6 url("../img/pull.svg") 50% 50% no-repeat;}
	header .pull.open{background: #F3F3F6 url("../img/close.svg") 50% 50% no-repeat;}


	#promo{padding: 200px 0 35px}
	#promo .data{width: 100%; padding: 40px}
	#promo .item{width: 100%; margin-bottom: 12px; position: relative;}
	#promo .item:last-child{margin-bottom: 0;}
	#promo .item a{padding: 20px 30px}
	#promo .item a .title{margin-bottom: 0;}
	#promo .item a .more{font-size: 0; position: absolute; bottom: 30px; right: 30px}


	#categories{padding: 80px 0 0;}
	#categories .container,#quote .container,#about__page .container{padding: 60px 30px}
	#categories .grid{grid-template-columns: repeat(2, 1fr);}


	#quote,#about__page{padding: 0 30px}
	#quote{padding-top: 40px}
	#about__page p{font-size: 56px}
	#about__page .item{width: 100%; margin-bottom: 12px}


	#about__info .item img{width: 100%; margin-bottom: 40px; order: 0!important}
	#about__info .item .text{width: 100%; order: 1!important; padding: 0}


	#quote .text p{font-size: 30px}


	#commission .item .title{width: 100%; margin-bottom: 30px}
	#commission .item .text{width: 100%;}


	#faq{padding: 80px 30px 0}
	#faq .container{padding: 60px 30px}
	#faq .left{max-width: 100%;}
	#faq .faq{width: 100%;}


	#about{padding: 80px 0 0}
	#about .text{padding: 0 0 40px; width: 100%}
	#about .image{width: 100%;}


	#advantages{padding: 80px 0 0;}
	#advantages .grid{grid-template-columns: repeat(2, 1fr);}


	#reviews{padding: 40px 0 0}
	#reviews .container{padding: 60px 0}
	#reviews .bt,#reviews .bt__note{padding: 0 30px}
	#reviews .swiper{padding: 0 30px}
	#reviews .swiper-slide{width: 330px}
	.slider-sw .swiper-button-next{right: 30px;}
	.slider-sw .swiper-button-prev{left: calc(100% - 162px);}


	#news{padding: 80px 0 0;}
	.list__news.grid{grid-template-columns: repeat(2, 1fr);}
	#news .list__news .item:last-child{display: block;}
	.list__news .image img {
		height: 250px;
	}

	#apply{padding: 80px 0 0}
	#apply img{width: 100%; margin-bottom: 12px;}
	#apply .data{width: 100%; padding: 60px;}


	#categories__list{padding: 80px 0 0}
	#categories__list .grid{grid-template-columns: repeat(2, 1fr); gap: 12px}


	#groups{padding: 80px 0 0;}
	#groups .grid{grid-template-columns: repeat(1, 1fr); gap: 12px}


	#instructors{padding: 80px 0 0}
	.instructors.grid{grid-template-columns: repeat(1, 1fr); gap: 12px}

	.filters.flex{width: 100%; padding-top: 40px}
	.filters.flex select{margin: 0; width: calc(100%/3 - 6px)}


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


	#courses{padding: 80px 0 0;}
	#courses .items{gap: 12px; grid-template-columns: repeat(1, 1fr);}
	.list__courses .item{padding: 30px}
	.list__courses .item .flag{order: 0}
	.list__courses .item .date{width: calc(100% - 195px); order: 1}
	.list__courses .item .apply{order: 3}
	.list__courses .item .less{width: 50%; order: 4; margin-top: 20px}


	#page__reviews .wrapper{padding: 60px 30px}
	#page__reviews .flex .datas{width: 100%; text-align: left; padding: 30px 0 0;}
	#page__reviews .items{grid-template-columns: repeat(2, 1fr);}


	#commission{padding: 80px 0 0;}


	#materials{padding: 40px 0 0}
	#materials .item{width: 100%;}


	#cards img{margin: 0 auto}
	#cards .text{width: 100%;}


	#csdd{padding: 40px 0 0}
	#csdd .text{width: 100%; margin-bottom: 12px; padding: 60px 50px; box-sizing: border-box;}
	#csdd .text .inn{width: 100%;}
	#csdd img{width: 100%;}


	article{padding-top: 40px}


	#faq.page__faq{padding: 40px 30px 0}


	#page__contacts{padding: 40px 0 0;}
	#page__contacts iframe{width: 100%; height: 520px}
	#page__contacts .info{width: 100%;}


	#page__contacts .contacts__form{padding: 60px 30px 30px;}
	#page__contacts .contacts__form .text{width: 100%; margin-bottom: 30px}
	#page__contacts .contacts__form .form{width: 100%;}


	footer{padding-top: 80px}
	footer .subscribe{order: 0; width: 100%;}
	footer .nav{width: 100%; order: 1}
	footer .col{width: 32%; margin-top: 30px;}
	footer .bottom{order: 2; margin-top: 40px; justify-content: center;}
	footer .bottom p{width: 100%; text-align: center;}
	footer .bottom .socials{left: 0; width: 100%; justify-content: center;}
	footer .bottom li{margin: 0 6px}
}




@media screen and (max-width: 767px){
	.container{padding: 0 12px}
	.bt{font-size: 36px; line-height: 100%;}
	.bt__note{margin-bottom: 30px}

	header{padding: 12px 0;}
	header .contacts{display: none;}


	#promo{padding: 40px 0;}
	#promo .data{padding: 30px}
	#promo h1{font-size: 42px; line-height: 100%; margin-bottom: 10px}
	#promo li{font-size: 14px; margin-bottom: 15px}
	#promo .item a{padding: 14px 20px}
	#promo .item a .title{font-size: 20px; font-weight: 700;}
	#promo .item a .more{bottom: 20px}


	#categories{padding: 60px 0 0}
	#categories .container{padding: 40px 12px;}
	#categories .item a{padding: 20px 10px 20px 20px}
	#categories .item a p{font-size: 26px;}
	#categories .item a i{top: 24px; right: 10px}
	#categories .item.item__last p{padding-top: 10px; font-size: 14px;}
	#categories .item.item__last a{width: 132px;}


	#about{padding: 60px 0 0;}


	#advantages{padding: 60px 0 0;}
	#advantages .item{padding: 0 10px 10px}
	#advantages .item .title{font-size: 17px;}
	#advantages .item p{font-size: 14px;}


	#reviews{padding: 50px 0 0}
	#reviews br{display: none;}
	#reviews .container{padding: 40px 0}
	#reviews .slider-sw .swiper-button-next,#reviews .slider-sw .swiper-button-prev{display: none;}
	#reviews .swiper-slide{width: 280px}
	.review__item{padding: 20px;}
	.review__item .review{font-size: 15px; margin-bottom: 20px}
	.review__item .user .data{font-size: 17px;}
	.review__item .user .data .date{font-size: 14px;}


	#news{padding: 60px 0 0;}
	#news .flex{margin-bottom: 30px;}
	.list__news.grid{grid-template-columns: repeat(1, 1fr);}
	#news .list__news .item:last-child{display: none;}


	#apply img{height: 400px}
	#apply .data{padding: 30px;}


	#categories__list{padding: 60px 0 0}
	#categories__list .grid{grid-template-columns: repeat(1, 1fr); gap: 12px}
	#categories__list .item{padding: 30px;}


	#promo__page{min-height: 340px; height: auto; background: url("../img/bg_pagem.png") 50% 50% no-repeat; background-size: cover;}
	#promo__page .text{padding: 60px 0 0}


	#groups{padding: 60px 0 0;}
	#groups .item{padding: 20px;}
	#groups .item .data{width: 100%;}
	#groups .item .image{width: 100%; margin-bottom: 20px;}
	#groups .item .title{margin-bottom: 10px;}
	#groups .item .detail{display: flex; width: 100%; justify-content: space-between; text-align: left; align-items: center; padding: 30px 0 0}
	#groups .item .detail .btn{order: 0}
	#groups .item .detail .price{margin: 0; order: 1; text-align: center; width: calc(100% - 120px)}


	#instructors{padding: 60px 0 0}
	.bt__s{font-size: 30px;}
	.instructors.grid{grid-template-columns: repeat(1, 1fr); gap: 12px}
	.filters.flex{padding-top: 20px;}
	.filters.flex select{width: calc(50% - 6px); margin-bottom: 12px;}
	.filters.flex select:last-child{width: 100%;}
	#instructors .top{margin-bottom: 8px}
	.instructors .item{padding: 20px;}
	.instructors .item .info .data{box-sizing: border-box; padding-right: 40px}


	.teachers .item{padding: 12px}
	.teachers .item .image img{margin-bottom: 10px;}


	#commission{padding: 60px 0 0;}
	#commission .item{padding-bottom: 15px; margin-bottom: 30px}
	#commission .item .title{font-size: 26px; margin-bottom: 20px}
	#commission .item .title{width: 100%; margin-bottom: 30px}
	#commission .item .text{width: 100%;}


	#faq{padding: 60px 12px 0}
	#faq .container{padding: 40px 20px}
	#faq .left{max-width: 100%;}
	#faq .faq{width: 100%;}
	#faq .faq .item .title{padding: 20px 60px 20px 20px; font-size: 16px;}
	#faq .faq .item .answer{padding: 0 20px 20px 20px; font-size: 15px;}



	.box__modal{padding: 44px 20px!important}
	.box__modal .bt{margin-bottom: 10px; font-size: 30px;}
	.box__modal .bt__note{font-size: 14px; margin-bottom: 20px;}
	.form .flex .item__input{width: 100%;}


	#courses{padding: 60px 0 0}
	#courses .items .item{padding: 20px;}
	#courses .items .item .title{font-size: 20px}
	#courses .items .item p{font-size: 15px;}
	.list__courses .item .less{width: 100%; margin-top: 10px}
	.list__courses .item{position: relative;}
	.list__courses .item .date{position: absolute; top: 70px; left: 30px}
	.list__courses .item .flag{margin-bottom: 40px}


	#about__page{padding: 0 12px}
	#about__page .container{padding: 40px 20px 28px}
	#about__page p{font-size: 40px; margin-bottom: 30px}
	#about__page .item{padding: 30px}
	#about__page .item span{font-size: 60px}


	#about__info .item img{margin-bottom: 20px}


	#quote{padding: 40px 12px 0}
	#quote .text{padding: 60px 0 0; background-position: -10px 0}
	#quote .text p{font-size: 22px; margin-bottom: 30px}
	#quote .text .user img{width: 60px; height: 60px;}
	#quote .text .user .name span{font-size: 14px; line-height: 150%;}
	#quote .text .user .name{width: calc(100% - 80px)}
	#quote .container{padding: 40px 30px}


	#page__reviews{padding: 30px 0 0;}
	#page__reviews .bt br{display: none;}
	#page__reviews .wrapper,#cards .wrapper{padding: 40px 20px}
	#page__reviews .items{grid-template-columns: repeat(1, 1fr);}


	#cards .amount_in label{box-sizing: border-box;}
	#cards .amount_in label span{width: 100%;}
	#cards .amount_in input{width: 100%;}

	.amount_in .wpcf7-form-control-wrap {
		width: 100%;
	}
	.wpcf7-radio.amount {
		display: flex;
		width: 100%;
		gap: 10px;
	}
.amount .wpcf7-list-item {
		width: 25%;
	}


	#materials .wrapper{padding: 40px 20px}
	#materials .title{font-size: 26px; margin-bottom: 20px}
	#materials .item{padding: 10px 20px}
	#materials .btn-read{font-size: 0}
	#materials .item .title__item{width: calc(100% - 30px)}


	#csdd{padding-top: 30px}
	#csdd .flex{margin-top: 30px}
	#csdd .text{padding: 30px;}
	#csdd .text .title{margin-bottom: 10px; font-size: 30px;}
	#csdd .text p{margin-bottom: 20px}


	#page__news{padding-top: 30px}
	#page__news .list__news{margin-top: 10px}

	.pagination.flex{padding-top: 40px}
	.pagination a, .pagination span{width: 50px; height: 50px;}


	#faq.page__faq{padding: 30px 12px 0}


	#page__contacts{padding-top: 30px}
	#page__contacts .contacts__form{padding-top: 40px}
	#page__contacts .contacts__form .text .title{font-size: 30px;}
	#page__contacts .box{padding: 30px; width: 100%;}


	article{padding-top: 30px}
	article img{margin-bottom: 30px}
	article .content{font-size: 15px;}
	article .content h1{font-size: 30px;}
	article .content h2{font-size: 26px;}
	article .content h3{font-size: 20px;}
	article .content ul li,article .content ol li{margin-bottom: 15px;}
	article .content .flex{margin-bottom: 30px}
	article .content .flex img{width: 100%; margin-bottom: 10px}


	footer{padding-top: 60px}
	footer .col{width: 49%;}
	footer .col:last-child{margin-top: 0}
	footer .col li{margin-bottom: 6px}
	footer .bottom .socials{padding: 10px 0}
}