.logga {
				border-style: solid;
				border-color: f9f9f9;
				border-width: 1px;
				float: right; /* or right, depending on where you want the image */;
				margin: 0px 20px 10px 10px;/* Adjust margins as needed */
				max-width: 30%;
				/*transition: transform .9s ease;*/
}

.logga img {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove the bottom margin */
    								
}

.karta {
				border-style: solid;
				border-color: f9f9f9;
				border-width: 1px;
				float: right; /* or right, depending on where you want the image */;
				margin: 0px 20px 10px 10px;/* Adjust margins as needed */
				max-width: 100%;
				/*transition: transform .9s ease;*/
}

.karta img {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove the bottom margin */
    								
}

/* ===== Responsiv bildcontainer ===== */
.image-map {
				border: thin solid #000000;
				position: relative;
				width: 100%;
				max-width: 800px;
				margin: auto;
}

.image-map img {
  width: 100%;
  height: auto;
  display: block;
}
 .modal a:link    {
				color: #000000;
				text-decoration: underline;
				font-weight: 900;
				font-size: 10px;
}
.modal a:visited {

				color: #000000;
				text-decoration: underline;
				font-weight: 900;
				}
.modal a:hover   {
				color: #FF6F0F;
				text-decoration: none;
				font-weight: 900;
				
}
.modal a:active  { color: #000000; text-decoration: underline; font-weight: 900;}
/* ===== Hotspots (procent = responsivt) ===== */
.hotspot {
  position: absolute;

  width: 5%;
  aspect-ratio: 1;

  border-radius: 50%;
  cursor: pointer;

  /*background: rgba(255,0,0,0.15);*/
  border: 1px solid #a16100;

  transform: translate(-50%, -50%);
}

.hotspot:hover {
  background: rgba(255,153,0,0.4);
}

/* ===== Overlay ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  z-index: 1000;
}

/* ===== Modal ===== */
.modal {
  position: absolute;
  background: #fff;
  width: min(95vw, 300px);
  padding: 6px;
  border-radius: 6px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}

.overlay.active .modal {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.modal img {
  width: 100%;
  border-radius: 3px;
  margin-bottom: 2px;
}

.modal h3 {
				font-size: 1.15em;
				font-weight: 600;
				margin: 4px 0 4px 0;
				line-height: 1.1;
}

.modal a:link    {
				/*color: #000000;
				text-decoration: underline;*/
				font-weight: 500;
				font-size: 0.85em;
}
/* ===== Pil ===== */
.arrow {
 /*position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  transform: rotate(45deg);*/
}

/* olika riktningar */
.arrow.top    { top:-6px; left:50%; margin-left:-6px; }
.arrow.bottom { bottom:-6px; left:50%; margin-left:-6px; }
.arrow.left   { left:-6px; top:50%; margin-top:-6px; }
.arrow.right  { right:-6px; top:50%; margin-top:-6px; }
/* ===== Stängknapp ===== */
.close-btn {
				position: absolute;
				top: 6px;
				right: 8px;
				border: none;
				background: none;
				font-size: 19px;
				cursor: pointer;
				font-weight: bold;
}