.header-top
{
	width: 100%;
	float: left;
	position: relative;
	background-color: var(--headertop-bgcolor);
	padding: 10px 0px;
	z-index: 3;
}
.header-sm
{
	width: auto;
	max-width: 33.3333333333%;
	float: left;
}
.header-sm a
{
	width: 15px;
	height: 15px;
	float: left;
	margin-right: 10px;
	-webkit-mask-size: 15px 15px !important;
}
.header-facebook
{
	background-color: var(--headertop-sm-fb-color);
}
.header-twitter
{
	background-color: var(--headertop-sm-tw-color);
}
.header-instagram
{
	background-color: var(--headertop-sm-ins-color);
}
.header-youtube
{
	background-color: var(--headertop-sm-yt-color);
}
.header-pinterest
{
	background-color: var(--headertop-sm-pin-color);
}
.header-contact
{
	width: auto;
	max-width: 33.3333333333%;
	float: left;
}
.header-contact a
{
	width: auto;
	float: left;
	color: var(--headertop-support-color);
	font-size: 12px;
	line-height: 16px;
}
.support-icon
{
	width: 15px;
	height: 15px;
	float: left;
	margin-right: 5px;
	background-color: var(--headertop-support-icon-color);
	-webkit-mask-size: 15px 15px !important;
}
.header-link
{
	width: auto;
	max-width: 33.3333333333%;
	float: right;
}
.header-link a,
.header-link span
{
	float: left;
	font-size: 12px;
	color: var(--headertop-menu-color);
	margin-left: 15px;
}
.header-link a:hover
{
	color: var(--headertop-menu-color-hover);
}
.header
{
	width: 100%;
	height: 64px;
	float: left;
	position: relative;
	background-color: var(--header-bgcolor);
	padding: 10px 0px;
	z-index: 4;
}
.header .container
{
	height: 100%;
}
.logo
{
	width: 20%;
	float: left;
}
.logo a
{
	width: 100%;
	height: 42px;
	float: left;
}
.logo img
{
	width: 100%;
	height: 100%;
	float: left;
	object-fit: contain;
	object-position: left;
	padding-right: 20px;
}
.search
{
	width: 50%;
	float: left;
}
.search form
{
	width: 100%;
	height: 100%;
	float: left;
}
.search form label
{
	width: 100%;
	float: left;
	position: relative;
}
.search form input[type=text]
{
	width: 100%;
	height: 42px;
	float: left;
	margin: 0px;
	border: none;
	outline: none;
	border-radius: 6px;
	padding: 10px 40px 10px 15px;
	background-color: var(--header-search-bg);
	color: var(--header-search-color);
}
.search form input[type=text]:-moz-placeholder,
.search form input[type=text]::placeholder
{
	color: var(--header-search-color);
}
.search button
{
	width: 20px;
	height: 20px;
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translate(0, -50%);
	background-color: transparent;
	border: none;
	outline: none;
	padding: 0px;
}
.search-icon
{
	width: 100%;
	height: 100%;
	float: left;
	background-color: var(--header-search-icon-color);
}
.user-btn
{
	width: 30%;
	float: left;
	margin-top: 12px;
}
.user-align
{
	width: auto;
	max-width: 100%;
	float: right;
}
.user-btn .user-align > li
{
	width: auto;
	float: left;
	position: relative;
	margin-left: 25px;
}
.user-btn .user-align > li:first-child
{
	padding-bottom: 15px;
}
.user-btn .user-align > li > a
{
	width: auto;
	float: left;
	color: var(--header-icon-text-color);
	font-size: 13px;
	line-height: 20px;
	font-weight: 600;
}
.user-btn i
{
	width: 20px;
	height: 20px;
	float: left;
	background-color: var(--header-icon-color);
	margin-right: 5px;
}
.user-btn span
{
	float: left;
}
.user-btn .user-align > li ul
{
	display: none;
}
.user-btn li ul li
{
	width: 100%;
	float: left;
}
.user-btn li ul a:not(.login-btn, .signup-btn)
{
	width: 100%;
	float: left;
	font-weight: 600;
	color: var(--header-icon-text-color);
	padding: 6px 0px;
}
.user-btn li ul a i
{
	width: 15px;
	height: 15px;
	-webkit-mask-size: 15px 15px !important;
	margin-top: 2px;
}
.cart-count
{
	width: 16px;
	height: 16px;
	border-radius: 100%;
	text-align: center;
	background-color: var(--header-cart-count-bgcolor);
	margin: 2px 0px 0px 4px;
	line-height: 15px;
	font-size: 11px;
	color: var(--header-cart-count-color);
}
.login-btn
{
	width: 100%;
	height: 34px;
	float: left;
	background-color: var(--header-login-bgcolor);
	border: 1px solid var(--header-login-border-color);
	line-height: 34px;
	text-align: center;
	font-size: 12px;
	border-radius: 6px;
	color: var(--header-login-color);
	margin-bottom: 10px;
}
.signup-btn
{
	width: 100%;
	height: 34px;
	float: left;
	background-color: var(--header-signup-bgcolor);
	border: 1px solid var(--header-signup-border-color);
	line-height: 34px;
	text-align: center;
	font-size: 12px;
	border-radius: 6px;
	color: var(--header-signup-color);
}
.user-btn + .search
{
	display: none;
}
.hamburger
{
	width: 20px;
	height: 20px;
	float: left;
	margin: 10px 10px 0px 0px;
	display: none;
}
.hamburger i
{
	width: 100%;
	height: 100%;
	float: left;
	-webkit-mask-size: 100% 100% !important;
	background-color: var(--mobil-menu-hamburger-color);
}

/*--------------HOVER SUPPORTED DEVICES--------------*/
@media (hover: hover)
{
	.header-facebook:hover
	{
		background-color: var(--headertop-sm-fb-color-hover);
	}
	.header-twitter:hover
	{
		background-color: var(--headertop-sm-tw-color-hover);
	}
	.header-instagram:hover
	{
		background-color: var(--headertop-sm-ins-color-hover);
	}
	.header-youtube:hover
	{
		background-color: var(--headertop-sm-yt-color-hover);
	}
	.header-pinterest:hover
	{
		background-color: var(--headertop-sm-pin-color-hover);
	}
	.header-contact a:hover
	{
		color: var(--headertop-support-color-hover);
	}
	.header-contact a:hover .support-icon
	{
		background-color: var(--headertop-support-icon-color-hover);
	}
	.user-btn .user-align > li:hover ul
	{
		width: 196px;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translate(-50%, 0);
		background-color: var(--header-login-menu-bgcolor);
		box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.07);
		border: 1px solid var(--header-login-menu-border-color);
		border-radius: 6px;
		padding: 15px;
		display: block;
	}
	.user-btn li:hover ul:before
	{
		content: "";
		width: 10px;
		height: 10px;
		position: absolute;
		top: -2px;
		left: 50%;
		background-color: var(--header-login-menu-bgcolor);
		transform: rotate(45deg) translate(-50%, 0);
		border-top: 1px solid var(--header-login-menu-border-color);
		border-left: 1px solid var(--header-login-menu-border-color);
	}
	.user-btn .user-align > li:hover > a
	{
		color: var(--header-icon-text-color-hover);
	}
	.user-btn .user-align > li:hover > a > i
	{
		background-color: var(--header-icon-color-hover);
	}
	.user-btn li ul a:hover:not(.login-btn, .signup-btn)
	{
		color: var(--header-icon-text-color-hover);
	}
	.user-btn li ul a:hover:not(.login-btn, .signup-btn) i
	{
		background-color: var(--header-icon-color-hover);
	}
}
@media only screen and (max-width: 991px)
{
	.header-top
	{
		display: none;
	}
	.header
	{
		height: 94px;
		padding: 0px 10px 10px;
		border-bottom: 1px solid var(--menu-border-color);
	}
	.logo
	{
		width: 50%;
	}
	.logo a
	{
		width: calc(100% - 30px);
	}
	.user-btn
	{
		width: 50%;
	}
	.user-btn span
	{
		display: none;
	}
	.user-btn .user-align > li
	{
		margin-left: 10px;
	}
	.user-btn .user-align > li:first-child
	{
		padding-bottom: 0px;
	}
	.logo + .search
	{
		display: none;
	}
	.user-btn + .search
	{
		display: block;
	}
	.search
	{
		width: 100%;
	}
	.hamburger
	{
		display: block;
	}
}