Portfolio 01

                

<!-- protfolio-area start-->
<div class="amazing-portfolio-area">
        <div class="col-lg-12 col-md-12 col-12">
            <ul class="filter-catagory-menu menu-eff text-center">
                <li class="filter" data-filter="all"><a>Show All</a></li>
                <li class="filter" data-filter=".fashion"><a>Fashoin</a></li>
                <li class="filter" data-filter=".photography"><a>Phptography</a></li>
                <li class="filter" data-filter=".suncity"><a>Sun City</a></li>
                <li class="filter" data-filter=".artglass"><a>Art Glass</a></li>
            </ul>
        </div>
        <div id="mix-fil" class="row">
            <div class="col-lg-4 col-md-4 col-12 mix fashion">
                <div class="amazing-work-single aws-2">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a1.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Vestibulum gravida</h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">photography,</a></li>
                            <li><a href="#">Sun City</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mix photography">
                <div class="amazing-work-single aws-2">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a2.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Gravida Vestibulum
                        </h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">Moon City,</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mix suncity ">
                <div class="amazing-work-single aws-2">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a3.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Vestibulum gravida</h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">photography,</a></li>
                            <li><a href="#">Sun City</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mix artglass">
                <div class="amazing-work-single aws-2 ">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a4.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Gravida Vestibulum
                        </h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">Moon City,</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mix fashion">
                <div class="amazing-work-single aws-2">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a5.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Gravida Vestibulum
                        </h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">Moon City,</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mix fashion">
                <div class="amazing-work-single aws-2">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a6.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Vestibulum gravida</h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">photography,</a></li>
                            <li><a href="#">Sun City</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mix photography">
                <div class="amazing-work-single aws-2">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a7.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Gravida Vestibulum
                        </h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">Moon City,</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mix suncity ">
                <div class="amazing-work-single aws-2">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a8.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Vestibulum gravida</h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">photography,</a></li>
                            <li><a href="#">Sun City</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mix artglass">
                <div class="amazing-work-single aws-2">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a1.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Gravida Vestibulum
                        </h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">Moon City,</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mix fashion">
                <div class="amazing-work-single aws-2">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a2.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Gravida Vestibulum
                        </h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">Moon City,</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mix photography">
                <div class="amazing-work-single aws-2">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a4.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Gravida Vestibulum
                        </h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">Moon City,</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mix suncity ">
                <div class="amazing-work-single aws-2">
                    <div class="amazing-img def-hover-eff">
                        <a href="#"><img src="images/product/a5.jpg" alt=""></a>
                    </div>
                    <div class="amazing-content white-cont">
                        <h3 class="railway uppercase animated">Vestibulum gravida</h3>
                        <ul class="animated">
                            <li><a href="#">Fashion,</a></li>
                            <li><a href="#">photography,</a></li>
                            <li><a href="#">Sun City</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- portfolio-area end-->
            
            

                

/* =============porftfolio filter============== */
/* mixitup */
.mix{display:none}

.filter-catagory-menu {
  margin-bottom: 35px;
}
.filter-catagory-menu li {
    color: #545659;
    display: inline-block;
    font-family: roboto slab;
    font-style: italic;
    letter-spacing: 0.8px;
    margin: 0 20px;
    position: relative;
	cursor:pointer
}
.filter-catagory-menu li + li::after {
    content: "/";
    left: -25px;
    position: absolute;
	top:5px
}
.filter-catagory-menu li a {
  display: inline-block;
  height: 35px;
  line-height: 35px;
}
.mix {
  margin-bottom: 30px;
}
.filter-catagory-menu li.filter.active {
  font-style: normal;
}
.amazing-content.white-cont > h3 {
    color: #fff;
}
.amazing-content.white-cont ul li a {
    color: #fff;
}
.amazing-content.white-cont ul li a:hover {
   text-decoration:underline
}
.col-lg-4.mix:nth-last-child(-n+3) {
  margin-bottom: 0;
}
                
            

		
$('#mix-fil').mixItUp();