.gallery{ margin:0; padding:80px 0 40px; background:url(../images/protfolio-inner-bg-img.jpg) no-repeat left top; background-size:cover; }
.gallery .box{ margin:0; padding:0; overflow:hidden; }

.gallery .box:hover img{ transform:scale(1.1); }
.gallery .box .bottom-block{  margin:0; padding:30px; display:flex; align-items:flex-end; justify-content:space-between; z-index:2; background: linear-gradient(212.38deg, rgba(18, 19, 20, 0) 54.91%, #121314 100%); }
.gallery .box .bottom-block h2{ flex:1; font-family: 'Qinferly - Personal use'; font-size:30px; line-height:1.4; color:#FFF9F5; font-weight:400; margin:0; padding:0 65px 0 0; }
.gallery .box .icon-btn{ width:55px; height:55px; display:inline-block; border:none; box-shadow:none; outline:none; background:url(../images/right-arrow-black.png) no-repeat -16px center #FFF9F5; background-size:50.5px; border-radius:50%; margin:0 0 0 auto; padding:0; }
.gallery .box:hover .icon-btn{ background:url(../images/right-arrow-black.png) no-repeat 20px center #FFF9F5; background-size:50.5px; transition:all 500ms ease-in-out; }
.gallery .box .icon-btn img{ width:100%; height:auto; }

.gallery .btn-block{ display:none; padding-top:55px; }
.gallery .btn-block .secondarybtn{ margin:0 auto; }
.gallery .main-title{ font-size:90px; color:#121314; padding-bottom:85px; text-align:center; }


.lightboxpreview {
    transition: all .3s linear;
 padding-top:60%;
   cursor:pointer;
   background-size:cover;
 }
    
 .lightbox-content {
 max-height:75vh;
   height:75vh;
   width:100%;
   max-width: 1000px;}
 
 .lightbox-close { 
   cursor:pointer;
     margin-left: auto;
   position:absolute;
   right:-30px;
   top:-30px;
   color:white;
     font-size: 2rem;
     font-weight: 700;
     line-height: 1;}
 .modal_inner_image {
     min-height: 400px;
     z-index: 1000;}
 .modal-content {
     width: 100%;}
 
 
 .modalscale {transform:scale(0);
 opacity:0;}
 
 
 
 .lightbox-container, .lightbox-btn, .lightbox-image-wrapper, .lightbox-enabled{transition:all .4s ease-in-out;}
 .lightbox_img_wrap {padding-top:65%;
   position:relative;
   overflow:hidden;
 }
 .lightbox-enabled:hover {
   transform:scale(1.1)
 }
 .lightbox-enabled {width:100%;
 height:100%;
   position:absolute;
   top:0;
 object-fit:cover;
 cursor:pointer;}
 
 .lightbox-container {width:100vw;
 height:100vh;
 position:fixed;
 top:0;
 left:0;
   display:flex;
   align-items:center;
   justify-content:center;
 background-color:rgba(0,0,0,.6);
 z-index:9999;
 opacity:0;
 pointer-events:none;
 }
 
 .lightbox-container.active {
   opacity:1;
   pointer-events:all;
 }
 .lightbox-image-wrapper {
   display:flex;
   transform:scale(0);
   align-items:center;
   justify-content:center;
   max-width:90vw;
   max-height:90vh;
   position:relative;
 }
 .lightbox-container.active .lightbox-image-wrapper {transform:scale(1);}
 .lightbox-btn, #close {
   color:white;
   z-index:9999999;
  cursor:pointer; 
   position:absolute;
 
   font-size:50px;
 }
 
 .lightbox-btn:focus {
   outline:none;
 }
 
 .left {left:50px;}
 .right {right:50px;}
 #close {top:50px;
 right:50px;}
 #close img{ width:40px; height:auto; }
 .lightbox-image {
   width:100%;
   -webkit-box-shadow: 5px 5px 20px 2px rgba(0,0,0,0.19); 
 box-shadow: 5px 5px 20px 2px rgba(0,0,0,0.19);
   max-height:95vh;
   object-fit:cover;
  }
 
 @keyframes slideleft {
   33% {transform:translateX(-300px);
   opacity:0;
   }
   66% {transform:translateX(300px);
   opacity:0;
   }
 }
 
 
 .slideleft {
    animation-name: slideleft;
  animation-duration: .5s; 
  animation-timing-function: ease; 
 }
 @keyframes slideright {
   33% {transform:translateX(300px);
   opacity:0;}
   66% {transform:translateX(-300px);
   opacity:0;}
 }
 
 
 .slideright{
    animation-name: slideright;
  animation-duration: .5s; 
  animation-timing-function: ease; 
 }