/* headroom */
header{ position: fixed; top:0; height: 120px; z-index: 9999999; margin: 0px; padding: 0px; width: 100%; transition: all .5s;  }
.header{ margin: 0px; padding: 0px; height: 120px; /*overflow: hidden;*/ transition: all .5s; }
.headroom{ z-index: 9999999; position: fixed; height: 120px; top: 0; left: 0; right: 0; box-shadow: 0px 0px 5px rgba(0,0,0,0); background-color: transparent; }
.headroom--pinned { top: 0px; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); background-color: #000; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.headroom--unpinned { top: -170px; box-shadow: 0px 0px 5px rgba(0,0,0,0); background-color: transparent;  -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.headroom--pinned #switchBtnArea #switchBtn{ position: fixed; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.headroom--unpinned #switchBtnArea #switchBtn{ position: absolute; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.headroom--top { background-color: transparent;  /*background-color: rgba(25,57,100,.9); */}
.headroom--not-top { background-color: #83bccf; }
.headroom--top .TopMenuBox{ margin-top: 0px!important;/*overflow: hidden;*/ }
.headroom--pinned .TopMenuBox{ margin-top: 0px; }
.headroom--not-top .TopMenuBox{ margin-top: 0px!important; transition: all .5s; }

.AlumiHeader .headroom--top { /*background-color: transparent; */ background-color: rgba(25,57,100,.9); }
.AlumiHeader .headroom--not-top { background-color: rgba(25,57,100,.9)!important; }

/* TopMenu */
.TopMenu{ max-width: 1160px; height: auto; /*overflow: auto;*/ margin: auto; padding: 0; }
.TopMenuBox{ width: auto; height: 120px; /*overflow: hidden;*/ margin: auto; display: flex; align-items: center; }
.LogoTop{ flex: 1; justify-content: flex-start; max-width: 200px; }
.LogoTop a{ display: block;}
.LogoTop img{ width:100%; height: auto; }
.LogoNav{ display: none;}
.MenuTop{ flex: 1; justify-content: flex-end; align-items: center; position: relative; z-index: 9999999; text-align: right; }

/* HanBarber Menu */
#switchBtnArea { display: none; position: relative;  z-index: 2; width: 26px; }
#switchBtnArea #switchBtn { position: fixed; top: 18px; left: 20px; z-index: 999999;  display: block; width: 20px; height: 20px; }
#switchBtnArea #switchBtn.btnClose  [class*="humberger-border"] { background: #d32c26;	 }
#switchBtnArea #switchBtn div { display: inline-block; box-sizing: border-box;  transition: all .4s; }
#switchBtnArea #switchBtn [class*="humberger-border"] { position: absolute; left: 0;  display: block; width: 20px; height: 2px; background: #fff; }
#switchBtnArea #switchBtn div:nth-of-type(1){ margin-top: 7px; }
#switchBtnArea #switchBtn div:nth-of-type(3){ bottom: 4px; }
#switchBtnArea #switchBtn.btnClose div:nth-of-type(1){ top: 8px;  -webkit-transform: translateX(2px) translateY(-7px) rotate(225deg); transform: translateX(2px) translateY(-7px) rotate(225deg); }
#switchBtnArea #switchBtn.btnClose div:nth-of-type(2){ top: 28px; display: none;  background: transparent; opacity: 0; }
#switchBtnArea #switchBtn.btnClose div:nth-of-type(3){ top: 1px;  -webkit-transform: translateX(2px) translateY(7px) rotate(135deg); transform: translateX(2px) translateY(7px) rotate(135deg); }
#rwdMenuWrap { position: relative; display: inline; top:auto; right:0; z-index: 9999999; width: 100%; height: 100%; margin: 0 auto; background: #262b42; }
#rwdMenuWrap ul { width: 100%; box-sizing: border-box; }
#rwdMenuWrap ul li { display: inline-block; position: relative; width: auto; border-bottom: 0px solid #575b6e; }
#rwdMenuWrap ul li:hover a{ color: #112233;}
#rwdMenuWrap ul li a{ width: 100%; display: inline-block; position: relative; padding: 10px 15px 10px 15px; font-weight: 500; color: #fff; text-align: center; margin: 0px 5px 0px 5px; font-size: 16px; border: 0px; transition: all 0s; }
#rwdMenuWrap ul li a:before{ position: absolute; content: ''; width: 2px; height: 8px; background-color: #fff; left: 0; right: 0; margin: auto; top: -10px; opacity: 0; transition: all .4s;}
#rwdMenuWrap ul li a.Active:before{ position: absolute; content: ''; width: 2px; height: 8px; background-color: #fff; left: 0; right: 0; margin: auto; top: -5px; opacity: 1; transition: all .4s;}
#rwdMenuWrap ul li img{ width: 22px; vertical-align:middle; margin-right: 0px; margin-left: -10px; margin-top: -5px; filter: brightness(0) invert(0); }
#rwdMenuWrap ul li a:hover { color: #fff; }
#rwdMenuWrap ul li a:hover:before{ top: 0px; opacity: 1; transition: all .4s;}

.LangDisplay{ width: 100px; display: inline-block; text-align: center; border: 1px solid #fff; font-size: 14px; border-radius: 3px; color: #fff; margin-left: 20px; position: relative; }
.LangDisplay:before{ position: absolute; content: ''; top: 5px; left: 15px; width: 14px; height: 14px; background-image: url('../images/icon-lang.svg'); background-repeat: no-repeat; background-size:contain; background-position: center;}
.LangDisplay a{ color: #fff; display: inline-block; padding: 3px 0 3px 0; font-weight: bold; letter-spacing: 2px; }
.LangDisplay select { cursor: pointer; width: 100%; background-color: rgba(255,255,255,0); border: 0; color: #fff; padding: 5px 30px 5px 30px; text-align: center; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1em;-moz-appearance: none; -webkit-appearance: none; appearance: none; }

/* Use this */
.language_selector { width: 98px; color: #fff; background-color: transparent; line-height: 25px; font-size: 14px; padding: 0; border: 0; cursor: pointer; text-transform: uppercase;font-family: 'DM Sans', sans-serif; }
.language_selector:after{ position: absolute; content: ''; top: 7px; right: 15px; width: 10px; height: 10px; background-image: url('../images/icon-arrow-down.svg'); background-repeat: no-repeat; background-size:contain; background-position: center;}
.languages { display: none; position: absolute; margin: 0;font-family: 'DM Sans', sans-serif; }
.languages > li { width: 98px; background:rgba(255, 255, 255, 0.8); border-radius: 3px; line-height: 25px; font-size: 14px; padding: 0; margin-top: 2px; cursor: pointer; }
.languages > li a{ display: block; color: #5c5b5b;}
.languages > li:hover { background: #fff; }
 
@media(max-width:1200px)
{
	/* TopMenu */
	.TopMenu{ max-width: 95%; }
	#rwdMenuWrap ul li a { margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; font-size: 15px; }
}

@media(max-width:1024px)
{
	header{ /*overflow: hidden;*/ height: 100px; }
	.header{ /*overflow: hidden;*/ height: 100px; }
	.headroom{ height: 100px; }
	.headroom--top { height:100px;}
	.TopMenuBox{ width: auto; height: 100px;}
	.TopMenu{ height: 100px;}
	.LogoTop{ max-width: 160px; }
}

@media(max-width:1023px)
{
	header{ /*overflow: hidden;*/ height: 50px; }
	.header{ /*overflow: hidden;*/ height: 50px; margin-top: 0px; }
	.headroom{ background-color: #83bccf; padding-top: 0px; top: 0; left: 0; right: 0; height: 50px; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); }
	.headroom--pinned { position: fixed; top: 0px;}
	.headroom--unpinned { top: -90px;}
	.headroom--pinned #switchBtnArea #switchBtn{ position: absolute!important;}
	.headroom--unpinned #switchBtnArea #switchBtn{ position: absolute!important; }
	.headroom--unpinned #switchBtnArea #switchBtn.btnClose { position: absolute!important; }
	.headroom--top { width: 100%!important; height: 50px; /*overflow: hidden;*/ margin-top: 0px; }

	/* TopMenu */
	.TopMenu{ width: 100%; max-width: 100%; height: 50px; margin: auto; /*overflow: hidden;*/}
	.TopMenuBox{ width: 90%; height: 50px; margin: auto; display: block;}
	.MenuTop{ float: none; width: auto; height: 50px; }
	.LogoTop{ float: none; width: 100%; display: inline-block; max-width: 100%; position: absolute; left: 0; margin-top: -12px; text-align: center; color: #fff;}
	.LogoTop a{ margin: 0 auto; }
	.LogoTop img{ max-width: 130px; max-height: 25px; position: relative; z-index: 99999999; }
	.LogoNav{ display: block; width:50px; position: relative; margin: auto; margin-top: 40px;}
	.LogoNav img{ width:auto; max-width: 100%; height: auto;}

	.LangDisplay{ position: absolute; width: 80px; top: 12px; right: 10px; z-index: 99999999; }
	.LangDisplay:before{ left: 10px; top: 5px;}

	/* Use this */
	.language_selector { width: 80px; }
	.languages { z-index: 9999999999; }
	.languages > li { width: 80px; }

	/* HanBarber Menu */
	#switchBtnArea { display: inline-block; position: relative; z-index: 99999999999; width: 26px; vertical-align: top; }
	#rwdMenuWrap { position: fixed!important; display: inline-block; top: 0!important; right: -100%; z-index: 99999999999; width: 100%; height: 100%; background: #83bccf; }
	#rwdMenuWrap ul { margin-top: 70px!important; width: 100%!important; box-sizing: border-box!important; padding: 3px 17px 0!important; clear: both!important;  vertical-align: top!important; }
	#rwdMenuWrap ul li { position: relative!important; width: 100%!important; margin: 0px!important; padding: 0px!important; height: auto!important; border-bottom: 1px solid #f2f2f2; vertical-align: top!important; clear: both!important;}
	#rwdMenuWrap ul li a:after { position: absolute; top: 0; margin-top: 20px!important; right: 6px; width: 0; height: 0; margin: -3px 0 0 0; content: ""; border: 3px solid transparent; border-left: 4px solid #fff; vertical-align: top!important; }
	#rwdMenuWrap ul li a { padding: 10px 6px 10px 15px!important; display: block!important; margin: 0px!important; color: #fff!important; text-align: left; font-size: 18px; letter-spacing: .06rem;  }
	#rwdMenuWrap ul li img{ width: 25px; vertical-align: text-bottom; margin-right: 0px; margin-left: -10px; filter: brightness(0) invert(1); }
	#rwdMenuWrap ul li a:hover { border-bottom: 0;}
	#rwdMenuWrap ul li a.Active:before { width: 8px; height: 2px; margin: 10px 0 0 0; top: 12px; }
	#rwdMenuWrap ul li a:before{ width: 8px; height: 2px; margin: 10px 0 0 -10px; top: 12px;}
	#rwdMenuWrap ul li a:hover:before{ top: 12px; margin: 10px 0 0 0;}
}

@media(min-width:1024px)
{
	.OpenSubMenuHover:hover .SubmenuDisplay { display: block!important; }
}