body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
.cookieInfo { padding: 10px; background: #999; color: #fff; }
.cookieInfo input { float: right; }
.info { background: #9f9; color: #090; border: 1px solid #090; text-align: center; padding: 5px; }
.error { background: #f99; color: #900; border: 1px solid #900; text-align: center; padding: 5px; }
#a4u-content { padding-bottom: 20px }
.optional {}
.mobile {}
@media all and (max-width: 768px){ .optional { display: none } }
@media all and (min-width: 768px){ .mobile { display: none } }
.widthFix { max-width: 1000px; margin: auto; }

footer {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #717171;
	text-align: center;
	border-top: 1px solid #CECECE;
	padding: 10px 0 40px;
}

#view_loading { transition-duration: 0.2s; }
.page table { width: 100%; height: 100vh; }
.page table td { text-align: center; vertical-align: middle; }

.page { min-height: 100vh }
.page-first { background: url(images/qbg.jpg); background-size: cover; margin: 0px; font-family: 'Roboto', sans-serif; text-align: center; }
.page-first .btn { display: block; background: rgba(0,0,0,0.8); margin: auto; margin-bottom: 10px; width: 90%; max-width: 1000px; color: #fff; padding: 50px; border-radius: 0px 500px; font-size: 50px; text-decoration: none; }
@media all and (min-width: 800px){
	.page-first .btn2cnt { max-width: 1000px; margin:  auto; overflow: auto;}
	.page-first .btn2 { font-size: 20px; width: 30%; padding: 30px; float: right;}
}
@media all and (max-width: 800px){
	.page-first .create { font-size: 20px; padding: 30px; }
}

/* lobby */
.title { font-size: calc(100vw / 10); }
input.big2 { width: 75%; max-width: 1000px; padding: 50px; border-radius: 0px 500px; font-size: 30px; background: rgba(255,255,255,0.8); text-align: center; margin-bottom: 10px; }
select.big2 { width: 75%; max-width: 1000px; padding: 50px; border-radius: 0px 500px; font-size: 50px; background: rgba(255,255,255,0.8); text-align: center; margin-bottom: 10px; }

/* qr and wait players */
.createCode { font-size: 90px; text-shadow: 0px 0px 1px #fff; }
.connectedInfo { font-size: 5vw; }

/* game */
.question { text-align: center; font-size: 40px; background: rgba(255,255,255,0.8); height: 10vh; display: table; width: 100%; }
.question div { display: table-cell; vertical-align: middle; }
.answers { background: rgba(255,255,255,0.8); overflow: auto; height: 20vh }
.answer { float: left; width: calc(50% - 20px); text-align: center; background: #aaa; font-size: 20px; padding: 10px; margin: 10px; transition-duration: 0.5s }
.display .answer { height: 5vh; }
.answer.big { height: calc( 50vh - 20px ); line-height: calc( 50vh - 20px ) }
.timer { font-size: 40px; position: absolute; background: #fff; top: 0px; left: 0px;  }
.status { font-size: 40px; position: absolute; background: #fff; top: 0px; right: 0px; }
.askImage { text-align: center; background: #333; padding: 25px; height: 70vh }
.askImage img { margin: auto; max-width: calc(100vw - 50px); max-height: calc(70vh - 50px) }

.rightAnswer { background: #0f0; transition-duration: 0.2s; }
.wrongAnswer { background: #f00; transition-duration: 0.2s; }

.dplay_roomNr { float: right; }


.placeNr { background: #fff; margin-top: 50px; text-align: left; font-size: 50px }