html {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
}

body {
   margin: 0;
   padding: 0;
   height: 100%;
   color: #CCC;
   background: #000;
   font-size: 12px;
   font-family: sans-serif;
}

.content {
   position: relative;
   margin: 5px auto;
   overflow: hidden;
}

.container {
   position: relative;
   float: left;
   margin: 5px;
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   -o-perspective: 1000;
   perspective: 1000;
}

.card {
   cursor: pointer;
   width: 100%;
   height: 100%;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-transition: -webkit-transform 1s linear;
   -moz-transition: -moz-transform 1s linear;
   -ms-transition: -ms-transform 1s linear;
   -o-transition: -o-transform 1s linear;
   transition: transform 1s linear;
}

.container .card.flip {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
}

.container .flip .loading {
   display: none;
}

.back {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
}

.front, .back {
   position: absolute;
   width: 100%;
   height: 100%;
   background: #111;
   overflow: hidden;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;
}

.front .loading {
   position: absolute;
   top: 50%;
   left: 50%;
   height: 16px;
   text-align: center;
   margin-top: -8px;
   margin-left: -8px;
   background: #222;
}

.back img {
   position: absolute;
}

.back .desc {
   margin: 0;
   padding: 0;
   position: absolute;
   bottom: -39px;
   left: 0;
   right: 0;
   color: #FFF;
   border-top: 1px solid #999;
   background: #111;
   opacity: 0.75;
   height: 38px;
   -webkit-transition: bottom 0.3s linear 0.5s;
   -moz-transition: bottom 0.3s linear 0.5s;
   -ms-transition: bottom 0.3s linear 0.5s;
   -o-transition: bottom 0.3s linear 0.5s;
   transition: bottom 0.3s linear 0.5s;
}

.back .desc p {
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.card:hover .desc, .back .desc.visible {
   bottom: 0;
}