.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;}
.port-inner { position:relative; display:block; overflow:hidden;}
.port-thumb { position:relative; overflow:hidden;}
.port-thumb img { width:100%; height:auto; display:block; -webkit-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);}
.port-content { background-color:rgba(0,0,0,0.8); width:100%; height:100%; position:absolute; left:0; top:0; display:flex; text-align:center; align-items:center; justify-content:center; color:#ffffff; visibility:hidden; overflow:hidden; opacity:0; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
.port-content:before, .port-content:after { width:20px; height:20px; border-width:4px; background-color:transparent; position:absolute; right:50px; top:50px; content:''; -webkit-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; visibility:hidden; opacity:0;}
.port-content:before { border-right:3px solid #ffffff; border-top:3px solid #ffffff;}
.port-content:after { right:auto; left:50px; top:auto; bottom:50px; border-left:3px solid #ffffff; border-bottom:3px solid #ffffff;}
.port-info { position:relative;}
.port-info h4 { font-size:24px; margin-bottom:5px; text-transform:capitalize;}
.port-info h4 a { color:#ffffff;}
.portfolio-category a { color:#9c5451; font-size:15px;}
.portfolio-meta { position:absolute; top:50px; 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:#9c5451; font-size:15px; color:#ffffff;}
.portfolio-meta a:hover { background-color:#ffffff; color:#101010;}
.portfolio-item:hover .port-thumb img { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1);}
.portfolio-item:hover .port-content { visibility:visible; opacity:1;}
.portfolio-item:hover .port-content:before { right:10px; top:10px; visibility:visible; opacity:1; -webkit-animation-delay:0.2s; animation-delay:0.2s;}
.portfolio-item:hover .port-content:after { left:10px; bottom:10px; visibility:visible; opacity:1; -webkit-animation-delay:0.2s; animation-delay:0.2s;}
.portfolio-item:hover .portfolio-meta { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition-delay:500ms; transition-delay:500ms;}

.portfolio-main .grid-col-four .portfolio-meta  { display:none;}

/* 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;}
.portfolio-metadata-item { position:relative; display:block; text-align:center; margin-bottom:20px;}
.portfolio-metadata-item h4 { font:600 18px/1 'Barlow Condensed'; position:relative; padding:11px 30px; display:block; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:10px;}
.portfolio-metadata-item h4:before { content:''; position:absolute; left:0; top:0; right:11px; bottom:0; border-left:2px solid #101010; border-bottom:2px solid #101010; -webkit-transition:all 0.15s ease-out; transition:all 0.15s ease-out;}
.portfolio-metadata-item h4:after { content:''; position:absolute; left:11px; top:0; right:0; bottom:0; border-right:2px solid #101010; border-top:2px solid #101010; -webkit-transition:all 0.15s ease-out; transition:all 0.15s ease-out;}
.portfolio-metadata-item:hover h4 { color:#9c5451;}
.portfolio-metadata-item:hover h4:before { left:11px; border-left-color:#9c5451; border-bottom-color:#9c5451;}
.portfolio-metadata-item:hover h4:after { right:11px; border-right-color:#9c5451; border-top-color:#9c5451;}
.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; margin:0 5px;}
.portfolio-single .image-carousel{ margin:0 auto 50px; }

/* Related Portfolio Posts */
.related-port { position:relative;}
.related-port h3 { position:relative; padding:10px 25px 10px 0; display:block; font-size:25px; font-weight:500; border-bottom:2px solid #9c5451; text-transform:uppercase;}
.rel-port-inner { position:relative; display:flex;}
.rel-port-inner .portfolio-item.col-4 { padding:0; margin-left:10px; margin-right:10px;}