<div class="wrapper">
  <!-- WRAPPER -->
  
  
  
<div class="design-phase-camp-page"> 
  
<div class="row mb-4">
<div class="col-sm-8 offset-sm-2">
    
<p id="camp-headline" class="text-center">We have design phase leads.</p>
<p id="camp-subline" class="text-center mb-5">Who should we send them to?</p>
  
  <p class="text-center text-secondary">
    Please tell us who in your company should receive these privately-funded design phase leads for upcoming projects in your area. 
  </p>
  <p class="text-center text-secondary">
Please call 855‑805‑2560 for help.
  </p>
</div>
</div>  
  
 <hr class="mb-5"> 

<form>
  <div class="form-row">
    <div class="form-group col-sm-6">
      <label for="FirstName1">First Name</label>
      <input type="text" class="form-control" id="FirstName1" placeholder="">
    </div>
    <div class="form-group col-sm-6">
      <label for="LastName1">Last Name</label>
      <input type="text" class="form-control" id="LastName1" placeholder="">
    </div>
  </div>
  
  <div class="form-row">
    <div class="form-group col-sm-6">
      <label for="Title1">Title</label>
      <input type="text" class="form-control" id="Title1" placeholder="">
    </div>
    <div class="form-group col-sm-6">
      <label for="Email1">Email Address</label>
      <input type="text" class="form-control" id="Email1" placeholder="">
    </div>
  </div>
  

  
  <div class="form-row">
    <div class="form-group col-sm-12 mt-3">
        <div class="collapse multi-collapse" id="multiCollapseExample1">
          <hr class="mb-4">
          <div class="mb-5 lead text-bbn-blue" role="alert">
            <i class="fa fa-info-circle mr-1"></i> Enter your second contact's information below
          </div>
          <div class="form-row">
            <div class="form-group col-sm-6">
              <label for="FirstName2">First Name</label>
              <input type="text" class="form-control" id="FirstName2" placeholder="">
            </div>
            <div class="form-group col-sm-6">
              <label for="LastName2">Last Name</label>
              <input type="text" class="form-control" id="LastName2" placeholder="">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-sm-6">
              <label for="Title2">Title</label>
              <input type="text" class="form-control" id="Title2" placeholder="">
            </div>
            <div class="form-group col-sm-6">
              <label for="Email2">Email Address</label>
              <input type="text" class="form-control" id="Email2" placeholder="">
            </div>
          </div>
      </div>
      <a id="add-btn-1" onclick="myFunction()" class="text-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">
        <i class="fa fa-plus"></i> Add another contact
      </a>
      
    </div>
  </div>
  
  
  
  
  
  
  
  <div class="form-row">
    <div class="form-group col-sm-12 mt-3">
        <div class="collapse multi-collapse" id="multiCollapseExample2">
          <hr class="mb-4">
          <div class="mb-5 lead text-bbn-blue" role="alert">
            <i class="fa fa-info-circle mr-1"></i> Enter your third contact's information below
          </div>
          <div class="form-row">
            <div class="form-group col-sm-6">
              <label for="FirstName3">First Name</label>
              <input type="text" class="form-control" id="FirstName3" placeholder="">
            </div>
            <div class="form-group col-sm-6">
              <label for="LastName3">Last Name</label>
              <input type="text" class="form-control" id="LastName3" placeholder="">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-sm-6">
              <label for="Title3">Title</label>
              <input type="text" class="form-control" id="Title3" placeholder="">
            </div>
            <div class="form-group col-sm-6">
              <label for="Email3">Email Address</label>
              <input type="text" class="form-control" id="Email3" placeholder="">
            </div>
          </div>
      </div>
      <a id="add-btn-2" onclick="myFunction2()" class="text-primary" data-toggle="collapse" href="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">
        <i class="fa fa-plus"></i> Add another contact
      </a>
      
    </div>
  </div>
  
  
  
 
  
  
  <div class="form-row">  
    <div class="form-group col-sm-6 offset-sm-3 mt-3">
      <button type="submit" class="btn btn-primary-orange btn-lg btn-block">
        <strong style="font-size: 15px;">Confirm Contact Information</strong>
      </button>
    </div>
  </div>
  
</form>
    
</div>
  
  
  
  
  
<!-- END WRAPPER DIV-->
</div>






<style>
.design-phase-camp-page {margin: 40px auto 56px;}

#camp-headline {font-family: Roboto-Black, Roboto, sans-serif;
font-weight: 900;
font-size: 32px;
color: #00529B;
line-height: 1.1;
}

#camp-subline {font-family: Roboto, sans-serif;
font-size: 24px;
color: #00529B;
}

.camp-description {font-family: Roboto-Regular, 'Roboto', sans-serif;
font-size: 16px;
line-height: 1.625;
font-weight: 400;
margin: 32px auto 48px;
color: #4e5358;
}

.form-sub {font-family: Roboto-Bold, 'Roboto', sans-serif;
font-weight: 700;
font-size: 15px;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
padding-bottom: 24px;
margin-bottom: 0;
}

.form-header {font-family: Roboto-Black, 'Roboto', sans-serif;
font-weight: 900;
font-size: 23px;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
padding-top: 32px;
padding-bottom: 8px;
margin-bottom: 0;
}

@media (min-width: 992px){
.design-phase-camp-page .col-md-6 {
    width: 85%!important;
}
}


.btn-primary-orange {background-color: #ec6924; color: #ffffff;}
.btn-primary-orange:hover {background-color: #d45e20;}

.text-bbn-blue {color: #00529b;}
.text-bbn-orange {color: #ec6924;}

#add-btn-2 {display: none;}

</style>

<script>
  function myFunction() {
    document.getElementById("add-btn-1").style.display = "none";
    document.getElementById("add-btn-2").style.display = "block";
}

function myFunction2() {
    document.getElementById("add-btn-2").style.display = "none";
}
</script>

.wrapper {padding: 16px; width: 960px; margin: 50px auto;}