.galleryContainer {
    overflow:  hidden;
    margin:    0;
    display:   flex;
    flex-wrap: wrap;
}

.galleryBox {
    position:       relative;
    width:          100%;
    padding-bottom: 100%;
}

#zertifikatGalerie .galleryBox {
    padding-bottom: 130%;
}

.galleryImage {
    position: absolute;
    left:     1em;
    right:    1em;
    top:      1em;
    bottom:   1em;
    overflow: hidden;
    border:   1px solid #DDD;
}

.galleryImage img {
    width:              100%;
    -webkit-transition: transform .3s ease-in-out;
    transition:         transform .3s ease-in-out;
    transform:          scale(1);
}

.galleryImage:hover img {
    transform: scale(1.1);
}

.galleryImage .galleryTitel {
    position:           absolute;
    bottom:             0;
    left:               0;
    right:              0;
    font-size:          0.9em;
    margin-bottom:      -70px;
    background:         #000;
    background:         rgba(0, 0, 0, 0.5);
    color:              #FFF;
    text-shadow:        1px 1px 0 #000;
    padding:            5px;
    text-align:         center;
    -webkit-transition: all 0.3s ease-in-out;
    transition:         all 0.3s ease-in-out;
}

.galleryImage:hover .galleryTitel,
.galleryImage.touchFocus .galleryTitel {
    margin-bottom: 0;
}

.galleryImage .galleryDark {
    background-color:   rgba(0, 0, 0, .3);
    opacity:            0;
    position:           absolute;
    top:                0;
    left:               0;
    width:              100%;
    height:             100%;
    -webkit-transition: all .3s;
    transition:         all .3s;
    text-indent:        -999999999px;
}

.galleryImage:hover .galleryDark,
.galleryImage.touchFocus .galleryDark {
    opacity: 1;
}

@media only screen and (min-width: 480px) {
    .galleryContainer {
        width:       calc(100% + 1em);
        margin-left: -.5em;
    }

    .galleryBox {
        width:          50%;
        padding-bottom: 50%;
    }

    #zertifikatGalerie .galleryBox {
        width:          50%;
        padding-bottom: 64%;
    }
}

@media only screen and (min-width: 768px) {
    .galleryBox {
        width:          33.3%;
        padding-bottom: 33.3%;
    }

    #zertifikatGalerie .galleryBox {
        width:          33.3%;
        padding-bottom: 42.3%;
    }
}

@media only screen and (min-width: 1024px) {
    .galleryBox {
        width:          25%;
        padding-bottom: 25%;
    }

    #zertifikatGalerie .galleryBox {
        width:          25%;
        padding-bottom: 32%;
    }
}

.galleryImage .galleryZoom {
    background:         url('../images/zoom.png') center center no-repeat;
    background-color:   rgba(0, 0, 0, 0);
    background-size:    40px;
    position:           absolute;
    width:              100%;
    height:             100%;
    top:                0;
    left:               0;
    opacity:            0;
    -webkit-transition: all 0.3s;
    transition:         all 0.3s;
    text-indent:        -9999px;
}

.galleryImage .galleryZoom:hover {
    background-color: rgba(0, 0, 0, .6);
    opacity:          .8;
    background-size:  60px;
}

/** blätterfunktion */

.pageLink {
    padding: 15px 0;
    clear:   left;
}

.pageLink .pageActive,
.pageLink .pageCount,
.pageLink span,
.pageLink a,
.pageLink a:hover,
.pageLink a:focus {
    text-decoration:    none;
    font-size:          1em;
    outline:            0;
    cursor:             pointer;
    display:            block;
    width:              100%;
    padding:            8px 12px;
    margin-bottom:      .5em;
    text-align:         center;
    color:              #666;
    -webkit-transition: all .2s;
    transition:         all .2s;
}

.pageLink .pageCount,
.pageLink span,
.pageLink a {
    background-color: transparent;
    border:           1px solid #DDD;
    color:            #666;
}

.pageLink a:hover {
    background-color: #333;
    border:           1px solid #333;
    color:            #FFF;
}

.pageLink a:focus {
    background-color: #333;
    border:           1px solid #333;
    color:            #FFF;
}

@media screen and (min-width: 768px) {

    .pageLink .pageActive,
    .pageLink .pageCount,
    .pageLink span,
    .pageLink a,
    .pageLink a:hover,
    .pageLink a:focus {
        margin-right: 3px;
        display:      inline-block;
        width:        auto;;
        padding:      8px 14px;
    }

    .pageLink span.autoWidth,
    .pageLink a.autoWidth {
        width: auto;
    }
}

.pageLink .pageActive {
    background-color: #D60000;
    border:           1px solid #D60000;
    color:            #FFF;
    cursor:           default;
}

.pageLink span {
    color:  #AAA;
    cursor: default;
}

.pageInfo {
    padding-top: 1.6em;
}