/* Mobile */
@media screen and (width < 1024px) {

    /* Index */
    #container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: flex-start;
    }

    #gallery {
        min-width: 260px;
        max-width: 1280px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 57%;
        margin-right: 5px;
    }

    #details {
        min-width: 260px;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 43%;
        margin-left: 5px;
    }

    #galleryPhotos .galleryPhotoThumbnail figcaption {
        display: block;
    }
}

/* Desktop */
@media screen and (width >=1024px) {
    /* Index */
    #container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: top;
        align-content: flex-start;
    }

    #gallery {
        min-width: 260px;
        max-width: 1280px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 57%;
        margin-right: 5px;
    }

    #details {
        min-width: 260px;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 43%;
        margin-left: 5px;
    }

    #galleryPhotos .galleryPhotoThumbnail:hover figcaption {
        display: block;
    }
}

/* Gallery */
#filter {
    margin: auto;
    padding-bottom: 5px;
}

#galleryPhotos {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
}

#galleryPhotos .galleryPhotoThumbnail {
    margin: 2px;
    width: 250px;
    height: 250px;
    position: relative;
    flex: 1 1 20%;
    width: 250px;
    height: 250px;
    max-width: 250px;
    max-height: 250px;
    text-align: center;
}

#galleryPhotos .galleryPhotoThumbnail:hover {
    outline: 1px solid #3e4756;
    outline-offset: -1px;
}



#galleryPhotos .galleryButton {
    border: 0;
    background: none;
    width: 250px;
    height: 250px;
    background-position: center;
    background-repeat: no-repeat;
}

#galleryPhotos .galleryCaption {
    position: absolute;
    display: none;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    color: #a2acbd;
    background-color: #3e4756;
    pointer-events: none;
}

/* Details */
.detailsHeader {
    text-align: center;
    color: #a2acbd;
    background-color: #3e4756;
    font-size: 40px;
    margin-bottom: 1px;
    border: 1px solid #3e4756;
}

#detailsData {
    padding-top: 4px;
}

#detailsData .detailsDataTable {
    background-color: #a2acbd;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    margin: auto;
}

#detailsData .detailsDataTable tr:nth-child(even) {
    background: #cb97a4;
}

#detailsData .detailsDataTable .detailsDataHeader {
    width: 30%;
    font-weight: bold;
    vertical-align: top;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    border: 1px solid #3e4756;
    padding: 2px 2px;
    color: #3e4756;
}

#detailsData .detailsDataTable .detailsDataText {
    width: 70%;
    vertical-align: text-top;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    border: 1px solid #3e4756;
    padding: 2px 2px;
    color: #3e4756;
    margin-top: 0;
}

#detailsData .detailsDataTable .detailsDataText pre {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: #3e4756;
    margin: 0;
}

#detailsData .detailsDataTable .detailsDataText ul {
    color: inherit;
    margin: 0;
    padding: 0;
    list-style-position: inside;
    list-style-type: square;
}

#detailsPhotos {
    margin-top: 5px;
    border: 1px solid #3e4756;
    display: flex;
    overflow: auto;
}

#detailsPhotos .detailsPhoto {
    display: table;
    max-width: 250px;
    margin: 2px;
    padding-top: 3px;
}

#detailsPhotos .detailsPhotoThumbnail {
    flex: 1 1 20%;
    width: 250px;
    height: 250px;
    max-width: 250px;
    max-height: 250px;
}

#detailsPhotos .detailsPhotoThumbnail:hover {
    outline: 1px solid #3e4756;
    outline-offset: -1px;
}

#detailsPhotos .detailsPhotoCaption {
    display: table-caption;
    caption-side: bottom;
    color: #a2acbd;
    background-color: #3e4756;
    font: 11px sans-serif;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: -3px;
}