* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box; 
}

html,
button,
input,
select,
textarea {
color: #fff;
}

html {
font-size: 1em;
}

html, body {
height: 100%;
margin:0;
padding:0;
}
main,
header,
footer {
display: block;
}

/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/

::-moz-selection {
background: #F63;
text-shadow: none;
}

::selection {
background: #F63;
text-shadow: none;
}

h1,h2,h3,h3,.large {
font-family: 'Calibri', sans-serif;
font-weight: 800;
text-transform: uppercase;
}

p, li {
font-family: 'Calibri', serif;
font-weight: normal;
font-size: 16px;
line-height: 20px;
color: #fff;
}
.huisstijl {
color: rgba(238, 114, 3, 1);
}

.fijnbrowsen {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}

/* opzet */
.header-inner,
.nav-inner,
.wie-inner,
.wat-inner,
.bio-inner,
.contact-inner,
.footer-inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}

#header {
position: relative;
width: 100%;
max-width: 100%;
height: 100%;
background: url(../img/bg_thayssenvanlieshout_splashscreen.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
.header-inner { 
position: relative;   
height: 100%;
text-align: center;
}
 
/* bewegende pijl homepage */
.scroll {
position: absolute;
bottom: 50px;
left: 50%;
text-align: center;
width: 205px;
margin-left: -106px;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: jumper;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-duration: 0.5s;
animation-name: jumper;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@-webkit-keyframes jumper {
from {
bottom: 10px;
}

to {
bottom: 30px;
}
}

@keyframes jumper {
from {
bottom: 10px;
}

to {
bottom: 30px;
}
}

nav {
position: absolute;
width: 100%;
background: #ffffff;
z-index: 100;
opacity: 0.90;
}
.nav-inner {
width: 100%;
max-width: 1000px;
height: 75px;
margin: 0 auto;
overflow: visible;
}

.nav-inner ul {
width: 50%;
padding-top: 10px;
padding-left: 10px;
float: right;
}
.nav-inner li {
width: 19%;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 24px;
text-transform: lowercase;
float: left;
overflow: hidden; 
}

.nav-inner li a {
color: #000;
text-decoration: none;
}
.nav-inner li a:hover {
color: rgba(238, 114, 3, 1);
text-decoration: none;
}

.nav-inner li a.active { 
color: rgba(238, 114, 3, 1);
text-decoration: none;
}

/* fixeer het menu aan de top van het venster */
/* aangestuurd via jQuery */
nav.fixed {
position: fixed;
top: 0;
width: 100%;
height: 75px;
z-index: 1000;
}

.main,
main {
position: relative;
background: #fff;
color: #000;
padding-top: 75px; /* de hoogte van het menu */
z-index: 10;
}

#wie {
	position: relative;
	z-index: 3;
	background-attachment: scroll;
	background-image: url(../img/bg_content.png);
	background-repeat: no-repeat;
	background-position: center 75px;
	background-color:white;
	min-height:633px;
	margin-bottom: 75px;
	}
.wie-content {
margin-top: 150px;
margin-left: 510px;
width:450px;
}
.wie-content p {
margin: 22px 0;
}

#wat {
position: relative;
z-index: 3;
background-attachment: scroll;
background-image: url(../img/bg_content.png);
background-repeat: no-repeat;
	background-position: center 75px;
	background-color:white;
	min-height:633px;
	margin-bottom: 75px;
	}
.wat-content {
margin-top: 150px;
margin-left: 510px;
width:450px;
}
.wat-content p {
margin: 22px 0;
}
.wat-content ul {
list-style:none;
margin:0;
padding:0;
}
.wat-content li {
background-image: url(../img/bg_list.png);
background-repeat: no-repeat;
background-position: 0px 0px;
height:20px;
margin-bottom:5px;
}
.wat-content li:hover {
background-image: url(../img/bg_list.png);
background-repeat: no-repeat;
background-position: 0px -20px;
height:20px;
margin-bottom:5px;
}
.wat-content a {
padding-left: 24px;
color: #FFF;
text-decoration: none;
display:block;
}
.wat-content a:hover {
padding-left: 24px;
color: rgba(238, 114, 3, 1);
text-decoration: none;
}

#bio {
position: relative;
z-index: 3;
background-attachment: scroll;
background-image: url(../img/bg_content.png);
background-repeat: no-repeat;
	background-position: center 75px;
	background-color:white;
	min-height:633px;
	margin-bottom: 75px;
	}

.bio-content {
margin-top: 150px;
margin-left: 510px;
width:450px;
}
.bio-content p {
margin: 22px 0;
}
.bio-content a {
color: rgba(238, 114, 3, 1);
text-decoration: none;
}
.bio-content a:hover {
color: white;
text-decoration: none;
}
#contact {
position: relative;
z-index: 3;
background-attachment: scroll;
background-image: url(../img/bg_content.png);
background-repeat: no-repeat;
	background-position: center 75px;
	background-color:white;
	min-height:633px;
	margin-bottom: 75px;
}

.contact-content {
margin-top: 150px;
margin-left: 510px;
width:450px;
}
.contact-content p {
margin: 22px 0;
}
.contact-content a {
color: #FFF;
text-decoration: none;
}
.contact-content a:hover {
color: rgba(238, 114, 3, 1);
text-decoration: none;
}
.namenbreedte {
float:left;
width:134px;
}
.divider {
	width:14px;
	height:14px;
	margin-left:4px;
	margin-right:4px;
}

/* footer dingetjes */
.footer,
footer {
position: relative;
width: 100%;
bottom:0;
}
.footer-inner {
padding-top: 30px;
padding-bottom: 30px;
text-align:center;
}
.footer-onder p {
	color:#CCC;
	padding-top: 200px;
	padding-bottom: 350px;
	text-align:center;
}

/* algemen website dingen */

.clear:before,
.clear:after {
content: " "; 
display: table;
}
.clear:after {
clear: both;
}
.clear {
*zoom: 1;
}

/* einde   ***  */