@import "variables";
.landing {
	font-size: 16px;
	.landing-bg {
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 1;
	}
	.landing-head {
		position: relative;
		z-index: 5;
		padding-bottom: 48px;
		h1 {
			font-size: 48px;
			font-weight: normal;
			@media (max-width: 767px) { font-size: 32px; }
		}
	}
	.landing-body {
		position: relative;
		z-index: 5;
	}

	&.landing-001 {
		/*.landing-bg {
			background: url(../images/landing-001-bg.png) no-repeat 0 -75px / 100% auto;
			@media (max-width: 991px) {
				background-position: 0 0;
				background-size: 150% 250px;
			}
			@media (max-width: 767px) {
				background-position: 0 0;
				background-size: 200% 350px;
			}
		}*/
		.landing-head {
			background: #d5e6f6;
			margin: -24px -24px 24px;
			padding: 24px;
			z-index: 3;
			@media (max-width: 767px){
				margin: -12px -12px 24px;
				padding: 12px;
			}
			&:before {
				content: '';
				background: url(../images/landing-001-bg.png) no-repeat 0 0 / 100% 100%;
				position: absolute; top: 100%; left: 0; right: 0;
				height: 150px;
				@media (max-width: 767px){ height: 75px; }
				@media (max-width: 449px){ height: 32px; }
			}
		}
		.landing-body {}
		.product-preview {
			margin-bottom: 32px;
			.product-preview__head {
				border: 2px solid $color_gray_10;
				@include transition();
				.product-preview__marks {
					li {
						.discount {
							padding: 4px 8px;
							font-size: 20px;
							@media (max-width: 767px) {
								padding: 2px 6px;
								font-size: 16px;
							}
							&.warning {}
						}
					}
				}
				.img-block {
					@include box-shadow(none !important);
					img {}
				}
			}
			.product-preview__body {
				padding: 4px 0 0 0;
				.name {
					position: relative;
					overflow: hidden;
					height: 40px;
					padding: 0;

					font-size: 18px;
					line-height: 20px;
					text-align: left;
					@include transition();

					@media (max-width: 767px) {
						height: 36px;
						font-size: 14px;
						line-height: 18px;
					}
				}
			}

			&:hover {
				.product-preview__head {
					border-color: $color_blue;
					.img-block {
						img {}
					}
				}
				.product-preview__body {
					.name {
						color: $color_blue;
					}
				}
			}

			@media (max-width: 449px) {
				position: relative;
				overflow: hidden;
				//display: flex;
				//align-items: center;
				margin: 0;
				padding: 8px 0;
				&:before {
					content: '';
					background: $color_gray_10;
					position: absolute; top: 0; left: 64px; right: 0;
					height: 1px;
				}
				.product-preview__head {
					display: table-cell;
					vertical-align: middle;
					border: none;
					position: static;
					min-width: 64px;
					width: 64px;
					@include box-shadow(none !important);
					.product-preview__marks {
						bottom: auto;
						top: 50%; right: 6px;
						margin: 0;
						@include transform(translateY(-50%));
					}
				}
				.product-preview__body {
					display: table-cell;
					vertical-align: middle;
					width: 10000px;
					overflow: hidden;
					/*flex-grow: 1;*/
					padding: 0 75px 0 12px;
					.name {
						height: auto;
					}
				}
			}
		}
		.col-xxs-12:first-child .product-preview:before { display: none; }
	}

	&.landing_category {
		max-width: 704px;
		margin: 0 auto;
		.landing-head {
			margin-bottom: 36px;
			padding: 0;
			font-size: 20px;
			h1 {
				margin: 0;
				font-size: 48px;
				font-weight: bold;
			}
			@media (max-width: 991px){
				font-size: 18px;
				h1 {
					font-size: 36px;
				}
			}
			@media (max-width: 767px){
				font-size: 16px;
				h1 {
					font-size: 24px;
				}
			}
		}
		.landing-body {
			@media (max-width: 575px) {
				.col-xxs-12 { float: none; width: 100%; margin: 0 !important; }
			}
			.tab-content {
				@media ( max-width: 575px ){
					min-height: 425px;
				}
				@media ( min-width: 576px ){
					min-height: 640px;
				}
				@media ( min-width: 768px ){
					min-height: 730px;
				}
			}
			.landing-brand-list {
				.list-autobrands-short {}
				.list-autobrands-full { display: none; }
				.list-autobrands-btn {
					margin-top: 24px;
					padding: 12px 32px;
				}
				&.wide {
					.list-autobrands-short { display: none; }
					.list-autobrands-full { display: block; }
					.list-autobrands-btn { display: none; }
				}

				/*a[data-toggle="collapse"]{
					&[aria-expanded="false"]{
						margin-top: 24px;
						padding: 12px 32px;
					}
					&[aria-expanded="true"]{ display: none; }
				}*/
			}
			.list-autobrands {
				@media (max-width: 575px){
					li {
						position: relative;
						margin: 0 !important;
						&:not(:first-child){
							&:before {
								content: '';
								background: $gray_light;
								position: absolute; top: 0; left: 0; right: 0;
								height: 1px;
							}
						}
						.icobox {
							display: block;
							padding: 16px 0 16px 40px;
							font-size: 20px;
							.ico {}
						}
					}
				}
			}
		}

		.landing_category--highlight {
			background: transparent;
			//background: $green-light;
			display: inline-block;
			margin: 0 -8px;
			padding: 2px 8px;
			&.active {
				animation: blinking 1s ease-in-out 3;
				@keyframes blinking {
					0%   { background: transparent; }
					40%  { background: $green-light; }
					100% { background: transparent; }
				}
			}
		}

		.nav-tabs-container {
			position: relative;
			margin-bottom: 24px;
			&:before {
				content: '';
				background: #e6e6e6;
				position: absolute; bottom: 0; right: 100%;
				display: block;
				width: 50px;
				height: 1px;
				@media (max-width: 991px){ display: none; }
			}
			&:after {
				content: '';
				background: #e6e6e6;
				position: absolute; bottom: 0; left: 100%;
				display: block;
				width: 50px;
				height: 1px;
				@media (max-width: 991px){ display: none; }
			}
		}
	}

	&.landing_categories {
		margin-top: -24px;
		@media (max-width: 767px){
			margin-top: -12px;
		}
		.landing__head {
			position: relative;
			overflow: hidden;
			margin-bottom: 24px;
			@media (max-width: 767px){
				margin-left: -12px;
				margin-right: -12px;
			}
		}
		.landing__preview {
			display: block;
			@media (max-width: 767px){
				margin-left: -500px;
				margin-right: -500px;
			}
			img {
				display: block;
				width: auto;
				max-width: 100%;
				max-height: 190px;
				margin: 0 auto;
				@media (max-width: 767px){
					height: 120px;
				}
			}
		}

		.landing__headline {
			margin-bottom: 28px;
			@media(min-width: 991px){
				margin-left: 64px;
			}
			h1, .h1 {
				margin: 0 0 12px 0;
				font-size: 40px;
				line-height: 1.15;
				@media(max-width: 1199px){
					font-size: 36px;
				}
				@media(max-width: 767px){
					font-size: 32px;
				}
			}
			.description {
				font-weight: bold;
				color: #9B9B9B;
			}
		}
		.landing__body {
			max-width: 734px;
			margin: 0 auto;
			.landing__headline {
				margin: 0 0 24px 0;
				h1, .h1 {
					@media(min-width: 768px){
						display: inline-block;
						margin-right: 16px;
					}
				}
				.description {
					@media(min-width: 768px){
						display: inline-block;
					}
				}
			}
		}
		.w-viewedCars {
			max-width: 500px;
			margin-bottom: 48px;
		}
		.lc-cars {
			position: relative;
			//overflow: hidden;
			max-width: 500px;
			margin-bottom: 48px;
			.lc-cars__head {
				margin-bottom: 4px;
				font-size: 24px;
				font-weight: bold;
				color: $blue;
			}
			.lc-cars__list {
				.lc-cars-item {
					position: relative;
					&:not(:first-child){
						display: none;
						margin-top: 1px;
					}
					.lc-cars-item__link {
						background: $blue;
						border: 0;
						position: relative;
						display: block;
						padding: 8px;
						color: $color_white;
						font-size: 14px;
						line-height: normal;
						text-decoration: none !important;
						@include border-radius(2px);
						&:hover {
							@include box-shadow(0 2px 8px rgba(13, 97, 171, 0.5));
						}
					}
					.lc-cars-item__closer {
						position: absolute; top: 0; right: 0;
						@media (min-width: 768px) {
							right: auto;
							left: 100%;
							padding-left: 1px;
							display: none;
						}
						a {
							border: 0;
							position: relative;
							display: block;
							width: 28px;
							height: 28px;
							z-index: 55;
							opacity: 0.5;
							@include border-radius(2px);
							@media (min-width: 768px) {
								background: $color_gray_50;
								width: 24px;
								height: 24px;
							}
							&:before, &:after {
								content: '';
								background: $white;
								position: absolute; top: 50%; left: 50%;
								display: block;
								width: 14px;
								height: 1px;
							}
							&:before {
								@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
							}
							&:after {
								@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
							}
							&:hover {
								@media (min-width: 768px) {
									background: $red;
								}
								opacity: 1;
							}
						}
					}
					.lc-cars-item__arrow {
						position: absolute; top: 50%; right: 8px;
						display: block;
						height: 28px;
						margin-top: -14px;
						font-size: 28px;
						line-height: 28px;
					}
					.media {
						margin: 0;
						.media-left {
							padding-right: 12px;
						}
					}
					.lc-cars-item__brand {
						background: $white;
						position: relative;
						display: block;
						width: 96px;
						height: 64px;
						.ico-auto-brands {
							position: absolute; top: 50%; left: 50%;
							@include transform(translateX(-50%) translateY(-50%));
							display: block;
							width: 60px;
							height: 60px;
							font-size: 60px;
							line-height: 1;
						}
					}
					.lc-cars-item__image {
						display: block;
						width: 96px;
					}
					.lc-cars-item__model {
						margin-bottom: 2px;
						font-size: 16px;
						font-weight: bold;
					}
					.lc-cars-item__year {}
					.lc-cars-item__license-plate {}

					//
					&:hover {
						.lc-cars-item__closer {
							display: block;
						}
					}
				}
			}
			.lc-cars__more {
				padding-top: 12px;
				//padding-left: 116px;
				padding-right: 12px;
				text-align: right;
				a {
					border: 0;
					position: relative;
					display: inline-block;
					line-height: 1.25;
					color: #7E93B2;
					img, svg {
						position: absolute; top: 50%; left: -32px;
						display: block;
						width: 24px;
						height: 24px;
						margin-top: -12px;
					}
					span {
						display: inline-block;
						white-space: nowrap;
					}
					.fa {
						padding-left: 8px;
					}
				}
			}

			//mods
			&.lc-cars__full {
				.lc-cars__list {
					.lc-cars-item {
						display: block;
					}
				}
				.lc-cars__more {
					display: none;
				}
			}
		}
	}

	&.landing-promo {
		max-width: 820px;
		margin: 0 auto;
		.landing-head {
			padding-bottom: 48px;
			font-size: 18px;
			font-weight: bold;
			@media (max-width: 767px){
				font-size: 16px;
				padding-bottom: 16px;
			}
			h1 {
				margin: 0;
				font-size: 36px;
				font-weight: bold;
				@media (max-width: 991px){
					font-size: 24px;
				}
			}
		}
		.product-preview {
			margin-bottom: 32px;
			.product-preview__head {
				border: 2px solid $color_gray_10;
				@include transition();
				.product-preview__marks {
					li {
						.discount {
							padding: 4px 8px;
							font-size: 20px;
							@media (max-width: 767px) {
								padding: 2px 6px;
								font-size: 16px;
							}
							&.warning {}
						}
					}
				}
				.img-block {
					@include box-shadow(none !important);
					img {}
				}
			}
			.product-preview__body {
				padding: 4px 0 0 0;
				.name {
					position: relative;
					overflow: hidden;
					height: 40px;
					padding: 0;

					font-size: 16px;
					line-height: 20px;
					text-align: left;
					@include transition();

					@media (max-width: 767px) {
						height: 36px;
						font-size: 14px;
						line-height: 18px;
					}
				}
			}

			&:hover {
				.product-preview__head {
					border-color: $color_blue;
					.img-block {
						img {}
					}
				}
				.product-preview__body {
					.name {
						color: $color_blue;
					}
				}
			}

			@media (max-width: 449px) {
				position: relative;
				overflow: hidden;
				//display: flex;
				//align-items: center;
				margin: 0;
				padding: 8px 0;
				&:before {
					content: '';
					background: $color_gray_10;
					position: absolute; top: 0; left: 64px; right: 0;
					height: 1px;
				}
				.product-preview__head {
					display: table-cell;
					vertical-align: middle;
					border: none;
					position: static;
					min-width: 64px;
					width: 64px;
					@include box-shadow(none !important);
					.product-preview__marks {
						bottom: auto;
						top: 50%; right: 6px;
						margin: 0;
						@include transform(translateY(-50%));
					}
				}
				.product-preview__body {
					display: table-cell;
					vertical-align: middle;
					width: 10000px;
					overflow: hidden;
					/*flex-grow: 1;*/
					padding: 0 75px 0 12px;
					.name {
						height: auto;
					}
				}
			}
		}
		.col-xxs-12:first-child .product-preview:before { display: none; }
	}

	&.landing_categoryListing {
		.landing-head {
			background: $gray_light;
			margin: -24px -24px 24px;
			padding: 24px;
			font-size: 1rem;
			@media (max-width: 767px){
				margin: -12px -12px 12px;
				padding: 12px;
			}
			h1, .h1 {
				margin-bottom: .5rem;
				font-size: 34px;
				font-weight: bold;
				line-height: 1.2;
				@media (max-width: 767px){
					font-size: 22px;
				}
			}
			h2, .h2, h3, .h3, h4, .h4 {
				margin-bottom: .5rem;
				font-size: 22px;
				font-weight: bold;
				line-height: 1.4;
				@media (max-width: 767px){
					font-size: 18px;
				}
			}
			.img-block {
				&.border {
					border-color: $color_gray_20;
				}
			}
			.list-dotted {
				margin-bottom: 1rem;
				li {
					padding-left: 20px;
					&:before {
						background: $gray_dark;
						width: 8px;
						height: 8px;
					}
				}
			}
			.collapse {
				dl {
					margin: 0;
					& + dl { margin-top: 16px; }
				}
			}
		}
		.landing-body {
			padding-top: 24px;
		}
	}

	&.landing_mapco {
		max-width: 720px;
		margin: 0 auto;
		padding: 24px 0;
		h1 {
			margin-bottom: 40px;
			margin-right: -80px;
			font-size: 44px;
			font-weight: normal;
			text-shadow: 0 1px 1px rgba(0,0,0,.5);
			@media (max-width: 991px){
				margin-right: 0;
				font-size: 36px;
			}
			@media (max-width: 767px){
				margin-bottom: 24px;
				font-size: 32px;
				font-weight: bold;
				text-align: center;
				img { display: none; }
			}
			@media (max-width: 575px){ font-size: 28px; }
		}
		h2, h3 {
			font-weight: normal;
			@media (max-width: 767px){
				font-weight: bold;
			}
			&.text-xs-center {
				@media (max-width: 767px){
					text-align: center;
				}
			}
		}

		.media {
			margin-top: 0;
		}

		.list-hps-advantage {
			margin: 0;
			padding: 0;
			list-style: none;
			dt {
				margin: 0;
				padding: 0;
				font-weight: bold;
			}
			dd, li {
				position: relative;
				padding-left: 12px;
				&:before {
					content: '';
					background: #000;
					position: absolute; top: .75em; left: 0;
					display: block; width: 3px; height: 3px;
				}
				&:not(:first-child){
					margin-top: 8px;
				}
			}
		}

		.uniq-img-1 {
			width: 54px;
			@media (max-width: 449px){
				width: 108px;
			}
		}

		.uniq-img-2 {
			display: block;
			width: 175px;
			@media (max-width: 767px){
				width: 240px;
			}
		}
		.uniq-img-3 {
			display: block;
			width: 350px;
			@media (max-width: 449px){
				max-width: 100%;
			}
		}

		.look-mapco {
			margin-bottom: 24px;
			.look-mapco__head {
				span {
					background: #e7411c;
					position: relative;
					display: inline-block;
					padding: 8px 16px;
					font-size: 22px;
					color: $white;
					@media (max-width: 767px) {
						display: block;
						font-weight: bold;
						text-align: center;
					}
					&:before {
						content: '';
						background: url(../images/mapco-look-arrow.png) no-repeat 0 0 / 100% auto;
						position: absolute; top: 100%; left: 50%;
						z-index: 55;
						display: block; width: 32px; height: 32px;
						margin-top: 4px;
						@media (max-width: 767px) {
							display: none;
						}
					}
				}
			}
			.look-mapco__body {
				@media (min-width: 768px) {
					border: 1px solid $color_gray_20;
				}
				position: relative;
				overflow: hidden;
				@media (max-width: 767px) {
					//display: none;
					padding: 24px 0;
					text-align: center;
					& > img {
						display: none;
					}
				}
				.look-mapco__mark {
					@media (min-width: 768px) {
						position: absolute; top: 40px; left: 182px;
					}
					margin: 0;
					padding: 0;
					list-style: none;
					white-space: nowrap;
					@media (max-width: 767px) {
						display: inline-block;
						text-align: left;
					}
					li {
						display: inline-block;
						vertical-align: middle;
						margin-right: 8px;
						font-size: 14px;
						line-height: 16px;
						white-space: normal;
					}
				}
			}
		}
		.office-mapco {
			position: relative;
			max-width: 650px;
			margin: 0 auto 48px;
			.title {
				background: #e7411c;
				padding: 8px 16px;
				font-size: 22px;
				font-weight: bold;
				color: $white;
				@media(min-width: 768px){
					position: absolute; top: 0; right: 0;
					z-index: 55;
					font-weight: normal;
				}
			}
		}
	}

	&.landing_product {
		.landing-head {
			background: #F6F6F6;
			margin: -24px -24px 24px;
			padding: 24px;
			@media (max-width: 767px){
				margin: -12px -12px 12px;
				padding: 12px;
			}
			z-index: auto;
			font-size: 16px;
			h1 {
				margin-bottom: 12px;
				font-size: 34px;
				font-weight: bold;
			}
			.lp-preview {
				border: 1px solid $color_gray_10;
				position: relative;
				overflow: hidden;
				display: block;
				max-width: 600px;
				img {
					display: block;
					width: 100%;
					@include transition();
				}
				&:hover {
					img {
						@include transform(scale(1.15));
					}
				}
			}
			.lp-price {
				margin: 0;
				padding: 0;
				list-style: none;
				& > li {
					display: inline-block;
					vertical-align: top;
					&:not(:first-child){
						margin-left: 12px;
					}
				}
				.price {
					display: inline-block;
					strong {
						font-size: 36px;
						line-height: 36px;
						color: $blue;
					}
				}
				.discount {
					font-size: 14px;
					line-height: 18px;
					span {
						background: $yellow;
						display: inline-block;
						padding: 2px 6px;
					}
					s {
						background: $gray_light;
						display: inline-block;
						padding: 2px 6px;
					}
				}
			}
			.lp-price-conditions {
				margin: 0;
				padding: 0;
				list-style: none;
				font-size: 12px;
				li {
					&:not(:first-child){
						margin-top: 2px;
					}
				}
			}
		}
		.landing-body {
			.lp-dlist {
				margin: 0 0 32px 0;
				padding: 0;
				list-style: none;
				dt {
					margin: 0;
					padding: 0;
					font-size: 22px;
				}
				dd {
					margin: 0;
					padding: 0;
					&:not(:first-child){
						margin-top: 8px;
					}
					&.lp-dlist-item {
						position: relative;
						padding-left: 24px;
						&:before {
							content: '';
							background: $black;
							position: absolute; top: .5em; left: 0;
							display: block;
							width: 8px;
							height: 8px;
							@include border-radius(50%);
						}
					}
				}
			}
			.ico-auto-brands {
				margin-top: -5px;
			}
		}
	}

	&.landing-supergroup {
		.lsg-search {
			margin-left: -24px;
			margin-right: -24px;
			@media(max-width: 767px){
				margin-left: -12px;
				margin-right: -12px;
			}
			.lsg-search__form {
				background: #fff;
				display: flex;
				padding: 12px 24px;
				@media(max-width: 767px){
					padding: 12px;
				}
				//margin-bottom: 24px;
				.search-field {
					flex-grow: 1;
					.field {
						position: relative;
						.closer {
							background: $color_gray_60;
							display: none;
							top: 50%; right: 6px;
							width: 20px; height: 20px;
							margin-top: -10px;
							@include border-radius(50%);
							&:before, &:after {
								background: $color_white;
								width: 60%;
							}
						}
						&.active {
							.closer { display: block; }
						}
					}
					.form-control {
						@include border-radius(3px 0 0 3px);
					}
				}
				.search-button {
					.btn {
						padding-left: 16px;
						padding-right: 16px;
						@include border-radius(0 3px 3px 0);
					}
				}
			}
			&.fix {
				.lsg-search__form {
					position: fixed; top: 0;
					z-index: 998;
				}
			}
		}
		.lsg-category {
			margin-bottom: 64px;
			display: flex;
			flex-wrap: wrap;
			margin-left: -8px;
			margin-right: -8px;
			font-size: 0;
			.lsg-category__col {
				//display: inline-block;
				//vertical-align: top;
				font-size: 16px;
				width: 20%;
				padding: 0 8px;
				@media (max-width: 991px){
					width: 25%;
				}
				@media (max-width: 767px){
					width: 33.3333%;
				}
				@media (max-width: 575px){
					width: 50%;
				}
			}
		}
		.lsg-category-item {
			//border: 1px solid $gray_light;
			border: 0;
			position: relative;
			display: block;
			margin-bottom: 24px;
			padding: 16px;
			@media (max-width: 991px){
				padding: 8px;
			}
			@media (max-width: 575px){
				padding: 4px;
			}
			color: $color_dark;
			text-align: center;
			.img-aligner {
				margin-bottom: 4px;
			}
			.title {
				position: relative;
				/*overflow: hidden;
				height: 40px;*/
				line-height: 20px;
			}
			&:hover {
				z-index: 5;
				@include box-shadow(0 0 12px rgba(0,0,0,0.25));
			}
		}

		.lsg-manufacturers {
			margin-bottom: 64px;
			.lsg-manufacturers__head {
				margin-bottom: 24px;
				font-size: 22px;
				font-weight: bold;
				@media (max-width: 767px){
					font-size: 18px;
				}
			}
			.lsg-manufacturers__body {
				.lsg-manufacturers__col {
					display: inline-block;
					vertical-align: top;
					width: 19%;
					@media (max-width: 991px){
						width: 49%;
					}
				}
				a {
					border-bottom-color: transparent;
					&:hover {
						border-bottom-color: $blue;
					}
				}
			}
		}

		.lsg-autobrands {
			margin-bottom: 64px;
			.lsg-autobrands__head {
				margin-bottom: 24px;
				font-size: 22px;
				font-weight: bold;
				@media (max-width: 767px){
					font-size: 18px;
				}
			}
			.lsg-autobrands__body {}
			.lsg-autobrands__list {
				position: relative;
				overflow: hidden;
				margin: 0 -8px;
				padding: 0;
				list-style: none;
				& > li {
					display: block;
					float: left;
					width: 14.2%;
					padding: 0 8px 32px;
					@media (max-width: 991px) {
						width: 33.3333%;
					}
					@media (max-width: 575px) {
						width: 50%;
					}
				}
			}
			.lsg-autobrands__item {
				position: relative;
				text-align: center;
				.img-aligner {
					max-width: 100px;
					margin: 0 auto;
				}
				.name {
					padding-top: 8px;
					font-size: 16px;
				}
				&:hover {
					.name {
						color: $blue;
					}
				}
			}
		}

		.menu-categories {
			.menu-item, a.menu-item {
				.title {
					.fa {
						margin-left: 4px;
					}
				}
			}
			& > li {
				border-top: none;
			}
		}

	}

	&.landing_covid19 {
		font-size: 16px;
		h1 {
			font-size: 38px;
			@media(max-width: 991px){
				font-size: 32px;
			}
			@media(max-width: 767px){
				font-size: 24px;
			}
		}
		h2 {
			font-size: 24px;
			@media(max-width: 991px){
				font-size: 22px;
			}
			@media(max-width: 767px){
				font-size: 20px;
			}
		}

		.uniq-hands {
			.uniq-hands__item {
				position: relative;
				.num {
					background: $white;
					position: absolute; top: 12px; left: 12px;
					display: block;
					width: 24px;
					height: 24px;
					font-size: 13px;
					font-weight: bold;
					line-height: 24px;
					text-align: center;
					@include border-radius(50%);
				}
				img {
					display: block;
					width: 100%;
				}
			}
		}
	}

	&.landing_covidInfo {
		h1, .h1 {
			font-size: 38px;
			@media (max-width: 767px) {
				font-size: 28px;
			}
		}
		h2, .h2 {
			font-size: 24px;
			@media (max-width: 767px) {
				font-size: 20px;
			}
		}
		.landing__head {
			@media (min-width: 768px) {
				margin-top: -8px;
			}
			margin-bottom: 32px;
			h1, .h1 {
				margin: 0;
				@media (max-width: 767px) {
					margin-bottom: 8px;
					line-height: 1.15;
				}
			}
		}
		.landing__side {
			@media(min-width: 768px){
				float: left;
				width: 200px;
				padding-right: 24px;
			}
		}
		.landing__body {
			overflow: hidden;
			@media(min-width: 1200px){
				padding-right: 200px;
			}
		}
		.table-simple {
			tr {
				td {
					vertical-align: top;
					&:not(:first-child){
						padding-left: 24px;
						text-align: right;
						white-space: nowrap;
					}
				}
				&:not(:first-child){
					td {
						padding-top: 4px;
					}
				}
			}
		}

		.uniq__poster {
			border: 0;
			position: relative;
			display: block;
			&:before {
				content: '';
				position: absolute; top: 0; right: 0; bottom: 0; left: 0;
				display: block;
				@include transition();
			}
			img {
				display: block;
				width: 100%;
			}
			&:hover {
				&:before {
					box-shadow: inset 0 0 16px $color_blue;
				}
			}
		}
	}
	&.landing_knecht {
		max-width: 900px;
		margin: 0 auto;
		h1, .h1 {
			font-size: 36px;
			line-height: 1.25;
		}
		h2, .h2 {
			font-size: 20px;
		}
		.landing__head {
			margin-bottom: 24px;
			font-size: 18px;
			font-weight: bold;
			color: #7E93B2;
			h1, .h1 {
				margin-bottom: 8px;
			}
		}
		@media(max-width: 767px){
			h1, .h1 {
				font-size: 24px;
			}
			h2, .h2 {
				font-size: 18px;
			}
			.landing__head {
				font-size: 16px;
			}
		}
		.landing__list {
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				position: relative;
				padding-left: 24px;
				&:not(:first-child){
					margin-top: 12px;
				}
				&:before {
					content: '';
					background: url(../images/pages/landing-knecht/i-add.png) no-repeat 50% 50% / 100% auto;
					position: absolute; top: .4em; left: 0;
					display: block; width: 12px; height: 13px;
				}
			}
		}
		.product-preview {
			.product-preview__link {
				padding: 12px 16px 16px;
				&:hover {
					@include box-shadow(0 0 12px rgba(0,0,0,0.25));
				}
			}
			.product-preview__head {
				.img-aligner {}
			}
			.product-preview__body {
				.name {
					font-size: 16px;
					font-weight: normal;
				}
			}
		}
	}

	&.landing-trio {
		&:not(.piece){
			margin: -24px -24px 0 -24px;
			@media (max-width: 767px){
				margin: -12px -12px 0 -12px;
			}
		}
		.lt-section-intro {
			background-color: $black;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: cover;
			padding: 64px 24px;
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			color: $white;
			.logo {
				margin-bottom: 36px;
				img {
					display: block;
					width: 300px;
					max-width: 100%;
					margin: 0 auto;
				}
			}
			h1 {
				font-size: 48px;
				color: $white;
				@media (max-width: 991px){
					font-size: 42px;
				}
				@media (max-width: 767px){
					font-size: 32px;
				}
			}
		}
		.lt-section-zero {
			background: #F6F6F8;
			padding: 48px 64px;
			@media (max-width: 991px){
				padding: 32px;
			}
			@media (max-width: 767px){
				padding: 24px;
			}
			.lt-section-zero__image {
				display: block;
				max-width: 100%;
			}
			.lt-section-zero__list {
				margin: 0;
				padding: 0;
				list-style: none;
				font-size: 18px;
				dt {
					margin: 0;
					padding: 0;
					font-size: 36px;
					font-weight: bold;
				}
				dd {
					margin: 12px 0 0 0;
					padding: 0;
					strong {
						display: inline-block;
						min-width: 48px;
						font-size: 24px;
					}
				}
				@media (max-width: 575px) {
					font-size: 15px;
					dt {
						font-size: 24px;
					}
					dd {
						margin-top: 4px;
						strong {
							min-width: 36px;
							font-size: 18px;
						}
					}
				}
			}
			.panel {
				font-size: 18px;
				@media (max-width: 991px){
					margin-left: -32px;
					margin-right: -32px;
				}
				@media (max-width: 767px){
					margin-left: -24px;
					margin-right: -24px;
					font-size: 16px;
				}
				@include border-radius(4px);
				.panel-body {
					& > .icobox {
						padding-left: 36px;
						& > .ico {
							top: 0;
							margin-top: 2px;
						}
					}
				}
			}
		}
		.lt-section-goods {
			padding: 48px 64px;
			@media (max-width: 991px){
				padding: 32px;
			}
			@media (max-width: 767px){
				padding: 24px;
			}
			.lt-section-goods__head {
				margin-bottom: 16px;
				font-size: 28px;
				font-weight: bold;
			}
			.lt-section-goods__body {
				position: relative;
				display: flex;
				flex-wrap: wrap;
				margin-left: -16px;
				margin-right: -16px;
				@media(max-width: 767px){
					margin-left: -12px;
					margin-right: -12px;
				}
			}
			.lt-section-goods__footer {
				margin-top: 40px;
				@media(max-width: 767px){
					text-align: center;
				}
				.btn {
					padding: 12px 20px;
					font-size: 16px;
				}
			}
			.lt-section-goods__item {
				width: 25%;
				min-width: 25%;
				@media(max-width: 767px){
					width: 50%;
					min-width: 50%;
				}
				& > a {
					border: 0;
					display: block;
					padding: 16px;
					color: $color_dark;
					text-align: center;
					@media(max-width: 767px){
						padding: 12px;
					}
					.img-aligner {}
					.title {
						margin-top: 8px;
						font-size: 14px;
						font-weight: bold;
						@media(max-width: 991px){
							font-size: 12px;
						}
					}
					&:hover {
						@include box-shadow(0 4px 9px rgba(126, 147, 178, 0.5));
					}
				}
			}
		}
		.lt-section-advantages {
			display: flex;
			flex-wrap: wrap;
			padding: 48px;
			@media (max-width: 991px){
				padding: 32px 12px;
			}
			@media (max-width: 767px){
				padding: 24px 0;
			}
			.ltsa-item {
				width: 33.3333%;
				padding: 24px;
				text-align: center;
				@media (max-width: 767px){
					width: 50%;
				}
				.icon {
					position: relative;
					width: 64px;
					height: 64px;
					margin: 0 auto 24px;
					img {
						position: absolute; top: 50%; left: 50%;
						display: block;
						max-width: 100%;
						max-height: 100%;
						@include transform(translateX(-50%) translateY(-50%));
					}
				}
				.text {
					max-width: 150px;
					margin: 0 auto;
				}
			}
		}
		.lt-section-calc {
			background: #F6F6F8;
			padding: 48px 64px;
			@media (max-width: 991px){
				padding: 32px;
			}
			@media (max-width: 767px){
				padding: 24px;
			}
			h2, .h2 {
				font-size: 36px;
				@media (max-width: 767px){
					font-size: 28px;
				}
			}
			.panel {
				font-size: 18px;
				@media (max-width: 991px){
					margin-left: -32px;
					margin-right: -32px;
				}
				@media (max-width: 767px){
					margin-left: -24px;
					margin-right: -24px;
					font-size: 16px;
				}
				@include border-radius(4px);
				.icobox {
					padding-left: 36px;
					.ico {
						top: 0;
						margin-top: 2px;
					}
				}
			}
			.calculator {
				background: $white;
				@include box-shadow(0 4px 15px rgba(0, 0, 0, 0.15));
				@media (min-width: 768px){
					margin-right: 48px;
				}
				.calculator__head {
					padding: 24px;
					text-align: center;
					.title {
						margin-bottom: 12px;
						font-size: 18px;
						color: #7E93B2;
					}
					.form-group {
						position: relative;
						display: block;
						width: 160px;
						margin: 0 auto;
						font-size: 24px;
						.form-field {
							.form-control {
								height: auto;
								padding: 4px 4px 6px;
								font-size: 36px;
								line-height: 1;
								font-weight: bold;
								color: $blue;
								text-align: center;
								&[type=number]{
									-moz-appearance: textfield;
									&::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
										-webkit-appearance: none;
										-moz-appearance: none;
										appearance: none;
										margin: 0;
									}
								}
							}
						}
						.form-label {
							position: absolute; top: 50%; left: 100%;
							margin: -12px 0 0 8px;
							padding: 0;
							line-height: 1;
						}
					}
					.error {
						display: none;
						font-size: 13px;
						color: $red;
					}
				}
				.calculator__body {
					background: #f5f7fa;
					padding: 24px;
					font-size: 18px;
					text-align: center;
					.title {
						margin-bottom: 20px;
					}
					.summary {
						margin: 24px 0 0 0;
						padding: 0;
						list-style: none;
						dt {
							margin: 0;
							padding: 0;
							font-weight: normal;
							color: #7e93b2;
						}
						dd {
							margin: 0;
							padding: 0;
							strong {
								font-size: 24px;
								color: $blue;
							}
						}
					}
				}
				.calculator-checker {
					text-align: left;
					label {
						position: relative;
						display: block;
						&:not(:first-child){
							margin-top: 12px;
						}
						.arr {
							border: 2px solid #7e93b2;
							position: absolute; top: 50%; left: 12px;
							display: block;
							width: 20px;
							height: 20px;
							@include border-radius(50%);
							@include transform(translateY(-50%));
						}
						.data {
							border: 2px solid #7e93b2;
							display: flex;
							flex-wrap: wrap;
							padding: 8px 8px 8px 48px;
							color: #7e93b2;
							white-space: nowrap;
							@include border-radius(45px);
							.day {
								min-width: 25%;
								@media (max-width: 767px){
									min-width: 50%;
								}
							}
							.parts {
								min-width: 35%;
								@media (max-width: 767px){
									min-width: 50%;
								}
							}
							.price {
								@media (max-width: 767px){
									min-width: 100%;
								}
							}
						}
						input {
							position: absolute; top: 0; right: 0;
							visibility: hidden;
							opacity: 0;
							&:checked {
								& ~ .arr {
									background: #0d61ab;
									border-color: #0d61ab;
								}
								& ~ .data {
									background: #d5e6f6;
									border-color: #0d61ab;
									color: #0d61ab;
								}
							}
						}
						&:hover {
							cursor: pointer;
							.data {
								background: #e1f0ff;
								//border-color: #0d61ab;
							}
						}
					}
				}

				&.has-error {
					.calculator__head {
						.error {
							display: block;
						}
					}
				}
			}
		}
		.lt-section-payment {
			padding: 48px 64px;
			font-size: 18px;
			@media (max-width: 991px){
				padding: 32px;
			}
			@media (max-width: 767px){
				padding: 24px;
				font-size: 16px;
			}
			h2, h2 {
				font-size: 36px;
				@media (max-width: 767px){
					font-size: 28px;
				}
				&.ml {
					@media (min-width: 992px){
						margin-left: 54%;
					}
				}
			}
			.ltsp-row {
				display: flex;
				@media (max-width: 767px){
					flex-direction: column;
				}
				& + .ltsp-row, & + h2 {
					margin-top: 64px;
					@media (max-width: 991px){
						margin-top: 48px;
					}
				}
				.ltsp-side {
					width: 46%;
					min-width: 46%;
					margin-right: 8%;
					@media (min-width: 768px){
						&:not(:first-child){
							margin-right: 0;
							margin-left: 8%;
						}
					}
					@media (max-width: 767px){
						width: 100%;
						min-width: 100%;
						margin-bottom: 24px;
						order: 1;
					}
				}
				.ltsp-content {
					flex-grow: 1;
					@media (max-width: 767px){
						order: 2;
					}
				}

				.ltsp-image {
					@include box-shadow(5px 5px 14px rgba(0, 0, 0, 0.1));
					img {
						display: block;
						width: 100%;
					}
				}
			}
		}
		.lt-section-installment {
			background: #F6F6F8;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: cover;
			padding: 48px 64px;
			font-size: 18px;
			@media (max-width: 991px){
				padding: 32px;
			}
			@media (max-width: 767px){
				padding: 24px;
				font-size: 16px;
			}
			h2, .h2 {
				font-size: 36px;
				@media (max-width: 767px){
					font-size: 28px;
				}
			}
		}
		.lt-section-catalog {
			padding: 48px 64px 64px;
			text-align: center;
			@media (max-width: 991px){
				padding: 32px;
			}
			@media (max-width: 767px){
				padding: 24px;
			}
			.title {
				margin-bottom: 48px;
				font-size: 24px;
			}
		}
		.lt-section-conditions {
			padding: 24px 24px 0;
			font-size: 14px;
			line-height: 1.4;
			color: #7E93B2;
			@media (max-width: 767px){
				padding: 12px 12px 0;
			}
		}

		ol.lt-ol {
			margin: 0;
			padding: 0;
			list-style: none;
			counter-reset: item;
			& > li {
				position: relative;
				display: block;
				padding-left: 24px;
				&:not(:first-child){
					margin-top: 8px;
				}
				&:not(.blank){
					&:before {
						content: counters(item, ".") ".";
						counter-increment: item;
						position: absolute; top: 0; left: 0;
						font-weight: bold;
					}
				}
			}
		}
	}

}

//landing-origin
.section-jumbotron_origin {
	background-color: #dde3ea;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	overflow: hidden;
	min-height: 120px;
	@media(min-width: 1200px){
		min-height: 130px;
	}
	img {
		display: block;
		@media (max-width: 767px) {
			height: 120px;
		}
		@media (min-width: 768px) {
			max-width: 100%;
		}
	}
}
.landing-origin-form {
	background: #deefff;
	position: relative;
	z-index: 2;
	padding: 32px 0 0;
	h1, .h1 {
		margin: 0 0 8px;
		padding: 0 16px;
		font-weight: bold;
		font-size: 36px;
		line-height: 1.25;
		text-align: center;
	}
	.form-body {
		form {
			max-width: 540px;
			margin-left: auto;
			margin-right: auto;
			padding: 16px 16px 32px;
		}
	}
	&._fix {
		.form-body {
			background: #deefff;
			position: fixed; top: 0;
			z-index: 999;
			&:before {
				content: '';
				position: absolute; top: 100%; left: 0; right: 0;
				height: 8px;
				background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
				background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
				background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
				opacity: .1;
			}
		}
	}
	.form-group {
		.form-label {
			margin-bottom: 6px;
			font-size: 18px;
			color: #333;
		}
		.form-row {
			display: flex;
			.form-field {
				flex-grow: 1;
			}
			.form-btn {
				margin-left: 12px;
				.btn {
					white-space: nowrap;
				}
			}
		}
		.help-block {
			margin: 4px 0 0 0;
			color: #7E93B2;
			a {
				color: inherit;
				&.text-dashed {
					border-bottom: 1px dashed #7E93B2;
					&:hover {
						border-bottom-color: transparent;
						color: $blue;
					}
				}
			}
		}
	}
	.section-shadow {
		position: absolute; top: 100%; left: 0; right: 0;
		height: 8px;
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
		opacity: .1;
	}
}
.landing-origin {
	h1, .h1 {

	}
	h2, .h2 {
		margin-bottom: 24px;
		font-size: 36px;
		font-weight: bold;
		line-height: 1.25;
		@media(max-width: 767px){
			font-size: 28px;
		}
	}
	.section-origin {
		display: flex;
		align-items: center;
		padding-top: 16px;
		@media(max-width: 767px){
			padding-top: 24px;
		}
		@media(max-width: 575px){
			flex-direction: column;
		}
		.section__side {
			width: 35%;
			min-width: 35%;
			@media(max-width: 991px){
				width: 200px;
				min-width: 200px;
				margin-right: 40px;
			}
			@media(max-width: 767px){
				width: 160px;
				min-width: 160px;
				margin-right: 24px;
			}
			@media(max-width: 575px){
				width: 100px;
				min-width: 100px;
				margin: 0 0 24px 0;
			}
			img {
				display: block;
				width: 100%;
				max-width: 240px;
				margin: 0 auto;
			}
		}
		.section__body {
			border: 1px solid #dde4ec;
			position: relative;
			flex-grow: 1;
			max-width: 640px;
			padding: 32px;
			line-height: 1.25;
			@include border-radius(4px);
			&:not(:first-child){
				@media(min-width: 576px){
					margin-left: 16px;
				}
			}
			@media(max-width: 991px){
				border: 0;
				padding: 0;
				&:before, &:after {
					content: none !important;
				}
			}
			&:before {
				content: '';
				border-style: solid;
				border-width: 16px 24px;
				border-color: transparent #dde4ec transparent transparent;
				position: absolute; top: 50%; left: 0;
				@include transform(translateX(-100%) translateY(-50%));
			}
			&:after {
				content: '';
				border-style: solid;
				border-width: 16px 24px;
				border-color: transparent #ffffff transparent transparent;
				position: absolute; top: 50%; left: 2px;
				@include transform(translateX(-100%) translateY(-50%));
			}
			h2, .h2 {
				margin-bottom: 16px;
				font-size: 22px;
				font-weight: bold;
				line-height: 1.25;
			}
		}
	}
	.section-card {
		display: flex;
		@media(max-width: 767px){
			flex-direction: column;
		}
		& + .section-card {
			margin-top: 80px;
			@media(max-width: 991px){
				margin-top: 48px;
			}
		}
		.card-side {
			width: 35%;
			min-width: 35%;
			@media(max-width: 767px){
				width: auto;
				max-width: 360px;
				margin-bottom: 16px;
			}
		}
		.card-body {
			flex-grow: 1;
			max-width: 560px;
			&:not(:first-child){
				@media(min-width: 768px){
					margin-left: 48px;
				}
			}
		}
		.card-title {
			margin-bottom: 16px;
			font-size: 22px;
			font-weight: bold;
		}
		.card-image {
			img {
				display: block;
				max-width: 100%;
			}
		}
	}
	.landing-origin-form {
		margin-left: -24px;
		margin-right: -24px;
		@media(max-width: 767px){
			margin-left: -12px;
			margin-right: -12px;
		}
	}
}
.landing-origin-advantages {
	background: #f5f5f5;
	padding: 48px 24px;
	@media(max-width: 767px){
		padding: 28px 12px;
	}
	.section__heading {
		margin-bottom: 24px;
		font-size: 36px;
		font-weight: bold;
		line-height: 1.25;
		@media(max-width: 767px){
			font-size: 28px;
		}
	}
	.section__body {
		padding: 32px 0;
		@media(max-width: 767px){
			padding: 12px 0 24px;
		}
	}
	.advantages-list {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin: 0 -16px;
		padding: 0;
		list-style: none;
		@media(max-width: 767px){
			margin: 0 -12px;
		}
		li {
			width: 20%;
			padding: 16px;
			text-align: center;
			@media(max-width: 991px){
				width: 25%;
			}
			@media(max-width: 767px){
				width: 33.3333%;
				padding: 12px;
			}
			@media(max-width: 575px){
				width: 50%;
			}
			.image {
				display: block;
				max-width: 100%;
				max-height: 80px;
				margin-left: auto;
				margin-right: auto;
			}
			.description {
				margin-top: 6px;
				font-size: 13px;
				line-height: 1.25;
			}
		}
	}
}

.modal .landing.landing_knecht {
	@media(min-width: 992px){
		padding: 24px;
	}
}

//covid-infoLink
.covid-infoLink {
	margin-bottom: 16px;
	a {
		background: rgb(255, 194, 14);
		background: rgba(255, 194, 14, 0.87);
		border: 0;
		position: relative;
		display: inline-block;
		padding: 12px 16px 14px 48px;
		font-size: 16px;
		line-height: normal;
		font-weight: normal;
		font-style: normal;
		color: $blue;
		letter-spacing: 0.25px;
		@include border-radius(3px);
		img {
			position: absolute; top: 50%; left: 14px;
			display: block;
			height: 24px;
			margin-top: -12px;
		}
		&:hover {
			background: rgb(255, 194, 14);
			background: rgba(255, 194, 14, 1);
		}
	}
}