#winkelgasse {
position: absolute;
left: 50%;
margin-left: -350px;
width: 700px;
height: 354px;
margin-top: 330px;
margin-bottom: 100px;
align: center;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
border-radius: 5px;
background: transparent;
border: 0px;
box-shadow: 0 0 20px #ffffff;
}

@-webkit-keyframes winkelgasseschrift {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-2px, -4px) rotate(-2deg); }
20% { -webkit-transform: translate(-6px, 0px) rotate(2deg); }
30% { -webkit-transform: translate(0px, 4px) rotate(0deg); }
40% { -webkit-transform: translate(2px, -2px) rotate(2deg); }
50% { -webkit-transform: translate(-2px, 4px) rotate(-2deg); }
60% { -webkit-transform: translate(-6px, 2px) rotate(0deg); }
70% { -webkit-transform: translate(4px, 2px) rotate(-2deg); }
80% { -webkit-transform: translate(-2px, -2px) rotate(2deg); }
90% { -webkit-transform: translate(4px, 4px) rotate(0deg); }
100% { -webkit-transform: translate(2px, 1px) rotate(-2deg); }
}

@-moz-keyframes winkelgasseschrift {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-2px, -4px) rotate(-2deg); }
20% { -moz-transform: translate(-6px, 0px) rotate(2deg); }
30% { -moz-transform: translate(0px, 4px) rotate(0deg); }
40% { -moz-transform: translate(2px, -2px) rotate(2deg); }
50% { -moz-transform: translate(-2px, 4px) rotate(-2deg); }
60% { -moz-transform: translate(-6px, 2px) rotate(0deg); }
70% { -moz-transform: translate(4px, 2px) rotate(-2deg); }
80% { -moz-transform: translate(-2px, -2px) rotate(2deg); }
90% { -moz-transform: translate(4px, 4px) rotate(0deg); }
100% { -moz-transform: translate(2px, 1px) rotate(-2deg); }
}

@keyframes winkelgasseschrift {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-2px, -4px) rotate(-2deg); }
20% { transform: translate(-6px, 0px) rotate(2deg); }
30% { transform: translate(0px, 4px) rotate(0deg); }
40% { transform: translate(2px, -2px) rotate(2deg); }
50% { transform: translate(-2px, 4px) rotate(-2deg); }
60% { transform: translate(-6px, 2px) rotate(0deg); }
70% { transform: translate(4px, 2px) rotate(-2deg); }
80% { transform: translate(-2px, -2px) rotate(2deg); }
90% { transform: translate(4px, 4px) rotate(0deg); }
100% { transform: translate(2px, 1px) rotate(-2deg); }
}

.winkelgasseschrift {
-webkit-animation-name: winkelgasseschrift;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: winkelgasseschrift;
-moz-animation-duration: 60s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: winkelgasseschrift;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
height: 142px;
width: 350px;
left: 150px;
top: 250px;
position: absolute;
background: url(winkelgasseschrift.png) center no-repeat;
z-index: 5;
} 

.weg {
position: absolute;
width: 700px;
height: 354px;
top: 0px;
left: 0px;
background: url(weg.png);
z-index: 2;
}

.boden {
position: absolute;
width: 700px;
height: 354px;
top: 0px;
left: 0px;
background: url(boden.png);
z-index: 1;
}

@-webkit-keyframes nacht {
0% { opacity: 0; -webkit-transform: scale(1.0); }
25% { opacity: 1; -webkit-transform: scale(1.0); }
50% { opacity: 1; -webkit-transform: scale(1.0); }
100% { opacity: 0; -webkit-transform: scale(1.0); }
}

@-moz-keyframes nacht {
0% { opacity: 0; -moz-transform: scale(1.0); }
25% { opacity: 1; -moz-transform: scale(1.0); }
50% { opacity: 1; -moz-transform: scale(1.0); }
100% { opacity: 0; -moz-transform: scale(1.0); }
}

@keyframes nacht {
0% { opacity: 0; transform: scale(1.0); }
25% { opacity: 1; transform: scale(1.0); }
50% { opacity: 1; transform: scale(1.0); }
100% { opacity: 0; transform: scale(1.0); }
}

.nacht {
-webkit-animation-name: nacht;
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: nacht;
-moz-animation-duration: 30s;
-moz-animation-iteration-count: infinite;
animation-name: nacht;
animation-duration: 30s;
animation-iteration-count: infinite;
background: url(nachtweg.png);
position: absolute;
width: 700px;
height: 354px;
top: 0px;
left: 0px;
z-index: 0;
} 

@-webkit-keyframes sterne {
0% { opacity: 0; -webkit-transform: scale(1.0); }
25% { opacity: 1; -webkit-transform: scale(1.0); }
50% { opacity: 1; -webkit-transform: scale(1.0); }
100% { opacity: 0; -webkit-transform: scale(1.0); }
}

@-moz-keyframes sterne {
0% { opacity: 0; -moz-transform: scale(1.0); }
25% { opacity: 1; -moz-transform: scale(1.0); }
50% { opacity: 1; -moz-transform: scale(1.0); }
100% { opacity: 0; -moz-transform: scale(1.0); }
}

@keyframes sterne {
0% { opacity: 0; transform: scale(1.0); }
25% { opacity: 1; transform: scale(1.0); }
50% { opacity: 1; transform: scale(1.0); }
100% { opacity: 0; transform: scale(1.0); }
}

.sterne {
-webkit-animation-name: sterne;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: sterne;
-moz-animation-duration: 60s;
-moz-animation-iteration-count: infinite;
animation-name: sterne;
animation-duration: 60s;
animation-iteration-count: infinite;
background: url(sterne.png);
position: absolute;
width: 700px;
height: 354px;
top: 0px;
left: 0px;
z-index: 1;
} 

@-webkit-keyframes mond {
0% { opacity: 0; -webkit-transform: scale(1.0); }
25% { opacity: 1; -webkit-transform: scale(1.0); }
50% { opacity: 1; -webkit-transform: scale(1.0); }
100% { opacity: 0; -webkit-transform: scale(1.0); }
}

@-moz-keyframes mond {
0% { opacity: 0; -moz-transform: scale(1.0); }
25% { opacity: 1; -moz-transform: scale(1.0); }
50% { opacity: 1; -moz-transform: scale(1.0); }
100% { opacity: 0; -moz-transform: scale(1.0); }
}

@keyframes mond {
0% { opacity: 0; transform: scale(1.0); }
25% { opacity: 1; transform: scale(1.0); }
50% { opacity: 1; transform: scale(1.0); }
100% { opacity: 0; transform: scale(1.0); }
}

.mond {
-webkit-animation-name: mond;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: mond;
-moz-animation-duration: 60s;
-moz-animation-iteration-count: infinite;
animation-name: mond;
animation-duration: 60s;
animation-iteration-count: infinite;
background: url(mond.png);
position: absolute;
width: 700px;
height: 354px;
top: 0px;
left: 0px;
z-index: 1;
} 

@-webkit-keyframes wolkennacht {
0% { opacity: 0; -webkit-transform: translate(8px, 0px) ; }
25% { opacity: 1; -webkit-transform: translate(5px, 0px) ; }
50% { opacity: 1; -webkit-transform: translate(12px, 0px) ; }
100% { opacity: 0; -webkit-transform: translate(10px, 0px) ; }
}

@-moz-keyframes wolkennacht {
0% { opacity: 0; -moz-transform: translate(8px, 0px) ; }
25% { opacity: 1; -moz-transform: translate(5px, 0px) ; }
50% { opacity: 1; -moz-transform: translate(12px, 0px) ; }
100% { opacity: 0; -moz-transform: translate(10px, 0px) ; }
}

@keyframes wolkennacht {
0% { opacity: 0; transform: translate(8px, 0px) ; }
25% { opacity: 1; transform: translate(5px, 0px) ; }
50% { opacity: 1; transform: translate(12px, 0px) ; }
100% { opacity: 0; transform: translate(10px, 0px) ; }
}

.wolkennacht {
-webkit-animation-name: wolkennacht;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: wolkennacht;
-moz-animation-duration: 60s;
-moz-animation-iteration-count: infinite;
animation-name: wolkennacht;
animation-duration: 60s;
animation-iteration-count: infinite;
background: url(wolkennacht.png);
position: absolute;
width: 700px;
height: 354px;
top: 30px;
left: -20px;
z-index: 2;
} 

@-webkit-keyframes tag {
0% { opacity: 1; -webkit-transform: scale(1.0); }
25% { opacity: 0; -webkit-transform: scale(1.0); }
50% { opacity: 0; -webkit-transform: scale(1.0); }
100% { opacity: 1; -webkit-transform: scale(1.0); }
}

@-moz-keyframes tag {
0% { opacity: 1; -moz-transform: scale(1.0); }
25% { opacity: 0; -moz-transform: scale(1.0); }
50% { opacity: 0; -moz-transform: scale(1.0); }
100% { opacity: 1; -moz-transform: scale(1.0); }
}

@keyframes tag {
0% { opacity: 1; transform: scale(1.0); }
25% { opacity: 0; transform: scale(1.0); }
50% { opacity: 0; transform: scale(1.0); }
100% { opacity: 1; transform: scale(1.0); }
}

.tag {
-webkit-animation-name: tag;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: tag;
-moz-animation-duration: 60s;
-moz-animation-iteration-count: infinite;
animation-name: tag;
animation-duration: 60s;
animation-iteration-count: infinite;
background: url(tagweg.png);
position: absolute;
width: 700px;
height: 354px;
top: 0px;
left: 0px;
z-index: 0;
} 

@-webkit-keyframes wolken {
0% { opacity: 1; -webkit-transform: translate(8px, 0px) ; }
25% { opacity: 0; -webkit-transform: translate(5px, 0px) ; }
50% { opacity: 0; -webkit-transform: translate(12px, 0px) ; }
100% { opacity: 1; -webkit-transform: translate(10px, 0px) ; }
}

@-moz-keyframes wolken {
0% { opacity: 1; -moz-transform: translate(8px, 0px) ; }
25% { opacity: 0; -moz-transform: translate(5px, 0px) ; }
50% { opacity: 0; -moz-transform: translate(12px, 0px) ; }
100% { opacity: 1; -moz-transform: translate(10px, 0px) ; }
}

@keyframes wolken {
0% { opacity: 1; transform: translate(8px, 0px) ; }
25% { opacity: 0; transform: translate(5px, 0px) ; }
50% { opacity: 0; transform: translate(12px, 0px) ; }
100% { opacity: 1; transform: translate(10px, 0px) ; }
}

.wolken {
-webkit-animation-name: wolken;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: wolken;
-moz-animation-duration: 60s;
-moz-animation-iteration-count: infinite;
animation-name: wolken;
animation-duration: 60s;
animation-iteration-count: infinite;
background: url(wolken.png);
position: absolute;
width: 700px;
height: 354px;
top: 0px;
left: 0px;
z-index: 3;
} 

@-webkit-keyframes sonne {
0% { opacity: 1; -webkit-transform: translate(0px, 0px) ; }
20% { opacity: 0; -webkit-transform: translate(0px, 0px) ; }
70% { opacity: 0; -webkit-transform: translate(0px, 100px) ; }
90% { opacity: 1; -webkit-transform: translate(0px, 0px) ; }
}

@-moz-keyframes sonne {
0% { opacity: 1; -moz-transform: translate(0px, 0px) ; }
20% { opacity: 0; -moz-transform: translate(0px, 0px) ; }
70% { opacity: 0; -moz-transform: translate(0px, 100px) ; }
90% { opacity: 1; -moz-transform: translate(0px, 0px) ; }
}

@keyframes sonne {
0% { opacity: 1; transform: translate(0px, 0px) ; } 
20% { opacity: 0; transform: translate(0px, 0px) ; }
70% { opacity: 0; transform: translate(0px, 100px) ; }
90% { opacity: 1; transform: translate(0px, 0px) ; }
}

.sonne {
-webkit-animation-name: sonne;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: sonne;
-moz-animation-duration: 60s;
-moz-animation-iteration-count: infinite;
animation-name: sonne;
animation-duration: 60s;
animation-iteration-count: infinite;
background: url(sonne.png);
position: absolute;
width: 700px;
height: 354px;
top: 0px;
left: -40px;
z-index: 1;
} 

.floreans a .image {
background: url(floreans.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 100px;
height: 125px;
bottom: -50px;
top: 138px;
left: -23px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 11;
}

.floreans a:hover .image {
background: url(floreans2.png) center no-repeat;
text-decoration: none;
top: 138px;
left: -23px;
transition: all 0.5s ease-in-out
z-index: 11;
}

.floreans a:link {
color: #000000;
text-decoration: none; 
} 

.floreans a span {
width: 140px;
height: 33px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 60px;
left: 0px;
padding-top: 4px;
background: url(schriftbandwinkelgasse2.png);
z-index: 4;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.floreans a:hover span {
top: 55px;
left: 0px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 4;
}

.floreans {
background: transparent;
}


.eeylops a .image {
background: url(eeylops.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 105px;
height: 95px;
bottom: -50px;
top: 152px;
left: 9px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 10;
}

.eeylops a:hover .image {
background: url(eeylops2.png) center no-repeat;
text-decoration: none;
top: 152px;
left: 9px;
transition: all 0.5s ease-in-out
z-index: 10;
}

.eeylops a:link {
color: #000000;
text-decoration: none; 
} 

.eeylops a span {
width: 140px;
height: 33px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 20px;
left: 3px;
padding-top: 4px;
background: url(schriftbandwinkelgasse2.png);
z-index: 4;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.eeylops a:hover span {
top: 15px;
left: 3px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 4;
}

.eeylops {
background: transparent;
}

.quidditch a .image {
background: url(quidditch.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 100px;
height: 120px;
bottom: -50px;
top: 102px;
left: 78px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 4;
}

.quidditch a:hover .image {
background: url(quidditch2.png) center no-repeat;
text-decoration: none;
top: 102px;
left: 78px;
transition: all 0.5s ease-in-out
z-index: 4;
}

.quidditch a:link {
color: #000000;
text-decoration: none; 
} 

.quidditch a span {
width: 140px;
height: 33px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 80px;
left: 55px;
padding-top: 4px;
background: url(schriftbandwinkelgasse2.png);
z-index: 5;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.quidditch a:hover span {
top: 75px;
left: 55px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 5;
}

.quidditch {
background: transparent;
}

.ollivanders a .image {
background: url(ollivanders.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 100px;
height: 75px;
bottom: -50px;
top: 167px;
left: 121px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 9;
}

.ollivanders a:hover .image {
background: url(ollivanders2.png) center no-repeat;
text-decoration: none;
top: 167px;
left: 121px;
transition: all 0.5s ease-in-out
z-index: 9;
}

.ollivanders a:link {
color: #000000;
text-decoration: none; 
} 

.ollivanders a span {
width: 140px;
height: 33px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 70px;
left: 100px;
padding-top: 4px;
background: url(schriftbandwinkelgasse2.png);
z-index: 5;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.ollivanders a:hover span {
top: 65px;
left: 100px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 5;
}

.ollivanders {
background: transparent;
}

.apotheke a .image {
background: url(apotheke.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 75px;
height: 140px;
bottom: -50px;
top: 60px;
left: 150px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 4;
}

.apotheke a:hover .image {
background: url(apotheke2.png) center no-repeat;
text-decoration: none;
top: 60px;
left: 150px;
transition: all 0.5s ease-in-out
z-index: 4;
}

.apotheke a:link {
color: #000000;
text-decoration: none; 
} 

.apotheke a span {
width: 140px;
height: 33px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 30px;
left: 125px;
padding-top: 4px;
background: url(schriftbandwinkelgasse2.png);
z-index: 4;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.apotheke a:hover span {
top: 25px;
left: 125px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 4;
}

.apotheke {
background: transparent;
}

.malkins a .image {
background: url(malkins.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 85px;
height: 86px;
bottom: -50px;
top: 127px;
left: 195px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 8;
}

.malkins a:hover .image {
background: url(malkins2.png) center no-repeat;
text-decoration: none;
top: 127px;
left: 195px;
transition: all 0.5s ease-in-out
z-index: 8;
}

.malkins a:link {
color: #000000;
text-decoration: none; 
} 

.malkins a span {
width: 140px;
height: 33px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 50px;
left: 165px;
padding-top: 4px;
background: url(schriftbandwinkelgasse2.png);
z-index: 8;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.malkins a:hover span {
top: 45px;
left: 165px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 8;
}

.malkins {
background: transparent;
}

.gringotts a .image {
background: url(gringotts.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 210px;
height: 215px;
bottom: -50px;
top: 0px;
left: 230px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 4;
}

.gringotts a:hover .image {
background: url(gringotts2.png) center no-repeat;
text-decoration: none;
top: 0px;
left: 230px;
transition: all 0.5s ease-in-out
z-index: 4;
}

.gringotts a:link {
color: #000000;
text-decoration: none; 
} 

.gringotts a span {
width: 140px;
height: 33px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 60px;
left: 260px;
padding-top: 4px;
background: url(schriftbandwinkelgasse2.png);
z-index: 4;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.gringotts a:hover span {
top: 55px;
left: 260px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 4;
}

.gringotts {
background: transparent;
}

.florish a .image {
background: url(florish.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 120px;
height: 106px;
bottom: -50px;
top: 116px;
left: 388px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 5;
}

.florish a:hover .image {
background: url(florish2.png) center no-repeat;
text-decoration: none;
top: 116px;
left: 388px;
transition: all 0.5s ease-in-out
z-index: 5;
}

.florish a:link {
color: #000000;
text-decoration: none; 
} 

.florish a span {
width: 140px;
height: 33px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 30px;
left: 380px;
padding-top: 4px;
background: url(schriftbandwinkelgasse2.png);
z-index: 5;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.florish a:hover span {
top: 25px;
left: 380px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 5;
}

.florish {
background: transparent;
}

.kessel a .image {
background: url(kessel.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 60px;
height: 120px;
bottom: -50px;
top: 120px;
left: 485px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 6;
}

.kessel a:hover .image {
background: url(kessel2.png) center no-repeat;
text-decoration: none;
top: 120px;
left: 485px;
transition: all 0.5s ease-in-out
z-index: 6;
}

.kessel a:link {
color: #000000;
text-decoration: none; 
} 

.kessel a span {
width: 140px;
height: 31px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 70px;
left: 445px;
padding-top: 5px;
background: url(schriftbandwinkelgasse2.png);
z-index: 6;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.kessel a:hover span {
top: 70px;
left: 445px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 6;
}

.kessel {
background: transparent;
}

.secondhand a .image {
background: url(secondhand.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 66px;
height: 100px;
bottom: -50px;
top: 178px;
left: 520px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 7;
}

.secondhand a:hover .image {
background: url(secondhand2.png) center no-repeat;
text-decoration: none;
top: 178px;
left: 520px;
transition: all 0.5s ease-in-out
z-index: 4;
}

.secondhand a:link {
color: #000000;
text-decoration: none; 
} 

.secondhand a span {
width: 140px;
height: 33px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 50px;
left: 495px;
padding-top: 4px;
background: url(schriftbandwinkelgasse2.png);
z-index: 7;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.secondhand a:hover span {
top: 45px;
left: 495px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 7;
}

.secondhand {
background: transparent;
}

.presente a .image {
background: url(presente.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 110px;
height: 106px;
bottom: -50px;
top: 198px;
left: 540px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 8;
}

.presente a:hover .image {
background: url(presente2.png) center no-repeat;
text-decoration: none;
top: 198px;
left: 540px;
transition: all 0.5s ease-in-out
z-index: 8;
}

.presente a:link {
color: #000000;
text-decoration: none; 
} 

.presente a span {
width: 140px;
height: 31px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 90px;
left: 525px;
padding-top: 5px;
background: url(schriftbandwinkelgasse2.png);
z-index: 8;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.presente a:hover span {
top: 85px;
left: 525px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 8;
}

.presente {
background: transparent;
}

.weasleys a .image {
background: url(weasleys.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 100px;
height: 78px;
bottom: -50px;
top: 195px;
left: 615px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 5;
}

.weasleys a:hover .image {
background: url(weasleys2.png) center no-repeat;
text-decoration: none;
top: 195px;
left: 615px;
transition: all 0.5s ease-in-out
z-index: 5;
}

.weasleys a:link {
color: #000000;
text-decoration: none; 
} 

.weasleys a span {
width: 140px;
height: 33px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 100px;
left: 565px;
padding-top: 4px;
background: url(schriftbandwinkelgasse2.png);
z-index: 4;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.weasleys a:hover span {
top: 95px;
left: 565px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 4;
}

.weasleys {
background: transparent;
}

.borgin a .image {
background: url(borgin.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 100px;
height: 78px;
bottom: -50px;
top: 166px;
left: 590px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 4;
}

.borgin a:hover .image {
background: url(borgin2.png) center no-repeat;
text-decoration: none;
top: 166px;
left: 590px;
transition: all 0.5s ease-in-out
z-index: 4;
}

.borgin a:link {
color: #000000;
text-decoration: none; 
} 

.borgin a span {
width: 140px;
height: 31px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 50px;
left: 560px;
padding-top: 5px;
background: url(schriftbandwinkelgasse2.png);
z-index: 4;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.borgin a:hover span {
top: 45px;
left: 560px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 4;
}

.borgin {
background: transparent;
}

.kuerbis a .image {
background: url(kuerbis.png) center no-repeat;
position: absolute;
text-decoration: none;
width: 96px;
height: 85px;
top: 270px;
left: 40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 10;
}

.kuerbis a:hover .image {
background: url(kuerbisleuchtend.png) center no-repeat;
text-decoration: none;
top: 270px;
left: 40px;
transition: all 0.5s ease-in-out
z-index: 9;
}

.kuerbis a:link {
color: #000000;
text-decoration: none; 
} 

.kuerbis a span {
width: 171px;
height: 80px;
position: absolute;
padding: 0;
font-size: 12px;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #666666;
top: 260px;
left: 70px;
padding-top: 5px;
background: url(sprechblase1.png);
z-index: 11;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.kuerbis a:hover span {
top: 260px;
left: 70px;
font-size: 12px;
text-decoration: none;
text-underline: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 1;
z-index: 11;
}

.kuerbis {
background: transparent;
}