/* block top search */
#search_block_top {
	position: absolute;
    /*right: 10px;
    top: 85px;*/
	left: 10%;
	top: 6px;    
	z-index: 10
}

#searchbox  .button {
    background:#00CBFF url("img/icon-search@2x.png") no-repeat 30%;
    background-size: 80% auto;
    border: medium none;
    box-shadow: none;
    height: 40px;
    padding: 0;
    text-indent: 999px;
    width: 40px;
	border-color: transparent;
	position: absolute;
	right: 0;
	top: 0;
	overflow: hidden;
	border:none!important;
	border-radius: 0;
	z-index: 10;
}

#search_query_top {
	padding-right: 25px;
	/*border-color: #636363;*/
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	transition: all 0.2s ease;
	height: 40px;
	border: 0;
	background-color: #e8e5e0;
	border-radius: 0;
	text-transform: uppercase;
}
#search_query_top::-webkit-input-placeholder {
  color: #000000;
}
#search_query_top::-moz-placeholder {
color: #000000;
}
#search_query_top:-ms-input-placeholder {
color: #000000;
}
#search_query_top:-moz-placeholder { 
color: #000000;
}
#search_query_top.focused {
	top: 0;
	/*top: -10px;
	font-size: 20px;*/
	height: 40px;
	padding: 6px 20px;
	padding-right: 40px;
}
#search_query_top.focused + .button {
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
}
}
input:focus::-webkit-input-placeholder{
	color: transparent !important;
}
input:focus:-moz-placeholder{
	color: transparent !important;
}

@media (max-width:769px) {
	#search_block_top {
		z-index: 100;
	}
	#search_query_top {
		top: 0;
		font-size: 14px;
		height: 40px;
		padding: 6px 20px;
		padding-right: 40px;
		z-index: 100;
	}
	#search_query_top + .button {
		top: 0;
		right: 0;
		width: 40px;
		height: 40px;
		z-index: 110;
	}
}
@media (min-width:769px) and (max-width:992px) {
	#search_query_top.focused {
		top: 8px;
	}
	#search_query_top.focused + .button {
		top: 15px;
	}
	#search_query_top.focused,
	#search_query_top.focused + .button + .overlay {
		width: 726px;
	}
}
@media (min-width:992px) and (max-width:1200px) {
	#search_query_top.focused,
	#search_query_top.focused + .button + .overlay {
		width: 636px;
	}
}
@media (min-width:1200px) {
	#search_query_top.focused,
	#search_query_top.focused + .button + .overlay {
		width: 620px; /*700*/
	}
}
@media (min-width:992px) {
	#search_query_top.focused + .button + .overlay {
		position: absolute;
		top: -24px;
		right: 0;
		height: 96px;
		z-index: 1;
	}
}