body {
	margin: 0;
	padding: 0;
	background-color: white;
}


#header {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100vh;
	background: no-repeat center center fixed url(header-rowing-smallboats.jpg);
    background-size: cover;
	/* background: no-repeat top center fixed url(http://www.pascalvangemert.nl/view/images/background.jpg); */
	text-align: center;

}
#header .overlay {
	background-color: #1976D2;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 0.5;
    filter: alpha(opacity=50);
	z-index: 2;
}
	
#header img#logo {
	display: block;
	margin: 0px auto 0px auto;
	padding: 280px 0px 0px 0px;
	position: relative;
	z-index: 4;
}
#header .linespace {
	margin: 30px auto;
    position: relative;
    z-index: 4;
    border: black 2px solid;
    width: 30%;
    max-width: 250px;
}
#header h1 {
	position: relative;
	z-index: 4;
	font-family: Arial, Helvetica, sans-serif
}
#header p {
	text-align: center;
	font-size: 20px;
	width: 60%;
    margin: 30px auto 0px auto;
}

.nav {
	display: block;
    position: absolute;
    z-index: 8;
    width: 120px;
    background-color: #2d2d2d;
    color: white;
    top: calc(100vh - 80px);
    left: 85%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.nav a {
	display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    text-decoration: none;
    padding-top: 30px;
    color: white;
}
.nav a:hover {
	color: #f0f0f0;
}
.nav a.active {
	background-color:#1976D2;
	color: white;
}

.content {
	margin: 0px;
	padding: 100px 0px;
	width: 100%;
	/* min-height: 100vh; */
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}
.content .part1 {
	width: 45%;
	margin-left: 5%;
    display: inline-block;
}
.content .part2 {
    width: 45%;
	margin-right: 5%;
    display: inline-block;
    float: right;
}
.content p {
	font-size: 1em;
	width: 80%;
    margin: 0px auto 30px auto;
}
.content h1 {
	font-size: 2.5em;
	width: 60%;
    margin: 0px auto 20px auto;
}
.content h2 {
	font-size: 2em;
	width: 60%;
    margin: 0px auto 20px auto;
	padding: 15px 0px 0px 0px;
}
.content h3 {
	font-size: 1.5em;
	width: 60%;
    margin: 0px auto 20px auto;
	padding: 15px 0px 0px 0px;
}

.altA {
	background: white;
	color: #1976D2;
}
.altA a {
	color:#041221;
}

.altB {
	background: #1976D2;
	color: white;
}
.altB a {
	color:#d0deed;
}




ul.skills {
    list-style-type: none;
	width: 60%;
    margin: auto;
    padding: 0px 0px 15px 0px;
}
ul.skills li {
	display: inline-block;
	padding: 8px;
	margin: 10px 10px;
	/* border-radius: 6px; */
}
.altA ul.skills li {
	border: 1px solid #1976D2;
	
}
.altB ul.skills li {
	border: 1px solid white;
}

a.CTA {
	display: inline-block;
	padding: 8px;
	margin: 10px 10px;
	/* border-radius: 6px; */
	text-decoration:none;

}
.altA a.CTA {
	border: 2px solid #1976D2;
	background: #1976D2;
	color: white;
}
.altA a.CTA:hover {
	background: white;
	color: #1976D2;
}
.altB a.CTA {
	border: 2px solid white;
	background: white;
	color: #1976D2;
}
.altB a.CTA:hover {
	background: #1976D2;
	color: white;
}


ul.classes {
	width: 60%;
	margin: auto;
	padding: 0px 0px 0px 30px;
	text-align: center;
    list-style-type: none;
}
ul.classes li {
	display: inline-block;
	padding: 8px;
	margin: 10px 10px;
	/* border-radius: 6px; */
}
.altA ul.classes li {
	border: 1px solid #1976D2;
}
.altB ul.classes li {
	border: 1px solid white;
}

.jobs {
	/* list-style-type: none; */
	text-align: left;
	width: 80%;
	margin: auto;
}
.job-entry {
	/* border: 1px dotted white; */
	/* border-radius: 3px; */
	padding: 20px 10px 30px 10px;
	margin: 20px;
	min-width: 400px;
}
.job-entry .title {
	width: 33%;
	display: inline-block;
	padding-left: 2%;
}
.job-employer {
	font-size: 1.5em;
	font-weight: bold;
}
.job-location {
	margin-bottom:1em;
	padding-left: 2em;
}
.job-title {
	/* margin:3px 10px 10px 10px; */
	margin-top:0.5em;
	font-weight: bold;
	padding-left: 6px;
}
.job-title:before {
    content: "\00BB";
    margin-right: 6px;
}
.job-date {
	 padding-left: 18px;
}
.job-entry .description {
	list-style-type: '-';
    width: 55%;
	padding-right: 5%;
    float: right;
}
.job-entry .description li {
	margin:6px 0px 8px 10px;
	padding-left:5px;
	/* border-left: 1px solid white; */
	/* border-radius: 10px; */
}
.job-entry .skills {
	text-align: center;
}
.job-entry ul.skills {
	width: 80%;
	display: inline-block;
}

.clearfix {
	min-height: 20px;
}

.content .innerwrap {
	width: 75%;
	margin:auto;
}
.project {
	width: 50%;
    float: left;
	min-height: 400px;
}
.project h3 {
	width:100%;
}
.project p {
	width: 80%;

}

.langs {
	width:60%;
	margin: 10px auto 20px auto;
	padding: 10px;
	min-width: 400px;
}

.bar-topic {
	display: inline-block;
	width: 18%;
	margin-top: 10px;
	text-align: right;
	padding-right:2px;
	
}

.bar-container {
	width: 30%;
	display: inline-block;
	background-color: #f0f0f0;
	margin-top: 10px;
	/* border-radius: 5px; */
}

.bar-10 {width: 100%; height: 18px; background-color: #1976D2;
	/* border-radius: 5px;*/} 
.bar-9 {width: 90%; height: 18px; background-color: #1976D2;
	/* border-radius: 5px;*/} 
.bar-8 {width: 80%; height: 18px; background-color: #1976D2;
	/* border-radius: 5px;*/} 
.bar-7 {width: 70%; height: 18px; background-color: #1976D2;
	/* border-radius: 5px;*/} 
.bar-6 {width: 60%; height: 18px; background-color: #1976D2;
	/* border-radius: 5px;*/} 
.bar-5 {width: 50%; height: 18px; background-color: #1976D2;
	/* border-radius: 5px;*/} 
.bar-4 {width: 40%; height: 18px; background-color: #1976D2;
	/* border-radius: 5px;*/} 
.bar-3 {width: 30%; height: 18px; background-color: #1976D2;
	/* border-radius: 5px;*/} 
.bar-2 {width: 20%; height: 18px; background-color: #1976D2;
	/* border-radius: 5px;*/} 
.bar-1 {width: 10%; height: 18px; background-color: #1976D2;
	/* border-radius: 5px;*/} 

@media only screen and (max-width: 1100px) {
	.job-entry .title {
		width: 80%;
		display: block;
		margin: auto;
	}

	.job-entry .description {
		width: 80%;
		float: none;
		margin: 10px auto 0px auto;
	}
	
	/* .job-title { */
		/* padding-left: 12px; */
	/* } */
	/* .job-date { */
		 /* padding-left: 24px; */
	/* } */
}

@media only screen and (max-width: 900px) {
	.content .part1 {
		width: 85%;
		margin: 0px auto;
		display: block;
	}
	.content .part2 {
		width: 85%;
		margin: 0px auto;
		display: block;
		float: none;
	}
	.content .part2 > :first-child {
		border-top: 1px solid #1976D2;

	}
	
	.project {
		float:none;
		width: 90%;
		min-height:300px;
	}
	.bar-container {
		width: 80%;
	}
}

@media only screen and (max-width: 600px) {


	.job-entry .title {
		width: 100%;
	}

	.job-entry .description {
		width: 100%;
	}
	

}