.portfolio-main{ position:relative;}
.portfolio-main .grid-col-two{ width:50%; float:none; }
.portfolio-main .grid-col-three{ width:33.3333%; float:none; }
.portfolio-main .grid-col-four{ width:25%; float:none; }

.portfolio-item { position:relative; margin:10px;}
.port-thumb { position:relative; overflow:hidden;}
.port-thumb img { width:100%; height:auto; display:block; -webkit-transition:all 1.5s ease; transition:all 1.5s ease;}
.port-overlay { position:absolute; opacity:0; display:block; bottom:0; left:0; right:0; width:100%; height:100%; overflow:hidden; -webkit-transition:all 0.5s; transition:all 0.5s; background-color:rgba(0,0,0,0.8); color:#ffffff;}
.port-meta { position:absolute; left:30px; top:0; -webkit-transition:all 0.6s ease; transition:all 0.6s ease;}
.port-meta a { display:inline-block; color:#ffffff; height:45px; width:45px; font-size:16px; line-height:45px; border:2px solid; border-radius:50%; margin:30px 5px 0; position:relative; bottom:100%; z-index:1; text-align:center; -webkit-transition:all 0.6s ease; transition:all 0.6s ease;}
.port-details { position:absolute; bottom:-100%; text-align:right; right:0; max-width:100%; padding:0 40px; -webkit-transition:all 0.6s ease; transition:all 0.6s ease;}
.port-details h4 { margin-bottom:10px;}
.port-details h4 a { color:#ffffff;}
.port-details span a { color:#176b87;}
.portfolio-item:hover .port-thumb img { -webkit-transform:scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2);}
.portfolio-item:hover .port-overlay { opacity:1;}
.portfolio-item:hover .port-meta a { bottom:0;}
.portfolio-item:hover .port-details { bottom:30px;}
.grid-col-four .port-details h4 { font-size:18px;}
.portf-rotator .items .portfolio-item { margin:0;}

/* Single Portfolio */
.portfolio-single { position:relative;}
.portfolio-metadeta { position:relative; margin-bottom:20px;}
.portfolio-metadata-item { padding:10px 20px; border:1px solid #176b87; margin:0 10px 10px; text-align:left; width:48%; display:flex; justify-content:space-between; align-items:center;}
.portfolio-metadata-item span { display:inline-block; color:#001c30; font-size:18px; margin-right:10px;}
.portfolio-share { display:block; text-align:left;}
.related-port h5 { border:3px solid #176b87; padding:10px 20px; display:inline-block; background-color:#001c30; color:#ffffff;}