@media (max-width: 1920px) {
	a.phone-link{
		border-bottom: none;
	}
	#header .logo {
		background-size: contain;
		height: auto;
		width: 140px;
		padding-top: 190px;
	}

	#header .logo .slogan {
		width: 150px;
	}

	#site-path {
		font-size: 13px;
		padding: 10px 0;
	}
}
@media (max-width: 1600px) {
	#header nav ul li a span {
		font: 16px 'Calibri';
	}
	.wrapper {
		padding: 0 20px;
	}

	#header .logo {
		background-size: contain;
		height: 140px;
		width: 140px;
		padding-top: 190px;
	}

	#header .logo .slogan {
		width: 150px;
	}
}

@media (max-width: 1349px) {
	.wrapper {
		max-width: 1140px;
		margin: 0 auto;
		padding: 0 20px!important;
		width: 100%;
		box-sizing: border-box;
	}
	.content div{
		padding-bottom: 20px;
	}
	.content .catalog div{
		padding-bottom: 0px!important;
	}
}

@media (max-width: 1199px) {

	#middle .catalog{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;		
	}
	#middle .catalog .item{
		width: 100%;
		/*width: calc(1 / 3 * 100% - (1 - 1 / 3) * 10px);*/	
	}
	#middle .catalog .item a {
		font-size: 0;
		background: #fff;
		display: block;
		width: auto;
		border: 0;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
		line-height: 0;
	}
		/*#middle .catalog{
			display: flex;
			flex-wrap: wrap; 
			gap: 10px;		
		}
		#middle .catalog .item{
			width: calc(1 / 3 * 100% - (1 - 1 / 3) * 10px);	
			}*/

			#middle .promo .top .slider img {
				position: absolute;
				top: -10px;
				right: 0;
				max-width: min(450px, calc(100vw - 30px));
				height: auto;
				width: auto;
			}

			#middle .promo .top .slider .title {
				width: 250px;
				max-width: calc(100vw - 40px);
				padding-top: 110px;
				position: absolute;
				left: 50%;
				margin-left: -300px;
				top: -19px;
				box-sizing: border-box;
			}

			#header .right {
				float: left;
				width: auto;
				position: relative;
				z-index: 2;
				/*padding-right: 100px;*/
				display: flex;
				align-items: center;
				gap: 20px;
			}

			#header .callback {
				margin-top: 0;
			}

			#header nav ul {
				background: none;
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d5d9db', GradientType=0);
				-webkit-border-radius: 20px;
				-moz-border-radius: 20px;
				border-radius: 20px;
				line-height: 50px;
				display: flex;
				flex-direction: column;
				margin-left: 20px;
				width: auto;
				height: 100%;
				position: absolute;
				top: 12px;
				left: 0;
				text-align: left;
			}

			body.lock {
				overflow: hidden;
			}

			.toggle-menu-wrapp {
				width: 60px;
				height: 60px;
				position: absolute; 
				top: 16px;
				right: 16px;
				display: block;
				z-index: 1100; 
			}


			.toggle-menu {
				width: 60px;
				height: 60px;
				position: relative;
				display: block;
				cursor: pointer;
				z-index: 1101;
			}

			.toggle-menu span,
			.toggle-menu span::before,
			.toggle-menu span::after {
				content: '';
				width: 50px;
				height: 2px;
				background-color: #ff7900;
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				transition: 0.3s;
			}

			.toggle-menu span::before {
				transform: translate(-50%, -14px);
			}

			.toggle-menu span::after {
				transform: translate(-50%, 12px);
			}

			.toggle-menu.active span {
				background-color: transparent;
			}

			.toggle-menu.active span::before {
				transform: translate(-50%, -50%) rotate(45deg);
			}

			.toggle-menu.active span::after {
				transform: translate(-50%, -50%) rotate(-45deg);
			}
			#callback-modal, #modal-box {
				background: #eaeced;
				-webkit-border-radius: 20px;
				-moz-border-radius: 20px;
				border-radius: 20px;
				border: 1px solid #ff5405;
				position: fixed;
				top: 30%;
				left: 50%;
				transform: translateX(-50%);
				text-align: 50%;
				z-index: 1;
				padding: 30px 25px;
				width: 50%;
				margin-left: 0;
				z-index: 2;
				margin-top: 0;
			}
			#callback-modal .treug{
				display: none;
			}

			#callback-modal .close, #modal-box #close {
				position: absolute;
				right: 15px;
				top: 15px;
				font-family: Tahoma;
				font-size: 30px;
				color: #FD6722;
				cursor: pointer;
			}
		}


		@media (max-width: 1199px) and (min-width: 576px) {

			#header .center {
				padding-left: 170px;
				padding-right: 240px;
				text-align: center;
				position: absolute;
				right: -30px;
				z-index: 1;
				top: -16px;
				width: 40%;
				max-width: 40%;
				height: 100vh;
				background: #fff;
				display: none;
				box-sizing: border-box;
				/*overflow-y: auto;*/
			}

			#header .center.active {
				display: block;
			}


		}

		@media (max-width: 991px) {
		/*#middle .catalog{
			display: flex;
			flex-wrap: wrap; 
			gap: 10px;		
		}
		#middle .catalog .item{
			width: calc(1 / 2 * 100% - (1 - 1 / 2) * 10px);	
			}*/
			.wrapper,
			#middle .promo .top,
			#middle .promo .bottom,
			#middle .promo .middle,
			#middle .content {
				min-width: 0;
				width: 100%;
			}

			.wrapper {
				padding-left: 15px;
				padding-right: 15px;
				box-sizing: border-box;
			}

			#footer .search {
				padding-left: 0;
				padding-right: 0;
			}

			#middle .promo .top .slider img {
				position: absolute;
				top: -20px;
				right: 15px;
				max-width: min(450px, calc(100vw - 30px));
				width: auto;
				height: auto;
			}

			#middle .promo .top .slider .title {
				padding-top: 110px;
				position: absolute;
				left: 50%;
				margin-left: -250px;
				max-width: calc(100vw - 30px);
				box-sizing: border-box;
			}
			#middle .promo .steps .title {
				top: -105px;
			}

			.catalog-item {
				padding: 30px 0px 50px 0;
				display: flex;
				flex-direction: column;
				gap: 20px;
			}
		}

		@media (max-width: 890px) {

			#middle .promo .top .slider img {
				position: absolute;
				top: -20px;
				right: 15px;
				max-width: min(350px, calc(100vw - 30px));
				width: auto;
				height: auto;
			}

			#middle .promo .top .slider .title {
				padding-top: 110px;
				position: absolute;
				left: 50%;
				margin-left: -210px;
				max-width: calc(100vw - 30px);
				box-sizing: border-box;
			}

			#middle .promo .top .slider .title span {
				background: url(../images/sprite.png) -418px -16px no-repeat;
				display: block;
				height: 104px;
				margin-bottom: 20px;
				width: 100%;
				zoom: 0.9;
			}
		}

		@media (max-width: 768px) {



			.catalog-item .image img {
				position: absolute;
				height: 100%!important;
				margin: auto;
				left: 0;
				right: 0;
			}

			#header .logo {
				background-size: contain;
				/*height: auto;*/
				width: 140px;
				padding-top: 169px;
				margin-top: -20px;
				transform: scale(0.8);
				transform-origin: top left;
			}

			#middle .promo .top .slider .title {
				padding-top: 122px;
				position: absolute;
				left: 0;
				bottom: 0;
				margin-left: 20px;
				font-size: 14px;
				max-width: calc(100% - 24px);
			}

			#middle .promo .middle .wrapper {
				margin-top: -100px;
				position: relative;
			}

			ul.spisok {
				display: flex;
				flex-direction: column;
			}

			ul.spisok2 {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				margin-top: 80px;
			}

			#middle .promo .middle ul li {
				display: inline-block;
				width: 100%;
				margin: 0;
				vertical-align: top;
				text-align: justify;
				box-sizing: border-box;
			}

			#middle .promo .steps ul li {
				display: block;
				text-align: center;
				vertical-align: top;
				width: calc(1/3*100% - (1 - 1/3)*10px);
				max-width: 100%;
				box-sizing: border-box;
			}

			.bottom {
				padding-top: 40px;
			}

			.margin-step{
				margin-top: 300px;
			}

	/*.top {
		margin-top: 20px;
		}*/

		#middle .promo .steps .title {
			position: absolute;
			top: -71px;
			margin-left: 20px;
			margin-right: 20px;
			width: auto;
			max-width: calc(100% - 40px);
			box-sizing: border-box;
		}
		.wrapper {
			padding-bottom: 20px;
		}

		#footer .copyright {
			width: 100%;
		}

		#footer .developer {
			float: left;
			width: 100%;
			text-align: left;
		}

		#footer .search {
			text-align: left;
			width: 100%;
			margin-top: 45px;
			padding-bottom: 30px;
		}
		.content img{
			width: 100%!important;
			height: 100%!important;
			object-fit: contain;
		}

		.contact__page img{
			width: 40px!important;
			height: 40px!important;
		}
	/*#middle .content {
		margin-top: 310px;
		}*/

		#middle .content .top {
			background: #edeff0;
			min-height: 20px;
		}
	}

	@media (max-width: 680px) {
		/*#middle .catalog{
			display: flex;
			flex-wrap: wrap; 
			gap: 10px;		
		}
		#middle .catalog .item{
			width: calc(1 / 1 * 100% - (1 - 1 / 1) * 10px);	
			}*/

			#header {
				height: 110px;
				/*overflow: hidden;*/
			}
			#header .logo {
				margin-top: 0;
				transform: scale(0.6);
				transform-origin: top left;
			}

			#header .logo .slogan {
				width: 150px;
				display: none;
			}

			#header .right {
				flex-direction: column;
				gap: 10px;
			}

			#middle .promo {
				padding-top: 700px!important;
			}

			#middle .promo .top .slider img {
				top: -400px !important;
				left: 50%;
				transform: translateX(-50%);
				margin-left: 0;
				width: min(500px, calc(100vw - 24px));
				max-width: 100%;
				height: auto;
				right: auto;
			}

	/*.top {
		margin-top: 400px;
		}*/

		#middle .promo .top .slider .title {
			padding-top: 125px;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			margin-left: 0;
			font-size: 16px;
			max-width: calc(100vw - 24px);
			text-align: center;
		}

		#middle .promo .steps .title {
			position: absolute;
			top: -51px;
			margin-left: 20px;
			margin-right: 20px;
			width: auto;
			max-width: calc(100% - 40px);
		}

		#callback-modal, #modal-box {
			background: #eaeced;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			border: 1px solid #ff5405;
			position: fixed;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);
			text-align: 50%;
			z-index: 1;
			padding: 30px 25px;
			width: 80%;
			margin-left: 0;
			z-index: 2;
			margin-top: 0;
		}

		#callback-modal input[type="text"], #modal-box input[type="text"] {
			width: auto;
			height: 25px;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			border: 0;
			padding: 0 20px;
			box-shadow: inset 1px 1px 3px #b4b5b5;
		}
		
		#callback-modal textarea, #modal-box textarea {
			width: -webkit-fill-available;
			height: 140px;
			padding: 5px 20px;
			border: 0;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			box-shadow: inset 1px 1px 3px #b4b5b5;
		} 

		
	}

	@media (max-width: 575px) {

		#middle .promo .bottom .plank span:first-child {
			font-size: 16px;
			margin-top: 65px;
		}

		#middle .promo .bottom .plank span {
			font-size: 16px;
		}

		#middle .promo .bottom .plank b {
			display: inline-block;
			background: #1e2d34;
			padding: 7px 10px;
			font-size: 20px;
			margin: 7px 0 5px;
			margin-left: 250px;
		}

		h1.page-title{
			font-size: 30px;
		}

		#header .left {
			width: 90px;
			height: 100px;
		}

		#header .right {
			flex-direction: column;
			gap: 10px;
			/*margin-left: 25px;*/
			padding-left: 25px;
			/*border: 1px solid red;*/
		}

		
		#header .center {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			max-width: 100%;
			height: 100vh;
			height: 100dvh;
			padding: 70px 20px 24px;
			margin: 0;
			text-align: left;
			background: #fff;
			box-sizing: border-box;
			overflow-x: hidden;
			overflow-y: auto;
			z-index: 1000;
			display: none;
			-webkit-overflow-scrolling: touch;
		}

		#header .center.active {
			display: block;
		}
		.toggle-menu-wrapp {
			z-index: 1200;
		}
		.toggle-menu {
			z-index: 1201;
		}

		#header nav ul {
			position: absolute;
			top: 20px;
			left: 20px;
			width: 100%;
			max-width: 100%;
			height: auto;
			margin: 0;
			padding: 0;
			line-height: 1.4;
		}

		#header nav ul li {
			display: block;
			width: 100%;
			padding: 10px 0;
		}

		#middle .promo .steps ul li {
			width: calc(1/2*100% - (1 - 1/2)*10px);
			max-width: 100%;
		}

		.catalog-item span.name{
			font-size: 20px;
		}

		.catalog-item .image {
			width: 100%;
		}

		.margin-step {
			margin-top: 600px;
		}

		#middle .promo .steps .title {
			top: 0px;
		}

		ul.spisok2 {
			margin-top: 120px;
		}

		#middle .promo .top .slider .title {
			padding-top: 100px;
		}

		#header nav ul li a span {
			font: 20px 'Calibri';
		}

	}

	@media (max-width: 480px) {


		#header .phone {
			font: 20px 'Calibri';
		}
		#header .callback {
			font-size: 14px;
		}


		#middle .promo {
			padding-top: 680px!important;
		}

		#middle .promo .top .slider img {
			top: -370px !important;
		}

		#middle .promo .bottom .plank {
			background: url(../images/plank.png) right bottom no-repeat;
			width: 575px;
			height: 210px;
			position: absolute;
			right: -43!important;
			bottom: -16!important;
			text-align: center;
			color: #fff;
			font-weight: bold;
			font-size: 18px;
		}


	}


	@media (max-width: 420px) {
		#header .left {
			width: 60px;
		}

		/*#header .phone {
			font: 16px 'Calibri';
			}*/
			#header .callback {
				font-size: 12px;
			}

			#header .right {
				flex-direction: column;
				gap: 10px;
				margin-left: 25px;
			}
			#middle .promo .bottom .plank {
				background: url(../images/plank.png) right bottom no-repeat;
				width: 575px;
				height: 210px;
				position: absolute;
				right: -17!important;
				bottom: -8!important;
				text-align: center;
				color: #fff;
				font-weight: bold;
				font-size: 18px;
			}

		}