.thumbnail {
    position: relative;
    width: 290px;
    height: 290px;
    overflow: hidden;
    margin:0 auto;
    margin-bottom:20px;
}
.thumbnail img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%) scale(1.9);
    -moz-transform:translate(-50%,-50%) scale(1.9); /* Firefox */
    -ms-transform: translate(-50%,-50%) scale(1.9);
    -o-transform:translate(-50%,-50%) scale(1.9); /* Opera */
    transform: translate(-50%,-50%) scale(1.9);
    -webkit-transition: all .8s ease; /* Safari and Chrome */
    -moz-transition: all .8s ease; /* Firefox */
    -ms-transition: all .8s ease; /* IE 9 */
    -o-transition: all .8s ease; /* Opera */
    transition: all .8s ease;

}
.thumbnail img.portrait {
    width: 100%;
    height: auto;
}

.thumbnail:hover img {
    -webkit-transform: translate(-50%,-50%) scale(1.5); /* Safari and Chrome */
    -moz-transform:translate(-50%,-50%) scale(1.5); /* Firefox */
    -ms-transform:translate(-50%,-50%) scale(1.5); /* IE 9 */
    -o-transform:translate(-50%,-50%) scale(1.5); /* Opera */
    transform:translate(-50%,-50%) scale(1.5);

}

.thumbnail .zoom-caption {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: rgba(83, 80, 76, .5);
    -webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}
.thumbnail .zoom-caption h3 {
    display: block;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.2em;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    margin: 23% 0 0;
    padding: 10px 0;
    border-top: 5px solid rgba(255, 255, 255, .15);
    border-bottom: 5px solid rgba(255, 255, 255, .15);
}

.thumbnail:hover .zoom-caption {
    background: none;
}




.thumbnail-article {
    position: relative;
    width: 280px;
    height: 200px;
    overflow: hidden;
    margin:0 auto;
    margin-bottom:20px;
}
.thumbnail-article img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%) scale(1.9);
    -moz-transform:translate(-50%,-50%) scale(1.9); /* Firefox */
    -ms-transform: translate(-50%,-50%) scale(1.9);
    -o-transform:translate(-50%,-50%) scale(1.9); /* Opera */
    transform: translate(-50%,-50%) scale(1.9);
    -webkit-transition: all .8s ease; /* Safari and Chrome */
    -moz-transition: all .8s ease; /* Firefox */
    -ms-transition: all .8s ease; /* IE 9 */
    -o-transition: all .8s ease; /* Opera */
    transition: all .8s ease;

}
.thumbnail-article img.portrait {
    width: 100%;
    height: auto;
}

.thumbnail-article:hover img {
    -webkit-transform: translate(-50%,-50%) scale(1.5); /* Safari and Chrome */
    -moz-transform:translate(-50%,-50%) scale(1.5); /* Firefox */
    -ms-transform:translate(-50%,-50%) scale(1.5); /* IE 9 */
    -o-transform:translate(-50%,-50%) scale(1.5); /* Opera */
    transform:translate(-50%,-50%) scale(1.5);

}


.image-wrapper {

    height: 0;
    width: 100%;
    padding-bottom: 60%;
    overflow: hidden;
    margin:0 auto;
    margin-bottom:20px;

}

.image-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%); /* Firefox */
    -ms-transform: translate(-50%,-50%);
    -o-transform:translate(-50%,-50%); /* Opera */
    transform: translate(-50%,-50%);
    -webkit-transition: all .8s ease; /* Safari and Chrome */
    -moz-transition: all .8s ease; /* Firefox */
    -ms-transition: all .8s ease; /* IE 9 */
    -o-transition: all .8s ease; /* Opera */
    transition: all .8s ease;

}