.gallery:after
{
    display: block;
    content: "";
    clear: both;
}

.photo
{
    position: relative;
    margin-bottom: 2rem;

    .img
    {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
    }

    img {
        width: 100%;
        height: 100%;
    }

}


.photo .name
{
    font-size: 1.14em;
	text-align: left;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #39c;
    color: #fff;
    font-weight: 600;
    width: 100%;
    padding: 1.5rem 1rem;
    display: block;
    transition: all 0.2s ease 0s;
    opacity: 1;
}

.photo .name a
{
    color: #fff;
}

.photo .hover
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background: url(/images/hover-arrow.png) no-repeat center 45% rgba(51, 153, 204, 0.5);
    transition: all 0.2s ease 0s;
    font-weight: 600;
    font-size: 1.2em;
}

.photo .hover div
{
    text-align: center;
    top: 55%;

    position: absolute;
    width: 100%;
}

.photo a
{
    color: #fff;
}

.photo:hover .hover
{
    opacity: 1;

}

.photo:hover .name
{
    opacity: 0;
}

.gallery .nav
{
    text-align: center;
    margin-top: 30px;
}