/* STYLESHEET DEMO ZAKELIJK SUCCES IN NIEUWE TIJDEN */

body {
//font-family: 'Roboto', sans-serif;
font-family: 'Raleway', sans-serif;
	color: #ffffff;
	background-color: rgba(240,240,240,1)
      }


/*
::-webkit-media-controls {
  display:none !important;
}
*/



::cue {
    color: #fff;

}

.banner {
    width: 100%;
    height: 12vw;
    //height: auto;
    text-align: center;
	background-color: rgba(104,104,104,1);
    font-size: 2vw;
    padding: 2vw;
}

#logo_lg {
    postition: absolute;
    top: 0%;
    height: 80%;
    width: auto;
}

video::-webkit-media-controls {
  display:none !important;
}

video::-webkit-media-controls-enclosure {
  display:none !important;
}

#myCanvas{
    position: absolute;
    top: 0;
    left: 0;
	cursor: hand;
	cursor: pointer;
}

#stat_page {
    font-family: 'Cairo', sans-serif;
    font-size: 2vw;
    color: #000000;
}


/*
#container {
	position: relative;
	//margin: 0 auto;
	text-align: center;
	width: 100%;
	max-width: 920px;
	height: 500px;;
}
*/

#stats {
	position: relative;
	margin: 0 auto;
	//text-align: center;
	width: 80vw;
}



#frametainer {
	position: relative;
	margin: 0 auto;
	display: block;
	border-style: none;
	width: 94vw;
	max-width: 900px;
        height: 2200px;
	//height: calc((94vw/16)*9);
	//max-height: calc((1200px/16)*9);
	//overflow: hidden;
	//padding:2px;
}


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

#shape {
	position: relative;
	width: 100%;
	//width: 100vw;
	//max-width: 720px;
	height: auto;

	margin: 0 auto;
	text-align: center;
	font-size: 6vw;
	}

#videoguide {
	position: relative;
	width: 100%;
	height: 100%;
	//font-size: 3vw;	
	}

#videoframe {
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 3vw;
        z-index: 2147483647;	
	}

/*
@media screen and (min-width: 1200px) {
    #videoframe {
	font-size: 1.2vw;	
	}
}
*/

#video_html5 {
	width: 100%;
	height: 100%;
	}


#start_arrow {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: auto;
	cursor: hand;
	cursor: pointer;
	opacity: 1;
	}

#contentbox {
	position: absolute;
	bottom: 7%;
	left: 0%;
	width: 100%;
	height: 90%;
	text-align: center;
	display: none;

}

#answer_01 {
        //font-size: 3vw;
	position: absolute;
	left: 10%;
	bottom: 15%;
	width: 35%;
	height: auto;
	cursor: hand;
	cursor: pointer;
	background-color: rgba(235,115,0,1);
	padding: 5px;
	text-align: center;
	display: none;
	}

#answer_02 {
        //font-size: 3vw;
	position: absolute;
	right: 10%;
	bottom: 15%;
	width: 35%;
	height: auto;
	cursor: hand;
	cursor: pointer;
	background-color: rgba(235,115,0,1);
	padding: 5px;
	text-align: center;
	display: none;
	}

#Score {
        //font-size: 3vw;
	position: absolute;
	right: 5%;
	bottom: 15%;
	width: auto;
	height: auto;
	opacity: 1;
	background-color: #f46717;
	padding: 5px;
	text-align: center;
	display: none;
	}

#text {
	position: absolute;
	left: 10%;
	width: 80%;
	height: auto;
	top: 3%;
	font-family: 'Bigelow Rules', cursive;
	font-size: 6vw;
	color: rgba(255, 255, 255, 1);
        border-radius: 25px;
	background-color: rgba(0, 0, 0, 0.2);
	//display: none;
}

#text2 {
	position: absolute;
	left: 10%;
	width: 80%;
	height: auto;
	bottom: 30%;
	font-family: 'Bigelow Rules', cursive;
	font-size: 6vw;
	display: none;
}

p.small {
        font-size: 2vw;
 }

p {
        font-size: 2vw;
 }



#quiz_start{
	position: absolute;
	top: 10vw;
	right: 15vw;
	width: 40vw;
	height: 40vw;
	cursor: hand;
	cursor: pointer;
    	display: none;    
}

.menu {
	width: 25%;
	//height: 7vw;
	//font-size: 3vw;
	cursor: hand;
	cursor: pointer;
	color: rgba(255,255,255,1);
	background-color: rgba(0,143,211,1);
	padding: 1%;
	text-align: center;
    	//border-radius: 6px;
    	display: none;
}

#menu_icon, #next_icon, #mail_icon {
    	//position: absolute;
    	width: 6vw;
    	height: auto;

}

#mb_order{
    width: 100%;
    display: none;
}

#mbframe{
    width: 100%;
    height: 50vw;
}

#formdiv {
	position: absolute;
	width: 80%;
	height: 25%;
	right: 10%;
	bottom: 10%;
        //border-radius: 25px;
	background-color: rgba(235,115,0,1);
	display: none;
	padding: 2%;
	}

#form1 {
	position: absolute;
	top: 1%;
	padding: 1%;
	color: rgba(255, 0, 0, 0.8);
	}

input {
	//position: relative;
	width: 80%;
	font-family: 'Raleway', sans-serif;
	font-size: 1.5vw;
        //border-radius: 10px;
	}

#zendbutton, #cancelbutton {
        width: 40%;
	cursor: hand;
	cursor: pointer;
}

#logo {
    	position: absolute;
    	width: auto;
    	height: 4vw;
    	right: 1vw;
    	bottom: 4vw;
	cursor: hand;
	cursor: pointer;
	//color: rgba(255,255,255,1);
	//background-color: rgba(0,143,211,1);
    	//border-radius: 6px;
	//padding: 1vw;
        //display: none;
}

#saplogo {
    	//position: absolute;
    	width: auto;
	height: 4vw;
}

#menu {
    	position: absolute;
    	width: auto;
    	height: 6vw;
    	right: 1vw;
    	top: 1vw;
	cursor: hand;
	cursor: pointer;
	color: rgba(255,255,255,1);
	background-color: rgba(0,143,211,1);
    	border-radius: 6px;
	//padding: 1vw;
        display: none;
}

#menu:hover, .menu:hover, #next_button:hover, #mail_button:hover {
	background-color: rgba(0,118,203,1);
}	

#question {
    	position: absolute;
    	width: 80vw;
    	height: auto;
    	left: 9vw;
    	bottom: 10vw;
	font-size: 3vw;
	//cursor: hand;
	//cursor: pointer;
	color: rgba(255,255,255,1);
	background-color: rgba(240,171,0,1);
    	border-radius: 6px;
	padding: 1vw;
	display: none;   
}

#share_button {
    position: absolute;
    left: 0.5%;
    top: 10%;
    height: 5%;
    width: auto;
	background-color: rgba(235,115,0,0);
}

#fbicon {
    position: absolute;
    height: 100%;
    width: auto;
}

#in_share_button {
    position: absolute;
    left: 0.5%;
    top: 20%;
    height: 5%;
    width: auto;
	background-color: rgba(235,115,0,0);
}

#in_icon {
    position: absolute;
    height: 100%;
    width: auto;
}

#twi_share_button {
    position: absolute;
    left: 0.5%;
    top: 30%;
    height: 5%;
    width: auto;
	background-color: rgba(235,115,0,0);
}

#twi_icon {
    position: absolute;
    height: 100%;
    width: auto;
}


#controls {
	position: absolute;
	height: 6%;
	width: 4%;
	left: 1%;
	bottom: 10%;
	cursor: hand;
	cursor: pointer;
	color: rgba(163,166,162,1);
	border-style: solid;
	border-width: 1px;
	border-color: rgba(0,0,0,1);
	background-color: rgba(0,0,0,0);
	display: none;
        padding: 0.5%;
	opacity: 0.3;
	}

#controls:hover{
	//background-color: rgba(0,0,0,0.6);
	}


#play_arrow {
	//position: absolute;
	//top: 15%;
	//left: 15%;
	height: 75%;
	width: auto;
	cursor: hand;
	cursor: pointer;
	//bottom: 1px;
	opacity: 1;

	}


#item1 {
    position: absolute;
    right: 2%;
    top: 15%;
	background-color: rgba(235,115,0,1);
}

#item2, #item5 {
    position: absolute;
    right: 2%;
    bottom: 15%;
	background-color: rgba(227,85,0,1);
}

#item3 {
    position: absolute;
    right: 5%;
    top: 15%;
	background-color: rgba(235,115,0,1);
}

#item4 {
    position: absolute;
    right: 5%;
    bottom: 15%;
	background-color: rgba(235,115,0,1);
}

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


a:link {
    text-decoration: none;
    color: #ffffff;
}