@charset "UTF-8";

body {
	font-family: LibreFranklin, Open Sans, Arial, Helvetica, sans-serif !important;
	background-color: #1f1f1f;
	color: #f1f1f1;
	padding: 0;
	margin: 0;
	width: 100%;
	overflow-x: hidden;
	font-size: 12pt;
}

a {
	font-weight: bold;
	color: #0f0f0f;
}

h1, h2 {
	font-family: LibreFranklin, Open Sans, Arial, Helvetica, sans-serif !important;
	/*text-transform: uppercase;
	font-variant: small-caps;*/
	font-weight: normal;
}

h3 {
	text-align: center;
}

@media only screen and (min-width: 768px) {
	#head {
		padding-left: 0;
		padding-right: 0;
	}
}

#content {
	/* min-height: 480px; */
}

#content .container {
	background: #030305;
	background-image: url('../img/bgtile.jpg');
}

.btn {
	color: #cecece;
}

.btn-gold {
	background-color: #ad813a;
	border: 1px solid #ad813a80;
	box-shadow: 3px 5px 3px #ad813a80;
	color: white;
}

#content .container.gray, #content .container.gold {
	padding-top: 30px;
}

.container.gold {
	background-color: #ad813ac0;
}

.container.gray {
	background-color: #c0c0c0;
}

hr {
	margin-top: 0;
	margin-bottom: 0;
}

dl {
	margin-left: -15px;
	margin-right: -15px;
}

dd {
	display: none;
	margin-bottom: 20px;
	color: white;
}

dd .container {
	padding-bottom: 40px;
}

dd a {
	font-weight: normal;
	color: white;
}

dd a:hover, dd a:active, dd a:focus {
	color: white;
	text-decoration: underline;
}

dd a.active {
	font-weight: bold;
}

dt {
	margin-top: 10px;
}

dt h3 {
	 color: white;
	 font-weight: bold;
	 margin: 0;
	 padding: 10px;
}

h3 img.egg-left {
	margin: 0 30px 0 0;
}

h3 img.egg-right {
	margin: 0 0 0 30px;
}

dt.accordion-title.open {
	background: #ad813a;
}

dt.accordion-title {
	background: #ad813aa0;
}

dt a, dt a:hover, dt a:active, dt a:focus {
	text-decoration: none;
}

dd.accordion-content .container {
	background: #ede7d7 url('../img/fragen.jpg') center bottom no-repeat;
	box-shadow: inset 0px 10px 6px -5px rgba(0,0,0,0.75);
	min-height: 459px;
	color: black;
}

.form-control {
	border-radius: 0;
	border-width: 2px;
	color: #008e50;
}

.scoreboard {
	margin-top: 20px; 
	color: white; 
	display: inline-block; 
	padding: 10px 15px; 
	background: #ad813a;
	border: 1px inset #ad813a80;
	box-shadow: 3px 5px 3px #ad813a80;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	text-transform: uppercase;
	font-variant: small-caps;

	color: #0f0f0f !important;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
	text-transform: uppercase;
	font-variant: small-caps;

	color: #0f0f0f !important;
	opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	text-transform: uppercase;
	font-variant: small-caps;

	color: #0f0f0f !important;
}

.form-group a.prev, .form-group a.next {
	display: inline-block;
	width: 22px;
	min-height: 46px;
	height: 100%;
}


a.down {
	display: inline-block;
	width: 46px;
	min-height: 22px;

	background: url('../img/scrollpfeil-unten.png') center center no-repeat;
}

a.down:hover, a.down:active, a.down:focus {
	background: url('../img/scrollpfeil-unten-hover.png') center center no-repeat;
}

.form-group a.prev {
	margin-right: 10px;
	background: url('../img/NavPfeil-links.png') center center no-repeat;
}

.form-group a.prev:hover, .form-group a.prev:active, .form-group a.prev:focus {
	background: url('../img/NavPfeil-links-hover.png') center center no-repeat;
}

.form-group a.next {
	margin-left: 10px;
	background: url('../img/NavPfeil-rechts.png') center center no-repeat;
}

.form-group a.next:hover, .form-group a.next:active, .form-group a.next:focus {
	background: url('../img/NavPfeil-rechts-hover.png') center center no-repeat;
}

.form-group a.save .arrow {
	margin-left: 31px;
	background: url('../img/arrow-white.png') center center no-repeat;
	display: inline-block;
	width: 36px;
	height: 36px;
	vertical-align: middle;
}

.form-group a.save:hover .arrow, .form-group a.save:active .arrow, .form-group a.save:focus .arrow {
	background: url('../img/arrow-black.png') center center no-repeat;
}

.form-group a.save {
	border-radius: 8px;
	background: black;
	color: white;
	padding: 12px 4px 14px 14px;
}

.form-group a.saved, .form-group a.finished {
	border-radius: 8px;
	background: #808080;
	color: white;
	border: 1px solid white;
	padding: 11px 13px 13px 13px;
}

.form-group a.save:hover, .form-group a.save:active, .form-group a.save:focus {
	background: white;
	color: black;
}

.form-group label.quiz.question {
	margin: 20px 0;
	padding: 15px;
	background: white;
	height: auto;
	min-height: 75px;
	border-radius: 12px;
	border: 1px solid #ad813a;
	box-shadow: inset 3px 3px 6px 1px #404040;
	color: black;
	text-align: center;
	width: 537px;
	position: relative;
	margin-bottom: 20px;
}

a.disabled {
  cursor: not-allowed;
}

.question-nav.active {
	color: black;
}

a.question-nav {
  display: inline-block;
  padding: 0 3px;
}

.form-group {
	text-align: center;
	margin: 20px 0 0 0;
}

.form-group .radio-inline input {
	visibility: hidden;
}

.form-group label.quiz.answer {
	/*background: url('../img/Antwortenfeld.png') center center no-repeat;*/
	background-color: white;
	border-radius: 12px;
	border: 1px solid #ad813a;
	box-shadow: inset 2px 2px 6px 2px #404040;
	padding: 0px 18px;
	color: black;
	text-align: left;
	display: inline-block;
	width: 266px;
	min-height: 47px;
	margin: 10px 20px;
}

.form-group label.quiz.answer.disabled:hover {
	background-color: white;
	color: black;
/*  background: url('../img/Antwortenfeld.png') center center no-repeat;*/
}

.form-group label.quiz.answer:hover {
/*  	background: url('../img/Antwortenfeld-eingelogt.png') center center no-repeat;*/
	color: white;
	background-color: #ad813a;
	border: none;
	padding: 1px 19px;
}

.form-group label.quiz.answer.checked, .form-group label.quiz.answer.checked:hover {
/*  	background: url('../img/Antwortenfeld-eingelogt.png') center center no-repeat;*/
	color: white;
	background-color: #ad813a;
	border: none;
	padding: 1px 19px;
}

.form-group label.quiz.answer span {
    text-transform: uppercase;
	color: #ad813a;
	font-weight: bold;
    float: left;
    padding: 12px 10px 12px 0px;
}

.form-group label.quiz.answer:hover span, .form-group label.quiz.answer.checked span {
    text-transform: uppercase;
	color: black;
	font-weight: bold;
    float: left;
    padding: 12px 10px 12px 0px;
}

.form-group label.quiz.answer span.green {
	color: green;
  }
  
  .form-group label.quiz.answer span.red {
	color: red;
  }
  
  .form-group label.quiz.answer div {
/*
	line-height: 47px;
    display: inline-block;
    vertical-align: middle;
*/
	padding: 12px 0;
}
.form-group label.quiz.answer small {
  font-size: 100%;
  display: block;
  line-height: 1.4;
}

.form-control[type="checkbox"] {
	width: auto;
	display: inline;
	height: auto;
	margin: 6px;
}

.form-control.empty.empty-selected, .form-control.empty option:first-child {
	text-transform: uppercase;
	font-variant: small-caps;
	color: #43576a;
}

.form-control.empty.empty-selected option:not(:first-child) {
	text-transform: initial;
	font-variant: normal;
	color: #008eb0;
}

.form-error, label.error-message {
	border: 2px solid #e00000;
}

.error-message {
	font-weight: bold;
	font-size: 80%;
	color: #e00000;
}

.message.error {
	color: #e00000;
}

.message.success {
	color: #00e000;
}

div.headline {
    overflow: hidden;
    position: relative;
}

div.headline img.header {
    /*transform: translate(10%, 10%) scale(125%);*/
    animation: headlineImage 25s linear infinite;
}

@keyframes headlineImage {
    0% {
        transform: translate(0%, 0%) scale(100%);
    }
    20% {
        transform: translate(0%, 5%) scale(125%);
    }
    40% {
        transform: translate(0%, 7%) scale(133%);
    }
    60% {
        transform: translate(0%, 10%) scale(150%);
    }
    80% {
        transform: translate(0%, 9%) scale(150%);
    }
    100% {
        transform: translate(0%, 0%) scale(100%);
    }
}

div.headline div {
    position: absolute;
    top: 20%;
    left: 0%;
	color: white;
	font-size: 3.5em;
	text-align: center;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.8);
	font-weight: bold;
	width: 100%;
	text-transform: uppercase;
}


@media only screen and (max-width: 992px) {
    div.headline div {
        top: 15%;
    }
}

@media only screen and (max-width: 768px) {
    div.headline div {
        top: 10%;
		font-size: 2.25em;
		line-height: 1;
    }
}

.white {
	color: white !important;
}

.black {
	color: black !important;
}

.golden {
	color: #ad813a !important;
}

@media only screen and (min-width: 768px) {
	.bx-viewport {
		margin-bottom: -50px;
	}
}