/* =========================
   GALLERY GRID
========================= */

.gallery, .gallery-three-col{
  width:100%;  
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.gallery-three-col{
	 grid-template-columns:repeat(3,1fr);
	 }
	 
.gallery-item.large{
  grid-column:span 4;
  
}
.gallery-item.large img{
  height:300px;
}



.gallery-item, .item-large{
  overflow:hidden;  
  position:relative;
  cursor:pointer;
  
}

.gallery-item img{
  width:100%;
  height:100px;
  object-fit:cover;
  display:block;
  transition:0.4s ease;
}
.item-large img{
	height:350px;
}
.gallery-item:hover img{
  transform:scale(1.08);
}
.gallery-item .ei{
	position:absolute;
	left:50%;
	top:50%;
	width:60px;
	height:60px;
	margin:-30px 0 0 -30px;
	background-color:rgba(0,0,0,0.5);
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:20px;
	z-index:2;

	/* Hidden default */
	opacity:0;
	visibility:hidden;

	/* Animation start state */
	transform:scale(0.5) rotate(-90deg);

	transition:
		opacity 0.4s ease,
		transform 0.5s ease,
		visibility 0.4s ease;

	background-image:url('../images/icons/expanc-icon.svg');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:35%;
}

/* Hover effect */
.gallery-item:hover .ei{
	opacity:1;
	visibility:visible;
	transform:scale(1) rotate(0deg);
}


/* =========================
   LIGHTBOX
========================= */

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:0.35s ease;
  z-index:9999;
}

.lightbox.active{
  opacity:1;
  visibility:visible;
}

.lightbox img{
  width:auto;
  max-width:90%;
  max-height:85vh;
  /*border-radius:14px;*/
  transform:scale(0.85);
  opacity:0;
  transition:0.45s ease;
}

.lightbox img.show{
  transform:scale(1);
  opacity:1;
}

/* =========================
   CLOSE BUTTON
========================= */

.close{
  position:absolute;
  top:20px;
  right:30px;
  width:45px;
  height:45px;
  display:flex;
  flex-wrap: wrap; 
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:34px;
  margin:0;
  padding:0;
  color:#fff;
  cursor:pointer;
  z-index:1000;
  border-radius:50%;
  /*backdrop-filter:blur(5px);*/
  transition:0.3s ease;
   
}

.close:hover{
  color:#000;
  background:#fff;
 /* background:rgba(255,255,255,0.15);*/
 /* transform: rotate(90deg);
  border:1px solid #fff;*/
}

/* =========================
   NEXT & PREV BUTTONS
========================= */

.prev,
.next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:55px;
  height:55px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(5px);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  z-index:1000;
  transition:0.3s ease;
}

.prev:hover,
.next:hover{
  background:#fff;
  color:#000;
}

.prev{
  left:25px;
}

.next{
  right:25px;
}

/* =========================
   MOBILE
========================= */

 

@media(max-width:1320px){

 .gallery{
    /*grid-template-columns:repeat(2,1fr);*/
  }

  .gallery{
    /*grid-template-columns:1fr;*/
    
  }

   prev,
  .next{
    width:45px;
    height:45px;
    font-size:26px;
  }

  .close{
    width:40px;
    height:40px;
    font-size:28px;
    top:15px;
    right:15px;
  }

/*****/

.gallery-item.large img{
  height:200px;
}


 

.gallery-item img{
  height:120px;
 
}
}

@media(max-width:1080px){
.gallery-item img{
  height:70px;
 
}
}
@media(max-width:980px){
.gallery-item img{
  height:50px;
 
}
}

@media(max-width:768px){

.gallery{
 
  gap:10px;
}
.gallery-item img{
  height:80px;
 
}
}