@charset "utf-8";
@media only screen and (max-width: 768px) {
		.form-inputs .el.wid33, .form-inputs .el.wid50 {
				width: 100%;
		}
		.container {
				padding-left: 20px;
				padding-right: 20px;
		}
		.header {
				padding-top: 90px;
		}
		.head-logo {
				position: absolute;
				top: 0;
				left: 20px;
		}
		.head-shop, .head-contacts {
				width: auto;
				flex: 1;
				backface-visibility: hidden;
		}
		.head-menu {
				padding-bottom: 130px;
		}
		.open-menu .head-shop, .open-menu .head-contacts {
				transform: translate3d(0, 120px, 0);
		}
		.toggle-menu {
				position: absolute;
				top: 0;
				right: 0;
				margin: 0;
				height: 90px;
		}
		.footer .container {
				display: flex;
				flex-direction: column;
				gap: 40px 0;
		}
		.foot-logo {
				flex: 0 0 auto;
				width: 100%;
				margin: 0;
		}
		.foot-contacts {
				text-align: left;
				padding: 0;
		}
		.foot-contacts .soc {
				justify-content: flex-start;
		}
		.foot-links {
				flex-direction: column;
				gap: 40px 0;
		}
		.foot-links > * {
				flex: 0 0 auto;
				width: 100%;
		}
		.foot-copy {
				margin: 0 0 -20px 0;
				padding: 0;
		}
		.foot-text {
				margin: 0;
				padding: 0;
		}
		.top-block {
				padding-top: 240px;
				font-size: 18px;
		}
		.top-block .container {
				max-width: 1118px;
		}
		.top-block h1, .top-block .h1 {
				font-size: 40px;
		}
		.top-block .line {
				display: none;
		}
		.top-block .available {
				margin-top: 60px;
				padding-right: 90px;
		}
		.consult {
				padding: 20px;
				gap: 20px 0;
		}
		.benefits {
				padding: 40px 0;
				gap: 20px;
				grid-template-columns: repeat(1, 1fr);
		}
		.top-title h2, .top-title .h2 {
				font-size: 40px;
		}
		.catalog {
				padding: 60px 0;
		}
		.catalog .top-title {
				margin-bottom: 30px;
		}
		.catalog .top-title:not(:first-child) {
				margin-top: 60px;
		}
		.item-vert, .item-hor {
				flex-direction: column;
				padding: 20px;
		}
		.item-vert > *, .item-hor > * {
				flex: 0 0 auto;
				width: 100%;
		}
		.item-vert .photo, .item-hor .photo {
				margin: -20px -20px 20px -20px;
				width: calc(100% + 40px);
				border-radius: 10px 10px 0 0;
				max-height: 320px;
		}
		.item-vert .head, .item-hor .head {
				font-weight: bold;
				display: flex;
				flex-direction: column;
				gap: 10px 0;
		}
		.item-vert .descr, .item-hor .descr {
				margin: 0;
				padding: 0;
				width: 100%;
		}
		.item-hor .bottom {
				padding: 0;
		}
		.call-consult {
				margin: 60px 0 0 0;
				padding: 20px;
				flex-direction: column;
				gap: 30px 0;
				text-align: center;
				align-items: center;
		}
		.call-consult .text {
				flex: 0 0 auto;
				width: 100%;
		}
		.sets {
				padding: 60px 0;
		}
		.sets .top-title {
				margin-bottom: 30px;
		}
		.faq {
				margin: 0 0 60px 0;
		}
		.faq .block {
				padding: 30px 20px;
		}
		.location {
				margin: 60px 0;
				flex-direction: column;
		}
		.location .text, .location .map {
				width: 100%;
		}
		.location .text {
				padding: 30px;
		}
		.location .map {
				position: relative;
		}
		.location .map img {
				position: static;
				height: auto;
				border-radius: 0 0 10px 10px;
				min-height: 150px;
		}
		.comp {
				margin: 60px 0 90px 0;
				flex-direction: column;
		}
		.comp .image, .comp .text {
				width: 100%;
		}
		.comp .image img {
				position: static;
				height: auto;
				border-radius: 10px 10px 0 0;
		}
		.comp .text {
				padding: 30px;
		}
		.comp h2, .comp .h2 {
				margin-bottom: 20px;
		}
		.gallery .block {
				padding: 20px;
		}
		.about {
				padding-top: 60px;
				padding-bottom: 90px;
		}
		.about .grid {
				flex-direction: column;
				gap: 40px 0;
		}
		.about .text {
				width: 100%;
		}
		.about .image {
				width: calc(100% - 13px);
				align-self: center;
				margin-right: 13px;
		}
		.modal {
				padding: 20px;
		}
		.modal .mfp-close {
				top: -43px !important;
				right: 0 !important;
		}
		.mfp-fade .mfp-container {
				padding: 43px 20px !important;
		}
		.modal-order .top-title {
				margin: -20px -20px 20px -20px;
				padding: 20px;
		}
		.order-form .chars {
				font-size: 14px;
				line-height: 24px;
		}
		.order-form .chars li:before {
				line-height: 24px;
				width: 24px;
		}
		.order-form .chars li {
				padding-left: 24px;
				min-height: 24px;
		}
		.order-form .chars select, .order-form .chars .jcf-select-text {
				font-size: 14px;
				padding-top: 3px;
				padding-bottom: 3px;
		}
		.order-form .chars li:not(.change) .select {
				display: none;
		}
		.order-form .chars .checks {
				gap: 10px;
				line-height: 24px;
		}
		.order-form .chars .checks label {
				width: calc((100% - 20px) / 3);
				min-width: 95px;
		}
		.order-form .total {
				flex-direction: column;
				align-items: flex-start;
		}
}