* {
  box-sizing: border-box;
}

body > section {
    background-color: #faf0dc;  /* light beige */
    background-image: url('/pictures/backgrounds/beige_bg.jpg');
}
.content-container {
    background: none;
    border: none;
    font-size: 0;
    padding: 0;
    margin-top: 10px;
    max-width: 750px;
}

.search-form {
    background-color: white;
    overflow: hidden;
    padding: 25px 20px 0px 20px;
    text-align: left;
}
    .inner-form-container {
        margin: 0 auto;
        max-width: 400px;
    }
        .keywords {
            padding-left: 5px;
            padding-right: 5px;
        }
        .go-button {
        }

.album-container {
    background-color: white;
    font-size: 16px;
    padding-bottom: 5px;
    padding-top: 25px;
}

.album {
    background-color: white;
    border-top: 1px #cccccc solid;
    border-bottom: 1px white solid;
    color: #333333;
    cursor: pointer;
    display: flex;   /* equal height of the children */
    font-size: 0px;
    margin: 0 10px 10px 10px;
    min-height: 125px;
    overflow: hidden;
    text-decoration: none;
}

.album:hover .text {
    background-color: #faedcd;
    color: black;
}
.album:hover .title {
    color: black;
}
.album:hover .start-date {
    color: black;
    color: rgba(0,0,0, .40);
}
.album:hover .summary {
    color: black;
    color: rgba(0,0,0, .70);
}

    .thumb {
        background-color: #aaaaaa;
        background-position: center;
        background-size: cover;
        color: #555555;
        display: inline-block;
        font-size: 16px;
        transform: scale(1.0);
        transition: all .5s;
        vertical-align: top;
        width: 200px;
    }
    .album:hover .thumb {
        transform: scale(1.3);
        transition: all .5s;
    }
    .text {
        background-color: white;
        display: inline-block;
        flex: 1;   /* Fill remaining empty width */
        font-size: 16px;
        padding: 10px 15px 15px 12px;
        z-index: 2;
    }
        .title {
            font-size: 24px;
        }
        .start-date {
            color: #bbbbbb;
            font-size: 16px;
            padding: 2px 0px 7px 0px;
        }
        .summary {
            color: #777777;
            font-size: 16px;
        }

.no-results-message {
    padding: 30px 40px;
}


@media screen and (max-width: 500px) {

    body > section {
        padding: 0px;
    }

    .content-container {
        background-color: rgba(255,255,255, .25);
        border: none;
        box-shadow: none;
        padding: 10px 0 15px 0;
    }

    .search-form {
        border-top: 1px #bbbbbb solid;
        border-bottom: 1px #cccccc solid;
        border-radius: 5px;
        box-shadow: 0px 7px 10px rgba(0,0,0, .15);
    }
        .year-dropdown {
        }
        .go-button {
        }

    .album-container {
        background: none;
        padding-left: 5px;
        padding-right: 5px;
    }

        .album {
            border: #888888 solid;
            border: 1px rgba(0,0,0, .5) solid;
            border-radius: 4px;
            box-shadow: 7px 7px 10px rgba(0,0,0, .15);
            display: block;
            margin-bottom: 25px;
        }
            .album .thumb {
                display: block;
                transform: auto;
                transition: none;
                width: 100%;
            }
            .album .text {
                display: block;
                padding-bottom: 15px;
                width: 100%;
            }
            
            .album:hover .thumb {
                transform: scale(1);
                transition: none;
            }
}