.album{
    width:140px;
    height:140px;
    margin: 15px 5px;
    position:relative;

    display:inline-block;
    border: 4px solid #F0F0F0;
    background-color: #F0F0F0;

    border-radius:12px;
    box-shadow:0 -2px 0 #616161;

    /* Reflections below the image */
    -webkit-box-reflect: below 0 -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.1) 100%);
}

/* Showing a subtle shadow on the borders of the image */
.album:before{
    content: '';
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index:1000;
    position: absolute;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4) inset;
    border:1px solid #fff;
}

/* The album photos (hidden by default) */
.album img{
    top:0;
    left:0;
    opacity:0;
    width:140px;
    height:140px;
    position:absolute;
}

/* The first (the default) thumbnail is visible */
.album img:first-child{
    opacity:1;
}

.album img,
.album:before{
    border-radius: 10px;
}

/* The preloader PNG. It is rotated with a CSS keyframe animation */

.album .preloader{
    display:none;
}

.album.loading .preloader{
    content:'';
    position:absolute;
    width:18px;
    height:18px;
    background:url('../img/preloader.png') center center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin:auto;
    display:block;

    /* Configure a keyframe animation for Firefox */
    -moz-animation: rotate 1s linear infinite;

    /* Configure it for Chrome and Safari */
    -webkit-animation: rotate 1s linear infinite;
}

/* Webkit keyframe animation */
@-webkit-keyframes rotate{
    0%{     -webkit-transform:rotate(0deg);}
    100%{   -webkit-transform:rotate(360deg);}
}

/* Firefox Keyframe Animation */
@-moz-keyframes rotate{
    0%{     -moz-transform:rotate(0deg);}
    100%{   -moz-transform:rotate(360deg);}
}