.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;}
.portfolio-inner { position:relative; -webkit-transition-duration:0.8s; transition-duration:0.8s;}
.port-thumb { position:relative; overflow:hidden;}
.port-thumb img { width:100%; height:auto; display:block; -webkit-transition:all 1.5s ease; transition:all 1.5s ease;}
.port-overlay { position:absolute; display:flex; justify-content:center; opacity:0; bottom:0; left:0; right:0; width:100%; height:100%; overflow:hidden; background-color:rgba(0, 0, 0, 0.8); -webkit-transition:all 0.5s; transition:all 0.5s; -webkit-transition-timing-function:ease-in-out; transition-timing-function:ease-in-out; -webkit-transition-duration:.2s; transition-duration:.2s; -webkit-box-flex:1; flex-direction:column; -webkit-box-pack:center; -webkit-box-align:center;}

.port-icon { width:100%; height:auto; text-align:center; position:relative; z-index:2; margin-bottom:20px; margin-top:10px; -webkit-transition:all 0.6s ease; transition:all 0.6s ease;}
.port-icon a { position:relative; bottom:100%; z-index:1; text-align:center; display:inline-block; height:40px; width:40px; font-size:16px; line-height:42px; margin:0px 5px; background-color:#ffffff; border-radius:8px; color:#252525; -webkit-transition:all 0.4s; transition:all 0.4s; -webkit-transform:translateY(-60px); -ms-transform:translateY(-60px); transform:translateY(-60px);}
.port-icon a:hover { background-color:#e48824; color:#ffffff;}

.port-details { bottom:auto; right:0; border:0; position:relative; height:auto; text-align:center; padding:0 10px; z-index:1; -webkit-transition:all 0.6s ease; transition:all 0.6s ease;}
.port-details h5 { margin-bottom:10px; font-size:20px; font-weight:500; -webkit-transform:scale(0.8); -ms-transform:scale(0.8); transform:scale(0.8); -webkit-transition:all 0.4s; transition:all 0.4s;}
.port-details h5 a { color:#ffffff;}
.port-details .portfolio-category { position:relative; bottom:0; -webkit-transform:translateY(30px); -ms-transform:translateY(30px); transform:translateY(30px); -webkit-transition:all 0.4s; transition:all 0.4s;}
.port-details .portfolio-category a { color:#e48824; font-size:16px;}

.portfolio-item:hover .port-thumb img { -webkit-transform:scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2);}
.portfolio-item:hover .port-overlay { opacity:1;}
.portfolio-item:hover .port-icon a { bottom:0px; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0);}
.portfolio-item:hover .port-details h5 { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
.portfolio-item:hover .port-details .portfolio-category { bottom:0; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0);}

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

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