@charset "utf-8";

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

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

.header-area .logo_area{flex: 1 auto;}
.header-area .logo img{ height: 58px; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s;}


/****/
.header_other_link{  z-index: 3; display: flex; }
.header_other_link .bi { color: #fff; font-size: 24px; transition: all 0.4s ease-out 0s;}
.header_other_link .bi:hover { opacity: 0.5;}


/****/
.lang_icon, .cart{ width: 45px; border-radius: 7px;	line-height: 42px; transition: line-height 0.3s; position: relative; background: var(--green); text-align: center;}
.lang_icon_photo{ cursor:pointer;}

.lang-list{ position: absolute;	display: none; width: 110px; top:55px; transition: top 0.3s; right: -30px;}
.lang-list a{ font-size: 90%; display: block; background: var(--green); text-align: center; color: #fff; padding:12px 10px 6px 10px; line-height: 20px; border-bottom: 1px solid #a8d5b5; }
.lang-list a:hover, .lang-list a:focus{	text-decoration: none; background-color: var(--greenhover);}

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

.nav-mobile{ display: none; width: 45px; height: 45px; position: relative; margin-left: 10px;}
.nav-mobile a{ display: block;	padding-top: 25px;}
span.menu_style{ position: absolute; color: #352617; font-size: 80%; font-weight: 500; bottom: 0px; left: 5px; text-transform: uppercase; line-height: initial;}


/****/

/****/
header.shrink { height: 84px; background-color: #ffffff; box-shadow: 0px 0px 10px #ccc;}
header.shrink .logo img { height: 50px;}

header.shrink .header_icon_area{ padding-top: 15px;}
header.shrink .lang-list{ top: 40px;}
header.shrink .lang_icon, header.shrink .cart{ line-height: 34px;}
header.shrink .header_other_link .bi { font-size: 20px;}
header.shrink .mobile_nav{top: 0px;}
header.shrink .mobile_nav_close{ top: 28px;}

/****/

/****/
@media all and (max-width: 991px){
	header, header.shrink, header .bg_style, header.shrink .bg_style { height: 80px;}
	header nav { width: 100%; padding: 80px 0px 0px 0px; }
	.nav-mobile { display: block; }
	.header_icon_area { width: 100%; margin: auto; padding: 15px 0px;}
	.header-area .logo_area{ margin-left: 3%; z-index: 9;}
	.header_other_link{ margin-right: 3%;}
	.lang_icon{ width: 40px; height: 40px; line-height: 38px;}
	.nav-container { width: 100%; margin: auto; right: inherit; top: 0px;}
}
@media all and (max-width: 390px){
	span.menu_style{bottom: -4px;}
	.header-area .logo img, header.shrink .logo img{ height: 40px;}
}
@media all and (max-width:280px){
	header, header.shrink, header .bg_style, header.shrink .bg_style { height: 60px;}
	.header_icon_area{ padding: 10px 0px;}
	header.shrink .header_icon_area{ padding: 10px 0px;}
	.header-area .logo img , header.shrink .logo img{ height: 35px;}
	.lang_icon { width: 35px; height: 35px; line-height: 35px;}
	.header_other_link .bi, header.shrink .header_other_link .bi{font-size: 20px;}
	header .lang_icon, header .cart, header.shrink .lang_icon, header.shrink .cart{ line-height: 32px;}
	span.menu_style { bottom: 3px;left: 4px;}
	header nav{ padding-top: 60px;}
}