.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 { 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:0; right:0; bottom:40px; text-align:center; z-index:2; border-top:2px solid #cf4a46; padding:15px 10px 0; -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:#cf4a46;}

.portfolio-meta { position:absolute; top:30px; left:0; right:0; -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:#cf4a46; font-size:15px; color:#ffffff;}
.portfolio-meta a:hover { background-color:#ffffff; color:#1f1d1d;}

.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:#ffffff; background-color:#1f1d1d; border-radius:30px; position:relative; font-size:20px; padding:10px 25px; margin-bottom:10px; border-bottom:5px solid #cf4a46;}

.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:#1f1d1d; 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;}