#but {
  background: url("pic.png") no-repeat scroll 0 0 transparent;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: #000033;
  height: 71px;
  width: 78px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  font-size: 22px;
}
 
#but:hover {
  margin: -2px;
  height: 64px;
  width: 204px;  
  cursor: pointer;
}


#centerframe{
  position: relative;
  height: 601px;
  width: 801px;
  left: 50%;
  margin-left: -400px;
  background: white;
  border-color: white;
  border-width: 3px;
  border-style: solid;
  
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None;
}
}

.pp{
  fontsize: .8em;
  color: #FFF;
  position: absolute;
  left: 4px;
  top: -26px;
}

.schriftweiss{
  color: #FFF;
  font-size: 22px;
  border-radius: 12px;
}

.pngbild{
  position: absolute;
  border: none;
}

.pnormal{
  font-family: Arial, Helvetica, sans-serif;
}
.bogen{
	width: 18px;
	height: 40px;
	vertical-align: middle;
}

.colordiv{
  position: absolute;
  border: none;
  z-index: 30;
}


/* fadinglinetop  Image: Verhalten, Aussehen, Lage*/
#fadinglinetop{
  visibility: visible;
  left: 0px;
  top: 527px;
  width: 800px;
  height: 2px;
  background-color: #808080;
}

/* fadinglinebut  Image: Verhalten, Aussehen, Lage*/
#fadinglinebut{
  visibility: visible;
  left: 0px;
  top: 72px;
  width: 800px;
  height: 2.33333325386047px;
  background-color: #808080;
}

/* picture1  Image: Verhalten, Aussehen, Lage*/
#picture1{
  visibility: visible;
  left: 304px;
  top: 0px;
  width: 313px;
  height: 65px;
  background-color: #FFFFFF;
}

/* optbu0  Verhalten, Aussehen, Lage*/
#optbu0{
  visibility: visible;
  background: url("../pic/sabado/optbu.bmp") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 48px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 97px;
  height: 65px;
  background-color: #808080;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* optbu0  Verhalten bei :hover*/
#optbu0:hover {
  margin: -2px;
  width: 101px;
  height: 69px;
  cursor: pointer;}
/*
*/

/* optbu1  Verhalten, Aussehen, Lage*/
#optbu1{
  visibility: visible;
  background: url("../pic/sabado/optbu.bmp") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 48px;
  position: absolute;
  left: 104px;
  top: 0px;
  width: 97px;
  height: 65px;
  background-color: #808080;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* optbu1  Verhalten bei :hover*/
#optbu1:hover {
  margin: -2px;
  width: 101px;
  height: 69px;
  cursor: pointer;}
/*
*/

/* optbu2  Verhalten, Aussehen, Lage*/
#optbu2{
  visibility: visible;
  background: url("../pic/sabado/optbu.bmp") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 48px;
  position: absolute;
  left: 208px;
  top: 0px;
  width: 97px;
  height: 65px;
  background-color: #808080;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* optbu2  Verhalten bei :hover*/
#optbu2:hover {
  margin: -2px;
  width: 101px;
  height: 69px;
  cursor: pointer;}
/*
*/


/* optbu3  Verhalten, Aussehen, Lage*/
#optbu3{
  visibility: visible;
  background: url("../pic/sabado/optbu.bmp") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 48px;
  position: absolute;
  left: 312px;
  top: 0px;
  width: 97px;
  height: 65px;
  background-color: #808080;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* optbu2  Verhalten bei :hover*/
#optbu3:hover {
  margin: -2px;
  width: 101px;
  height: 69px;
  cursor: pointer;}
/*
*/


/* imgrtf  Verhalten, Aussehen, Lage*/
#stern{
  visibility: visible;
  background: url("../pic/stern.png") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 48px;
  position: absolute;
  left: 592px;
  top: 536px;
  width: 65px;
  height: 65px;
  background-color: #808080;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* imgrtf  Verhalten bei :hover*/
#stern:hover {
  margin: -2px;
  width: 69px;
  height: 69px;
  cursor: pointer;}
/*
*/

/* imghilfekind  Verhalten, Aussehen, Lage*/
#imghilfekind{
  visibility: visible;
  background: url("../pic/video_quest.png") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 48px;
  position: absolute;
  left: 664px;
  top: 536px;
  width: 65px;
  height: 65px;
  background-color: #808080;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* imghilfekind  Verhalten bei :hover*/
#imghilfekind:hover {
  margin: -2px;
  width: 69px;
  height: 69px;
  cursor: pointer;}
/*
*/

/* imgende  Verhalten, Aussehen, Lage*/
#imgende{
  visibility: visible;
  background: url("../pic/zurueck.png") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 48px;
  position: absolute;
  left: 736px;
  top: 536px;
  width: 65px;
  height: 65px;
  background-color: #808080;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* imgende  Verhalten bei :hover*/
#imgende:hover {
  margin: -2px;
  width: 69px;
  height: 69px;
  cursor: pointer;}
/*
*/

/* cmdok  Verhalten, Aussehen, Lage*/
#cmdok{
  visibility: visible;
  background: url("../pic/coach.png") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 48px;
  position: absolute;
  left: 736px;
  top: 0px;
  width: 65px;
  height: 65px;
  background-color: #FF3136;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* cmdok  Verhalten bei :hover*/
#cmdok:hover {
  margin: -2px;
  width: 69px;
  height: 69px;
  cursor: pointer;}
/*
*/

/* optstern1  Verhalten, Aussehen, Lage*/
#optstern1{
  visibility: visible;
  background: url("../pic/stern1.png") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 40px;
  position: absolute;
  left: 1px;
  top: 0px;
  width: 65px;
  height: 65px;
  background-color: #FF3136;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* optstern1  Verhalten bei :hover*/
#optstern1:hover {
  margin: -2px;
  width: 69px;
  height: 69px;
  cursor: pointer;}
/*
*/

/* optstern2  Verhalten, Aussehen, Lage*/
#optstern2{
  visibility: visible;
  background: url("../pic/stern2.png") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 40px;
  position: absolute;
  left: 73px;
  top: 0px;
  width: 65px;
  height: 65px;
  background-color: #FF3136;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* optstern2  Verhalten bei :hover*/
#optstern2:hover {
  margin: -2px;
  width: 69px;
  height: 69px;
  cursor: pointer;}
/*
*/

/* optstern3  Verhalten, Aussehen, Lage*/
#optstern3{
  visibility: visible;
  background: url("../pic/stern3.png") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 40px;
  position: absolute;
  left: 145px;
  top: 0px;
  width: 65px;
  height: 65px;
  background-color: #FF3136;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* optstern3  Verhalten bei :hover*/
#optstern3:hover {
  margin: -2px;
  width: 69px;
  height: 69px;
  cursor: pointer;}
/*
*/

/* optstern4  Verhalten, Aussehen, Lage*/
#optstern4{
  visibility: visible;
  background: url("../pic/stern4.png") no-repeat scroll 0 0 transparent;
  background-size: cover;
  background-position: center;
  background-size: 40px;
  position: absolute;
  left: 217px;
  top: 0px;
  width: 65px;
  height: 65px;
  background-color: #FF3136;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  z-index: 60;
}
/* optstern4  Verhalten bei :hover*/
#optstern4:hover {
  margin: -2px;
  width: 69px;
  height: 69px;
  cursor: pointer;}
/*
*/


/* lblrichtig3  Label: Textgröße, Textart, Aussehen, Lage*/
#lblrichtig3{
  visibility: visible;
  position: absolute;
  font-size: 22.4px;
  left: 145px;
  top: 20px;
  width: 66px;
  height: 31px;
  font-weight: normal;
}

/* lblrichtig2  Label: Textgröße, Textart, Aussehen, Lage*/
#lblrichtig2{
  visibility: visible;
  position: absolute;
  font-size: 22.4px;
  left: 73px;
  top: 20px;
  width: 66px;
  height: 31px;
  font-weight: normal;
}

/* lblrichtig1  Label: Textgröße, Textart, Aussehen, Lage*/
#lblrichtig1{
  visibility: visible;
  position: absolute;
  font-size: 22.4px;
  left: 0px;
  top: 20px;
  width: 66px;
  height: 31px;
  font-weight: normal;
}

/* lblrichtig4  Label: Textgröße, Textart, Aussehen, Lage*/
#lblrichtig4{
  visibility: visible;
  position: absolute;
  font-size: 22.4px;
  left: 217px;
  top: 20px;
  width: 66px;
  height: 31px;
  font-weight: normal;
}

/* imghoeren4  Image: Verhalten, Aussehen, Lage*/
#imghoeren4{
  visibility: visible;
  left: 714px;
  top: 378px;
  width: 48px;
  height: 48px;
}

/* imghoeren3  Image: Verhalten, Aussehen, Lage*/
#imghoeren3{
  visibility: visible;
  left: 714px;
  top: 308px;
  width: 48px;
  height: 48px;
}

/* imghoeren2  Image: Verhalten, Aussehen, Lage*/
#imghoeren2{
  visibility: visible;
  left: 714px;
  top: 238px;
  width: 48px;
  height: 48px;
}

/* imghoeren1  Image: Verhalten, Aussehen, Lage*/
#imghoeren1{
  visibility: visible;
  left: 714px;
  top: 168px;
  width: 48px;
  height: 48px;
}



/* lblueb  Label: Textgröße, Textart, Aussehen, Lage*/
#lblueb{
  visibility: visible;
  position: absolute;
  font-size: 26px;
  left: 6px;
  top: 510px;
  width: 250px;
  height: 30px;
  font-weight: bold;
}

/* label313  Label: Textgröße, Textart, Aussehen, Lage*/
#label313{
  visibility: visible;
  position: absolute;
  font-size: 14.4px;
  left: 6px;
  top: 574px;
  width: 38px;
  height: 15px;
  font-weight: normal;
}

/* label31  Label: Textgröße, Textart, Aussehen, Lage*/
#label31{
  visibility: visible;
  position: absolute;
  font-size: 14.4px;
  left: 6px;
  top: 532px;
  width: 34px;
  height: 15px;
  font-weight: normal;
}

/* lblname  Label: Textgröße, Textart, Aussehen, Lage*/
#lblname{
  visibility: visible;
  position: absolute;
  font-size: 14.4px;
  left: 56px;
  top: 532px;
  width: 30px;
  height: 15px;
  font-weight: bold;
}


#fadinglinetopleft{
  position: absolute;
  visibility: visible;
  left: -283px;
  top:  527px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, white, #808080);
}

#fadinglinebutleft{
  position: absolute;
  visibility: visible;
  left: -283px;
  top:  72px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, white, #808080);
}

#fadinglinetopright{
  position: absolute;
  visibility: visible;
  left: 800px;
  top:  527px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, #808080, white);
}

#fadinglinebutright{
  position: absolute;
  visibility: visible;
  left: 800px;
  top:  72px;
  width: 283px;
  height: 2px;
  background-image: linear-gradient(to right, #808080, white);
}

.schriftweiss{
  color: #FFF;
  font-size: 22px;
  border-radius: 12px;
}

.pnormal{
  font-family: Arial, Helvetica, sans-serif;
}

.pbig{
  font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
}

.vertikal-flex {
	width: 80px;
	height: 80px;
	left: 620px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.text-fit {
	cursor: grab;
	font-size: 36px;
	font-family: Arial, Helvetica, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
}

.size8080 {
	width: 80px;
	height: 80px;	
 }

.speaker8080 {
	cursor: pointer;
	width: 80px;
	height: 80px;	
 }
 
.pp{
  font-size: .8em;
  color: #FFF;
  position: absolute;
  left: 4px;
  top: -15px;
}

.hook{
  font-size: 1em;
  font-weight: bold;
  color: #FFF;
  position: absolute;
  left: 74px;
  top: 16px;
}

.hook80{
  font-size: 1em;
  font-weight: bold;
  color: #FFF;
  position: absolute;
  left: 48px;
  top: 16px;
}
 
/* teller  Label: Textgröße, Textart, Aussehen, Lage*/
#teller{
  visibility: visible;
  position: absolute;
  font-size: 28.8px;
  left: 200px;
  top: 505px;
  width: 380px;
  height: 80px;
  font-weight: normal;
} 
 
#divnam1 {
  position: absolute;
  text-align: center;
  top: 85px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#divnam2 {  
  position: absolute;
  text-align: center;
  top: 195px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#divnam3 {
  position: absolute;
  text-align: center;
  top: 305px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#divnam4 {  
  position: absolute;
  text-align: center;
  top: 415px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

#div1 {
  position: absolute;
  left: 330px;
  top: 85px;
  width: 270px;
  height: 80px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#div2 {  
  position: absolute;
  left: 330px;
  top: 195px;
  width: 270px;
  height: 80px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#div3 {  
  position: absolute;
  left: 330px;
  top: 305px;
  width: 270px;
  height: 80px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#div4 {  
  position: absolute;
  left: 330px;
  top: 415px;
  width: 270px;
  height: 80px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

#div5 {
  position: absolute;
  left: 10px;
  top: 85px;
  width: 270px;
  height: 80px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#div6 {  
  position: absolute;
  left: 10px;
  top: 195px;
  width: 270px;
  height: 80px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#div7 {  
  position: absolute;
  left: 10px;
  top: 305px;
  width: 270px;
  height: 80px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#div8 {  
  position: absolute;
  left: 10px;
  top: 415px;
  width: 270px;
  height: 80px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}


#div9 {
  position: absolute;
  left: 720px;
  top: 85px;
  width: 80px;
  height: 80px;
  padding: 10px;
  border: px solid #aaaaaa;
}
#div10 {  
  position: absolute;
  left: 720px;
  top: 195px;
  width: 80px;
  height: 80px;
  padding: 10px;
  border: 0px solid #aaaaaa;
}
#div11 {  
  position: absolute;
  left: 720px;
  top: 305px;
  width: 80px;
  height: 80px;
  padding: 10px;
  border: 0px solid #aaaaaa;
}
#div12 {  
  position: absolute;
  left: 720px;
  top: 415px;
  width: 80px;
  height: 80px;
  padding: 10px;
  border: 0px solid #aaaaaa;
}

@keyframes myauge {
  50% {transform: scale(1.2);}
}

@keyframes mymove {
  50% {transform: rotate(180deg);}
}

@keyframes mymoveback {
  50% {transform: rotate(180deg);}
}