* {
	font-family: Courier New, monospace;
	font-weight: 600;
	transition: 1s;
}

html {
	background-color: #38352e;
	background-size: cover;
	background-image: url("digital_art_heart_art_background_103910_2560x1440.jpg");
	background-repeat: no-repeat;
	/*Onderstaande is om de transtitie van het vervagen van de pagina mooi te laten verlopen.*/
	opacity: 0;
}

body {
	
}

a {
	color: #48577D;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.main-container {
	z-index: 998;
}

.subkop-container {
	align-items: center;
	justify-content: center;
	display: flex;
	z-index: 999;
}

.subkop{
	text-align: center;
	position: relative;
	width: 100%;
}

.subkop ul {
	margin-top: 7px;
	margin-bottom: -25px;
	width: 100%;
	list-style: none;
	float: left;
}

.subkop ul li {
	display: inline-block;
	list-style: none;
	text-align: center;
}

.subkop ul li a {
	display: block;
	border-radius: 25px 25px 25px 25px;
	background-color: #38352e;
	transition: 0.2s;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
	width: 140px;
	height: 40px;
	margin-top: 5px;
	margin-right: 20px;
	margin-left: 20px;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	color: #e0bf78;
	position: relative;
}

/*Onderstaande laat de kleuren van de taakbalk precies omdraaien wanneer de muis over een van de knoppen hangt of een van de knoppen is geselecteerd.*/
.subkop ul li a:hover {
	color: #383838;
	background-color: #e0bf78;
}

.subkop ul li.selected a {
	color: #383838;
	background-color: #e0bf78;
}

/*Om de 'subkoppen' een mooi achtergrond aan te bieden, hebben wij onderstaande toegevoegd. Bron: vader Robin.*/
.subkop-background {
	background-color: #9c805f;
	height: auto;
	margin-top: 47px;
	margin-left: 7px;
	margin-right: 7px;
	border-radius: 40px 40px 40px 40px;
	padding-bottom: 22px;
	padding-top: 5px;
	/*Om bij de extra toevoeging van een lichte schaduw achter de knoppen te passen hebben wij ook een schaduw achter het het grijze vlak geplaatst.
	Bron: https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_shadow */
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
	/*Hiermee blijft de navigatie zichtbaar, ook bij het scrollen.*/
	position: fixed;
}

/*Onderstaande code is de css code die behoort tot het laten verschijnen en weer verdwijnen van de verschillende onderdelen/pagina's van de website.*/
.verstopt {
	display: none;
}
	
.zichtbaar {
	display: block;
	/*Om de functies en tekst van de rand van het scherm vandaan te krijgen hebben wij deze "margins" toegevoegd.*/
	margin-left: 100px;
	margin-right: 100px;
	margin-top: 127px;
	color: #383838;
	background-color: white;
	opacity: 0.7;
	border-radius: 40px;
	padding: 20px;
}

.about {
	margin-bottom: 100px;
	margin-top: 100px;
	margin-right: 15%;
	padding-left: 10%;
}

.home {
	margin-bottom: 100px;
	margin-top: 100px;
	margin-right: 15%;
	padding-left: 10%;
	font-size: 20px;
}

#webshopcontainer {
	width: 700px;
	margin-top: 50px;
	margin-bottom: 150px auto;
	margin-left: 10%;
	background-color: #eeeeee;
	padding-bottom: 15px;
	overflow: hidden;
	border-radius: 40px;
}

	#main {
		width: 490px;
		float: left;
	}
	
		#main table {
			width: 480px;
		}
		
			#main table th {
				padding: 10px;
				background-color: #48577D;
				color: #FFFFFF;
				text-align: left;
			}
			
			#main table td {
				padding: 5px;
				
			}
	
	#sidebar {
		width: 200px;
		float: left;
	}

/*Onderstaande is een hack om de standaard 40 pixels links in chrome te verwijderen*/
ul{
	-webkit-padding-start: 0;
}

/*Onderstaande is een clearfix om ervoor te zorgen dat alle tekst onder de taakbalk komt te staan.*/
.clearfix {
	clear: both;
}