/* fonte 

Overskrift - Noto Serif Display:
font-family: 'Noto Serif Display', serif;

Brødtekst - Houschka Pro Medium:
font-family: houschka-pro, sans-serif;
font-weight: 500;
font-style: normal;

Andre tykkelser af brødtekst:
Houschka Pro Thin:
font-family: houschka-pro, sans-serif;
font-weight: 200;
font-style: normal;

Houschka Pro Light:
font-family: houschka-pro, sans-serif;
font-weight: 300;
font-style: normal;

Houschka Pro DemiBold:
font-family: houschka-pro, sans-serif;
font-weight: 600;
font-style: normal;

Houschka Pro Bold:
font-family: houschka-pro, sans-serif;
font-weight: 700;
font-style: normal;

Houschka Pro ExtraBold:
font-family: houschka-pro, sans-serif;
font-weight: 800;
font-style: normal;

*/


:root {
	/* farver */
	--white: #F9F9F9;
	--black: #271F16;
	--lightblue: #DFE7F0;
	--blue: #8A9BBA;
	--yellow: #F6D877;
	--price: #888888;
	--lightgrey: #E8E8E8;
 
  }

  * {
	  margin: 0;
	  padding: 0;
  }

  html {
	  background-color: var(--white);
	  margin: auto;
  }


  /* typografi */

  h1 {
	  color: var(--black);
	  font-family: 'Noto Serif Display', serif;
	  text-align: center;
	  font-weight: lighter;
	  font-size: 2.5rem;
  }

  h2 {
	color: var(--black);
	font-family: 'Noto Serif Display', serif;
	text-align: center;
	font-weight: lighter;
  }

  h3 {
	color: var(--black);
	font-family: houschka-pro, sans-serif;
	font-weight: 500;
	font-style: normal;
  }

  h4 {
	color: var(--black);
	font-family: houschka-pro, sans-serif;
	font-weight: 600;
	font-style: normal;
	line-height: 2.3rem;
	font-size: 1.3rem;
  }

  h5 {
	color: var(--price);
	font-family: houschka-pro, sans-serif;
	font-weight: 500;
	font-style: normal;
  }

  p {
	font-family: houschka-pro, sans-serif;
	font-weight: 500;
	font-style: normal;
  }

.cart {
  display: flex;
  justify-content:  flex-end;
  padding-right: 5%;
  padding-top: 1.3%;
}

.cart a {
	padding-right: 1%;
}

.cart span {
  font-family: houschka-pro, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0% 5%;
}

.webshop {
  padding-top: 4%;
}

.galleri {
  padding-top: 4%;
}

.logohead {
  width: 13rem;
  z-index: 1;
  margin-top: -1.5rem;
}

.om {
  padding-top: 4%;
}

.kontakt {
  padding-top: 4%;
} 

.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;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: houschka-pro, sans-serif;
  font-weight: 500;
  font-style: normal;
}

  /* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.webshop:hover .dropdown-content {display: block;}

/* Show the dropdown menu on hover */
.galleri:hover .dropdown-content {display: block;}



	#empty-cart {
		height: 400px;
		border-bottom: 2px solid var(--lightgrey);
		margin: 0% 10% 10% 10%;
		display: none;
	}

	.empty {
		margin: 0 auto;
		text-align: center;
	}

  	/* MEDIA RULE TIL COMPUTER */
@media only screen and (min-width: 600px) {
	#mobil {
	  display: none;
	  }

	header {
		height: 200px;
		margin: 0% 7%;
	}

	header a {
		font-size: 0.8rem;
		text-decoration: none;
		justify-content: space-between;
	}

	  	/* MAIN */
		  .products-container {
			max-width: 650px;		
			justify-content: space-around;
			margin: 0 auto;
			padding-top: 3%;
	
		}
	
		.product-header {
			width: 100%;
			max-width: 650px;		
			display: flex;
			justify-content: flex-start;
			padding: 0rem 2rem;
			margin: 0 auto;
		}
	
		#border {
			border-bottom: 3px solid var(--lightgrey);
		}
	
		#border button {
			border: none;
			background-color: var(--white);
			width: 100%;
			display: flex;
			justify-content: flex-end;
			padding: 5%;
		}

		.product {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin: 5%;
			padding-bottom: 3%;
		}
	
		.product-titel {
			width: 45%;
			margin-left: 5%;
		}
	
		.price {
			display: flex;
			align-items: center;
			margin-left: 5%;
			margin-bottom: 2%;
		}
	
		.quantity {
			margin-left: 5%;
		}

	
		#total {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 5%;
			font-family: houschka-pro, sans-serif;
			font-weight: 600;
			font-style: normal;
		}
	

	
		#basketTotalContainer {
			margin: 5% 7%;
			padding-bottom: 20%;
			display: flex;
			justify-content: flex-end;
			justify-content: space-around;
			align-items: baseline;
		}
	
		.betaling button {
			width: 12rem;
			height: 2.2rem;
			background-color: var(--blue);
			border: 1px solid var(--lightgrey);
			color: var(--white);
			font-size: 1.2rem;
			text-decoration: none;
		}
	
		.betaling button a {
			color: var(--white);
			font-size: 1.2rem;
			text-decoration: none;
		}
	
		.betaling button:hover {
			width: 12rem;
			height: 2.2rem;
			background-color: var(--lightblue);
			border: 1px solid var(--lightgrey);
			color: var(--price);
			font-size: 1.2rem;
		}
	
		.betaling button a:hover {
			color: var(--price);
			font-size: 1.2rem;
			text-decoration: none;
		}
		/* MAIN - SLUT */
  
  
		/* FOOTER */
  
	  footer {
		background-image: url('../images/baggrund2.png');
		background-repeat: no-repeat;
		height: 600px;
	  }
	
	  #footer {
		display: flex;
		flex-direction: row;
		justify-content: center;
		justify-content: space-around;
		margin-left: 12%;
	  }
	
	  .links {
	  display: flex;
	  flex-direction: column;
	  color: var(--white);
	  width: 33%;
	  margin-top: 20rem;
	  }
	
	  .links a {
	  color: var(--white);
	  text-decoration: none;
	  line-height: 2rem;
	}
	
	  .logofoot {
	  width: 33%;
	  margin-top: 20rem;
	  }
	
	  .billede {
	  width: 15rem;
	  text-align: center;
	  }
	
	  .some {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	  justify-content: space-between;
	  align-items: center;
	  width: 33%;
	  margin-top: 20rem;
	  }
  
	  #copyright{
		padding-top: 5.5%;
		text-align: center;
		color: var(--lightgrey);
		font-size: 0.5rem;
	  }
  }

  	/* MEDIA RULE TIL MOBIL */
  @media only screen and (max-width: 600px) {
	html {
	  margin: 0 auto;
	}
  
	#com {
	  display: none;
	  visibility: hidden;
	}

	/* HEADER */
  
  
	#mobil {
	  display: visible;
	  background-color: var(--white);
	}

	header {
		height: 130px;
		margin: 0% 7%;
	}

	header a {
		font-size: 0.8rem;
		text-decoration: none;
		justify-content: space-between;
	}
  
	.head {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  padding-top: 7%;
	}
  
	#menuikon {
	  display: flex;
	  justify-content: flex-start;
	  width: 20%;
	}
  
	.logohead2 {
	  display: flex;
	  justify-content: center;
	  width: 60%;
	}
  
	.cart2 {
	  display: flex;
	  justify-content: flex-end;
	  width: 20%;
	  margin-right: -2%;
	}
  
	.cart2 span {
		font-family: houschka-pro, sans-serif;
		font-weight: 500;
		font-style: normal;
	  }

    .overlay {
      height: 100%;
      width: 0;
      position: fixed; 
      z-index: 1; 
      left: 0;
      top: 0;
      background-color: var(--white); 
      overflow-x: hidden; 
      transition: 0.5s;
    }
  
    .overlay-content {
      position: relative;
      width: 100%; 
      padding: 5%;
      margin-top: 10%;
    }
  
    .overlay-content a {
      text-decoration: none;
      font-size: 1rem;
      line-height: 2.5rem;
      display: block; 
      transition: 0.3s; 
    }
  
	.overlay .closebtn {
	  display: flex;
	  justify-content: flex-end;    
	  margin-top: 1.5rem;
	  margin-right: 2.5rem;
	}
  
	.menupunkter {
		background-color: var(--white);
		border: none;
		display: flex;
		flex-direction: column;
	}
  
	.content {
		display: none;
		overflow: hidden;
	  }
  
	.content a {
		font-family: houschka-pro, sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 0.8rem;
		color: var(--price);
		margin-left: 5%;
	}
  
	.logohead3 {
	  display: flex;
	  justify-content: center;
	  width: 375px;
	  margin-top: 250px;
	}
  
	/* SLUT - HEADER */
  
  	/* MAIN */

	.products-container {
		padding-top: 3%;
		margin: 0% 10%;
	}

	#border {
		border-bottom: 3px solid var(--lightgrey);
		display: flex;
		flex-direction: column;
	}

	#border button {
		border: none;
		background-color: var(--white);
		display: flex;
		justify-content: flex-end;
		margin: 5%;
	}

	#border button img {
		border: none;
		background-color: var(--white);
		margin-top: 5%;
	}

	.product {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.product img {
		width: 40rem;
	}

	.product p {
		padding: 5% 0%;
		font-size: 0.9rem;
	}

	.price p {
		padding: 5% 0%;
		font-size: 0.8rem;
	}

	.quantity p {
		padding: 5% 0%;
		font-size: 0.8rem;
	}

	#total {
		font-family: houschka-pro, sans-serif;
		font-weight: 600;
		font-style: normal;
		padding: 5% 0%;
	}

	#basketTotalContainer {
		margin: 5% 7%;
		padding-bottom: 20%;
		display: flex;
		flex-direction: column;
	}

	.betaling {
		display: flex;
		justify-content: center;
		padding: 10%
	}

	.betaling button {
		width: 12rem;
		height: 2.2rem;
		background-color: var(--blue);
		border: 1px solid var(--lightgrey);
	}

	.betaling button a {
		color: var(--white);
		font-size: 1.2rem;
		text-decoration: none;
	}
	/* MAIN - SLUT */
  
	/* FOOTER */
  
	footer {
	  background-image: url('../images/baggrund2.png');
	  background-repeat: no-repeat;
	  height: 600px;
	  width: 100%;
	}
  
	#footer {
	  display: flex;
	  flex-direction: column-reverse;
	}
  
	.some {
	  display: flex;
	  flex-direction: row;
	  padding-top: 40%;
	  margin: 5% 30%;
	  justify-content: center;
	  justify-content: space-between;
	  align-items: baseline;
	}
  
	.logofoot {
	  width: 100%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
  
	.billede{
	  width: 75%;
	}
  
	.links {
	  display: flex;
	  flex-direction: column;
	}
  
	.links a {
	  color: var(--white);
	  text-decoration: none;
	  line-height: 2rem;
	  text-align: center;
	}
  
	#copyright{
	  margin-top: 14%;
	  color: var(--lightgrey);
	  text-align: center;
	  font-size: 0.5rem;
	}
}