.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:0px 10px 30px; -webkit-transition-duration:0.5s; transition-duration:0.5s;}
.portfolio-inner { position:relative; width:100%; text-align:center;}

.port-thumb { position:relative; overflow:hidden;}
.port-thumb:before { content:''; position:absolute; width:100%; max-width:100%; bottom:0; top:auto; height:50%; background-color:rgba(0,0,0,0.7); opacity:0; right:-100%; left:auto; -webkit-transition:all 150ms ease-in-out 200ms; transition:all 150ms ease-in-out 200ms;}
.port-thumb:after { content:''; position:absolute; background-color:rgba(0,0,0,0.7); top:0; height:50%; width:100%; left:-100%; -webkit-transition:all 150ms ease-in-out 200ms; transition:all 150ms ease-in-out 200ms;}
.port-thumb img { display:block; width:100%; height:auto;}

.port-overlay { position:absolute; overflow:hidden; max-width:100%; left:0; right:0; padding:0; width:auto; margin:0 30px; z-index:1; opacity:0;}
.port-overlay.port-overlay-center { top:50%; bottom:auto; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);}

.port-btn-icon { position:absolute; right:30px; top:30px; z-index:5; -webkit-transform:scale(0, 1); -ms-transform:scale(0, 1); transform:scale(0, 1); -webkit-transform-origin:left center; -ms-transform-origin:left center; transform-origin:left center; -webkit-transition:transform 0.4s ease, -webkit-transform 0.4s ease; transition:transform 0.4s ease, -webkit-transform 0.4s ease;}
.port-btn-icon a.port-icon { position:relative; width:30px; height:30px; color:#ffffff; font-size:14px; line-height:28px; margin:0px 2px; text-align:center; display:inline-block; background-color:#387478; border:1px solid #387478; -webkit-transition:all 0.3s ease; transition:all 0.3s ease;}
.port-btn-icon a.port-icon:before { position:absolute; content:''; right:-5px; top:-5px; width:14px; height:14px; border-top:1px solid #ffffff; border-right:1px solid #ffffff;}
.port-btn-icon a.port-icon:after { position:absolute; content:''; left:-5px; bottom:-5px; width:14px; height:14px; border-left:1px solid #ffffff; border-bottom:1px solid #ffffff;}
.port-btn-icon a.port-icon:hover { color:#ffffff; border-color:#ffffff; background-color:#243642;}

.port-text { position:relative; margin-bottom:10px;}
.port-text:before { content:''; position:absolute; right:100%; background-color:#000000; width:100%; top:0; bottom:0; -webkit-transition:right 600ms ease-in-out 0s; transition:right 600ms ease-in-out 0s;}
.port-text h4 { font-size:20px; margin-bottom:0; text-transform:capitalize;}
.port-text h4 a { color:#ffffff;}

.port-cate { position:relative; z-index:1;}
.port-cate:before { content:''; position:absolute; left:100%; top:0; right:auto; bottom:0; width:100%; background-color:#000000; -webkit-transition:left 600ms ease-in-out 0s; transition:left 600ms ease-in-out 0s;}
.portfolio-category a { color:#387478; font-weight:600; font-size:16px; text-transform:capitalize;}

.portfolio-item:hover .port-btn-icon { -webkit-transform:scale(1, 1); -ms-transform:scale(1, 1); transform:scale(1, 1); -webkit-transform-origin:right center; -ms-transform-origin:right center; transform-origin:right center;}

.portfolio-item:hover .port-thumb:before { right:0; opacity:1; width:100%; height:50%; -webkit-transition:all .8s; transition:all .8s; z-index:1;}
.portfolio-item:hover .port-thumb:after { left:0; opacity:1; -webkit-transition:all .8s; transition:all .8s;}
.portfolio-item:hover .port-overlay { opacity:1; -webkit-transition:all 0.3s ease-in-out 0s; transition:all 0.3s ease-in-out 0s;}
.portfolio-item:hover .port-text:before { right:-100%;}
.portfolio-item:hover .port-cate:before { left:-100%;}

.grid-col-four .port-text { margin-bottom:0;}
.grid-col-four .port-text h4 { font-size:18px;}
.grid-col-four .port-btn-icon { right:15px; top:15px;}
.items .portfolio-item { margin-right:0; margin-left:0;}

/* Single Portfolio */
.portfolio-single { position:relative;}
.portfolio-content { position:relative; margin-bottom:30px; padding-bottom:15px; border-bottom:1px solid #aeaeae;}
.portfolio-metadeta { position:relative; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #aeaeae; display:inline-flex; justify-content:space-between; align-items:center;}
.portfolio-metadata-item { position:relative; flex:0 0 31%; display:flex; border:1px solid #c1c1c1; margin:10px;}
.port-meta-content { padding:12px 20px; flex:0 0 70%;}
.port-meta-content h6 { margin-bottom:5px;}
.port-meta-content p { margin-bottom:0;}
.port-meta-icon { background-color:#387478; color:#ffffff; font-size:2em; flex:0 0 30%; display:flex; align-items:center; justify-content:center;}
.portfolio-share { display:block; margin:0 0 20px 20px;}
.portfolio-share h6 { text-align:left; margin:10px 0;}

/* Single Related Portfolio */
.related-port .portfolio-item.col-4 { padding-left:0; padding-right:0;}
.related-port h3 { font-size:22px; text-transform:uppercase; font-weight:500; padding-bottom:10px; border-bottom:1px solid #aeaeae;}