* {
	box-sizing: border-box;  /* Vigtig: Gør at evt. padding i de enkelte div-containere ikke ødelægger formateringen i det responsive design - * betyder globalt */
}

body {
	font-family: Verdana;
	font-size: 11px;
}

a {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #000000;
	text-decoration: underline;
}
/*
.hardware_content {
	width: 100%;
	padding: 5px;
	background-color: #ffffff;
	border-left: 1px solid #aaaaaa;
	border-right: 1px solid #aaaaaa;
	border-bottom: 1px solid #aaaaaa;	
}

.software_content {
	width: 100%;
	padding: 5px;
	background-color: #ffffff;
	border-left: 1px solid #aaaaaa;
	border-right: 1px solid #aaaaaa;
	border-bottom: 1px solid #aaaaaa;	
}
*/
.content_wrap {
  	width: 100%;
  	overflow: auto;
}

.grid_container_main {
  display: grid;
  grid-template-areas:
  'header'
  'menu'
  'content'
  'facts'
  'footer';
  background-color: white;
  @media screen and (min-width: 2000px) {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
  }
}
/*
.grid_container_menu {			indlejret grid i menu containeren
	display: grid;
	grid-template-areas:
	'#1'
	'#2'
	'#3'
	'#4';
	background-color: white;
}
*/
.grid_container_hardware {		/* indlejret grid i content containeren */
	display: grid;
	grid-template-areas:
	'hardware_menu1'
	'hardware_menu2'
	'hardware_menu3'
	'hardware_content';
	background-color: white;
}

.grid_container_software {		/* indlejret grid i content containeren */
	display: grid;
	grid-template-areas:
	'software_menu1'
	'software_menu2'
	'software_menu3'
	'software_content';
	background-color: white;
}

.header {
  grid-area: header;
  background-color: #0099cc;
  border-bottom-right-radius: 95px;
  text-align: center;
  color: #ffffff;
  margin-bottom: 1%;
  @media screen and (max-width: 799px) {
	border-bottom-right-radius: 50px;
  	}
}

.header > h1 {
  font-size: 40px;
  @media screen and (max-width: 799px) {
	font-size: 20px;
	}	
}

.menu {
  	grid-area: menu;
	padding-right: 1%;
	margin-bottom: 1%;
	width: 100%;
	@media screen and (max-width: 799px) {
	padding-right: 0;
	width: 50%;
	margin-bottom: 5%;
	}

  	@media screen and (min-width: 800px) {
	width: 20%;
	float: left;
  }
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #ffffff;
  border: 1px solid #aaaaaa;
  border-radius: 10px;
  color: #000000;
}
/*
.menu li:hover {
  background-color: beige;
}

.#1 {
	grid-area: #1;
	width: 100%;
	@media screen and (max-width: 799px) {
	width: 50%;
	float: left;
	}
}

.#2 {
	grid-area: #2;
	width: 100%;
	@media screen and (max-width: 799px) {
	width: 50%;
	float: left;
	}
}

.#3 {
	grid-area: #3;
	width: 100%;
	@media screen and (max-width: 799px) {
	width: 50%;
	float: left;
	}
}

.#4 {
	grid-area: #4;
	width: 100%;
	@media screen and (max-width: 799px) {
	width: 50%;
	float: left;
	}
}
*/
.content {
  	grid-area: content;
  	padding-left: 1%;
	padding-right: 1%;
	margin-bottom: 1%;
	@media screen and (max-width: 799px) {
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 5%;
	}
  	@media screen and (min-width: 800px) {
	width: 60%;
	float: left;	
  }
}

.facts {
  grid-area: facts;
  border: 1px solid #aaaaaa;
  border-radius: 10px;
  background-color: beige;
  padding-left: 1%;
  margin-bottom: 1%;
  @media screen and (max-width: 799px) {
	padding-left: 0;
	}
  @media screen and (min-width: 800px) {
	width: 20%;
	float: left;
  }
}

.facts li {
  margin-bottom: 5px;
}

.footer {
  grid-area: footer;
  background-color: #0099cc;
  border-top-left-radius: 35px;
  color: #ffffff;
  text-align: center;