/*
[Table of contents]
0. Utility
1. Reset
2. Fonts
3. Header
4. Footer
5. Layout 
6. Homepage
7. Historie
8. Vragenlijst
9. Informatie
*/

/*------------------------------------------------------------------
[0. Utility ]
--------------------------------------------------------------------*/


@font-face {
	font-family: 'bebas_neuethin';
	src: url("../fonts/bebasneue_thin-webfont-8YoMG0a.eot");
	src: url("../fonts/bebasneue_thin-webfont-8YoMG0a.eot") format("embedded-opentype"), url("../fonts/bebasneue_thin-webfont-YAy4T5n.woff2") format("woff2"), url("../fonts/bebasneue_thin-webfont-fG2ESN0.woff") format("woff"), url("../fonts/bebasneue_thin-webfont-qpdr8B8.ttf") format("truetype"), url("../fonts/bebasneue_thin-webfont-yWVMtp4.svg") format("svg");
	font-weight: normal;
	font-style: normal; }
@font-face {
	font-family: 'bebas_neuebold';
	src: url("../fonts/bebasneuebold-webfont-nbYvIb0.eot");
	src: url("../fonts/bebasneuebold-webfont-nbYvIb0.eot") format("embedded-opentype"), url("../fonts/bebasneuebold-webfont-NuPfuIy.woff2") format("woff2"), url("../fonts/bebasneuebold-webfont-dtcaYuL.woff") format("woff"), url("../fonts/bebasneuebold-webfont-_hmVJla.ttf") format("truetype"), url("../fonts/bebasneuebold-webfont-e8Lbwkv.svg") format("svg");
	font-weight: normal;
	font-style: normal; }
@font-face {
	font-family: 'bebas_neuebook';
	src: url("../fonts/bebasneuebook-webfont-R2htGZy.eot");
	src: url("../fonts/bebasneuebook-webfont-R2htGZy.eot") format("embedded-opentype"), url("../fonts/bebasneuebook-webfont-X8F7qA4.woff2") format("woff2"), url("../fonts/bebasneuebook-webfont-cLWvqok.woff") format("woff"), url("../fonts/bebasneuebook-webfont-9bA6m5P.ttf") format("truetype"), url("../fonts/bebasneuebook-webfont-V-8owlY.svg") format("svg");
	font-weight: normal;
	font-style: normal; }
@font-face {
	font-family: 'bebas_neuelight';
	src: url("../fonts/bebasneuelight-webfont-TMOEGig.eot");
	src: url("../fonts/bebasneuelight-webfont-TMOEGig.eot") format("embedded-opentype"), url("../fonts/bebasneuelight-webfont-OxfiKfx.woff2") format("woff2"), url("../fonts/bebasneuelight-webfont-1UtW51U.woff") format("woff"), url("../fonts/bebasneuelight-webfont-yiLOLkZ.ttf") format("truetype"), url("../fonts/bebasneuelight-webfont-IjCaOw0.svg") format("svg");
	font-weight: normal;
	font-style: normal; }
@font-face {
	font-family: 'bebas_neue_regularregular';
	src: url("../fonts/bebasneueregular-webfont-V2gbPcW.eot");
	src: url("../fonts/bebasneueregular-webfont-V2gbPcW.eot") format("embedded-opentype"), url("../fonts/bebasneueregular-webfont-64IatDM.woff2") format("woff2"), url("../fonts/bebasneueregular-webfont-odVheQT.woff") format("woff"), url("../fonts/bebasneueregular-webfont-zMHBEV_.ttf") format("truetype"), url("../fonts/bebasneueregular-webfont-ggOT0VM.svg") format("svg");
	font-weight: normal;
	font-style: normal; }

.reveal-modal{
	width:95%;
	height:auto !important;
	min-height: auto !important;
	max-height: 400px !important;
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
     overflow-y: auto;
}

.reveal-modal h2{
	font-family:'bebas_neuebold';
	font-size:40px;
	color:#c6c6c5;
	line-height: 40px;
}

.reveal-modal p a{
    text-decoration: underline;
    color: #205377;
    font-weight: bold;
    line-height: 22px;
    font-size:18px;
}

@media (min-width: 64em) {

	.reveal-modal{
		width:50%;
	}

}

/*iPhone*/
@media only screen and (max-device-width: 480px) {
    .reveal-modal-bg {
        height: 99999px !important;
    }
}

/*iPad*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .reveal-modal-bg {
        height: 99999px !important;
    }
}




/*------------------------------------------------------------------
[1. Reset ]
--------------------------------------------------------------------*/

.row {
    max-width: 900px; 
}



/*------------------------------------------------------------------
[2. Fonts ]
--------------------------------------------------------------------*/

@font-face {
    font-family: 'bebas_neuebold';
    src: url("../fonts/bebasneue_bold-YDT8qKj.eot");
    src: url("../fonts/bebasneue_bold-YDT8qKj.eot") format('embedded-opentype'),
         url("../fonts/bebasneue_bold-A069jQY.woff2") format('woff2'),
         url("../fonts/bebasneue_bold-kBQJQe1.woff") format('woff'),
         url("../fonts/bebasneue_bold-oe5r5F1.ttf") format('truetype'),
         url("../fonts/bebasneue_bold-X1EUJM1.svg") format('svg');
    font-weight: normal;
    font-style: normal;

}

/*------------------------------------------------------------------
[3. Header ]
--------------------------------------------------------------------*/

body{
    margin-top:45px;
}

body.login{
	margin-top:0;
}

header{
	padding:10px 0px;
	text-align:center;
	border-bottom: 1px solid #eee;
}

#logo {
	float:left;
	max-width:600px;
	width:70%;
}


#logo.show-for-large-up {
	margin-top: 40px;
	margin-bottom: 20px;
}

#language{
	float:right;
	display:block;
	font-size:14px;
	line-height:14px;
}

nav ul {
	list-style-type:none;
	display:inline;
	margin:0;
}

nav ul li {
	display:inline;
}

nav ul li a {
	font-size:14px;
	line-height: 14px;
	line-height:50px;
	margin-left:10px;
	color:black;
}

@media (min-width: 40em) {
	
	#logo{
		float:left;
		max-width:300px;
		width:100%;
	}

}


@media (min-width: 64em) {
	
	#logo{
		max-width:450px;
		width:100%;
	}

	body{
	    margin-top:40px;
	}

	header{
		padding:0px 0px;
		text-align:center;
	}

}


/*------------------------------------------------------------------
[4. Footer ]
--------------------------------------------------------------------*/

footer{
	text-align:center;
	position:fixed;
	top:0;
	left:0;
	background-color: #205377;
	width:100%;
	height:40px;
	padding:0;
}

footer a{
	border-right:0px solid #ccc;
	padding:10px 20px;
	line-height:40px;
	font-size:24px;
}

footer .fa{
	font-size:28px;
	color:#ccc;
}

footer a:hover .fa, footer a.active .fa{
    color:#fff;
}



@media (min-width: 64em) {

	footer a{
		padding:10px 30px;
		line-height:60px;
	}


	footer{
		
		height:60px;
		
	}

}

@media (max-width: 335px) {

	footer .fa {
		font-size: 24px;
	}
	footer a {
		padding: 10px 15px;
	}

}

/*------------------------------------------------------------------
[5. Layout ]
--------------------------------------------------------------------*/
section{
	padding:20px 10px;
	text-align:center;
}

section p{
	font-size:14px;
}

section h2{
	text-align:center;
	font-weight:bold;
}

section.button{
	margin:0;
	line-height:20px;
	
}

@media (min-width: 64em) {
  section p { 
    font-size:18px;
  }
}

/*------------------------------------------------------------------
[6. Homepage ]
--------------------------------------------------------------------*/

.homepage-user
{
	text-align:left;
	padding:15px 10px;
	margin-bottom:0px;
	background-color:#eee;
}

.homepage-user p{
	font-size:14px;
	line-height:16px;
	font-weight:600;
	padding:0;
	margin: 0;
	color:#222;
}



#lars{
    float:right;
    width:80px;
    height:55px;
}

.homepage-user p span{
	font-size:12px;
	line-height:10px;
	font-weight:normal;
}

.homepage-user a{
	color:#205377;	
	text-decoration:underline;
	font-size:12px;
	line-height:20px;
}

.homepage-status{
	border:none;
	padding:10px 10px 10px 10px;
	margin-top:0px;
}

.homepage-status .iron {
	color: #575756;
}

.homepage-status .bronze {
	color: #925f36;
}

.homepage-status .silver {
	color: #b1b1b1;
}

.homepage-status .gold {
	color: #f8b133;
}

.homepage-status .platina {
	color: #c6c6c5;
}


.homepage-status-active{
	margin-top:40px;
	padding:20px 10px 10px 10px;
}

.homepage-status h1{
	font-family:'bebas_neuebold';
	font-size:100px;
	color:#f9b334;
	padding:0px 0px;
	line-height: 100px;
	margin-bottom:20px;
}

.homepage-status h2{
	font-family:'bebas_neuebold';
	font-size:40px;
	color:#c6c6c5;
	padding:0px 0px 15px 0px;
	line-height: 40px;
}

.homepage-status p{
	margin:0;
	padding:0px 40px 15px 40px;
}


.homepage-action{
	padding:10px 0px;
	margin:0;
}

.homepage-action .row{
	position:relative;
}

.homepage-action img{
	position:absolute;
	margin-top:-25px;
	right:0;
}


.homepage-action h2{
	font-family:'bebas_neuebold';
	font-size:40px;
	color:#fff;
	padding:0px 0px;
	line-height: 40px;
	text-align:left;
}

.homepage-action p{
	margin: 0;
}


.homepage-historie{
	border:none;
	text-align:center;
	/*background-color: #205377;*/
	background-color: #fff;
	/*border-top:1px solid #205377;*/
	padding: 10px 10px;
}

.homepage-historie a{
	/*color:#fff;*/
	text-decoration:underline;
	color: #205377;
	font-weight:bold;
	line-height:60px;
}

.homepage-historie a:hover{
	color:#444;
}

.button-tekst{
	float:left;
}

.homepage-status{
	padding:40px 10px 20px 10px;
	margin-top:0px;
}


@media (min-width: 64em) {

	.homepage-user
	{
		padding:15px;
	}

	.homepage-user p{
		font-size:20px;
		line-height:28px;
	}

	.homepage-user a{
		font-size:18px;
		line-height:32px;
	}

	.homepage-user p span{
		font-size:16px;
		line-height:24px;
	}

	#lars{
		width:auto;
		height:100%;
	}

	.homepage-status {
		padding: 40px 10px 40px 10px;
	}

	.homepage-status h1{
		font-size:140px;
		line-height: 140px;
	}

	.homepage-status h2{
		font-size:70px;
		line-height: 70px;
	}

	.button-tekst{
		float:right;
		margin-right:135px;
	}

}


/*------------------------------------------------------------------
[7. Informatie ]
--------------------------------------------------------------------*/

section.informatie-text{
	text-align:left ;
	padding:10px;
}

section.informatie-text h2{
	text-align:left;
	font-family:'bebas_neuebold';
	padding:0px 0 0 0;
	color:#c6c6c5;
	font-size:30px;
	margin:0;
}

section.informatie-text p{
	text-align:left;
}

section.informatie-text h3{
        font-family:'bebas_neuebold';
	font-size:20px;
	margin:0;
	color:#FF7C00;
	font-weight:bold;
	padding:10px 0 10px 0;
}

ul.informatie-links{
	margin:0;
	list-style-type:none;
	text-align:left;
}

ul.informatie-links li a{
    font-size:18px;
    color:black;
    margin-left:10px;
    line-height:30px;
    text-decoration: underline;
   
}

ul.informatie-links li:after {
    color: #FF7C00;
    content: "\f08e";
    font-family: FontAwesome;
    text-decoration: none;
    float:left;
    display:block;
    font-size:14px;
    line-height:22px;
    padding-top:4px; 
}


section.homepage-action{
	padding:10px 10px 5px 10px;
	margin:0;
	background-color:#45a737;
	text-align:left;
	border:none;
}


@media (min-width: 64em) {

	.informatie-text{
		padding:40px 10px 40px 10px;
	}

	.informatie-text p{
		padding:0px 100px 0px 0px;
	}


}



/*------------------------------------------------------------------
[7. Status ]
--------------------------------------------------------------------*/

section.status-historie{
	text-align:left;
	padding:0px;
}

section.status-historie table{
	width:100%;
	margin:0;
	border:0;
}

p.status-date{
	font-size:12px;
}

.status-status img.status-image{
	margin:0;
}

.status-historie table{
	font-size:12px;
} 

.status-historie th{
	font-size:11px;
} 

.status-latest{
	font-size:14px;
}

@media (min-width: 64em) {

	.status-historie table{
		padding:20px 0px;
	} 

	.status-historie th{
		font-size:16px;
	} 

	.status-historie td{
		font-size:18px;
		padding:20px;
	} 

}


/*------------------------------------------------------------------
[8. Login ]
--------------------------------------------------------------------*/

section.login-form{
	text-align:left;
	background-color:#eee;
}

section.login-form form{
	padding: 0px;
}


/*------------------------------------------------------------------
[8. Vragen ]
--------------------------------------------------------------------*/

.vraag h2{
	text-align:left;
	font-family:'bebas_neuebold';
	padding:5px 0 0 0;
	color:#205377;
	font-size:30px;margin:0;
}

.vraag span{
	/*color:#f9b334;*/

}

section.vraag{
	text-align:left;
	padding:0px 10px 0px 10px;
	background-color:#eee;
	margin-top:-35px;
}

.resultaat-action h2{
    font-size:32px;
}

p.result {
	text-align: left;
	padding: 20px 15px 20px 10px;
}

.vragen-lijst{
	padding:0;
}

.vragen-lijst ul{
    padding:20px 0px 20px 0px;
    
}

.antwoorden{
    list-style-type:none;
    text-align:left;
    margin:0;
}

.antwoorden li{
	padding:10px 10px 25px 10px;
	cursor:pointer;
}


.antwoorden a{
    display:block;
    padding-left:28px;
    font-size:14px;
	line-height:18px;
	color:black;
}


.antwoorden li:before {
    color: #FF7C00;
    color: #D3540F;
    content: "\f10c";
    font-family: FontAwesome;
    text-decoration: none;
    float:left;
    display:block;
    font-size:22px;
    line-height:22px;
}

.antwoorden input[type=radio]{
	/*display:none;*/
}

.antwoorden li.active,
.antwoorden li:hover{cursor: pointer;}
.antwoorden li.selected:before{content: "\f192";}
.antwoorden li.selected{background-color:#eee;}
.antwoorden li.selected a{color: #D3540F;}
.antwoorden li.good:before{content: "\f164";}
.antwoorden li.false:before{content: "\f165";}
.antwoorden li.extra:before{content: "\f067";}
.antwoorden li.better:before{content: "\f062";}
.antwoorden li.status:before{content: "\f02e";}

.antwoorden li.correct:before {color: #30BF00;}
.antwoorden li.correct a {color: #30BF00;}

.antwoorden li.incorrect:before {color: #B80D0D;}
.antwoorden li.incorrect a {color: #B80D0D;}

@media (min-width: 64em) {

	section.vraag{
		text-align:left;
		padding:20px 10px 20px 10px;
		background-color:#eee;
		margin-top:0px;
	}

	.vragen-lijst{
		padding:20px 10px 20px 10px;
	}

	.vraag h2{
		font-size:40px;
	}

	.vraag p{
		font-size:22px;
	}

	.antwoorden li {
		padding: 20px 10px 20px 10px;	
	}

	.antwoorden li a{
		font-size:20px;	
		line-height:34px;
		margin-left:28px;
	}

	.antwoorden li:before {
	    font-size: 28px;
	    line-height: 34px;
	    display:block;
	    content: "\f10c";
	    font-family: FontAwesome;
	    text-decoration: none;
	    float:left;
	    display:block;
	}

	.antwoorden li.selected{
		background-color:#fff;
	}

	.antwoorden li.selected a{
		font-weight:bold;
	}


}

/*------------------------------------------------------------------
[8. overview final ]
--------------------------------------------------------------------*/
p.wa-wrong-question {
	font-weight: bold;
	margin: 0.25em 0 0.25em 0;
}
span.wa-answer {
	color: #000;
}

/*------------------------------------------------------------------
[9. Instellingen ]
--------------------------------------------------------------------*/

section.instellingen{
	padding:0px 10px 25px 10px;
}

.instellingen input,
.instellingen select{
	margin:8px 0 0 0;
}

.instellingen label{
	text-align:left;
}

#percentage{
	font-weight:bold;
}

.do-check section.informatie-text{
    padding: 20px 10px 0px 10px;
}

.do-check section.instellingen{
    padding: 0px 10px 15px 10px;
}

label{
	margin:15px 0px 5px 0px;
}

.feedback{
	text-align:left;
	padding:5px 0px;
}

select{
	background-color:#fff;
}

label span{
	font-size:11px;
	line-height:14px;
	display:inline-block;	
}

@media (min-width: 64em) {

	section.instellingen{
		padding:25px 60px 35px 60px;
	}

	.do-check section.instellingen{
	    padding: 0px 60px 30px 60px;
	}

	section.instellingen form{
			padding:0px 140px 10px 0px;
	}

	label{
		font-size:18px;
		margin:25px 0;
	}

	label span{
		font-size:14px;
		line-height:18px;
	}


}

/* Language tweak (en) */
@media (min-width: 1200px) {
	.aside-block .left-block {
		font-size: 54px;
	}
}

@media (min-width: 1024px) {
	.aside-block .left-block {
	    font-size: 42px;
	}
}

@media (min-width: 768px) {
	.safe-block h1 {
	    width: 55%;
	}
}

@media (min-width: 1200px) {
	.platinum-block h1 strong {
	    font-size: 145px;
	     line-height: 150px;
	}
}

@media (min-width: 1200px) {
	.platinum-block h1 strong {
	    font-size: 156px;
	    line-height: 166px;
	}
}

@media (min-width: 1024px) {
	.platinum-block h1 strong {
	    font-size: 134px;
	    line-height: 144px;
	    font-weight: bold;
	}
}

@media (min-width: 1024px) {
	.platinum-block .text-holder {
	    padding: 0 4px 36px;
	}
}

@media (min-width: 1070px) {
	#nav a.language {
		position:absolute;
		top:15px;
	}
}

@media (min-width: 1220px) {
	#nav a.language {
		position:static;
		bottom:15px;
	}
}

.homepage-action h2.redo-test {
	margin-top: 20px;
	margin-bottom: 20px;
}