body {
	background-color: #fff;
	}
	
@media only screen and (min-width: 1000px) {

.sidhuvud {
  width: 75%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto;
  
}

.logga {
  font-family: "Trebuchet MS", Times, serif;
  font-size: 3vw;
  align-self: start;
  justify-self: start;
  background-color: white;
}
a.logga:link {
  text-decoration: none;
  color:grey;
  }
  a.logga:visited {color:grey;}
  a.logga:hover {color:grey;}

.menyn {
  align-self: end;
  justify-self: end;
  font-size: 3vw;
  font-weight: bold;
}
/* --------------------------------- MNEYN --------------------------*/
/* Dropdown Button */
.dropbtn {
  font-family: "verdana", sans-serif;
  background-color: #fff;
  color: black;
  font-size: 1.5vw;
  border: none;
}
.dropdown {
  align-self: end;
  justify-self: end;
  font-size: 2vw;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  font-family: "verdana", sans-serif;
  color: black;
  font-size: 1.5vw;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
.dropdown-content a:visited {color: #000;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #ddd;}

h2   {
	font-size: 3vw;
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
h3   {
	font-size: 3vw;
	text-align: left;
	font-family: Helvetica, sans-serif;
	}
p    {
	text-align: left;
	font-size:2vw;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
.karta img {
	border: 2px solid #ddd;
	border-radius: 4px;
	padding: 5px;
	width: 30%;
	height: 30%;
	}
	
	
.main {
  margin: auto;
  width: 75%;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #ffffff;
}
a.kontakt {
  color: black;
  text-decoration: underline;
}	
a.kontakt:hover, a.kontakt:active {
	color: black;
	text-decoration: underline;
}

.sidfot {	
  text-align:center;
  font-size:1.5vw;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-style: italic;
  color: black;
  padding-bottom: 10%;
}
.sidfot a:link, a:visited {text-decoration: underline; color: black;}
.sidfot a:hover {color:red;}

}

/* ##################################################### SLUT ÖVER 1000 px ############################### */

h1 {
  text-align: center;
  padding: 20px;
  font-size: 1.5vw;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 15px;
  background-color: #fff;
}

.gallery-item {
  position: relative;
  width: calc(25% - 20px);
  height: auto;
  margin: 10px;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.gallery-item:hover {
  transform: scale(1.1);
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

/* Modal content (image) */
.modal-content {
  position: relative;
  width: auto;
  height: auto;
  max-width: 60%;
  max-height: max-content;
  border-radius: 4px;
  overflow: hidden;
  animation: zoomIn 0.5s; 
}

@keyframes zoomIn {
  from {transform: scale(0.6);}
  to {transform: scale(1);}
}

.modal.show {
  display: flex;
  opacity: 1;
}

/* Close button */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #ffffff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s;
}

/* Caption of modal image */
.caption {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size:2vw;
}
@media screen and (max-width: 800px) {
.modal-content {
  position: relative;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: max-content;
  border-radius: 4px;
  overflow: hidden;
  animation: zoomIn 0.5s; 
}
}

@media screen and (max-width: 768px) {
  .gallery-item {
    width: calc(50% - 20px);
  }
 
   /* Caption of modal image */
.caption {
  position: absolute;
  bottom: 30%;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size:3vw;
} 
}

@media screen and (max-width: 300px) {
  .gallery-item {
    width: calc(100% - 20px);
  }
  /* Caption of modal image */
.caption {
  position: absolute;
  bottom: 40%;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size:2vw;
}
  
}

/*###########################################################################################################*/

@media only screen and (max-width: 1000px) {

.sidhuvud {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: 60% 40%;
  line-height: 80%;
}


a.logga:link {
  font-family: "Trebuchet MS", Times, serif;
  font-size: 4vw;
  font-weight: normal;
  align-self: start;
  justify-self: start;
  text-decoration: none;
  color:grey;
  }
a.logga:visited {color:grey;}
a.logga:hover {color:grey;}

/* --------------------------------- MNEYN --------------------------*/
/* Dropdown Button */
.dropbtn {
  font-family: "verdana", sans-serif;
  background-color: #fff;
  color: black;
  font-size: 2.5vw;
  border: none;
}
.dropdown {
  align-self: start;
  justify-self: start;
  font-size: 3vw;
  color: black;
  line-height: 50%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  color: black;
  
}

/* Links inside the dropdown */
.dropdown-content a {
  font-family: "verdana", sans-serif;
  /*font-size: 2vw;*/
  font-size: 15px;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  color: black;
  line-height: 100%;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
.dropdown-content a:visited {color: #000;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #ddd;}

.main {
  margin: auto;
  width: 90%;
  padding-top: 20px;
  padding-bottom: 20px;
}

h2   {
	font-size: 4vw;
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
h3   {
	font-size: 3vw;
	text-align: left;
	font-family: Helvetica, sans-serif;
	}
p    {
	text-align: left;
	font-size:3vw;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

.karta img {
	/*border: 1px solid #ddd;
	border-radius: 4px;
	padding: 5px;*/
	width: 40%;
	height: 40%;
	}

a.kontakt {
  color: black;
  text-decoration: underline;
}	
a.kontakt:hover, a.kontakt:active {
	color: black;
	text-decoration: underline;
}
.sidfot {	
  text-align:center;
  font-size:3vw;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-style: italic;
  color: black;
  padding-bottom: 10%;
}
.sidfot a:link, a:visited {text-decoration: underline; color: black;}
.sidfot a:hover {color:red;}
}