@media screen and (max-width: 1220px){
	.container{max-width: 100%!important; width: 100%!important; padding: 0 15px}

	#promo{padding: 0 0 45px}
	#promo .image{position: relative; top: 0; left: 0; bottom: 0}
	#promo .text{max-width: 100%; width: 100%; position: relative; margin-top: -100px}


	#product__promo{padding: 45px 0 90px}
	#product__promo .swiper-scrollbar{bottom: 45px; opacity: 1!important}
	#product__promo .swiper-scrollbar{background: rgba(255, 255, 255, 0.4);}
	#product__promo .swiper-scrollbar-drag{background: #fff}
	#product__promo .container{padding: 0}
	#product__promo .list__products .swiper{padding: 0 15px}
	#product__promo .item{display: none;}
	#product__promo .swiper-slide{width: 180px}
	.list__products.slider-sw{display: block;}


	#collaborate{padding: 45px 0}
	#collaborate .timeline{width: 100%; left: 0; background: transparent;}
	#collaborate .timeline .item{width: 50%; left: 0!important; margin-bottom: 20px}
	#collaborate .timeline .item .icon{top: 0!important; height: 100px}


	.grid{gap: 40px}


	#we__work{padding: 45px 0}

	#totop a{bottom: 140px}

	#catalog .product .text .data:nth-child(2n+1){margin-left: 0}
}


@media screen and (max-width: 767px){

	header .pull,header .lang{position: relative; z-index: 300}
	header nav{display: none; position: absolute; top: 0; right: 0; width: 100%; height: auto; z-index: 100; background: #152434; padding: 130px 0 0}
	header nav li{display: block; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 0}
	header nav li a{display: block; text-align: left; padding: 10px 15px;}
	header .pull{display: block; width: 24px; height: 16px; background: url("../img/pull.svg") 50% 50% no-repeat; order: 0}
	header .pull.open{background: url("../img/close.svg") 50% 50% no-repeat; background-size: 100%;}
	header .lang{order: 1; margin-left: 20px}


	#promo .text{margin-top: -20px}


	#collaborate .item .icon img{max-height: 100px;}


	.standart__page{padding: 45px 0 60px}
	#contacts .content{font-size: 24px}


	.grid{grid-template-columns: repeat(2, 1fr); gap: 30px;}
	.list__news .item img{width: 100%; height: auto; min-height: 150px}
	.list__news .item:last-child{display: block;}

	#promo__text .content .flex ol{max-width: 100%; width: 100%}

	footer .data{display: none;}
	footer .flex{justify-content: center;}
	#totop a{bottom: 20px; right: 15px;}


	#catalog .product .image{width: 100%; margin-bottom: 70px}
	#catalog .product .text{width: 100%; padding-top: 50px}
}
@media screen and (max-width: 576px){ 
	.contacts-content button {
		width: 100%;
	}
	.contacts-content .buttons-flex {
		flex-wrap: wrap;
	}
}