.r-container
{
	/* height: 300px; */
	position: relative;
	width: 100%;
}

.r-front,
.r-back{

    /* Enable 3D transforms */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    width: 100%;
	
    transition:0.8s;
}

.r-front
{
	/* margin-left: -15px; */
	/* margin-right: -15px; */
}

.r-back{

    /* The back side is flipped 180 deg by default */
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);

    position:absolute;
	
	/*top: 15px;
    left:15px;*/
	bottom: 0;
	right: 0;
}

.r-container:hover .r-front{
    /* When the container is hovered, flip the front side and hide it .. */
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
}

.r-container:hover .r-back{
    /* .. at the same time flip the back side into visibility */
    transform:rotateY(360deg);
    -webkit-transform:rotateY(360deg);
}