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

.portf-rotator .items .portfolio-item { margin:0;}

.portfolio-item { position:relative; margin:15px;}
.portfolio-inner { position:relative; display:block; text-align:center; overflow:hidden;}
.portfolio-inner:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; border:1px dashed #6aaf08;}
.port-thumb { position:relative; display:block; background-color:#000000; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; z-index:5;}
.port-thumb:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; z-index:1;}
.port-thumb img { width:100%; height:auto; display:block; position:relative; -webkit-transition:all 0.5s ease; transition:all 0.5s ease;}

.port-hover { position:absolute; left:0; top:0; width:100%; height:100%; display:block; z-index:5; color:#ffffff;}
.port-content { position:absolute; left:0; bottom:-60px; width:100%; display:block; -webkit-transition:all 0.5s ease; transition:all 0.5s ease;}
.portfolio-category { display:inline-block; position:relative; margin-bottom:15px;}
.portfolio-category a { font-size:16px; text-transform:capitalize; color:#ffffff; padding:5px 20px; background-color:#6aaf08; border-radius:30px;}
.portfolio-category a:hover { color:#111111;}
.port-content h4 { margin-bottom:0; font-size:18px; display:block; padding:15px 30px; background-color:rgba(0,0,0,0.7);}
.port-content h4 a { color:#ffffff;}
.port-meta { position:relative; display:block; margin-top:30px;}
.port-meta a { position:relative; display:inline-block; margin:0 5px; vertical-align:top; width:45px; height:45px; line-height:45px; font-size:18px; text-align:center; color:#ffffff; background-color:#6aaf08; border-radius:50%; -webkit-transform:scale(0) rotate(360deg); -ms-transform:scale(0) rotate(360deg); transform:scale(0) rotate(360deg); -webkit-transition:all 0.5s ease; transition:all 0.5s ease;}
.port-meta a:hover { background-color:#ffffff; color:#6aaf08;}

.portfolio-item:hover .port-thumb { margin:20px 20px;}
.portfolio-item:hover .port-thumb img { opacity:0.30;}
.portfolio-item:hover .port-content { bottom:50%; margin-bottom:-110px;}
.portfolio-item:hover .port-meta a { -webkit-transform:scale(1) rotate(0deg); -ms-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg);}
.portfolio-item:hover .port-content h4 { background:none;}

.grid-col-four .portfolio-item .port-content h4 { padding-top:10px; padding-bottom:10px; font-size:16px;}
.grid-col-four .portfolio-item .port-meta { margin-top:18px;}
.grid-col-four .portfolio-item:hover .port-content { bottom:60%;}
.grid-col-four .portfolio-item .port-content { bottom:-50px;}

/* Single Portfolio */
.portfolio-single { position:relative;}
.portfolio-content { position:relative; display:inline-block; width:70%; padding-right:30px;}
.portfolio-metadeta { position:relative; margin-bottom:20px; padding:0 20px 25px 20px; display:inline-block; width:30%; background-color:#eaeaea;}
.portfolio-metadeta h3 { padding:15px 0; border-bottom:1px solid #111111; }
.portfolio-metadata-item { padding:10px 20px; background-color:#ffffff; border-radius:5px; flex:auto; margin-bottom:10px;}
.portfolio-metadata-item span { width:50%; text-align:left; display:inline-flex; justify-content:space-between; align-items:center; font-size:16px; padding:0 5px;}
.portfolio-share { display:block; text-align:center; margin-top:25px;}
.related-port { position:relative;}
.related-port h3 { padding-bottom:10px; border-bottom:1px solid #aeaeae;}
.related-port .portfolio-item.col-4 { margin-left:0; margin-right:0;}