* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}
html, body {
	height: 100%;
	}
body {
	display: flex;
	flex-direction: column;
	background-image: url(/public/upload/assets/178/body-bg.png);
	}

body.intro {
	background-repeat: no-repeat;
	background-size: cover;
	}

body.intro.cover-football {
	background-image: url(/public/upload/assets/183/intro-bg-football.jpg);	
	}
body.intro.cover-climb {
	background-image: url(/public/upload/assets/180/intro-bg-climb.jpg);	
	}
body.intro.cover-motocross {
	background-image: url(/public/upload/assets/184/intro-bg-moto.jpg);	
	}
body.intro.cover-volleyball {
	background-image: url(/public/upload/assets/185/intro-bg-volley.jpg);	
	}

#header, #footer {
	display: flex;
	align-items: center;
	}

/* =header
--------------------------------------------------------------- */
header {
	position: relative;
	padding: 30px;
	background-color: #fff;
	}
.intro header {
	background-color: #fff;
	background-color: rgba(255,255,255,0.9);
	}
header:after {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 50%;
	width: 80%;
	margin-left: -40%;
	height: 30px;
	border-radius: 50%;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	}
.intro header:after {
	display: none;
	}
header h1, header h2 {
	margin: 0;
	}
header h2 {
	margin-left: 30px;
	font-size: 1.88rem;
	text-align: right;
	color: #7e7e7e;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	flex: 1 auto;
	}
#logo img {
	display: block;
	max-width: none;
	}

/* =content
--------------------------------------------------------------- */
#content {
	position: relative;
	padding: 30px 30px 0 30px;
	overflow: auto;
	flex: 1 auto;
	color: #5d5d5d;
	text-shadow: 0 1px 0 #fff;
	}
.intro #content {
	padding: 0;
	overflow: hidden;

	display: flex;
	align-items: center;
	justify-content: center;
	}
.modal-content {
	position: relative;
	border: 5px solid #fff;
	border-radius: 3px;
	padding: 20px;
	background-color: #f08700;
	box-shadow: 0 5px 20px rgba(0,0,0,0.1);
	}
.modal-content::after {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 50%;
	width: 80%;
	margin-left: -40%;
	height: 30px;
	border-radius: 50%;
	box-shadow: 0 0 30px 20px rgba(0,0,0,1);
	}
.modal-content h3 {
	margin-bottom: 1rem;
	color: #fff;
	font-size: 1.5rem;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
	font-weight: normal;
	font-style: normal;
	}
.modal-content input, .modal-content select {
	display: block;
	width: 100%;
	margin-bottom: 1rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
.modal-content select, #register-message {
	margin-bottom: 1rem;
	}
.modal-content .close {
	position: absolute;
	top: -17px;
	right: -17px;
	}
.modal-content .close a {
	width: 30px;
	height: 30px;
	border: 3px solid #fff;
	border-radius: 100%;
	text-indent: -9999px;
	background-color: #000;
	display: block;
	background: #000 url(/public/upload/assets/181/btn-close.png) no-repeat center center;
	}
.modal-content .close a:active {
	position: relative;
	top: 1px;
	}
#shout-intro {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -20px;
	width: 402px;
	height: 411px;
	margin-top: -205px;
	text-indent: -9999px;
	background: url(/public/upload/assets/188/shout-intro.png) no-repeat left top;
	pointer-events: none;
	}
.btn {
	padding: 0.2em 2em;
	color: #fff;
	border-radius: 5em;
	background-color: #009cdd;
	background-image: linear-gradient(#009cdd, #0075a5);
	font-size: 1.13rem;
	text-decoration: none;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
	}
.btn[disabled] {
	cursor: default;
	background-color: #c8c8c8;
	background-image: linear-gradient(#c8c8c8, #8a898a);
	}
.intro .btn {
	position: absolute;
	margin-left: -25% !important;
	bottom: -1.2em;
	left: 50%;
	width: 50%;
	height: 2.3em;
	}
.btn:active {
	box-shadow: inset 0 2px 2px rgba(0,0,0,0.5);
	}
.btn[disabled]:active {
	box-shadow: none;
	}
.start-end {
	width: 59.5%;
	}
.start-end h2 {
	font-size: 4.5rem;
	}
.start-end p {
	font-size: 3rem;
	margin-bottom: 0.7em;
	}
.start-end p:last-child {
	margin-bottom: 0;
	}

.question .btn, #btn-startgame {
	position: absolute;
	right: 30px;
	bottom: 30px;
	}
.question-text {
	width: 74%;
	}
.question-text p {
	margin-bottom: 0.75rem;
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 1px;
	}
.question-text h2 {
	margin-bottom: 1.4rem;
	font-size: 1.5rem;
	}
.question ul, .question ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	}
span.img-onerow {
	float: left;
	max-width: 48.310810810811%; /* 429 / 888 */
	margin-right: 3.378378378378%;
	}
ul.question-answers, .wrapper-onerow {
	width: 74%;
	}
ul.question-answers.question-onerow {
	max-width: 48.310810810811%; /* 429 / 888 */
	float: left;
	}
ul.question-answers li {
	position: relative;
	float: left;
	width: 48.310810810811%; /* 429 / 888 */
	}
ul.question-answers.question-onerow li {
	float: none;
	width: auto;
	margin: 0 0 3.378378378378% 0 !important;
	}
ul.question-answers li:nth-child(odd) {
	margin: 0 3.378378378378% 0 0; /* 30 / 888 */
	}
ul.question-answers li:first-child {
	margin-bottom: 3.378378378378%;
	}
ul.question-answers li a, ul.question-answers li.nolink span {
	display: block;
	width: 100%;
	height: 100%;
	padding: 15px;
	border: 3px solid #c1c1c1;
	border-radius: 3px;
	color: #5d5d5d;
	text-decoration: none;
	background-color: #fff;
	}
ul.question-answers li a:hover, ul.question-answers li a:focus {
	color: #000;
	border-color: #a0a0a0;
	}
ul.question-answers li.active a {
	color: #000;
	border: 5px solid #f08600;
	padding: 13px;
	}
ul.question-answers li.active:after {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 50%;
	width: 80%;
	margin-left: -40%;
	height: 30px;
	border-radius: 50%;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	}
.question ul li img {
	display: block;
	margin: 0 auto;
	}
ul.question-answers li input {
	outline: 0;
	display: block;
	width: 100%;
	margin: 0;
	border: 3px solid #f08600;
	}
ul.question-answers li input:after {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 50%;
	width: 80%;
	margin-left: -40%;
	height: 30px;
	border-radius: 50%;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	}


/* =footer
--------------------------------------------------------------- */
footer {
	position: relative;
	padding: 30px;
	padding-bottom: 20px;
	text-align: center;
	color: #fff;
	background-color: #f08700;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
	}
.intro footer {
	align-items: center;
	}
footer:after {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 50%;
	width: 80%;
	margin-left: -40%;
	height: 30px;
	border-radius: 50%;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	}
.intro footer:after {
	box-shadow: 0 0 15px rgba(0,0,0,1);
	}
p.intro-note {
	margin: 0;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 3.13rem;
	}
.progress-wrapper {
	flex: 1 auto;
	margin-right: 30px;
	}
.progress-wrapper p {
	margin: 0;
	line-height: 1.9em;
	font-size: 1.125rem;
	}
.progress-bar {
	height: 2.5em;
	border-radius: 2em;
	box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
				0 1px 0 rgba(255,255,255,1);
	background-color: #c8c8c8;
	background-image: linear-gradient(#c8c8c8, #e6e6e6);
	overflow: hidden;
	}
.progress {
	height: 2.5em;
	box-shadow: inset -1px 0 0 rgba(0,0,0,0.1);
	background-color: #3ed835;
	background-image: linear-gradient(#3ed835, #2da228);
	width: 0;
	transition: width 1s ease;
	}
.timer {
	text-align: center;
	}
.timer time {
	display: block;
	font-size: 3.5rem;
	line-height: 2.9rem;
	}

/* =modal overlay
--------------------------------------------------------------- */
.overlay {
	display: none;
	position: absolute;
	z-index: 1000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(rgba(254, 253, 255, 0.80), rgba(0, 0, 0, 0.80));
		
	display: flex;
	align-items: center;
	justify-content: center;
	}
.overlay .login {
	position: relative;
	width: 33%;
	}
#shout-oot {
	position: absolute;
	z-index: 1;
	top: -135px;
	right: -190px;
	width: 460px;
	height: 189px;
	text-indent: -9999px;
	background: url(/public/upload/assets/190/shout-out-of-time.png) no-repeat left top;
	}
.shout-finished {
	position: absolute;
	z-index: 1;
	top: -135px;
	right: -190px;
	width: 427px;
	height: 168px;
	text-indent: -9999px;
	background: url(/public/upload/assets/189/shout-finish.png) no-repeat left top;
	}
#result-content {
	width: 40%;
	}
#result-content .btn {
	position: absolute;
	left: 50%;
	margin-left: -25% !important;
	width: 50%;
	}
.start-end {
	float: left;
	}
.advertise {
	float: right;
	width: 30%;
	}
#gameform {
	
	}

/* =highscrores
--------------------------------------------------------------- */
.highscrores {
	font-size: 1.5rem;
	}
.highscrores h1 {
	margin-bottom: 0.75em;
	font-size: 2.5rem;
	color: #009ddf;
	text-transform: uppercase;
	letter-spacing: 1px;
	}
.highscrores h2 {
	margin-bottom: 0.75em;
	font-size: 1.8rem;
	border-bottom: 1px solid #7e7e7e;
	box-shadow: 0 1px 0 #fff;
	}
.highscrores ol {
	list-style-type: decimal;
	}
.highscrores p {
	font-size: 1rem;
	}
.highscrore-lst {
	width: 46%;
	float: left;
	}
.highscrore-oberstufe {
	float: right;
	}