/*-----------------------------------------------------------------------------
	Language Selectors updated-2024
    This laoyout is only applicable to desktop & ipad versions
	updated-2024
------------------------------------------------------------------------------*/	

:root { 
	--LangModal_menu_color: #121212; /*--font color--*/
	--LangModal_menu_color_hover: #797676;; 
	--LangModal_menu_bgcolor: #fff; /*--div background color--*/
}



/* LINKS */

.LangModal-content a:link {
	color:var(--LangModal_menu_color); 
	font-size:95%; 
	text-align:left;
}

.LangModal-content a:visited {
	color:var(--LangModal_menu_color);
	 font-size:95%;
}

.LangModal-content div {
	text-align: center;
	padding:5px;
	width: 100px;
	border: 2px solid var(--div_color);
	box-sizing: border-box;
	transition: all 0.3s ease-in-out;
} 

.LangModal-content div:hover {

	border-bottom: 2px solid var(--logo_color);
	

} 


/* Language Selection Button */

.language-button {
	padding: 5px 12px;
	text-decoration: none;
	color:var(--LangModal_menu_color_hover); 
	border:none;   
	border: 1px solid var(--LangModal_menu_color_hover);
	border-radius:20px;	
	-webkit-transition-duration: 0.3s; /* Safari */
	transition-duration: 0.3s;
	overflow: hidden;
	font-family:'Roboto','Noto Sans TC', 'Noto Sans SC',sans-serif;
	background: transparent;
	box-sizing: border-box;
	cursor: pointer;	
}

.language-button:hover {	
	border: 1px solid var(--logo_color);
	color: var(--LangModal_menu_bgcolor);
	background: var(--logo_color);
}

.language-button:focus {outline:0;}
	



/*********************
		DESKTOP
**********************/	

/*-- The LangModal (background) --*/
.LangModal {
  display: block;
  width: 100%;
  height:100%;
  position: absolute; 
  left: 0;
  top: -150%;
  margin-top:80px;
  overflow: hidden; 
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  background-color: var(--div_color);
  box-sizing: border-box;
  z-index: 700; 

}

.LangModal h3 {
	text-align: center;
	margin-top: 50px;
}

/*-- LangModal Content --*/
.LangModal-content {
	display: flex;
	width: 100%;
	height: 150px;
	padding: 30px;
	justify-content: center;
	align-items: center;
	gap: 50px;
  	background-color: var(--div_color);	
  	box-sizing: border-box;  
}

.LangModal-content div {
	margin: 0 20px;
}



/*********************************
		Big Monitor
**********************************/	
@media screen and (min-width: 1920px) {

	.LangModal {
		   width: 1920px;
		   margin: 0 12vw;
		   margin-top: 80px;		
	   }    
   }