.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 .3s linear 0s; transition:all .3s linear 0s;}
.port-inner { position:relative; overflow:hidden; display:inline-block; width:100%; -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; border-radius:3px;}
.port-thumb { position:relative;}
.port-thumb:before { content:''; position:absolute; bottom:0; left:0; height:0%; width:100%; border-radius:inherit; background:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8))); background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); -webkit-transition:0.4s ease-in-out; transition:0.4s ease-in-out; visibility:hidden; opacity:0; z-index:1;}

.port-thumb img { width:100%; height:auto; display:block; -o-object-fit:cover; object-fit:cover; -webkit-transition:1.3s all ease; transition:1.3s all ease; border-radius:25px;}
.port-single-page { position:absolute; top:30px; right:30px; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; align-items:center; justify-content:center; opacity:0; -webkit-transition:all 300ms linear 0s; transition:all 300ms linear 0s;}
.port-single-page i { display:inline-flex; width:50px; height:50px; line-height:50px; font-size:16px; background-color:#396cf0; align-items:center; justify-content:center; color:#ffffff; border-radius:3px; -webkit-transition:all 0.5s ease; transition:all 0.5s ease;}
.port-single-page i:hover { background-color:#1c1c24; color:#ffffff;}

.port-content { background-color:#ffffff; padding:15px 10px; left:30px; right:30px; bottom:-15px; position:absolute; opacity:0; -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; text-align:center; border-radius:3px;}

.portfolio-category a { font-size:15px; color:#396cf0; font-weight:600; display:block; margin-bottom:5px;}
.port-content h4 { font-size:18px; text-transform:capitalize; margin-bottom:0;}

.portfolio-item:hover .port-thumb:before { opacity:1; height:100%; visibility:visible;}
.portfolio-item:hover .port-thumb img { -webkit-transform:scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2);}
.portfolio-item:hover .port-single-page { opacity:1; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); z-index:9;}
.portfolio-item:hover .port-content { opacity:1; z-index:10; bottom:30px;}

.grid-col-four .port-content h4 { font-size:15px;}
.grid-col-four .port-single-page { top:15px; right:15px;}
.grid-col-four .port-single-page i { width:40px; height:40px; line-height:40px; font-size:14px;}
.grid-col-four .port-content { left:15px; right:15px;}

/* Single Portfolio */
.portfolio-single { position:relative;}
.portfolio-single .portfolio-content { position:relative;}
.portfolio-metadeta { position:relative;}
.portfolio-metadata-item{ display:block; padding-bottom:15px; padding-top:15px; border:1px solid #f0f0f0; text-align:center;}
.portfolio-metadata-item:first-child { padding-top:0;}

.portfolio-metadata-item h6 { position:relative; display:block; text-transform:capitalize; text-align:center; font-size:16px; font-weight:700; letter-spacing:2px; margin-bottom:10px; padding:7px 10px; background-color:#1c1c24; color:#ffffff; -webkit-transition:all 600ms ease; transition:all 600ms ease; z-index:0;}
.portmeta-btm { color:#1c1c24; display:block;}
.portmeta-btm a { color:#1c1c24; text-decoration:none;}
.portmeta-btm a:hover { color:#396cf0;}

.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;}