.header-wrapper {
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header {
	display: flex;
	padding-left: 24px;
	padding-right: 16px;
	height: 96px;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
}

.search-wrapper {
	position: absolute;
	top: 100%;
	width: 100%;
	left: 0;
	background-color: #f8f8f8;
	height: 100px;
	display: none;
}
.search-wrapper.show {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.search-wrapper input {
	border: 1px solid #888;
	border-radius: 100px;
	padding: 8px 16px;
	font-size: 18px;
}

.search-close {
	cursor: pointer;
	font-size: 36px;
	user-select: none;
	color: #888;
}

.menuIcon {
	display: none;
}

.logo {
	max-width: 176px;
}
.logo input {
	width: 100%;
}

#menuNewWrapper {
	flex: 1;
}

.menuNew {
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: 18px;
	padding: 0 5%;
}
.menuNew a {
	text-decoration: none;
	color: var(--color-font);
}

.menuNew a:nth-child(4) {
	width: 2px;
	height: 16px;
	background-color: #343434;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 24px;
}

.logotipHf {
	max-width: 160px;
	padding-right: 16px;
}
.logotipHf img {
	width: 100%;
}

.logotipStada {
	max-width: 144px;
}
.logotipStada img {
	width: 100%;
}

#searchField {
	width: 20px;
	cursor: pointer;
	/*display: none;*/
}
.txbSearch {
	
}

#langList {
	position: absolute;
	display: none;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background-color: #f6f6f6;
	z-index:10;
	border-radius: 12px;
}

.langItem {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
}
.langItem img {	
	width: 24px;
	padding-right: 4px;
}
.langItem a {
	padding: 16px 0;
	width: 40px;
	color: var(--color-font);
}

#langMenu {
	position: relative;
	cursor: pointer;
	user-select: none;
	display: flex;
	padding-right: 16px;
}
#langMenu > img {
	display: none;
}
#langMenu:hover #langList {
	display: block;
}

.header-lang + span {
	position: relative;
	width: 12px;
}
.header-lang + span:before {
	content: '';
	position: absolute;
	top: 8px;
	left:50%;
	width: 6px;
	height: 6px;
	transform: rotate(-45deg);
	border-left: 1px solid var(--color-font);
	border-bottom: 1px solid var(--color-font);
}

.menuIcon {
	margin-right: 16px;
}
.menuIcon img {
	width: 32px;
}

/********************************************/

#menuWrapper
{
    position:fixed;
    left:-100%;
	top: 0;
    height:100%;
    z-index:100000;
    transition:all 0.3s;
    width:100%;
    max-width:272px;
	background-color:#f5f5f5;
}

#menuClose
{
	position: absolute;
	top: 0;
	right: 0;
    padding:8px 16px;
    text-align:center;
    font-size:40px;
    width:40px;
    max-height:40px;
/*	height:10%;*/
    cursor:pointer;
	color:#666;
	z-index: 10001;
}

#menuLang
{
	/*display:none;*/
	position:absolute;
	padding:20px;
	top:0px;
/*	height:74px;*/
	width:64px;
	left:0px;
	text-align:center;
	/*border-right:1px solid #ddd;*/
	z-index:10000000;
}

#menuLang #langArrow
{
	right:64px;
	display:none;
	cursor:pointer;
}

#menuLang a
{
	
}

#menuLang img
{
	vertical-align:middle;
}

#menu
{
    position:absolute;
    width:96%;
	padding:64px 2% 24px 2%;
    border-top:1px solid #eee;
	overflow:none scroll;
	z-index:10000;
}

.menuItem
{
    text-align:center;
    padding:12px 0 4px 0;
    font-size:18px;
    text-transform:uppercase;
    position:relative;
	z-index:100;
}
.menuItem a
{
    color:#666 !important;
}
.menuItem:nth-child(4) {
	display: none;
}

.menuLine
{
	border-bottom:2px solid #ff9933;
    padding-bottom:8px;
	width:0;
	transition:width 0.3s;
	margin:auto;
}

.menuItem:hover  .menuLine
{
    width:32px;
}

.menuLineSelected
{
    border-bottom:2px solid #ff9933;
    width:32px;
    margin:auto;
	padding-bottom:8px;
}

#menuLangList
{
    top:60px;
    width:120px;
    text-align:center;
    left:0px;
    display:none;
    position:absolute;
    background-color:#f5f5f5;
    color:#666;
	z-index:100;
}

#menuSocial
{
    padding-top:40px;
    font-size:18px;
    text-align:center;
    color:#666;
    position:relative;
	opacity:0.8;
}

#menuSocialIcon
{

}

#menuSocialIcon ul
{
	text-align:center;
	list-style:none;
	padding:0;
	margin:0;
	padding-top:12px;
}

#menuSocialIcon li
{
	display:inline-block;
	padding:0;
	margin:0;
}

#menuSocialIcon div
{
	background-position:center;
	width:32px;
	height:28px;
}

#screenMask
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    display:none;
}

/********************************************/

@media only screen and (max-width: 1200px) {
	#menuNewWrapper {
		display: none;
	}
}

@media only screen and (max-width: 800px) {
	.header-right {
		display: none;
	}
	.headerLogotip {
		display: none;
	}
}