html, body, h1, h2, h3, h4, h5, h6, div, p, a, img, table, thead, tbody, th, td, dl, ul, ol, li, dt, dd, form, fieldset, label, button, hr 	{margin: 0; padding: 0; border: 0; font-weight: normal;}
ol, ul		{list-style: none;}
a img		{border: none;}
:focus 		{outline: 0;}


html				{
					background-color: #fff;
				}
body			{
					margin: 0 auto;
					font-family: Arial;
					font-size: 62.5%;
					color: #444;
				}


.container           {
                    position: relative;
                    margin: 100px auto 0 auto;
                    width: 600px;
                    height: 600px;
                    border: solid 1px #ddd;
                }                
.arrow                    {
                    position: absolute;
                    background: rgba(0,0,0,0.3);
                    -webkit-transition: all 1s ease;
                    -moz-transition: all 1s ease;
                    -o-transition: all 1s ease;
                    -ms-transition: all 1s ease;
                    transition: all 1s ease;
                }                
.arrow:hover        {
                    position: absolute;
                    background: rgba(255,0,0,0.7);
                }                
.a-top                    {
                    top: -50px;
                    left: 0;
                    right: 0;
                    min-width: 600px;
                    height: 50px;
                    border-radius: 50px 50px 0 0;
                }                
.a-bottom              {
                    bottom: -50px;
                    left: 0;
                    right: 0;
                    min-width: 600px;
                    height: 50px;
                    border-radius: 0 0 50px 50px;
                }
.a-left                  {
                    top: 0;
                    bottom: 0;
                    left: -50px;
                    width: 50px;
                    border-radius: 50px 0 0 50px;
                }
.a-right                {
                    top: 0;
                    bottom: 0;
                    right: -50px;
                    width: 50px;
                    border-radius: 0 50px 50px 0;
                }                
                
.cube                       {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin: -100px 0 0 -100px;
                    width: 200px;
                    height: 200px;
                    
                    -webkit-transition: all 1s ease;
                    -moz-transition: all 1s ease;
                    -o-transition: all 1s ease;
                    -ms-transition: all 1s ease;
                    transition: all 1s ease;
                    
                    -webkit-transform-style: preserve-3d;
                    -moz-transform-style: preserve-3d;
                    -o-transform-style: preserve-3d;
                    -ms-transform-style: preserve-3d;
                    transform-style: preserve-3d;
                    
                    -webkit-transform-origin: 50% 50%;
                    -moz-transform-origin: 50% 50%;
                    -o-transform-origin: 50% 50%;
                    -ms-transform-style: preserve-3d;
                    transform-origin: 50% 50%;
                    
                    -webkit-transform: perspective(900px) rotate3d(1,1,0,-45deg);           
                    -moz-transform: perspective(900px) rotate3d(1,1,0,-45deg);           
                    -o-transform: perspective(900px) rotate3d(1,1,0,-45deg);           
                    -ms-transform-style: preserve-3d;
                    transform: perspective(900px) rotate3d(1,1,0,-45deg);           
                    
                }       
.a-top:hover ~ .cube    {
                    -webkit-transform: perspective(900px) rotate3d(180,-45,0,-135deg);           
                    -moz-transform: perspective(900px) rotate3d(180,-45,0,-135deg);           
                    -o-transform: perspective(900px) rotate3d(180,-45,0,-135deg);           
                    -ms-transform: perspective(900px) rotate3d(180,-45,0,-135deg);           
                    transform: perspective(900px) rotate3d(180,-45,0,-135deg);           
                }       
.a-bottom:hover ~ .cube    {
                    -webkit-transform: perspective(900px) rotate3d(180,-45,0,135deg);           
                    -moz-transform: perspective(900px) rotate3d(180,-45,0,135deg);           
                    -o-transform: perspective(900px) rotate3d(180,-45,0,135deg);           
                    -ms-transform: perspective(900px) rotate3d(180,-45,0,135deg);           
                    transform: perspective(900px) rotate3d(180,-45,0,135deg);           
                }                       
.a-left:hover ~ .cube    {
                    -webkit-transform: perspective(900px) rotate3d(55,180,0,-219deg);           
                    -moz-transform: perspective(900px) rotate3d(55,180,0,-219deg);           
                    -o-transform: perspective(900px) rotate3d(55,180,0,-219deg);           
                    -ms-transform: perspective(900px) rotate3d(55,180,0,-219deg);           
                    transform: perspective(900px) rotate3d(55,180,0,-219deg);           
                }                      
.a-right:hover ~ .cube    {
                    -webkit-transform: perspective(900px) rotate3d(-45,180,0,135deg);           
                    -moz-transform: perspective(900px) rotate3d(-45,180,0,135deg);           
                    -o-transform: perspective(900px) rotate3d(-45,180,0,135deg);           
                    -ms-transform: perspective(900px) rotate3d(-45,180,0,135deg);           
                    transform: perspective(900px) rotate3d(-45,180,0,135deg);           
                }                 
                
                
    .cube span                      {
                            position: absolute;
                            display: block;
                            width: 200px;
                            height: 200px;
                            box-shadow: inset 0 0 15px rgba(255,255,255,0.3), inset -30px -30px 80px rgba(0,0,0,0.3);
                        }            
        .cube .n1                              {
                                    top: 0;
                                    left: 0;
                                    background-color: #d00;
                                    opacity: 0.9;                                                                        
                                    
                                    -webkit-transform: translate3d(0,0,100px);
                                    -moz-transform: translate3d(0,0,100px);
                                    -o-transform: translate3d(0,0,100px);
                                    -ms-transform: translate3d(0,0,100px);
                                    transform: translate3d(0,0,100px);
                                }                        
        .cube .n2                              {
                                    top: 0;
                                    left: 100%;
                                    background-color: #dd0;
                                    opacity: 0.9;                                                                        
                                    
                                    -webkit-transform-origin: 0 0;
                                    -moz-transform-origin: 0 0;
                                    -o-transform-origin: 0 0;
                                    -ms-transform-origin: 0 0;
                                    transform-origin: 0 0;
                                    
                                    -webkit-transform: translate3d(0,0,100px) rotate3d(0,1,0,90deg);
                                    -moz-transform: translate3d(0,0,100px) rotate3d(0,1,0,90deg);
                                    -o-transform: translate3d(0,0,100px) rotate3d(0,1,0,90deg);
                                    -ms-transform: translate3d(0,0,100px) rotate3d(0,1,0,90deg);
                                    transform: translate3d(0,0,100px) rotate3d(0,1,0,90deg);
                                }                                
        .cube .n3                              {
                                    top: 100%;
                                    left: 0;
                                    background-color: #999;
                                    opacity: 0.9;                                    
                                    
                                    -webkit-transform-origin: 0 0;
                                    -moz-transform-origin: 0 0;
                                    -o-transform-origin: 0 0;
                                    -ms-transform-origin: 0 0;
                                    transform-origin: 0 0;
                                    
                                    -webkit-transform: translate3d(0,0,100px) rotate3d(1,0,0,-90deg);
                                    -moz-transform: translate3d(0,0,100px) rotate3d(1,0,0,-90deg);
                                    -o-transform: translate3d(0,0,100px) rotate3d(1,0,0,-90deg);
                                    -ms-transform: translate3d(0,0,100px) rotate3d(1,0,0,-90deg);
                                    transform: translate3d(0,0,100px) rotate3d(1,0,0,-90deg);
                                }                                
        .cube .n4                              {
                                    top: 0;
                                    right: 100%;
                                    background-color: #04d;
                                    opacity: 0.9;                                                                        
                                    
                                    -webkit-transform-origin: 100% 0;
                                    -moz-transform-origin: 100% 0;
                                    -o-transform-origin: 100% 0;
                                    -ms-transform-origin: 100% 0;
                                    transform-origin: 100% 0;
                                    
                                    -webkit-transform: translate3d(0,0,100px) rotate3d(0,1,0,-90deg);                                                                        
                                    -moz-transform: translate3d(0,0,100px) rotate3d(0,1,0,-90deg);                                                                        
                                    -o-transform: translate3d(0,0,100px) rotate3d(0,1,0,-90deg);                                                                        
                                    -ms-transform: translate3d(0,0,100px) rotate3d(0,1,0,-90deg);                                                                        
                                    transform: translate3d(0,0,100px) rotate3d(0,1,0,-90deg);          
                                }                                
        .cube .n5                              {
                                    bottom: 100%;
                                    left: 0;
                                    background-color: #0dd;
                                    opacity: 0.9;                                    
                                    
                                    -webkit-transform-origin: 0 100%;
                                    -moz-transform-origin: 0 100%;
                                    -o-transform-origin: 0 100%;
                                    -ms-transform-origin: 0 100%;
                                    transform-origin: 0 100%;
                                    
                                    -webkit-transform: translate3d(0,0,100px) rotate3d(1,0,0,90deg);                                    
                                    -moz-transform: translate3d(0,0,100px) rotate3d(1,0,0,90deg);                                    
                                    -o-transform: translate3d(0,0,100px) rotate3d(1,0,0,90deg);
                                    -ms-transform: translate3d(0,0,100px) rotate3d(1,0,0,90deg);                                    
                                    transform: translate3d(0,0,100px) rotate3d(1,0,0,90deg);                                    
                                }                                
        .cube .n6                              {
                                    top: 0;
                                    left: 0;
                                    background-color: #6a0;
                                    opacity: 0.9;                                    
                                    
                                    -webkit-transform-origin: 0 50%;
                                    -moz-transform-origin: 0 50%;
                                    -o-transform-origin: 0 50%;
                                    -ms-transform-origin: 0 50%;
                                    transform-origin: 0 50%;

                                    -webkit-transform: translate3d(0,0,-100px) rotate3d(1,0,0,180deg);                                    
                                    -moz-transform: translate3d(0,0,-100px) rotate3d(1,0,0,0deg);                                    
                                    -o-transform: translate3d(0,0,-100px) rotate3d(1,0,0,180deg);
                                    -ms-transform: translate3d(0,0,-100px) rotate3d(1,0,0,180deg);                                    
                                    transform: translate3d(0,0,-100px) rotate3d(1,0,0,180deg);                                    
                                }                                
    .cube b                           {
                            position: absolute;
                            margin: -10px 0 0 -10px;
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            background-color: #fff;
                            box-shadow: inset -3px -3px 5px rgba(0,0,0,0.3);
                            opacity: 0.9;
                        }        
        .cube .d-25-25                     {
                                    top: 25%;
                                    left: 25%;
                                }
        .cube .d-25-75                     {
                                    top: 25%;
                                    left: 75%;
                                }
        .cube .d-50-25                     {
                                    top: 50%;
                                    left: 25%;
                                }
        .cube .d-50-50                     {
                                    top: 50%;
                                    left: 50%;
                                }
        .cube .d-50-75                     {
                                    top: 50%;
                                    left: 75%;
                                }
        .cube .d-75-25                     {
                                    top: 75%;
                                    left: 25%;
                                }
        .cube .d-75-75                     {
                                    top: 75%;
                                    left: 75%;
                                }