.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:10px 10px; display:block;}
.port-inner { position:relative; overflow:hidden;}
.port-inner:before { position:absolute; content:''; width:100%; height:100%; top:0; left:0; opacity:0.8; background-image:-webkit-linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 54%, rgb(0,0, 0) 100%); background-image:linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 54%, rgb(0,0, 0) 100%); -webkit-transform:perspective(400px) rotateX(90deg) scaleY(0.5); -ms-transform:perspective(400px) rotateX(90deg) scaleY(0.5); transform:perspective(400px) rotateX(90deg) scaleY(0.5); -webkit-transform-origin:center; -ms-transform-origin:center; transform-origin:center; -webkit-transition-delay:0.1s; transition-delay:0.1s; -webkit-transition-timing-function:ease-in-out; transition-timing-function:ease-in-out; -webkit-transition-duration:0.4s; transition-duration:0.4s; -webkit-transition-property:all; transition-property:all; z-index:2;}
.port-inner:after { content:''; position:absolute; bottom:0; left:0; width:150px; height:155px; clip-path:polygon(0 0, 0% 100%, 100% 100%); background-color:#ffad2b; -webkit-transform:translateX(-150px); -ms-transform:translateX(-150px); transform:translateX(-150px); -webkit-transition:all 300ms ease; transition:all 300ms ease; z-index:3;}

.port-thumb { position:relative;}
.port-thumb img { width:100%; height:auto; display:block;}

.port-content { position:absolute; left:20px; bottom:20px; text-align:left; -webkit-transition:all 700ms ease; transition:all 700ms ease; z-index:5;}
.port-content h4 { position:relative; font-size:18px; font-weight:600; margin-bottom:10px; opacity:0; -webkit-transform:translateY(-40px); -ms-transform:translateY(-40px); transform:translateY(-40px); -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.port-content h4 a { color:#191919; padding:5px 15px; background-color:#ffffff; text-transform:capitalize; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.port-content h4 a:hover { background-color:#191919; color:#ffad2b;}
.portfolio-category { position:relative; display:inline-flex; opacity:0; -webkit-transform:translateY(-20px); -ms-transform:translateY(-20px); transform:translateY(-20px); -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.portfolio-category a { padding:5px 15px; background-color:#191919; color:#ffad2b; font-size:14px; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
.portfolio-category a:hover { background-color:#ffffff; color:#191919;}

.port-icon { position:absolute; top:20px; left:20px; color:#191919; font-size:20px; background-color:#ffffff; height:60px; width:60px; text-align:center; line-height:60px; border-radius:30px; opacity:0; visibility:hidden; -webkit-transform:scale(0); -ms-transform:scale(0); transform:scale(0); -webkit-transition:all 700ms ease; transition:all 700ms ease; z-index:2; cursor:pointer;}
.port-icon:before { content:''; position:absolute; right:0; left:40%; top:100%; height:115px; width:6px; text-align:center; background-image:-webkit-linear-gradient(90deg, #ffad2b 0%, rgba(255, 255, 255, 0) 100%); -webkit-transform:rotate(-180deg); -ms-transform:rotate(-180deg); transform:rotate(-180deg); -webkit-transition:all 500ms ease; transition:all 500ms ease;}
.port-icon:after { content:''; position:absolute; left:100%; top:50%; width:115px; height:6px; background-image:-webkit-linear-gradient(0deg, #ffad2b 0%, rgba(255, 255, 255, 0.01) 99%, #ffad2b 100%); -webkit-transition:all 700ms ease; transition:all 700ms ease; z-index:999999;}
.port-icon a { -webkit-transition:0.3s; transition:0.3s;}

.portfolio-item:hover .port-inner:before { -webkit-transform:perspective(400px) rotateX(0deg) scaleY(1); -ms-transform:perspective(400px) rotateX(0deg) scaleY(1); transform:perspective(400px) rotateX(0deg) scaleY(1); -webkit-transition-delay:0.1s; transition-delay:0.1s; -webkit-transition-timing-function:ease-in-out; transition-timing-function:ease-in-out; -webkit-transition-duration:0.7s; transition-duration:0.7s; -webkit-transition-property:all; transition-property:all;}
.portfolio-item:hover .port-inner:after { transform:none;}
.portfolio-item:hover .port-content h4 { opacity:1; -webkit-transform:translate(0); -ms-transform:translate(0); transform:translate(0); -webkit-transition-delay:400ms; transition-delay:400ms;}
.portfolio-item:hover .portfolio-category { opacity:1; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); -webkit-transition-delay:200ms; transition-delay:200ms;}
.portfolio-item:hover .port-icon { visibility:visible; opacity:1; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition-delay:500ms; transition-delay:500ms;}

.grid-col-four .port-content h4 { font-size:16px;}

/* Single Portfolio */
.portfolio-single { position:relative;}
.portfolio-single .portfolio-content { width:100%; position:relative; margin-bottom:30px; padding-bottom:15px; border-bottom:1px solid #191919;}
.portfolio-metadeta { position:relative; width:100%;}
.portfolio-metadata-item { position:relative; display:block; text-align:center; margin-bottom:30px;}
.portfolio-metadata-item span { display:block; font-size:17px; padding:5px 0;}
.portfolio-metadata-item h4 { position:relative; font-size:17px; font-weight:500; z-index:5; display:block; margin-bottom:10px; text-transform:capitalize; letter-spacing:1px; padding:12px 30px 7px; background-color:#191919; color:#ffffff; -webkit-transition:all .4s; transition:all .4s;}

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