<div id="pl-2"  class="panel-layout" ><div id="pg-2-0"  class="panel-grid panel-has-style"  data-style="{&quot;background_display&quot;:&quot;tile&quot;,&quot;row_stretch&quot;:&quot;full-stretched&quot;,&quot;cell_alignment&quot;:&quot;flex-start&quot;}" ><div class="siteorigin-panels-stretch panel-row-style panel-row-style-for-2-0" data-stretch-type="full-stretched" ><div id="pgc-2-0-0"  class="panel-grid-cell"  data-weight="1" ><div id="panel-2-0-0-0" class="so-panel widget widget_header-search panel-first-child panel-last-child" data-index="0" data-style="{&quot;background_display&quot;:&quot;tile&quot;}" ><div class="so-widget-header-search so-widget-header-search-default-d75171398898"><div class="header-search" style="background: url(http://turayrealty.com/wp-content/uploads/2017/10/background-image.jpg) ">	
		 <div class="entry-content">
			<h2 class="header-title">Find Your Dream Home</h2>
			<h4 class="header-subtitle">Or not :) consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h4>	
			<div class="main-search-box">
				<div class="trick"></div>
				<form   action="http://turayrealty.com/listing/" method="get">
					<div class="search-top">
						<div class="search-input">
							<input id="search-input" name="search_by" type="text" placeholder="Enter address e.g. street, city and state or zip" />
						</div>
						<div class="search-btn">
							<button class="form-btn">Search</button>
						</div>
					</div>
					<div class="search-bottom">
						<div class="select-col c1">
							<div class="custom-select">
								<div class="select-placeholder">Any type</div>
								<div class="select-hover">
									<div class="select-item item-type" value="any-type">Any type</div>
									<div class="select-item item-type" value="apartments">Apartments</div>
									<div class="select-item item-type" value="houses">Houses</div>
									<div class="select-item item-type" value="commercial">Commercial</div>
									<div class="select-item item-type" value="garages">Garages</div>
									<div class="select-item item-type" value="garages">Lots</div>
								</div>
							</div>
						</div>
						<div class="select-col c2">							
							<div class="custom-select">
								<div class="select-placeholder">Min Price</div>
								<div class="select-hover">
									<div class="select-item opac-price item-min" value="min-price">Min Price</div>
									   
										<div class="select-item item-min" value="10000">10,000</div>
									  
										<div class="select-item item-min" value="20000">20,000</div>
									  
										<div class="select-item item-min" value="30000">30,000</div>
									  
										<div class="select-item item-min" value="40000">40,000</div>
									  
										<div class="select-item item-min" value="50000">50,000</div>
									  
										<div class="select-item item-min" value="60000">60,000</div>
									  
										<div class="select-item item-min" value="70000">70,000</div>
									  
										<div class="select-item item-min" value="80000">80,000</div>
									  
										<div class="select-item item-min" value="90000">90,000</div>
									  
										<div class="select-item item-min" value="100000">100,000</div>
									  
										<div class="select-item item-min" value="110000">110,000</div>
									  
										<div class="select-item item-min" value="120000">120,000</div>
									  
										<div class="select-item item-min" value="130000">130,000</div>
									  
										<div class="select-item item-min" value="140000">140,000</div>
									  
										<div class="select-item item-min" value="150000">150,000</div>
																	</div>
							</div>
						</div>
						<div class="select-col c3">
							<div class="custom-select">
								<div class="select-placeholder">Max Price</div>
								<div class="select-hover">
									<div class="select-item opac-price item-max" value="min-price">Max Price</div>
									   
										<div class="select-item item-max" value="10000">10,000</div>
									  
										<div class="select-item item-max" value="20000">20,000</div>
									  
										<div class="select-item item-max" value="30000">30,000</div>
									  
										<div class="select-item item-max" value="40000">40,000</div>
									  
										<div class="select-item item-max" value="50000">50,000</div>
									  
										<div class="select-item item-max" value="60000">60,000</div>
									  
										<div class="select-item item-max" value="70000">70,000</div>
									  
										<div class="select-item item-max" value="80000">80,000</div>
									  
										<div class="select-item item-max" value="90000">90,000</div>
									  
										<div class="select-item item-max" value="100000">100,000</div>
									  
										<div class="select-item item-max" value="110000">110,000</div>
									  
										<div class="select-item item-max" value="120000">120,000</div>
									  
										<div class="select-item item-max" value="130000">130,000</div>
									  
										<div class="select-item item-max" value="140000">140,000</div>
									  
										<div class="select-item item-max" value="150000">150,000</div>
																	</div>
							</div>
						</div>
					</div>
					
					
					<input id="any-type" name="type" value="any-type" type="hidden">
					<input id="min-price" name="min-price" value="min-price" type="hidden">
					<input id="max-price" name="max-price" value="max-price" type="hidden">
					
				</form>
			</div>
			
		</div>
</div>


<script type="text/javascript">	
		$( document ).ready(function() {
			$( ".select-placeholder" ).click(function() {
			   $( this ).next(".select-hover").fadeIn(500);
			   $( this ).parent(".custom-select").addClass("click");
			});
			$( ".item-type" ).click(function() {
			   $val = $(this).attr("value");
			   $html = $(this).html();
			   $(this).parent(".select-hover").parent(".custom-select").children(".select-placeholder").html($html);
			   $("#any-type").val($val);
			   $(".select-hover").fadeOut(500);
			   $(this).parent(".select-hover").parent(".custom-select").removeClass("click");
			});
			
			$( ".item-min" ).click(function() {
			   $val = $(this).attr("value");
			   $html = $(this).html();
			   $(this).parent(".select-hover").parent(".custom-select").children(".select-placeholder").html($html);
			   $("#min-price").val($val);
			   $(".select-hover").fadeOut(500);
			   $(this).parent(".select-hover").parent(".custom-select").removeClass("click");
			});
			
			$( ".item-max" ).click(function() {
			   $val = $(this).attr("value");
			   $html = $(this).html();
			   $(this).parent(".select-hover").parent(".custom-select").children(".select-placeholder").html($html);
			   $("#max-price").val($val);
			   $(".select-hover").fadeOut(500);
			    $(this).parent(".select-hover").parent(".custom-select").removeClass("click");
			});
			$(document).mouseup(function(e)	{	
				var container = $(".custom-select.click");
				// if the target of the click isn't the container nor a descendant of the container
				if (!container.is(e.target) && container.has(e.target).length === 0) 
				{$(".select-hover").fadeOut(500);$(".custom-select").removeClass("click");}
			});
		});
</script>
</div></div></div></div></div><div id="pg-2-1"  class="panel-grid panel-has-style"  data-style="{&quot;padding&quot;:&quot;50px 0px 0px 0px&quot;,&quot;background_image_attachment&quot;:false,&quot;background_display&quot;:&quot;tile&quot;,&quot;cell_alignment&quot;:&quot;flex-start&quot;}" ><div class="panel-row-style panel-row-style-for-2-1" ><div id="pgc-2-1-0"  class="panel-grid-cell panel-grid-cell-empty"  data-weight="1" ></div></div></div></div>