/* Donation button 
   	------------------------------------------------------------------------- */
   	#body .donation-pos 		{ position:absolute; top:0px; right:150px; /*width: 109px;*/ height:50px; background-color:#e84124; overflow:hidden; padding: 10px; color: #ffffff; font-weight: bold; cursor: pointer; }
	#body .donation 			{ display:flex; width:109px; height:50px; }
	#body.cn .donation 			{ width:89px; }
	#body .donation-pos:hover {  background-color:#B71C1C; }
	#body .donation-pos .fa	{ margin-left: 5px; margin-top: 6px; }
	#body .donation-pos .d-text	{ margin-left: 5px; margin-top: 2px; }

  	/* • Lanuage Select 
   	------------------------------------------------------------------------- */
   	#body .select-pos 		{ position:absolute; top:0px; right:260px; height:50px; background-color:#333; overflow:hidden;}
	#body.cn .select-pos	{ right: 240px;}

	#body .select select 		{    appearance: none;
						-moz-appearance: none; 
					 -webkit-appearance: none; 
							 appearance: none;
					 -webkit-appearance: none;
 				  -webkit-border-radius: 0px;
						 	    outline:0; border:0; box-shadow:none!important;
	  				  	  flex: 1; padding:0 1em; color:#fff; background-color:#333; background-image:none; cursor:pointer; font-size:14px;
	  				  }

	.select select option 				{ color:#fff; background-color:#333;}	
	.select select::-ms-expand option 	{ color:#fff; background-color:#333; padding:1em;}	

	select::-ms-expand 	{ display:none;} /* Remove IE arrow */

	.select 			{ /**position:relative;*/ display:flex; width:80px; height:50px; }
	#body .select::after 		{ font-family:FontAwesome; content: '\f107'; line-height:3;
						  position:absolute; top:0; right:0; padding:0 10px; background-color:#333; color:#fff;
  						  transition: .25s all ease;
  					      pointer-events: none;}
/*	.select>select.se-adj 	{top:50px; background-color:red}
	.select:hover::after { color:#fff;}
	option:not(:checked) { background-color: #fff;}
	.select.select-pos select:focus-visible {
		box-shadow: 0 0 3pt 2pt #666666; 
	}*/


  	/* • Search Box
   	------------------------------------------------------------------------- */
	#body .search-pos         { position:absolute; top:0px; right:341px;}
	#body.cn .search-pos	{ right: 321px; }

	.searchbox-blk	    {  display:flex; justify-content:center; align-items:center}
	.searchbox			{ width:fit-content; height:fit-content; position:relative}

	.input-search				{ height:50px; width:50px; border-style:none; outline:none; padding:10px; padding-right:40px;
								  font-size:14px; letter-spacing: 1px; transition: all .5s ease-in-out;
			    				  background-color:#333; color:#fff;}
	.input-search::placeholder 	{ /*color:rgba(255,255,255,.5);*/ font-size:14px; /*letter-spacing:1px;*/ font-weight:100; color:#fff}
	

	#body .btn-search 	{ width:50px; height:50px; border-style:none; font-size:14px; font-weight:bold; outline:none; 
	    			  position:absolute; right:0px; color:#fff; background-color:#333;
	    			  cursor:pointer;   pointer-events:painted;}
	
	.btn-search:focus ~ .input-search,
	.btn-search:active ~ .input-search	{ width:300px; 
	    								background-color: #333; /*border-bottom:1px solid rgba(255,255,255,.5);*/ transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2); }
	
	.input-search:focus { width:300px; background-color:#333; /*border-bottom:1px solid rgba(255,255,255,.5);*/ transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);}

	.fa-search { color:#fff}


	/* ==========================================================================
	    Media Style
	============================================================================= */
	@media only screen and (max-width:1600px) {
   	#body .donation-pos 		{ right:100px; }
   	#body .select-pos 		{ right:210px;}
   	#body.cn .select-pos 		{ right:190px;}
	#body .search-pos         { right:291px;}
	#body.cn .search-pos         { right:271px;}
	}


	@media only screen and (max-width:1400px) {
   	#body .donation-pos 		{ right:50px; }
   	#body .select-pos 		{ right:160px;}
   	#body.cn .select-pos 		{ right:140px;}
	#body .search-pos         { right:241px;}
	#body.cn .search-pos         { right:221px;}
	}

/*	@media only screen and (max-width:1300px) {
   	.select-pos 		{ right:70px;}
	.search-pos         { right:151px;}
	}*/

	@media only screen and (max-width:1200px) {
   	#body .donation-pos 		{ right:70px; }
	#body .donation-pos .fa	{ margin-top: 19px; }
	#body .donation-pos .d-text	{ margin-top: 15px; }
   	#body .select-pos 		{ right:180px;}
   	#body.cn .select-pos 		{ right:160px;}
	#body .search-pos         { right:261px;}
	#body.cn .search-pos         { right:241px;}

	#body .donation-pos,
	#body .select-pos,
	#body .select,
	#body .input-search,
	#body .btn-search 		{ height:74px}

	#body .select::after 		{ top:15px }
	}

/*	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
	.select-pos,
	.select,
	.input-search,
	.btn-search 		{ height:74px}

	.select::after 		{ top:15px }
	}*/

	@media only screen and (max-width:1024px) {
	.btn-search:hover ~ .input-search,
	.input-search:hover { width:300px; background-color:#333; /*border-bottom:1px solid rgba(255,255,255,.5);*/ transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);}
	}

	@media only screen and (max-width:767px) {
	#body .select-pos, #body .search-pos 	{ display:none}
	#body .donation-pos 	{ background-color: transparent; width: auto; color: #e84124; font-size: 1.8em; }
	#body .donation-pos:hover 	{ background-color: transparent; }
	#body .donation-pos .fa	{ margin-left: 5px; margin-top: 10px; }
	#body .donation-pos .d-text		{ display: none; }
	#body.cn .donation 			{ width:auto; }
	}