/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								algemeen voor hele site													    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@font-face			{font-family: "Roboto"; font-style: normal; font-weight: 100; src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/Jzo62I39jc0gQRrbndN6nfesZW2xOQ-xsNqO47m55DA.ttf) format('truetype');}
@font-face			{font-family: "Roboto"; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');}

*				{margin: 0; padding: 0; border: 0px;
				 -webkit-user-select: none;	/* Chrome all / Safari all */
				 -moz-user-select: none;	/* Firefox all */
				 -ms-user-select: none;}	/* IE 10+ */
html				{height: 100%;}
body				{overflow-X: hidden; overflow-Y: scroll; text-align: center; font-family: "Roboto", "Arial", non-serif; cursor: default; font-size: 1vw; color: #666666; width: 100%; height: 100%;}
b				{color: #000000;}

a				{text-decoration: none; outline: none; border: none;}
a:link				{color: #666666; text-decoration: underline;}	/* unvisited link  */
a:visited			{color: #666666;}	/* visited link    */
a:hover			{color: #000000;}	/* mouse over link */
a:active			{color: #666666;}	/* selected link   */

h1				{font-size: 3vw; font-weight: 100; display: inline;}
h2				{font-size: 1.5vw; font-weight: normal; display: inline;}
h3				{font-size: 2vw; font-weight: 100; color: #0000FF;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								alle pagina's														   	    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#pages							{position: relative; top: 100%; width: 100%;}
.title							{position: relative; font-size: 3vw; font-weight: 100; color: #666666; text-shadow: 0px 0px 2px #000000; padding-top: 3%; padding-bottom: 3%; text-align: center;}
.subTitle						{position: relative; font-size: 1.5vw; color: #FF9900; background-color: #FFFFFF; text-align: center; box-shadow: 0px 5px 5px #AAAAAA;}
#bubble						{position: absolute; left: 0px; top: 400px; width: 300px; height: 100px; display: none; z-index: 100000;}
#bubble .text						{width: 100%; line-height: 70px; color: #FFFFFF; font-weight: bold;}
#bubble img						{position: absolute; left: 0px; top: -25px; width: 300px; height: 100px; xz-index: 99999;}

#container						{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 999999;}
#flare							{position: absolute; right: -775px; top: -775px; width: 1750px; z-index: 9999999; animation: rotating 240s linear infinite, pulsating 5s linear infinite;}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes pulsating {
  0% {width: 1750px;}
  50% {width: 1550px; margin: 100px 100px 0 0;}
  100% {width: 1750px;}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								frontPage															    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.actionOverlay					{display: none; position: absolute; right: -2.5vw; top: 4.75vw; background-color: #FFEE00; color: #000000; font-weight: normal; padding: 0.5vw 3vw 0.5vw 13vw; z-index: 999999;
							 -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); box-shadow: 0 0.25vw 1vw rgba(0, 0, 0, 0.5);}
	.actionOverlay a				{color: #000000;}

#frontPage						{position: fixed; width: 100%; height: 100%;}
	#frontPage .BG				{position: fixed; left: 0px; top: 0px;}
		#frontPage .BG img			{position: absolute; z-index: 0; display: none;}
	#top						{position: fixed; left: 0px; top: 0px; width: 100%; height: 60px; overflow: hidden; z-index: 100000; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); display: none;}
		#top .BG				{position: fixed; left: 0px; top: 0px; width: 100%; height: 60px; overflow: hidden;}
			#top .BG img			{position: absolute; xz-index: -1; xdisplay: none;}
		#solidBG				{position: fixed; left: 0px; top: 0px; width: 100%; height: 60px; background-color: #333333; xz-index: 1000; display: none;}
		#logoSmall				{position: fixed; left: 5%; top: 0px; width: 285px; height: 60px; background: url("/images/logoW.png") no-repeat center; xz-index: 1000;}
		#menu					{position: fixed; right: 5%; top: 0px; height: 60px; xz-index: 1000;}
			.menuItem			{float: left; width: 5.5vw; line-height: 60px; text-align: center; color: #FFFFFF; font-weight: 300; font-size: 1vw; font-variant: small-caps; cursor: pointer;
							 text-shadow: 1px 1px 2px #000000;}
				.menuItem:hover	{color: #DDFF00;}
				.menuItem.active	{color: #FFDD00;}
	#seeMore					{position: fixed; left: 0px; margin: auto; right: 0px; cursor: pointer;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								animatie												  			    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
	#animation					{position: fixed; left: 0px; top: 0px; margin: auto; right: 0px; bottom: 0px; width: 50%; height: 50%; overflow: hidden; z-index: 0;}
		#animation #lineTop			{position: absolute; left: 0px; top: 0px; width: 0px; height: 15px; background-color: #FFFFFF; z-index: 1001;}
		#animation #lineRight		{position: absolute; right: 0px; top: 0px; width: 15px; height: 0px; background-color: #FFFFFF; z-index: 1001;}
		#animation #lineBottom		{position: absolute; right: 0px; bottom: 0px; width: 0px; height: 15px; background-color: #FFFFFF; z-index: 1001;}
		#animation #lineLeft			{position: absolute; left: 0px; bottom: 0px; width: 15px; height: 0px; background-color: #FFFFFF; z-index: 1001;}
		#animation .BG			{position: absolute; width: 100%; height: 100%;}
			#animation .BG img		{position: absolute; z-index: 0; display: none;}
		#logoBig				{position: absolute; left: 0px; top: 0px; margin: auto; right: 0px; bottom: 0px; width: 90%; display: none;}
		#animation #text			{position: absolute; left: 0px; top: 10%; width: 100%; height: 80%;}
			#animation .textBig		{position: relative; font-weight: 100; font-size: 4vw; color: #FFFFFF; z-index: 1000; display: none;
							 text-shadow: 0px 0px 2px #000000, 1px 1px 3px #666666, 1px -1px 3px #666666, -1px 1px 3px #666666, -1px -1px 3px #666666;}
			#animation .textBig i	{font-style: normal; color: #CCCCCC; text-shadow: 0px 0px 3px #DDDDDD, -4px 0px 2px #BBBBBB, 4px 0px 2px #BBBBBB;}
			#animation .textSmall	{position: absolute; left: 0px; bottom: 0px; width: 100%; font-weight: 300; font-size: 2vw; color: #FFAA00; display: none;
							 text-shadow: 0px 0px 2px #000000, 1px 1px 2px #666666, 1px -1px 2px #666666, -1px 1px 2px #666666, -1px -1px 2px #666666;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								onze drie pijlers															    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page1							{position: relative; background-color: #EEEEEE; box-shadow: 0px 0px 30px #000000; padding-bottom: 5%; overflow: hidden; z-index: 0;}
.page1 .BG						{position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;}
	.pilar						{position: relative; top: 0px; width: 30%; vertical-align: top; display: inline-block; margin-left: 1%; margin-right: 1%; xz-index: 1000;}
		.pilar .subTitle a			{text-decoration: none; color: #FF9900;}
		.pilar .subTitle img			{position: absolute; right: 1%; bottom: -50%; width: 25%;}
		.pilar .readOn			{color: #EE8800; font-weight: bold; font-variant: small-caps; xcursor: pointer; display: inline; text-decoration: none;}
		.xpilar .readOn .more		{display: inline-block; width: 1vw; overflow: hidden; vertical-align: text-top; text-align: center;}
		.pilar .readOn:hover			{color: #88AA00;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								portfolio															    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#portfolioBGtop							{position: fixed; left: 0px; top: 0px; width: 100%; height: 50%; background: url("/images/logoBG.png") repeat center bottom; background-color: #A09070; display: none;}
	#portfolioBGtop img						{position: absolute; right: -25%; top: 0px; width: 100%; height: 100%;}
#portfolioBGbottom							{position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50%; background: url("/images/logoBG.png") repeat center top; background-color: #A09070; display: none;}
	#portfolioBGbottom img					{position: absolute; left: -25%; bottom: -25%; width: 100%; height: 125%;}

#portfolio								{position: relative; width: 100%; z-index: 0; color: #000000;}
	#watchFrame							{position: relative; width: 100%; height: 400px; overflow: hidden; padding-bottom: 5%;}
	#portfolio .nav.left						{position: absolute; left: 5%; top: 0px; width: 44px; height: 12vw; cursor: pointer; z-index: 10000; background: url("/images/leftArrowB.png") no-repeat center;}
	#portfolio .nav.right					{position: absolute; right: 5%; top: 0px; width: 44px; height: 12vw; cursor: pointer; z-index: 10000; background: url("/images/rightArrowB.png") no-repeat center;}
		#itemPlaceholder					{position: relative; width: auto; height: 350px; margin-top: 2%;}
		#portfolio .item					{position: absolute; width: 480px; height: 345px; text-align: left; cursor: pointer; display: inline-block; margin-right: 2%;}
			#portfolio .item .imagePlaceholder		{position: absolute; width: 480px; height: 280px; overflow: hidden; background: url("/images/magnifyingGlass.png") no-repeat center; cursor: pointer;
									 background-color: #EEEEEE;}
			#portfolio .item .imageFrame		{position: absolute; width: 10000px;}
			#portfolio .item img				{position: relative; width: 480px; height: 280px;}
			#portfolio .item .overlay			{position: absolute; left: -60px; top: 0px; width: 540px; height: 320px; background: url("/images/pause.png") no-repeat 500px 240px;}
			#portfolio .bottomPart			{position: absolute; left: 0px; bottom: 0px; width: 99%; xbackground: url("/images/topBG.png") repeat; background-color: #DDDDDD; padding-left: 1%; padding-bottom: 1%;
									 font-size: 0.7vw; box-shadow: 0px 5px 5px #666666;}
				#portfolio .label			{display: inline-block; width: 100px; text-align: right; margin-right: 1%; font-weight: bold;}
				#portfolio .content			{display: inline-block;}
#portfolioBig								{position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: url("/images/transpB75.png") repeat; overflow: hidden; z-index: 500010; display: none;}
#portfolioBig .imagePlaceholder					{position: absolute; left: 0px; top: 0px; margin: auto; right: 0px; bottom: 0px; width: 100%; height: 85%; overflow: hidden; border-top: 3px double #FFFFFF;
									 border-bottom: 3px double #FFFFFF;
									 box-shadow: 0px 0px 50px #000000; background-color: #000000;}
	#portfolioBig .imagePlaceholder img			{position: absolute; left: 0px; margin: auto; right: 0px; top: 0px; height: 100%;}
#portfolioBig .nav							{position: absolute; top: 0px; margin: auto; bottom: 0px; width: 44px; height: 102px; cursor: pointer; z-index: 1000;}
	#portfolioBig .nav.left					{left: 10px; background: url("/images/leftArrow.png") no-repeat center; display: none;}
	#portfolioBig .nav.right					{right: 10px; background: url("/images/rightArrow.png") no-repeat center;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								wat doen we?															    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page2							{position: relative; background-color: #EEEEEE; box-shadow: 0px 0px 30px #000000; text-align: left; overflow: hidden;}
	.xpage2 #core					{xposition: relative; xleft: 0px; xmargin: auto; xright: 0px; xwidth: 100%; xtext-align: left;}
		.page2 .subTitle			{position: relative; left: 0px; margin: auto; right: 0px; top: -18px; width: 98%;}
			.page2 .subTitle img		{position: absolute; right: 25%; top: -50%; margin: auto; bottom: 0px; width: 15%;}
		.page2 .sub				{position: relative; xoverflow: hidden;}
			.page2 .sub .BG		{position: absolute; left: -50%; top: 0px; width: 200%; height: 100%;}
			.page2 .sub.darkBG		{background-color: #CCCCCC; padding-bottom: 7%; box-shadow: 0px 0px 40px #999999;}
		.page2 .text				{position: relative; padding: 1%; z-index: 10;}
			.page2 .text .BG		{position: absolute; left: -25%; top: 0px; width: 150%; height: 150%; z-index: -1;}
			.page2 .text .column		{position: relative; float: left; width: 20%;}
		.page2 .alignLeft			{position: relative; float: left; width: 45%; margin-right: 1%; z-index: 100;}
		.page2 .alignRight			{position: relative; float: right; width: 28%; margin-left: 10%; margin-right: 0px; z-index: 100;}
		.page2 .alignBottom			{position: relative; float: left; width: 25%; margin-right: 1%; margin-top: 8%; z-index: 100;}
		.page2 .line				{position: relative; left: 0px; margin: auto; right: 0px; width: 80%; height: 1px; border-top: 1px solid #BBBBBB; box-shadow: 0px 1px 5px #CCCCCC; margin-top: 5%; margin-bottom: 5%;}
		.page2 .noLine			{margin: 10%;}

		.page2 .imageContainer		{width: 100%; text-align: center;}
			.page2 .photo			{position: relative; display: inline-block; width: 30%; border: 1px solid #AAAAAA; margin: 1%;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								contact															    */
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#contact					{display: none; position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50%; z-index: 100000; background-color: #888888; box-shadow: 0px -5px 30px #000000;}
#contact .BG					{position: absolute; left: -25%; width: 150%; height: 100%; z-index: -1;}
#contact #closeButton			{position: absolute; right: 1%; top: 3%; width: 3%; cursor: pointer;}
#contact .title				{color: #FFFFFF; padding-top: 1%; padding-bottom: 1%; text-shadow: 0px 0px 5px #DDDDDD;}
#contact .subTitle				{position: relative; left: 0px; margin: auto; right: 0px; width: 60%;}

#directContact				{position: absolute; left: 0px; top: 22%; width: 50%; height: 420px; display: inline-block;}
#directContact a				{color: #000000; text-decoration: none;}
#directContact .overlay			{position: relative; left: 0px; margin: auto; right: 5%; top: 0px; width: 50%;}
	#directContact .overlay .BG		{position: absolute; left: -5%; top: 0px; width: 100%; display: none;}
#directContact .logo				{position: relative; width: 40%;}
#directContact #officePhone			{position: relative; line-height: 33px; padding-left: 38px; background: url("/images/officePhoneIcon.png") no-repeat left center; display: inline-block; cursor: default;}
#directContact #phone			{position: relative; line-height: 33px; padding-left: 30px; background: url("/images/phoneIcon.png") no-repeat left center; display: inline-block; cursor: default;}
#directContact #mail				{position: relative; line-height: 25px; padding-left: 42px; background: url("/images/mailIcon.png") no-repeat left center; display: inline-block;}
#contact #getHelpFile		{position: relative; left: 0px; margin: auto; right: 0px; width: 25%; height: 28px; line-height: 28px; display: block; color: #000000; margin-top: 10px;
					 text-align: right; border: 1px solid #888888; padding-right: 5px; background: url("/images/transpB10.png") repeat; cursor: pointer; overflow: hidden; text-decoration: none;}
#contact #getHelpFile img	{position: absolute; left: 5px; top: -2px; margin: auto; bottom: 0px; width: 30px; z-index: -1;}

#mailForm				{position: absolute; left: 50%; top: 22%; width: 50%; height: 420px; display: inline-block; vertical-align: top; xborder: 1px solid yellow;}
#mailForm label			{color: #444444; width: 10%; margin-right: 5px; xfont-size: 0.9vw; text-align: right; vertical-align: text-top; display: inline-block; text-shadow: none;}
#mailForm input			{width: 60%; font-family: "Roboto"; font-size: 0.9vw; border: 1px solid #888888; display: inline-block; margin-bottom: 5px; background: none;
				 	 -webkit-user-select: text;	/* Chrome all / Safari all */
				 	 -moz-user-select: text;	/* Firefox all */
				 	 -ms-user-select: text;}	/* IE 10+ */
#mailForm textarea			{width: 80%; height: 115px; font-family: "Roboto"; font-size: 0.9vw; border: 1px solid #888888; background: none;
				 	 -webkit-user-select: text;	/* Chrome all / Safari all */
				 	 -moz-user-select: text;	/* Firefox all */
				 	 -ms-user-select: text;}	/* IE 10+ */
#mailForm #submitPhoneButton 	{position: relative; margin: 1%; width: 25%; height: 28px; line-height: 28px; display: block; color: #000000; margin-top: 10px;
				   	 text-align: right; border: 1px solid #888888; padding-right: 5px; background: url("/images/transpB10.png") repeat; cursor: pointer; overflow: hidden; display: inline-block;}
#mailForm #submitPhoneButton img	{position: absolute; left: -15px; top: 10px; margin: auto; bottom: 0px; width: 70px;}
#mailForm #submitMailButton		{position: relative; margin: 1%; width: 25%; height: 28px; line-height: 28px; display: block; color: #000000; margin-top: 15px;
					 text-align: right; border: 1px solid #888888; padding-right: 5px; background: url("/images/transpB10.png") repeat; cursor: pointer; overflow: hidden; display: inline-block;}
#mailForm #submitMailButton img	{position: absolute; left: 0px; top: 7px; margin: auto; bottom: 0px; width: 50px; z-index: -1;}
#thankYouMail				{color: #FF0000; text-shadow: none; display: none;}

.ED					{position: absolute; bottom: 1%; width: 100%; text-align: center; font-variant: small-caps;}