@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:300,500,700');

/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; }

/* Removes list-style form lists */
ol, ul { list-style: none; }


/* HTML & BODY */
html { 
	text-align: left; 
	height: 100%;
	background: #EEF7F4;
	color: #181716;
	box-sizing: border-box;
	font-size: 14px; /* 12px = 1em */
	line-height: 1.3;
	
}
*, *:before, *:after { box-sizing: inherit; }

body { 
	position: relative; 
	margin: 0 auto; 
	min-height: 100%;
	padding-bottom: 10em; /* hoogte footer */
}

.container { position: relative; margin: 0 40px; width: 100%; min-height: 100%; text-align: left; }


/* FONTS ETC */
h1 { font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 2em; line-height: 1.2; text-transform: uppercase; color: #181716; padding: 0.5rem 0 0.9rem 0; }
h2 { font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 2em; text-transform: uppercase; color: #9ED2C2; padding: 0.5rem 0 0.9rem 0.5rem; }
h3 { font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 1.4em; text-transform: uppercase; padding-bottom: 1.7em; }
p { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.08em; line-height: 1.4; padding-bottom: 1.3em; }
a { text-decoraton: underline; color: #181716; }
a:hover { color: #9ED2C2; }
ul.ul-tekst { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.08em; line-height: 1.4; padding-bottom: 1.3em; }
ul.ul-tekst li { list-style: disc inside none; margin-left: 1.3rem; text-indent: -1.3rem; }



/* KLEUREN */
.bggroen { background: #9ED2C2; }
.groen, .groen a { color: #9ED2C2; }
.bgwit { background: #FFF; }
.wit, .wit a { color: #FFF; }
.bgzwart { background: #181716; }
.zwart, .zwart a { color: #181716; }
.bggroen a:hover { color: #FFFFFF; }
.bgwit a:hover, .bgzwart a:hover { color: #9ED2C2; }


/* ALGEMENE STIJLREGELS */
.clear { float: none; clear: both; width: 100%; }

/* HEADER DINGEN */
header { position: relative; width: 100%; height: auto; margin-bottom: 2em; }
header.intro { height: 45.83em; } /* 550px */
header.vervolg { height: 35.42em; } /* 425px */

#logo { 
	position: absolute;
	display: block;
	/*left: -3.5em; */
	top: 50px;
	width: 230px; 
	height: 230px;
	overflow: hidden;
	z-index: 100;
}

#logo div { 
	width: 100%; height: 100%; 
	text-indent: -999px; 
	background: url('../images/taxberries-logo@2x.png') no-repeat; 
	background-size: 100% 100%; 
}
#logo a div { cursor: pointer; }
#logo a:hover div { background-position: bottom; }

#nav { position: absolute; top: 8em; height: 2.08em; width: 100%; }
#nav-hamburger { display: none; }
#nav ul { position: relative; width: 100%; margin-left: 260px; }
#nav li { position: relative; float: left; margin-right: 1.125%; }
#nav li.nav-kl { width: 12.5%; }
#nav li.nav-gr { width: 17.5%; }
/*#nav li.nav-kop, #nav li.nav-home { display: none; }*/
#nav ul div { 
	width: 100%; 
	text-align: left; /*text-transform: uppercase;*/
	font-family: 'Roboto Slab', serif; font-weight: 400; 
	font-size: 1.4em; color: #000; 
	/*background: #181716; border-radius: 0.6em; */
	line-height: 1.4;
}
#nav a, #nav a div { text-decoration: none; color: #FFF; }
#nav ul a:hover div, #nav li.actief a div { background: #9ED2C2; } 

#bovennav { position: absolute; top: 2.5em; right: -0.16em; width: auto; height: 2.75em; /* 33px */ z-index: 101; }
#bovennav > div { 
	position: relative; float: left; 
	margin-right: 1em; 
	font-family: 'Roboto Slab', serif; font-weight: 400; 
	font-size: 1em; line-height: 2.67em; 
	color: #9DD2C2;
}
#bovennav a { text-decoration: none; color: #9DD2C2; }
#bovennav a:hover { color: #181716; }
div#linkedin { width: 2.67em; }
div#linkedin div { text-indent: -999px; background: url('../images/linkedin-logo@2x.png') no-repeat; background-size: 100% 200%; overflow: hidden; }
div#linkedin a:hover div { background-position: bottom; } 
div#bovennav-streep { width: 1px; background: url('../images/lijn-bovennav@2x.png') no-repeat; overflow: hidden; text-indent: -999px; background-size: 1px 100%; }
div#mailadres { padding: 0 0.25em; }

div#strook { position: absolute; top: 16.67em; left: 0px; width: 100%; }
div#strook.strookintro { height: 29.17em; }
div#strook.strook { height: 18.75em; }
div#strook img { width: 100%; height: auto; }


/* FOOTER */
#footer { 
	position: absolute; right: 0; bottom: 0; left: 0; 
	font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1em; 
	background-color: #181716; color: #FFF; 
}
.footercontainer { position: relative; margin: 0 auto; padding: 2em 0 0 0 ; width: 800px; }
.footerkol { width: 31.25%; margin-right: 3.125%; float: left; }
.footerkol.laatste { margin: 0; }
.footerpadding { padding: 0 1.5em; }

#footer a { color: #FFF; }
#footer a:hover { color: #9ED2C2; }

#linkedin-footer { display: none; position: absolute; top: 2em; right: 1em; width: 2.67em; height: 2.67em; z-index: 102; }
#linkedin-footer div { width: 100%; height: 100%; text-indent: -999px; background: url('../images/linkedin-logo-alt@2x.png') no-repeat; background-size: 100% 200%; overflow: none; }
#linkedin-footer a:hover div { background-position: bottom; }


/* SECTIES */
.sectie { position: relative; width: 100%; height: auto; margin-bottom: 2em; }
.sectie::after { content: ""; display: block; clear: both; }
.sectie .links { float: left; }
.sectie .rechts { float: right; }
.kol1 { width: 31.25%; }
.kol2 { width: 65.625%; }


.sectie > .laatste { margin-right: 0px; }



.ul-nieuws { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 0.9em; margin: 0 0.5rem 0.5rem 0.5rem; }
.ul-nieuws li { padding-left: 1.5rem; text-indent: -1.5rem; border-bottom: 1px dotted #9ED2C2; padding-bottom: 0.7rem; margin-bottom: 0.7rem; }
.ul-nieuws li.laatste { border: none; }
.ul-nieuws li:before { content: ">>"; color: #9ED2C2; padding-right: 0.5rem; }

.ul-nieuws a { text-decoration: none; color: #181716; }
.ul-nieuws a:hover, .ul-nieuws li.actief a { color: #9ED2C2; }

.ul-sub { font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 1.17em; line-height: 1.2; margin: 0 0.5rem; }
.ul-sub li { padding-left: 1.6rem; padding-bottom: 0.5rem; text-indent: -1.6rem; }
.ul-sub li a { text-decoration: none; }
.ul-sub li:before { content: ">>"; color: #9ED2C2; padding-right: 0.5rem; }

.subtekst { padding: 0 0.5em; }
.subtekst p { font-family: 'Roboto Slab', serif; font-size: 1.17em; line-height: 1.2; }
.subtekst > img { width: 100%; height: auto; }




@media only screen and (max-width: 530px) {
	#logo { width: 170px; height: 170px; }
	#nav { position: absolute; top: 250px; }
	#nav ul { margin-left: 10px; }
}