.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:0px 10px 30px; -webkit-transition-duration:0.5s; transition-duration:0.5s;}
.project-inner { position:relative; width:100%; text-align:center;}

.project-thumb { position:relative; overflow:hidden;}
.project-thumb img { width:100%; height:auto; display:block;}
.project-content { padding:40px; position:absolute; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; z-index:3; top:0; left:0; width:100%; height:100%; text-align:left; opacity:0; -webkit-transition:0.5s; transition:0.5s; overflow:hidden;}
.proj-btn-icon { width:100%; position:relative; z-index:2; align-self:flex-end; flex-grow:1; margin-top:12px; -webkit-transition:0.4s; transition:0.4s;}
.proj-icon { position:absolute; top:0px; right:0px; width:50px; height:50px; line-height:50px; border-radius:50%; color:inherit; text-align:center; background-color:#ffffff;}
.proj-icon:after { content:''; position:absolute; z-index:-1; top:-24%; left:-24%; width:150%; height:150%; border:1px solid #ffffff; border-radius:50%; -webkit-transform:scale(0.3); -ms-transform:scale(0.3); transform:scale(0.3); -webkit-transition:0.6s; transition:0.6s;}
.project-description { position:relative; text-align:left; -webkit-transition:0.3s; transition:0.3s; z-index:2;}
.project-description div:nth-child(2) { -webkit-transition:0.7s; transition:0.7s;}
.proj-cate { -webkit-transition:0.5s; transition:0.5s; opacity:0; -webkit-transform:translateY(40px); -ms-transform:translateY(40px); transform:translateY(40px);}
.project-category a { color:#62a11f; font-size:16px; -webkit-transition:0.5s; transition:0.5s;}
.proj-title { opacity:2; -webkit-transform:translateY(40px); -ms-transform:translateY(40px); transform:translateY(40px);}
.proj-title h4 { font-size:22px; color:#ffffff; margin-bottom:0; padding-top:10px; text-transform:capitalize;}
.proj-title h4 a { color:#ffffff;}
.project-link { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; display:block; opacity:0; -webkit-transition:0.5s; transition:0.5s; font-size:24px;}
.project-overlay { position:absolute; background-color:rgba(0,0,0,0.7); z-index:1; top:0; left:0; width:100%; height:100%; opacity:0; -webkit-transition:0.5s; transition:0.5s;}

.proj-icon:hover { background-color:#62a11f; color:#ffffff;}
.proj-icon:hover::after { border-color:#62a11f;}
.project-item:hover .project-content, .project-item:hover .project-link, .project-item:hover .project-overlay { opacity:1;}
.project-item:hover .proj-btn-icon { margin-top:25px;}
.project-item:hover .proj-icon:after { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
.project-item:hover .proj-cate { opacity:1; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0);}
.project-item:hover .proj-title { opacity:1; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0);}

/* Single Portfolio */
.project-single { position:relative;}
.project-single-content { position:relative; margin-bottom:30px; padding-bottom:15px; border-bottom:1px solid #aeaeae;}
.project-metadeta { position:relative; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #aeaeae; display:inline-flex; justify-content:space-between; align-items:center;}
.project-metadata-item { position:relative; flex:0 0 31%; display:flex; border:1px solid #c1c1c1; margin:10px;}
.proj-meta-content { padding:12px 20px; flex:0 0 70%;}
.proj-meta-content h6 { margin-bottom:5px;}
.proj-meta-content p { margin-bottom:0;}
.proj-meta-icon { background-color:#62a11f; color:#ffffff; font-size:2em; flex:0 0 30%; display:flex; align-items:center; justify-content:center;}
.project-share { display:block; margin:0 0 20px 20px;}
.project-share h6 { text-align:left; margin:10px 0;}

/* Single Related Portfolio */
.related-project .project-item.col-4 { padding-left:0; padding-right:0;}
.related-project h3 { font-size:22px; text-transform:uppercase; font-weight:500; padding-bottom:10px; border-bottom:1px solid #aeaeae;}