#yposition {
    position: absolute;
    top: 0px;
}
#slidepos {
    position: absolute;
    top: 175px;
    left: 225px;
    z-index: 10;
}
#boxunterslide {
    position: absolute;
    top: 525px;
    left: 225px;
    width: 800px;
    height: 75px;
    border:inherit 2px #000000;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:11px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:11px;
border-bottom-right-radius:0px;
    
  background:-webkit-gradient(linear, 0% 100%, 0% 16%, from(#DDDDDD), to(#BABABA));
}
#boxnebenslide {
    position: absolute;
    top: 180px;
    left: 0px;
    width: 1024px;
    height: 300px;
  
    border:inherit 5px #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:10px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#D5D5D5), to(#F16100))
}

#box2nebenslide {
    position: absolute;
    top: 680px;
    left: 0px;
    width: 1024px;
    height: 360px;

    border:inherit 5px #000000;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:10px;
border-bottom-right-radius:0px;
background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#D5D5D5), to(#F16100))
}

#box2unterslide {
    position: absolute;
    top: 205px;
    left: 75px;
    width: 950px;
    height: 800px;

    border:inherit 2px #000000;
-moz-border-radius-topleft: 11px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:11px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:11px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:11px;
border-top-right-radius:0px;
border-bottom-left-radius:11px;
border-bottom-right-radius:0px;
background:-webkit-gradient(linear, 0% 100%, 0% 16%, from(#BABABA), to(#DDDDDD));
}
#back-button {
    position: absolute;
    top: 30px;
    left: 850px;
    width: 80px;
    height: 30px;
    background-color: black;
border:inherit 0px #000000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
#back-button:hover {
    background-color: #808080;
}
#back-button p {
    color: white;
    font-size: 20px;
    text-align: center;
    line-height: 30px;

}
#uberschrift {
    position: absolute;
    top: 40px;
    left: 30px;
}
#uberschrift h1 {
    color: #858788;
    font-family: sans-serif;
    font-size: 40px;
}

#button1info {
    position:  absolute;
    top: 505px;
    left: 0px;
    width: 50px;
    height: 150px;
    background-color:black;

border:inherit 0px #000000;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:0px;
border-top-right-radius:10px;
border-bottom-left-radius:0px;
border-bottom-right-radius:10px;

}
#button1info p {
     position: relative;
    top: 65px;
    left: -20px;
    color: white;
    font-family: sans-serif;
    font-size: 17px;
    font-weight: bold;
    
    width: 100px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: lr-tb;
}


#button1hover {
    position:  absolute;
    top: 505px;
    left: 0px;
    width: 50px;
    height: 150px;
    background-color:  transparent;
    z-index: 2000;

border:inherit 0px #000000;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:18px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:18px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:18px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:18px;
border-top-left-radius:0px;
border-top-right-radius:18px;
border-bottom-left-radius:0px;
border-bottom-right-radius:18px;


    -webkit-transition-property: width,  border-radius;
    -webkit-transition-duration: 1s;
    transition-property: width,  border-radius;
    transition-duration: 1s;

}

#button1hover  p {

position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 0px;
padding-left: 370px;
padding-right: 10px;

background-color: #DDDDDD;
font-size: 0px;
color: black;
-webkit-transition-property: width, height, left, top;
-webkit-transition-duration: 1s;
transition-property: width, height, left, top;
transition-duration: 1s;

}

#button1hover:hover p {
    top: -180px;
    left: 100px;
    width: 350px;
    height: 450px;
    font-size: 16px;
    font-family: sans-serif;
    line-height: 1.5;
     -webkit-transition: all 1.0s ease-in-out;
    transition: all 1.0s ease-in-out;

}

#button1hover  img {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    
    -webkit-transition-property: width, height, left, top;
    -webkit-transition-duration: 1s;
    transition-property: width, height, left, top;
    transition-duration: 1s;

}

#button1hover:hover img {
    top: -160px;
    left:130px;
    width: 324px;
    height: 400px;
    border: solid;
    border-color: #444851;
    border-width: 4px;
    z-index: 20000;
    /*border-color: rgba(128,128,128,0.6);*/
    -webkit-transition: all 1.0s ease-in-out;
    transition: all 1.0s ease-in-out;
}
#info-bild {
    position: absolute;
    top: 0px;
    left: 340px;
}

#produktfeld {
    position: absolute;
    top: 300px;
    left: 100px;
    width: 900px;
    height: 695px;
    background-color: #858788;

}

.bildgrosse img {
    position: absolute;
    width: 150px;
    height: 300px;
    border-style: solid;
    border-color: #BBBFC2;
    border-width: 15px;
    z-index: 1;
    -webkit-transition-property: border-color, width, height, z-index ;
    -webkit-transition-duration: 1s;
    -moz-transition-property: border-color, width, height, z-index ;
    -moz-transition-duration: 1s;
    -o-transition-property: border-color, width, height, z-index;
    -o-transition-duration: 1s;
    -ms-transition-property: border-color, width, height, z-index;
    -ms-transition-duration: 1s;
    transition-property: border-color, width, height, z-index;
    transition-duration: 1s;
}

.bildgrosse:hover img {
    position: absolute;
    width: 300px;
    height: 600px;
    border-color:white;
    z-index: 100;
     -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;

}
.bildgrosse p {
    position:  absolute;
    top: 300px;
    left: 18px;
     z-index: 10;
    font-size: 10px;
    color: black;
    width: 300px;
    -webkit-transition-property: top, font-size ;
    -webkit-transition-duration: 1s;
    -moz-transition-property: top, font-size ;
    -moz-transition-duration: 1s;
    -o-transition-property: top, font-size;
    -o-transition-duration: 1s;
    -ms-transition-property: top, font-size;
    -ms-transition-duration: 1s;
    transition-property: top, font-size;
    transition-duration: 1s;
}
.bildgrosse:hover p{
    top: 590px;
    font-size: 25px;
    color:  white;
    z-index: 10000;
    width: 300px;
     -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;

}

#bild1 {
    position:  absolute;
    top: 10px;
    left: 95px;
}

#bild2 {
    position:  absolute;
    top: 10px;
    left: 260px;
}

#bild3 {
    position:  absolute;
    top: 10px;
    left: 425px;
}
#bild4 {
    position:  absolute;
    top: 10px;
    left: 590px;
}

#bild5 {
    position:  absolute;
    top: 10px;
    left: 695px;
}

#bild6 {
    position:  absolute;
    top: 325px;
    left: 95px;
}
#bild7 {
    position:  absolute;
    top: 325px;
    left: 260px;
}

#bild8 {
    position:  absolute;
    top: 325px;
    left: 425px;
}
#bild9 {
    position:  absolute;
    top: 325px;
    left: 590px;
}
#bild10 {
    position:  absolute;
    top: 175px;
    left: 695px;
}

#bild11 {
    position:  absolute;
    top: 340px;
    left: 35px;
}

#bild12 {
    position:  absolute;
    top: 340px;
    left: 200px;
}

#bild13 {
    position:  absolute;
    top: 340px;
    left: 365px;
}

#bild14 {
    position:  absolute;
    top: 340px;
    left: 530px;
}

#bild15 {
    position:  absolute;
    top: 340px;
    left: 695px;
}

#bild16 {
    position:  absolute;
    top: 505px;
    left: 35px;
}

#bild17 {
    position:  absolute;
    top: 505px;
    left: 200px;
}

#bild18 {
    position:  absolute;
    top: 505px;
    left: 365px;
}

#bild19 {
    position:  absolute;
    top: 505px;
    left: 530px;
}

#bild20 {
    position:  absolute;
    top: 505px;
    left: 695px;
}