#gallery {  
    margin: 0.2em 0;
    -webkit-column-count: 3; 
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 0.8em;
    -moz-column-gap: 0.8em;
    column-gap: 0.8em;
    -webkit-column-width: 33.33333333333333%;
    -moz-column-width: 33.33333333333333%;
    column-width: 33.33333333333333%;
}

.tile { 
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;

}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
	#gallery {  
    margin: 0.2em 0;
    -webkit-column-count: 2; 
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 0.8em;
    -moz-column-gap: 0.8em;
    column-gap: 0.8em;
    -webkit-column-width: 50%;
    -moz-column-width: 50%;
    column-width: 50%;
}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	#gallery {  
    margin: 0.2em 0;
    -webkit-column-count: 2; 
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 0.8em;
    -moz-column-gap: 0.8em;
    column-gap: 0.8em;
    -webkit-column-width: 50%;
    -moz-column-width: 50%;
    column-width: 50%;
}
}

@media only screen and (max-width: 767px) {
	#gallery {  
    margin: 0.2em 0;
    -webkit-column-count: 2; 
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 0.8em;
    -moz-column-gap: 0.8em;
    column-gap: 0.8em;
    -webkit-column-width: 50%;
    -moz-column-width: 50%;
    column-width: 50%;
}
}
/* ---------------------------------------------------------------------------- */
/* ------------------------------Portfolio Box--------------------------------- */
/* ---------------------------------------------------------------------------- */	
.portfolio-box {display: block;position: relative;margin: 0 auto 10px;overflow: hidden; }
.portfolio-box:before{z-index:1;content:"";position:absolute;left:0;right:0;top:0;bottom:0;border-top:6px solid #649099;border-bottom:6px solid #649099;transform:scale(0,1);-moz-transform:scale(0,1);-webkit-transform:scale(0,1);-ms-transform:scale(0,1);transition:all 0.4s ease-in-out 0s;-moz-transition:all 0.4s ease-in-out 0s;-webkit-transition:all 0.4s ease-in-out 0s;}
.portfolio-box:after{z-index:1;content:"";position:absolute;left:0;right:0;top:0;bottom:0;border-left:6px solid #649099;border-right:6px solid #649099;transform:scale(1,0);-moz-transform:scale(1,0);-webkit-transform:scale(1,0);-ms-transform:scale(1,0);transition:all 0.4s ease-in-out 0s;-moz-transition:all 0.4s ease-in-out 0s;-webkit-transition:all 0.4s ease-in-out 0s;}
.portfolio-box:hover:before{transform:scale(1,1);-moz-transform:scale(1,1);-webkit-transform:scale(1,1);-ms-transform:scale(1,1);}
.portfolio-box:hover:after {transform:scale(1,1);-moz-transform:scale(1,1);-webkit-transform:scale(1,1);-ms-transform:scale(1,1);}

/****** Zoom Effect ******/
.portfolio-box.zoom-effect .portfolio-box-caption{}
.portfolio-box.zoom-effect img{-webkit-transition: 0.5s ease;transition: 0.5s ease;width: 100%;}
.portfolio-box:hover.zoom-effect img{-webkit-transform:scale(1.1); /* Safari and Chrome */-moz-transform:scale(1.1); /* Firefox */-ms-transform:scale(1.1); /* IE 9 */-o-transform:scale(1.1); /* Opera */transform:scale(1.1);}

.portfolio-box .portfolio-box-caption {display: block;position: absolute;bottom: 0;width: 100%;height: 100%;color: #fff;-webkit-transition: all .35s;-moz-transition: all .35s;transition: all .35s;}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {position: absolute;top: 9%;left: 7%;width: 100%;}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name span{background: #131313;display: inline-block;line-height: 15px;padding: 12px 10px 9px;font-size: 28px;letter-spacing: 2px;text-transform: uppercase;font-weight: 300;}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {padding: 0 20px;color: #fff;}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {font-size: 16px;margin-bottom: 3px;text-transform: uppercase;}

.portfolio-box:hover .portfolio-box-caption {opacity: 1;}

@media(min-width:768px) {
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 19px;
    }
}
@media(max-width:768px) {
	.portfolio-box {max-width: 350px}
}