/*--- Struktur Galerie ---*/

/* -- galerie --*/
.gallery {
    margin:0 auto;
    display:flex;
    justify-content:center;
    width:98%;
}
 .gallery p {
     width:15%;     
     padding:17px;
     background-color:#aaaaaa;
     box-shadow:2px 2px 2px 2px #eeeeee inset,-2px -2px 2px 2px black inset;
     border-radius:12px;
}
.gallery a {
    outline:none;
    text-decoration:none;
    display:block;
    width:100%;
    padding-bottom:100%;
    background-color:#aaaaaa;
    border:0px solid #777777;
    background-size:contain;
}
.gallery a,.gallery span{
    background-repeat:no-repeat;
    background-position:center;    
}  
.gallery span {
    position:fixed;
    left:0;top:0;
    right:0;
    bottom:0;
    display:none;
    background-color: rgb(39,78,11);
}
.gallery a:focus +span {
    display:block;    
    z-index:200;    
}

/* -- Url Bilder --*/
/* -- Lilien --*/
#p1,#p1 + span {background-image:url(images/lolipop.jpg)}
#p2,#p2 + span {background-image:url(images/conect.jpg)}
#p3,#p3 + span {background-image:url(images/rising.jpg)}
#p4,#p4 + span {background-image:url(images/rosita.jpg)}
#p5,#p5 + span {background-image:url(images/stargaze.jpg)}
#p6,#p6 + span {background-image:url(images/lilie01.jpg)}
#p7,#p7 + span {background-image:url(images/lilie02.jpg)}
#p8,#p8 + span {background-image:url(images/lilie03.jpg)}
#p9,#p9 + span {background-image:url(images/lilie04.jpg)}
/* -- Sonstige --*/
#p11,#p11 + span {background-image:url(images/ismene.jpg)}
#p12,#p12 + span {background-image:url(images/ismene_g.jpg)}
#p13,#p13 + span {background-image:url(images/calla1.jpg)}
#p14,#p14 + span {background-image:url(images/calla2.jpg)}
#p15,#p15 + span {background-image:url(images/hemero1.jpg)}
#p16,#p16 + span {background-image:url(images/hemero2.jpg)}
#p17,#p17 + span {background-image:url(images/iris.jpg)}
#p18,#p18 + span {background-image:url(images/rose_gelb.jpg)}
#p19,#p19 + span {background-image:url(images/yucca-palme.jpg)}
#p20,#p20 + span {background-image:url(images/stech.jpg)}
#p21,#p21 + span {background-image:url(images/primel.jpg)}
#p22,#p22 + span {background-image:url(images/kletterblume.jpg)}
#p23,#p23 + span {background-image:url(images/kaktus.jpg)}

/* -- Responsive Dias und großes Bild anzeigen --*/
@media screen and (max-width: 820px) {
    
.gallery a:focus +span {
    display:block;        
    background-size: 360px auto;    
}
.gallery p {
     width:13%;     
     padding:11px;
     background-color:#aaaaaa;
     box-shadow:2px 2px 2px 2px #eeeeee inset,-2px -2px 2px 2px black inset;
     border-radius:8px;
}
}