/* Basic Werkdruk */

/* Colors Onlineverzuimtrainingen 
 * #009688 green primary rgb(0,150,136)
 * #00796B green secondary rgb(0,121,107)
 * #ffb74d yellow button primary rgb(255,183,77)
 * #9c27b0 purple button secondary rgb(156,39,176) 
 */

body {
font-family: 'Open Sans', sans-serif;
font-size: 1.8vw;
-webkit-text-size-adjust: 100%;
/* background-color: rgba(0,170,231,0.2);*/ /* HU Blauw */
-webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}

#progressbar {
		position: absolute;
		bottom: 3%;
		left: 3%;
		width: 94%;
		height: 1%;
		background-color: rgba(0,0,0,0.5);
}

#barvalue {
	position: absolute;
	left: 0%;
	width: 0%;
	height: 100%;
	background-color: rgba(255,255,255,0.5);
}

.introfield {
	/* font-family: 'Special Elite', cursive; */
	/* font-family: 'Stardos Stencil', cursive; */
	font-family: 'Roboto', sans-serif; 
	font-size: 4vw;
	font-weight: bold;
	color: rgba(255,255,255,0.9);
	display: none;
	text-transform: uppercase;
	text-align: center;
	/*margin: 1%;*/
	/* text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; */
}

#introtextcontainer {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: auto;
		height: auto;
		display: none;
		/* background-color: red;*/
}

#introtext {
		width: auto;
		height: auto;
		display: block;
		}

#introtext2 {
		width: auto;
		height: auto;
		display: block;
}

#introtext3 {
		width: auto;
		height: auto;
		display: block;
}

.tekstballon {
	/*font-family: 'Special Elite', cursive;*/

	position: absolute;
	top: 8%;
	right: 5%;
	width: 25%;
	height: 10%;
	background-color: rgba(221,247,200,0.8);
	display: none;
	text-align: left;
	border-radius: 5px;
}


    .tekstballon:after {
	position: absolute;	
	  content: '';
      width: 0;
      height: 0;
	  top: 100%;
	  left: 5%;
	  border-left: 1vw solid transparent;
      border-right: 1vw solid transparent;
      border-top: 2vw solid rgba(221,247,200,0.8);
	  
    }
	
	#sms{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		color: rgba(0, 0, 0, 1);
		font-size: 1.8vw;
		padding: 4%;
	}

#scrollfield {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.8); /* wit*/
	background-color: rgba(255,255,255,0.8);
	display: none;
}

#skip_button {
	position: absolute;
	top: 1%;
	right: 3vw;
	width: 15%;
	height: 10%;
	border-radius: 5px;
	background-color: rgba(81,42,91,1); /* HU Blauw */
	cursor: hand;
	cursor: pointer;
	font-size: 1.8vw;
	font-weight: bold;
	color: rgba(250,250,250,1);
	padding: 0;
	display: none;
}

#download {
	position: absolute;
	top: 17%;
	right: 3vw;
	width: 15%;
	height: 10%;
	border-radius: 5px;
	background-color: rgba(81,42,91,1); /* Fontys Paars */
	cursor: hand;
	cursor: pointer;
	font-size: 1.8vw;
	font-weight: bold;
	color: rgba(250,250,250,1);
	padding: 0;
	display: none;
}

	#videomask {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,1);
	/* background-color: var(bgcolor_scrollfield); */
	/* overflow: scroll; */
	display:none;
	}


	#tips {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: rgba(0,121,107,0.95);
	/* background-color: var(bgcolor_scrollfield); */
	overflow: auto;
	display:none;
	vertical-align: center;
	}
	
	#tips_tekst {
	position: absolute;
	top: 35%;
	left: 12%;
	width: 100%;
	height: auto;
	padding: 1%;
	text-align: center;
	font-size: 3vw;
	color: rgba(255,183,77,1);
	}
	
.tipsgraphic {
		width: 100%;
		height: auto;
}
	
	.handoutbutton {
	width: 70%;
	height: auto;
	cursor: hand;
	cursor: pointer;
	display: inline-block;
	color: white;
	/*background-color: var(--bg_color_questions);*/ /* TU Donkerrood */
	background-color: rgba(81,42,91,1);	
	padding: 1%;
	margin: 1%;
	}
	
	.fakehandoutbutton {
	width: 70%;
	height: auto;
	display: inline-block;
	color: white;
	background-color: rgba(81,42,91,1);	
	padding: 1%;
	margin: 1%;
	}
	
	.handoutbutton:hover {
	background-color: rgba(199,33,37,0.8);
	}
	
	#handoutbuttonframe {	
	position: absolute;
	top: 20%;
	left: 0%;
	width: 100%;
	height: auto;	
	text-align: center;
	}

.testjekennis {
	position: absolute;
	top: 17%;
	right: 3vw;
	width: 15%;
	height: 10%;
	border-radius: 5px;
	background-color: rgba(81,42,91,1); /* HU Blauw */
	cursor: hand;
	cursor: pointer;
	font-size: 1.8vw;
	font-weight: bold;
	color: rgba(250,250,250,1);
	padding: 0;
	display: none;
}

#skip_button:hover, .testjekennis:hover { 
    background-color: rgba(81,42,91,0.9);
}

#skip_button p, .testjekennis p, #meer_jdr p, #naar_training p, #naar_training2 p, #lower3 p, #subtitles p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.menu_button {
	width: 30%;
	height: 10%;
	border-radius: 5px;
	background-color: rgba(81,42,91,1); /* HU Blauw */
	cursor: hand;
	cursor: pointer;
	font-size: 1.8vw;
	font-weight: bold;
	color: rgba(250,250,250,1);
	padding: 0;
	display: none;
}

.menu_button:hover { 
    background-color: rgba(81,42,91,0.9);
}

.menu_button p{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

	
video {
  pointer-events: none;
  	/* background-color: rgba(0,170,231,0.5); /* HU Blauw */
}

#thumbnailContainer {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 20%;
	height: 20%;
	background-color: rgba(0,170,231,0.5); /* HU Blauw */
}

#workbutton {
       //display: none;
}

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

/*
#shape {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	}
	
#videoframe {
	position: relative;
	top: 0%;
	left: 0%;
	width: 100vw;
	height: 100vh;
	}
*/

#shape {
	position: relative;
	/*
	width: 100%;
	height: auto;
	*/
	width: 100vw;
	height: calc((100vw/16)*9);
	margin: 0 auto;
	text-align: center;
	box-sizing: border-box;
	background-color: grey;
	}
	
#videoframe {
	/*position: relative;*/
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	}

#video_html5 {
	width: 100%;
	height: 100%;
	/* border-radius: 10px; */
}
	
#video_resize_frame {
	position: relative;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	/* -webkit-transition: width 1s, height 1s, top 1s, left, 1s, right 1s, bottom, 1s; /* For Safari 3.1 to 6.0 */
    /* transition: width 1s, height 1s, top 1s, left, 1s, right 1s, bottom, 1s; */
}	

#startvideo {
	-webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;	
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	cursor: hand;
	cursor: pointer;
	}
	
	#startposter {
	-webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
		position: absolute;
		left: 0%;
		top: 0%;
		width: 100%;
		height: auto;
		//border-radius: 25px;
	}
	
#logodiv {
	position: absolute;
	left: 1vw;
	top: 2vw;
	width: 25%;
	height:auto;
	}
	
	#logo {
	width: 100%;
	height: 100%;
}

	#buttonfield {
	position: absolute;
	bottom: 5%;
	left: 3%;
	width: 88%;
	height: auto;
	padding: 1%;
	color: rgba(255,255,255,1);
	text-align: left;
	display: none;
}

.dummydiv {
  position: relative;
  height: auto;
}

/*
i.rightwrong {
	display:none;
}
*/

i.rightwrong {
	font-size: 1.8vw;
	display: none;
	/* background-color: orange; */
	display: none;
}

i.right {
  color: green;	
}

#closeanswers {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.8vw;
  width: auto;
  height: auto;
  cursor: hand;
  cursor: pointer;
  display: none;
 }

	#chart1_div {
	position: absolute;
	top: 0;
	left: 0;
    /* margin: 1%; 
	padding: 1%; */
	width: auto;
	height: auto;
    text-align: left;
	/*background-color: rgba(0,160,210,0.9); */
	/*background-color: rgba(225,51,50,1); /* HU Rood */
	/*border-radius: 5px;*/
	/*background-color: rgba(81,42,91,1);*/
    display: none;
}

#remarks {
	position: absolute;
	top: 3%;
	left: 20%;
    margin: 1%;
	padding: 1%;
	width: 55%;
    text-align: left;
	background-color: rgba(81,42,91,1); /* HU Blauw */
	color: rgba(255,255,255,1);
    /*display: none;*/
	font-size: 2.5vw;
	text-align: center;
}

	.butt {
    margin: 1%;
	padding: 1%;
	cursor: hand;
	cursor: pointer;
    text-align: left;
	background-color: rgba(81,42,91,1); /* HU Blauw */
    display: none;
}

.butt:hover,.ant:hover {
	/* background-color: rgba(81,42,91,1); /* TU Donketrood */
	background-color: rgba(81,42,91,0.8); 
}

	#vraagveld {
    margin: 1%;
	padding: 1%;
	/* width: 50%; */
	width: 0;
	height: 0;
    text-align: left;
	font-size: 1.8vw;
    font-weight: bold;
	background-color: rgba(255,255,255,1);
	border-style: solid;
	border-width: 1px;
	border-color: rgba(81,42,91,1);
	border-radius: 5px;
	color: rgba(81,42,91,1);
    display: none;
	

}
        
.ant {
    margin: 1%;
	padding: 1%;
	width: 0;
	height: 0;
	cursor: hand;
	cursor: pointer;
	font-size: 1.8vw;
    text-align: left;
	background-color: rgba(81,42,91,1);
	color: rgba(255,255,255,1);
	border-radius: 5px;
	display: none;
}

#anderant {
    margin: 1%;
	padding: 1%;
	width: 0;
	height: 0;
	cursor: hand;
	cursor: pointer;
	font-size: 1.8vw;
    text-align: left;
	background-color: rgba(81,42,91,1);
	color: rgba(255,255,255,1);
	border-radius: 5px;
	display: none;
}

span.Eb {
	position: relative;
	font-size: 1.8vw;
	color: rgba(255,75,181,1);
	left: 10px;
	font: bold;
}



#lower3 {
    position: absolute;	
    left:14%;
    bottom: 12%;	
    margin: 1%;
	padding: 1%;
	width: 60%;
	height: auto;
    text-align: left;
	font-size: 1.8vw;
    font-weight: bold;
	color: rgba(81,42,91,1);
	background-color: rgba(255,255,255,1);
	border-style: solid;
	border-width: 2px;
	border-color: rgba(81,42,91,1);
	border-radius: 5px;
    display: none;
}

#temp_scene_name {
    position: absolute;	
	/*
    left:2%;
    top:10%;
*/	
    top: 1%;
	right: 1%;
    /* margin: 1%; */
	padding: 1%;
	width: auto;
	height: auto;
    text-align: left;
	font-size: 1.8vw;
    font-weight: bold;
	color: rgba(81,42,91,1);
	background-color: rgba(255,255,255,1);
	border-style: solid;
	border-width: 2px;
	border-color: rgba(81,42,91,1);
	border-radius: 5px;
    display: none;	
}



#notifications {
    position: absolute;	
    left:4%;
    top:24%;	
    margin: 1%;
	padding: 1%;
	width: 65%;
	height: auto;
    text-align: left;
	font-size: 1.8vw;
    font-weight: bold;
	color: rgba(81,42,91,1);
	background-color: rgba(255,255,255,1);
	border-style: solid;
	border-width: 2px;
	border-color: rgba(81,42,91,1);
	border-radius: 5px;
    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);
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255,255,255,0.1);
	background-color: rgba(81,42,91,1); /* HU Blauw */
	display: none;
}

	#controls {
	position: absolute;
	font-size: 5vw;
	right: 1vw;
	bottom: 1vw;
	cursor: hand;
	cursor: pointer;
	/* color: rgba(199,33,37,1); */ /* TU Rood */
	color: rgba(81,42,91,1);
	display: none;
	}
	
	#scenelist {
	position: absolute;
	font-size: 1.8vw;
	right: 3vw;
	top: 1%;
	width: auto;
	height: auto;
	color: rgba(225,255,255,1);
	background-color: rgba(81,42,91,1);
	display: none;
	padding: 0.5%;
	text-align: left;
border-radius: 5px;
	}
	
	#scenelistbutton, #closelistbutton {
	font-size: 3vw;
	cursor: hand;
	cursor: pointer;
	}
	
	.gotoscenebutton {
	font-size: 1.8vw;
    cursor: hand;
	cursor: pointer;	
	}
	
	#replay {
	position: absolute;
	font-size: 5vw;
	right: 1vw;
	top: 75%;
	cursor: hand;
	cursor: pointer;
	/* color: rgba(199,33,37,1); */ /* TU Rood */
	color: rgba(81,42,91,1);
	display: none;
	}
	
	#replay_ans {
	position: absolute;
	font-size: 5vw;
	right: 1vw;
	top: 65%;
	cursor: hand;
	cursor: pointer;
	/* color: rgba(199,33,37,1); */ /* TU Rood */
	color: rgba(81,42,91,1);
	display: none;
	}
	
	#anderantwoordbutton {
	position: absolute;
	font-size: 5vw;
	right: 3vw;
	top: 85%;
	/*
	right: 3vw;
	top: 65%;
	*/
	cursor: hand;
	cursor: pointer;
	/* color: rgba(199,33,37,1); */ /* TU Rood */
	color: rgba(81,42,91,1);
	display: none;
	}
	
	#controls:hover, #replay:hover, #replay_ans:hover, #subtitles:hover {
	color: rgba(225,255,255,0.8);
	}
	
	#information, #pdf {
	position: absolute;
	font-size: 5vw;
	right: 3vw;
	top: 55%;
	cursor: hand;
	cursor: pointer;
	/* color: rgba(199,33,37,1); */ /* TU Rood */
	color: rgba(81,42,91,1);
	display: none;
	}
	
	#information:hover, #pdf:hover, #anderantwoordbutton:hover {
	color: rgba(81,42,91,0.8);
	}
	
	#sluit, #sluitpdf {
	position: absolute;
	font-size: 5vw;
	top: 1%;
	right: 3vw;
	cursor: hand;
	cursor: pointer;
	color: rgba(81,42,91,1); /* TU Rood */
	display: none;
	}
	
	#sluit:hover, #sluitpdf:hover {
	color: rgba(81,42,91,0.8);
	}

#starterframe{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: auto;
	}
	
#anderantwoord {
  position: absolute;
  bottom: 20%;
  left: 4%;
  width: 85%;
  height: auto;
    text-align: left;
    font-weight: bold;
	color: rgba(81,42,91,1);
	background-color: rgba(255,255,255,0.9);
	border-style: solid;
	border-width: 2px;
	border-color: rgba(81,42,91,1);
	border-radius: 5px;  
	margin: 1%;
	padding: 1%;
	display: none;
}

#formcancel {
	position: absolute;
	right: -1%;
	top: -1%;
}

#phonebutton_red {
	position: absolute;
	bottom: 22%;
	left: 34%;
	width: 12%;
	height: 17%;
	cursor: hand;
	cursor: pointer;
	display: none;
}

#phonebutton_green {
	position: absolute;
	bottom: 22%;
	left: 50%;
	width: 12%;
	height: 17%;
	cursor: hand;
	cursor: pointer;
	display: none;
}

i{
  vertical-align:middle;
} 

#meer_jdr {
	position: absolute;
	left: 10%;
	top: 30%;
    margin: 1%;
	padding: 1%;
	width: 30%;
	height: 30%;
	cursor: hand;
	cursor: pointer;
	font-size: 1.8vw;
    text-align: left;
	background-color: rgba(81,42,91,1);
	color: rgba(255,255,255,1);
	border-radius: 5px;
	display: none;
}

#naar_training {
	position: absolute;
	right: 10%;
	top: 30%;
    margin: 1%;
	padding: 1%;
	width: 30%;
	height: 30%;
	cursor: hand;
	cursor: pointer;
	font-size: 1.8vw;
    text-align: left;
	background-color: rgba(81,42,91,1);
	color: rgba(255,255,255,1);
	border-radius: 5px;
	display: none;
}

#naar_training2 {
	position: absolute;
	right: 30%;
	top: 60%;
    margin: 1%;
	padding: 1%;
	width: 40%;
	height: 10%;
	cursor: hand;
	cursor: pointer;
	font-size: 1.8vw;
    text-align: left;
	background-color: rgba(81,42,91,1);
	color: rgba(255,255,255,1);
	border-radius: 5px;
	display: none;
}

	#subtitles {
	position: absolute;
	height: 5%;
	width: 3%;
	/* right: 3vw; */
	left: 3vw;
    padding: 1%;
	bottom: 7%;
	cursor: hand;
	cursor: pointer;
	font-size: 5vw;
	/* font-weight: bold; */
	color: rgba(250,250,250,1);
	z-index: 2147483640;
	/* display: none; */
	}
	
	#sublist {
	position: absolute;
	display: flex;
	left: 3vw;
	bottom: 16%;
	width: 10%;
	height: 60%;
	background-color: rgba(0,116,197,0.1); /* Omron Blauw */
	z-index: 2147483640;
	display: none;
	}
	
	.languages, #close_sublist {
	display: flex;
	cursor: hand;
	cursor: pointer;
	width: 100%;
	height: 8%;
	background-color: rgba(0,116,197,1); /* Omron Blauw */
	font-size: 1.3vw;
	/* font-weight: bold; */
	color: rgba(250,250,250,1);
	padding: 4%;
	margin: 1%;
	text-align: left;
	}
	
	.flag {

	}
	
#subfield {
	position: absolute;
	bottom: 4%;
	left: 14%;
    margin: 1%;
	padding: 1%;
	width: 70%;
    text-align: left;
	background-color: rgba(81,42,91,1);
	color: rgba(255,255,255,1);
    display: none;
	font-size: 1.8vw;
	/* font-weight: bold; */
	text-align: center;
	cursor: hand;
	cursor: pointer;
	padding: 1%;
	margin: 1%;
}

/* Colors Onlineverzuimtrainingen 
 * #009688 green primary rgb(0,150,136)
 * #00796B green secondary rgb(0,121,107)
 * #ffb74d yellow button primary rgb(255,183,77)
 * #9c27b0 purple button secondary rgb(156,39,176) 
 */