body, html{
	margin:					0px;
	color:					#f1f1f1;
	width:					100%;
	height:					100%;
	font-size:				25px;
	font-family:			"Titillium Web";
	font-weight:			300;
	background-color:		black;
}

#main{
	display:				table;
	height: 				100%;
    width: 					100%;
	background-color: 		black;
}
















.fleXcontainer{
	display: 				table-cell;
    height: 				100%;
	vertical-align: 		middle;
	
	text-align:				center;
}

.imgLogo{
	margin-top:				10px;
	width:					196px;
	height:					271px;	
}
.imgLogo2{
	margin-top:				10px;
	width:					196px;
	height:					196px;	
}
.imgLogo3{
	margin-top:				10px;
	width:					70px;
	height:					70px;
}



.elements{
	margin:					0px 10px;
}
.ausgabe{
	font-size:				22px;
	font-family:			"Titillium Web";
	font-weight:			300;
}
.ausgabeText{
	font-size:				22px;
	font-family:			"Titillium Web";
	font-weight:			300;
}
.textInfo{
	font-size:				15px;
	font-family:			"Titillium Web";
	font-weight:			300;
	line-height:			1;
	color:					#d4d4d4;
}

.loader{
  margin: 0 0 2em;
  height: 10px;
  width: 20%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 5px;
  display: inline-block;
  vertical-align: top;
}
svg path,
svg rect{
  fill:  #FF6700;
}
.votingX{
	margin-bottom:	15px;
}

.vote{
	display:		inline-block;
	width:			40px;
	height:			auto;
	text-align:		center;
	padding-left:	4px;
	padding-right:	4px;
	margin-left:	6px;
	margin-right:	6px;
	font-family:	"Titillium Web";
	font-weight:	600;
	font-size:		30px;
}

.roundPlayer{
	display:		inline-block;
	vertical-align: top;
	text-align:		left;
	width:			170px;
	padding-top:	28px;
	padding-left:	4px;
	padding-right:	4px;
	margin-left:	6px;
	margin-right:	6px;
	font-family:	"Titillium Web";
	font-weight:	300;
	font-size:		17px;
}


.roundVote{
	display:		inline-block;
	vertical-align: top;
	text-align:		right;
	width:			50px;
	padding-top:	28px;
	padding-left:	4px;
	padding-right:	4px;
	margin-left:	6px;
	margin-right:	6px;
	font-family:	"Titillium Web";
	font-weight:	600;
	font-size:		17px;	
}
.maxVote{
	font-weight:	300;
}

.voteSelect1{background-color:	#FF0000;}
.voteSelect2{background-color:	#FF3400;}
.voteSelect3{background-color:	#FF6900;}
.voteSelect4{background-color:	#FF9E00;}
.voteSelect5{background-color:	#FFD300;color: black;}
.voteSelect6{background-color:	#F7FF00;color: black;}
.voteSelect7{background-color:	#C2FF00;color: black;}
.voteSelect8{background-color:	#7CFF00;color: black;}
.voteSelect9{background-color:	#35FF00;color: black;}
.voteSelect10{background-color:	#00FF00;color: black;}

.quizSelect1{background-color:	#FFD300;color: black;}
.quizSelect2{background-color:	#FFD300;color: black;}
.quizSelect3{background-color:	#FFD300;color: black;}
.quizSelect4{background-color:	#FFD300;color: black;}


form input{
	font-family:			"Titillium Web";
	font-size:				22px;
	text-align:				center;
	width:					330px;
	
	background-color:		black;
	color:					white;
	border-style:			dashed;
	border-width:			1px;
	border-color:			red;
}

form input:focus{
	border-style:			solid;
	border-color:			red;
}

form div{
	margin-bottom:			10px;
}








video#bgvid { 
	width:100%;
	height:100%;
    position: fixed;
    top: 50%;
    left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
    z-index: -10;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-color: black;
    background-size: cover;

	position: absolute;
    left: 50%; /* % of surrounding element */
    top: 50%;
    transform: translate(-50%, -50%); /* % of current element */
	
}

.poet{
	display:				block;
	
}




#quizfrage{
	width: 80%;
	margin-left: 10%;
	text-align: left;
	/*margin-top: 180px;*/
	margin-bottom:100px;
	font-size:50px;
}

.quizdisplay{
	width:					80%; 
	margin-left:			10%;
	margin-bottom:			50px;
	border-width:			1px;
	border-style:			solid;
	border-color:			white;
	font-size:				40px;
	padding:				10px 20px;
}	
.quizdisplay div:nth-child(1){
	text-align:				left;
	width:					90%;
}	
.quizdisplay div:nth-child(2){
	text-align:				right;
	width:					10%;
	margin-left:			90%;
	margin-top:				-62px;
}	
	
.greenback{
	background-color:		green;
}
	
	
	
	
	
	
	
	
	
	
.fadein_1{
    -webkit-animation: 3s ease 0s normal forwards 1 fadein_1;
    animation: 3s ease 0s normal forwards 1 fadein_1;
}

.fadein_2{
    -webkit-animation: 6s ease 0s normal forwards 1 fadein_2;
    animation: 6s ease 0s normal forwards 1 fadein_2;
}

.fadein_3{
    -webkit-animation: 9s ease 0s normal forwards 1 fadein_5;
    animation: 9s ease 0s normal forwards 1 fadein_5;
}

.fadein_4{
    -webkit-animation: 12s ease 0s normal forwards 1 fadein_4;
    animation: 12s ease 0s normal forwards 1 fadein_4;
}

.fadein_5{
    -webkit-animation: 17s ease 0s normal forwards 1 fadein_5;
    animation: 17s ease 0s normal forwards 1 fadein_5;
}
	
@keyframes fadein_1{ /* 3 */
    0% { opacity:0; }
	75% { opacity:0; }
    100% { opacity:1; }
}

@keyframes fadein_2{ /* 6 */
    0% { opacity:0; }
    85.7142% { opacity:0; }
    100% { opacity:1; }
}	
	
@keyframes fadein_3{ /* 9 */
    0% { opacity:0; }
    90% { opacity:0; }
    100% { opacity:1; }
}	
	
@keyframes fadein_4{ /* 12 */
    0% { opacity:0; }
    92.3076% { opacity:0; }
    100% { opacity:1; }
}

@keyframes fadein_5{ /* 17 */
    0% { opacity:0; }
    94.4444% { opacity:0; }
    100% { opacity:1; }
}