<div id="portfolio" class="portfolio">
  <div class="container offset-top-bot">
    <div class="text-center">
      <div class="buttons">
        <button id="all" class="active">All</button>
        <button id="graphic">Graphic</button>
        <button id="photography">Photography</button>
        <button id="wordpress">Wordpress</button>
        <button id="printing">Printing</button>
      </div>
    </div>
    <div class="clearfix"></div>

    <div class="my-portfolio">
      <!-- Portfolio Item -->
      <div class="col-md-4 col-sm-6 item-portfolio all wordpress">
        <div class="box">
          <img class="img-portfolio" src="https://www.letragrafic.com.au/wp-content/themes/letragraphic/images/services/graphic-design/image-6.jpg" alt="portfolio 1" />
        </div>
      </div>
      <!-- Portfolio Item End -->

      <!-- Portfolio Item -->
      <div class="col-md-4 col-sm-6 item-portfolio all photography">
        <div class="box">
          <img class="img-portfolio" src="https://www.letragrafic.com.au/wp-content/themes/letragraphic/images/services/graphic-design/image-6.jpg" alt="portfolio 2" />
        </div>
      </div>
      <!-- Portfolio Item End -->

      <!-- Portfolio Item -->
      <div class="col-md-4 col-sm-6 item-portfolio all wordpress">
        <div class="box">
          <img class="img-portfolio" src="https://www.letragrafic.com.au/wp-content/themes/letragraphic/images/services/graphic-design/image-6.jpg" alt="portfolio 3" />
        </div>
      </div>
      <!-- Portfolio Item End -->

      <!-- Portfolio Item -->
      <div class="col-md-4 col-sm-6 item-portfolio all printing">
        <div class="box">
          <img class="img-portfolio" src="https://www.letragrafic.com.au/wp-content/themes/letragraphic/images/services/graphic-design/image-6.jpg" alt="portfolio 4" />
        </div>
      </div>
      <!-- Portfolio Item End -->

      <!-- Portfolio Item -->
      <div class="col-md-4 col-sm-6 item-portfolio all wordpress">
        <div class="box">
          <img class="img-portfolio" src="https://www.letragrafic.com.au/wp-content/themes/letragraphic/images/services/graphic-design/image-6.jpg" alt="portfolio 5" />
        </div>
      </div>
      <!-- Portfolio Item End -->

      <!-- Portfolio Item -->
      <div class="col-md-4 col-sm-6 item-portfolio all graphic">
        <div class="box">
          <img class="img-portfolio" src="https://www.letragrafic.com.au/wp-content/themes/letragraphic/images/services/graphic-design/image-6.jpg" alt="portfolio 6" />
        </div>
      </div>
      <!-- Portfolio Item End -->

    </div>
  </div>
</div>

.portfolio {
  background-color: #eee;
  .buttons {
    margin-top: 50px;
    overflow: hidden;
    margin-bottom: 10px;
    display: inline-block;
    .active {
      background-color: #0eb3ed;
      color: #fff;
      font-weight: 700;
    }
    button {
      float: left;
      font-size: .75em;
      background-color: #fff;
      text-transform: uppercase;
      color: #17242d;
      font-weight: 300;
      text-align: center;
      margin: 0;
      padding: 17px 20px;
      border-top: 1px solid #d9d9d9;
      border-bottom: 1px solid #d9d9d9;
      border-right: 1px solid #d9d9d9;
      border-left: 0;
      &:first-child {
        border-left: 1px solid #d9d9d9;
      }
      &:hover {
        border-bottom: 1px solid #0eb3ed;
      }
    }
  }
  .item-portfolio {
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
      .img-portfolio {
        width: 100%;
        height: 100%;
    }
  }
  .box {
    height: 250px;
    cursor: pointer;
  }
}

/* Created by Ozimas */

/* SORT PORTFOLIO */
var hides = "all";
$('.buttons button').click(function() {
  var include = $(this).attr("id");
  $("." + hides).slideUp();
  setTimeout(function() {
    $("." + include).slideDown()
  }, 500)
  hides = include;
});

/* CLICK BUTTON PORTFOLIO */
$(".buttons button").on("click", function() {
  $(".buttons").find(".active").removeClass("active");
  $(this).addClass("active");
});