@charset "utf-8";
/* CSS Document */


/*------------------RESET CSS------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0px;
	padding:0px;
	border:0px;
	outline:0px;
	font-size:100%;
	vertical-align:baseline;
}

body {
	line-height:1;
}

ol, ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content:none;
}

/* remember to define focus styles! */
:focus {
	outline:0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration:none;
}

del {
	text-decoration:line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse:collapse;
	border-spacing:0;
}

/*---EINDE RESET CSS---*/

@charset "utf-8";
/* CSS Document */

html,
body {
	margin:0;
	padding:0;
	height:100%;
	}
	
body {
	overflow:scroll;
	overflow-x:hidden;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size:cover;
	}
	
#container {
	min-height:100%;
	position:relative;
	}
	
#header {
	background-image:url(/splash/img/header_bg.jpg);
	background-repeat:repeat-x;
	padding:10px;
	height:140px;
	}

#body {
	padding:10px;
	padding-bottom:60px;	/* Height of the footer */
	}
	
#footer {	
	height:110px;		   /* Height of the footer */
	position:absolute;
	bottom:0;
	width:100%;

	background-repeat:repeat-x;
	}

/* other non-essential CSS */

#header p,
#header h1 {
	margin:0;
	padding:10px 0 0 10px;
	}
	
#footer p {
	margin:0;
	padding:10px;
	}

/* ----- ALGEMEEN ----- */

#center{
	position: absolute;
	bottom: 5%;
	left: 50%;
	height: 130px;
	width: 1000px;
	margin-left: -500px; /* De helft van de breedte */
	}


#content p{
	font-family: Helvetica, Arial;
	list-style-type:none;
	text-decoration:none; 
	color:#bcbcbc; 
	font-size:14px;
	float:left;
	line-height:20px;
	} 

p{
	font-family: Helvetica, Arial;
	list-style-type:none;
	text-decoration:none; 
	color:#bcbcbc; 
	font-size:14px;
	line-height:21px;
	}

p a {
	text-decoration:none;
	color:#000; 
	font-size:60px; 
	font-weight:bold; 
	font-family:20px; 
	text-align:center; 
	}

 p a:hover{
	 color: #c31408;
	 }

h1{
	font-family: Helvetica, Arial;
	list-style-type:none;
	text-decoration:none; 
	color:#373737; 
	font-size:20px;
	font-weight:bold;
	}

/* ----- EINDE ALGEMEEN ----- */

/* ----- HEADER ----- */

#head{
	width:960px;
	height:50px;
	margin:auto;
	}

.home{
	width:15px;
	height:13px;
	padding-top:18px;
	float:left;
	padding-right:0px;
	}

.home a{
	width:15px;
	height:13px;
	display:block;
	background-image:url(/splash/img/home.png); 
	background-position:top; 
	background-repeat:no-repeat;	
	}

.home a:hover{ 
	background-image:url(/splash/img/home.png); 
	background-position:bottom; 
	background-repeat:no-repeat;
	}
	
#navigatie{
	text-decoration:none; 
    font-family: Helvetica, Arial;
	font-weight:bold;
	color:#bcbcbc; 
	float:left;
	margin-left:10px;
	padding-top:18px;
	}
	
#navigatie ul{
    font-family: Helvetica, Arial;
	list-style-type:none;
	text-decoration:none; 
	color:#bcbcbc; 
	font-size:14px;
	font-weight:bold;
	float:left;
	}
	
#navigatie ul li{
	display:inline; 
    font-family: Helvetica, Arial;
	margin-right:20px;
	}
	
#navigatie ul li a {
    font-family: Helvetica, Arial;
	list-style-type:none;
	text-decoration:none; 
	color:#bcbcbc; 
	}
	
#navigatie ul li a:hover {
    font-family: Helvetica, Arial;
	list-style-type:none;
	text-decoration:none; 
	color:#373737; 
	background-color:#FFF;
	}

#navigatie ul li a:active {
    font-family: Helvetica, Arial;
	text-decoration:none; 
	color:#373737; 
	}

#social{
	width:86px;
	height:40px;
	float:right;
	}

.facebook{
	width:9px;
	height:19px;
	padding-top:15px;
	float:left;
	padding-left:30px;
	padding-right:30px;
	}

.facebook a{
	width:9px;
	height:19px;
	display:block;
	background-image:url(/splash/img/fb.png); 
	background-position:top; 
	background-repeat:no-repeat;	
	}

.facebook a:hover{ 
	background-image:url(/splash/img/fb.png); 
	background-position:bottom; 
	background-repeat:no-repeat;
	}

.pinterest{
	width:14px;
	height:19px;
	padding-top:15px;
	float:left;
	}

.pinterest a{
	width:14px;
	height:19px;
	display:block;
	background-image:url(/splash/img/pinterest.png); 
	background-position:top; 
	background-repeat:no-repeat;	
	}

.pinterest a:hover{ 
	background-image:url(/splash/img/pinterest.png); 
	background-position:bottom; 
	background-repeat:no-repeat;
	}
	
/* ----- EINDE HEADER ----- */

/* ----- FOOTER ----- */

#foot{
	}

#logo{
	width:170px;
	height:50px;
	margin:auto;
	padding-top:20px;
	}

#plenso {
	margin:auto;
	font-family: Helvetica, Arial,sans-serif;
	font-size:11px;
	color:#c41407;
	padding-top:22px;
	text-align:center;
	}

#plenso a{
	text-decoration:none;
	font-family: Helvetica, Arial,sans-serif;
	font-size:11px;
	color:#c41407;
	padding-top:22px;
	text-align:center;
	}

#plenso a:hover{
	text-decoration:underline;
	font-family: Helvetica, Arial,sans-serif;
	font-size:11px;
	color:#c41407;
	padding-top:22px;
	text-align:center;
	}

#plenso a:visited{
	text-decoration:none;
	font-family: Helvetica, Arial,sans-serif;
	font-size:11px;
	color:#c41407;
	padding-top:22px;
	text-align:center;
	}
	
/* ----- EINDE FOOTER ----- */

/* ----- HOME ----- */

#home{
	width:960px;
	margin:auto;
	margin-top:-80px;
	height:1520px;
	}
	
/* --- Container configuration ---------------------------------------------------------- */
.viewport {
    border: 1px solid #eee;
    float: left;
    height: 200px;
    margin: 0 1px 1px 0;
    overflow: hidden;
    position: relative;
    width: 317px;
}

/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
   class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
    margin-right: 0;
}

/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
    display: block;
    position: relative;
}

.viewport a img {
    height: 332px;
    left: -20px;
    position: relative;
    top: -20px;
    width: 500px;
}

/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
    display: none;
	font-family: Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-weight: bold;
    height: 100%;
    padding-top: 100px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 100%;
    z-index: 100;
}
    .viewport a span em {
        display: block;
        font-size: 0.45em;
        font-weight: normal;
    }

/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
    background-color: rgba(195, 20, 8, 0.6);
    color: #fff;
    text-shadow: #000 0px 0px 20px;
}
    .dark-background em {
        color: #ccc;
    }

/**
 * You could create multiple hover background classes for different looks depending on the
 * image type. Use your imagination!
 */

/* ----- EINDE HOME ----- */

/* ----- ABOUT ME ----- */

#aboutme {
	width:960px;
	margin:auto;
	margin-top:-60px;

	}

#aboutme p{
	font-family: Helvetica, Arial;
	list-style-type:none;
	text-decoration:none; 
	color:#bcbcbc; 
	font-size:14px;
	float:left;
	line-height:20px;
	}

#foto{
	width:180px;
	height:180px;
	padding-top:85px;
	padding-left:15px;
	padding-bottom:15px;
	}

/* ----- EINDE ABOUT ME ----- */

/* ----- DETAIL ----- */

#detail{
	width:960px;
	margin:auto;
	margin-top:-80px;
	height:780px;
	}

#uitleg {
	width:240px;
	height:auto;
	float:left;
	padding-right:20px;
	}

#fotodetail{
	padding-top:25px;}

/* ----- EINDE DETAIL -----*/

/* ----- CONTACT ----- */

#contact {
	width:960px;
	margin:auto;
	margin-top:-60px;
	height:550px;
	}

#form {
	width:440px;
	height:500px;
	margin-top:0px;
	float:left;
	padding-right:20px;
	}
	
#form form input[type=text] {
	width:170px; 
	padding:3px; 
	color:#220000; 
	font-size:13px; 
	font-family:Verdana, Geneva, sans-serif; 
	margin-right:10px; 
	margin-bottom:5px;
	}
	
#form form select { 
	padding:5px; 
	font-weight:400;
	}
	
#form form textarea {
	padding:5px; 
	font-size:14px; 
	font-family:Verdana, Geneva, sans-serif; 
	overflow:hidden; 
	width:357px; 
	}
	
#form form input[type=submit] { 
	font-size:12px;
	color:#FFF; 
	font-family:Verdana, Geneva, sans-serif; 
	padding:5px 10px 5px 10px;
	background-color:#000;
	border:1px solid #000;
	margin-left:-10px;
	}

#form form input[type=submit]:hover { 
	border: 1px solid #000;
	background-color:#000000;
	color:#FFFFFF;
	}
	
/* ----- EINDE CONTACT ----- */







































/* Sudo Slider */
#slider ul, #slider li{
	margin:-10;
	padding:0;
	list-style:none;
	position:relative;
	display:block;
	}
	
/* Uncomment this if you wan't to only have 1 visible slide before the javascript kicks in. 
#slider li {display:none;}	
#slider li:first-child {display:block;}
*/

#slider, #slider li {
	width:960px;  
	height: 470px; 
	overflow:hidden; 
	}
	
/* // Sudo Slider */	
/* Numeric Navigation */
ol {margin:1em 0;padding:0;height:28px;	}
ol li{margin:0 10px 0 0; padding:0;float:left;list-style:none;height:28px;line-height:28px;}
ol li a{float:left;height:28px;line-height:28px;border:1px solid #ccc;background:#DAF3F8;color:#555;padding:0 10px;text-decoration:none;}
ol li.current a{background:#5DC9E1;color:#fff;}
ol li a:focus, .prevBtn a:focus, .nextBtn a:focus{outline:none;}

.graphic, .prevBtn, .nextBtn{margin:0;padding:0;display:block;overflow:hidden;text-indent:-8000px;}
.prevBtn, .nextBtn {display:block;width:30px;height:77px;position:absolute;left:-30px;top:71px;z-index:1000;background:url(../images/btn_prev.gif) no-repeat 0 0;cursor:pointer;}	
.nextBtn{left:696px;}														
.nextBtn {background:url(../images/btn_next.gif) no-repeat 0 0;}	

/* Some demos use this line */
#slider2 ul, #slider2 li{margin:0;padding:0;list-style:none;position:relative;display:block;} #slider2, #slider2 li {width:696px;overflow:hidden;}