@import "variables";
#header {
	background: $color_dark url(../images/header-bg.png) repeat top left;
	position: relative;
	z-index: 888;
	min-height: 44px;
	color: $color_white;
	.header__left {
		float: left;
	}
	.header__right {
		position: absolute; top: 0; right: 0;
		//float: right;
	}

	.header-box {
		position: relative;
		float: left;
		.header-box__shadow {
			background: rgba(0,0,0,.4);
			position: fixed; top: 0; right: 0; bottom: 0; left: 0;
			z-index: 995;
			display: none;
			& ~ .header-box__head {
				z-index: 999;
			}
			& ~ .header-box__body,
			& ~ .header-box__drop {
				z-index: 998;
			}
		}
		.header-box__head {
			position: relative;
			z-index: 3;
			@include transition(all 0.1s linear .15s);
		}
		.header-box__body {

		}
		.header-box__drop {
			position: absolute; top: 100%;
			z-index: 2;
			background: $white;
			color: $color_dark;
			//display: none;
			visibility: hidden;
			opacity: 0;
			@include box-shadow(0 0 8px $color_gray_40);
			@include transition(all .1s linear .15s);
			&.visible {
				visibility: visible;
				opacity: 1;
			}
		}
		&:hover {
			@media(min-width: 576px){
				//z-index: 5;
				z-index: 998;
				.header-box__shadow {
					display: block;
				}
				.header-box__head {
					background: $white;
					color: $color_dark;
					@include transition(all 0.2s linear 0s);
				}
				.header-box__drop {
					//display: block;
					@include transition(all .2s linear 0s);
					visibility: visible;
					opacity: 1;
				}
				& + .header-box-shadow {
					@media(max-width: 575px){
						opacity: 1;
						visibility: visible;
					}
				}
			}
		}
		&.hovered {
			//z-index: 5;
			z-index: 998;
			.header-box__shadow {
				display: block;
			}
			.header-box__head {
				background: $white;
				color: $color_dark;
				@include transition(all 0.2s linear 0s);
			}
			.header-box__drop {
				//display: block;
				@include transition(all .2s linear 0s);
				visibility: visible;
				opacity: 1;
			}
			& + .header-box-shadow {
				@media(max-width: 575px){
					opacity: 1;
					visibility: visible;
				}
			}
		}
		&.header-contacts {
			.header-box__drop {
				@include transition(all .1s linear .15s);
			}
			&:hover {
				@media(min-width: 576px){
					.header-box__head {
						@include transition(all 0.2s linear .35s);
					}
					.header-box__drop {
						@include transition(all .2s linear .35s);
					}
				}
			}
			&.hovered {
				.header-box__head {
					@include transition(all 0.2s linear .35s);
				}
				.header-box__drop {
					@include transition(all .2s linear .35s);
				}
			}
		}
	}

	.header-box-shadow {
		background: rgba(0,0,0,.75);
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 995;
		opacity: 0;
		visibility: hidden;
	}

	.header-menu {
		@media(min-width: 576px){
			display: none;
		}
		.header-box__head {
			padding: 10px;
			cursor: pointer;
			svg {
				display: block;
				width: 24px;
				height: 24px;
			}
		}
		.header-box__drop {
			left: 0;
			min-width: 280px;
		}
		.header-menu__list {
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				&:not(:first-child){
					border-top: 1px solid $color_gray_10;
				}
				a {
					border: none;
					display: block;
					padding: 12px 16px;
					font-size: 16px;
					color: $color_dark;
					.icobox {
						display: block;
						.pull-right {
							float: right;
							margin-top: 3px;
							font-size: 12px;
							font-weight: bold;
							color: $blue;
						}
						&.size_24 {
							padding-left: 36px;
						}
					}
					&:hover {
						background: $color_gray_05;
					}
				}
			}
		}
		&:hover {
			.header-box__head {
				cursor: pointer;
			}
		}

		.header-hint-corner {
			position: absolute; bottom: 0; left: 50%;
			border: 6px solid transparent;
			border-bottom-color: $yellow_light;
			margin-left: -6px;
		}
	}
	.header-search-button {
		position: relative;
		float: left;
		cursor: pointer;
		@media(min-width: 576px){
			display: none;
		}
		padding: 10px;
		svg {
			display: block;
			width: 24px;
			height: 24px;
		}
	}
	.header-logo {
		background: $red;
		border: none;
		display: block;
		height: 44px;
		text-align: center;
		//height: 44px;
		@include transition(none);
		img, svg {
			display: block;
			width: 202px;
			max-width: 100%;
			height: 44px;
			margin: auto;
		}
		@media(max-width: 1199px){
			img, svg {
				width: 165px;
				height: 36px;
				margin-top: 4px;
			}
		}
		@media(max-width: 767px){
			img, svg {
				width: 147px;
				height: 32px;
				margin-top: 6px;
			}
		}
		@media(max-width: 575px){
			//margin-top: 8px;
			height: auto;
			margin: 9px 4px 0 2px;
			padding: 0;
			img, svg {
				width: 110px;
				height: 24px;
				margin: 0;
				font-size: 19px;
			}
		}
		@media(max-width: 359px){
			margin: 10px 4px 0 4px;
			img, svg {
				width: 90px;
				height: 22px;
				font-size: 15px;
			}
		}
		@media(max-width: 339px){
			margin: 12px 4px 0 4px;
			img, svg {
				width: 75px;
				height: 20px;
			}
		}
	}

	.header-search {
		.header-search__head {
			padding: 6px;
			.logo {
				display: none;
			}
			.closer {
				display: none;
			}
			.title {
				display: none;
			}
			.form {
				position: relative;
				width: 320px;
				@media (max-width: 1199px) {
					width: 240px;
				}
				padding-right: 36px;
				& > span {
					position: relative;
					display: block;
					input[type="text"]{
						background: $white;
						border: none;
						display: block;
						width: 100%;
						height: 32px;
						padding: 2px 32px 2px 8px;
						&::-ms-clear {
							display: none;
						}
					}
					.closer {
						position: absolute; top: 50%; right: 8px;
						width: 16px;
						height: 16px;
						margin-top: -8px;
						display: none;
						opacity: .85;
						&.spin {
							&:after {
								display: none;
							}
							&:before {
								content: '\f110';
								font-family: 'FontAwesome';
								background: none;
								position: absolute; top: 0; left: 0;
								display: block;
								width: 1em;
								height: 1em;
								color: $black;
								line-height: 1em;
								text-align: center;
								animation: rotates 1.25s linear infinite;
								@keyframes rotates {
									0% { transform: none; }
									100% { transform: rotate(360deg); }
								}
							}
						}
					}
				}
			}
		}
		.header-search__body {
			display: none;
			.autocompliter {
				position: relative;
				top: auto;
				left: auto;
				display: block !important;
				width: auto !important;
				@media(min-width: 576px){
					max-height: 85vh;
					overflow-y: auto;
					.autocompliter__list {
						position: relative;
						overflow: hidden;
					}
				}
				@media(max-width: 575px){
					max-height: none !important;
				}
				.autocompliter__list li .img {
					@media (min-width: 768px) {
						margin-right: 0 !important;
					}
				}
			}
		}

		&.active {
			.header-search__head {
				.form {
					.closer {
						//display: block;
					}
				}
			}
			//
			.header-search__body {
				position: absolute; top: 100%; left: 0;
				display: block !important;
			}
		}
		&.result {
			.header-search__head {
				.form {
					.closer {
						display: block;
					}
				}
			}
			.header-search__body {
				position: absolute; top: 100%; left: 0;
				display: block !important;
			}
		}
		@media (max-width: 575px) {
			background: rgba(0,0,0,0.75);
			position: fixed; top: 0; right: 0; bottom: 0; left: 0;
			overflow-y: auto;
			z-index: 999;
			display: none;
			.header-search__head {
				background: $color_dark url(../images/header-bg.png) repeat top left;
				padding: 0 8px 8px;
				.logo {
					display: block;
					width: 101px;
					height: 22px;
				}
				& > .closer {
					background: $color_gray_10;
					position: absolute; top: 4px; right: 8px;
					display: block;
					width: 20px;
					height: 20px;
					opacity: 1;
					@include border-radius(2px);
				}
				.title {
					display: block;
					padding: 6px 0 8px;
					font-size: 13px;
				}
				.form {
					width: auto;
					padding: 0;
					& > span {
						background: $white;
						position: relative;
						margin: 0;
						padding: 4px 12px 4px 40px;
						@include border-radius(2px);
						/*&:before {
							content: '\f002';
							position: absolute; top: 50%; left: 12px;
							display: block;
							width: 16px;
							height: 16px;
							margin-top: -8px;
							font-family: 'FontAwesome';
							color: $black;
							line-height: 1em;
							text-align: center;
						}*/
						input[type="text"] {
							padding: 2px 28px 2px 0;
							font-size: 16px;
						}
						.closer {
							right: 16px;
						}
					}
					button[type="submit"] {
						background: none;
						border: 0;
						position: absolute; top: 50%; left: 12px;
						display: block;
						width: 16px;
						height: 16px;
						margin-top: -8px;
						color: $black;
						fill: $black;
						svg {
							display: block;
							width: 16px;
							height: 16px;
							margin: 0 auto;
						}
						//visibility: hidden;
					}
				}
			}
		}
		@media (min-width: 576px) {
			.header-search__head {
				.form {
					button[type="submit"]{
						background: $color_dark;
						background: -moz-linear-gradient(top, #333333 0%, #000000 100%);
						background: -webkit-linear-gradient(top, #333333 0%, #000000 100%);
						background: linear-gradient(to bottom, #333333 0%, #000000 100%);
						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000', GradientType=0 );
						border: none;
						position: absolute; top: 0; right: 0;
						display: block;
						width: 36px;
						height: 32px;
						font-size: 18px;
						color: $white;
						line-height: 32px;
						text-align: center;
						fill: $white;
						svg {
							display: block;
							width: 16px;
							height: 16px;
							margin: 0 auto;
						}
						&:hover {
							background: $color_gray_80;
						}
					}
				}
			}
		}
	}

	.header-language {
		.header-box__head {
			position: relative;
			padding: 14px 24px 14px 8px;
			.lang-row {
				display: flex;
				align-items: center;
				font-size: 14px;
				line-height: 1;
				white-space: nowrap;
				.lang-row__icon {
					margin-right: 6px;
				}
				.lang-row__currency {
					font-weight: bold;
				}
			}
			img {
				display: block;
				width: 20px;
				height: 16px;
			}
			.fa {
				position: absolute; top: 50%; right: 8px;
				display: block;
				height: 16px;
				margin-top: -8px;
				font-size: 16px;
				line-height: 16px;
			}
		}
		.header-box__drop {
			background: $color_gray_10;
			//background: $white;
			right: 0;
			padding-top: 4px;
			padding-bottom: 16px;
			.hl-title { display: none; }
			.hl-label {
				padding: 12px 8px 4px 36px;
				//font-weight: bold;
				font-size: 16px;
				/*&:not(:first-child){
					border-top: 1px solid #E2E2E2;
					margin-top: 12px;
				}*/
			}
			.hl-list {
				min-width: 220px;
				margin: 0;
				padding: 0;
				list-style: none;
				li {
					position: relative;
					a, .type-link {
						border: none;
						position: relative;
						display: block;
						padding: 8px 16px 10px 36px;
						font-size: 16px;
						line-height: 20px;
						color: $color_dark;
						img, .fa, svg, .hl-list-icon {
							position: absolute; top: 10px; left: 8px;
							@media(max-width: 575px){
								/*top: 15px;
								left: 16px;*/
								@include border-radius(0);
							}
							display: block;
							width: 20px;
							height: 16px;
							//margin-top: -8px;
							font-size: 18px;
							font-weight: bold;
							line-height: 16px;
							text-align: center;
							color: $blue;
						}
						.carret {
							position: absolute; top: 50%; right: 8px;
							display: block;
							border-width: 6px 5px;
							border-style: solid;
							border-color: transparent;
							border-top-color: $color_gray_90;
							margin-top: -2px;
						}
						&:hover {
							background: #C5C5C5;
						}
					}
					&.current {
						//background: #D5E6F6;
						position: relative;
						font-weight: bold;
						a, type-link {
							&:before {
								content: '';
								border-width: 6px 5px;
								border-style: solid;
								border-color: transparent;
								border-top-color: #333;
								position: absolute; top: 50%; right: 8px;
								display: block;
								margin-top: -3px;
							}
						}
					}
					&.current_hidden {
						display: none;
					}
				}
				@media(max-width: 575px){
					& > li {
						&.current_hidden {
							display: block !important;
						}
					}
				}
			}
			&.fixed {
				overflow: hidden;
				overflow-y: auto;
				max-height: 75vh;
			}
		}
		&:hover {
			@media(min-width: 576px){
				.header-box__head {
					background: $color_gray_10;
					//background: $white;
					//color: $color_dark;
					cursor: pointer;
				}
				.header-box__body {
					display: block;
				}
			}
		}
		&.hovered {
			.header-box__head {
				background: $color_gray_10;
				//background: $white;
				//color: $color_dark;
				cursor: pointer;
				/*.fa-caret-down {
					@include transform(rotate(180deg));
				}*/
			}
			.header-box__body {
				display: block;
			}
		}

		.header-hint-corner {
			position: absolute; bottom: 0; left: 12px;
			border: 6px solid transparent;
			border-bottom-color: $yellow_light;
			/*@media(max-width: 575px){
				display: none;
			}*/
		}
	}

	.header-contacts {
		@media(max-width: 840px){
			display: none;
		}
		.header-box__head {
			padding: 6px;
			span, a {
				background: $color_gray_10;
				border: none;
				display: block;
				padding: 0 8px;
				line-height: 32px;
				color: $color_dark;
				white-space: nowrap;
				@include border-radius(16px);
				@media(min-width: 1200px){
					padding: 0 12px;
				}
			}
			svg {
				position: relative;
				top: 2px;
				display: inline-block;
				width: 16px;
				height: 16px;
				color: $red;
			}
		}
		.header-box__drop {
			background: $color_gray_10;
			left: 0;
			width: 240px;
		}
		.header-contacts__list {
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				a {
					border: none;
					display: block;
					padding: 12px 16px;
					color: $color_dark;
					&:hover {
						background: $color_gray_20;
					}
				}
				.not-a-link {
					display: block;
					padding: 12px 16px;
				}
			}
		}
		&:hover, &.hovered {
			.header-box__head {
				background: $color_gray_10;
			}
		}
	}
	.header-cart {
		.header-box__head {
			cursor: pointer;
			.link {
				border: 0;
				position: relative;
				display: block;
				height: 44px;
				padding: 0 20px 0 40px;
				color: inherit;
				.link__icon {
					position: absolute; top: 50%; left: 8px;
					display: block; width: 24px; height: 24px;
					margin-top: -12px;
				}
				.link__label {
					display: block;
					line-height: 44px;
				}
				.link__badge {
					background: $white;
					//border: 1px solid $black;
					position: absolute; top: 4px; right: 4px;
					display: block;
					min-width: 16px;
					padding: 1px 4px;
					font-size: 10px;
					line-height: 14px;
					color: $black;
					text-align: center;
					@include border-radius(25px);
					&.danger {
						background: $red;
						color: $white;
					}
				}
				@media (max-width: 1199px){
					width: 44px;
					padding: 0;
					.link__icon {
						left: 50%;
						margin-left: -12px;
					}
					.link__label { display: none; }
					.link__badge {

					}
				}
			}
		}
		.header-box__drop {
			background: $color_gray_10;
			right: 0;
			min-width: 280px;
			@media (max-width: 575px){
				right: -44px;
				min-width: 320px;
			}
			.header-cart-list {
				margin: 0;
				padding: 0;
				list-style: none;
				& > li {
					position: relative;
					&:not(:first-child){
						&:before {
							content: '';
							background: $color_gray_20;
							position: absolute; top: 0; right: 0; left: 0;
							height: 1px;
						}
					}
					.link {
						border: 0;
						position: relative;
						display: block;
						padding: 12px 16px;
						color: $color_dark;
						line-height: 20px;
						.overallSize {
							position: relative;
							top: -2px;
							display: inline-block;
							max-height: 18px;
							margin-left: 1px;
						}
						.img {
							background: #fff;
							padding: 4px;
							@media (min-width: 576px) {
								border: 4px solid $color_gray_20;
								position: absolute;
								top: 0;
								right: 100%;
								width: 160px;
								display: none;
								padding: 8px;
							}
							@media (max-width: 575px){
								display: block;
								float: left;
								width: 50px;
							}
							img {
								display: block;
								max-width: 100%;
								max-height: 100px;
								margin: 0 auto;
								@media(max-width: 575px){
									max-height: 75px;
								}
							}
						}
						.txt {
							@media (max-width: 575px){
								margin-left: 60px;
								font-size: 14px;
								line-height: 1.25;
							}
						}
						.sep {
							float: right;
							display: block;
							width: 100px;
							height: 20px;
							@media (max-width: 575px) {
								display: none;
							}
						}
						.name {}
						.price {
							display: block;
							margin-top: 4px;
							@media (min-width: 576px) {
								position: absolute;
								top: 12px;
								right: 16px;
								margin-top: 0;
							}
						}
					}
					a.link {
						&:hover {
							background: $color_gray_20;
							.img {
								display: block;
							}
							.name {
								text-decoration: underline;
							}
						}
					}
					span.link {
						&:hover {
							.img {
								display: block;
							}
						}
					}
					.remover {
						position: absolute;
						@media (min-width: 576px) {
							top: -1px;
							bottom: -1px;
							left: 100%;
							display: none;
						}
						@media (max-width: 575px){
							top: 8px;
							right: 8px;
						}
						& > a {
							position: relative;
							display: block;
							border: 0;
							&:before, &:after {
								content: '';
								background: $color_gray_10;
								position: absolute; top: 50%; left: 50%;
								display: block; width: 80%; height: 4px;
								@include border-radius(3px);
							}
							&:before {
								@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
							}
							&:after {
								@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
							}
							&:hover {
								background: $red;
							}
							@media (min-width: 576px) {
								background: $color_gray_20;
								width: 24px;
								height: 24px;
								&:before, &:after {
									background: $white;
									height: 2px;
								}
							}
							@media (max-width: 575px){
								background: $color_gray_30;
								width: 20px;
								height: 20px;
								@include border-radius(3px);
							}
						}
					}
					&:hover {
						.remover {
							display: block;
						}
					}
					.text {
						padding: 12px 16px;
					}
					.total-price {
						margin-bottom: 8px;
					}
				}
			}
		}
		.header-cart-delivery-conditions {
			display: flex !important;
			font-size: 14px;
			&:not(:first-child){
				padding-top: 0 !important;
			}
			.dc-text {
				flex-grow: 1;
			}
			.dc-icon {
				margin-top: 7px;
				margin-left: 12px;
			}
		}
		&:hover {
			@media(min-width: 576px){
				.header-box__head {
					background: $color_gray_10;
					color: $color_dark;
				}
			}
		}
		&.hovered {
			.header-box__head {
				background: $color_gray_10;
				color: $color_dark;
			}
		}
	}
	.header-user {
		.header-box__head {
			padding: 0 8px !important;
			cursor: pointer;
			.head-label {
				border: 0;
				position: relative;
				display: block;
				height: 44px;
				padding-left: 32px;
				color: inherit;
				.head-label__icon {
					position: absolute; top: 50%; left: 0;
					display: block;
					width: 24px;
					height: 24px;
					margin-top: -12px;
					&.initials {
						width: 26px;
						height: 26px;
						margin-top: -13px;
						@media (max-width: 991px) {
							margin-left: -13px !important;
						}
						font-size: 12px;
						line-height: normal;
						font-weight: bold;
						text-transform: uppercase;
						text-align: center;
						@include border-radius(50%);
						@include box-shadow(inset 0 0 0 2px rgba(255,255,255,1));
						span {
							position: absolute; top: 50%; left: 50%;
							@include transform(translateX(-50%) translateY(-50%));
						}
					}
				}
				.head-label__text {
					position: relative;
					overflow: hidden;
					max-width: 120px;
					@media (max-width: 1199px){
						max-width: 60px;
					}
					line-height: 44px;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				@media (max-width: 991px){
					width: 28px;
					padding-left: 0;
					.head-label__icon {
						left: 50%;
						margin-left: -12px;
					}
					.head-label__text { display: none; }
				}
			}
			.head-name {
				position: relative;
				height: 44px;
				padding: 0 2px;
				font-size: 20px;
				font-weight: bold;
				line-height: 40px;
			}
		}
		.header-box__drop {
			background: $color_gray_10;
			right: 0;
			width: 280px;
			.header-user__list {
				margin: 0;
				padding: 0;
				list-style: none;
				& > li {

				}
			}
			.header-user__name {
				padding: 12px 16px;
				font-size: 16px;
				font-weight: bold;
			}
			.header-user__text {
				padding: 12px 16px;
				.btn-link {
					color: $color_dark !important;
				}
			}
			.header-user__link {
				border: 0;
				display: block;
				padding: 12px 16px;
				color: $color_dark;
				&:hover {
					background: $color_gray_20;
				}
			}
			.header-user__logout {
				padding: 12px 16px;
				text-align: right;
				a {
					border-bottom-color: transparent;
					color: $color_dark;
					&:hover {
						border-bottom-color: $color_dark;
					}
				}
			}
		}

		&:hover {
			@media(min-width: 576px){
				.header-box__head {
					background: $color_gray_10;
					color: $color_dark;
					.head-label {
						.head-label__icon {
							&.initials {
								@include box-shadow(inset 0 0 0 2px rgba(0,0,0,.6));
							}
						}
					}
				}
			}
		}
		&.hovered {
			.header-box__head {
				background: $color_gray_10;
				color: $color_dark;
				.head-label {
					.head-label__icon {
						&.initials {
							@include box-shadow(inset 0 0 0 2px rgba(0,0,0,.6));
						}
					}
				}
			}
		}
	}

	.header__flex {
		display: flex;
		.header-box {
			float: none;
		}
		.header-logo {
			@media( max-width: 575px ){
				align-self: center;
				margin: 0 auto;
				img {
					width: auto;
					height: auto;
					max-width: 100%;
					max-height: 24px;
				}
			}
		}
		.header-language {
			/*@media( max-width: 575px ){
				margin-left: auto;
			}*/
		}
		.header-cart {
			@media( min-width: 576px ){
				margin-left: auto;
			}
		}
	}
}
.header-hint {
	background: $yellow_light;
	position: relative;
	//z-index: 9999;
	padding: 4px 36px;
	text-align: center;
	display: none;
	@media(max-width: 575px){
		font-size: 14px;
	}
	&:before {
		content: '';
		border: 8px solid transparent;
		border-bottom-color: $yellow_light;
		position: absolute; left: 464px; bottom: 100%;
		display: none;
	}
	.closer {
		top: 50%;
		right: 8px;
		width: 24px;
		height: 24px;
		margin-top: -12px;
		opacity: .75;
	}
	.header-hint__list {
		margin: 0;
		padding: 0;
		list-style: none;
		& > li {
			display: inline-block;
			vertical-align: middle;
			padding-top: 4px;
			padding-bottom: 4px;
		}
		.btn {
			padding: 8px 20px;
		}
	}

	/*.icobox {
		display: inline-block;
		vertical-align: middle;
		margin-right: 8px;
	}
	.btns {
		display: inline-block;
		vertical-align: middle;
		white-space: nowrap;
	}
	.btn {
		padding: 6px 16px;
		&:not(:first-child){
			margin-left: 4px;
		}
		svg {
			display: block;
			width: 16px;
			height: 16px;
		}
		@media(max-width: 575px){
			padding: 5px 8px;
			svg {
				width: 12px;
				height: 12px;
			}
		}
		&.btn-default {
			background: rgb(71,71,73);
			background: -moz-linear-gradient(top, rgba(71,71,73,1) 0%, rgba(0,0,0,1) 100%);
			background: -webkit-linear-gradient(top, rgba(71,71,73,1) 0%,rgba(0,0,0,1) 100%);
			background: linear-gradient(to bottom, rgba(71,71,73,1) 0%,rgba(0,0,0,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474749', endColorstr='#000000',GradientType=0 );
			border-color: #000;
			color: $white !important;
			&:hover {
				background: rgb(102,102,102);
				background: -moz-linear-gradient(top, rgba(102,102,102,1) 0%, rgba(51,51,51,1) 100%);
				background: -webkit-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%);
				background: linear-gradient(to bottom, rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 );
				border-color: #666;
			}
		}
	}*/
	&.in {
		display: block;
	}
}
.header-hint-fixed {
	position: relative;
	&.float {
		.header-hint {
			position: fixed; top: 0;
			z-index: 9999;
		}
	}
}
@media(max-width: 575px){
	.body-search {
		overflow: hidden;
		#header {
			.header-search {
				display: block !important;
				.header-search__body {
					position: relative; top: auto; left: auto;
					//display: block !important;
				}
			}
		}
	}
}

//
.mobile-search-open {
	@media (max-width: 574px) {
		overflow: hidden;
	}
}
.autocompliter {
	background: $color_gray_10;
	position: absolute; top: 100%; left: 0;
	@media (min-width: 575px){
		//overflow-y: auto;
		min-width: 420px;
		//max-height: 750px;
	}
	@media (min-width: 575px) and (max-width: 767px){
		min-width: auto;
		width: 350px;
	}
	font-size: 12px;
	line-height: normal;
	color: $color_dark;
	@include box-shadow(0 0 10px $color_gray_70);
	@media (max-width: 574px){
		background: $color_white;
		position: relative; top: auto; left: auto;
		right: 0;
		z-index: 2;
	}

	display: none;

	.autocompliter__message {
		padding: 8px 12px;
		font-size: 12px;
	}

	.autocompliter__list {
		margin: 0; padding: 0; list-style: none;
		li {
			position: relative;
			z-index: 1;
			padding: 6px 12px;
			@media (max-width: 991px){
				//border-top: 1px solid lighten($color_dark, 85%);
				border-top: 1px solid $color_gray_20;
				&:first-child { border: none; }
			}
			@media (max-width: 574px){
				border-top: 1px solid $color_gray_10;
				&:first-child { border: none; }
			}
			&:not(.autocompliter__message){
				//@media (min-width: 768px){ min-width: 420px; }
			}
			.img {
				background: none;
				width: 60px;
				float: left;
				padding: 0;
				@media (min-width: 768px) {
					background: $color_gray_20;
					position: absolute; top: 0; right: 100%;
					float: none;
					width: 150px;
					margin-right: 4px;
					padding: 4px;
					visibility: hidden;
					opacity: 0;
				}
				@include transition();

				img {
					display: block;
					width: 100%;
				}
			}
			.txt {
				@media (max-width: 767px){
					margin-left: 70px;
					.icobox {
						padding-left: 0;
						.ico { display: none; }
					}
				}
				@media (max-width: 574px){
					color: $color_gray_60;
				}
				.name {
					@media (max-width: 574px){
						display: block;
						color: $color_dark;
					}
				}
			}
			.tbl {
				@media (max-width: 767px){
					margin-left: 70px;
				}
			}

			.highlight {
				background: lighten($color_yellow, 25%);
				padding: 0;
			}

			&:hover {
				//background: $color_gray_20;
				.img {
					visibility: visible;
					opacity: 1;
				}
			}
			&.autocompliter__h {
				background: #dde4ec;
				font-size: 12px;
				//font-weight: bold;
				text-transform: uppercase;
				//@media (min-width: 768px) { display: none; }
			}
			&.autocompliter__group {
				&:hover { background: $color_gray_20; }
			}
			&.autocompliter__item {
				&:hover { background: $color_gray_20; }
			}
			&.autocompliter__link {
				.txt { color: $color_dark; }
				&:hover { background: $color_gray_20; }
			}
			&.autocompliter__specitem {
				//max-width: 720px;
				.tbl {
					table {
						width: 100%;
						@media (min-width: 992px){ text-align: right; }
						th {
							@media (min-width: 992px){
								background: $color_gray_20;
								//@include linear-gradient(0deg, transparent, $color_gray_30);
								background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(179,179,179,1) 100%);
								background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(179,179,179,1) 100%);
								background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(179,179,179,1) 100%);
								filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#b3b3b3', GradientType=0 );
							}
							padding: 2px 4px;
							width: 33%;
							text-align: inherit;
							&:first-child { width: auto; }
						}
						td {
							padding: 2px 4px;
							width: 33%;
							&:first-child { width: auto; }
						}
					}
				}
				@media(min-width: 992px){
					width: 720px;
					.txt { float: left; width: 60%; }
					.tbl {
						float: left; width: 40%;
						margin-top: -21px;
						table {
							th { visibility: hidden; }
						}
					}
				}
				@media(max-width: 991px){
					.tbl {
						padding-top: 5px;
						table {
							th {
								font-size: 10px;
							}
						}
					}
				}

				&.autocompliter__first {
					@media(min-width: 992px){
						padding-top: 26px;
						.tbl {
							table {
								th { visibility: visible; }
							}
						}
					}
				}

				&:hover { background: $color_gray_20; }
			}
		}
	}
}

.modal-global-option {
	display: flex;
	flex-direction: column;
	height: 100%;
	font-size: 16px;

	.mgo-headline {
		padding-right: 24px;
		font-size: 24px;
		font-weight: bold;
		/*&:not(:last-child){
			margin-bottom: 16px;
		}*/
	}
	.mgo-search {
		margin-top: 16px;
		display: flex;
		.form-control {
			flex-grow: 1;
			height: 40px;
			font-size: 16px;
		}
		.btn {
			margin-left: 6px;
			padding: 10px 16px !important;
		}
		&.mgo-search_hidden {
			position: relative;
			overflow: hidden;
			width: 0;
			height: 0;
			margin: 0;
		}
	}
	.mgo-body {
		position: relative;
		overflow: hidden;
		overflow-y: auto;
		//flex-grow: 1;
		//max-height: 500px;
		margin: 0 -24px;
		@media(max-width: 575px){
			margin: 0 -12px;
		}
	}
	.mgo-list {
		margin: 0;
		padding: 12px 0 0 0;
		list-style: none;
		font-size: 16px;
		line-height: 1;
		& > li {
			&.sep {
				background: #d9d9d9;
				position: relative;
				overflow: hidden;
				display: block;
				height: 1px;
				margin-top: 8px;
				margin-bottom: 8px;
			}
		}
	}
	.mgo-item, a.mgo-item {
		border: 0;
		display: flex;
		align-items: flex-start;
		padding: 8px 24px;
		color: #333;
		line-height: 20px;
		@media(max-width: 575px){
			padding: 8px 12px;
		}
		.item__icon {
			position: relative;
			min-width: 36px;
			min-height: 22px;
			font-weight: bold;
			color: $blue;
			img {
				position: absolute; top: 50%; left: 0;
				display: block;
				width: 20px;
				height: 16px;
				@include transform(translateY(-50%));
			}
		}
		.item__label {
			display: flex;
			.label__name {}
			.label__description {
				flex-grow: 1;
				color: #9b9b9b;
			}
			&._lang {
				flex-wrap: wrap;
				.label__name {
					margin-right: 8px;
				}
				.label__description {}
			}
			&._currency {
				.label__name {
					min-width: 48px;
				}
				.label__description {}
			}
			&._delivery {
				.label__description {
					display: none;
				}
			}
		}
		&.active {
			background: $blue;
			color: $white;
			.item__icon {
				color: $white;
			}
			.item__label {}
			.item__description {
				color: rgba(255,255,255,.75);
			}
		}
		&:hover,
		&:focus {
			background: #e9e9e9;
			color: $blue;
			.item__icon {
				color: $blue;
			}
			.item__description {
				color: #9b9b9b;
			}
		}
	}

	.form-group {
		.form-field {
			.btn {
				padding: 8px 12px !important;
				font-size: 16px;
			}
		}
	}

	.sortix-nothing {
		padding-top: 16px;
	}
}

#modal-option-lang,
#modal-option-currency,
#modal-option-delivery {
	.modal-dialog {
		@media(max-width: 449px){
			margin: 0 !important;
			padding: 0 !important;
		}
	}
	.modal-content {
		@media(max-width: 449px){
			flex-grow: 1;
			min-height: 100%;
			@include border-radius(0);
		}
	}
}

.autocompliter-image {
	@media (min-width: 768px){
		background: #ccc;
		position: absolute;
		z-index: 9999;
		width: 150px;
		padding: 4px;
		img {
			display: block;
			width: 100%;
		}
	}
}