@charset "utf-8";
/* CSS Document */

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
}

.gallery dl {
  flex-basis: calc(25.00% - 2%);
  margin: 1%;
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  overflow: hidden; 
}
.gallery dl h3 {
	font-size: 100%;
	background-color: #7EB736;
	color: #FFFFFF;
	display: block;
	text-align: center;
	padding: 5px;
	font-weight: 400;
}

.gallery-icon a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  border-bottom-color: rgba(255, 255, 255, 0);
}

.gallery-icon img {
	display: block;
	width: 90%;
	height: auto;
	transition: transform 0.3s ease-in-out;
	margin: .5em 0 0 5%;
	padding: 0 0 .7em 0;
}
.gallery-icon:hover img{
	transform: scale(1.1);

}
.gallery-caption {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	text-align: center;
	transform: translateY(-50%);
	background-color: #027CCB;
	color: #fff;
	padding: 3px  5px;
	white-space: nowrap; /* Prevent text from wrapping to the next line */
	overflow: hidden; /* Hide any overflowing text */
	text-overflow: ellipsis; /* Add ellipsis (...) for overflow */
	text-transform: uppercase;
	font-size: 120%;
	transition: background-color .4s ease-in-out;
}

.gallery-item:hover .gallery-caption {
	background-color: #FF3F06;

}
.gallery-icon {
  position: relative;
}




.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: none;
}

.gallery-icon.loading .loader {
  display: block;
}

.gallery-icon.loading img {
filter: grayscale(100%) opacity(15%);
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 120px;
  height: 5px;
  background:
   linear-gradient(#000 0 0) 0/0% no-repeat
   #ddd;
  animation: l1 .4s infinite linear;
}
@keyframes l1 {
    100% {background-size:100%}
}
@media screen and (max-width: 980px) {
	
.gallery dl {
  flex-basis: calc(50.00% - 1%);
  margin: .5%;
}
}