#outerholder {
    max-width: 600px;
}


#imgholder img {
    position: absolute;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#imgholder {
    /* background-image: url(img_blueten/1695-600.jpg); */
    background-repeat: no-repeat;
    background-size: cover;
}

.fp, .fptrans {
    top: -20%;
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 20%;
    background-size: cover;
}

.fptrans {
   transition: 0.3s linear;
}

#fpa {
    background-position: 0 100%;
}

#fpb {
    background-position: 0 75%;
}

#fpc {
    background-position: 0 50%;
}

#fpd {
    background-position: 0 25%;
}

#fpe {
    background-position: 0 0;
}

.top0 {
    top: 0%;
    transition: 0.1s ease-in;
}

.top20 {
    top: 20%;
    transition: 0.2s ease-in;
}

.top40 {
    top: 40%;
    transition: 0.3s ease-in;
}

.top60 {
    top: 60%;
    transition: 0.4s ease-in;
}

.top80 {
    top: 80%;
    transition: 0.5s ease-in;
}

.notrans {
    transition: 0s;
}