.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 10px;}
.portfolio-inner { position:relative; text-align:left;}
.port-thumb { position:relative; overflow:hidden; display:block;}
.port-thumb img { width:100%; height:auto; display:block; -webkit-transition:all 0.9s linear; transition:all 0.9s linear;}
.port-item-overlay { position:absolute; background-color:#000000db; top:0%; left:0%; bottom:0; right:0; padding:30px 36px; margin:0 auto; z-index:3; display:flex; justify-content:flex-end; flex-direction:column; overflow:hidden; -webkit-transition:all .5s; transition:all .5s; -webkit-transform:translateY(40px); -ms-transform:translateY(40px); transform:translateY(40px); opacity: 0;}
.port-item-overlay:before, .port-item-overlay:after { content:''; position:absolute; height:100%; width:0; -webkit-transition:0.5s cubic-bezier(.785,.135,.15,.86); transition:0.5s cubic-bezier(.785,.135,.15,.86); z-index:0;}
.port-item-overlay:before { top:0; left:0; right:auto; border-top:6px solid; border-image:linear-gradient(to left,#977444,rgb(58 123 213 / 0%)); border-image-slice:1; background:linear-gradient(to left,#000000,rgb(58 123 213 / 0%));}
.port-item-overlay:after { bottom:0; right:0; left:auto; border-bottom:6px solid; border-image:linear-gradient(to right,#977444,rgb(58 123 213 / 0%)); border-image-slice:1; background:linear-gradient(to right,#000000,rgb(58 123 213 / 0%));}

.port-icon { position:relative; z-index:5; margin-bottom:15px;}
.port-icon a { width:45px; height:45px; line-height:50px; font-size:16px; display:inline-block; margin:0 3px; border-radius:4px; background-color:#977444; color:#ffffff; text-align:center;}
.port-icon a:hover { background-color:#0f1d22; color:#ffffff; border-radius:16px 10px;}

.port-content { position:relative; z-index:5;}
.port-content h5 { margin-bottom:10px; font-size:25px; font-weight:600; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
.port-content h5 a { color:#ffffff;}
.portfolio-category { font-size:18px; font-weight:500; position:relative; margin-bottom:7px; padding-right:30px; display:inline-block; text-transform:capitalize;}
.portfolio-category a { color:#977444; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}

.portfolio-item:hover .port-thumb img { -webkit-transition:all 0.9s linear; transition:all 0.9s linear; -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1);}
.portfolio-item:hover .port-item-overlay { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity:1;}
.portfolio-item:hover .port-item-overlay:before { width:100%; right:0; left:auto;}
.portfolio-item:hover .port-item-overlay:after { width:100%; left:0; right:auto;}
.portfolio-item:hover .port-content h5 { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}

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

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