@charset "utf-8";
/*
	orange: #e27726;
	blue: #2c95c7;
*/

@font-face{font-family:Nevis;src:url(../fonts/nevis.ttf)}
*{border:0;outline:0;margin:0;padding:0}
.clear:after{clear:both;display:block;font:1px/0 serif;content:".";height:0;visibility:hidden}
.nomarginright{margin-right:0!important}
.nomarginbottom{margin-bottom:0!important}
.noborderbottom{border-bottom:0px!important}
.alignleft{float:left}
.alignright{float:right}
.pagination{margin-top:5px}

pre{
	margin-bottom: 20px;
	background-color: #dedede;
	padding: 20px;
	border: 1px solid #666;
	tab-size: 2;
}

.trans{
	transition: all 0.25s;
	-webkit-transition: all 0.25s;
	-moz-webkit-transform: all 0.25s;
}
.wp-caption-text{
	font-style: italic;
	font-size: 13px;
}
.column450{
	width: 430px;
	float: left;
	margin-right: 40px;
}
	.column450 img{
		width: 100%;
	}
	#content .column450:last-child{
		margin-right: 0px;
	}
a{color:#2c95c7;text-decoration:none}
a:hover{color:#e27726;text-decoration:none}
html{overflow-y:scroll}
html,body{width:100%;height:100%;background-color:#fff;font-family:Helvetica, Arial;color:#000; background-image: url(../images/contentbg.jpg);background-position: top center;background-repeat: repeat-y;}
#footerforcer{
	width: 100%;
	min-height: 100%;
	position: relative;
	padding-bottom: 147px; /*147 = footer*/
	padding-bottom: 197px;
}
#headerholder{border-bottom:2px solid #111;width:100%;height:79px;background-image: url(../images/bg.jpg);position:fixed;top: 0;left: 0;z-index:150;}
#headerwrapper{width: 900px;margin:0px auto;position: relative;}
#header{height:inherit;width:900px;line-height:50px; margin: 0px auto;}
#headerwrapper a img{display:block;height:40px;float:left;margin-top:20px}
#header{width:500px;height:50px;float:right;outline-color:#666;padding:15px}
#header a{display:block;float:right;margin-right:30px;color:#5b5b5b;font-family:Nevis, Gothic}

#bgrepeatable{
	width: 900px;
	margin: 0px auto 0px auto;
	/*background-image: url(../images/WBgirder3.png);*/
}
#bgwrapper{ 
	width: 900px;
	margin: auto;
	/*background-color: #eee;*/
	padding-bottom: 60px;
	position: relative;
	margin-top: 80px;
	/*border: 1px solid #111;*/
	border-top: 0px;
	border-bottom: 0px;
	position: relative;
	z-index: 0;
}
	#bgwrapper.index{
		margin-top:0px;
	}

#banner, #emptybanner{
	width: 1200px;
	height: 400px;
	margin: auto;
	border-top: 0px;
	margin-top: 80px;
	background-color: #eee;
	-webkit-box-shadow:  0px 1px 6px 3px rgba(80, 80, 80, 1);
    box-shadow:  0px 1px 6px 3px rgba(80, 80, 80, 1);
	z-index: 100;
	position: relative;
}
	#emptybanner{
		height: 0;
		-webkit-box-shadow: none;
    	box-shadow: none;
	}
	#banner > a{
		display: block;
		height: inherit;
	}
	#banner.indexbanner{
		width: 100%;
		background-image: url(../images/slider/winkeltje-banner.png);
		background-repeat:no-repeat;
		background-position: center top;
	}

	#socialbox{
		position: absolute;
		width: 160px;
		height: 80px;
		left: -170px;
		top: 16px;
		overflow: hidden;
	}
		#socialbox > div{
			float: right;
		}


.spotlight{height:250px}
.spotlightimage{width:600px;height:inherit;float:left}
.spotlightimage img{width:inherit;height:inherit}
.spotlighttext{width:270px;margin-left:30px;height:inherit;float:left}
.bottom{width:700px;height:30px;border-bottom:1px solid #3f3f3f;margin:0 auto 30px}
#content.projectmargin{
	margin-bottom: 60px;
}

#content .bigtext, #social .bigtext{
	padding-top: 121px;
}

.bigtext{
	padding-top: 50px;
	margin: 0px auto 50px auto;
	width: 900px;
	font-size: 80px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-weight: bold;
	color: #111; /* 111 */
	text-shadow: 0px 2px 3px #333; /* 333 */
}



#gameholder{
	width: 900px;
	margin: 0px auto;
}
	.game{
		width: 214px;
		border: 1px solid transparent;
		float: left;
		height: 330px;
		position: relative;
		cursor: pointer;
		margin-right: 126px;
	}
		.game:hover .gameheader{
			opacity: 1;
		}
		.gameheader{
			position: absolute;
			top: 0;
			left: 0;
			width: inherit;
			text-align: center;
			background-color: #111;
			height: 35px;
			line-height: 35px;
			opacity: 0;
			
			color: #ccc;
		}
		.game img{
			width: inherit;
			height: inherit;
		}
		.game:hover{
			border: 1px solid #111;
		}
			.game:hover{
				opacity: 1;
			}
			.game a{
				display: block;
			}
		#gameholder .game:last-child{
			margin-right: 0;
		}
.games{
	padding-top: 60px;
}
#social, #contact{
	width: 900px;
	margin: 0px auto;
}
#social ul{ margin-left: 20px; }
#social ol{ margin-left: 23px; }
.socialwrapper, #social .socialwrappersingle{
	border-bottom: 2px solid #ccc;
	padding: 42px 0px;
}
	#social .socialwrappersingle, #social .socialwrapper:first-child{
		border-top: 2px solid #ccc;
	}
	#social .aligncenter{
		display: block;
		margin: 15px auto;
	}
	#social iframe{
		display: block;
		margin: 0px auto;
	}
	.socialpic{
		width: 100px;
		float: left;
	}
		.socialpic > img{
			width: inherit;
		}

	.socialtext{
		float: left;
		width: 760px;
		margin-left: 40px;
	}
		.socialtext h3{
			height: 23px;
			color: #2c95c7;
		}
			.socialtime{
				margin-left: 10px;
				line-height: 23px;
				font-weight: normal;
				color: #333;
			}
		.socialtime, .socialby{
			font-size: 12px;
		}
		.socialby{
			line-height:12px;
		}

		.socialdata{
			margin-top: 10px;
		}
			.socialdata img{
				max-width: 760px;
				height: auto;
			}
			.socialdata p, .socialdata ul{
				margin-bottom: 20px;
			}
			.socialdata h3{
				color: black;
				margin-bottom: 10px;
			}
			.socialdata blockquote{
				font-style: italic;
				margin: 0px 40px;
			}
	#contactinfo{
		
	}
		#contactinfo h3{
			margin-top: 20px;
		}
			#contactinfo h3:first-child{
				margin-top: 0;
			}

	#sassybot{

	}
		#sassybot, #contactinfo{
			width: 450px;
			float: left;
		}
.team .product{
	text-align: center !important;
}
	.team .product .producttext{
		padding-left: 0;
	}
.moveteamleft{
	margin-left: 154px !important;		/*I'm sorry :(*/;
}
#teamseparator{
	width: 100%;
	height: 2px;
	background-color: #444;
	margin-bottom: 30px;
}

h2{width:700px;font-weight:400;border-top:1px solid #3f3f3f;border-bottom:1px solid #3f3f3f;text-align:center;margin:30px auto;padding:10px 0}
#socialh{background-color:#000;width:100%;padding:30px 0}
#social .blogholder{border:1px solid #444;width:668px;float:left}
#about{margin-bottom:30px;padding-top: 30px;}
#about > div{float:left}
#abouttext{width:350px;margin-right:50px}
#abouttext .center{display:block;text-align:center}
#abouttext .Sassybot{color:#e27726;font-size:120%}
#aboutimage{width:500px}
#aboutimage img{width:inherit;height:400px}
.product{width:282px;float:left;margin:0 27px 30px 0;position: relative;}
.product a:hover .producttext > div{color:#111}
.product a{display:block;color:#000}
.productimage img{width:100%;height:200px}
.producttext{font-weight: bold;border-bottom:1px solid #444;padding-top:8px;padding-bottom:10px;padding-left:10px;width:272px;position:relative;}
.producttext > div{font-size:12px;color:#111;margin-top:2px;font-weight: normal;}
.product.noborderbottom .producttext{
	border-bottom: 0px;
}
#blogwrapper{width:670px;float:left}
.blogholder{border:1px solid #444;border-top:0}
.blogholder:first-child{border-top:1px solid #444}
.post ol li{margin-left:22px}
.post p{line-height:22px}
.blogholder h2,#pleft h2{border:0;text-align:left;font-size:21px;margin:0}
.dateholder{width:150px;float:left}
.post .dateholder img{ width: 140px; margin-left: 5px; }
.category{width:inherit;background-color:#000;padding:5px 0 5px 0}
.category h3{ font-weight:normal; text-align: center;padding-bottom:2px;}
.date{width:inherit;padding-bottom:12px;background-color:#000;text-align:center;line-height:25px}
.blog{float:left;width:458px;padding:0 30px 30px}
.blog .aligncenter{display:block;margin:15px auto}

#blogsocial{
	float: right;
}
	#blogsocial iframe:last-child{
		float: left;
	}
	
	.socialmedia:hover img{
		-ms-transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}

#pleft{width:207px;margin-right:24px;float:left}
#pimage{height:250px;width:100%}
#pabout{line-height:20px}
#pp{float:left;width:669px}
#pp.presentation{width:900px;padding-top:0}
#pp .product{width:207px;margin:0 24px 27px 0}
#pp .producttext{width:197px}
#pp .productimage img{width:100%;height:146px}


#project{
	padding-top: 60px;
}

#project img{
	max-width: 560px;
}

#info{width:298px;float:left;font-size:15px;background-color: #fff;border:1px solid #111;-moz-box-sizing: border-box; box-sizing: border-box; padding: 25px;}
#links{margin-top:10px;margin-bottom:10px}
#info p{margin-bottom:10px}
#info h3{font-size:19px;font-weight:400;color:#e27726;margin:25px 0 10px}
#info h3:first-child{margin-top:0;margin-bottom:0}
#info .subtitle,#info .infosub{font-size:13px;color:#111}
.subtitle:last-child{margin-bottom:15px!important}
#info .infosub{margin-bottom:5px}


#media{width:560px;float:left;margin-left:40px}
#media a{ margin: 0 auto 15px; display: block;}
#media a:last-child{ margin-bottom: 0px;}
#media img,#media iframe{display:block;margin:0 auto 15px}
#media img:last-child{margin-bottom:0}
.contactcolumn{width:250px;float:left;margin-right:50px}
/*#contact h3{font-weight:400;text-align:left;margin-bottom:10px}*/
#footerwrapper{border-top:2px solid #111;width:100%;height:150px;background-color:#000;padding-top: 15px;background-image: url(../images/bg.jpg);position: absolute;bottom: 0;}
#footer{position: relative;width:900px;height:inherit;margin:0 auto}
#footer h3{margin-top:10px;font-weight:400;color:#FF6E00}
#footer li{list-style-type:none;margin-top:4px}
	#bot{
		position: absolute;
		width: 350px;
		height: 350px;
		right: -389px;
		top: -275px;
		background-image: url(../images/SassyBot-Mascot-13.png);
		background-repeat: no-repeat;
	}
	#eye{
		width: 32px;
		height: 32px;
		background-image: url(../images/SassyBot-Mascot-14.png);
		position: absolute;
		top: -238px;
		right: -144px;
		opacity: 1;
	}
.footerbox{width:225px;float:left}
.footerbox li{ color: white; }
#headerwrapper a,.spotlightimage:hover img:last-child,#pabout a,#links a{display:block}
#header a:hover,#header .selected,#footer a{color:#fff} li{color:#000}
#content{width:900px;margin:0 auto;}
#spotlightholder,#portfolio,#pleft h2,#project{width:100%}
.spotlightimage:hover img:first-child,.spotlightimage img:last-child{display:none}
.product a:hover .producttext,.blogholder h2 a,.blogholder h2,#pleft h2,#footer a:hover{color:#e27726}
.productimage,.post,.post img{width:inherit}
.post ul li,#info ul li{margin-left:18px}
#pabout > div,#footer ul{margin-top:10px}


/*animations*/
@-webkit-keyframes blink {
	
	0% {opacity: 1;}
	1% {opacity: 0;}
	2% {opacity: 1;}
	100% {opacity: 1;}
}

#eye{
	-webkit-animation-name: blink;
	-webkit-animation-duration: 6s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 12s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
}


/*tutorials*/

.tutheight{ height: 52px; }
.tutheight > div { position: absolute; bottom: 8px; }
#tutmenu{
	margin-bottom: 20px;
}
	.tutbutton{ 
		width: 20%;
		margin-left: 10%;
		float: left; 
		text-align: center;
		cursor: pointer;
		border: 1px solid #666;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		height: 30px;
		line-height: 30px;
		padding-top: 2px;
		font-weight: bold;
		background-color: #D8D8D8;
	}


/*email subscription*/
#subscribeholder{
	padding: 20px 0px;
	border-top: 2px solid #ccc;	
}
	#subscribe{
		float: right;	
	}
	#subscribe p{
		float: left;
	}
		#subscribe > div{
			margin-bottom: 5px;
		}
		#subscribe input{
			border: 1px solid #333;
			padding: 6px 12px;
		}
		#subscribe input[type="submit"]{
			cursor: pointer;
			margin-left: 10px;
		}
			#subscribe input[type="submit"]:hover{
				box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
			}
			#subscribe input[type="submit"]{
				float: right;
			}
/*end email subscription*/


/*ribbon*/


.product {
    position: relative;
    display: inline-block;
    overflow: hidden;
} 

.product p{
	display: inline;
	position: absolute;
	right: -5px;
	top: 5px;
	padding: 5px;
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: 900;
}
 
.product p span {
    position: absolute;
    display: inline-block;
    right: -25px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
    text-align: center;
    text-transform: uppercase;
    top: 6px;
    background: #d93131;
    width: 100px;
    padding: 3px 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
} 
 
.product p:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -17px;
    right: 69px;
    z-index: -1;
    border: 17px solid;
    border-color: transparent transparent #662121 transparent;
}
 
.product p:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 74px;
    z-index: -1;
    right: -10px;
    border: 17px solid;
    border-color: #662121 transparent transparent transparent;
}