/* 
// Welkom bij de source code van mijn website
*/ 

/*body {
  margin:0;
  padding:0;
  background-color: #222;
  color: white;
  font-family: "Helvetica Neue";
  font-weight: 100;
  font-size: 1em;
  line-height: 1.3em;
}*/

#header {
	width: 100%;
	text-align:center;
	background-color:white;
	color:black;
	font-weight: 100;
	font-size:2em;
	padding: 20px 0px;
	border-bottom: 1px solid gray;
}

#navbar-container {
	width:100%;
	display:inline-block;
	background-color:white;
}


#navbar {
	margin: 0 auto;
	width:334px;
}

#nav {
	list-style: none;
	width:100%;
}

#nav li {
	float: left; 
}

#nav li:first-child {
	border-left: 1px solid gray;
}

#nav li a {
	display: block;
	text-align:center;
	padding: 8px 10px;
	text-decoration: none;
	color: black;
	width:90px;
	border-right: 1px solid gray;
}

#nav li a:hover,#nav li a:focus {
	color: white;
	background-color:black;
}
#nav li a:active {
	color: white;
	background-color:#404040;
}

.article-box {
	display: block;
	float: left;
	margin:10px;
	width: 200px;
	height: 200px;
	overflow: hidden;
	text-decoration: none;
	z-index:+1;
}

a.article-box:link {
  color: rgb(000, 000, 000);
}

/* visited link */
a.article-box:visited {
  color: rgb(53, 78, 101);
}

a.article-box:visited:hover {
  color: rgb(53, 78, 101);
}

/* mouse over link */
a.article-box:hover {
  color: rgb(000, 000, 000);
}

/* selected link */
a.article-box:active {
  color: rgb(080, 080, 080);
}

/* selected link */
a.article-box:active:visited {
  color: rgb(133, 158, 181);
}

.article-box-img {
	position:relative;
	height: 100%;
	width: 100%;	
}

.article-box-text {
	padding:3px;
	position:relative;
	background-color: rgba(200,200,200,1);
	height: 120px;
	width: 200px;
	bottom:120px;
	z-index:-1;
}

.article-box-text a:link ,.article-box-text a:hover, .article-box-text a:visited {
  color: lightgrey;
	height: 60%;
	width: 100%;
	bottom: 60%;
	z-index:-1;
}

#footer {
	position:relative;
	width: 90%;
	margin-top:-50px;
	height:50px;
	clear:both;
}

#content {
	margin:0 auto;
	padding-top:20px;
}

#content-doc {
  margin:0 auto;
	padding-top:20px;
  width: 100%;
}

@media screen and (max-width: 3840px) {
	#content {
		width: 3300px
	}
}
@media screen and (max-width: 3600px) {
	#content {
		width: 3080px
	}
}
@media screen and (max-width: 3360px) {
	#content {
		width: 2860px
	}
}
@media screen and (max-width: 3120px) {
	#content {
		width: 2640px
	}
}
@media screen and (max-width: 2880px) {
	#content {
		width: 2420px
	}
}
@media screen and (max-width: 2640px) {
	#content {
		width: 2200px
	}
}
@media screen and (max-width: 2400px) {
	#content {
		width: 1980px
	}
}
@media screen and (max-width: 2160px) {
	#content {
		width: 1760px
	}
}
@media screen and (max-width: 1920px) {
	#content {
		width: 1540px
	}
}
@media screen and (max-width: 1680px) {
	#content {
		width: 1320px
	}
}
@media screen and (max-width: 1440px) {
	#content {
		width: 1100px
	}
}
@media screen and (max-width: 1200px) {
	#content {
		width: 880px
	}
}
@media screen and (max-width: 960px) {
  #header {
    font-size:1,5em;
    padding: 15px 0px;
  }
	#content-articles {
		width: 660px
	}
}

@media screen and (max-width: 720px) {
  #header {
    font-size:1,2em;
    padding: 12px 0px;
  }
	#content {
		width: 440px
	}
}

@media screen and (max-width: 440px) {
	
	#navbar {
		height:calc(1em + 10px);
		width:260px;
	}
	
	#nav li a {
		padding: 3px 5px;
		width:75px;
	}
	
	#content {
		width: calc(100% - 20px);
	}
	.article-box {
		margin-bottom:10px;
		margin-left:10px;
		margin-right:10px;
		width: calc(100% - 20px);
		height: calc(100vw - 20px);
		overflow:hidden;
	}

	.article-box-img {
		height: 100%;
		width: 100%;
	}

	.article-box-text {
		line-height: 1em;
		font-size:1.9em;
		padding:3px;
		position:relative;
		height: 60%;
		width: 100%;
		bottom: 60%;
	}
}