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



body { 
	background-attachment		: fixed;
	background-color			: #ffffff;
	background-position			: top left; 
	background-repeat			: no-repeat; 	
	margin						: 0;
	padding						: 0;
	background-size				: cover;
	-moz-background-size		: cover;
	-webkit-background-size		: cover;
	font-family					: Arial, Helvetica, sans-serif;
	font-size					: 12px;
	line-height					: 18px;
	letter-spacing				: 0.03em;
	}

.home {
	background-image			: url(../afbeeldingen/back.jpg);
}

.ontwerp {
	background-image			: url(../afbeeldingen/back3.jpg);
}

.ontwikkeling {
	background-image			: url(../afbeeldingen/back8.jpg);
}

.werkwijze {
	background-image			: url(../afbeeldingen/back5.jpg);
}

.portfolio {
	background-image			: url(../afbeeldingen/back2.jpg);
}

.wij {
	background-image			: url(../afbeeldingen/back6.jpg);
}

.visie {
	background-image			: url(../afbeeldingen/back7.jpg);
}

.contact {
	background-image			: url(../afbeeldingen/back4.jpg);
}

/*
	This next definition doesn't allow the background to get any smaller
	than a predefined size (640x426px in this case). Change the values
	here to match your background image size. The configuration in the
	flexi-background javascript file should also match these values.
*/

@media only all and (max-width: 1280px) and (max-height: 1024px) {
	body {		
		background-size:			1280px 1024px;
		-moz-background-size:		1280px 1024px;
		-webkit-background-size:	1280px 1024px;
	}
}

/*
	The next 2 definitions are for support in iOS devices.
 	Since they don't recoginze the 'cover' keyword for background-size
 	we need to simulate it with percentages and orientation
*/

@media only screen and (orientation: portrait) and (device-width: 320px), (device-height: 640px) {
	body {
		-webkit-background-size: auto ;
	}
}

@media only screen and (orientation: landscape) and (device-height: 320px), (device-width: 640px) {
	body {
		-webkit-background-size: auto  ;
	}
}
/* All of the following styles only get used when background-size isn't supported */

img#expando { 
	display:	none;
	position:	absolute; 
	z-index:	1;
	-ms-interpolation-mode: bicubic; 
} 

.wide img#expando, 
.tall img#expando { 
	display: 	block; 
} 

.wide img#expando { 
	height: 	auto;
	width: 		100%; 
} 

.tall img#expando { 
	height:		100%;
	width:		auto; 
}

.close
{
	clear: both;
}





div,
td,
p {
	font-size			: 12px;
}



a,
a:link,
a:active,
a:visited {
	color				: #333;
	text-decoration		: underline;
}

a:hover {
	color				: #999;
	text-decoration		: underline;
}



ul {
	margin				: 0px;
	padding				: 0px;
	list-style			: none;
	list-style-type		: none;
}

.li {
	line-height			: 18px;
	padding-left		: 20px;
	padding-top			: 0px;
	list-style-position	: inside;
}

h2 { display: inline; font-size: 40px; font-weight: normal; margin: 0; }
h3 { display: inline; font-size: 16px; font-weight: normal; margin: 0; color: #fff; background-color: #6e6e70; }








/* ---------------------
content
--------------------- */
content{
	position					: absolute;
	width						: 100%;
	top							: 180px;
}

.contentleft {
	position					: fixed;
	width						: 350px;
	z-index						: 4;
	text-transform				: uppercase;
	float						: left;
}	

#logo {
	position					: relative;
	margin						: 0px 0px 0px 70px;
	padding						: 0px 0px 0px 0px;
	height						: 80px;
}

.menu {
	position				: relative;
	margin					: 0px 0px 0px 110px;
	padding					: 0px 0px 0px 0px;
	color					: #666;
}

.menu li{
	display					: block;
	font					: normal 24px/36px Eurostile, Arial, Helvetica, sans-serif;
}

.menu li a:link, .menu li a:visited {
	letter-spacing			: 0.1em;
	padding					: 0 3px;
	text-decoration			: none;
	color					: #666;
}

.menu li a:hover, .menu li a:active {
	color					: #fff;
}

.contentright {
	position				: relative;
	margin					: 0px 0px 0px 350px;
	padding					: 0px 0px 0px 0px;
	width					: 650px;
	float					: left;
}



.intro {
	position				: relative;
	margin					: 50px 0px 0px 160px;
	padding					: 50px 30px 50px 30px;
	color					: #fff;
	font-size				: 40px;
	line-height				: 40px;
	font-weight				: normal;
	letter-spacing			: 0em;
	text-transform			: uppercase;
	text-align				: left;
	float					: left;
	background-color		: #00112a;
	opacity					: 0.90;
/**for pre-IE8**/
	filter					: alpha(opacity=90);
/**for IE8 only**/
	-ms-filter				: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	border-top-left-radius			: 5px;
	-moz-border-radius-topleft		: 5px;
	border-top-right-radius			: 5px;
	-moz-border-radius-topright		: 5px;
	border-bottom-left-radius		: 5px;
	-moz-border-radius-bottomleft	: 5px;
	border-bottom-right-radius		: 5px;
	-moz-border-radius-bottomright	: 5px;
}

.intro a:link, .intro a:active, .intro a:visited {
	color					: #b4c1c8;
	font-size				: 16px;
	line-height				: 25px;
	text-decoration			: none;
}

.intro a:hover {
	color					: #fff;
}

.tekst {
	position				: relative;
	margin					: 0px 0px 0px 0px;
	padding					: 20px 20px 40px 20px;
	width					: 610px;
	color					: #333;
	background-color		: #fff;
	opacity					: 0.98;
/**for pre-IE8**/
	filter					: alpha(opacity=98);
/**for IE8 only**/
	-ms-filter				: "progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";
	text-align				: left;
	float					: left;
	border-top-left-radius			: 5px;
	-moz-border-radius-topleft		: 5px;
	border-top-right-radius			: 5px;
	-moz-border-radius-topright		: 5px;
}

.tekst a:link, .tekst a:active, .tekst a:visited {
	color					: #ccc;
	text-decoration			: none;
}

.tekst a:hover {
	color					: #cc0000;
}




.tekst2 {
	position				: relative;
	margin					: 0px 0px 0px 0px;
	width					: 650px;
	height					: 10px;
	background-color		: #fff;
	opacity					: 0.98;
/**for pre-IE8**/
	filter					: alpha(opacity=98);
/**for IE8 only**/
	-ms-filter				: "progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";
	text-align				: left;
	float					: left;
	border-bottom-left-radius		: 5px;
	-moz-border-radius-bottomleft	: 5px;
	border-bottom-right-radius		: 5px;
	-moz-border-radius-bottomright	: 5px;
}




.tekstfooter {
	position				: relative;
	margin					: 0px 0px 0px 0px;
	padding					: 10px 20px 10px 20px;
	width					: 610px;
	color					: #fff;
	background-color		: #000;
	background				: rgba(0, 0, 0, 0.7);
	text-align				: left;
	float					: left;
	border-bottom-left-radius	: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius	: 5px;
	-moz-border-radius-bottomright: 5px;
}

.tekstfooter a:link, .tekstfooter a:active, .tekstfooter a:visited {
	color					: #cc0000;
	text-decoration			: none;
}

.tekstfooter a:hover {
	color					: #fff;
}



bijschrift {
	position				: fixed;
	bottom					: 100px;
	margin-left				: 0px;
	color					: #fff;
	border-left				: #999 1px solid;
}

.bijschrift2 {
	position				: relative;
	margin					: 0px 0px 0px 0px;
	padding					: 6px 10px 6px 6px;
	background-image		: url(../afbeeldingen/back_bijschrift.png);
	font-size				: 11px;
	line-height				: 14px;
}

.lijncontent {
	position				: relative;
	margin					: 15px 0px 15px 0px;
	padding					: 0px 0px 0px 0px;
	width					: 100%;
	height					: 1px;
	background				: #dedede;
}





/* ---------------------
header
--------------------- */
header{
	position				: fixed;
	background-image		: url(../afbeeldingen/back_footer.png);
	background-repeat		: repeat-x;
	width					: 100%;
	height					: 30px;
	top						: 0;
	z-index					: 3;
	text-transform			: uppercase;
	color					: #666;
}

.headerleft {
	position				: absolute;
	top						: 0;
	left					: 0;
	width					: 70%;
}

.headerright {
	position				: absolute;
	top						: 0;
	right					: 0;
	width					: 30%;
}



.headertext {
	margin					: 0px 0px 0px 20px;
	float					: left;
}

.headertext li h1{
	padding					: 0 5px;
	font					: normal 12px/30px Arial,sans-serif;
	letter-spacing			: 0.1em;
	display					: inline;
}

.headertext li a:link, .headertext li a:visited {
	color					: #666;
	text-decoration			: none;
}

.headertext li a:hover, .headertext li a:active {
	color					: #fff;
	text-decoration			: none;
}



.social {
	margin					: 2px 0px 0px 0px;
	padding					: 0px 0px 0px 0px;
	text-align				: left;
	float					: left;
	clear					: left;
}

.social li{
	display					: inline;
}

.social li a:link, .social li a:visited {
	padding					: 0 0px;
	text-decoration			: none;
}

.social li a:hover, .social li a:active {
	padding					: 0 0px;
}



#geluid {
	position				: relative;
	margin					: 6px 0px 0px 0px;
	padding					: 0px 0px 0px 0px;
	float					: left;
}





/* ---------------------
footer
--------------------- */
footer{
	position				: fixed;
	background-image		: url(../afbeeldingen/back_footer.png);
	background-repeat		: repeat-x;
	width					: 100%;
	height					: 30px;
	bottom					: 0;
	z-index					: 2;
	text-transform			: uppercase;
	color					: #666;
}

.footerleft {
	position				: absolute;
	top						: 0;
	left					: 0;
	width					: 80%;
}

.footerright {
	position				: absolute;
	top						: 0;
	right					: 0;
	width					: 20%;
	text-align				: right;
}



.footertext {
	margin					: 0px 0px 0px 20px;
	float					: left;
}

.footertext li{
	padding					: 0 5px;
	font					: normal 12px/30px Arial,sans-serif;
	letter-spacing			: 0.1em;
	display					: inline;
}

.footertext li a:link, 
.footertext li a:active, 
.footertext li a:visited {
	color					: #666;
	text-decoration			: none;
}

.footertext li a:hover {
	color					: #fff;
	text-decoration			: none;
}



.footertextright {
	margin					: 0px 20px 0px 0px;
	float					: right;
}

.footertextright li{
	padding					: 0 5px;
	font					: normal 12px/30px Arial,sans-serif;
	letter-spacing			: 0.1em;
	display					: inline;
}

.footerafb {
	display					: inline;
	margin					: 0px 80px 0px 0px;
	padding					: 0 5px;
	float					: left;
}





/* ---------------------
portfolio
--------------------- */
.tekstportfolio {
	margin					: 0px 0px 100px 0px;
	padding					: 20px 20px 20px 20px;
	color					: #333;
	background-color		: #fff;
	opacity					: 0.98;
/**for pre-IE8**/
	filter					: alpha(opacity=98);
/**for IE8 only**/
	-ms-filter				: "progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";
	text-align				: left;
	float					: left;
	border-top-left-radius			: 5px;
	-moz-border-radius-topleft		: 5px;
	border-top-right-radius			: 5px;
	-moz-border-radius-topright		: 5px;
	border-bottom-left-radius		: 5px;
	-moz-border-radius-bottomleft	: 5px;
	border-bottom-right-radius		: 5px;
	-moz-border-radius-bottomright	: 5px;
}

.tekstportfolio a:link, .tekstportfolio a:active, .tekstportfolio a:visited {
	color					: #ccc;
	text-decoration			: none;
}

.tekstportfolio a:hover {
	color					: #cc0000;
}

.ontwerpen {
	position				: relative;
	margin					: 0px 0px 0px 0px;
	padding					: 15px 0px 15px 0px;
	border-bottom			: 1px solid #f4f4f4;
	float					: left;
}

.ontwerp1 {
	position				: relative;
	margin					: 0px 0px 0px 0px;
	padding					: 0px 0px 0px 0px;
	width					: 430px;
	float					: left;
}

.ontwerp2 {
	position				: relative;
	margin					: 0px 0px 0px 30px;
	padding					: 0px 0px 0px 0px;
	width					: 150px;
	float					: left;
}

.ontwerp_klant {
	position				: relative;
	margin					: 0px 0px 0px 0px;
	padding					: 0px 0px 0px 0px;
	width					: 450px;
	font-size				: 14px;
	color					: #333; 
	font-weight				: normal; 
	float					: left;
}

.ontwerp_klant2 {
	font-size				: 11px;
	line-height				: 16px;
	color					: #c5c5c5; 
	margin-left: 5px; 
}

.ontwerp_info {
	position				: relative;
	margin					: 5px 0px 0px 0px;
	padding					: 0px 0px 0px 0px;
	color					: #b1b1b1;
	line-height				: 14px;
	float					: left;
	clear:left;
}







/* ---------------------
wij
--------------------- */
.cv {
	position				: relative;
	margin					: 20px 0px 0px 0px;
	padding					: 0px 0px 0px 0px;
	float					: left;
	width					: 610px;
}

.cvfoto {
	position				: relative;
	margin					: 0px 0px 0px 0px;
	padding					: 0px 0px 0px 0px;
	float					: left;
}

.cvtekst {
	position				: relative;
	margin					: 0px 10px 0px 20px;
	padding					: 0px 0px 0px 0px;
	width					: 400px;
	color					: #666;
	float					: left;
}

.cvsocial {
	margin					: 0px 0px 0px 10px;
	padding					: 2px 8px 0px 5px;
	background-color		: #e4e4e4;
	border-left				: 0px #999 solid;
	border-top				: 0px #999 solid;
	text-align				: left;
	float					: left;
}

.cvsocial li{
	display					: inline;
	padding					: 0 0px;
}

.cvsocial li a:link, .cvsocial li a:visited {
	padding					: 0 0px;
	text-decoration			: none;
}

.cvsocial li a:hover, .cvsocial li a:active {
	padding					: 0 0px;
}





/* ---------------------
contact
--------------------- */
.contact0 {
	position				: relative;
	margin					: 30px 0px 10px 0px;
	padding					: 0px 0px 0px 0px;
	width					: 590px;
	float					: left;
}

.contact1 {
	position				: relative;
	margin					: 0px 100px 0px 0px;
	padding					: 0px 0px 0px 0px;
	line-height				: 16px;
	text-align				: left;
	float					: left;
}

.contact2 {
	position				: relative;
	margin					: 0px 15px 0px 0px;
	padding					: 0px 0px 0px 0px;
	line-height				: 16px;
	float					: left;
}

.contact3 {
	position				: relative;
	margin					: 10px 0px 10px 0px;
	padding					: 0px 0px 0px 0px;
	border-top				: 1px #e2e2e2 solid;
	border-bottom			: 1px #e2e2e2 solid;
	float					: left;
}





/* ---------------------
fonts
--------------------- */
.contentheading1 {
	font-size				: 36px;
	color					: #333;
	font-weight				: normal;
	padding-top				: 0px;
	padding-bottom			: 0px;
	letter-spacing			: 0px;
	text-transform			: uppercase;
	display					: block;
}

.contentheading2 {
	font-size				: 19px;
	color					: #ccc;
	font-weight				: normal;
	padding-top				: 35px;
	padding-bottom			: 8px; 
	letter-spacing			: 0px;
	display					: block;
}

.contentheading3 {
	font-size				: 19px;
	color					: #333;
	font-weight				: normal;
	padding-top				: 10px;
	padding-bottom			: 10px; 
	letter-spacing			: 0px;
	display					: block;
}

.contentheading4 {
	font-size				: 16px;
	color					: #000;
	font-weight				: normal;
	padding-top				: 0px;
	padding-bottom			: 4px; 
	letter-spacing			: 0px;
	display					: block;
}

.contentheading5 {
	font-size				: 16px;
	color					: #ccc;
	font-weight				: normal;
	padding-top				: 0px;
	padding-bottom			: 4px; 
	letter-spacing			: 0px;
}

.contentheading6 {
	font-size				: 13px;
	color					: #ccc;
	line-height				: 16px;
}