.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:15px 15px 15px; display:block; -webkit-transition:all 200ms linear; transition:all 200ms linear; -webkit-transition-delay:0.1s; transition-delay:0.1s;}

.port-inner { position:relative;}

.port-thumb { position:relative; overflow:hidden;}
.port-thumb:before, .port-thumb:after { position:absolute; content:''; height:0; width:0; -webkit-transition:all 400ms linear; transition:all 400ms linear; background:rgba(0, 0, 0, .35);}
.port-thumb:before { left:0; margin:auto; top:0; z-index:9;}
.port-thumb:after { right:0; bottom:0;}
.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; color:#ffffff; background:none !important;}
.portfolio-meta { position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin:auto; width:111px; height:45px; z-index:9; -webkit-transition:all 0.6s ease; transition:all 0.6s ease;}
.portfolio-meta:after { content:''; position:absolute; width:0; height:200%; left:0px; top:-76%; margin:-5px 0 0 -5px; -webkit-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0; -webkit-transform:rotate(30deg); -ms-transform:rotate(30deg); transform:rotate(30deg); z-index:0; -webkit-transition:all 0.4s ease-out; transition:all 0.4s ease-out;}
.portfolio-meta a { position:relative; margin:0px 5px; display:inline-block; height:45px; width:45px; font-size:20px; line-height:50px; z-index:1; text-align:center; color:#ffffff; background:none; -webkit-transition:all 0.6s ease; transition:all 0.6s ease;}
.portfolio-meta a:first-child { right:auto; left:-30px; bottom:0; -webkit-transition:all 0.6s ease; transition:all 0.6s ease;}
.portfolio-meta a:last-child { left:auto; bottom:0px; margin-left:0px; right:0; -webkit-transition:all 0.6s ease; transition:all 0.6s ease;}

.portfolio-meta .meta-hexagon { height:41px; width:72px; background-color:#9f7150; display:inline-block; position:relative;}
.corner1 { background:inherit; content:''; height:100%; left:0; position:absolute; top:0; width:100%; -webkit-transform:rotate(60deg); -ms-transform:rotate(60deg); transform:rotate(60deg);}
.corner2 { background:inherit; content:''; height:100%; left:0; position:absolute; top:0; width:100%; -webkit-transform:rotate(-60deg); -ms-transform:rotate(-60deg); transform:rotate(-60deg);}
.overlay-inside { display:inline-block; font-size:20px; left:0; right:0; line-height:140px; border-radius:50px; color:#ffffff; height:100%; margin:0 auto; position:absolute; text-align:center; top:-50px; z-index:500;}

.portfolio-item:hover .port-thumb:before, .portfolio-item:hover .port-thumb:after { width:100%; height:100%;}
.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 .portfolio-meta:after { width:70%;}
.portfolio-item:hover .portfolio-meta a:first-child { right:auto; bottom:0;}
.portfolio-item:hover .portfolio-meta a:last-child { left:auto; right:0; bottom:0;}
.portfolio-item:hover .portfolio-meta .meta-hexagon { -webkit-animation:pulse 1.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); -ms-animation:pulse 1.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); animation:pulse 1.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);}

@-webkit-keyframes pulse {
	0% {
        transform: scale(1);
      }
    50% {
    transform: scale(1.1);
    }
    100% {
    transform: scale(1);
    }
}
@keyframes pulse {
	0% {
        transform: scale(1);
      }
    50% {
    transform: scale(1.1);
    }
    100% {
    transform: scale(1);
    }
}

/* Single Portfolio */
.portfolio-single { position:relative;}
.portfolio-single .portfolio-content { flex:0 0 65%; position:relative;}
.portfolio-metadeta { position:relative; flex:0 0 30%; margin-left:auto; text-align:center;}
.portfolio-metadata-item{ display:block; padding-bottom:15px; padding-top:15px;}
.portfolio-metadata-item:first-child { padding-top:0;}

.portfolio-metadata-item h6 { position:relative; overflow:hidden; display:block; text-transform:capitalize; text-align:center; background-color:transparent; color:#1b1d27; font-size:22px; line-height:22px; line-height:1; padding:12px 40px; border:1px solid; -webkit-transition:all 600ms ease; transition:all 600ms ease; z-index:99;}
.portfolio-metadata-item h6:before, .portfolio-metadata-item h6:after { content:''; position:absolute; height:100%; top:0; left:0; width:100%; background-color:#1b1d27; z-index:-1; -webkit-transition:all 0.4s ease-out; transition:all 0.4s ease-out; border-radius:99px;}
.portfolio-metadata-item h6:before { -webkit-transform:scaleY(0); -ms-transform:scaleY(0); transform:scaleY(0);}
.portfolio-metadata-item h6:after { -webkit-transform:scaleX(0); -ms-transform:scaleX(0); transform:scaleX(0);}
.portfolio-metadata-item:hover h6 { border-color:#9f7150; color:#ffffff;}
.portfolio-metadata-item:hover h6:after, .portfolio-metadata-item:hover h6:before { background-color:#9f7150; border-radius:0; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}

.portfolio-share { text-align:center; display:block; margin-top:20px;}
.portfolio-share ul.social-share-post{ margin:0; border-radius:0; display:inline-block; text-align:center; }
.portfolio-share ul.social-share-post li{ border-radius:0; }
.portfolio-single .image-carousel{ margin:0 auto 50px; }

/* Related Portfolio Posts */
.related-port { position:relative;}
.related-port h3 { position:relative; text-transform:uppercase; padding:10px 25px 10px 0; display:block; font-size:20px; font-weight:700; border-bottom:2px solid #aeaeae;}
.rel-port-inner { position:relative; display:flex;}
.rel-port-inner .portfolio-item.col-4 { padding:0; margin-left:10px; margin-right:10px;}