body {
  color: black;
  font-size: 20px;
  overflow: hidden;
  font-color: white !important;
}
audio {
  display: none;
}
h1 {
  font-size: 24px;
  color: black;
}
p {
  color: black;
}
a,
a:visited {
  color: white;
  text-decoration: none;
}
a:hover {
  color: black;
}
a:active {
  color: black;
}
.wrap {
  width: 100%;
  margin: 0 auto;
}
div#characterView {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e7d196;
  z-index: 100;
}
div#characterView span.title {
  position: absolute;
  width: 100%;
  top: 25%;
  line-height: 100px;
  text-align: center;
  font-size: 38px;
}
div#characterView div.character {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  cursor: pointer;
}
div#characterView div.character.boy {
  left: 0;
}
div#characterView div.character.boy:hover span.image {
  border-color: #3659be;
}
div#characterView div.character.boy span.image {
  background-image: url('../../assets/images/dialog/player-male-noSpeak.png');
}
div#characterView div.character.girl {
  left: 50%;
}
div#characterView div.character.girl:hover span.image {
  border-color: #e7366b;
}
div#characterView div.character.girl span.image {
  background-image: url('../../assets/images/dialog/player-female-noSpeak.png');
}
div#characterView div.character span.image {
  position: absolute;
  border-radius: 230px;
  width: 230px;
  height: 230px;
  top: 50%;
  left: 50%;
  margin-top: -115px;
  margin-left: -115px;
  border: 7px solid white;
  background-color: white;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  transition: all 200ms linear;
}
div#characterView div.character span.text {
  position: absolute;
  color: black;
  line-height: 100px;
  height: 100px;
  width: 100px;
  left: 50%;
  bottom: 30%;
  margin-bottom: -50px;
  margin-left: -50px;
  vertical-align: middle;
  text-align: center;
  font-size: 30px;
}
section {
  /*background-attachment: fixed;*/
  background-color: #ffffff;
  background-position: top top;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}
section div.dialog {
  position: absolute;
  width: 70%;
  height: 25.6%;
  top: 37.2%;
  left: 15%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  cursor: pointer;
  z-index: 1000;
}
section div.dialog div.left {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  left: 0;
  top: 0;
  width: 22.85714286%;
  height: 100%;
  display: block;
}
section div.dialog div.left.player {
  background-image: url('../../assets/images/dialog/player-male.png');
}
section div.dialog div.left.player.noSpeak {
  background-image: url('../../assets/images/dialog/player-male-noSpeak.png');
}
section div.dialog div.right {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  right: 0;
  top: 0;
  width: 22.85714286%;
  height: 100%;
  display: block;
}
section div.dialog div.right.bauer {
  background-image: url('../../assets/images/dialog/bauer.png');
}
section div.dialog div.right.bauer.noSpeak {
  background-image: url('../../assets/images/dialog/bauer-noSpeak.png');
}
section div.dialog div.right.fischer {
  background-image: url('../../assets/images/dialog/fischer.png');
}
section div.dialog div.right.fischer.noSpeak {
  background-image: url('../../assets/images/dialog/fischer-noSpeak.png');
}
section div.dialog div.right.haendlerin {
  background-image: url('../../assets/images/dialog/haendlerin.png');
}
section div.dialog div.right.haendlerin.noSpeak {
  background-image: url('../../assets/images/dialog/haendlerin-noSpeak.png');
}
section div.dialog div.right.mutter {
  background-image: url('../../assets/images/dialog/mutter.png');
}
section div.dialog div.right.mutter.noSpeak {
  background-image: url('../../assets/images/dialog/mutter-noSpeak.png');
}
section div.dialog div.right.nachbarin {
  background-image: url('../../assets/images/dialog/nachbarin.png');
}
section div.dialog div.right.nachbarin.noSpeak {
  background-image: url('../../assets/images/dialog/nachbarin-noSpeak.png');
}
section div.dialog div.right.tonton {
  background-image: url('../../assets/images/dialog/tonton.png');
}
section div.dialog div.right.tonton.noSpeak {
  background-image: url('../../assets/images/dialog/tonton-noSpeak.png');
}
section div.dialog div.right.vater {
  background-image: url('../../assets/images/dialog/vater.png');
}
section div.dialog div.right.vater.noSpeak {
  background-image: url('../../assets/images/dialog/vater-noSpeak.png');
}
section div.dialog div.right.verkaeufer {
  background-image: url('../../assets/images/dialog/verkaeufer.png');
}
section div.dialog div.right.verkaeufer.noSpeak {
  background-image: url('../../assets/images/dialog/verkaeufer-noSpeak.png');
}
section div.dialog div.right.schwester {
  background-image: url('../../assets/images/dialog/schwester.png');
}
section div.dialog div.right.schwester.noSpeak {
  background-image: url('../../assets/images/dialog/schwester-noSpeak.png');
}
section div.dialog div.right.bruder {
  background-image: url('../../assets/images/dialog/bruder.png');
}
section div.dialog div.right.bruder.noSpeak {
  background-image: url('../../assets/images/dialog/bruder-noSpeak.png');
}
section div.dialog div.box {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  font-family: 'Overlock', cursive;
  font-size: 1.5vw;
  left: 30%;
  top: 0;
  width: 50%;
  height: 100%;
  display: table;
}
section div.dialog div.box p {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
}
section div.dialog div.box.player {
  left: 22%;
}
section div.dialog div.box.player p {
  font-weight: 700;
  color: #7e3739;
  text-align: left;
}
section div.dialog div.box.person {
  left: 28%;
}
section div.dialog div.box.person p {
  font-weight: 700;
  font-style: italic;
  color: #3b5921;
  text-align: right;
}
section .imageWrap,
.sectionItem {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
}
section .imageWrap {
  overflow: hidden;
}
section#start {
  background-color: #e7d196;
}
section#start .imageWrap {
  background-image: url('../../assets/images/start/background.jpg');
}
section#start div.garten {
  background-image: url('../../assets/images/start/garten.png');
  top: 6.24%;
  left: 4.55%;
  width: 18.85%;
  height: 28.8%;
}
section#start div.garten:hover {
  /*background-image: url('@{assetsImages}@{imagePath}-hover.@{fileFormat}');*/
  width: 20.735%;
  height: 31.68%;
  top: 4.732%;
  left: 3.65%;
  transition-property: width,height,top,left;
  transition-duration: 0.1s;
  /* Safari */
  -webkit-transition-property: width,height,left,top;
  -webkit-transition-duration: 0.1s;
}
section#start div.garten.disabled:hover {
  top: 6.24%;
  left: 4.55%;
  width: 18.85%;
  height: 28.8%;
}
section#start div.garten.disabled {
  /*background-image: url('@{assetsImages}@{imagePath}-disabled.@{fileFormat}') !important;*/
  opacity: 0.5;
}
section#start div.huette {
  background-image: url('../../assets/images/start/huette.png');
  top: 47.2%;
  left: 28.65%;
  width: 25.7%;
  height: 27.76%;
}
section#start div.huette:hover {
  /*background-image: url('@{assetsImages}@{imagePath}-hover.@{fileFormat}');*/
  width: 28.27%;
  height: 30.536%;
  top: 45.144%;
  left: 27.7825%;
  transition-property: width,height,top,left;
  transition-duration: 0.1s;
  /* Safari */
  -webkit-transition-property: width,height,left,top;
  -webkit-transition-duration: 0.1s;
}
section#start div.huette.disabled:hover {
  top: 47.2%;
  left: 28.65%;
  width: 25.7%;
  height: 27.76%;
}
section#start div.huette.disabled {
  /*background-image: url('@{assetsImages}@{imagePath}-disabled.@{fileFormat}') !important;*/
  opacity: 0.5;
}
section#start div.laden {
  background-image: url('../../assets/images/start/laden.png');
  top: 42.16%;
  left: 3.5%;
  width: 17.8%;
  height: 23.84%;
}
section#start div.laden:hover {
  /*background-image: url('@{assetsImages}@{imagePath}-hover.@{fileFormat}');*/
  width: 19.58%;
  height: 26.224%;
  top: 40.736%;
  left: 2.755%;
  transition-property: width,height,top,left;
  transition-duration: 0.1s;
  /* Safari */
  -webkit-transition-property: width,height,left,top;
  -webkit-transition-duration: 0.1s;
}
section#start div.laden.disabled:hover {
  top: 42.16%;
  left: 3.5%;
  width: 17.8%;
  height: 23.84%;
}
section#start div.laden.disabled {
  /*background-image: url('@{assetsImages}@{imagePath}-disabled.@{fileFormat}') !important;*/
  opacity: 0.5;
}
section#start div.markt {
  background-image: url('../../assets/images/start/markt.png');
  top: 12.72%;
  left: 42.7%;
  width: 19.25%;
  height: 33.52%;
}
section#start div.markt:hover {
  /*background-image: url('@{assetsImages}@{imagePath}-hover.@{fileFormat}');*/
  width: 21.175%;
  height: 36.872%;
  top: 11.18%;
  left: 41.6525%;
  transition-property: width,height,top,left;
  transition-duration: 0.1s;
  /* Safari */
  -webkit-transition-property: width,height,left,top;
  -webkit-transition-duration: 0.1s;
}
section#start div.markt.disabled:hover {
  top: 12.72%;
  left: 42.7%;
  width: 19.25%;
  height: 33.52%;
}
section#start div.markt.disabled {
  /*background-image: url('@{assetsImages}@{imagePath}-disabled.@{fileFormat}') !important;*/
  opacity: 0.5;
}
section#start div.meer {
  background-image: url('../../assets/images/start/meer.png');
  top: 18.24%;
  left: 68.45%;
  width: 22.85%;
  height: 20.88%;
}
section#start div.meer:hover {
  /*background-image: url('@{assetsImages}@{imagePath}-hover.@{fileFormat}');*/
  width: 25.135%;
  height: 22.968%;
  top: 16.412%;
  left: 67.7975%;
  transition-property: width,height,top,left;
  transition-duration: 0.1s;
  /* Safari */
  -webkit-transition-property: width,height,left,top;
  -webkit-transition-duration: 0.1s;
}
section#start div.meer.disabled:hover {
  top: 18.24%;
  left: 68.45%;
  width: 22.85%;
  height: 20.88%;
}
section#start div.meer.disabled {
  /*background-image: url('@{assetsImages}@{imagePath}-disabled.@{fileFormat}') !important;*/
  opacity: 0.5;
}
section#start div.muell {
  background-image: url('../../assets/images/start/muell.png');
  top: 75.12%;
  left: 10%;
  width: 27.7%;
  height: 20.56%;
}
section#start div.muell:hover {
  /*background-image: url('@{assetsImages}@{imagePath}-hover.@{fileFormat}');*/
  width: 30.47%;
  height: 22.616%;
  top: 72.904%;
  left: 9.3575%;
  transition-property: width,height,top,left;
  transition-duration: 0.1s;
  /* Safari */
  -webkit-transition-property: width,height,left,top;
  -webkit-transition-duration: 0.1s;
}
section#start div.muell.disabled:hover {
  top: 75.12%;
  left: 10%;
  width: 27.7%;
  height: 20.56%;
}
section#start div.muell.disabled {
  /*background-image: url('@{assetsImages}@{imagePath}-disabled.@{fileFormat}') !important;*/
  opacity: 0.5;
}
section#start div.natur {
  background-image: url('../../assets/images/start/natur.png');
  top: 74.08%;
  left: 72.5%;
  width: 19.15%;
  height: 22.64%;
}
section#start div.natur:hover {
  /*background-image: url('@{assetsImages}@{imagePath}-hover.@{fileFormat}');*/
  width: 21.065%;
  height: 24.904%;
  top: 72.548%;
  left: 71.7925%;
  transition-property: width,height,top,left;
  transition-duration: 0.1s;
  /* Safari */
  -webkit-transition-property: width,height,left,top;
  -webkit-transition-duration: 0.1s;
}
section#start div.natur.disabled:hover {
  top: 74.08%;
  left: 72.5%;
  width: 19.15%;
  height: 22.64%;
}
section#start div.natur.disabled {
  /*background-image: url('@{assetsImages}@{imagePath}-disabled.@{fileFormat}') !important;*/
  opacity: 0.5;
}
section#start div.tiere {
  background-image: url('../../assets/images/start/tiere.png');
  top: 74.4%;
  left: 50.7%;
  width: 13.6%;
  height: 22.32%;
}
section#start div.tiere:hover {
  /*background-image: url('@{assetsImages}@{imagePath}-hover.@{fileFormat}');*/
  width: 14.96%;
  height: 24.552%;
  top: 73.312%;
  left: 50.0025%;
  transition-property: width,height,top,left;
  transition-duration: 0.1s;
  /* Safari */
  -webkit-transition-property: width,height,left,top;
  -webkit-transition-duration: 0.1s;
}
section#start div.tiere.disabled:hover {
  top: 74.4%;
  left: 50.7%;
  width: 13.6%;
  height: 22.32%;
}
section#start div.tiere.disabled {
  /*background-image: url('@{assetsImages}@{imagePath}-disabled.@{fileFormat}') !important;*/
  opacity: 0.5;
}
section#start div.infoCenter {
  background-image: url('../../assets/images/start/infopoint.png');
  top: 4.56%;
  left: 29.35%;
  width: 10.9%;
  height: 35.52%;
}
section#start div.infoCenter:hover {
  /*background-image: url('@{assetsImages}@{imagePath}-hover.@{fileFormat}');*/
  width: 11.99%;
  height: 39.072%;
  top: 3.688%;
  left: 28.24%;
  transition-property: width,height,top,left;
  transition-duration: 0.1s;
  /* Safari */
  -webkit-transition-property: width,height,left,top;
  -webkit-transition-duration: 0.1s;
}
section#start div.infoCenter.disabled:hover {
  top: 4.56%;
  left: 29.35%;
  width: 10.9%;
  height: 35.52%;
}
section#start div.infoCenter.disabled {
  /*background-image: url('@{assetsImages}@{imagePath}-disabled.@{fileFormat}') !important;*/
  opacity: 0.5;
}
/* ******* GARTEN ******** */
section#garten {
  background-color: #6fa767;
}
section#garten .imageWrap {
  background-image: url('../../assets/images/garten/background.jpg');
}
section#garten #gartenMouse {
  position: fixed;
  z-index: 1000;
  background-image: url('../../assets/images/garten/kanne.png');
  background-size: 100% 100%;
  width: 202px;
  height: 138.5px;
  pointer-events: none;
  display: none;
}
section#garten #gartenMouse.withWater {
  width: 267px;
  background-image: url('../../assets/images/garten/kanne-mit-wasser.png') !important;
}
section#garten p.time {
  position: fixed;
  top: -2%;
  left: 50%;
  margin-left: -25px;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  color: black;
  font-size: 60px;
  font-weight: 400;
  /* padding: 15px; */
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.7);
}
section#garten div.gartenItem {
  width: 29%;
  height: 46.4%;
}
section#garten div.tomato {
  top: 0%;
  left: 22%;
}
section#garten div.bohnen {
  top: 0%;
  left: 51%;
}
section#garten div.kuerbis {
  top: 48%;
  left: 22%;
}
section#garten div.carrot {
  top: 48%;
  left: 51%;
}
section#garten div.gartenItem div.waterbar {
  position: absolute;
  display: block;
  width: 6%;
  height: 34%;
  left: 0px;
  bottom: 0px;
  z-index: 10;
  border: 2px solid white;
  background-color: white;
}
section#garten div.gartenItem div.waterbar div.bar {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  overflow: hidden;
}
section#garten div.gartenItem div.waterbar div.bar:after {
  content: '';
  position: absolute;
  display: block;
  top: 20%;
  left: 0px;
  width: 100%;
  height: 60%;
  background-color: green;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}
section#garten div.gartenItem div.waterbar div.visibleBar {
  display: block;
  position: absolute;
  left: -15px;
  bottom: 0%;
  /*width: 100%;
			height: 30%;*/
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
}
section#garten .countdown {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  line-height: 200px;
  text-align: center;
  font-size: 200px;
  color: white;
  display: none;
  z-index: 200;
  text-shadow: -3px -3px 0 #000000, 3px -3px 0 #000000, -3px 3px 0 #000000, 3px 3px 0 #000000;
}
section#garten div.bohnenImage {
  background-image: url('../../assets/images/garten/bohnen.png');
  top: 0%;
  left: 50%;
  width: 21.9%;
  height: 52.96%;
}
section#garten div.bohnenImage.noWater {
  background-image: url('../../assets/images/garten/bohnen-noWater.png') !important;
}
section#garten div.bohnenImage.tooMuchWater {
  background-image: url('../../assets/images/garten/bohnen-tooMuchWater.png') !important;
}
section#garten div.tomatoImage {
  background-image: url('../../assets/images/garten/tomato.png');
  top: 1.04%;
  left: 21.5%;
  width: 31.05%;
  height: 50.08%;
}
section#garten div.tomatoImage.noWater {
  background-image: url('../../assets/images/garten/tomato-noWater.png') !important;
}
section#garten div.tomatoImage.tooMuchWater {
  background-image: url('../../assets/images/garten/tomato-tooMuchWater.png') !important;
}
section#garten div.kuerbisImage {
  background-image: url('../../assets/images/garten/kuerbis.png');
  top: 53.2%;
  left: 15%;
  width: 34.85%;
  height: 25.44%;
}
section#garten div.kuerbisImage.noWater {
  background-image: url('../../assets/images/garten/kuerbis-noWater.png') !important;
}
section#garten div.kuerbisImage.tooMuchWater {
  background-image: url('../../assets/images/garten/kuerbis-tooMuchWater.png') !important;
}
section#garten div.carrotImage {
  background-image: url('../../assets/images/garten/carrot.png');
  top: 46.4%;
  left: 52.5%;
  width: 27.8%;
  height: 34.56%;
}
section#garten div.carrotImage.noWater {
  background-image: url('../../assets/images/garten/carrot-noWater.png') !important;
}
section#garten div.carrotImage.tooMuchWater {
  background-image: url('../../assets/images/garten/carrot-tooMuchWater.png') !important;
}
section#tiere {
  background-color: #72a361;
}
section#tiere .imageWrap {
  background-image: url('../../assets/images/tiere/background.png');
}
section#tiere div.lizard {
  display: none;
}
section#tiere div.lizard {
  background-image: url('../../assets/images/tiere/lizard.png');
  top: 43.92%;
  left: 3.4%;
  width: 18.4%;
  height: 11.76%;
  background-size: 100% 100%;
}
section#tiere div.smallBranches01 {
  background-image: url('../../assets/images/tiere/smallBranches.png');
  top: 47.76%;
  left: 62.95%;
  width: 15.7%;
  height: 15.6%;
  background-size: 100% 100%;
}
section#tiere div.smallBranches01 {
  background-image: url('../../assets/images/tiere/smallBranches.png');
  top: 71.92%;
  left: 70.5%;
  width: 15.7%;
  height: 15.6%;
  background-size: 100% 100%;
}
section#tiere div.bigBranches {
  background-image: url('../../assets/images/tiere/bigBranches.png');
  top: 45.12%;
  left: 23.85%;
  width: 23.5%;
  height: 21.2%;
  background-size: 100% 100%;
}
section#tiere div.chicken01 {
  background-image: url('../../assets/images/tiere/chicken.png');
  top: 28.8%;
  left: 33.8%;
  width: 11.25%;
  height: 14.48%;
  background-size: 100% 100%;
}
section#tiere div.chicken02 {
  background-image: url('../../assets/images/tiere/chicken.png');
  top: 49.44%;
  left: 56%;
  width: 11.25%;
  height: 14.48%;
  background-size: 100% 100%;
}
section#tiere div.chicken03 {
  background-image: url('../../assets/images/tiere/chicken.png');
  top: 70.72%;
  left: 83.7%;
  width: 11.25%;
  height: 14.48%;
  background-size: 100% 100%;
}
section#tiere div.leaves01 {
  background-image: url('../../assets/images/tiere/leaves.png');
  top: 29.04%;
  left: 69.8%;
  width: 29.6%;
  height: 16.16%;
  background-size: 100% 100%;
}
section#tiere div.leaves02 {
  background-image: url('../../assets/images/tiere/leaves.png');
  top: 52.56%;
  left: 34.6%;
  width: 29.6%;
  height: 16.16%;
  background-size: 100% 100%;
}
section#tiere div.leaves03 {
  background-image: url('../../assets/images/tiere/leaves.png');
  top: 73.44%;
  left: 49.5%;
  width: 29.6%;
  height: 16.16%;
  background-size: 100% 100%;
}
section#tiere div.stroh01 {
  background-image: url('../../assets/images/tiere/stroh.png');
  top: 32.56%;
  left: 41.3%;
  width: 21.9%;
  height: 16.72%;
  background-size: 100% 100%;
}
section#tiere div.stroh02 {
  background-image: url('../../assets/images/tiere/stroh.png');
  top: 54.88%;
  left: 73.95%;
  width: 21.9%;
  height: 16.72%;
  background-size: 100% 100%;
}
section#tiere div.gras01 {
  background-image: url('../../assets/images/tiere/gras.png');
  top: 28%;
  left: 23.95%;
  width: 15.35%;
  height: 15.84%;
  background-size: 100% 100%;
}
section#tiere div.gras02 {
  background-image: url('../../assets/images/tiere/gras.png');
  top: 70.08%;
  left: 22.75%;
  width: 15.35%;
  height: 15.84%;
  background-size: 100% 100%;
}
section#tiere div.treeLeft {
  background-image: url('../../assets/images/tiere/treeLeft.png');
  top: 24.64%;
  left: 56.45%;
  width: 23.05%;
  height: 17.12%;
  background-size: 100% 100%;
}
section#tiere div.treeRight {
  background-image: url('../../assets/images/tiere/treeRight.png');
  top: 69.04%;
  left: 33.85%;
  width: 23.05%;
  height: 17.12%;
  background-size: 100% 100%;
}
section#tiere div.egg {
  background-image: url('../../assets/images/tiere/egg.png');
  top: 61.04%;
  left: 17.95%;
  width: 2.95%;
  height: 4.24%;
  background-size: 100% 100%;
}
section#tiere div.eggMinus {
  background-image: url('../../assets/images/tiere/eggMinus.png');
  top: 56%;
  left: 9%;
  width: 6%;
  height: 4.24%;
  background-size: 100% 100%;
}
section#tiere div.basket {
  background-image: url('../../assets/images/tiere/basketEmpty.png');
  top: 62.96%;
  left: 2.65%;
  width: 12.1%;
  height: 19.36%;
  background-size: 100% 100%;
}
section#tiere div.egg {
  position: absolute !important;
  cursor: pointer;
}
section#tiere div.eggMinus {
  display: none;
}
section#tiere .countdown {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  line-height: 200px;
  text-align: center;
  font-size: 200px;
  color: white;
  display: none;
  z-index: 200;
  text-shadow: -3px -3px 0 #000000, 3px -3px 0 #000000, -3px 3px 0 #000000, 3px 3px 0 #000000;
}
section#tiere svg.wrapper {
  position: fixed;
  display: block;
  margin: 50px auto;
}
section#tiere #loader {
  fill: #0088cc;
}
section#tiere #border {
  fill: #00517a;
}
section#tiere .full {
  background-image: url('../../assets/images/tiere/basketFull.png') !important;
}
section#tiere div.info {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  background-color: black;
  color: white;
}
section#tiere div.info p {
  margin: 0 10px;
  float: left;
}
section#tiere p.time {
  position: fixed;
  top: -2%;
  left: 50%;
  margin-left: -25px;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  color: black;
  font-size: 60px;
  font-weight: 400;
  /* padding: 15px; */
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.7);
}
section#tiere p.currentEggs {
  position: fixed;
  bottom: 5%;
  left: 5%;
  background-image: url('../../assets/images/tiere/egg.png');
  width: 5%;
  height: 60px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  padding-left: 5%;
  vertical-align: middle;
  line-height: 60px;
  font-size: 40px;
}
section#meer {
  background-color: #3a94cd;
}
section#meer .imageWrap {
  background-image: url('../../assets/images/meer/background.jpg');
}
section#meer div.Point {
  cursor: pointer;
  z-index: 1;
}
section#meer div.Point.disabled {
  cursor: none;
  display: none;
}
section#meer div.Point div.info {
  position: absolute;
  right: -150px;
  top: -30%;
  width: auto;
  min-width: 100px;
  background-color: #009456;
  color: white;
  height: auto;
  text-align: center;
  font-size: 16px;
  padding: 3px;
  border: 3px solid white;
  border-radius: 5%;
  display: none;
}
section#meer div.Point div.info span {
  width: 100%;
  float: left;
}
section#meer div.PointStart {
  position: absolute;
  display: block;
  top: 73.6%;
  left: 51.25%;
  width: 6%;
  height: 9.6%;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  border: solid rgba(255, 255, 255, 0.4);
}
section#meer div.Point1 {
  position: absolute;
  display: block;
  top: 39.2%;
  left: 73.25%;
  width: 3.5%;
  height: 5.6%;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  border: solid rgba(255, 255, 255, 0.4);
}
section#meer div.Point2 {
  position: absolute;
  display: block;
  top: 49.28%;
  left: 15.95%;
  width: 2.9%;
  height: 4.64%;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  border: solid rgba(255, 255, 255, 0.4);
}
section#meer div.Point3 {
  position: absolute;
  display: block;
  top: 12.4%;
  left: 8.25%;
  width: 9.5%;
  height: 15.2%;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  border: solid rgba(255, 255, 255, 0.4);
}
section#meer div.Point4 {
  position: absolute;
  display: block;
  top: 7.44%;
  left: 70.95%;
  width: 8.3%;
  height: 13.28%;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  border: solid rgba(255, 255, 255, 0.4);
}
section#meer div.Point5 {
  position: absolute;
  display: block;
  top: 62.64%;
  left: 79.25%;
  width: 5.3%;
  height: 8.48%;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  border: solid rgba(255, 255, 255, 0.4);
}
section#meer div.Point6 {
  position: absolute;
  display: block;
  top: 33.36%;
  left: 41.2%;
  width: 4.7%;
  height: 7.52%;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  border: solid rgba(255, 255, 255, 0.4);
}
section#meer div.Point7 {
  position: absolute;
  display: block;
  top: 58.24%;
  left: 56.4%;
  width: 2.2%;
  height: 3.52%;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  border: solid rgba(255, 255, 255, 0.4);
}
section#meer #singleFishes {
  position: absolute;
  display: block;
  top: 4.72%;
  left: 67.075%;
  width: 16.05%;
  height: 18.72%;
  background-image: url('../../assets/images/meer/single-fishes.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
section#meer #displayFuel {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
}
section#meer #boat {
  position: absolute;
  top: 75.36%;
  left: 50.5%;
  /* .setScale(300,176); */
  width: 7.5%;
  height: 7.04%;
  background-image: url('../../assets/images/meer/boot.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 100;
}
section#meer #otherBoat {
  position: absolute;
  top: -16%;
  left: 115%;
  /* .setScale(300,176); */
  width: 16.05%;
  height: 18.72%;
  background-image: url('../../assets/images/meer/foreign-boat.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 100;
  display: none;
}
section#natur {
  background-color: #b8e08f;
}
section#natur .imageWrap {
  background-image: url('../../assets/images/natur/background.jpg');
}
section#natur div.bananen {
  /*background-image: url('@{assetsImages}natur/@{name}.png');*/
  top: 28.64%;
  left: 33.75%;
  width: 6.9%;
  height: 18.8%;
  background-size: 100% 100%;
}
section#natur div.bananen:hover {
  background-image: url('../../assets/images/natur/bananen-hover.png');
}
section#natur div.mallungai1 {
  /*background-image: url('@{assetsImages}natur/@{name}.png');*/
  top: 14.16%;
  left: 53.05%;
  width: 14.05%;
  height: 15.76%;
  background-size: 100% 100%;
}
section#natur div.mallungai1:hover {
  background-image: url('../../assets/images/natur/mallungai1-hover.png');
}
section#natur div.mallungai2 {
  /*background-image: url('@{assetsImages}natur/@{name}.png');*/
  top: 45.52%;
  left: 61.65%;
  width: 38.5%;
  height: 54.72%;
  background-size: 100% 100%;
}
section#natur div.mallungai2:hover {
  background-image: url('../../assets/images/natur/mallungai2-hover.png');
}
section#natur div.pilze1 {
  /*background-image: url('@{assetsImages}natur/@{name}.png');*/
  top: 47.6%;
  left: 0.1%;
  width: 12.55%;
  height: 14.16%;
  background-size: 100% 100%;
}
section#natur div.pilze1:hover {
  background-image: url('../../assets/images/natur/pilze1-hover.png');
}
section#natur div.pilze2 {
  /*background-image: url('@{assetsImages}natur/@{name}.png');*/
  top: 60.8%;
  left: 19.35%;
  width: 7.9%;
  height: 8.4%;
  background-size: 100% 100%;
}
section#natur div.pilze2:hover {
  background-image: url('../../assets/images/natur/pilze2-hover.png');
}
section#natur div.vogel {
  /*background-image: url('@{assetsImages}natur/@{name}.png');*/
  top: 20.32%;
  left: 42.85%;
  width: 5.4%;
  height: 15.28%;
  background-size: 100% 100%;
}
section#natur div.vogel:hover {
  background-image: url('../../assets/images/natur/vogel-hover.png');
}
section#natur div.affe {
  /*background-image: url('@{assetsImages}natur/@{name}.png');*/
  top: 20.4%;
  left: 6.15%;
  width: 8.55%;
  height: 23.2%;
  background-size: 100% 100%;
}
section#natur div.affe:hover {
  background-image: url('../../assets/images/natur/affe-hover.png');
}
section#natur .grid {
  position: absolute;
  top: 2.48%;
  left: 20.5%;
  width: 59.1%;
  height: 94.56%;
  margin: 0;
  padding: 0;
  display: none;
  list-style: none;
  background-image: url('../../assets/images/natur/grid.png');
}
section#natur .grid div.ready {
  position: absolute;
  width: 150px;
  height: 40px;
  bottom: -20px;
  right: -75px;
  background-color: green;
  border-radius: 5px;
  color: white;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  display: none;
}
section#natur .grid li {
  display: block;
  width: 32.14890017%;
  height: 32.14890017%;
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
section#natur .grid li.green {
  background-color: green;
}
section#natur .grid li.red {
  background-color: red;
}
section#natur .grid li:nth-child(1) {
  left: 0.76142132%;
  top: 0.76142132%;
}
section#natur .grid li:nth-child(2) {
  left: 33.84094755%;
  top: 0.76142132%;
}
section#natur .grid li:nth-child(3) {
  left: 66.92047377%;
  top: 0.76142132%;
}
section#natur .grid li:nth-child(4) {
  left: 0.76142132%;
  top: 33.84094755%;
}
section#natur .grid li:nth-child(5) {
  left: 33.84094755%;
  top: 33.84094755%;
}
section#natur .grid li:nth-child(6) {
  left: 66.92047377%;
  top: 33.84094755%;
}
section#natur .grid li:nth-child(7) {
  left: 0.76142132%;
  top: 66.92047377%;
}
section#natur .grid li:nth-child(8) {
  left: 33.84094755%;
  top: 66.92047377%;
}
section#natur .grid li:nth-child(9) {
  left: 66.92047377%;
  top: 66.92047377%;
}
section#natur .grid div.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  margin: 0;
  padding: 0;
}
section#natur .grid div.overlay span {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 50%;
  left: 0;
}
section#natur .grid div.overlay span p {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  margin-right: -30px;
  font-size: 44px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
section#natur .grid div.overlay span.dontEat {
  top: 50%;
  background-color: red;
}
section#natur .grid div.overlay span.eat {
  top: 0px;
  background-color: green;
}
section#natur ul#bananenGrid li.banane-reif {
  background-image: url('../../assets/images/natur/banane/banane-reif.png');
}
section#natur ul#bananenGrid li.banane-unreif1 {
  background-image: url('../../assets/images/natur/banane/banane-unreif1.png');
}
section#natur ul#bananenGrid li.banane-unreif2 {
  background-image: url('../../assets/images/natur/banane/banane-unreif2.png');
}
section#natur ul#bananenGrid li.banane-ueberreif {
  background-image: url('../../assets/images/natur/banane/banane-ueberreif.png');
}
section#natur ul#pilze1Grid li.pilze1,
section#natur ul#pilze2Grid li.pilze1 {
  background-image: url('../../assets/images/natur/pilze/austernpilz.png');
}
section#natur ul#pilze1Grid li.pilze2,
section#natur ul#pilze2Grid li.pilze2 {
  background-image: url('../../assets/images/natur/pilze/champignon.png');
}
section#natur ul#pilze1Grid li.pilze3,
section#natur ul#pilze2Grid li.pilze3 {
  background-image: url('../../assets/images/natur/pilze/fliegenpilz.png');
}
section#natur ul#pilze1Grid li.pilze4,
section#natur ul#pilze2Grid li.pilze4 {
  background-image: url('../../assets/images/natur/pilze/knollenblaetterpilz.png');
}
section#natur ul#mallungai1Grid li.pflanze1,
section#natur ul#mallungai2Grid li.pflanze1 {
  background-image: url('../../assets/images/natur/pflanzen/pflanze-1.png');
}
section#natur ul#mallungai1Grid li.pflanze2,
section#natur ul#mallungai2Grid li.pflanze2 {
  background-image: url('../../assets/images/natur/pflanzen/pflanze-2.png');
}
section#natur ul#mallungai1Grid li.pflanze3,
section#natur ul#mallungai2Grid li.pflanze3 {
  background-image: url('../../assets/images/natur/pflanzen/pflanze-3.png');
}
section#natur ul#mallungai1Grid li.pflanze4,
section#natur ul#mallungai2Grid li.pflanze4 {
  background-image: url('../../assets/images/natur/pflanzen/pflanze-4.png');
}
section#natur div.bananen.disabled:hover,
section#natur div.pilze1.disabled:hover,
section#natur div.pilze2.disabled:hover,
section#natur div.affe.disabled:hover,
section#natur div.vogel.disabled:hover,
section#natur div.mallungai1.disabled:hover,
section#natur div.mallungai2.disabled:hover {
  background-image: none;
}
section#natur div.info {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  background-color: black;
  color: white;
}
section#natur div.info p {
  margin: 0 10px;
  float: left;
}
section#huette {
  background-color: #72a361;
}
section#huette .imageWrap {
  background-image: url('../../assets/images/huette/bg-evening.jpg');
}
section#huette div.dayImage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../assets/images/huette/bg-morning.jpg');
  display: none;
  background-size: 100% auto;
}
section#huette div.auswertung {
  position: relative;
  width: 100%;
  height: 140px;
  margin-top: 40px;
}
section#huette div.bar {
  position: absolute;
  width: 25%;
  height: 4%;
  display: block;
  border: 3px solid white;
  background-color: white;
  border-radius: 10px;
}
section#huette div.bar div.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 100%;
  display: block;
  background-color: #3fa01c;
  border-radius: 10px;
  -webkit-transition: width 1s;
  transition: width 1s;
}
section#huette div.bar span {
  position: absolute;
  top: -30px;
}
section#huette div.bar.naehrstoffe {
  top: 14.4%;
  left: 10%;
}
section#huette div.bar.energie {
  top: 24%;
  left: 10%;
}
section#huette div.bar.proteine,
section#huette div.bar.vitaminA,
section#huette div.bar.vitaminC {
  position: relative;
  width: 100%;
  height: 20px;
  margin: 30px 0;
}
section#huette #finaleAuswertungModal {
  margin-left: -440px;
  width: 800px;
}
section#huette #finaleAuswertungModal a,
section#huette #finaleAuswertungModal a:visited,
section#huette #finaleAuswertungModal a:hover {
  color: #923d42;
}
section#muell {
  background-color: #7b7773;
}
section#muell .imageWrap {
  background-image: url('../../assets/images/muell/background.jpg');
}
section#muell div.muell01 {
  background-image: url('../../assets/images/muell/muell/m01.png');
  top: 62.08%;
  left: 7.2%;
  width: 18.15%;
  height: 12.8%;
  background-size: 100% 100%;
}
section#muell div.muell01:hover,
section#muell div.muell01.hover {
  background-image: url('../../assets/images/muell/muell/m01-hover.png');
}
section#muell div.muell02 {
  background-image: url('../../assets/images/muell/muell/m02.png');
  top: 62.08%;
  left: 20.3%;
  width: 15.85%;
  height: 13.12%;
  background-size: 100% 100%;
}
section#muell div.muell02:hover,
section#muell div.muell02.hover {
  background-image: url('../../assets/images/muell/muell/m02-hover.png');
}
section#muell div.muell03 {
  background-image: url('../../assets/images/muell/muell/m03.png');
  top: 65.68%;
  left: 17.65%;
  width: 6.05%;
  height: 11.84%;
  background-size: 100% 100%;
}
section#muell div.muell03:hover,
section#muell div.muell03.hover {
  background-image: url('../../assets/images/muell/muell/m03-hover.png');
}
section#muell div.muell04 {
  background-image: url('../../assets/images/muell/muell/m04.png');
  top: 64.8%;
  left: 40.2%;
  width: 6.85%;
  height: 9.36%;
  background-size: 100% 100%;
}
section#muell div.muell04:hover,
section#muell div.muell04.hover {
  background-image: url('../../assets/images/muell/muell/m04-hover.png');
}
section#muell div.muell05 {
  background-image: url('../../assets/images/muell/muell/m05.png');
  top: 68.64%;
  left: 29.4%;
  width: 17%;
  height: 9.2%;
  background-size: 100% 100%;
}
section#muell div.muell05:hover,
section#muell div.muell05.hover {
  background-image: url('../../assets/images/muell/muell/m05-hover.png');
}
section#muell div.muell06 {
  background-image: url('../../assets/images/muell/muell/m06.png');
  top: 67.6%;
  left: 10.65%;
  width: 7.6%;
  height: 10.4%;
  background-size: 100% 100%;
}
section#muell div.muell06:hover,
section#muell div.muell06.hover {
  background-image: url('../../assets/images/muell/muell/m06-hover.png');
}
section#muell div.muell07 {
  background-image: url('../../assets/images/muell/muell/m07.png');
  top: 69.52%;
  left: 24.2%;
  width: 7%;
  height: 7.04%;
  background-size: 100% 100%;
}
section#muell div.muell07:hover,
section#muell div.muell07.hover {
  background-image: url('../../assets/images/muell/muell/m07-hover.png');
}
section#muell div.muell08 {
  background-image: url('../../assets/images/muell/muell/m08.png');
  top: 72.64%;
  left: 5.85%;
  width: 7.05%;
  height: 7.44%;
  background-size: 100% 100%;
}
section#muell div.muell08:hover,
section#muell div.muell08.hover {
  background-image: url('../../assets/images/muell/muell/m08-hover.png');
}
section#muell div.muell09 {
  background-image: url('../../assets/images/muell/muell/m09.png');
  top: 73.2%;
  left: 33%;
  width: 4.4%;
  height: 5.2%;
  background-size: 100% 100%;
}
section#muell div.muell09:hover,
section#muell div.muell09.hover {
  background-image: url('../../assets/images/muell/muell/m09-hover.png');
}
section#muell div.muell10 {
  background-image: url('../../assets/images/muell/muell/m10.png');
  top: 75.2%;
  left: 15.5%;
  width: 6.15%;
  height: 5.36%;
  background-size: 100% 100%;
}
section#muell div.muell10:hover,
section#muell div.muell10.hover {
  background-image: url('../../assets/images/muell/muell/m10-hover.png');
}
section#muell div.muell11 {
  background-image: url('../../assets/images/muell/muell/m11.png');
  top: 74.8%;
  left: 42.45%;
  width: 4.6%;
  height: 5.68%;
  background-size: 100% 100%;
}
section#muell div.muell11:hover,
section#muell div.muell11.hover {
  background-image: url('../../assets/images/muell/muell/m11-hover.png');
}
section#muell div.muell12 {
  background-image: url('../../assets/images/muell/muell/m12.png');
  top: 73.92%;
  left: 29.75%;
  width: 6.1%;
  height: 7.12%;
  background-size: 100% 100%;
}
section#muell div.muell12:hover,
section#muell div.muell12.hover {
  background-image: url('../../assets/images/muell/muell/m12-hover.png');
}
section#muell div.muell13 {
  background-image: url('../../assets/images/muell/muell/m13.png');
  top: 69.68%;
  left: 3.7%;
  width: 4.45%;
  height: 12%;
  background-size: 100% 100%;
}
section#muell div.muell13:hover,
section#muell div.muell13.hover {
  background-image: url('../../assets/images/muell/muell/m13-hover.png');
}
section#muell div.muell14 {
  background-image: url('../../assets/images/muell/muell/m14.png');
  top: 74.16%;
  left: 18.75%;
  width: 13.55%;
  height: 8.88%;
  background-size: 100% 100%;
}
section#muell div.muell14:hover,
section#muell div.muell14.hover {
  background-image: url('../../assets/images/muell/muell/m14-hover.png');
}
section#muell div.muell15 {
  background-image: url('../../assets/images/muell/muell/m15.png');
  top: 74.88%;
  left: 34.65%;
  width: 9.75%;
  height: 11.04%;
  background-size: 100% 100%;
}
section#muell div.muell15:hover,
section#muell div.muell15.hover {
  background-image: url('../../assets/images/muell/muell/m15-hover.png');
}
section#muell div.muell16 {
  background-image: url('../../assets/images/muell/muell/m16.png');
  top: 75.44%;
  left: 9.3%;
  width: 6.8%;
  height: 7.68%;
  background-size: 100% 100%;
}
section#muell div.muell16:hover,
section#muell div.muell16.hover {
  background-image: url('../../assets/images/muell/muell/m16-hover.png');
}
section#muell div.muell17 {
  background-image: url('../../assets/images/muell/muell/m17.png');
  top: 76.88%;
  left: 12.6%;
  width: 7%;
  height: 7.04%;
  background-size: 100% 100%;
}
section#muell div.muell17:hover,
section#muell div.muell17.hover {
  background-image: url('../../assets/images/muell/muell/m17-hover.png');
}
section#muell div.muell18 {
  background-image: url('../../assets/images/muell/muell/m18.png');
  top: 79.92%;
  left: 28.95%;
  width: 13.55%;
  height: 8.88%;
  background-size: 100% 100%;
}
section#muell div.muell18:hover,
section#muell div.muell18.hover {
  background-image: url('../../assets/images/muell/muell/m18-hover.png');
}
section#muell div.muell19 {
  background-image: url('../../assets/images/muell/muell/m19.png');
  top: 79.52%;
  left: 23.9%;
  width: 6.1%;
  height: 7.12%;
  background-size: 100% 100%;
}
section#muell div.muell19:hover,
section#muell div.muell19.hover {
  background-image: url('../../assets/images/muell/muell/m19-hover.png');
}
section#muell div.muell20 {
  background-image: url('../../assets/images/muell/muell/m20.png');
  top: 83.92%;
  left: 32.2%;
  width: 6.8%;
  height: 7.68%;
  background-size: 100% 100%;
}
section#muell div.muell20:hover,
section#muell div.muell20.hover {
  background-image: url('../../assets/images/muell/muell/m20-hover.png');
}
section#muell div.dropBio {
  background-image: url('../../assets/images/muell/saecke/bio.png');
  top: 59.76%;
  left: 77.85%;
  width: 17.35%;
  height: 23.44%;
  background-size: 100% 100%;
}
section#muell div.dropBio:hover,
section#muell div.dropBio.hover {
  background-image: url('../../assets/images/muell/saecke/bio-hover.png');
}
section#muell div.dropPapier {
  background-image: url('../../assets/images/muell/saecke/papier.png');
  top: 67.04%;
  left: 64.65%;
  width: 17.35%;
  height: 23.44%;
  background-size: 100% 100%;
}
section#muell div.dropPapier:hover,
section#muell div.dropPapier.hover {
  background-image: url('../../assets/images/muell/saecke/papier-hover.png');
}
section#muell div.dropPlastik {
  background-image: url('../../assets/images/muell/saecke/plastik.png');
  top: 60.64%;
  left: 51.1%;
  width: 17.35%;
  height: 23.44%;
  background-size: 100% 100%;
}
section#muell div.dropPlastik:hover,
section#muell div.dropPlastik.hover {
  background-image: url('../../assets/images/muell/saecke/plastik-hover.png');
}
section#muell div.info {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  background-color: black;
  color: white;
}
section#muell div.info p {
  margin: 0 10px;
  float: left;
}
section#muell .countdown {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  line-height: 200px;
  text-align: center;
  font-size: 200px;
  color: white;
  display: none;
  z-index: 200;
  text-shadow: -3px -3px 0 #000000, 3px -3px 0 #000000, -3px 3px 0 #000000, 3px 3px 0 #000000;
}
section#infoCenter {
  background-color: #72a361;
}
section#infoCenter .imageWrap {
  background-image: url('../../assets/images/infocenter/background.png');
}
section#infoCenter div.quiz {
  display: none;
  font-size: 1.3vw;
  font-weight: 400;
  color: #666666;
  text-align: center;
}
section#infoCenter div.quiz div.question {
  position: absolute;
  top: 11.04%;
  left: 25%;
  width: 50%;
  height: 28%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  padding: 15px;
  display: table;
}
section#infoCenter div.quiz div.question p {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  color: #7e3739;
}
section#infoCenter div.quiz div.answer {
  position: absolute;
  width: 50%;
  height: 9.6%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  cursor: pointer;
  display: table;
  -webkit-transition: background-color 0.8s, color 0.8s;
  transition: background-color 0.8s, color 0.8s;
}
section#infoCenter div.quiz div.answer p {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  color: #7e3739;
}
section#infoCenter div.quiz div.answer.answerA {
  top: 50%;
  left: 25%;
}
section#infoCenter div.quiz div.answer.answerB {
  top: 62.72%;
  left: 25%;
}
section#infoCenter div.quiz div.answer.answerC {
  top: 75.36%;
  left: 25%;
}
section#infoCenter div.quiz div.answer:hover {
  background-color: rgba(58, 176, 249, 0.9);
}
section#infoCenter div.quiz div.answer:hover p {
  color: white;
}
section#infoCenter div.quiz div.solution {
  position: absolute;
  width: 50%;
  height: 28%;
  top: 36%;
  left: 25%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  padding: 20px;
  display: table;
}
section#infoCenter div.quiz div.solution p {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  color: #7e3739;
}
section#laden {
  background-color: #d7d8dc;
}
section#laden .imageWrap {
  background-image: url('../../assets/images/laden/background.jpg');
}
section#laden .ladenItem {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80% auto;
}
section#laden .ladenItem:hover {
  background-color: #888;
}
section#laden div.items {
  display: none;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 30%;
  margin-left: -20%;
  margin-top: -15%;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 15px;
  overflow: hidden;
}
section#laden div.items span.title {
  position: absolute;
  bottom: 5px;
  width: 100%;
  font-size: 18px;
  color: black;
  text-align: center;
}
section#laden div.items div.itemLeft {
  top: 0px;
  left: 0px;
  width: 50%;
  height: 100%;
}
section#laden div.items div.itemRight {
  top: 0px;
  left: 50%;
  width: 50%;
  height: 100%;
}
section#laden div.items div.next {
  display: none;
  color: white;
  background-color: #1296fc;
  position: absolute;
  right: 15px;
  bottom: 15px;
  border-radius: 10px;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
section#laden div.items div.answer {
  padding: 40px 20px;
}
section#laden div.apfel {
  background-image: url('../../assets/images/laden/icons-laden/apfel.png');
}
section#laden div.banane {
  background-image: url('../../assets/images/laden/icons-laden/banane.png');
}
section#laden div.cola {
  background-image: url('../../assets/images/laden/icons-laden/cola.png');
}
section#laden div.eier {
  background-image: url('../../assets/images/laden/icons-laden/eier.png');
}
section#laden div.fisch {
  background-image: url('../../assets/images/laden/icons-laden/fisch.png');
}
section#laden div.gewuerze {
  background-image: url('../../assets/images/laden/icons-laden/gewuerze.png');
}
section#laden div.honig {
  background-image: url('../../assets/images/laden/icons-laden/honig.png');
}
section#laden div.huehnerfleisch {
  background-image: url('../../assets/images/laden/icons-laden/huehnerfleisch.png');
}
section#laden div.linsen {
  background-image: url('../../assets/images/laden/icons-laden/linsen.png');
}
section#laden div.mais {
  background-image: url('../../assets/images/laden/icons-laden/mais.png');
}
section#laden div.milchpulver {
  background-image: url('../../assets/images/laden/icons-laden/milchpulver.png');
}
section#laden div.moehre {
  background-image: url('../../assets/images/laden/icons-laden/moehre.png');
}
section#laden div.nudeln {
  background-image: url('../../assets/images/laden/icons-laden/nudeln.png');
}
section#laden div.pflanze {
  background-image: url('../../assets/images/laden/icons-laden/pflanze.png');
}
section#laden div.pilze {
  background-image: url('../../assets/images/laden/icons-laden/pilze.png');
}
section#laden div.reis {
  background-image: url('../../assets/images/laden/icons-laden/reis.png');
}
section#laden div.rindfleisch {
  background-image: url('../../assets/images/laden/icons-laden/rindfleisch.png');
}
section#laden div.schweinefleisch {
  background-image: url('../../assets/images/laden/icons-laden/schweinefleisch.png');
}
section#laden div.tomate {
  background-image: url('../../assets/images/laden/icons-laden/tomate.png');
}
section#laden div.wasser {
  background-image: url('../../assets/images/laden/icons-laden/wasser.png');
}
section#laden div.zucker {
  background-image: url('../../assets/images/laden/icons-laden/zucker.png');
}
section#markt {
  background-color: #7b7773;
}
section#markt .imageWrap {
  background-image: url('../../assets/images/markt/background.jpg');
}
section#markt div.speechBubble {
  top: 17.6%;
  left: 30%;
  width: 45%;
  height: auto;
  border: 4px solid black;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  display: none;
  padding: 25px;
}
section#markt div.answers {
  top: 73.6%;
  left: 22.2%;
  width: 60.3%;
  height: 8%;
  border: 4px solid black;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  display: none;
  padding: 25px;
  font-size: 16px;
}
section#markt div.answers span.answer1 {
  position: absolute;
  width: 80%;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  top: 20%;
  left: 10%;
}
section#markt div.answers span.answer1:hover::before {
  content: "";
  position: absolute;
  top: 15px;
  width: 10px;
  height: 10px;
  background-color: black;
  left: -20px;
}
section#markt div.answers span.answer2 {
  position: absolute;
  width: 80%;
  height: 40px;
  bottom: 20%;
  left: 10%;
  line-height: 40px;
  vertical-align: middle;
}
section#markt div.answers span.answer2:hover::before {
  content: "";
  position: absolute;
  top: 15px;
  width: 10px;
  height: 10px;
  background-color: black;
  left: -20px;
}
section#markt div#price {
  position: absolute;
  top: 10%;
  right: 10%;
  font-size: 24px;
  font-weight: bold;
  color: white;
}
div.modalButton {
  cursor: pointer;
  display: block;
  width: 40%;
  padding: 15px;
  border-radius: 15px;
  background-color: #3659be;
  color: white;
  text-align: center;
  margin: 0 auto;
}
div.footerTools {
  position: absolute;
  bottom: 0px;
  height: 75px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.35);
}
div#inventarButton {
  position: absolute;
  background-image: url('');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 80%;
  left: 85%;
  width: 10%;
  height: 16%;
  background-image: url('../../assets/images/inventar/bag-empty-close.png');
  color: white;
  text-align: center;
  cursor: pointer;
}
div#inventarButton.open {
  background-image: url('../../assets/images/inventar/bag-empty-open.png');
}
div#inventar {
  position: absolute;
  top: 24%;
  left: 85%;
  width: 10%;
  height: 48%;
  display: none;
  border-radius: 15px;
  background-color: white;
}
div#inventar div.abgeben {
  position: absolute;
  display: none;
  right: 0px;
  bottom: -80px;
  width: 100px;
  height: 50px;
  border-radius: 10px;
  color: white;
  background-color: #3fa01c;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
div#inventar .close {
  font-size: 22px;
  line-height: .5;
  position: absolute;
  top: 8px;
  right: 11px;
  color: #aaa;
  text-shadow: 0 -1px 1px rbga(0, 0, 0, 0.6);
  font-weight: bold;
  cursor: pointer;
}
div#inventar ul.list li {
  position: absolute;
  width: 100%;
  height: 33%;
  float: left;
  background-repeat: no-repeat;
  background-size: auto 80%;
  background-position: center center;
  list-style: none;
  cursor: pointer;
}
div#inventar ul.list li span {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 28px;
}
div#inventar ul.list li.banane {
  background-image: url('../../assets/images/inventar/banane.png');
}
div#inventar ul.list li.eier {
  background-image: url('../../assets/images/inventar/eier.png');
}
div#inventar ul.list li.fisch {
  background-image: url('../../assets/images/inventar/fisch.png');
}
div#inventar ul.list li.huehnerfleisch {
  background-image: url('../../assets/images/inventar/huehnerfleisch.png');
}
div#inventar ul.list li.linsen {
  background-image: url('../../assets/images/inventar/linsen.png');
}
div#inventar ul.list li.mallungai {
  background-image: url('../../assets/images/inventar/mallunggay.png');
}
div#inventar ul.list li.moehre {
  background-image: url('../../assets/images/inventar/moehre.png');
}
div#inventar ul.list li.nudeln {
  background-image: url('../../assets/images/inventar/nudeln.png');
}
div#inventar ul.list li.pilze {
  background-image: url('../../assets/images/inventar/pilze.png');
}
div#inventar ul.list li.reis {
  background-image: url('../../assets/images/inventar/reis.png');
}
div#inventar ul.list li.tomate {
  background-image: url('../../assets/images/inventar/tomate.png');
}
div#inventar ul.list li.zucker {
  background-image: url('../../assets/images/inventar/zucker.png');
}
div#inventar ul.list li:nth-child(1) {
  top: 0;
  left: 0;
}
div#inventar ul.list li:nth-child(2) {
  top: 33%;
  left: 0;
}
div#inventar ul.list li:nth-child(3) {
  top: 60%;
  left: 0;
}
div#pointUI {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 180px;
  height: 30px;
  color: black;
  font-size: 45px;
  padding: 15px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  background-image: url('../../assets/images/inventar/stern.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  text-align: right;
  vertical-align: middle;
  line-height: 30px;
}
div#dayUI {
  position: absolute;
  top: 5%;
  left: 5%;
  width: auto;
  height: 30px;
  color: black;
  font-size: 32px;
  padding: 15px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: left;
  vertical-align: middle;
  line-height: 30px;
}