*{
	margin: 0;
	padding: 0;
}

@font-face {
  font-family: myFirstFont;
  src: url("../fonts/allura-regular.ttf");
}

body{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	background-color: rgb(37,31,21);
}

	/* --- container --- */

#container{
	max-width: 980px;
	padding-top: 250px;
	padding-bottom: 150px;
	margin: 0 auto;
	background-image: url("../images/ochtenddieze.jpg");
	margin-left: 13%;
}

	/* --- eind container --- */

	/* --- header --- */

header{
	width: 80%;
	height: 185px;
	background-color: rgb(142,116,81);
	padding-top: 5px;
	margin-left: 5%;
}

header img{
	float: left;
	width: 15%;
	height: 125px;
	margin-left: 5%;
	object-fit: cover;
	border-radius: 5px 30px;
	object-position: 0px -15px;
	padding-bottom: 8px;
}

h1{
	width: 40%;
	margin-left: 5%;
	color: rgb(135,150,91);
	font-family: myFirstFont;
	font-size: 3em;
}

header h3{
	color: rgb(37,31,21);
}

header h2{
	font-size: 18px;
	color: rgb(37,31,21);
}

/* --- eind header --- */

#adres{
	width: 40%;
	color: rgb(179,189,147);
	margin-left: 40%;
	margin-top: 60px;
}

.adresinhoud a{
	text-decoration: none;
	color: rgb(37,31,21);
}

.adresinhoud a:hover{
	color: inherit;
	color: rgb(135,150,91);
}

	/* --- eind header --- */

	/* --- inhoud --- */

#inhoud{
	width: 80%;
	height: 500px;
	margin-left: 5%;
	background-color: rgba(254,255,195,0.6);
	padding: 15px 0;
	padding-bottom: 50px;
}

#profiel{
	width: 70%;
	padding: 7%;
	margin-left: 6%;
	background-color: rgba(254,255,195,0.7);
}

.profielinhoud h2{
	width: 100%;
	margin-top: 4px 0;
	color: rgb(181,113,47);
	background-color: rgb(36,29,19);
	font-size: 17px;
	text-align: center;
}

#contact{
	display: none;
	width: 70%;
	padding: 7%;
	margin-left: 6%;
	background-color: rgba(254,255,195,0.7);
}

#contact h2{
	width: 100%;
	margin-top: 4px 0;
	color: rgb(181,113,47);
	background-color: rgb(36,29,19);
	font-size: 17px;
	text-align: center;
}

#popop{
	display: none;
	width: 40%;
	height: 60px;
	position: fixed;
	top: 53%;
	background-color: rgb(179,189,147);
	color: white;
	margin-left: 85px;
	padding: 16px 3px;
}

#opleidingen{
	display: none;
	width: 70%;
	padding: 7%;
	margin-left: 6%;
	background-color: rgba(254,255,195,0.7);
}

.over:hover{
	background-color: rgb(179,189,147);
	cursor: pointer;
}

#opleidingen th{
	color: rgb(181,113,47);
	background-color: rgb(36,29,19);
	font-size: 13px;
	text-align: center;
}

#opleidingen td{
	width: 33%;
	text-align: center;
	padding: 13px 0;
}

#werkervaring{
	display: none;
	width: 70%;
	padding: 7%;
	margin-left: 6%;
	background-color: rgba(254,255,195,0.7);
}

#werkervaring th{
	color: rgb(181,113,47);
	background-color: rgb(36,29,19);
	font-size: 13px;
	margin-left: 1% 0;
	text-align: center;
}

#werkervaring td{
		padding: 10px 0;
}

#portfolio{
	display: none;
	width: 70%;
	padding: 7%;
	margin-left: 6%;
	background-color: rgba(254,255,195,0.7);
}

#portfolio p{
	width: 90%;
	color: rgb(181,113,47);
	background-color: rgb(36,29,19);
	font-size: 11px;
	text-align: center;
}

#portfolio img{
	width: 90%;
	height: 120px;
	object-fit: cover;
	padding-bottom: 1px;
}


	/* --- eind inhoud --- */

	/* --- aside --- */

aside{
	width: 18%;
	float: right;
	background-color: rgb(36,29,19);
	position: absolute;
	top: 275px;
	left: 66%;
}

.kleurtje{
	cursor: pointer;
}

.kleurtje:hover{
	background-color: rgb(235,226,196) !important;
}

aside h2{
	margin-left: 6px;
	color: rgb(181,113,47);
	font-size: 13px;
	padding: 6px 0;
}

aside ul{
	margin-left: 7px;
}

aside li{
	margin-left: 7px;
	list-style-type: none;
	color: rgb(179,189,147);
}

aside p{
	margin-left: 12px;
	color: rgb(179,189,147);
}

#cijfer{
	margin-left: 15px;
}

	/* --- eind aside --- */

	/* --- footer --- */

footer{
	width: 80%;
	height: 25px;
	margin-left: 5%;
	background-color: rgb(142,116,81);
	margin-top: -24px;
	text-align: center;
	padding-top: 4px;
}

h4{
	text-align: center;
	color: rgb(37,31,21);
	font-size: 14px;
}

/* --- eind footer --- */

/* --- media --- */

@media only screen and (max-width: 768px){
	#adres{
		margin-left: 5%;
	}

	aside{
		width: 23%;
	}

	#profiel{
		max-height: 430px;
		direction: rtl;
		overflow-y: auto;
		padding-left: 3%;
	}

	.functie{
		max-height: 75px;
		direction: rtl;
		overflow-y: auto;
		padding-left: 3%;
	}

	#profiel::-webkit-scrollbar, .functie::-webkit-scrollbar, #portfolio::-webkit-scrollbar{
		width: 10px;
	}

	#profiel::-webkit-scrollbar-track, .functie::-webkit-scrollbar-track, #portfolio::-webkit-scrollbar-track{
		background: #f1f1f1;
	}

	#profiel::-webkit-scrollbar-thumb, .functie::-webkit-scrollbar-thumb, #portfolio::-webkit-scrollbar-thumb{
		background: rgb(36,29,19);
	}

	#profiel::-webkit-scrollbar-thumb:hover, .functie::-webkit-scrollbar-thumb:hover, #portfolio::-webkit-scrollbar-thumb:hover{
		background: rgb(179,189,147);
	}

	#portfolio{
		max-height: 430px;
		direction: rtl;
		overflow-y: auto;
		overflow-x: hidden;
		padding-left: 3%;
	}
	#portfolio img{
		width: 100%;
	}
	#portfolio p {
		width: 100%;
	}
}

@media screen and (min-width: 769px) and (max-width: 992px){
	#adres{
		margin-left: 7%;
	}
	aside{
		width: 20%;
	}

	#profiel{
		max-height: 420px;
		direction: rtl;
		overflow-y: auto;
		padding-left: 3%;
	}

	#profiel::-webkit-scrollbar, #portfolio::-webkit-scrollbar{
		width: 10px;
	}

	#profiel::-webkit-scrollbar-track, #portfolio::-webkit-scrollbar-track{
		background: #f1f1f1;
	}

	#profiel::-webkit-scrollbar-thumb, #portfolio::-webkit-scrollbar-thumb{
		background: rgb(36,29,19);
	}

	#profiel::-webkit-scrollbar-thumb:hover, #portfolio::-webkit-scrollbar-thumb:hover{
		background: rgb(179,189,147);
	}

	#portfolio{
		max-height: 430px;
		direction: rtl;
		overflow-y: auto;
		padding-left: 3%;
	}
	#portfolio img{
		width: 100%;
	}
	#portfolio p {
		width: 100%;
	}

}