.search-blk 		{ position:absolute; top:8px; right:5% }
	
	#body header .search-blk  		 { display:block; }
	#body.smhead header .search-blk  { display:none; }

	.search-box 		{ width:fit-content; height:fit-content; position:relative;}

	.input-search  		{ width:50px; height:40px; border-style:none; padding:5px 10px; padding-right:40px; text-align:right;
						  font-size:15px;  outline:none; 
	    				  background-color:#e8e4db; color:#333; transition: all .5s ease-in-out; }

	.input-search::placeholder 	{ color:rgba(142,127,106,.5); font-size:15px; font-weight:500; text-align:right; }
	
	.btn-search			{  width:50px; height:40px; border-style:none; border-radius:50%;
	    				  font-size:20px; font-weight:bold; outline:none; cursor:pointer; 
	    				  position:absolute; right:0px; color:#8d7e6d ;
						  background-color:transparent;
						    pointer-events: painted;  
	  }

	.btn-search:focus ~ .input-search {
	    width:calc(60vw - 50px - 30px);
	    border-radius: 0px;
	   /* background-color: transparent;*/
	    background-color:#e8e4db;
	    border-bottom:1px solid rgba(142,127,106,.5);
	    transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
	}

	.input-search:focus{
	    width:calc(60vw - 50px - 30px);
	    border-radius: 0px;
	    background-color:#e8e4db;
	    border-bottom:1px solid rgba(142,127,106,.5);
	    transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
	}


	/* ==========================================================================
	    Media Style: 
	============================================================================= */
	@media only screen and (max-width:1100px) {
	.search-blk { top:15px }
	}

	@media only screen and (max-width:1024px) {
	.btn-search:focus ~ .input-search,
	.input-search:focus{
	    width:calc(50vw - 30px - 20px);
	}
	.input-search{
		height: 50px;
	}
	}

	@media only screen and (max-width:767px) {
	.btn-search:focus ~ .input-search,
	.input-search:focus{
	    width:calc(100vw - 30px - 20px);
	}
	.search-blk { top:4px }
	.input-search{
		height: 46px;
	}
	}