/* HTML5 Website Screen Stylesheet */
body {
	background: 			#000000;
	font: 					normal 12px/16px Helvetica, Arial, sans-serif;
	color:					#e8e8e8;
	overflow-x:				hidden;
	position:				relative;	
}
html, body {}
::selection { 				background:#56ff71;color:#000;}
::-moz-selection { 			background:#56ff71;color:#000; }

#wrapper{
	margin:					0 auto;
	position:				relative;
	width:					1040px;
}	


/*Globals*/
a{
	color:					#56ff71;
	text-decoration:		none;
	cursor:					pointer;
}
a:hover{
	transition: 			color 550ms;
	-moz-transition:		color 550ms;
	-webkit-transition: 	color 550ms; 
	-o-transition: 			color 550ms; 
}

h1, h2, h3{
}

h3{
	font:					normal 24px/24px GothamUltraRegular;
	color:					#FFFFFF;
}

p{
	font:					normal 12px/16px Helvetica,Arial,sans-serif;
}


/*Loader*/
.loader{
	position:				absolute;
	background:				url('../image/ajax-loader.gif') no-repeat 0 0;
	width:					32px;
	height:					32px;
	display:				block;
	z-index:				10;
}
#content .content-holder.inActive{
	position: 				absolute;
	left: 					0;
	top: 					0;
	width: 					100%;
	overflow: 				hidden;
}



/*Fonts*/
@font-face {
    font-family: 'GothamUltraRegular';
    src: url('../font/GothamUltra/gotham-ultra-webfont.eot');
    src: url('../font/GothamUltra/gotham-ultra-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/GothamUltra/gotham-ultra-webfont.woff') format('woff'),
         url('../font/GothamUltra/gotham-ultra-webfont.ttf') format('truetype'),
         url('../font/GothamUltra/gotham-ultra-webfont.svg#GothamUltraRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*div*/
#header{
	overflow:		hidden;
	padding:		65px 0 0 0;
}
#header hgroup{
	margin:			0 0 25px 0;
	float:			left;
	display:		block;
}
#header hgroup h2,
#header hgroup h1{
	margin:			0 0 7px 0;
	background:		url('../image/logo-rikoostenbroek.png') no-repeat 0 0;
	text-indent:	-99999px;
	display:		block;
	width:			519px;
	height:			40px;
}
#header hgroup h1 a{
	display:		block;
	height:			100%;
}
#header hgroup h2{
	margin:			0;
	background:		url(../image/text-title.png) no-repeat 0 0;
	width:			445px;
	height:			13px;
}
#header .info{
	padding:		25px 0 0 0;
	float:			right;
}
#header .info ul{}
#header .info ul li{
	display:		block;
	text-align:		right;
	color:			#c0c0c0;
	font: 			bold 10px/11px Helvetica, Arial, sans-serif;
}
#header .info ul li.mail a,
#header .info ul li.mail{
	color:			#44ffda;
}
#header .info ul li.phone{
	color:			#72ff6c;
}
	
	
/*divigation*/
#navigation{
	display:		block;
	float:			left;
	padding:		0 0 15px 0;
}
#navigation ul{
	overflow:		hidden;
	position:		relative;
}
#navigation ul li{
	float:			left;
	display:		block;
	margin:			0 25px 0 0;
}
#navigation ul li a{
	color:			#e8e8e8;
}
#navigation ul li a:hover,
#navigation ul li a.active{
	color:			#56ff71;
	text-decoration:underline;
}
#navigation ul li.linethrough{
	text-decoration:line-through;
}

/*Controls*/
#controls{
	float:			right;
	display:		block;
	font:			10px/16px Helvetica,Arial,sans-serif;	
}
#controls a.previous,
#controls a.next{
	float:			left;
	display:		block;
	color:			#e8e8e8;
	text-transform:	uppercase;
}
#controls span{	float:left; margin:0 5px;}
#controls a:hover{
	color:			#56ff71;
}


/*Content*/
#content{
	position:		relative;
	padding:		0 0 20px 0;
}

/*Pieces / Main*/
#main{
	position:		relative;
	overflow:		hidden;
}
#main ul{}
#main ul li{
	display:		block;
	float:			left;
	width:			260px;
	height:			260px;
}
#main ul li a{
	display:		block;
}


/*About*/
.about{}
.about .info{
	padding:		40px 0 60px 0;
	width:			875px;
	display:		block;
}
.about h3,
.about h2{
	color:			#E8E8E8;
	font:			normal 24px/24px GothamUltraRegular;
	text-transform:	uppercase;
	padding:		0 0 20px 0;
}
.about .info p{}

.about .info p a{
	color:			#43ffd9;
}
.about div.col{
	float:			left;
	display:		block;
	width:			493px;
}	
.about div.clients{
	width:			256px;
}
.about figure{
	float:			right;
}
#main div.col ul li{
	width:			auto;
	height:			auto;
	float:			none;
}
#main div.col ul li a{
	display:		inline;
	color:			#FFF;
}
#main div.col ul li a:hover{
	color:			#73ff70;
	transition: 	all 550ms;
	-moz-transition:all 550ms;
	-webkit-transition: all 550ms; 
	-o-transition: 	all 550ms; 	
}



/*Layout*/
#layout{
	position:		relative;
	overflow:		hidden;
}
#layout{
	display:		block;
}
#layout .description{
	position:		relative;
	overflow:		hidden;
}
#layout .description h3{
	padding:		0 0 15px 0;
	text-transform:	uppercase;
}
#layout .description p{
	padding:		0 0 15px 0;
}
#layout .description p a:hover{
	text-decoration:underline;
}
#layout .description ul{
	padding:		0 0 15px 0;
}


/*SlideShow*/
.slideshow{
	position:		relative;
}
.slideshow .slider{
	overflow:		hidden;
	position:		relative;
}
.slideshow .slider ul{
	position:		relative;
	width:			99999px;
}
.slideshow .slider ul li{
	display:		block;
	float:			left;
}
li#fbshare{
	margin-top:		30px;
}

a#fbshare,
a#twitter{
	color:			#757575;
}
a#fbshare:hover,
a#twitter:hover{
	color:			#56FF71;
}

/*Paginator*/
.paginator{
	overflow:		hidden;
	position:		relative;
	float:			right;
}
.paginator span{
	background:		url('../image/sprite-buttons.png') no-repeat -14px 0;
	width:			12px;
	height:			12px;
	display:		block;
	float:			left;
	text-indent:	99999px;
	cursor:			pointer;
	margin:			0 0 0 5px;
}
.paginator .active:hover,
.paginator .active{
	background-position: 0 0;
	cursor:			default;
}
.paginator span:hover{
	background-position: -28px 0;
}


/*Vertical*/
.vertical{}
.vertical figure,
.vertical .figure{
	position:		relative;
	float:			left;
	width:			690px;
	height:			978px;
}
.vertical figure img,
.vertical .figure img{
	position:		absolute;
	top:			0;
	left:			0;
	height:			100%;
	width:			100%;
	overflow:		hidden;
}
.vertical .description{
	width:			300px;
	float:			left;
	text-align:		right;
	margin:			0 0 0 50px;
}
.vertical .slideshow{
	width:			690px;
	float:			left;
}
.horizontal .slideshow .slider{
	width:			690px;
}


/*Horizontal*/
.horizontal{}
.horizontal figure,
.horizontal .figure{
	width:			1040px;
	float:			none;
	overflow:		hidden;	
}
.horizontal .description{
	width:			810px;
	float:			left;
	text-align:		left;
}
.horizontal .slideshow{
	width:			1040px;
	padding:		0 0 15px 0;
}
.horizontal .slideshow .slider{
	width:			1040px;
}

/*Contact*/
#contact{
	position:		absolute;
	top:			0;
	left:			0;
	z-index:		3;
	width:			1040px;
	background:		#000000;
	height:			110px;
	overflow:		hidden;
}
#contact a{
	font:			normal 45px/45px GothamUltraRegular;
	text-transform:	uppercase;
	color:			#282828;
	display:		block;
}
#contact p{
	color:			#FFFFFF;
	font:			normal 45px/45px GothamUltraRegular;	
}


/*div*/
#footer{
	overflow:		hidden;
	position:		relative;
	padding:		0 0 50px 0;
}
#footer p{
	float:			left;
	width:			400px;
	font: 			bold 10px/11px Helvetica, Arial, sans-serif;
	color:			#757575;				
}
#footer p a:hover{
	text-decoration:underline;
}
#footer ul{
	float:			right;
	font: 			bold 12px/12px Helvetica, Arial, sans-serif;
}
#footer ul li{
	float:			left;
	display:		block;
	margin:			0 0 0 25px;
}
#footer ul li a{
	color:			#757575;				
}
#footer ul li a:hover{
	color:			#FFFFFF;
}