.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:15px 0; padding:0;}
.portfolio-item.col-4 { padding:0;}
.port-inner { position:relative; overflow:hidden;}
.port-thumb { position:relative; display:inline-block; width:100%; vertical-align:middle; -webkit-transform:scale(1.0006); -ms-transform:scale(1.0006); transform:scale(1.0006);}
.port-thumb img { width:100%; height:auto; display:block; -webkit-transition:all .42s cubic-bezier(.645,.045,.355,1); transition:all .42s cubic-bezier(.645,.045,.355,1);}

.trim-line { position:absolute; background-color:#738ea5;  -webkit-transition:transform .35s ease-out; transition:transform .35s ease-out;}
.trim-line-top { top:0; left:0; right:0; height:10px;  -webkit-transform:translate3d(0,-12px,0); -ms-transform:translate3d(0,-12px,0); transform:translate3d(0,-12px,0);}
.trim-line-right { top:0; right:0; bottom:0; width:10px; -webkit-transform:translate3d(12px,0,0); -ms-transform: translate3d(12px,0,0); transform:translate3d(12px,0,0);}
.trim-line-bottom { bottom:0; left:0; right:0; height:10px; -webkit-transform:translate3d(0,12px,0); -ms-transform: translate3d(0,12px,0); transform:translate3d(0,12px,0);}
.trim-line-left { top:0; left:0; bottom:0; width:10px; -webkit-transform:translate3d(-12px,0,0); -ms-transform: translate3d(-12px,0,0); transform:translate3d(-12px,0,0);}

.portfolio-meta { position:absolute; top:28%; right:0; left:0; margin:0 auto; width:50%; opacity:0; z-index:9; -webkit-transform:translateY(50px); -ms-transform:translateY(50px); transform:translateY(50px); -webkit-transition:all 0.5s ease; transition:all 0.5s ease; display:inline-block; text-align:center;}
.portfolio-meta a { background-color:#002642; color:#ffffff; display:inline-block; width:40px; height:40px; line-height:40px; text-align:center; font-size:15px; margin:2px;}
.portfolio-meta a:hover { background-color:#738ea5; color:#ffffff;}
.portfolio-item:hover .portfolio-meta { opacity:1; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0);}

.port-content { position:absolute; display:block; right:0; left:0; width:75%; height:75%; top:13%; margin:0 auto; background-color:#ffffff; opacity:0; text-align:center; box-sizing:border-box; -webkit-transition:opacity .2s ease-in-out; transition:opacity .2s ease-in-out;}
.port-text-wrap { position:relative; display:table; table-layout:fixed; height:100%; width:100%;}
.port-text { position:relative; display:table-cell; height:100%; width:100%; vertical-align:middle;}

.port-text h4 { margin-bottom:0; text-transform:capitalize; font-weight:700; font-size:20px;}
.port-text h4 a { color:#002642;}
.port-text .portfolio-category { display:block;}
.port-text .portfolio-category a { color:#738ea5; font-size:15px; font-weight:500; text-transform:capitalize; display:block; margin-bottom:10px;}
.port-text .portfolio-category a:hover { color:#002642;}

.portfolio-item:hover .port-thumb img { -webkit-transform:scale(1.08); -ms-transform:scale(1.08); transform:scale(1.08);}
.portfolio-item:hover .trim-line-top { -webkit-transform:translate3d(0,-2px,0); -ms-transform:translate3d(0,-2px,0); transform:translate3d(0,-2px,0);}
.portfolio-item:hover .trim-line-right { -webkit-transform:translate3d(2px,0,0); -ms-transform:translate3d(2px,0,0); transform:translate3d(2px,0,0);}
.portfolio-item:hover .trim-line-bottom { -webkit-transform:translate3d(0,2px,0); -ms-transform:translate3d(0,2px,0); transform:translate3d(0,2px,0);}
.portfolio-item:hover .trim-line-left { -webkit-transform:translate3d(-2px,0,0); -ms-transform:translate3d(-2px,0,0); transform:translate3d(-2px,0,0);}
.portfolio-item:hover .port-content { opacity:1;}

.col-6 .portfolio-item .portfolio-meta { top:35%;}
.col-3 .portfolio-item .portfolio-meta { top:23%;}
.col-3 .portfolio-item .portfolio-meta a { width:35px; height:35px; line-height:35px; font-size:13px;}
.col-3 .portfolio-item .port-text h4 { font-size:16px;}

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