.flip-boards{ position: relative; }
.flip-boards .board
{
    float:left;
    margin: 2em 8em;
    position: relative;
    width: 200px;
    height: 200px;
    cursor: pointer;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:     hidden;
}
.flip-boards .board .front
{
    color:#eee;
    background: rgb(207,231,250); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));
    background: -webkit-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
    background: -o-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
    background: -ms-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
    background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.flip-boards .board .flipped
{
    color:#555;
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
.flip-boards .board h2{
    margin-top:80px;
    font-size: 1em;
}
.flip-boards .board.top:hover
{
    -webkit-transform: rotateX( 180deg );
    -moz-transform: rotateX( 180deg );
    -ms-transform: rotateX( 180deg );
    transform: rotateX( 180deg );
}
.flip-boards .board.top .flipped
{
    -webkit-transform: rotateX( 180deg );
    -moz-transform: rotateX( 180deg );
    -ms-transform: rotateX( 180deg );
    transform: rotateX( 180deg );
}
.flip-boards .board.left:hover
{
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.flip-boards .board.left .flipped
{
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}