/* VERZUIMTRAINING */
/* *Studio Interactive Colors */
/* *Orange: rgba(254,112,62,1); */
/* *Old grey rgba(52,64,182,0.8)*/
/* *VitalMindx */
/* *Orange pumpkin: rgba(237,140,0,1); */
/* rgba(52,64,182,1);  baker's chocolate */

/* PostNL kleuren:
Intens oranje 231 82 4
Oranje 237 140 0
Licht oranje 249 177 18

Diep Blauw 0 26 115
Blauw 52 64 182
Lichtblauw 0 161 225
*/
body {
font-family: 'PT Sans', sans-serif;
font-size: 2.2vw;
-webkit-text-size-adjust: 100%;
}

#workbutton {
       /*display: none; */
}
/*        
#frametainer {
	position: relative;
        top:6vw;
	margin: 0 auto;
	display: block;
	border-style: none;
	width: 100vw;
	height: 56vw;
	max-width: 960px;
    max-height: 540px;
}
*/

#container {
	position: relative;
	top: 2vh;
	
}

#frametainer {
	position: relative;
    top:0;
	margin: 0 auto;
	display: block;
	border-style: none;
	
	width: 77vw;
	height: calc((77vw/16)*9);
	/* max-width: 1680px; 
    max-height: 946px; */
	/*max-width: 1380px; 
    max-height: 776.25px;
	 max-width: 1120px; 
    max-height: 630px; 
	*/
}

#teller {
   font-size: 2vw;
   position: absolute;
   width: auto;
   height: auto;
   bottom: 3%;
   left: 25%;
	color: red;
	}

#shape {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	margin: 0 auto;
	text-align: center;
	}

#videoframe {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	}

	#video_html5 {
	position: absolute;
	top: 0px;
	left: 0px;	
	width: 100%;
	height: 100%;
	}

#startvideo {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	cursor: hand;
	cursor: pointer;
	background-color: rgba(250,250,250,1);
	}
	
#startposter {
	width: 100%;
	height: 100%;
}

#logodiv {
	position: absolute;
	left: 0vw;
	top: 1vw;
	width: 14%;
	height:auto;
	display:none;
	}
	
#logo {
	width: 100%;
	height: 100%;
}

#buttonfield {
	position: absolute;
	bottom: 10%;
	left: 2vw;
	width: 92%;
	height: auto;
	padding: 1%;
    color: #ffffff;
	text-align: left;
    display: none;
}

#scoreChart {
	max-height: 30vh;
	width: auto;
}

#vraagveld {
    margin: 1%;
	padding: 1%;
	width: 50%;
    text-align: left;
	/*background-color: rgba(237,140,0,1);*/ /* orange */
	background-color: rgba(52,64,182,1);
    display: none;
}

#retourveld {
    margin: 1%;
	padding: 1%;
	/*width: 50%;*/
    text-align: center;
	/*background-color: rgba(237,140,0,1);*/ /* orange */
	background-color: rgba(52,64,182,1);
    display: none;
}

.retourveldbutton {
    margin: 2%;
	padding: 1%;
	cursor: hand;
	cursor: pointer;
    text-align: center;
	/*background-color: rgba(52,64,182,1);*/
	background-color: rgba(237,140,0,1);
	display: inline;
}

#lower3 {
	position: absolute;
	bottom: 10%;
	left: 19%;
    margin: 1%;
	padding: 1%;
	width: 60%;
    text-align: left;
	/*background-color: rgba(237,140,0,1);*/
	background-color: rgba(52,64,182,1);
	color: rgba(255,255,255,1);
    display: none;
	font-size: 2.5vw;
	text-align: center;
}

#colofonbutton {
	position: absolute;
	left: 1vw;
	bottom: 1vw;
	width: auto;
	height: auto;
	cursor: hand;
	cursor: pointer;
 	color: rgba(52,64,182,1);
    display: none;
}

#closebutton {
	position: absolute;
	right: 1vw;
	top: 2vw;
	width: auto;
	height: auto;
	cursor: hand;
	cursor: pointer;
	color: rgba(237,140,0,1);
	display: none;
}

.material-icons {
		font-size: 5vw;
}

#colofon {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	color: black;
	background-color: rgba(250,250,250,0.9);
	overflow: scroll;
	display: none;
}

.butt {
    margin: 1%;
	padding: 1%;
	cursor: hand;
	cursor: pointer;
    text-align: left;
	/*background-color: rgba(52,64,182,1);*/
	background-color: rgba(237,140,0,1);
	/* background-color: rgba(52,64,182,1); /* baker's chocolate */
    display: none;
}

.butt:hover {
	background-color: rgba(52,64,182,0.8);
}
/*
.butt:hover,.ant:hover {
	background-color: rgba(52,64,182,0.8);
}
*/        
.ant {
    margin: 1%;
	padding: 1%;
	cursor: hand;
	cursor: pointer;
    text-align: left;
	/*background-color: rgba(52,64,182,1);*/
	background-color: rgba(237,140,0,1);
	display: none;
}

#replay:hover, #controls:hover, #retourmenu:hover{
    /*color:rgba(52,64,182,1);*/
    color:rgba(231,82,4,1);
}

#replay {
	position: absolute;
	font-size: 5vw;
	/*
	height: auto;
	width: auto;
	padding: 1%;
	*/
	right: 1vw;
	bottom: 7vw;
	cursor: hand;
	cursor: pointer;
	color: rgba(237,140,0,1); /* orange */
	display: none;
}

#retourmenu {
	position: absolute;
	font-size: 5vw;
	/*
	height: auto;
	width: auto;
	padding: 1%;
	*/
	right: 1vw;
	bottom: 12vw;
	cursor: hand;
	cursor: pointer;
	color: rgba(237,140,0,1); /* orange */
	display: none;
}

#skip {
	position: absolute;
	height: auto;
	width: auto;
	padding: 1%;
	right: 1vw;
	top: 2vw;
	cursor: hand;
	cursor: pointer;
	color: rgba(255,255,255,1);
	background-color: rgba(237,140,0,1); /* orange */
	display: none;
	font-size: 2vw;
	text-align: center;
}

#skip:hover {
	background-color:rgba(231,82,4,1);
}

	#infobutton {
	position: absolute;
	bottom: 17vw;
	right: 1vw;
    font-size: 5vw;
	cursor: hand;
	cursor: pointer;
	/*
	color: rgba(163,166,162,1);
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255,255,255,0.1);
	*/
	color: rgba(237,140,0,1); /* orange */
	display: none;
	}
	
	#controls {
	position: absolute;
	bottom: 2vw;
	right: 1vw;
    font-size: 5vw;
	cursor: hand;
	cursor: pointer;
	/*
	color: rgba(163,166,162,1);
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255,255,255,0.1);
	*/
	color: rgba(237,140,0,1); /* orange */
	display: none;
	}
	



#play_arrow {
	position: absolute;
	top: 15%;
	left: 15%;
	height: 70%;
	width: 70%;
	cursor: hand;
	cursor: pointer;
	opacity: 1;
	}	

#starterframe{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: auto;
	}
	
#infopage{
	position: absolute;
	top: 10vw;
	text-align: left;
	padding:2vw;
}

.background-css{
position: absolute;
width:16vw;
height:16vw;
border:2vw solid transparent;
border-top-color:rgba(255,255,255,0.5);
border-right-color:rgba(255,255,255,0.5);
border-radius:50%;
transform:rotate(-45deg);
}

.lefthalf-css{
position: absolute;
width:16vw;
height:16vw;
border:2vw solid transparent;
border-bottom-color:rgba(52,64,182,1);
border-left-color:rgba(52,64,182,1);
border-radius:50%;
transform:rotate(-45deg); /* null position white needle */
}

.righthalf-css{
position: absolute;
width:16vw;
height:16vw;
border:2vw solid transparent;
border-bottom-color:rgba(237,140,0,1);
border-left-color:rgba(237,140,0,1);
border-radius:50%;
transform:rotate(-45deg); /* null position red needle */
}

#scoreveld {
	position: relative;
	margin: 1%;
	padding: 1%;
	width: auto;
	height: 20vw;
	text-align: left;
	 /*background-color: rgba(52,64,182,1); */
	background-color: rgba(0,0,0,1);
    display: none;
}

#scoreveld1{
	position: absolute;
	top: 0%;
	left:8%;
	width: auto;
	height: auto;
	margin: 1%;
	padding: 1%;
	
}

#gaugeguard{
	position: absolute;
	top: 25%;
	left: 40%;
	margin: auto 0;
	width: 26vw;
height: 10vw;
/*background-color: green;*/
overflow: hidden;
}

.text{
	
color: white;
padding: 1%;
}

#pcntright{
	position: absolute;
	top: 60%;
	right:8%;
	margin: 1%;
	padding: 1%;
}

#pcntleft{
	position: absolute;
	top: 60%;
	left:8%;
	margin: 1%;
	padding: 1%;;
}

.orange{
color: rgba(237,140,0,1);
}

.blue{
color: rgba(52,64,182,1);
}

#legendaveld {
	position: relative;
	margin: 1%;
	padding: 1%;
	width: auto;
	height: 20vw;
	text-align: left;
	 /*background-color: rgba(52,64,182,1); */
	background-color: rgba(52,64,182,0.8);
    display: none;
}

.legendaicon{
	font-size: 3vw;
	color: rgba(237,140,0,1);
	vertical-align: middle;
	
	
}