//common.css
.section-header {
	background: $color_dark url(../images/header-bg.png) repeat top left;
	position: relative;
	z-index: 888;
	min-height: 44px;
	color: $color_white;

	a:not(.btn) { border: none; }

	.header-row {
		.header__a {
			@media (max-width: 574px){
				background: $color_dark;
				&:before {
					content: '';
					position: absolute; top: 44px; left: 0; right: 0;
					height: 1px;
					background: #FFED18;
					background: linear-gradient(90deg, #ED1818 60%, #FFFFFF 100%);
				}
			}
			@media (min-width: 575px){
				float: left;
				//width: 55%;
			}
		}
		.header__b {
			@media (min-width: 575px){
				float: right;
				//width: 45%;
			}
			@media (max-width: 574px){
				.dropbox-head { font-size: 18px; }
				.header__search-button { font-size: 18px; }
			}
			@media (max-width: 360px){
				.dropbox-head { font-size: 16px; }
				.header__search-button { font-size: 16px; }
			}
			/*@media (max-width: 359px){
				.dropbox-head { font-size: 14px; }
				.header__search-button { font-size: 14px; }
			}*/
		}
	}
	//
	.header__logo {
		position: relative;
		display: block;
		float: left;
		@media (max-width: 320px) {
			margin-left: -10px;
		}
		a, svg {
			display: block;
		}
	}
	.modal-backdrop {
		z-index: 888;
		@media (min-width: 560px){ display: none !important; }
	}
	.header__search {
		position: relative;
		float: left;
		width: 180px;
		padding: 7px;
		@media (min-width: 635px){ width: 240px; }
		@media (min-width: 992px){ width: 210px; }
		@media (min-width: 1200px){ width: 300px; }
		@media (min-width: 575px){
			.header-search__head {
				display: none;
			}
			form, .form {
				position: relative;
				border: 1px solid $color_dark;
				display: block; height: 30px;
				padding-right: 40px;
				input[type=text] {
					background: $color_white;
					border: none;
					display: block; width: 100%; height: 28px;
					margin: 0; padding: 0 32px 0 8px;
					&::-ms-clear {
						display: none;
					}
				}
				button, .button {
					background: $color_dark;
					border: none;
					position: absolute; top: 0; right: 0;
					width: 40px; height: 28px;
					padding: 4px 10px;
					fill: $color_white;
					//@include linear-gradient(180deg, $color_gray_80, $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 );
					&:hover {
						background: $color_gray_80;
					}
				}
			}
		}
		@media (max-width: 574px){
			position: fixed; top: 0; bottom: 0; left: 0; right: 0;
			overflow-y: auto;
			z-index: 999;
			width: auto;
			padding: 0;
			visibility: hidden;
			top: -100px;
			opacity: 0;
			@include transition();
			.header-search__box {
				background: $color_dark;
				position: relative;
				z-index: 2;
				padding: 0 8px 8px;
			}
			.mobile-search-open & {
				visibility: visible;
				top: 0;
				opacity: 1;
			}
			.header-search__head {
				position: relative;
				display: block;
				padding: 0 0 8px;
				a {
					position: absolute; top: 6px; right: 0;
					display: block;
					//width: 24px; height: 24px;
					i {
						background: $color_white;
						display: block; width: 18px; height: 18px;
						@include border-radius(2px);
						&:before {
							content: '';
							background: $color_gray_80;
							position: absolute; top: 50%; left: 50%;
							display: block; width: 16px; height: 4px;
							margin-top: -2px;
							margin-left: -8px;
							@include transform(rotate(45deg));
							@include border-radius(10px);
						}
						&:after {
							content: '';
							background: $color_gray_80;
							position: absolute; top: 50%; left: 50%;
							display: block; width: 16px; height: 4px;
							margin-top: -2px;
							margin-left: -8px;
							@include transform(rotate(-45deg));
							@include border-radius(10px);
						}
					}
				}
			}
			form, .form {
				position: relative;
				display: block;
				input[type=text] {
					background: $color_white;
					border: 1px solid #fff;
					display: block; width: 100%; height: 40px;
					margin: 0; padding: 0 8px 0 40px;
					@include border-radius(2px);
				}
				button, .button {
					background: none;
					border: none;
					position: absolute; top: 50%; left: 15px;
					display: block; width: 20px; height: 20px;
					margin-top: -9px;
					padding: 0;
					color: $color_dark;
					fill: $color_dark;
					&:hover {}
				}
			}
		}

		.header-search__input {
			position: relative;
			display: block;
			a.input-clear {
				display: none;
				position: absolute; top: 50%; right: 8px;
				width: 16px; height: 16px;
				margin-top: -8px;
				color: $color_gray_70;
				//@media (max-width: 574px){ top: 15px; right: 15px; }
				svg {
					display: block;
					width: 16px; height: 16px;
				}
				&:hover { color: $color_red; }

				&.spin {
					svg, img {
						visibility: hidden;
					}
					&: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); }
						}
					}
				}
			}
		}

		//autocompliter

		.header-search-closer {
			position: absolute; top: 0; bottom: 0; left: 0; right: 0;
			display: none;
			@media (max-width: 575px){ display: block; }
		}

		&.focus {
			.header-search__box {
				@include box-shadow(0 0 4px 2px $color_blue);
				//@include box-shadow(unquote("0 0 3px 1px #0d61ab, inset 0 1px 2px 0 #0d61ab"));
			}
		}

		&.active {
			.header-search__input {
				a.input-clear { display: block; }
			}
		}

	}
	.header__lang {
		float: left;
		position: relative;
		font-size: 12px;
		line-height: 1.5;
		svg {
			@include border-radius(2px);
		}
		.dropbox {
			.dropbox-head {
				height: 44px;
				padding: 14px 25px 0 10px;
				.flag {
					position: relative;
					display: inline-block;
					width: 20px; height: 15px;
					img {
						position: absolute; top: 50%; left: 50%;
						width: 20px; height: 15px;
						max-width: 100%;
						max-height: 100%;
						@include transform(translateX(-50%) translateY(-50%));
						@include border-radius(2px);
					}
				}
				.fa {
					position: absolute; top: 14px; right: 10px;
					font-size: 16px;
					color: $color_white;
				}
				@media (max-width: 574px){
					padding: 14px 20px 0 7px;
					.fa {right: 5px;}
				}
			}
			.dropbox-body {
				@media (max-width: 767px){
					left: auto;
					right: 0;
				}
				ul {
					margin: 0; padding: 0; list-style: none;
					min-width: 150px;
					li {
						a {
							position: relative;
							display: block;
							padding: 4px 8px 4px 40px;
							font-size: 16px;
							color: $color_dark;
							text-decoration: none;
							svg, img {
								position: absolute; top: 50%; left: 10px;
								width: 20px; height: 15px;
								margin-top: -7px;
							}
							&:hover {
								background: $color_gray_30;
							}
						}
					}
				}
			}
			&:hover {
				.dropbox-head {
					.fa {
						color: $color_dark;
					}
				}
			}
		}
	}
	.header__contacts {
		float: left;
		@media (max-width: 991px){ display: none; }
		.dropbox {
			.dropbox-head {
				padding: 7px 5px;
				span {
					background: $color_gray_10;
					display: block;
					padding: 0 5px;
					font-size: 14px;
					line-height: 30px;
					color: $color_dark;
					@include border-radius(10px);
				}
				.fa-phone {
					position: relative;
					top: -1px;
					display: inline-block;
					vertical-align: middle;
					font-size: 22px;
				}
			}
			.dropbox-body {
				min-width: 240px;
				ul {
					margin: 0; padding: 0; list-style: none;
					li {
						padding: 10px;
						&.link {
							padding: 0;
							a {
								display: block;
								padding: 10px;
								color: $color_dark;
								text-decoration: none;
								&:hover {
									background: $color_gray_20;
								}
							}
							.icobox {
								.ico {
									top: 2px;
									margin-top: 0;
								}
							}
						}
					}
				}
			}
			&:hover {
				.dropbox-head {
					color: $color_dark;
				}
			}
		}
	}
	.header__menu {
		@media (min-width: 575px){ display: none; }
		float: left;
		width: 30%;
		.dropbox {
			.dropbox-head {
				display: inline-block;
				padding: 0 5px;
				line-height: 44px;
				color: $color_white;
			}
			.dropbox-body {
				background: $color_white;
				width: 220px;
				ul {
					margin: 0; padding: 0; list-style: none;
					li {
						border-top: 1px solid $color_gray_10;
						&:first-child {border: none;}
						a {
							position: relative;
							display: block;
							padding: 10px 20px 10px 35px;
							font-size: 16px;
							color: $color_dark;
							i {
								position: absolute; top: 0.85em; left: 10px;
								display: block; width: 16px; height: 16px;
								font-size: 1em;
							}
							&:hover {
								background: $color_gray_05;
							}
						}
					}
				}
			}
			&:hover, &.open {
				.dropbox-head {
					background: $color_white;
					color: $color_dark;
				}
			}
		}
	}
	.header__search-button {
		float: left;
		width: 30%; min-height: 1px;
		text-align: center;
		@media (min-width: 575px){ display: none; }
		& > a {
			display: inline-block;
			padding: 0 5px;
			line-height: 44px;
			color: $color_white;
			text-align: left;
			&:hover {
				background: $color_gray_10;
				color: $color_dark;
			}
		}
	}
	.header__cart {
		float: left;
		max-width: 130px;
		@media (max-width: 574px){
			float: right;
			//width: 40%;
			text-align: right;
		}
		.dropbox {
			.dropbox-head {
				padding: 0 20px 0 5px;
				//font-size: 12px;
				line-height: 44px;
				@media (max-width: 991px){
					//display: inline-block;
				}
				.icobox {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					min-height: 44px;
					.name {
						@media (max-width: 767px){display: none;}
					}
				}
				.badge {
					background: $color_white;
					position: absolute; top: 5px; right: 5px;
					min-width: 14px;
					min-height: 14px;
					padding: 0 4px;
					font-size: 10px !important;
					line-height: 14px !important;
					font-weight: normal;
					color: $color_dark;
				}
				.visible-xxs {
					display: block !important;
					@media (min-width: 575px){
						display: none !important;
					}
				}
			}
			.dropbox-body {
				left: auto;
				right: 0;
				min-width: 250px;
				text-align: left;
				@media (max-width: 574px){
					width: 285px;
				}
				.header-cart-menu {
					margin: 0; padding: 0; list-style: none;
					& > li {
						border-top: 1px solid $color_gray_20;
						padding: 10px 15px;
						&:first-child {
							border-top: none;
						}
						&.link {
							position: relative;
							padding: 0;
							@media (min-width: 575px){ min-width: 300px; }
							.remover {
								background: $color_gray_30;
								position: absolute; top: 5px; right: 5px;
								z-index: 77;
								display: block; width: 20px; height: 20px;
								margin: 0; padding: 0;
								@include border-radius(2px);
								@media (min-width: 768px) {
									display: none;
								}
								&:before {
									content: '';
									background: $color_gray_10;
									position: absolute; top: 50%; left: 50%;
									display: block; width: 16px; height: 4px;
									margin-top: -2px;
									margin-left: -8px;
									@include transform(rotate(45deg));
									@include border-radius(10px);
								}
								&:after {
									content: '';
									background: $color_gray_10;
									position: absolute; top: 50%; left: 50%;
									display: block; width: 16px; height: 4px;
									margin-top: -2px;
									margin-left: -8px;
									@include transform(rotate(-45deg));
									@include border-radius(10px);
								}
								&:hover {
									background: $color_red;
									//&:before, &:after { background: $color_white; }
								}
							}
							.img {
								background: $color_gray_20;
								@media (min-width: 768px) {
									position: absolute; top: 0; right: 100%;
									width: 150px;
									margin-right: 4px;
									padding: 4px;
									visibility: hidden;
									opacity: 0;
								}
								@media (max-width: 767px){
									float: left;
									width: 50px;
									padding: 1px;
									margin: 12px 0 0 10px;
								}
								//@media (max-width: 767px){ display: none; }
								@include transition();
								img {
									display: block;
									width: 100%;
								}
							}
							.txt {
								padding: 10px 15px;
								color: $color_dark;
								@media (max-width: 767px){ margin-left: 60px; }
							}
							&:hover {
								background: $color_gray_20;
								//text-decoration: underline;
								.name { text-decoration: underline; }
								.img {
									visibility: visible;
									opacity: 1;
								}
							}
						}
						&.last {
							//padding: 10px 15px 15px;
							//text-align: right;
						}
					}
				}
				.pull-right {
					margin-left: 10px;
				}
			}
			&:hover, &.open {
				.dropbox-head {
					color: $color_dark;
					.badge {
						background: $color_dark;
						color: $color_white;
					}
				}
			}
		}
	}
	.header__userarea {
		position: relative;
		float: left;
		@media (max-width: 574px){
			position: absolute; top: 0; right: 0;
		}
		.userarea-cta {
			position: absolute; top: 100%; right: 8px;
			z-index: 9999;
			width: 220px;
			padding-top: 8px;
			&:before {
				content: '';
				position: absolute; top: -8px; right: 20px;
				border-width: 8px 6px;
				border-style: solid;
				border-color: transparent;
				border-bottom-color: $blue;
			}
			.userarea-cta__body {
				background: $blue;
				padding: 12px 16px;
				font-size: 12px;
				line-height: 1.2;
				color: $white;
				@include border-radius(3px);
			}
			.dismiss {
				padding-top: 8px;
				span {
					border-bottom: 1px dashed $white;
					display: inline-block;
					&:hover {
						border-bottom-color: transparent;
						cursor: pointer;
					}
				}
			}
		}
		.dropbox {
			.dropbox-head {
				padding: 0 5px;
				//font-size: 12px;
				line-height: 44px;
				.icobox {
					overflow: hidden;
					white-space: nowrap;
					//text-overflow: ellipsis;
					max-width: 100px;
					min-height: 44px;
					.name {
						position: relative;
						overflow: hidden;
						display: block;
						margin-right: 16px;
					}
					.fa-caret-down {
						position: absolute; top: 50%; right: 0;
						display: block; height: 16px;
						line-height: 16px;
						margin-top: -8px;
					}
					@media (min-width: 575px) and (max-width: 767px){
						padding: 0;
						width: 24px;
						.name { display: none; }
						.fa-caret-down { display: none; }
					}
					@media (min-width: 380px) and (max-width: 574px){
						max-width: 120px;
					}
					@media (min-width: 320px) and (max-width: 379px){
						max-width: 60px;
						padding: 0;
						.ico { display: none; }
					}
					@media (max-width: 319px){
						padding: 0;
						width: 24px;
						.name { display: none; }
						.fa-caret-down { display: none; }
					}
				}
			}
			.dropbox-body {
				left: auto;
				right: 0;
				min-width: 300px;
				.header-user-menu {
					margin: 0; padding: 0; list-style: none;
					& > li {
						padding: 10px 15px;
						&:first-child {
							padding: 15px 15px 10px;
						}
						a, .btn-link {
							color: $color_dark !important;
							text-decoration: none;
							&:hover {
								text-decoration: underline;
							}
						}
						&.link {
							padding: 0;
							a {
								display: block;
								padding: 10px 15px;
								color: $color_dark;
								text-decoration: none;
								&:hover {
									background: $color_gray_20;
								}
							}
						}
					}
				}
			}
			&:hover {
				.dropbox-head {
					color: $color_dark;
				}
			}
		}
	}

	&.short {
		.header__menu { display: none; }
		.header__search-button { display: none; }
		@media(max-width: 575px){
			.header__cart {
				display: none;
			}
		}
	}
}


/* Legacy ??? */
.float-notify {
	.float-notify__body {
		position: relative;
		@include transition();
		@media (max-width: 991px){
			.container { width: auto; padding: 0; }
		}
		&:not(.fix){
			.container { width: auto; padding: 0; }
		}
		&.fix {
			@media (min-width: 992px){
				position: fixed; top: 0; left: 0; right: 0;
				z-index: 777;
				.float-notify__bg {
					background: $color_white;
					position: relative;
					padding: 8px;
					padding-left: calc(25% + 30px - 10px);
					&:before {
						content: '';
						position: absolute; top: 100%; left: 0; right: 0;
						height: 5px;
						//@include linear-gradient(0deg, transparent, $color_gray_20);
						background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(204,204,204,1) 100%);
						background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(204,204,204,1) 100%);
						background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(204,204,204,1) 100%);
						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#cccccc', GradientType=0 );
					}
				}
			}
		}
	}
}