@import url('https://fonts.googleapis.com/css2?family=Acme&family=Noto+Sans&display=swap');


body{
	background-color: black;
	font-family: 'Acme', sans-serif;
	color:#c89e65;
	font-size: 22px;
}

a{
	color: #8f6f46;
}

a:hover{
	color: #c89e65;
}

.smalltext{
	font-size: 15px;
}


.path-frontpage .block-page-title-block{
	display: none;
}

.meincontainer{
	text-align: center;
}

.genius{
		font-family: 'Acme', sans-serif;
	font-size: 36px;
}
.gamecontainer{
		position: relative;
		width: 1920px;
	height: 1080px;
	
}
.gamecontainer{
			width: 1920px;
	height: 1080px;
	position: relative;
	width: 100%;
	height: auto;
	background-color: #0047BB;
}

.image_set{
	position: absolute;
	top: 0px;
	left:0px;
	width: 100%;
	height: auto;
}

.placeholder{
	    position:relative;
     visibility: hidden;
}

.stage_1, .stage_2, .stage_3{
		opacity: 0;
		transition: all 3s;
}

.stage_1.active, .stage_2.active, .stage_3.active{
		opacity: 1;
}


.toactivate{
	opacity: 0;
}

.toactivate.active{
	opacity: 1;
}


.hoverobjekt{
	position: absolute;
opacity: 0;
	height: auto;
	transition: opacity 0.8s;
}

.hoverobjekt.active:hover{
	visibility:visible;
	opacity: 1;
}
.hoverobjekt.active.shine{
	visibility:visible;
	opacity: 1;
}

/*User Interface*/


.toast {
    position: absolute;
		top: 24%;
    right: 15%;
    z-index: 10000;
	width: 14%;
		background-color: rgba(255, 255, 255, 1);
/*	animation: float 6s ease-in-out infinite;*/
}

.toast-header{
	text-align: right;
	display:block;
	padding: 10px 10px 1px 1px;
	border-bottom:none;
	background-color: rgba(255, 255, 255, 0);
	z-index: 	1001;
	height: 25px;
}
.toast-body{
	position:sticky;
	z-index: 	1002;
	font-size: 18px;
    padding-top: 0px;
}


.toast .btn-close{
    margin: unset;
    width: 17px;
    height: 17px;
    background: transparent url(/themes/custom/b5biblio2030/img/icons_small/ICONS_X_only.png) center/15px auto no-repeat;
}

.right-point{
    width: 0;
    height: 0;
    border-left: 1vh solid transparent;
    border-right: 1vh solid transparent;
    border-top: 10vh solid #FFFFFF;
    position: absolute;
    top: 24%;
    right: 3%;
    transform: rotate(-60deg);
    z-index: 999;

}


#fullscreen_icon{
	position: absolute;
	width: 5%;
	top: 3%;
	right: 2%;
	z-index: 10400;
}

#sound_icon{
	position: absolute;
	width: 5%;
	top: 3%;
	right: 8%;
	z-index: 10400;
}



#infobutton{
	position: absolute;
	width: 5%;
bottom: 3%;
left: 8%;
	z-index: 410;
}

#zurueckbutton{
	position: absolute;
	width: 5%;
bottom: 3%;
left: 2%;
	z-index: 410;
}


.punktestand{
	position: absolute;
	width: 20%;
	right: 2%;
	bottom: 3%;
	transition: all 3s;
}

.punktestand{
	opacity: 0;
}

.punktestand.active,  .punktestand.base {
	opacity: 1;
}
.punktestand.base {
transition: all 0s;
}


#gluehwurmchen{
    position: absolute;
    width: 16%;
    bottom: 17%;
    right: 0%;
    z-index: 10399;
				animation: float 6s ease-in-out infinite;
}

#gluehwurmchen.crazy{
	
/*
	width: 11%;
  bottom: 35%;
  right: 45%;
*/
	z-index: 10001;
	animation: float 0.8s ease-in-out infinite
}

/*Animation effects*/
@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-30px);
	}
	100% {
		transform: translatey(0px);
	}
}

@keyframes crazyfloat {
	0% {
		transform: translatey(0px) rotate(0deg);
	}
  15% {
		transform: translatey(-5px) rotate(5deg);
	}
	50% {
		transform: translatey(-10px) rotate(0deg);
	}	
	75% {
		transform: translatey(-5px) rotate(-5deg);
	}
	100% {
		transform: translatey(0px) rotate(0deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(360deg);
	}
}
#preloader.dark{
	display: block;
	background-color:rgb(0,0,0);
	opacity: 1;
	z-index: 10000;
}

#preloader{
	position: fixed;
	width: 100%;
	height:100%;
	background-color:rgb(0,0,0);
	opacity: 0;
	transition: opacity ease-out 1s;
}

#preloader.inThaBack{
	z-index: 0;
}


#preloader.active{
	z-index: 10000;
	display:block;
	opacity: 0.4;
}

.modal{
	color: #c89e65;
	position: absolute;
	background: rgba(0,0,0,0.2);

}

.modal-content {
	background-color: rgba(0,0,0,0);
		background-image: url(/themes/custom/b5biblio2030/img/bg_modal_small.png);
	background-image: url(/themes/custom/b5biblio2030/img/icons_small/bg_big.png);
	background-repeat: no-repeat;
  background-size: 100% 100%;
	border-radius:0px;
	border:none;
/*
	left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
*/
}

.modal-header, .modal-footer{
  border: none;
	margin: 15px 15px 15px 25px;
}


.modal-title {
    font-size: 30px;
}

.modal-body{
/*	font-family: 'Noto Sans', sans-serif;*/
	text-align: left;
	padding: 10px 40px;
}



.btn-close, .ui-dialog .ui-dialog-titlebar-close {
    box-sizing: content-box;
    width: 76px;
    height: 76px;
    padding: 0px !important;
    color: #000;
    background: transparent url(/themes/custom/b5biblio2030/img/icons_small/ICONS_X.png) center/60px auto no-repeat;
				opacity: 0.8;
}

.btn-bibliogame{
	color: #c89e65;
	background: transparent url(/themes/custom/b5biblio2030/img/icons_small/btn.png);
	background-size: 100% 100%;
	background-repeat:no-repeat;
 padding: 0.5em 1.2em;
 font-size: 20px;
}

#ansvercontainer{
	margin-left: 23px;
}



/* QUESTION STYLING */

/*Multiple Choice*/

ul.choices>li::marker{
	display: none;
	content: '';
}
ul.choices{
	list-style-type: none;
}


.choices input[type="checkbox"], .choices input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
		margin-left: -17px;
}


.choices input[type=checkbox]:checked + .label {
  background: #f00; 
  color: #fff;
  background-image: url("/themes/custom/b5biblio2030/img/icons_small/ICONS_CHECKBOX_checked.png");
}

.choices span{
  padding-left: 7px;
}

.field--name-field-tipp{
	display: none;
}


/*Richtig Falsch*/

.field--name-field-ist-richtig {
	display: none;
}

.node--type-richtig-falsch-frage .form-check-label{
	margin-right:30px;}


.form-check-input:checked {
background-color: #c89e65;
border-color: #c89e65;
}


/* Verbinden */

.verbinden{
	width: 45%;
	display: inline;
}


.preselected{
		background-color: rgb(201,158,101,0.5);
}

.paragraph--type--wortpaare{
	margin-bottom: 10px;
}

.btn-outline-warning{
	color:#c89e65;
	border-color: #c89e65;
}

.btn-outline-warning:hover{
	background-color: #c89e65;
}


	.btn-outline-warning.disabled {
    opacity: 0.5;
    border-color: #9fc500;
    color: #9fc500;
    background-color: rgba(159, 197, 0,0.1);
}

/*SORT*/


#sortAnsvers h4{
	display: none;
}

.sort{
	margin-left: none !important;
	margin-bottom: 20px;
}

/* effects */

.ui-effects-transfer { border: 2px dotted gray; }


.blacksquare{
		position: absolute;
	top: 0px;
	left:0px;
	width: 100%;
	height: auto;
}


.node--type-sort-frage .btn {
    margin: 0;
    margin-bottom: 15px;
}
.node--type-sort-frage .btn-outline-warning{
	width: 100%;
}


/*Opening Screen*/

#titlebox{
    z-index: 388;
    position: absolute;
    width: 98%;
    top: 20%;

}


#title_main{
font-size: 161px;
color: #294060;
text-shadow: 1px 1px 40px rgba(253, 253, 54, 0.5), 1px 1px 26px rgba(253, 253, 54, 0.5);
text-shadow: 1px 1px 40px rgba(237, 188, 123, 0.9), 1px 1px 26px rgba(237, 188, 123, 0.9);
rotate: -5deg;
		 
}


#subtitle_main{
text-shadow: 1px 1px 40px rgba(41, 64, 96, 0.9), 1px 1px 26px rgba(41, 64, 96, 0.9);
font-size: 32px;
rotate: 1deg;
margin-bottom: 37px;
}


#logo_opener{
	position: absolute;
	width: 16%;
	height: auto;
	z-index: 1000;
	left: 2%;
	bottom: 2%;
}


.logo_opener_img{
	width: 100%;
}

 .shadowfilter {
        -webkit-filter: drop-shadow(0px 0px 2px rgba(253, 253, 253, 0.9)) drop-shadow(0px 0px 4px rgba(253, 253, 253, 0.9));
         filter: drop-shadow(0px 0px 2px rgba(253, 253, 253, 0.9)) drop-shadow(0px 0px 4px rgba(253, 253, 253, 0.9));
	 transition: all ease-in-out 0.2s;
    }
 .shadowfilter:hover {
        -webkit-filter: drop-shadow(0px 0px 4px rgba(253, 253, 253, 0.9)) drop-shadow(0px 0px 6px rgba(253, 253, 253, 0.9));
         filter: drop-shadow(0px 0px 4px rgba(253, 253, 253, 0.9)) drop-shadow(0px 0px 6px rgba(253, 253, 253, 0.9));
    }

.hideoutsideinputs .base , .hideoutsideinputs #zurueckbutton, .hideoutsideinputs #infobutton {display: none;}

#gluehwurmchen{
	transition: opacity 1s linear;
	opacity: 1;
}
.hideglueh #gluehwurmchen{opacity: 0;}


#lilutext1{
	position: absolute;
	top: 20%;
	left:29%;
	text-align: left;
z-index: 100000;
width: 40%;
	font-size: 39px;
	opacity: 0;
transition: opacity 1s linear;
}

#lilutext2{
text-align: left;
position: absolute;
top: 35%;
left: 29%;
z-index: 100000;
width: 50%;
font-size: 29px;
opacity: 0;
transition: opacity 1s linear;
}

#lilutext1.active, #lilutext2.active, #lilutext3.active, #lilutext4.active, #lilutext5.active{
	opacity: 1;
}


.bg_textintro{
	visibility: visible;
	z-index: 10000;
	opacity: 0.5
}


.bg_intro{
	opacity: 0.5;
}

#logo_sdsn{
	width: 25%;
}

#selectGerman, #selectFrench, #selectItalian{
		font-size: 30px;
}
#readtheintro{
	font-size: 30px;
	margin:0;
}



.abschlussscreen{
	visibility: visible;
	z-index: 10000;
	opacity: 1;
}

#lilutext3{
		position: absolute;
	top: 17%;
	right:20%;
	text-align: left;
z-index: 100000;
width: 40%;
	font-size: 30px;
	background-color: #294060;
	opacity: 0;
	padding: 34px;
border-radius: 57px;
transition: opacity 1s linear;
}

#lilutext4{
	text-align: center;
color: #294160;
    position: absolute;
    bottom: 5%;
    left: 5%;
    z-index: 100000;
    width: 27%;
    font-size: 25px;
    background-color: #c99e65;
    opacity: 0;
    padding: 28px;
    border-radius: 40px;
    transition: opacity 1s linear;
}
#lilutext5{
    text-align: center;
    color: #294160;
    position: absolute;
    bottom: 5%;
    right: 20%;
    z-index: 100000;
    width: 27%;
    font-size: 25px;
    background-color: #c99e65;
    opacity: 0;
    padding: 10px;
    border-radius: 30px;
    transition: opacity 1s linear;
	display: none;
}

#sdsnend{
	margin-top: 5%;
height: auto;
    width: 70%;
}

.right-point2{
width: 0;
height: 0;
border-left: 2vh solid transparent;
border-right: 2vh solid transparent;
border-top: 17vh solid #294060;
position: absolute;
top: 24%;
right: -12%;
transform: rotate(-67deg);
}


#againfromthestart{
	font-size: 30px;
	margin: 0 20px 0 0;
}


.sdgcontainer{
  display: none;
}

.sdgcontainer.active{
  display: block;
}

.sdgcontainer img{
width: 62px;
    margin-right: 10px;
    display: inline;
    transition: all 0.2s ease-out;
}

.sdgcontainer .field--name-field-icon, .sdgcontainer .field--name-field-icon-fr, .sdgcontainer .content, .sdgcontainer .taxonomy-term , .sdgcontainer .field__item {
display: inline-block;
width: auto;
}

.sdgcontainer .field--name-name{
  display: none;
}


.sdgcontainer img:hover{
/*  width: 200px;*/
  transform: scale(3);
}

/* Korrekturen aus dem Dok*/

.view-id-singlequestion .field--name-title, .field--name-title {
	display: none;
} 

/* Social media sharer*/

.sharingicon{
	margin: 10px;
	width: 40px;
}

/* Responsiveness und Mobilescreen */


@media screen and (max-width: 1400px) {
	
	#lilutext3 {
    font-size: 22px;
		}	
	
	#lilutext2 {
    font-size: 25px;
		}
	
		#selectGerman, #selectFrench, #selectItalian {
		    font-size: 25px;
			padding: 0.2em 0.8em;
	}
		
	body{
		 font-size: 21px;
	}
	   
}


@media screen and (max-width: 1200px) {

#lilutext1,#lilutext2 {
    left: 15%;
	width: 60%;
	}
	
	#lilutext2 {
        font-size: 18px;
	}
	
	body{
		 font-size: 18px;
	}
	   
	

	
	
}



#mobilehinweis{display: none;}

@media screen and (max-width: 900px) {
	
	
	html, body {margin: 0; height: 100%; overflow: hidden}
	
#languagebuttons, #sound_icon,#fullscreen_icon,#subtitle_main, .placeholder,#preloader{
	display: none;
}
	#titlebox {
    z-index: 388;
    position: absolute;
    width: 90%;
    left: 5%;
    margin-top: 10vh;
}
	#title_main {
		font-size: 70px;
	text-shadow: 1px 1px 11px rgba(253, 253, 54, 0.5), 1px 1px 26px rgba(253, 253, 54, 0.5);
text-shadow: 1px 1px 11px rgba(237, 188, 123, 0.9), 1px 1px 26px rgba(237, 188, 123, 0.9);
	}
	
	#mobilehinweis{
		display: block;  
		margin-top: 5vh;
		font-size: 16px;
	}
	

.image_set {
    position: absolute;
    top: 0px;
    left: -100%;
     width: unset;
    height: 100vh;

}

#logo_opener {
    position: absolute;
    width: 50%;
    /* height: 5%; */
    z-index: 1000;
    left: 25%;
    top: 90vh;
}
	
	.shadowfilter {
    -webkit-filter: drop-shadow(0px 0px 1px rgba(253, 253, 253, 0.9)) drop-shadow(0px 0px 3px rgba(253, 253, 253, 0.9));
    filter: drop-shadow(0px 0px 1px rgba(253, 253, 253, 0.9)) drop-shadow(0px 0px 3px rgba(253, 253, 253, 0.9));
	
	}
	
	
}



.field--name-field-icon-it .field__label{
	display: none;
}