/* animation */

@-webkit-keyframes infinite
{
	5%, 95%, 100%, 0%
	{
		height: 50px;
		width: 50px;
		margin: -25px;
		border-radius: 25px;
		opacity: .3;
	}
	25%
	{
		border-radius: 100px;
		opacity: .6;
		height: 80px;
		width: 80px;
		margin: -40px;
	}
	35%, 65%
	{
		opacity: 1;
		border-radius: 0;
		height: 50px;
		width: 50px;
		margin: -25px;
	}
}

@-webkit-keyframes skew
{
	0%
	{
		-webkit-transform: rotate(180deg);
		height: 0;
		width: 0;
		margin: 0;
		background: #fff;
	}
	50%
	{
		-webkit-transform: rotate(80deg);
		box-shadow: 0 0 25px #000;
		background: #fff;
	}
}

@-webkit-keyframes black
{
	0%
	{
		background: #000;
	}
	85%
	{
		background: #fff;
	}
}

@-webkit-keyframes dots
{
	0%
	{
		margin: 0px;
		height: 0px;
		width: 0px;
		border-radius: 50px;
		opacity: 0;
	}
	50%
	{
		margin: -5px;
		height: 10px;
		width: 10px;		
	}
}

@-webkit-keyframes blocks
{
	0%
	{
		top: -50px;
	}
}

@-webkit-keyframes blinds
{
	0%
	{
		width: 0;
		margin-left: 0;
		background: #aaa;
	}
	30%
	{
		background: #aaa;
	}
}

@-webkit-keyframes drops
{
	0%
	{
		opacity: 0;
		height: 300px;
		width: 300px;
		margin: -100px;
		border-radius: 500px;
	}
	75%
	{
		opacity: 0;
	}
}

@-webkit-keyframes opacity
{
	0%
	{
		opacity: 0;
		height: 500px;
		width: 500px;
		margin: -200px;
		border-radius: 500px;
	}
	75%
	{
		opacity: .15;
	}
}

/* logo frame */

#ictu
{
	width: 850px;
	height: 150px;
	margin: 10px auto 0;
	padding: 25px;
	box-shadow: 0 0 25px #999;
	border-radius: 15px;
	overflow: hidden;
	position: relative;
	background: #fff;
}

#ictu div
{
	position: absolute;
	height: 50px; /* #ictu width/3 */
	width: 50px; /* #ictu width/17 */
	overflow: hidden;
	margin: -25px;
	text-indent: -99em;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
}	#ictu.dots div
	{
		-webkit-animation-name: dots;
	}
	#ictu.blocks div
	{
		-webkit-animation-name: blocks;
	}
	#ictu.blinds div
	{
		-webkit-animation-name: blinds;
	}
	#ictu.drops div
	{
		-webkit-animation-name: drops;
	}
	#ictu.opacity div
	{
		-webkit-animation-name: opacity;
	}
	#ictu.black div
	{
		-webkit-animation-name: black;
	}
	#ictu.skew div
	{
		-webkit-animation-name: skew;
	}
	#ictu.infinite div
	{
		-webkit-animation-name: infinite;
		-webkit-animation-iteration-count: infinite;
	}

#ictu.dragable div, #ictu.puzzel div
{
	opacity: 1;
}	#ictu.dragable div:hover, #ictu.puzzel div:hover
	{
		width: 48px;
		height: 48px;
		border: 1px solid #fff;
		opacity: .8;
	}
	#ictu.puzzel div.drag
	{
		cursor: move;
		opacity: .5;
	}

/* dark blue */

#x1y1, #x2y1, #x1y2, #x2y2, #x1y3, #x2y3, /* blok 1 (links van i) */
#x16y1, #x17y1, #x16y2, #x17y2, #x16y3, #x17y3 /* blok 6 (rechts van u) */ 
{
	background: #39316E;
}

/* light blue */

#x4y1, #x4y2, #x4y3, /* blok 2 (tussen i en c)*/
#x11y2, #x11y3, #x12y1, #x12y2, #x12y3, /* blok 4 (tussen t en u) */
#x14y1, #x14y2 /* blok 5 (in u) */ 
{
	background: #4B9FD5;
}

/* purple blue */

#x6y2, #x7y2, #x8y1, #x8y2, #x8y3, #x9y2, #x9y3 /* blok 3 (tussen c en t) */ 
{
	background: #982F7C;
}

/* animation */
#x1y1 { -webkit-animation-duration: 2.3s; }
#x2y1 { -webkit-animation-duration: 3.1s; }
#x3y1 { -webkit-animation-duration: 1.1s; }
#x4y1 { -webkit-animation-duration: 3s; }
#x5y1 { -webkit-animation-duration: 3.3s; }
#x6y1 { -webkit-animation-duration: 2.8s; }
#x7y1 { -webkit-animation-duration: 3.4s; }
#x8y1 { -webkit-animation-duration: 2.4s; }
#x9y1 { -webkit-animation-duration: 1.9s; }
#x10y1 { -webkit-animation-duration: 2.2s; }
#x11y1 { -webkit-animation-duration: 1.2s; }
#x12y1 { -webkit-animation-duration: 1.3s; }
#x13y1 { -webkit-animation-duration: 1.7s; }
#x14y1 { -webkit-animation-duration: 1.4s; }
#x15y1 { -webkit-animation-duration: 2.7s; }
#x16y1 { -webkit-animation-duration: 1.4s; }
#x17y1 { -webkit-animation-duration: 2.3s; }
#x1y2 { -webkit-animation-duration: 1.2s; }
#x2y2 { -webkit-animation-duration: 2.4s; }
#x3y2 { -webkit-animation-duration: 3.3s; }
#x4y2 { -webkit-animation-duration: 3.2s; }
#x5y2 { -webkit-animation-duration: 2.6s; }
#x6y2 { -webkit-animation-duration: 2.8s; }
#x7y2 { -webkit-animation-duration: 2.3s; }
#x8y2 { -webkit-animation-duration: 1.6s; }
#x9y2 { -webkit-animation-duration: 3.1s; }
#x10y2 { -webkit-animation-duration: 2.9s; }
#x11y2 { -webkit-animation-duration: 2.2s; }
#x12y2 { -webkit-animation-duration: 2.1s; }
#x13y2 { -webkit-animation-duration: 3.2s; }
#x14y2 { -webkit-animation-duration: 1.1s; }
#x15y2 { -webkit-animation-duration: 3.3s; }
#x16y2 { -webkit-animation-duration: 2.8s; }
#x17y2 { -webkit-animation-duration: 1.1s; }
#x1y3 { -webkit-animation-duration: 2.8s; }
#x2y3 { -webkit-animation-duration: 2.5s; }
#x3y3 { -webkit-animation-duration: 2.9s; }
#x4y3 { -webkit-animation-duration: 2.6s; }
#x5y3 { -webkit-animation-duration: 1.4s; }
#x6y3 { -webkit-animation-duration: 1.2s; }
#x7y3 { -webkit-animation-duration: 1.2s; }
#x8y3 { -webkit-animation-duration: 1.5s; }
#x9y3 { -webkit-animation-duration: 1.5s; }
#x10y3 { -webkit-animation-duration: 1.9s; }
#x11y3 { -webkit-animation-duration: 1.8s; }
#x12y3 { -webkit-animation-duration: 3.1s; }
#x13y3 { -webkit-animation-duration: 2.3s; }
#x14y3 { -webkit-animation-duration: 3s; }
#x15y3 { -webkit-animation-duration: 3.3s; }
#x16y3 { -webkit-animation-duration: 1.1s; }
#x17y3 { -webkit-animation-duration: 2.7s; }

/* animation */
.blinds div { -webkit-animation-duration: 2s !important; }

/* animation */
.infinite #x1y1 { -webkit-animation-duration: 4.2s; }
.infinite #x2y1 { -webkit-animation-duration: 4.8s; }
.infinite #x3y1 { -webkit-animation-duration: 2.4s; }
.infinite #x4y1 { -webkit-animation-duration: 3s; }
.infinite #x5y1 { -webkit-animation-duration: 4.2s; }
.infinite #x6y1 { -webkit-animation-duration: 4.8s; }
.infinite #x7y1 { -webkit-animation-duration: 2.4s; }
.infinite #x8y1 { -webkit-animation-duration: 3s; }
.infinite #x9y1 { -webkit-animation-duration: 4.2s; }
.infinite #x10y1 { -webkit-animation-duration: 6s; }
.infinite #x11y1 { -webkit-animation-duration: 2.4s; }
.infinite #x12y1 { -webkit-animation-duration: 3s; }
.infinite #x13y1 { -webkit-animation-duration: 4.2s; }
.infinite #x14y1 { -webkit-animation-duration: 4.8s; }
.infinite #x15y1 { -webkit-animation-duration: 5.4s; }
.infinite #x16y1 { -webkit-animation-duration: 3s; }
.infinite #x17y1 { -webkit-animation-duration: 4.2s; }
.infinite #x1y2 { -webkit-animation-duration: 4.8s; }
.infinite #x2y2 { -webkit-animation-duration: 2.4s; }
.infinite #x3y2 { -webkit-animation-duration: 3s; }
.infinite #x4y2 { -webkit-animation-duration: 4.2s; }
.infinite #x5y2 { -webkit-animation-duration: 6s; }
.infinite #x6y2 { -webkit-animation-duration: 2.4s; }
.infinite #x7y2 { -webkit-animation-duration: 3s; }
.infinite #x8y2 { -webkit-animation-duration: 4.2s; }
.infinite #x9y2 { -webkit-animation-duration: 4.8s; }
.infinite #x10y2 { -webkit-animation-duration: 2.4s; }
.infinite #x11y2 { -webkit-animation-duration: 3s; }
.infinite #x12y2 { -webkit-animation-duration: 3.6s; }
.infinite #x13y2 { -webkit-animation-duration: 6s; }
.infinite #x14y2 { -webkit-animation-duration: 5.4s; }
.infinite #x15y2 { -webkit-animation-duration: 3s; }
.infinite #x16y2 { -webkit-animation-duration: 4.2s; }
.infinite #x17y2 { -webkit-animation-duration: 4.8s; }
.infinite #x1y3 { -webkit-animation-duration: 2.4s; }
.infinite #x2y3 { -webkit-animation-duration: 3s; }
.infinite #x3y3 { -webkit-animation-duration: 4.2s; }
.infinite #x4y3 { -webkit-animation-duration: 6s; }
.infinite #x5y3 { -webkit-animation-duration: 2.4s; }
.infinite #x6y3 { -webkit-animation-duration: 3.6s; }
.infinite #x7y3 { -webkit-animation-duration: 4.2s; }
.infinite #x8y3 { -webkit-animation-duration: 4.8s; }
.infinite #x9y3 { -webkit-animation-duration: 2.4s; }
.infinite #x10y3 { -webkit-animation-duration: 3s; }
.infinite #x11y3 { -webkit-animation-duration: 4.2s; }
.infinite #x12y3 { -webkit-animation-duration: 4.8s; }
.infinite #x13y3 { -webkit-animation-duration: 2.4s; }
.infinite #x14y3 { -webkit-animation-duration: 3s; }
.infinite #x15y3 { -webkit-animation-duration: 4.2s; }
.infinite #x16y3 { -webkit-animation-duration: 4.8s; }
.infinite #x17y3 { -webkit-animation-duration: 3.6s; }