/* Responsive CSS mainpage for smaller screens */
@media screen and (max-width: 1800px) {
	body {
      background-size: 200%; /* Adjust the background size for smaller screens */
   }
	
   .map-list li {
      width: calc(50% - 2rem);
   }
   
   h1 {
      font-size: 20px; /* Reduce the font size for smaller screens */
   }

   .map-list li {
      width: calc(25% - 2rem); /* Adjust the width for smaller screens */
   }
   
   .map-list li a span.title {
      font-size: 13px;
   }
   
   .map-list li a span.descr {
      font-size: 12px;
   }
   

   footer img {
      max-width: 50px;
      height: 50px;
   }
   
   footer a {
      font-size: 14px;
   }
   
   footer h4 {
	   font-size: 14px;
	   text-align: center;
   }
   
   footer p {
	   font-size: 14px;
   }
   
   #search-container {
   margin: 4vh;
}
}



@media screen and (max-width: 2000px) {
	
	#table-container-layer1{
		max-height: 700px;
	}
	
	#table-container-layer2{
		max-height: 650px;
	}
	
	.title {
    font-size: 20px;
	}
	
	.link a {
		font-size: 12px;
	}
	
	.description {
    font-size: 14px;
	}
	
	.descr-tbl {
	font-size: 14px;
	}
}

   
@media screen and (max-width: 1600px) {
	
	#table-container-layer1{
		max-height: 400px;
		font-size: 10px;
	}
	
	#table-container-layer2{
		max-height: 350px;
		font-size: 10px;
	}
	
	.title {
    font-size: 20px;
	}
	
	.link a {
		font-size: 12px;
	}
	
	.description {
    font-size: 14px;
	}
	
	.descr-tbl {
	font-size: 14px;
	}
}