.project-main{ position:relative;}
.project-main .grid-col-two{ width:50%; float:none; }
.project-main .grid-col-three{ width:33.3333%; float:none; }
.project-main .grid-col-four{ width:25%; float:none; }

.project-item { position:relative; margin:15px 0 15px; display:block;}
.project-inner { position:relative; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0);}

.project-thumb { position:relative; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); overflow:hidden;}
.project-thumb img { width:100%; height:auto; display:block; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}
.project-overlay { position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.7); opacity:0; -webkit-transition:all 0.3s ease; transition:all 0.3s ease;}

.project-link { position:absolute; width:65px; height:65px; display:flex; justify-content:center; align-items:center; text-align:center; font-size:20px; color:#ffffff; background-color:#ffad2b; top:50%; left:50%; -webkit-transform:translate(-50%, -50%) perspective(500px) rotate(45deg); -ms-transform:translate(-50%, -50%) perspective(500px) rotate(45deg); transform:translate(-50%, -50%) perspective(500px) rotate(45deg); opacity:0; -webkit-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform-origin:center center; -ms-transform-origin:center center; transform-origin:center center; -webkit-transition:transform 0.5s ease 0s, opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s; transition:transform 0.5s ease 0s, opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s}
.project-link:before { content:''; width:100%; height:100%; position:absolute; left:-10px; top:-10px; background-color:#ffffff; opacity:0.3; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; z-index:-1;}

.project-content { background-color:#ffffff; padding:25px 85px 30px 30px; margin:-70px 0 0 auto; width:95%; box-shadow:0 0 20px 5px rgba(0,0,0, 0.0509803922); z-index:1; -webkit-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:all 0.5s ease; transition:all 0.5s ease;}
.project-content h4 { font-size:20px; margin-bottom:0;}
.project-content h4 a { color:#191919;}
.project-category { font-size:14px; display:block;}
.project-category a { color:#ffad2b;}

.project-btn { position:absolute; top:0; right:0; height:100%; background-color:#191919; color:#ffffff; font-size:15px; padding:20px; display:flex; align-items:center;}

.project-content.visible-hover { position:absolute; top:100%; right:0%; width:95%; -webkit-transform:perspective(400px) rotateX(-90deg); -ms-transform:perspective(400px) rotateX(-90deg); transform:perspective(400px) rotateX(-90deg);}

.project-item:hover .project-inner { -webkit-transform:translateY(-76px); -ms-transform:translateY(-76px); transform:translateY(-76px);}
.project-item:hover .project-thumb { -webkit-transform:translateY(76px); -ms-transform:translateY(76px); transform:translateY(76px);}
.project-item:hover .project-thumb img { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1);}
.project-item:hover .project-overlay { opacity:1;}
.project-item:hover .project-link { color:#191919; opacity:1; -webkit-transform:translate(-50%, -50%) perspective(500px) rotate(0); -ms-transform:translate(-50%, -50%) perspective(500px) rotate(0); transform:translate(-50%, -50%) perspective(500px) rotate(0); -webkit-transition:transform 0.5s ease 0.5s, opacity 0.5s ease 0.5s, -webkit-transform 0.5s ease 0.5s; transition:transform 0.5s ease 0.5s, opacity 0.5s ease 0.5s, -webkit-transform 0.5s ease 0.5s;}
.project-item:hover .project-content { opacity:0; -webkit-transform:rotateX(90deg) translateY(76px); -ms-transform:rotateX(90deg) translateY(76px); transform:rotateX(90deg) translateY(76px);}
.project-item:hover .project-btn { background-color:#ffad2b;}
.project-btn:hover { color:#191919;}
.project-item:hover .project-content.visible-hover { opacity:1; -webkit-transform:perspective(400px) rotateX(0) translateY(27px); -ms-transform:perspective(400px) rotateX(0) translateY(27px); transform:perspective(400px) rotateX(0) translateY(27px);}

.col-3 .project-item .project-content { padding-right:65px; padding-left:15px;}
.col-3 .project-item .project-content h4 { font-size:16px;}
.col-3 .project-item .project-link { display:none;}

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

.project-share { text-align:center; display:block; margin-top:20px;}
.project-share ul.social-share-post{ margin:0; border-radius:0; display:inline-block; text-align:center; }
.project-share ul.social-share-post li{ border-radius:0; margin:0 5px;}
.project-single .image-carousel{ margin:0 auto 50px; }

/* Related Portfolio Posts */
.related-project { position:relative;}
.related-project 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-project-inner { position:relative; display:flex;}
.rel-project-inner .project-item.col-4 { padding:0; margin-left:10px; margin-right:10px;}