.portfolio-collection .box{ position: relative; height: 100%;}
.portfolio-collection .img-box { position: relative; transition: 0.5s ease-in-out; width: 100%; height: 100%; display: block; line-height: 1; cursor: pointer;}
.portfolio-collection .on-hover{ position: absolute; inset:0; background: rgba(0, 0, 0, 0.83); transition: 0.5s ease-in-out; opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-transform: capitalize; line-height: 1.3; text-align: center; padding: 0 10px; pointer-events: none;}
.portfolio-collection .box:hover .on-hover{opacity: 1;}
.portfolio-collection .on-hover strong{ color: #fc414b; font-size: 20px;}
.portfolio-collection .on-hover p{ color: #fff; font-size: 16px; display: block; margin: 10px auto 15px;}
.portfolio-collection .img-box img { height: 100%; width: 100%; cursor: pointer;}
.video-animation-portfolio .row{row-gap: 30px;}
.video-animation-portfolio video{ width: 100%; height: unset !important;}
.signature-portfolio .row{ height: 100%; row-gap: 12px;}
.signature-portfolio .row > div{padding: 0 !important;}
.signature-portfolio .double-boxes .box{height: 50%;}
@media only screen and (max-width: 1200px){
.video-animation-portfolio .row{row-gap: 24px;} }
@media only screen and (max-width: 991px){
.portfolio-collection .on-hover{ display: none; }
.signature-portfolio .row > div{ padding: 0 6px !important;}
.signature-portfolio .double-boxes { display: flex; flex-direction: column; justify-content: space-between;}
.signature-portfolio .double-boxes .box{height: calc(50% - 6px);} }