<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2 class="text-center">Filter Events</h2>
    </div>
  </div>
<div class="row filter-row">

  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-star fa-stack-1x fa-inverse">      </i>
    </span>
    <div class="badge-title">
    VIP Packages</div>
  </div>  
  
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-diamond fa-stack-1x fa-inverse">      </i>
    </span>
    <div class="badge-title">
    Platinum Packages</div>
  </div> 
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-heart fa-stack-1x fa-inverse">      </i>
    </span>
    <div class="badge-title">
    Family Packages</div>
  </div> 
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-hotel fa-stack-1x fa-inverse">      </i>
    </span>
    <div class="badge-title">
    Hotel Packages</div>
  </div> 
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-flag fa-stack-1x fa-inverse">      </i>
    </span>
    <div class="badge-title">
    RV-Rental Packages</div>
  </div> 
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-map-marker fa-stack-1x fa-inverse">      </i>
    </span>
    <div class="badge-title">
    Tour Bus Packages</div>
  </div> 
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-bus fa-stack-1x fa-inverse">      </i>
    </span>
    <div class="badge-title">
    Shuttle Packages</div>
  </div>
</div>
 
  <div class="row filter-row">

  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <img src="//dev.cidentertainment.com/wp-content/themes/cid_theme_v2/images/access.png">

    </span>
    <div class="badge-title">
    VIP Packages</div>
  </div>  
  
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <img src="//dev.cidentertainment.com/wp-content/themes/cid_theme_v2/images/platinum.png">
    </span>
    <div class="badge-title">
    Platinum Packages</div>
  </div> 
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <img src="//dev.cidentertainment.com/wp-content/themes/cid_theme_v2/images/family.png">
    </span>
    <div class="badge-title">
    Family Packages</div>
  </div> 
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <img src="//dev.cidentertainment.com/wp-content/themes/cid_theme_v2/images/hotel.png">
    </span>
    <div class="badge-title">
    Hotel Packages</div>
  </div> 
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <img src="//dev.cidentertainment.com/wp-content/themes/cid_theme_v2/images/rv_rental.png">
    </span>
    <div class="badge-title">
    RV-Rental Packages</div>
  </div> 
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <img src="//dev.cidentertainment.com/wp-content/themes/cid_theme_v2/images/tour_bus.png">
    </span>
    <div class="badge-title">
    Tour Bus Packages</div>
  </div> 
  <div class="filter-badge">
    <span class="fa-stack fa-3x">
      <img src="//dev.cidentertainment.com/wp-content/themes/cid_theme_v2/images/shuttle.png">
    </span>
    <div class="badge-title">
    Shuttle Packages</div>
  </div>
</div>
  
  <div class="row">
    <div class="col-xs-12">
      <p class="small text-center">*Click the badge to filter events by*</p>
    </div>
  </div>
</div>

body{
  padding-top: 15px;
}
.filter-row{
  text-align: center;
  vertical-align:text-top;
}
.filter-badge{
  border: 3px solid #333;
  height: 100px;
  max-width: 97px;
  padding: 0 5px;
  margin: 30px 5px 10px;
  text-align: center;
  display: inline-block;
  position: relative;
  border-radius: 7px;
  cursor: pointer;
  position: relative;
  top:0;
   -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

.filter-badge.active{
  color: #57f;
  border-color: #57f;
}

.filter-badge.active .fa-stack .fa-circle{
 color: #57f;
  text-shadow: 0 0 5px #fff;
     -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.filter-badge .fa-stack{
  /* position: relative; */
  /* top: -40px; */
  margin-top: -40px;
}

.filter-badge .badge-title{
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  width:100%;
}

$('.filter-badge').on('click', function(){
  $(this).toggleClass('active');
})