.tiled-gallery {
    clear: both;
    margin: 0 auto 20px auto !important;
    overflow: hidden;
    max-width: 100% !important;
}

.tiled-gallery img {
    margin: 2px !important; /* Ensure that this value isn't overridden by themes that give content images blanket margins */
}

.tiled-gallery .gallery-group {
    float: left;
    position: relative;
}

.tiled-gallery .tiled-gallery-item {
    float: left;
    margin: 0;
    position: relative;
    width: inherit; /* prevents ie8 bug with inline width styles */
}

.tiled-gallery .gallery-row {
    overflow: hidden;
    margin: 0 auto 0 auto;
}

/* Needs to reset some properties for theme compatibility */
.tiled-gallery .tiled-gallery-item a {
    background: transparent;
    border: none;
    color: inherit;
    margin: 0;
    padding: 0;
    text-decoration: none;
    width: auto;
    position: relative;
    display: block;
}

/* Needs to reset some properties for theme compatibility */
.tiled-gallery .tiled-gallery-item img,
.tiled-gallery .tiled-gallery-item img:hover {
    background: none;
    border: none;
    box-shadow: none;
    max-width: 100%;
    padding: 0;
    vertical-align: middle;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Prevent the hover captions module from messing with the tiled layout */
.tiled-gallery .tiled-gallery-item figure.ngg-figure img {
    width: 100%;
    height: 100%;
}

/* Hide all unresized galleries until JS resize() runs so images at the PHP/original
   dimensions never flash at the wrong size. Container height is pre-reserved by the
   inline min-height set in the PHP template and refined by the IIFE in main.js. */
.tiled-gallery-unresized {
    visibility: hidden;
    overflow: hidden;
}

/* Widgets need a tighter treatment: collapse to 0 until resize so they don't leave
   a large blank gap in the sidebar before JS fires. */
.widget-gallery .tiled-gallery-unresized {
    height: 0px;
}

/* The next two rules are because '.tiled-gallery img' is given 'margin: 2px !important' */
.tiled-gallery-item a figure.ngg-figure {
    margin: 2px;
}

.tiled-gallery-item a figure.ngg-figure img {
    margin: 0 !important;
}

/* Each row's height is computed from image dimensions only, and .gallery-row clips
   with overflow:hidden so the tiles pack edge-to-edge. Trigger icons appended below
   the image in block flow would add height the row never accounts for and get
   clipped, so overlay them on the image instead of letting them add to the flow. */
.tiled-gallery-item .ngg-trigger-buttons {
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 2;
    margin: 0;
}