.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; padding:0;}
.portfolio-item.col-4 { padding:0;}
.port-inner { position:relative;}
.port-thumb { position:relative; overflow:hidden;}
.port-thumb:before { content:''; position:absolute; max-width:100%; bottom:0; left:0; right:0; top:-100%; width:100%; height:100%; background-color:rgba(0,0,0,0.8); opacity:0; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.port-thumb img { width:100%; height:auto; display:block; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out;}
.port-overlay { background-color:#ffb100; position:absolute; left:0; bottom:0; right:auto; width:100%; margin-bottom:0; text-align:center; padding:25px 15px; -webkit-transform:perspective(500px) rotateX(90deg); -ms-transform:perspective(500px) rotateX(90deg); transform:perspective(500px) rotateX(90deg); -webkit-transition:all .5s; transition:all .5s; -webkit-transform-origin:bottom; -ms-transform-origin:bottom; transform-origin:bottom; z-index:1; align-items:center; justify-content:center; display:flex; flex-direction:column; color:#ffffff;}
.port-overlay h4 { margin-bottom:0; text-transform:capitalize; font-weight:500;}
.port-overlay h4 a { color:#ffffff;}
.portfolio-category { display:block; margin-bottom:5px;}
.portfolio-category a { color:#111111; font-size:20px; font-weight:500; text-transform:capitalize;}
.portfolio-category a:hover { color:#ffffff;}
.portfolio-meta { position:absolute; top:20px; right:5px; margin:0; width:55px; opacity:0; z-index:9; -webkit-transform:translateX(50px); -ms-transform:translateX(50px); transform:translateX(50px); -webkit-transition:all 0.5s ease; transition:all 0.5s ease; display:inline-block;}
.portfolio-meta a { padding:14px; background-color:#ffb100; color:#111111; display:inline-block; width:50px; height:50px; margin:2px;}
.portfolio-meta a:hover { background-color:#111111; color:#ffb100;}

.portfolio-item:hover .port-thumb:before { top:0; opacity:1; z-index:1; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.portfolio-item:hover .port-thumb img { animation-name:imagemove; animation-duration:3s; animation-timing-function:ease-out; animation-delay:0s; animation-direction:alternate; animation-iteration-count:infinite; animation-fill-mode:none; animation-play-state:running; -webkit-animation-name:imagemove; -webkit-animation-duration:3s; -webkit-animation-timing-function:ease-out; -webkit-animation-delay:0s; -webkit-animation-direction:alternate; -webkit-animation-iteration-count:infinite; -webkit-animation-fill-mode:none; -webkit-animation-play-state:running;}
.portfolio-item:hover .port-overlay { -webkit-transform:perspective(500px) rotateX(0); -ms-transform:perspective(500px) rotateX(0); transform:perspective(500px) rotateX(0);}
.portfolio-item:hover .portfolio-meta { opacity:1; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0);}

.grid-col-four .portfolio-item .port-overlay { padding:15px 10px;}
.grid-col-four .portfolio-item .port-overlay h4 { font-size:20px;}
.grid-col-four .portfolio-item .port-overlay .portfolio-category a { font-size:16px;}
.grid-col-four .portfolio-item .portfolio-meta a { width:40px; height:40px; padding:8px;}

@keyframes imagemove {
	0% {
        -webkit-transform: rotate(0deg) scale(1);
        -ms-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(5deg) scale(1.1);
        -ms-transform: rotate(5deg) scale(1.1);
        transform: rotate(5deg) scale(1.1);
    }
}

/* Single Portfolio */
.portfolio-single { position:relative;}
.portfolio-metadeta { position:relative; margin-bottom:20px;}
.portfolio-metadata-item { padding:10px 20px; border:1px solid #ffb100; margin:0 15px; text-align:center; flex:auto;}
.portfolio-metadata-item span { display:inline-block; color:#ffb100; font-size:18px; margin-right:10px;}
.portfolio-share { display:block; text-align:center; margin-top:25px;}