@charset "utf-8";

/* CSS Document */
header { width: 100%; height: 110px; position: fixed; top: 0; left: 0; z-index: 999; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; padding: 0px 3%;}

/****/
.header_icon_area{ width: 100%; margin: auto; position: relative; display: flex; flex-flow: row wrap; align-items: flex-end; justify-content: space-between; transition: padding-top 0.3s;}



.header-area .logo_area{flex: 1 auto;}
.header-area .logo{ max-width: 160px; text-align: center; margin-top: 30px;}
.header-area .logo a { color: var(--blue); font-size: 80%; font-weight: 600;}
.header-area .logo a:hover, .header-area .logo a:focus{ color: var(--bluehover);}
.header-area .logo img{ height: 60px; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s;}
.header-area .logo span{ display: block;}

/****/
.nav-container { width: 62%; margin:0px 0px 0px auto; -moz-transition: margin-top 0.3s; transition: margin-top 0.3s;}
.header_other_link { z-index: 3; display: flex; padding-left: 1%; position: relative;}
.header_other_link::before{ position: absolute; content: ""; width: 1px; height: 30px; background-color:#babcbb; left: 0px; top: 0px;}
.cart .bi { color: var(--blue); font-size: 28px; transition: all 0.4s ease-out 0s;}
.lang_icon .bi { color: var(--blue); font-size: 30px; transition: all 0.4s ease-out 0s; line-height: 30px;}
.cart .bi:hover, .lang_icon .bi:hover { opacity: 0.5;}


/****/
.search{width: 60px;}
.cart { width: 68px; line-height: 30px; position: relative; cursor: pointer;}
.lang_icon { width: 35px; line-height: 30px; position: relative; cursor: pointer;}
.lang_icon_photo{ cursor:pointer;}

.lang-list{ position: absolute;	display: none; width: 120px; top:55px; right: -30px;}
.lang-list a{ font-size: 90%; display: block; background: #fbfafa; text-align: center; color: var(--blue); padding:12px 15px 6px 15px; line-height: 20px; border-bottom: 1px solid #2c2c2c; }
.lang-list a:hover, .lang-list a:focus{	text-decoration: none; color: var(--bluehover);}

.cart span{	position: absolute;  display: block; width: 22px; height: 22px; border-radius: 100%; background: #050505; line-height: 24px; text-align: center; font-size: 13px; color: #fff; top: 0px; right:30px; font-weight: 500;}

.nav-mobile{ display: none; width: 50px; height: 50px; position: relative;}
.nav-mobile a{ display: block;	padding-top: 25px;}
span.menu_style{ position: absolute; color: #352617; font-size: 14px; font-weight: 500; bottom: 2px; left: 4px;	line-height: initial;}


/****/

/****/
header.shrink { height: 100px; background-color: #ffffff; border-bottom: 1px solid #050505;}
header.shrink .logo img { height: 45px;}
header.shrink .search .search-bar{ margin:-5px auto auto auto; transition: margin 0.3s;}

/****/


/****/
@media all and (max-width: 1280px){	
	.search{ width: 50px;}
	.cart{ width: 60px;}
	.cart span{ right: 22px;}
}
@media all and (max-width: 1024px){
	header{ padding: 0px 1.5%;}
	.header-area .logo img{ height: 50px;}
	.search{ width: 40px;}
	.cart{ width: 50px;}
	.cart span{ right: 15px;}
}
@media all and (max-width: 991px){
	header{ height: 80px;}
	header.shrink{ height: 80px;}
	.header-area .logo{ margin-top: 0px!important;}
	.header_other_link{ margin-top: 25px;}
	header.shrink .header_other_link{ margin-top: 25px;}
	header.shrink .logo{margin-top: -58px!important;}
	.lang_icon .bi{ font-size: 28px;}
	strong.menu_style{ display: block; position: absolute; color: var(--green); font-size:80%; font-weight: 400; bottom: -8px; line-height: initial; right: 0px; left: 0px; margin: auto; text-align: center;}
	
	.nav-mobile { display: block; }
	.header_icon_area{ width: 100%;}
	.lang_icon{border-radius: 10px;}
}
@media all and (max-width: 540px){
	.header_other_link{ padding-left: 3%;}
}
@media all and (max-width: 393px) {
	header{ height: 70px;}
	header.shrink{ height: 70px;}
	.header_other_link{margin-top: 17px;}
	header.shrink .header_other_link{margin-top: 17px;}
	.header-area .logo{ max-width: 100px; margin-top: -60px !important; margin-left: 1%;}
	header.shrink .logo img{ height: 50px;}
}
@media all and (max-width:280px){
	header{ height: 60px;}
	header.shrink{ height: 60px;}
	.header-area .logo{ max-width: 75px;}
	
}
@media all and (max-width:240px){
	.header-area .logo{ max-width: 50px; margin-top: -60px !important; margin-left: 1%;}
	.search{ width: 35px;}
	.cart{ width: 40px;}
	.cart span{right: 5px;}
}