<style type="text/css">

html 
{

}

body
{
	font-family: Source Sans Pro;
	font-size: 14px;
    font-size: 1.6vmax;
	color: #eeeeee;
	background-image: url(../data/images/bic_back1_blur1.png);
    background-position: center top;
	background-repeat: no-repeat;
    background-size: cover;
	background-attachment: fixed;
	width: 100vw;
	height: 100vh;
	margin: 0px;
	padding: 0px;
	left: 0%;
	top: 0%;	
}

.no_select
{
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
    -ms-user-select:none;
    user-select:none;	
}

.do_select
{
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

#zero_padding 
{
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

a:link 
{
	COLOR: #00EE00;
	text-decoration:none;
}

a:visited 
{
	COLOR: #33EE33;
	text-decoration:none
}

h1 a 
{
	text-decoration: none;
	color: #eeeeee;
}

h1 a:hover 
{

}

textarea
{
    font-size: 1.0em;
    font-size: 2.0vmax;      
}

textarea, select 
{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=text], textarea /*.contenteditable?*/ 
{
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}


input[type=text]
{
    font-size: 1.0em;
    font-size: 2.0vmax;      
}

input[type=text], select 
{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit], input[type=button] 
{
    font-size: 1.0em;
    font-size: 2.0vmax;      
    background-color: #4d3188;
    color: #ffcd0a;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover, input[type=button]:hover 
{
    background-color: #45a049;
}

.bic_scroll_box 
{
    position: absolute;
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
}

.bic_scroll_content 
{
    position: relative;
    display: block;
    margin: auto;
    overflow-x: hidden;
}
	
div#id-bic-code input[type=submit]
{
	width: 100%;
}

div#id-bic-code
{
    text-align: center;    
    
}

div#id-bic-code form 
{
    width: 30ex;
    margin: 0 auto;
}

div#id-bic-anleitung
{
    width: 90vw;    

}

div#id-bic-video-loading
{
  	font-size: 4em;
    font-size: 5.0vmax;  
}

div#id-bic-entercode
{
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

div#id-bic-rec-auswahl-clips
{
	width: 92vw;
}

div#id-bic-rec-auswahl-clips img
{
	height: auto;
	width: 30vw;	
}

div#id-bic-rec-auswahl-clips img:hover
{
	cursor: pointer;
	opacity: 1.0;
    color: #4c4392;
	opacity: 0.5;
	background-color: rgba(49,222,31,1.00)
}

.video-image
{
	display: inline;
	width: 50%;
	position: relative;
}

.video-text
{
	display: inline;
    left: 0%;
	bottom: 0%;
    position: absolute;
    text-align: center;
    width: 100%;
    color: white;
    text-shadow: 1px 1px 0px #000000;
}

div#id-bic-intro-auswahl-text
{
	width: 92vw;
	text-align: center;
	font-size: 1.5em;
}

div#id-bic-intro-auswahl-clips
{
	width: 92vw;
	text-align: center;
}

div#id-bic-intro-auswahl-clips img
{
	height: auto;
	width: 35%;
    margin: 0.5em 1.0em 1.0em 1.0em;}

div#id-bic-intro-auswahl-clips img:hover
{
	cursor: pointer;
	opacity: 1.0;
    color: #4c4392;
	opacity: 0.5;
	background-color: rgba(49,222,31,1.00)
}

div#id-bic-outro-auswahl
{
	text-align: center;	
}

div#id-bic-outro-auswahl-text
{
	width: 92vw;
	text-align: center;
	font-size: 1.5em;
}

div#id-bic-outro-auswahl-clips
{
	width: 92vw;
	text-align: center;
}

div#id-bic-outro-auswahl-clips img
{
	height: auto;
	width: 35%;
    margin: 0.5em 1.0em 1.0em 1.0em;
}

div#id-bic-outro-auswahl-clips img:hover
{
	cursor: pointer;
	opacity: 1.0;
    color: #4c4392;
	opacity: 0.5;
	background-color: rgba(49,222,31,1.00)
}

div#id-bic-flyer img
{
	height: 90vh;
	width: auto;
	
}

div#id-bic-room-e1r1
{
	left: 30%;
	top: 87%;	
}

div#id-bic-room-e1r2
{
	left: 60%;
	top: 85%;	
}

div#id-bic-room-e2r1
{
	left: 30%;
	top: 72%;	
}

div#id-bic-room-e2r2
{
	left: 60%;
	top: 72%;	
}

div#id-bic-room-e3r1
{
	left: 30%;
	top: 58%;	
}

div#id-bic-room-e3r2
{
	left: 60%;
	top: 58%;	
}

div#id-bic-room-e4r1
{
	left: 30%;
	top: 44%;	
}

div#id-bic-room-e4r2
{
	left: 60%;
	top: 45%;	
}

div#id-bic-room-e5r1
{
	left: 30%;
	top: 29%;	
}

div#id-bic-room-e5r2
{
	left: 60%;
	top: 32%;	
}

div#id-bic-room-e6r1
{
	left: 30%;
	top: 15%;	
}

div#id-bic-room-e6r2
{
	left: 60%;
	top: 17%;	
}

div#id-bic-video
{
    width: 100%;
    height: 100%;
}

div#id-bic-video iframe
{
    width: 100%;
    height: 100%;
}

div#id-bic-flyer-header-left
{
	position:absolute;	
	font-size: 6.0vh;
	color: orange;
	text-shadow: 2px 2px 0px #000000;
	text-align: right;
	width: 50%;
	left: -53%;
	top: 5%;
	display: none;
}

div#id-bic-flyer-header-right
{
	position:absolute;
	font-size: 6.0vh;
	color: orange;
	text-shadow: 2px 2px 0px #000000;
	text-align: left;
	top: 5%;
    left: 103%;
	display: none;
}

.flyer_room
{
	position:absolute;
	width: 26%;
	height: 11%;
	opacity: 1.0;
	font-size: 6.0vh;
	color: orange;
	text-shadow: 2px 2px 0px #000000;	
}

.flyer_room.watched
{
	opacity: 0.3;
}

.flyer_room:not(.watched):hover
{
	/*background-color:yellow;*/
	cursor: pointer;
	opacity: 1.0;
    color: #4c4392;
	text-shadow: 2px 2px 0px #dddddd;
}

.center_relative
{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	left: 20%;
}

.house_left
{
	font-size: 0.5em;
	position: relative;
	top: -25%;
	transform: translateY(-50%);
	left: -310%;
	width: 180%;
	text-align: right;
}

.house_right
{
	font-size: 0.5em;
	position: relative;
	top: -25%;
	transform: translateY(-50%);
	left: 170%;
	text-align: left;
	width: 180%;
	
}

.bic_show_rooms
{
	color: #4CE84D;		
}

.bic_show_rooms_started
{
	color: #ff9f3b;		
	float: right;
}

.bic_show_date
{
	color: rgba(255,255,255,0.56)
}

.centered 
{
	position: fixed;
	top: 50%;
	left: 50%;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
}

div#id-bic-feedback
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

div#id-bic-feedback-text
{
    display: none;
}

div#id-bic-feedback-image
{
    width: auto;
    text-align: center;
}

div#id-bic-feedback-image img
{
    width: auto;
    height: 60vh;
}

div#id-bic-feedbackdata
{
	
}


div#id-bic-feedbackdata-table
{
	padding: 3.0em 0 0 0;
}

div#id-bic-feedbackdata-info
{
	position:fixed;
	right: 1em;
	margin: 1em;
	padding: 0.25em 0.5em 0.25em 0.5em;
    background-color: #981c1c;
}

div#id-bic-feedbackdata-stats
{
	position:fixed;
	margin: 1em;
}

@media (orientation: landscape) 
{

    
}

@media (orientation: portrait) 
{


}

</style>