section, footer, nav {
    display: block;
}
figure{
    margin: 0;
}

.container {
    width: 70px;
    height: 70px;
    position: relative;
    margin: 0 auto ;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: 280px -200px;
    -moz-perspective-origin: 280px -200px;
    -o-perspective-origin: 280px -200px;
    perspective-origin: 280px -200px;
}

#dado {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d ;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
}

#dado figure {
    display: block;
    position: absolute;
    width: 66px;
    height: 66px;
    border: 2px solid #000;
    line-height: 66px;
    font-size: 40px;
    font-weight: bold;
    color: black;
    text-align: center;
    background-color: #FFF;
    border-radius: 5px;    
}
#dado.panels-backface-invisible figure {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

#dado .front  {
    -webkit-transform: translateZ( 33px );
    -moz-transform: translateZ( 33px );
    -o-transform: translateZ( 33px );
    transform: translateZ( 33px );
}
#dado .back   {
    -webkit-transform: rotateX( -180deg ) translateZ( 33px ) ;
    -moz-transform: rotateX( -180deg ) translateZ( 33px );
    -o-transform: rotateX( -180deg ) translateZ( 33px );
    transform: rotateX( -180deg ) translateZ( 33px );
}
#dado .right {
    -webkit-transform: rotateY(   90deg ) translateZ( 33px );
    -moz-transform: rotateY(   90deg ) translateZ( 33px );
    -o-transform: rotateY(   90deg ) translateZ( 33px );
    transform: rotateY(   90deg ) translateZ( 33px );
}
#dado .left {
    -webkit-transform: rotateY(  -90deg ) translateZ( 33px );
    -moz-transform: rotateY(  -90deg ) translateZ( 33px );
    -o-transform: rotateY(  -90deg ) translateZ( 33px );
    transform: rotateY(  -90deg ) translateZ( 33px );
}
#dado .top {
    -webkit-transform: rotateX(   90deg ) translateZ( 33px );
    -moz-transform: rotateX(   90deg ) translateZ( 33px );
    -o-transform: rotateX(   90deg ) translateZ( 33px );
    transform: rotateX(   90deg ) translateZ( 33px );
}
#dado .bottom {
    -webkit-transform: rotateX(  -90deg ) translateZ( 33px );
    -moz-transform: rotateX(  -90deg ) translateZ( 33px );
    -o-transform: rotateX(  -90deg ) translateZ( 33px );
    transform: rotateX(  -90deg ) translateZ( 33px );
}

#dado.show-front {
    -webkit-transform: translateZ( -33px );
    -moz-transform: translateZ( -33px );
    -o-transform: translateZ( -33px );
    transform: translateZ( -33px );
}
#dado.show-back {
    -webkit-transform: translateZ( -33px ) rotateX( -180deg );
    -moz-transform: translateZ( -33px ) rotateX( -180deg );
    -o-transform: translateZ( -33px ) rotateX( -180deg );
    transform: translateZ( -33px ) rotateX( -180deg );
}
#dado.show-right {
    -webkit-transform: translateZ( -33px ) rotateY(  -90deg );
    -moz-transform: translateZ( -33px ) rotateY(  -90deg );
    -o-transform: translateZ( -33px ) rotateY(  -90deg );
    transform: translateZ( -33px ) rotateY(  -90deg );
}
#dado.show-left {
    -webkit-transform: translateZ( -33px ) rotateY(   90deg );
    -moz-transform: translateZ( -33px ) rotateY(   90deg );
    -o-transform: translateZ( -33px ) rotateY(   90deg );
    transform: translateZ( -33px ) rotateY(   90deg );
}
#dado.show-top {
    -webkit-transform: translateZ( -33px ) rotateX(  -90deg );
    -moz-transform: translateZ( -33px ) rotateX(  -90deg );
    -o-transform: translateZ( -33px ) rotateX(  -90deg );
    transform: translateZ( -33px ) rotateX(  -90deg );
}
#dado.show-bottom {
    -webkit-transform: translateZ( -33px ) rotateX(   90deg );
    -moz-transform: translateZ( -33px ) rotateX(   90deg );
    -o-transform: translateZ( -33px ) rotateX(   90deg );
    transform: translateZ( -33px ) rotateX(   90deg );
}