/* 
    Created on : 05.07.2014, 06:27:46
    Author     : Marvin Botens
*/

.album_header
{
    margin-bottom: 5px;
}

.album_header span
{
    font-size: 12pt;
}

.album
{
    width: 100%;
    height: 226px;
}

.album span
{
    display: inline-block;
    overflow: hidden;
}

.album span img
{
    min-width: 100%;
    min-height: 100%;
    max-width: 140%;
    cursor: pointer;
}

.album span a
{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

/*for portrait photos*/
.album .p1
{
    width: 20%;
    height: 227px;
}

/*for landscape photos with a length and height of one unit (1/5)*/
.album .l1
{
    width: 20%;
    height: 113px;
}

/*for landscape photos with a length and height of two units (2/5))*/
.album .l2
{
    width: 40%;
    height: 227px;
}

@media screen and (max-width: 550px)
{
    .album_header h1
    {
        background: none;
        font-size: 15pt;
        font-weight: normal;
    }

    .album_header span
    {
        font-size: 10pt;
    }

    .album .p1
    {
        width: 20%;
        height: 120px;
    }

    .album .l1
    {
        width: 20%;
        height: 60px;
    }

    .album .l2
    {
        width: 40%;
        height: 120px;
    }
}