.topStickyContainer{
	position: sticky;
	width: 100%;
	top: 0;
	z-index: 10000;
}

.topBarContainer{
	background-color:white;  /* top bar color */
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.topBar{
	width: 100%;
	display: flex;
    padding: 16px 0;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: #696158;
  	margin-left: 0.7em;

	transition:all 0.4s ease-out; 
	-o-transition:all 0.4s ease-out;
	-moz-transition:all 0.4s ease-out; 
	-webkit-transition:all 0.4s ease-out;
}

.webLogo{
	width: clamp(100px, calc(70px + 10vw), 200px);
	min-width: 100px;
	position: absolute;
	left: 1%;
	top: 16px;
	cursor: pointer;
}



.mainIcon{
	align-self: flex-end;
}

.enMainLogo{
	width: clamp(260px, calc(200px + 20vw), 750px);
}

.cnMainLogo{
	width: clamp(140px, calc(100px + 20vw), 360px);
}


.topNavContainer{
	width: 100%;
	display: flex;
	justify-content: center;
	background-color :white;  /* top nav bar color */
	border-bottom: 2px solid #009636;
	position: relative;
}

.topNav{
	min-height: 40px;
	width: 98%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.topNavBlk1{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}


.uLink{
	display: flex;
	justify-content: flex-start;
}


.uLink a{
	color: #696158;
	text-decoration: none;
	text-align: center;
}

.uLink a:hover{
	color: #009639;
	text-decoration: underline;
}

.navButton{
	padding: 0 16px;
	text-align: center;
}

#uLinkBtn{
	display: none !important;
}

.uLinkContainer{
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	z-index: 5001;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: .8em;
	padding: 2em calc(2% + 34px);
	border: #009636 solid 2px;
	border-top: none;
	visibility: hidden;
}


.navButton{
	color: #696158;
	cursor: pointer;
	transition:all 0.15s ease-out; 
	-o-transition:all 0.15s ease-out;
	-moz-transition:all 0.15s ease-out; 
	-webkit-transition:all 0.15s ease-out;
	background-color: white;
	border: none;
}

.navButtonActive{
	text-decoration: underline;
}

.topNavBlk2{
	display: flex;
	margin-right: 0.7em;
	align-items: center;
}



.hamburgerContainer{
  	position: absolute;
  	right: 8px;
	top: 16px;
 	cursor: pointer;
}

.hamBar1, .hamBar2, .hamBar3 {
  	width: clamp(1.2rem, calc(1.1rem + 0.2vw), 4rem);
  	height: 2px;
  	background-color: #009636;
  	margin: clamp(5px, calc(0.2rem + 0.4vw), 0.8rem) 0.3em;
  	border-radius:1em;
}


.hamBar2{
  	background-color: transparent;
}

.hamBar21, .hamBar22{
  	width: clamp(1.2rem, calc(1.1rem + 0.2vw), 4rem);
	height: 2px;
  	border-radius:1em;
	background-color: #009636;
	position: absolute;

}

.hamBar21{
	opacity: 0;
}

.change .hamBar1 {
	opacity: 0;
}

.change .hamBar21 {
	transform: rotate(-45deg);
	opacity: 100%;
}

.change .hamBar22 {
	transform: rotate(45deg);
}


.change .hamBar3 {
	opacity: 0;
}

.btnSelected{
	text-decoration: underline;
}