/* Developed by Dubbele:punt Design - www.dubbelepunt.com */

html {
	width: 												100%;
	height: 											100%;
}

body {
	background-image:								url('../images/2.4_background.jpg');
	background-size:								cover;
	background-repeat:								no-repeat;
	
	color:											#000000;
	
    font-family:									verdana, arial, sans-serif;
    font-weight:									normal;
    font-style:										normal;
    font-size:										1em;
	
	margin-top:										0em;
	margin-bottom:									0em;
	margin-left:									0em;
	margin-right:									0em;

	height:											100%;
	width:											100%;

	line-height:									1.5em;
	text-align:										left;		
}

fieldset {
	margin-top:										0em;
	margin-bottom:									0em;
	margin-left:									0em;
	margin-right:									0em;

	padding-top:									0em;
	padding-bottom:									0em;
	padding-left:									0em;
	padding-right:									0em;
	
	border-style:									none;
	border-color:									#FFFFFF;
	border-width:									0em;
}

.clear_both {
	clear:											both;
}

main {
	margin:											0 auto;
	width:											100%;	
	height:											100%;
	
	position:										absolute;
	top:											0em;
	left:											0em;
	
	z-index:										2;
}

main .hidden {
	display:										none;
}

main div {
	position:										absolute;
}

main div div {
	position:										relative;
}

/* styles for if variants are played as chain */
main .variant_index {
	font-size:										2.3em;
	font-weight:									bold;
	color:											#FFFFFF;
}

main .next_variant {
	font-size:										2.3em;
	font-weight:									bold;
	color:											#FFFFFF;

	display:										none;
}
/* /if variants are played as chain */

main .draggable {
	-ms-touch-action:								none; /* fix for IE 10 */
}

main .droppable.doelzoeken {
	opacity:										0;
}

main .droppable .final {
	display: 										none;
}

main .droppable.drophover {
	opacity:										0.8;
    filter:											alpha(opacity=80); /* For IE8 and earlier */
}

main .next_button {
	cursor:											pointer;
	display:										none;
}

main .darken {
	background-image:								url('../images/darken.png');
	
	width:											100%;	
	height:											100%;
	
	display:										none;

	z-index:										999;
}

main .loading {
	background-color:								#000000;
	color:											#FFFFFF;
	text-align:										center;
	font-size:										2em;
	
	padding-top:									30%;
	
	width:											100%;	
	height:											100%;
}

main .notice_screen {
	background-color:								#000000;
	color:											#FFFFFF;
	text-align:										center;
	font-size:										2em;
	
	padding-top:									30%;
	
	width:											100%;	
	height:											100%;

	display: 										none;
}

main .description {
	font-size:										1.2em;
	font-weight:									bold;
	color:											#CF0A0F;
}

main .interaction_title {
	background-color:								#AA0A22;
	font-size:										1em;
	font-weight:									bold;
	color:											#FFFFFF;
	
	margin-top:										0em;
	margin-bottom:									0em;
	margin-left:									0em;
	margin-right:									0em;

	padding-top:									0.5em;
	padding-bottom:									0.5em;
	padding-left:									0.5em;
	padding-right:									0.5em;
	
	border-style:									solid;
	border-color:									#FFFFFF;
	border-width:									0.3em;
	
	border-top-width:								0px;
	
	border-bottom-left-radius:						0.5em;
	border-bottom-right-radius:						0.5em;
	
	text-align:										center;
	
	height:											6.5em;
	width:											35em;
}

main .interaction_title h2 {
	font-size:										2em;
	font-weight:									bold;
	color:											#FFFFFF;
	
	margin-top:										0.5em;
	margin-bottom:									0.5em;
	margin-left:									0em;
	margin-right:									0em;
}

main .serieren {
	background-color:								#AA0A22;
	font-size:										3em;
	font-weight:									bold;
	color:											#FFFFFF;
	
	margin-top:										0em;
	margin-bottom:									0em;
	margin-left:									0em;
	margin-right:									0em;

	padding-top:									0.7em;
	padding-bottom:									0.5em;
	padding-left:									0.6em;
	padding-right:									0.6em;
	
	border-style:									solid;
	border-color:									#FFFFFF;
	border-width:									0.1em;
	border-radius:									0.1em;
	
	width:											1em;
	height:											1em;
	
	text-align:										center;
}


main .popup {
	display:										none;
	
	min-height:										7em;

	z-index:										9999;
}

main .popup .close {
	background-color:								#A0A0A0;
	color:											#FFFFFF;
	
	text-align:										center;
	
	padding-top:									0.6em;
	padding-bottom:									0.6em;
	padding-left:									0.6em;
	padding-right:									0.6em;
	
	margin-top:										1em;
	margin-bottom:									0em;
	margin-left:									0em;
	margin-right:									0em;
	
	border-radius:									0.5em;
	
	width:											4.4em;
	
	float:											left;
	
	position:										absolute;
	
	bottom:											1em;
}

main .popup .close.left {
	left:											1em;
}

main .popup .close.right {
	right:											1em;
}

main .popup .image_bottom_right {
	position:										absolute;
	
	right:											0em;
	bottom:											0em;
}

main .popup .image_bottom_right img {
	position:										absolute;
	
	right:											0em;
	bottom:											0em;
	
	border-bottom-right-radius:						0.5em;
}

main #instructions,
main #next_variant {
	background-color:								#000000;
	font-size:										1.3em;
	font-weight:									bold;
	line-height:									1.4em;
	color:											#FFFFFF;
	
	margin-top:										0em;
	margin-bottom:									0em;
	margin-left:									0em;
	margin-right:									0em;

	padding-top:									1.2em;
	padding-bottom:									1.2em;
	padding-left:									1.2em;
	padding-right:									1.2em;
	
	border-style:									none;
	border-color:									#FFFFFF;
	border-width:									0em;
	border-radius:									0.5em;
	
	width:											20em;
	height:											17em;
	
	display:										none;
}

main #instructions .content {
	background-color:								#000000;
	font-weight:									bold;
	color:											#FFFFFF;
	
	width:											95%;
	height:											4em;
	
	text-align:										left;
}

main #next_variant .content {
	background-color:								transparent;
	font-weight:									bold;
	color:											#FFFFFF;
	
	text-align:										center;
}

main #instructions.variants {
	width:											20em;
	height:											10em;
	
	text-align:										center;
}

main #instructions.variants .variant {
	font-size:										0.7em;
	text-align:										center;
	
	margin-top:										0em;
	margin-bottom:									0.7em;
	margin-left:									0em;
	margin-right:									0em;
	
	float:											left;
}

main #instructions.variants .p47 {					width: 47%;}
main #instructions.variants .p32 {					width: 32%;}
main #instructions.variants .p24 {					width: 24%;}

main #instructions.variants .content {
	font-weight:									bold;
	
	width:											95%;
	height:											1.5em;
}

main #help {
	background-color:								#000000;
	font-size:										1em;
	font-weight:									bold;
	color:											#FFFFFF;
	
	margin-top:										0em;
	margin-bottom:									0em;
	margin-left:									0em;
	margin-right:									0em;

	padding-top:									1.2em;
	padding-bottom:									1.2em;
	padding-left:									1.2em;
	padding-right:									1.2em;
	
	border-style:									none;
	border-color:									#FFFFFF;
	border-width:									0em;
	border-radius:									0.5em;
	
	width:											35.2em;
	height:											19.5em;
}

main #help h2 {
	color:											#FFFFFF;
	
	margin-top:										0em;
	margin-bottom:									0.5em;
	margin-left:									0em;
	margin-right:									0em;
}

main .popup .content {
	background-color:								#000000;
	font-size:										1em;
	font-weight:									bold;
	color:											#FFFFFF;
	
	padding-top:									0.6em;
	padding-bottom:									0.6em;
	padding-left:									0.6em;
	padding-right:									0.6em;
	
	margin-top:										0em;
	margin-bottom:									0.5em;
	margin-left:									0em;
	margin-right:									0em;
	
	clear:											both;
}

main #help .content {
	font-size:										0.9em;
	font-weight:									normal;
	
	line-height:									1.3em;
	
	width:											78%;
	height:											55%;
	
	overflow:										hidden;
}

main #help .content ul {
	padding-top:									0em;
	padding-bottom:									0em;
	padding-left:									1.2em;
	padding-right:									0em;
	
	margin-top:										0em;
	margin-bottom:									0em;
	margin-left:									0em;
	margin-right:									0em;
}

main #help .content ul li {
	margin-top:										0em;
	margin-bottom:									0.3em;
	margin-left:									0em;
	margin-right:									0em;
}

main #done {
	background-color:								#000000;
	font-size:										1.3em;
	font-weight:									bold;
	line-height:									1.4em;
	color:											#FFFFFF;
	
	margin-top:										0em;
	margin-bottom:									0em;
	margin-left:									0em;
	margin-right:									0em;

	padding-top:									1.2em;
	padding-bottom:									1.2em;
	padding-left:									1.2em;
	padding-right:									1.2em;
	
	border-style:									none;
	border-color:									#FFFFFF;
	border-width:									0em;
	border-radius:									0.5em;
	
	width:											20em;
	height:											9em;
	
	display:										none;
}

main #done h2 {
	margin-top:										0em;
	margin-bottom:									0.5em;
	margin-left:									0em;
	margin-right:									0em;
	
	line-height:									1.5em;
}

main #done .video {
	float:											right;
}


/* entire container, keeps perspective */
main .flip-container {
	perspective:									1000;
}

/* flip the pane when hovered */
main .flip-container.flip .flipper {
	transform:										rotateY(180deg);
}

main .flip-container, main .flip-container .flipper_front, main .flipper_back {
	width:											150px;
	height:											150px;
}

/* flip speed goes here */
main .flip-container .flipper {
	transition:										0.6s;
	transform-style:								preserve-3d;

	position:										relative;
}

/* hide back of pane during swap */
main .flip-container .flipper_front, main .flip-container .flipper_back {
	backface-visibility:							hidden;

	position:										absolute;
	top:											0;
	left:											0;
}

/* front pane, placed above back */
main .flip-container .flipper_front {
	z-index:										2;
	/* for firefox 31 */
	transform:										rotateY(0deg);
}

/* back, initially hidden pane */
main .flip-container .flipper_back {
	transform:										rotateY(180deg);
}



/*** ALTERNATIVE FLIPPER CLASSES FOR INCOMPATIBLE BROWSERS **/
main .flip-container_compatible {}

/* front pane, visible */
main .flip-container_compatible .flipper_front {
	z-index:										2;
}

/* back, initially hidden pane */
main .flip-container_compatible .flipper_back {
	display: 										none;
}

/* front pane, flipped */
main .flip-container_compatible.flip .flipper_front {
	display: 										none;
}

/* front pane, flipped */
main .flip-container_compatible.flip .flipper_back {
	display: 										block;
}

/*** /ALTERNATIVE FLIPPER CLASSES FOR INCOMPATIBLE BROWSERS **/


.front {
	position:										absolute;
	right:											0em;
	bottom:											0em;
	
	z-index:										99;
}

/* Developed by Dubbele:punt Design - www.dubbelepunt.com */