svg {
	transform: rotate(45deg);
}
  
.gradient {
	animation-iteration-count: infinite;
	animation-duration: 1s;
	fill: url('#gradient-fill');
}
.square {
	animation-iteration-count: infinite;
	animation-duration: 2s;
	transition-timing-function: ease-in-out;
}
  
.s1 {
animation-name: slide-1;
}
  
.s2 {
	animation-name: slide-2;
}
  
.s3 {
	animation-name: slide-3;
}
  
.s4 {
	animation-name: slide-4;
}
  
.s5 {
	animation-name: slide-5;
}
  
.s6 {
	animation-name: slide-6;
}
  
.s7 {
	animation-name: slide-7;
}
  
@keyframes slide-1 {
	37.5% {
	 	transform: translateX(0px);
	}
	50% {
		transform: translateX(100px);
	}
	100% {
	 	transform: translateX(100px);
	}
}
  
@keyframes slide-2 {
	25% {
	  	transform: translateX(0px);
	}
	37.5% {
	  	transform: translateX(100px);
	}
	100% {
	  	transform: translateX(100px);
	}
}
  
@keyframes slide-3 {
	12.5% {
	  	transform: translateY(0px);
	}
	25% {
	  	transform: translateY(100px);
	}
	100% {
	  	transform: translateY(100px);
	}
}
  
@keyframes slide-4 {
	50% {
	  	transform: translateY(0px);
	}
	62.5% {
	  	transform: translateY(-100px);
	}
	100% {
	  	transform: translateY(-100px);
	}
}
  
@keyframes slide-5 {
	12.5% {
	  	transform: translate(-100px, 0px);
	}
	87.5% {
	  	transform: translate(-100px, 0px);
	}
	100% {
	  	transform: translate(-100px, 100px);
	}
}
  
@keyframes slide-6 {
	62.5% {
	  transform: translateY(0px);
	}
	75% {
	  transform: translateY(-100px);
	}
	100% {
	  transform: translateY(-100px);
	}
}
  
@keyframes slide-7 {
	75%  {
	  transform: translateX(0px);
	}
	87.5% {
	  transform: translateX(-100px);
	}
	100% {
	  transform: translateX(-100px);
	}
}
  
.loading-container {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
  
.loading-footer {
	margin-top: 1em;
}

#pagination-container {
	text-align: center;
	margin-top: 20px;
}

#pagination-container a {
	display: inline-block;
	padding: 8px 16px;
	margin: 0 4px;
	background-color: #f1f1f1;
	border: 1px solid #ddd;
	color: #333;
	text-decoration: none;
	cursor: pointer;
}

#pagination-container a.active {
	background-color: #87ceeb2b;
	color: rgb(51, 50, 50);
}

@keyframes slideIn {
	from {
		transform: translateY(100%); 
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.slide-in.show {
	animation: slideIn 0.4s ease-out forwards;
}


/* The Modal (background overlay) */
.image-preview-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed position to stay in place */
  z-index: 1000; /* On top of other elements */
  top: 0;
  left: 0;
  width: 100vw; /* Full viewport width */
  height: 100vh; /* Full viewport height */
  background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
  align-items: center; /* Vertically center the image */
  justify-content: center; /* Horizontally center the image */
}

/* Modal Content (the image) */
.image-preview-modal .modal-content {
  max-width: 80%; /* Limit the width */
  max-height: 80%; /* Limit the height */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Optional shadow for effect */
}

/* Close button */
.image-preview-modal .close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #ffffff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.image-preview-modal .close:hover,
.image-preview-modal .close:focus {
  color: #bbbbbb;
  text-decoration: none;
  cursor: pointer;
}