.portfolio-images-wrapper{float:left;width:25%;position:relative;overflow:hidden}
.port-img img{height:auto;width:100%;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .5s ease;-moz-transition:-moz-transform .5s ease;-ms-transition:-ms-transform .5s ease;-o-transition:-o-transform .5s ease;transition:transform .5s ease;}
.portfolio-images-wrapper:hover .port-img img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}
.portfolio-hover{height:100%;left:0;opacity:0;position:absolute;top:0;visibility:hidden;width:100%;-webkit-transition:opacity .5s ease;-moz-transition:opacity .5s ease;-ms-transition:opacity .5s ease;-o-transition:opacity .5s ease;transition:opacity .5s ease}
.portfolio-images-wrapper:hover .portfolio-hover{opacity:1;visibility:visible}
.port-link{left:50%;opacity:0;position:absolute;top:10%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);visibility:hidden;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;}
.portfolio-images-wrapper:hover .port-link{opacity:1;visibility:visible;top:30%}
.port-link a{border:1px solid #fff;border-radius:25px;color:#fff;display:inline-block;height:52px;line-height:52px;/*margin-left:15px;*/text-align:center;width:52px}
.port-link a:first-child{margin-left:0}
.port-link a:hover{background:#32c4d1 none repeat scroll 0 0;border-color:#32c4d1}
.port-title-wrapper{bottom:2%;position:absolute;text-align:center;width:100%;opacity:0;visibility:hidden;-webkit-transition:bottom .5s ease;-moz-transition:bottom .5s ease;-ms-transition:bottom .5s ease;-o-transition:bottom .5s ease;transition:bottom .5s ease;}
.portfolio-images-wrapper:hover .port-title-wrapper{opacity:1;visibility:visible;bottom:8%}
.port-title-wrapper .port-title{margin-bottom:10px}
.port-title-wrapper .port-title a{color:#fff}
.port-title-wrapper .port-desc{color:#32c4d1;letter-spacing:1px}

#gallery-pop-up {
    position: fixed;
    width: 100%;
    height: 100%;  
    top: 0px;
    left: 0px;
    z-index: 99999;  
}

#gallery-pop-up > div { width: 100%; height: auto; max-width: 800px; max-height: 500px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#gallery-pop-up > div { width: 100%; height: auto; text-align: center; }

#gallery-pop-up > div i { color: #FFF; position: absolute; top: -20px; right: 0px; cursor: pointer; }

body.gallery-overflow { overflow: hidden; }

.port-link a i { pointer-events: none; }

.port-title-wrapper .port-title { margin-top: 0px; }
.port-title-wrapper .port-desc { padding: 0px 30px; }



.port-link a:first-child { left: 10px !important; }
.port-link a:last-child { right: 10px !important; }

@media only screen and ( max-width: 1200px ) {
    
    .portfolio-images-wrapper { width: calc( 100% / 3 ); }
    
}

@media only screen and ( max-width: 600px ) {
    
    .portfolio-images-wrapper { width: 100%; }
    .port-title-wrapper .port-desc { font-size: 17px !important; }
    .port-title-wrapper .port-title a { font-size: 17px !important; }
    
    .port-link a {
        width: 35px;
        height: 35px;
    }
    
    .portfolio-images-wrapper:hover .port-link { top: 15%; }
    .port-link a i { font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    
    .port-title-wrapper .port-title { font-size: 18px; margin-bottom: 15px; }
    .port-title-wrapper .port-desc { font-size: 16px !important; line-height: 18px !important; }
    .portfolio-images-wrapper:hover .port-title-wrapper { bottom: 13%; }
    
}