.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:20px; display:block; -webkit-transition:all 200ms linear; transition:all 200ms linear; -webkit-transition-delay:0.1s; transition-delay:0.1s;}
.grid-col-four .portfolio-item { margin:15px;}
.port-details { position:relative; display:block; overflow:hidden;}
.port-details img { width:100%; height:auto; display:block; -webkit-transform:scale(1.0); -ms-transform:scale(1.0); transform:scale(1.0); -webkit-transition:all 900ms ease 300ms; transition:all 900ms ease 300ms;}
.port-overlay { height:65%; -webkit-transform:perspective(400px) rotateX(-90deg); -ms-transform:perspective(400px) rotateX(-90deg); transform:perspective(400px) rotateX(-90deg); -webkit-transform-origin:top; -ms-transform-origin:top; transform-origin:top; -webkit-transition:all 300ms ease 100ms; transition:all 300ms ease 100ms; background-color:rgba(0,0,0,0.9); position:absolute; top:0; left:0; width:100%; opacity:0; z-index:1;}
.port-box { display:table; height:100%; width:100%;}
.portfolio-meta { display:table-cell; text-align:center; vertical-align:middle;}
.portfolio-meta a { position:relative; display:inline-block; width:45px; height:45px; margin:0 5px; background-color:#ff7659; border-radius:50%; color:#ffffff; font-size:18px; line-height:45px; opacity:0; -webkit-transform:translateY(100px); -ms-transform:translateY(100px); transform:translateY(100px); -webkit-transition:all 0.1s ease-in-out 0.9s; transition:all 0.1s ease-in-out 0.9s;}
.port-overlay-text { position:absolute; left:0; bottom:0; right:0; padding:0; height:35%; background-color:#ffffff; display:flex; flex-direction:column; justify-content:center; flex-wrap:wrap; align-items:center; text-align:center; opacity:0; -webkit-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:perspective(1200px) rotateX(90deg) translateZ(-40px); -ms-transform:perspective(1200px) rotateX(90deg) translateZ(-40px); transform:perspective(1200px) rotateX(90deg) translateZ(-40px); transition:all 300ms ease 100ms;}
.port-overlay-text h4 { font-size:18px; margin-bottom:5px;}
.port-overlay-text span a { color:#ff7659;}

.port-content { position:relative; display:block; padding:15px 5px 10px; text-align:center; box-shadow:0px 7px 32px -13px rgba(0,0,0,0.75);}
.port-title { opacity:1; -webkit-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:perspective(1200px) rotateX(0deg) translateZ(0px); -ms-transform:perspective(1200px) rotateX(0deg) translateZ(0px); transform:perspective(1200px) rotateX(0deg) translateZ(0px); -webkit-transition:all 900ms ease 300ms; transition:all 900ms ease 300ms;}
.port-title h4 { margin-bottom:5px; font-size:18px;}
.grid-col-four .port-title h4 { font-size:18px;}
.port-title span a { color:#ff7659;}
.port-btn { position:absolute; top:0; left:0; bottom:0px; right:0; background-color:#ffffff; display:flex; flex-direction:column; justify-content:center; flex-wrap:wrap; align-items:center; border-top:1px solid #e5e5e5; opacity:0; -webkit-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:perspective(1200px) rotateX(90deg) translateZ(-40px); -ms-transform:perspective(1200px) rotateX(90deg) translateZ(-40px); transform:perspective(1200px) rotateX(90deg) translateZ(-40px); -webkit-transition:all 300ms ease 100ms; transition:all 300ms ease 100ms;}
.port-btn:before { position:absolute; left:0; bottom:-1px; right:0; height:3px; background-color:#ff7659; content:'';}
.port-btn a { color:#151515; font-size:16px; font-weight:700; text-transform:uppercase;}

.portfolio-item:hover { box-shadow:0px 4px 5px 2px rgba(238,238,238,0.7);}
.portfolio-item:hover .port-details img { -webkit-transform:scale(1.2) rotate(1deg); -ms-transform:scale(1.2) rotate(1deg); transform:scale(1.2) rotate(1deg);}
.portfolio-item:hover .port-overlay { opacity:1; -webkit-transform:perspective(400px) rotateX(0deg); -ms-transform:perspective(400px) rotateX(0deg); transform:perspective(400px) rotateX(0deg); transition:all 900ms ease 300ms;}
.portfolio-item:hover .portfolio-meta a { opacity:1; -webkit-transform:translateY(0px); -ms-transform:translateY(0px); transform:translateY(0px); -webkit-transition:all 0.5s ease-in-out 0.5s; transition:all 0.5s ease-in-out 0.5s; color:#ffffff;}
.portfolio-item:hover .port-overlay-text { opacity:1; -webkit-transform:perspective(1200px) rotateX(0deg) translateZ(0px); -ms-transform:perspective(1200px) rotateX(0deg) translateZ(0px); transform:perspective(1200px) rotateX(0deg) translateZ(0px); -webkit-transition:all 900ms ease 300ms; transition:all 900ms ease 300ms;}
.portfolio-item:hover .port-title { opacity:0; -webkit-transform:perspective(1200px) rotateX(-90deg) translateZ(-40px); -ms-transform:perspective(1200px) rotateX(-90deg) translateZ(-40px); transform:perspective(1200px) rotateX(-90deg) translateZ(-40px); -webkit-transition:all 900ms ease 300ms; transition:all 900ms ease 300ms;}
.portfolio-item:hover .port-btn { opacity:1; -webkit-transform:perspective(1200px) rotateX(0deg) translateZ(0px); -ms-transform:perspective(1200px) rotateX(0deg) translateZ(0px); transform:perspective(1200px) rotateX(0deg) translateZ(0px); -webkit-transition:all 900ms ease 300ms; transition:all 900ms ease 300ms;}

/* Single Portfolio */
.portfolio-metadeta{ font-size: 16px; border-bottom:1px solid #aeaeae; padding-bottom:10px; margin-bottom:30px;}
.portfolio-metadata-item{ display:inline-block; margin:7px 0 5px; padding:0 15px; border-right:1px solid #aeaeae; }
.portfolio-metadata-item span { color:#ff7659; }
.portfolio-share { float:right;}
.portfolio-share ul.social-share-post{ text-align:right; margin:0; border-radius:0; float:none; display:block; }
.portfolio-share ul.social-share-post li{ border-radius:0; }
.single-portfolio .image-carousel{ margin:0 auto 50px; }
.related-port { position:relative;}
.rel-port-inner { position:relative; display:flex;}
.rel-port-inner .portfolio-item.col-4 { padding:0; margin-left:0;}