.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;}
.grid-col-four .port-content { left:20px; bottom:20px;}
.grid-col-four .port-content h4 { font-size:16px;}

.port-details { position:relative; display:block; border-radius:10px; overflow:hidden; z-index:1;}
.port-details:before { content:''; position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.8); -webkit-transition:all 500ms ease; transition:all 500ms ease; opacity:1; -webkit-transform-origin:bottom; transform-origin:bottom; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:scaleY(0); -ms-transform:scaleY(0); transform:scaleY(0); z-index:1;}
.port-details img { width:100%; height:auto; display:block; border-radius:10px;}
.port-content { position:absolute; left:40px; bottom:40px; text-align:left; z-index:2; border-top:2px solid #832732; padding-top:15px; -webkit-transform:translateY(-100px); -ms-transform:translateY(-100px); transform:translateY(-100px); opacity:0; -webkit-transition:all 500ms ease; transition:all 500ms ease;}

.port-content h4 { font-size:20px; margin-bottom:5px;}
.port-content h4 a { color:#ffffff;}
.portfolio-category a { color:#832732;}

.portfolio-meta { position:absolute; top:30px; right:30px; -webkit-transform:scale(0); transform:scale(0); -webkit-transition:all 500ms ease; transition:all 500ms ease; z-index:2;}
.portfolio-meta a { position:relative; display:inline-flex; align-items:center; justify-content:center; height:40px; width:40px; margin:0 2px; background-color:#832732; border-radius:50%; font-size:15px; color:#ffffff;}
.portfolio-meta a:hover { background-color:#ffffff; color:#201c15;}

.portfolio-item:hover .port-details:before { -webkit-transform:scaleY(1); -ms-transform:scaleY(1); transform:scaleY(1);}
.portfolio-item:hover .port-content { -webkit-transform:translateY(0px); -ms-transform:translateY(0px); transform:translateY(0px); opacity:1;}
.portfolio-item:hover .portfolio-meta { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition-delay:500ms; transition-delay:500ms;}

/* 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; border-bottom:1px solid #aeaeae;}
.portfolio-metadata-item:first-child { padding-top:0;}
.portfolio-metadata-item h6 { color:#832732; position:relative; font-size:20px; padding:5px 25px 15px; margin-bottom:10px;}

.portfolio-metadata-item h6:before { position:absolute; content:''; background-color:#201c15; height:3px; bottom:0px; left:calc(50% - 60px); width:20px; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);}
.portfolio-metadata-item h6:after { position:absolute; content:''; width:100px; height:3px; bottom:0px; left:calc(50% - -10px); background-color:#832732; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); -webkit-transition:all 0.3s ease; transition:all 0.3s ease;}
.portfolio-metadata-item span.portmeta-btm { background:none; color:#201c15;}
.portfolio-metadata-item span.portmeta-btm:before { content:none;}
.portfolio-metadata-item:hover h6:before { width:100px; left:calc(50% - 10px);}
.portfolio-metadata-item:hover h6:after { width:20px; left:calc(50% - -60px);}

.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; color:#201c15; 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;}