Tayp Portfolio original Design

/*------------------------------------*\
    PORTFOLIO
\*------------------------------------*/
.categories{
    margin-top: 25px;
}
.cat-btn {
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    float: left;
}
.cat-btn label {
    margin: 0;
}
.cat-btn:hover {
    background: #fff;
    color: #091a8d;
}
.cat-btn label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

.cat-btn label input {
	display: none;
}
.cat-btn label span{
    text-transform: uppercase;
    font-size: 14px;
    padding: 5px 15px;
    background: #091a8d;
    color: #ffffff;
}
.cat-btn input:checked + span {
    background: #fff;
    color: #091a8d;
}
.hsa img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}
.equal.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.equal.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
#response{
	padding-top: 25px;
	padding-bottom: 100px;
}
<?php
/*
	Template Name: Portfolio
*/
?>
<?php get_header(); ?>
<style>
.col-md-7.support-icons img {
    left: 0;
    right: 0;
    position: absolute;
    width: 100% !important;
}
section#support-header {
    background: #091A8D;
    color: #fff;
    padding-top: 70px !important;
}
section.portfolio{
	padding: 25px 0;
}
.bgdesignmain.custom-html-container {
    display: block !important;
}
.bgdesign{
	bottom: -160px;
}
</style>
<section id="support-header" class="portfolioheader">
	<div class="container">
		<div class="row">
			<div class="col-md-12 support-header">
				<div class="col-md-5 animated fadeInRight">
					<h1 class="mh1"> Portfolio </h1>
				</div>
				<div class="col-md-7 support-icons animated fadeInLeft">
					<p> Categories </p>
					<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<!-- 						<p> Sorted By </p>
						<select name="date" id="misha_order_by" class="no-frame">
							<option name="date" value="DESC">&darr; Descending</option>
							<option name="date" value="ASC">&uarr; Ascending</option>
						</select> -->
						<div class="categories">
							<?php
							$post_type = 'portfolio';
							$taxonomies = get_object_taxonomies((object) array( 'post_type' => $post_type, 'hide_empty' => true ));
							foreach( $taxonomies as $taxonomy ){
								echo $taxonomy->name;
								$terms = get_terms( $taxonomy );
								foreach( $terms as $term ){ ?>
								<div class="cat-btn">
									<label class="category-choice">
										<input type="checkbox" id="<?php echo $term->name; ?>" name="portfolio[<?php echo $term->term_id; ?>] "  value="<?php echo $term->term_id; ?>"><span><? echo $term->name; ?></span>
									</label>
								</div>
							<?php }
							}
							?>
						</div>
						<input type="hidden" name="action" value="loadmorejudem">
					</form>
				</div>
			</div>
		</div>
	</div>
</section>



<section class="portfolio">
	<div class="container">

					<div class="equal row"  id="response">
					<?php
					$args = array(
						'post_type' => 'portfolio',
						'posts_per_page' => -1,
						'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1)
					);
					query_posts($args);
					$x = 0;
					while (have_posts()) : the_post(); ?>
					<div class="col-md-6 col-sm-12 col-xs-12 home_small_boxs">
						<a href="<?php the_permalink(); ?>">
							<div  class="hsa">
								<img src="<?php the_field('featured_image'); ?>">
								<div class="overlay">
									<div class="text">Preview</div>
								</div>
							</div>
						</a>
						<div class="product-detail-shop col-md-12 col-xs-12 col-sm-12">
							<div class="col-md-8 col-sm-8 col-xs-8">
								<a href="<?php the_permalink(); ?>" class="pdsa">
									<div class="sb_title"><?php the_field('short_title'); ?></div>
									<div class="sb-type"><?php the_field('short_description'); ?></div>
								</a>
							</div>
						</div>
					</div>
					<?php if ($x == 2) { $x = 1; } $x++; ?>
					<?php endwhile; ?>
				</div><!--//posts_cont-->

				<?php wp_reset_query(); ?>
				<!-- End -->
			<?
			the_posts_pagination();
			?>


	</div>
</section>

<script>
jQuery(function($){
	$('#filter').change(function(){
		var filter = $('#filter');
		$.ajax({
			url:filter.attr('action'),
			data:filter.serialize(), // form data
			type:filter.attr('method'), // POST
			beforeSend:function(xhr){
				filter.find('button').text('Processing...'); // changing the button label
			},
			success:function(data){
				filter.find('button').text('Apply filter'); // changing the button label back
				$('#response').html(data); // insert data
			}
		});
		return false;
	});
});
</script>

<?php get_footer(); ?>