/*---------------------------------------------------------------*/
/* Portfolio hover style
/*---------------------------------------------------------------*/

/* General style */
.filterable-grid li .mask {width: 100%; height: 100%; position: absolute; background-color: rgba(255, 255, 255, 0.4); overflow: hidden; top: 0; left: 0; }
.filterable-grid li img {display: block; position: relative;}
.filterable-grid li .pf-title{position:absolute; width:76%; font-size: 16px; padding: 12px 15px; text-transform:uppercase; color:#fff; text-align: right; bottom:30px;}
.filterable-grid.pf-four-columns li .pf-title{padding: 8px 15px; bottom:15px;}

/* Icon style */
.filterable-grid li a.pf-info, .filterable-grid li a.pf-zoom {font-size: 25px; font-weight:normal; width: 25px; display:block; text-decoration: none; padding: 15px; color: #fff; }
.filterable-grid.pf-one-column li a.pf-zoom { margin-top:105px; }
.filterable-grid.pf-two-columns li a.pf-zoom { margin-top:90px; }
.filterable-grid.pf-three-columns li a.pf-zoom { margin-top:55px; }
.filterable-grid.pf-four-columns li a.pf-zoom { margin-top:27px; }

/* One column style */
.filterable-grid.pf-one-column li .mask {width: 540px; height: 270px;}
.filterable-grid.pf-one-column li img {display: block; position: relative; float:left;}
.filterable-grid.pf-one-column li h3 {margin-bottom:5px;}
.filterable-grid.pf-one-column li h3 a{font-weight:bold; position: relative; font-size: 16px; text-align:left;}
.filterable-grid.pf-one-column li .pf-category{font-size:12px; margin-bottom:20px;}


/*---------------------------------------------------------------*/
/* Portfolio hover CSS3 animation
/*---------------------------------------------------------------*/

.latest-works ul li .pf-title, .filterable-grid li .pf-title{
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
   -webkit-transition: all 0.3s ease-in-out 0.2s;
   -moz-transition: all 0.3s ease-in-out 0.2s;
   -o-transition: all 0.3s ease-in-out 0.2s;
   -ms-transition: all 0.3s ease-in-out 0.2s;
   transition: all 0.3s ease-in-out 0.2s;
}
.latest-works ul li:hover .pf-title, .filterable-grid li:hover .pf-title{
 -webkit-transform: translateX(-300px);
   -moz-transform: translateX(-300px);
   -o-transform: translateX(-300px);
   -ms-transform: translateX(-300px);
   transform: translateX(-300px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.filterable-grid.filterable-grid.pf-two-columns li:hover .pf-title{
 -webkit-transform: translateX(-400px);
   -moz-transform: translateX(-400px);
   -o-transform: translateX(-400px);
   -ms-transform: translateX(-400px);
   transform: translateX(-400px);

}
.filterable-grid li  a.pf-zoom {
   -webkit-transform: translateX(-300px);
   -moz-transform: translateX(-300px);
   -o-transform: translateX(-300px);
   -ms-transform: translateX(-300px);
   transform: translateX(-300px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.filterable-grid li:hover  a.pf-zoom {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
}
.filterable-grid li  a.pf-info {
   -webkit-transform: translateX(-300px);
   -moz-transform: translateX(-300px);
   -o-transform: translateX(-300px);
   -ms-transform: translateX(-300px);
   transform: translateX(-300px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}
.filterable-grid li:hover  a.pf-info {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
   -webkit-transition: all 0.3s ease-in-out 0.2s;
   -moz-transition: all 0.3s ease-in-out 0.2s;
   -o-transition: all 0.3s ease-in-out 0.2s;
   -ms-transition: all 0.3s ease-in-out 0.2s;
   transition: all 0.3s ease-in-out 0.2s;
}
.filterable-grid li .mask{
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.filterable-grid li:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}