*, html {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

body {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color: #8F8F8F ;
}

h1 {
	font-weight: 300;
	font-size: 32px;
	margin: 0 0 30px 0;
}

h2 {
	font-weight: 400;
	font-size: 22px;
	text-align: center;
}

p, a {
	font-size: 24px;
	margin: 0 0 30px 0;
	line-height: 1.4;
}

a {
	text-decoration: none;
	color: #8F8F8F;
	-webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
}

a:hover {
	color: #FFC00B;
}

section.content-block {
	position: relative;
}
section.content-block:nth-child(3):after,
section.content-block:nth-child(4):after {
	content: '';
	background-repeat: no-repeat;
	background-size: 700px auto;
	background-position: left bottom;
	top: 0;
	left: 60%;
	width: 40%;
	bottom: -20px;
	position: absolute;
	z-index: 0;
}

section.content-block:nth-child(3):after {
	background-image: url('/images/background-image-1.png');
}

section.content-block:nth-child(4):after {
	background-image: url('/images/background-image-2.png');
}

section.content-block:nth-of-type(2n) {
	background-color: #F8F8F8;
}

section#timeline-2 {
	z-index: 2;
}


section#timeline-3 {
	z-index: 1;
}

div.container {
	width: 1024px;
	margin: 0 auto;
	height: 700px;
}

div.left-col, div.timeline, div.right-col {
	height: 100%;
	float: left;
}

div.left-col {
	width: 130px;
}

div.timeline {
	width: 20px;
}

div.right-col {
	width: 874px;
}

div.content {
	margin: 70px 60px 0 60px;
}




/* TIMELINE */

div.line {
	width: 2px;
	height: 582px;
	margin-left: 8px;
}

div.line-above {
	height: 100px;
}

div.circle {
	width: 18px;
	height: 18px;
	border-radius: 10px;
}

div.year {
	margin: 70px 30px auto auto;
	width: 70px;
}

section#timeline-1 div.year {
	margin-top: 95px;
}


section#timeline-1 div.line-below {
	height: 232px;
}


/* colors */

div.line-yellow {
	background-color: #FFC00B;
}

div.line-green {
	background-color: #22A500;
}

div.line-orange {
	background-color: #FF5A0A;
}

div.circle-yellow {
	-webkit-box-shadow:inset 0 0 0 2px rgba(255,192,11,1);
	box-shadow:inset 0 0 0 2px rgba(255,192,11,1);
}

div.circle-green {
	-webkit-box-shadow:inset 0 0 0 2px rgba(34,165,0,1);
	box-shadow:inset 0 0 0 2px rgba(34,165,0,1);
}

div.circle-orange {
	-webkit-box-shadow:inset 0 0 0 2px rgba(255,90,10,1);
	box-shadow:inset 0 0 0 2px rgba(255,90,10,1);
}

div.year-yellow h2 {
	color: #FFC00B;
}

div.year-green h2 {
	color: #22A500;
}

div.year-orange h2 {
	color: #FF5A0A;
}




/* HOME */

section#home div.container {
	margin-top: 60px;
	height: 712px;
}

section#home p {
	text-align: center;
	font-size: 26px;
	margin: 0;
}

section#home div.timeline {
	width: 60px;
}

section#home div.right-col {
	width: 700px;
}

section#home div.right-col {
	margin-left: -30px;
}

div#home-image {
	width: 700px;
	height: 470px;
	background-image: url('/images/home-image.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: bottom;;
}

div#logo {
	width: 396px;
	margin: 0 auto 30px;
}

section#home div.timeline div {
	float: left;
}

div.line-left {
	width: 2px;
	height: 192px;
	margin: 8px 0 0 8px;
}

div.line-top {
	height: 2px;
	width: 26px;
	margin: 8px 0 0 0;
}

section#home div.timeline div.empty {
	height: 512px;
	float: none;
}


/* TIMELINE CONTENT BLOCKS */

div.vid {
	width: 560px;
	height: 400px;
	position: relative;
	z-index: 1;
}

section#timeline-1 div.container {
	height: 350px;
}




/* CONTACT */

section#contact div.container, section#contact div.line-yellow {
	height: 561px;
}

section#contact p {
	margin: 0 0 50px 0;
}

div.contact-details {
	height: 60px;
}

div.contact-details div {
	width: 35px;
	height: 35px;
	content: '';
	float: left;
	background-repeat: no-repeat;
	margin: 0 15px 0 0;
}

section#contact div.contact-details p {
	float: left;
	width: 400px;
	margin: 2px 0 0 0;
	display: block;
}

div#mail div {
	background-image: url('/images/icon-mail.png');
}

div#web div {
	background-image: url('/images/icon-web.png');
}

div#logo-senf {
	margin: 45px 30px 30px 0;
}

div#logo-senf, div#logo-jelle-kuiper {
	float: left;
}

div#logo-jelle-kuiper {
	margin: 80px 0 0 0;
}