/* Grid system from http://www.responsivegridsystem.com/calculator/ */

.section {
    clear: both;
    padding: 0;
    margin: 0;
}

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child {
    margin-left: 0;
}

.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/* Full width on smaller displays */
@media only screen and (max-width: 45em) {
    .col {
        margin: 1% 0;
    }

    .span_3_of_3, .span_2_of_3, .span_1_of_3 {
        width: 100%;
    }
}

#gallery-container {
    img {
        min-width: 100%;
        max-width: 100%;
    }

    h1 {
        font-size: 1em;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    a:hover {
        color: #bfbfbf;
    }
}

figure {
    min-width: 100%;
    max-width: 100%;
}

/* Mobiles first! If we have the screen space, put the sidebar text over on the right.
   Otherwise just leave it in the main document area. */
@media (min-width: 35em) {
    #gallery-container .main {
        float: left;
        margin-left: 0;
    }

    #gallery-container .sidebar {
        float: right;
    }
}

/* Image captions: <figure class="label inside bottom fade" data-label="Caption">
   Cut down from label.css by Hosein Emrani (github.com/usablica/label.css, GPL) to the one
   variant this site uses: the caption sits along the bottom edge of the image. Adding the
   "fade" class hides it until the image is hovered. */
.label[data-label] {
    position: relative;
    display: inline-block;
    margin: auto;
    width: auto;
    overflow: hidden;
    font-family: Arial;

    &:after {
        content: attr(data-label);
        position: absolute;
        bottom: 1%;
        display: block;
        width: 98%;
        padding: 1%;
        background: rgba(142, 142, 142, 0.8);
        color: #fff;
    }

    &.fade:after {
        transition: all 0.25s ease;
        opacity: 0;
        visibility: hidden;
    }

    &.fade:hover:after {
        opacity: 1;
        visibility: visible;
    }
}