Can't input text into form or click search button - html

Question

Any idea why this code stopped working? (Wordpress)
My site - The main search bar 'city' 'neighborhood' 'min price' etc isn't responding, I can't input text and have no clue what I've done to bung it up.
The code seems to be clean though when I input it in the codepen, something on my site is mucking this up!
<form id="sp_search_w" action="http://www.codytritter.com/listing/" method="get">
<input name="sp" type="hidden" value="s" />
<label for="sp_city">City</label>
<input id="sp_city" class="btn-block" name="sp_city" type="text" placeholder="City" />
<label for="sp_subdivision">Sub Division</label>
<input id="sp_subdivision" class="btn-block" name="sp_subdivision" type="text" placeholder="Neighborhood" />
<label for="sp_minprice">Min. Price</label>
<input name="sp_minprice" type="text" placeholder="Min Price" />
<!--
<select name="sp_minprice" id="sp_minprice" class="btn-block">
<option value="0">No Min</option>
<option value="25000">25,000</option>
<option value="50000">50,000</option>
<option value="75000">75,000</option>
</select>
-->
<label for="sp_maxprice">Max. Price</label>
<input name="sp_maxprice" type="text" placeholder="Max Price" />
<!--
<select name="sp_maxprice" id="sp_maxprice" class="btn-block">
<option value="50000000">No Max</option>
<option value="25000">25,000</option>
<option value="50000">50,000</option>
<option value="75000">75,000</option>
</select>
-->
<label for="sp_bedrooms">Bedrooms</label>
<input class="short" name="sp_bedrooms" type="text" placeholder="Beds" />
<!--
<select name="sp_bedrooms" id="sp_bedrooms" class="input-small btn-block">
<option value="">All</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4+</option>
</select>
-->
<label for="sp_bathrooms">Bathroom</label>
<input class="short" name="sp_bathrooms" type="text" placeholder="Baths" />
<!--
<select name="sp_bathrooms" id="sp_bathrooms" class="input-small btn-block">
<option value="">All</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4+</option>
</select>
-->
<div class="controls">
<input id="sp_search_submit" class="btn" type="submit" value="Search" />
</div>
</form>
CSS
form {
max-width: 100%;
margin: auto;
text-align: center;
}
input {
text-align: center;
padding: 1rem 1rem;
border-radius: .5rem;
border: 2px solid #ddd;
font-size: 1.3em;
max-width: 8em;
}
.controls { padding: 1em 0 0; }
#sp_search_submit {
background: #809eb6;
border: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: .2rem;
}
input:focus { outline: 0; }
.short { max-width: 4em; }
label { display: none; }

Answer 1

It's a CSS problem. There is a z-index of -1 on a parent element.
See this style
.post-489 .et_pb_section:nth-child(1) {
z-index: -1!important;
}
It's references in the head of your page
<!-- Start CSSHero.org Dynamic CSS & Fonts Loading -->
<link rel="stylesheet" type="text/css" media="all" href="http://www.codytritter.com?wpcss_action=show_css" data-apply-prefixfree />
<!-- End CSSHero.org Dynamic CSS & Fonts Loading -->