/* CSS Document */

#image_sizer {
    width: 100%;
    height: 50px;
    padding: 10 0 0 0;
    position:relative;
    background-color: transparent;
    border-radius: 10px;
}

#image_sizer a {
    display: table-cell;
    width: 1%;
    outline: none;
    border: 4px solid transparent;
}

#image_sizer a span {
    display: block;
    padding-bottom: 40%;
    margin: 4px;
}

#image_sizer a:focus {
    background-color:  transparent;
    border: 4px solid #4b904a
}

#image_sizer .image span,#image_sizer a span {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
}

.image {
    position: absolute;
    width: 100%;
    padding-bottom: 0%;
    background-color: transparent;
    box-shadow: 0 50px 30px -30px black;
    opacity: 0;
    transition: .5s .4s
}

.image span {
    position: absolute;
    margin: 1%;
    width: 98%;
    height: 97.5%;
}

/* zusätzliche Bilder ab hier */

.p1 {
    background-image: url(piczert/diplsport.jpg)
}

.p2 {
    background-image: url(piczert/dosb.jpg)
}

.p3 {
    background-image: url(piczert/fitnessb.jpg)
}

.p4 {
    background-image: url(piczert/aerogymb.jpg)
}

.p5 {
    background-image: url(piczert/pilates.jpg)
}

.p6 {
    background-image: url(piczert/bebo.jpg)
}

.p7 {
    background-image: url(piczert/cardio.jpg)
}

.p8 {
    background-image: url(piczert/stickwalk.jpg)
}

.p9 {
    background-image: url(piczert/indorcycl.jpg)
}

.a1:focus ~ .i1 {
    padding-bottom:100%;
    z-index: 100;
    opacity: 1;
    transition: opacity .5s
}

.a2:focus ~ .i2 {
    padding-bottom: 100%;
    z-index: 100;
    opacity: 1;
    transition: opacity .5s
}

.a3:focus ~ .i3 {
    padding-bottom: 100%;
    z-index: 100;
    opacity: 1;
    transition: opacity .5s
}

.a4:focus ~ .i4 {
    padding-bottom: 100%;
    z-index: 100;
    opacity: 1;
    transition: opacity .5s
}

.a5:focus ~ .i5 {
    padding-bottom: 100%;
    z-index: 100;
    opacity: 1;
    transition: opacity .5s
} 

.a6:focus ~ .i6 {
    padding-bottom: 100%;
    z-index: 100;
    opacity: 1;
    transition: opacity .5s
}

.a7:focus ~ .i7 {
    padding-bottom: 100%;
    z-index: 100;
    opacity: 1;
    transition: opacity .5s
}

.a8:focus ~ .i8 {
    padding-bottom: 100%;
    z-index: 100;
    opacity: 1;
    transition: opacity .5s
}

.a9:focus ~ .i9 {
    padding-bottom: 100%;
    z-index: 100;
    opacity: 1;
    transition: opacity .5s
}