@charset "utf-8";

/*------------------------------------------

	Fonts & Icons

------------------------------------------*/
/* 
	Source Sans Pro Normal:		font-weight: 400;
	Source Sans Pro Semi Bold:	font-weight: 600;
*/
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600");

/* Old Standard TT headings */
@import url("https://fonts.googleapis.com/css?family=Old+Standard+TT");

/* Icons */
@font-face {
	font-family: icons;
	src:url('../fonts/icons.eot');
	src:url('../fonts/icons.eot?#iefix')	format('embedded-opentype'),
		url('../fonts/icons.ttf')			format('truetype'),
		url('../fonts/icons.woff')		format('woff'),
		url('../fonts/icons.svg#icons')	format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"],
[class*=" icon-"]{
	font-family: icons;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-hamburger:before {
	content: "\e000";
}
ul li:before {
	content: "\e001";
}
.icon-cross:before {
	content: "\e002";
}
.icon-arrowDown:before {
	content: "\e003";
}
.icon-arrowUp:before {
	content: "\e004";
}
.icon-ringDown:before {
	content: "\e005";
}
.icon-ringUp:before {
	content: "\e006";
}
.icon-info:before {
	content: "\e007";
}
.icon-check:before {
	content: "\e008";
}



/*------------------------------------------

	Generic

------------------------------------------*/
*{
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
}
body{
	font-family: "Source Sans Pro", Helvetica, Arial,  sans-serif;
	font-weight: 400;
	color: #004959;
	font-size: 20px;
	background: #fcfcfc;
}
p{
	line-height: 32px;
	padding-bottom: 10px;
}
h1,h2,h3,h4{
	font-family: "Old Standard TT", "Times New Roman", serif;
	line-height: 1.1em;
	font-weight: 400;
	text-transform: uppercase;
	padding-bottom: 16px;
}
	h1{
		color: #004959;
		font-size: 32px;
		padding-top: 4px;
	}
	h2{
		color: #878787;
		font-size: 24px;
		padding-top: 11px;
	}
	h3{
		color: #00b6de;
		font-size: 20px;
		padding-top: 16px;
	}
	h4{
		color: #ba014c;
		font-size: 16px;
		padding-top: 18px;
	}
a{
	font-weight: 600;
	color: #ba014c;
	text-decoration: none;
}
a:hover{
	color: #07b7df;
}
ul{
	padding-bottom: 5px;
}
	ul li:before{
		font-family: "icons";
		color: #ba014c;
		margin-left: -20px;
		display: inline-block;
		width: 20px;
	}
	ul li{
		font-family: "Source Sans Pro", Helvetica, Arial,  sans-serif;
		color: #004959;
		line-height: 24px;
		padding: 0 0 5px 20px;
	}
img{
	width: 100%;
	padding: 16px 0;
}
strong,
b,
.validationQuestion{
	font-weight: 600;
}


/*------------------------------------------

	Misc

------------------------------------------*/
.lockWidth{
	position: relative;
	width: 960px;
	margin: 0 auto;
}
.clearFix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.hidden,
.noText span{
	display: none;
}



/*------------------------------------------

	Menu

------------------------------------------*/
#menuToggle{
	display: none;
}
.menu{
	position: fixed;
	z-index: 91;
	top: 96px;
	height: 32px;
	width: 100%;
	background: #004959;
}
	.menu ul{
		padding: 0;
	}
		.menu ul li{
			position: relative;
			line-height: normal;
			padding: 0;
			display: block;
			float: left;
		}
		.menu ul li:before{
			display: none;
		}
			.menu li a{
				display: block;
				font-size: 16px;
				font-weight: 400;
				color: #fff;
				height: 17px;
				line-height: 17px;
				margin-top: 7px;
				padding: 0 16px 0 15px;
				border-left: 1px solid #336d7a;
			}
			.menu li a:hover{
				color: #07b7df;
			}
			.menu li:first-child a{
				border-left: none;
				padding-left: 20px;
			}
		.menu ul li.current:before{
			display: block;
			content:" ";
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -2px;
			text-indent: -9999px;
			width: 0;
			height: 0;
			border-top: 5px solid #006d85;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			overflow: hidden;
		}

/*------------------------------------------

	Lay Out

------------------------------------------*/
header{
	position: fixed;
	z-index: 90;
	top: 0;
	width: 100%;
}
	.topBar{
		height: 128px;
		background: #006d85;
	}
		.icon-hamburger{
			display: none;
		}
	.topBarShadow{
		height: 4px;
		background: #b5bec0;
		background: rgba(0,36,44,.25);
	}
.content{
	padding-top: 176px;
	background: #f1f1f1;
}
	article,
	aside{
		float: left;
	}
	footer{
		background: #fcfcfc;
		margin-top: 128px;
		border-top: 2px solid #fff;
	}

/*------------------------------------------

	Templates (default = 2/3 + 1/3 column)

------------------------------------------*/
article{
	width: 608px;
	padding: 32px 14px 48px 16px;
	border-right: 4px solid #e5e5e5;
}
aside{
	width: 288px;
	padding: 32px 16px 48px 14px;
}


/* home (hides menu) */
.home .menu{
	visibility: hidden;
}
.home .topBar{
	height: 96px;
}

/* small-base-font */
.small-base-font{
	font-size: 16px;
}
.small-base-font p{
	line-height: 24px;
}

/* 1/3 + 2/3 column */
.col-33-66 article{
	width: 638px;
	padding: 32px 0 48px 0;
	border-left: 4px solid #e5e5e5;
	border-right: none;
}
	.col-33-66 article h1{
		padding-left: 16px;
	}
.col-33-66 aside{
	padding: 32px 14px 48px 16px;
}

/* 1/2 + 1/2 column */
.col-50-50 article{
	width: 448px;
}
	.col-50-50 article h2{
		font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
		font-weight: 600;
		color: #004959;
		text-transform: none;
		font-size: 16px;
		padding: 25px 0 0 0;
	}
	.col-50-50 article .expander p,
	.col-50-50 article .expander ul li{
		font-size: 16px;
		line-height: 24px;
	}
.col-50-50 aside{
	position: relative;
	width: 448px;
}

/*------------------------------------------

	Widgets

------------------------------------------*/
/* Logo Cito */
.logo{
	display: block;
	position: absolute;
	top: 12px;
	left: 20px;
	width: 146px;
	height: 66px;
	background: url("../img/logo.svg");
}
	.logo img{
		display: none;
		padding: 0;
	}

/* Logo Steunpunt MBO (header) */
.logoSteunpuntMBO-inv{
	display: block;
	float: right;
	margin: 15px 20px;
	width: 200px;
	height: 60px;
	background: url("/contentImages/Logo-Steunpunt-Taal-en-Rekenen-MBO_DEF.svg");
	/* background: url("../img/logo-steunpunt-mbo-diapositief.svg"); */
}
	.logoSteunpuntMBO-inv img{
		display: none;
		padding: 0;
	}

/* Logo Steunpunt MBO (footer) */
.logoSteunpuntMBO{
	visibility: hidden;
	display: block;
	float: right;
	margin: 35px 20px;
	width: 220px;
	height: 60px;
	background: url("../img/logo-steunpunt-mbo.svg");
}
	.logoSteunpuntMBO img{
		display: none;
		padding: 0;
	}

/* Button */
.button{
	display: inline-block;
	text-align: center;
	font-size: 20px;
	font-weight: 400;
	line-height: 48px;
	height: 48px;
	color: #fff;
	background: #ed1782;
	border-radius: 8px;
	padding: 0 32px;
	margin: 8px 12px 8px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.button:hover,
.touch .button:active{
	background: #07b7df;
	color: #fff;
}
.button.disabled{
	position: relative;
	background: #f8a2cd;
	cursor: default;
}
.buttonSet a{
	display: none;
}
.buttonSet span{
	display: inline-block;
}

/* Checkboxes & Radio Buttons */
.formRow.checkRadio{
	padding: 4px 0;
}
	.formRow.checkRadio label{
		float: left;
		padding: 2px 10px;
		color: #282b33;
		width: 75%;
	}

/* Radiobutton */
.radioWrapper input[type="radio"]{
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	opacity: 0.001;
}
.radioWrapper{
	position: relative;
	display: inline-block;
	float: left;
	height: 24px;
	width: 24px;
	margin-top: 2px;
	overflow: hidden;
	background: url('../img/sprite.png') no-repeat 0 -24px;
}
.radioWrapper.r-ON{
	background-position: -24px -24px;
}
.accordion .radioWrapper{
	left: 50%;
	margin-left: -12px;
}
.accordion.readOnly .yourAnswer .radioWrapper{
	background-position: 0 -48px;
}
.accordion.readOnly .yourAnswer .radioWrapper.r-ON{
	background-position: -24px -48px;
}
.accordion.readOnly .expertAnswer .radioWrapper{
	background-position: 0 -72px;
}
.accordion.readOnly .expertAnswer .radioWrapper.r-ON{
	background-position: -24px -72px;
}
.accordion.readOnly .correct .radioWrapper{
	background-position: 0 -96px;
}
.accordion.readOnly .correct .radioWrapper.r-ON{
	background-position: -24px -96px;
}


/* Result List */
.resultList{
	padding: 0;
	width: 100%;
}
	.resultList li:before{
		display: none;
	}
	.resultList li{
		line-height: normal;
		display: block;
		float: left;
		width: 286px;
		padding: 0 16px 32px 16px;
	}
		.resultList li a{
			display: block;
			border: 1px solid #d6d6d6;
			border-radius: 8px;
			background: #fff;
			padding: 0 16px;
			height: 360px;
		}
		.resultList li a:hover{
			border: 1px solid #bebebe;
		}
			.resultList li a img{
				padding: 0;
				margin: 16px 0 8px 0;
			}
			.resultList li a img.outline{
				margin: 15px 0 7px 0;
				border: 1px solid #ddd;
			}
			.resultList li a h4{
				display: block;
				line-height: 18px;
				padding: 0;
				margin-bottom: 8px;
				max-height: 36px;
				overflow: hidden;
			}
			.resultList li a .description{
				display: block;
				color: #004959;
				font-size: 14px;
				line-height: 24px;
				font-weight: 400;
				margin-bottom: 8px;
				max-height: 64px;
				overflow: hidden;
			}
			.meta{
				padding: 0;
				line-height: normal;
			}
			.meta + .meta + .meta{
				padding-bottom: 10px;
			}
				.meta span{
					display: inline-block;
					width: 100px;
					font-size: 14px;
					color: #33c5e5;
					font-weight: 400;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.meta span + span{
					width: auto;
					color: #00242c;
					font-weight: 600;
				}

/* Filters */
.option-combo{
	padding-bottom: 39px;
}
	.option-combo h3{
		padding: 1px 0 11px 0;
	}
	.option-combo ul{
		padding: 0;
	}
		.option-combo li:before{
			display: none;
		}
		.option-combo li{
			line-height: normal;
			padding: 0;
		}
			.option-combo li a{
				position: relative;
				display: block;
				font-weight: 400;
				color: #004959;
				padding: 0 0 11px 40px;
				font-size: 20px;
			}
			.option-combo li a span{
				position: absolute;
				top: 1px;
				left: 0;
				width: 24px;
				height: 24px;
				background: url("../img/sprite.png") no-repeat 0 0;
			}
			.option-combo li a.selected span{
				background-position: -24px 0;
			}

/* Video */
video{
	max-width: 100%;
	height: auto;
}

iframe,
embed,
object {
	max-width: 100%;
}
.fluidVideo{
	padding: 16px 0;
}


/* Fold Out */
.fold-out .body{
	display: none;
}
.fold-out .fold-out-trigger span{
	font-weight: 600;
	color: #ba014c;
	text-decoration: none;
	cursor: pointer;
}
.fold-out .fold-out-trigger span + span{
	display: none;
}

.fold-out.open .fold-out-trigger span{
	display: none;
}
.fold-out.open .fold-out-trigger span + span{
	display: inline;
}


/* Expander */
.expander{
	position: relative;
	padding-top: 12px;
}
	.expander .icon{
		position: absolute;
		right: 1px;
		top: -12px;
		width: 24px;
		height: 24px;
		line-height: 24px;
		overflow: hidden;
		border-radius: 12px;
		font-size: 12px;
		text-align: center;
		color: #f1f1f1;
		background: #d6d6d6;
		cursor: pointer;
	}
	.expander .icon:hover{
		color: #fff;
		background: #07b7df;
	}
	.expander .summary{
		display: none;
	}
	
/* Wizard */
.wizard li{
	display: none;
}
.wizard li:first-child{
	display: block;
}
.validationQuestion .icon,
.wizard h2 .icon{
	position: relative; 
	z-index: 2;
	margin-left: 10px;
	font-size: 24px;
	color: #ccc;
}
.validationQuestion .icon:hover,
.wizard h2 .icon:hover{
	color: #07b7df;
}

/*------------------------------------------

	Accordion

------------------------------------------*/
.accordion{
	padding-bottom: 32px;
}
	.accordion li{
		display: block!important;
		margin-top: -1px;
	}

/* Quotes */
.quotes{
	position: absolute;
	z-index: 1;
	width: auto;
	left: 16px;
	right: 16px;
	top: 32px;
}
	.quotes div{
		float: left;
		margin: 12px 0 0 48%;
		width: 26%;
		color: #333;
	}
	.quotes div + div{
		display: none;
		margin-left: 0;
		color: #99e2f2;
	}
	.accordion.readOnly .quotes div + div{
		display: block;
	}
		.quotes div span{
			float: left;
			display: block;
			width: 33.33%;
			text-align: center;
		}

/* Nodes */
.expertArea{
	border: 1px solid #99e2f2;
	background: #ccf0f8;
	width: 74%;
}
.accordion li:first-child .expertArea{
	border-radius: 10px 8px 0 0;
}
.accordion li:only-child .expertArea{
	border-radius: 10px 8px;
}
.accordion li:last-child .expertArea{
	border-radius: 0 0 8px 10px;
}
.accordion li.open:last-child .expertArea{
	border-radius: 0;
}
.accordion.readOnly .expertArea{
	width: 100%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}
.accordion li.correct .expertArea{
	background: #99cf99;
}
	.yourArea{
		background: #f8f8f8;
		float: left;
		width: 100%;
	}
	.accordion li:first-child .yourArea{
		border-radius: 10px 8px 0 0;
	}
	.accordion li:only-child .yourArea{
		border-radius: 10px 8px;
	}
	.accordion li:last-child .yourArea{
		border-radius: 0 0 8px 10px;
	}
	.accordion li.open:last-child .yourArea{
		border-radius: 0;
	}
	.accordion.readOnly .yourArea{
		border-right: 1px solid #99e2f2;
		width: 74%;
	}
	.accordion li.correct .yourArea{
		border-color: #99cf99;
		background: #cce7cc;
	}
		.questionArea{
			border-right: 1px solid #99e2f2;
			background: #fff;
			float: left;
			width: 64.86%; /* (100 / 74 * 48) */
		}
		.accordion li:first-child .questionArea{
			border-radius: 8px 8px 0 0;
		}
		.accordion li:only-child .questionArea{
			border-radius: 8px;
		}
		.accordion li:last-child .questionArea{
			border-radius: 0 0 8px 8px;
		}
		.accordion li.open:last-child .questionArea{
			border-radius: 0;
		}
			.question{
				float: left;
				padding: 0 16px;
				width: 100%;
				-webkit-box-sizing: border-box;
				   -moz-box-sizing: border-box;
						box-sizing: border-box;
			}
				.question h3,
				.question ul li,
				.question p{
					font-size: 16px;
				}
				.question h3{
					padding-bottom: 10px;
				}
				.question ul li{
					margin-top: 0;
				}
				.question p{
					line-height: 24px;
				}
				.question i,
				.question .comment{
					font-size: 14px;
					line-height: 20px;
				}
				.question .comment{
					color: #999;
					font-style: italic;
				}
		.yourAnswer{
			float: left;
			width: 34%;
			margin-top: 42px;
		}
			.yourAnswer div{
				float: left;
				min-width: 24px;
				width: 33.33%;
			}
	.expertAnswer{
		display: none;
		float: left;
		width: 25%;
		margin-top: 26px;
	}
	.accordion li:first-child .expertAnswer,
	.accordion li.open + li .expertAnswer{
		margin-top: 42px;
	}
		.expertAnswer div{
			float: left;
			min-width: 24px;
			width: 33.33%;
		}
	.accordion.readOnly .expertAnswer{
		display: block;
	}
	
	
	
	
	.trigger{
		display: none;
		position: relative;
		z-index: 3;
		clear: both;
		float: right;
		margin: -16px 8% 0 0;
		width: 32px;
		height: 32px;
		cursor: pointer;
	}
		.trigger span.icon-ringDown{
			position: absolute;
			display: block;
			z-index: 1;
			top: 0;
			left: 0;
			width: 32px;
			height: 32px;
			font-size: 32px;
			color: #99e2f2;
		}
		.trigger span.icon-arrowDown{
			position: absolute;
			display: block;
			z-index: 2;
			top: 4px;
			left: 4px;
			width: 24px;
			height: 24px;
			line-height: 24px;
			text-align: center;
			border-radius: 12px;
			background: #fff;
			color: #006d85;
			font-size: 12px;
		}
		.trigger:hover span.icon-arrowDown{
			color: #ba014c;
		}
		.trigger span.icon-check{
			display: none;
			position: absolute;
			z-index: 2;
			top: 2px;
			left: 2px;
			width: 28px;
			height: 28px;
			border-radius: 14px;
			font-size: 28px;
			color: #fff;
			background: #080;
		}
	.accordion.readOnly .trigger{
		display: block;
	}
		.accordion li.open .trigger span.icon-ringDown,
		.accordion li.open .trigger span.icon-arrowDown{
			-webkit-transform: rotate(180deg);
			   -moz-transform: rotate(180deg);
				-ms-transform: rotate(180deg);
				 -o-transform: rotate(180deg);
					transform: rotate(180deg);
		}
		.accordion li.correct .trigger span.icon-arrowDown{
			display: none;
		}
		.accordion li.correct .trigger span.icon-check{
			display: block;
		}




.explanationArea{
	display: none;
	width: 100%;
	padding: 32px 36px;
	background: #99e2f2;
	width: 100%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}
	.accordion li.open:last-child .explanationArea{
		border-radius: 0 0 8px 8px;
	}
	.explanationArea p,
	.explanationArea ul li,
	.explanationArea ol li{
		font-size: 14px;
		color: #006d85;
		line-height: 24px;
	}
	.explanationArea ol{
		margin-left: 20px;
	}
		.explanationArea ol li{
			list-style: decimal;
			font-style: italic;
			display: list-item!important;
		}


.totalScore{
	display: none;
	padding-bottom: 20px;
}
	.totalScore span{
		float: left;
		display: block;
		width: 48.2%;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				 box-sizing: border-box;
	}
	.totalScore span + span{
		width: 25.9%;
		text-align: center;
		font-weight: bold;
	}

/*------------------------------------------

	Dialogs

------------------------------------------*/
.blocker{
	display: none;
	position: absolute;
	top: 0;
	width: 100%;
	min-height: 100%;
	z-index: 99;
	background: #333;
	background: rgba(0,0,0,0.7);
}
	.blocker .dialog{
		display: none;
		position: absolute;
		z-index: 100;
		width: 600px;
		left: 50%;
		margin-left: -300px;
		top: 20px;
		padding: 16px 16px 0 16px;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 0 32px rgba(0,0,0,.75);
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
		.dialog .icon-cross{
			float: right;
			display: block;
			margin-left: 24px;
			width: 24px;
			height: 24px;
			line-height: 24px;
			text-align: center;
			font-size: 12px;
			color: #fff;
			border-radius: 12px;
			background: #d6d6d6;
			cursor: pointer;
		}
		.dialog .icon-cross:hover{
			background: #00b6de;
		}
		.dialog h2{
			color: #004959;
		}
		.dialog p,
		.dialog ul li{
			font-size: 16px;
			line-height: 24px;
		}
		.dialog p:last-child{
			padding-bottom: 0;
		}

/* Dialog table */
.dialog table{
	table-layout: fixed;
	border-collapse: collapse;
}
	.dialog table th{
		text-align: left;
		padding: 0 10px;
		border-bottom: 3px solid #eee;
	}
	.dialog table td{
		padding: 10px;
	}
	
/* Modal Omrekentabel Schrijven */
.dialog table.calculating th{
	width: 60%;
}
.dialog table.calculating th + th{
	width: 20%;
}
.dialog table.calculating td{
	border-right: 1px solid #eee;
}
.dialog table.calculating td + td{
	text-align: center;
}
.dialog table.calculating td + td + td{
	border: none;
}
.dialog table.calculating td h3{
	padding: 5px 0;
}
.dialog table.calculating .formRow.checkRadio label{
	width: auto;
	padding: 4px 10px 4px 0;
}
.dialog table.calculating .formRow.checkRadio label span.radioWrapper{
	margin-right: 5px;
}
.dialog table.calculating .formRow.checkRadio label span + span{
	font-size: 16px;
}

	
	
/* Modal Help */
.dialog table.help th{
	width: 25%;
}
.dialog table.help th + th{
	width: 75%;
}
.dialog table.help td{
	text-align: center;
	border-bottom: 1px solid #eee;
}
.dialog table.help td + td{
	text-align: left;
}

.dialog .icon{
	display: inline-block;
	width: 24px;
	height: 24px;
	line-height: 24px;
	overflow: hidden;
	border-radius: 12px;
	font-size: 12px;
	text-align: center;
	color: #f1f1f1;
	background: #d6d6d6;
	cursor: pointer;
}
.dialog .icon:hover{
	background: #07b7df;
	color: #fff;
}
.dialog .ring{
	width: 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 16px;
	border: 4px solid #99e2f2;
	background: #fff;
	color: #006d85;
}
.dialog .ring:hover{
	background: #fff;
	color: #ba014c;
}
.dialog .icon.icon-info{
	font-size: 24px;
	color: #d6d6d6;
	background: none;
}
.dialog .icon.icon-info:hover{
	color: #07b7df;
}
.dialog .icon.icon-check{
	width: 28px;
	height: 28px;
	line-height: 28px;
	border-radius: 16px;
	font-size: 28px;
	color: #fff;
	background: #080;
	border: 2px solid #080;
}
.dialog .icon.icon-check:hover{
	color: #fff;
	background: #080;
}


/*------------------------------------------

	Responsive
	- no media query for highest resolution		> Tablet landscape, desktop
	- 960px and down								> Tablet portrait
	- 640px and down								> Phone portrait & landscape
	- Retina										> High-Res images

------------------------------------------*/

/* Tablet portrait */
@media only screen and (max-width: 960px){
	
	.lockWidth{
		width: auto;
	}
	article,
	aside,
	.col-50-50 article,
	.col-50-50 aside{
		float: none;
		border: none;
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.col-33-66 aside{
		/*position: relative;*/
		float: left;
		width: 288px;
	}
	.col-33-66 article{
		float: left;
		border-left: 4px solid #e5e5e5;
		width: 340px;
	}
}

/* Phone portrait & landscape */
@media only screen and (max-width: 640px) {
	html,
	body{
		overflow-x: hidden;
	}
	h1,h2,h3,
	.question ul li,
	.dialog table th{
		word-break: break-all;
	}
	.blocker .dialog{
		width: 80%;
		margin-left: -40%;
	}
	.topBar,
	.home .topBar{
		height: 48px;
	}
		.icon-hamburger{
			display: block;
			position: absolute;
			left: 8px;
			top: 8px;
			width: 32px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 18px;
			color: #fff;
			background: #004959;
			border-radius: 6px;
		}
		.logo{
			top: 8px;
			left: 50%;
			margin-left: -36px;
			width: 73px;
			height: 33px;
		}
		.logoSteunpuntMBO-inv{
			visibility: hidden;
		}
		.logoSteunpuntMBO{
			visibility: visible;
		}
	.content{
		position: relative;
		padding-top: 64px;
		z-index: 2;
		min-height: 100%;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
		footer{
			margin-top: 32px;
			min-height: 160px;
		}
	/* Start Phone Nav */
	.menu{
		z-index: 1;
		top: 0;
		height: auto;
		min-height: 100%;
		background: #004959;
	}
	.home .menu{
		visibility: visible;
	}
		.menu li{
			width: 100%;
		}
			.menu li a{
				height: 48px;
				line-height: 48px;
				padding: 0 16px 0 16px;
				margin: 0;
				border-left: none;
				border-top: 1px solid #006d85;
				border-bottom: 1px solid #00242c;
				background: #004959;
			}
			.menu li a:hover{
				color: #fff;
			}
			.touch .menu ul li a:active{
				border-top: 1px solid #8e0e4e;
				border-bottom: 1px solid #f474b4;
				background: #ed1782;
			}
			.menu li:first-child a{
				padding-left: 16px;
			}
		.menu ul li.current:before{
			display: none;
		}
		.menu ul li.current a{
			background: #00b6de;
			border-top: 1px solid #66d3eb;
			border-bottom: 1px solid #006d85;
		}
	.content,
	header{
		-webkit-transition: -webkit-transform 0.2s linear;
		   -moz-transition:    -moz-transform 0.2s linear;
		    -ms-transition:     -ms-transform 0.2s linear;
		     -o-transition:      -o-transform 0.2s linear;
		        transition:         transform 0.2s linear;
	}
	#menuToggle:checked ~ .content,
	#menuToggle:checked ~ header{
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
		-webkit-transform: translate3d(270px,0,0);
		   -moz-transform: translate3d(270px,0,0);
		    -ms-transform: translate3d(270px,0,0);
		     -o-transform: translate3d(270px,0,0);
		        transform: translate3d(270px,0,0);
	}
	#menuToggle ~ .content,
	#menuToggle ~ header{
		-webkit-transform: translate3d(0,0,0);
		   -moz-transform: translate3d(0,0,0);
		    -ms-transform: translate3d(0,0,0);
		     -o-transform: translate3d(0,0,0);
		        transform: translate3d(0,0,0);
	}
	#menuToggle:checked ~ .content{
		position: fixed;
		height: 100%;
		top: 0;
		box-shadow: 0 0 24px rgba(0,0,0,.8);
	}
	/* End Phone Nav */
	.button{
		display: block;
		padding: 0 16px;
		margin: 8px 0;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.col-33-66 article,
	.col-33-66 aside{
		float: none;
		border: none;
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.col-33-66 article{
		padding-left: 0;
		padding-right: 0;
	}
	.yourAnswer div,
	.expertAnswer div{
		min-width: 22px;
	}

}

/* Retina */	
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi){
	.option-combo li a span,
	.radioWrapper{
		background-image: url("../img/sprite2x.png");
		-webkit-background-size: 48px 120px;
		   -moz-background-size: 48px 120px;
		     -o-background-size: 48px 120px;
		        background-size: 48px 120px;
	}
}

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/*------------------------------------------

	Older Browsers (No 'mobile first' approach, because of old - non media query - browsers)

------------------------------------------*/
.no-svg .logo,
.no-svg .logoSteunpuntMBO-inv,
.no-svg .logoSteunpuntMBO{
	background: none;
}
	.no-svg .logo img,
	.no-svg .logoSteunpuntMBO-inv img,
	.no-svg .logoSteunpuntMBO img{
		display: block;
	}