@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

html {
    font-family: 'Roboto Condensed', sans-serif;
}

body {
    background-color: #000000;
}


.hidden {
    display: none;
}
.scene {
    margin: 50px auto;
    padding: 10px;
    width: 500px;
    height: 200px;
    overflow: visible;
    white-space: nowrap;
    background-image: url("wood.jpg");
    background-repeat: repeat-x;

    perspective: 600px;
    perspective-origin: 125% 50%
}

.info {
    margin: 0 auto;
    width: 500px;
    color: #ffffff;
    text-align: center;
}

.album {
    display: inline-block;
    position: relative;
    width: 14px;
    height: 200px;
    overflow: visible;
    white-space: normal;

    transform-style: preserve-3d;

    transform: rotateY(90deg);

    transition: transform 0.5s, width 0.5s;
}

.album:hover {
    width: 25px;
    transform: rotateY(90deg) translate3d(-30px, 0, 0);
    cursor: pointer;
}

.album.active {
    transform: rotateY(0deg) translate3d(0, 0, 10px);
    width: 200px;
}

.album.active:hover {
    transform: rotateY(0deg) translate3d(0, 0, 30px);
    cursor: pointer;
}

.album .overlay {
    opacity: 0.15;
    background-image: url("overlay.png");
    background-size: cover;
    
    transition: transform 0.5s;
}

.album:hover .overlay {
    transform: translateX(-15px);
}

.album.active .overlay {
    transform: translateX(-100px);
}

.album.active:hover .overlay {
    transform: translateX(-95px);
}

.album > .spine {
    position: absolute;
    width: 14px;
    padding-top: 4px;
    height: 100%;
    background-color: rgba(20, 20, 20, 1);
    white-space: nowrap;
    overflow: hidden;

    transform: rotateY(-90deg) translate3d(0, 0, 7px);
}

.album > .spine > .label {
    width: 200px;
    vertical-align: middle;
    color: #ffffff;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    transform-origin: 0% 0%;
    transform: rotateZ(90deg) translate(0, -100%);
}

.album > .spine > .overlay {
    position: absolute;
    left: -120px;
    top: 0;
    width: 500px;
    height: 100%;
}

.album > .front {
    position: absolute;
    width: 200px;
    height: 100%;
    transform: translate3d(0, 0, 7px);
    backface-visibility: hidden;

    overflow: hidden;
    white-space: nowrap;
}

.album > .front > img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album > .front > .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
    height: 100%;
}

.album > .back {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg) translate3d(0, 0, 7px);

    background-color: rgba(0,0,0,0);
}

.album > .opposite-spine {
    position: absolute;
    width: 7px;
    height: 100%;
    background-color: rgba(200,200,200,0.7);

    transform: rotateY(90deg) translate3d(0, 0, 193px);
    backface-visibility: hidden;
}

.border {
    box-sizing: border-box;
    box-shadow: inset 0px 0px 0px 1px rgba(125, 125, 125, 1);
    padding: 1px;

}