<div class="container">
  <div class="row">

    <div class="col-md-12">
      <form method="post" action="submit.php">
        <ul class="contact-form">
          <li>
            <div class="col-md-6">
              <input name="name" placeholder="Your Name" required="required" size="8" type="text">
            </div>

            <div class="col-md-6">
              <input name="email" placeholder="Email" required="required" size="8" type="email">
            </div>
          </li>

          <li>
            <div class="col-md-6">
              <input name="telefoon" placeholder="Phonenumber" required="required" size="8" type="text">
            </div>

            <div class="col-md-6">
              <input name="bedrijf" placeholder="Company/Agency" required="required" size="8" type="text">
            </div>
          </li>

          <li>
            <div class="col-md-6">
              <label>Budget Estimate </label>
              <div id="slider-range-min"></div>
            </div>
            <div class="col-md-6">
              <input type="text" id="amount" readonly>
            </div>
          </li>

          <li>

            <div class="col-md-12">
              <textarea class="span12" name="details" placeholder="Project Details" required="required"></textarea>
            </div>
          </li>

          <li>
            <div class="col-md-12">
              <button type="submit">Submit <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></button>
            </div>
          </li>


        </ul>
      </form>
    </div>

  </div>
</div>

body {
   background: #2B2E4A; 
}

.container {
  
  margin-top: 100px;
  
}

.contact-form {
  list-style-type: none;
  li {
    div {
      margin-bottom: 2.5em;
    }
  }
  input,
  textarea,
  select {
    width: 100%;
    margin: 0;
    padding-bottom: 1.4em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 3px solid slategrey;
    background: #2B2E4A;
    font-family: 'Roboto', sans-serif;
    color: lightgrey;
    font-weight: 700;
    font-size: 18px;
    transition: ease-in-out 0.25s;
  }
  textarea {
    min-height: 50px;
    max-height: 500px;
    white-space: pre-wrap;
    word-wrap: break-word;
    resize: vertical;
    overflow: hidden;
  }
  ::-webkit-input-placeholder {
    font-size: 12px;
    color: slategrey;
    text-transform: uppercase;
    font-weight: 400;
  }
  label {
    font-size: 12px;
    color: slategrey;
    text-transform: uppercase;
    font-weight: 400;
  }
  input:focus,
  select:focus,
  textarea:focus,
  button:focus {
    outline: none;
    resize: none;
    border-bottom: 3px solid #db4d57;
  }
  #slider-range-min {
    outline: 0;
    background: slategrey;
    height: 3.6em;
    border: 0;
    border-radius: 0;
    .ui-slider-range {
      background: #db4d57;
      border-radius: 0;
    }
    .ui-slider-handle {
      outline: 0;
      top: 1.1em;
      margin-left: -.6em;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 0;
      background: white;
      cursor: pointer;
    }
  }
  #amount {
    border: 0;
    color: lightgrey;
    font-weight: 400;
    font-size: 28px;
    padding-top: 1.1em;
    letter-spacing: 3px;
  }
  button {
    color: lightgrey;
    background: rgba(34, 34, 34, 0.0);
    border: 3px solid #db4d57;
    height: 74px;
    width: 200px;
    float: right;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: ease-in-out 0.25s;
    span {
      transition: ease-in-out 0.25s;
    }
  }
  button:hover {
    background: #db4d57;
    color: lightgrey;
    span {
      padding-left: 10px;
      color: white;
    }
  }
}

$(document).ready(function() {
  $("#slider-range-min").slider({
    range: "min",
    step: 100,
    value: 1200,
    min: 0,
    max: 15000,
    slide: function(event, ui) {
      $("#amount").val("€" + ui.value);
    },
    change: function(event, ui) {
      if (ui.value === 0) {
        $("#amount").val("To be determined");
      } else if (ui.value === 15000) {
        $("#amount").val("€" + "15000 or more");
      } else {
        $("#amount").val("€" + $("#slider-range-min").slider("value"));
      }
    }
  });
  $("#amount").val("€" + $("#slider-range-min").slider("value"));

});

$(document).ready(function() {

  // -- autosize init --

  autosize($('textarea'));

});