/* CUBE */
.cube-conteiner{
  display:block;
  width:100%;
  position:relative;
  padding-top:100%;
  font-size:4em;
}
.cube-conteiner.size0{
  font-size:3em;
}
.cube-conteiner.size1{
  font-size:3.5em;
}
.cube-conteiner.size2{
  font-size:4em;
}
.cube-conteiner.size3{
  font-size:5em;
}
.cube-conteiner:hover{
  font-size:7em;
}
.cube-conteiner a{
  position:absolute;
  opacity:0.2;
  background:#eeeeee;
  z-index:10;
}
.cube-conteiner a:before{
  content:' ';
}
.cube-conteiner a:hover{
  background:#ffaaaa;
}
.cube-conteiner a.i0{
  top:0;
  left:0;
  right:67%;
  bottom:50%;
}
.cube-conteiner a.i1{
  top:0;
  left:33%;
  right:33%;
  bottom:50%;
}
.cube-conteiner a.i2{
  top:0;
  left:67%;
  right:0;
  bottom:50%;
}
.cube-conteiner a.i3{
  top:50%;
  left:0;
  right:67%;
  bottom:0;
}
.cube-conteiner a.i4{
  top:50%;
  left:33%;
  right:33%;
  bottom:0;
}
.cube-conteiner a.i5{
  top:50%;
  left:67%;
  right:0;
  bottom:0;
}
.cube-conteiner .cube span img{
  width:1.96em;
  height:1.96em;
}
.cube-conteiner .cube span {
  position: absolute;
  display: block;
  width: 2em;
  height: 2em;
  border:0.05em solid #aaaaaa;
  border-radius: 0.1em;
}
.cube-conteiner .cube.shadow span {
  background: rgb(110,110,127);
  border:none;
  border-radius: 0;
  opacity:0.2;
  width: 2.01em;
  height: 2.01em;
}
.cube-conteiner .cube {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em 0 0 -1em;
  width: 2em;
  height: 2em;

  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  -ms-transition: all 3s ease;
  transition: all 3s ease;
  transition: all 3s;

  -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(19em) rotate3d(1,0,1,-45deg);           
  -moz-transform: perspective(19em) rotate3d(1,1,0,-45deg);           
  -o-transform: perspective(19em) rotate3d(1,1,0,-45deg);           
  -ms-transform-style: preserve-3d;
  transform: perspective(19em) rotate3d(2,1.2,0,1deg);
}
.cube-conteiner .cube.shadow {
  left:2.4em;
  top:2.5em;
}
.cube-conteiner.side0 .cube{
  -webkit-transform: perspective(11em) rotate3d(1,0,0,180deg);           
  -moz-transform: perspective(11em) rotate3d(1,0,0,180deg);           
  -o-transform: perspective(11em) rotate3d(1,0,0,180deg);           
  -ms-transform: perspective(11em) rotate3d(1,0,0,180deg);           
  transform: perspective(11em) rotate3d(1,0,0,180deg);           
}                
.cube-conteiner.side1 .cube{
  -webkit-transform: perspective(9em) rotate3d(0,0,0,0deg);           
  -moz-transform: perspective(9em) rotate3d(0,0,0,0deg);           
  -o-transform: perspective(9em) rotate3d(0,0,0,0deg);           
  -ms-transform: perspective(9em) rotate3d(0,0,0,0deg);           
  transform: perspective(9em) rotate3d(0,0,0,0deg);           
}
.cube-conteiner.side2 .cube{
  -webkit-transform: perspective(9em) rotate3d(1,0,0,90deg);           
  -moz-transform: perspective(9em) rotate3d(1,0,0,90deg);           
  -o-transform: perspective(9em) rotate3d(1,0,0,90deg);           
  -ms-transform: perspective(9em) rotate3d(1,0,0,90deg);           
  transform: perspective(9em) rotate3d(1,0,0,90deg);           
}
.cube-conteiner.side3 .cube{
  -webkit-transform: perspective(9em) rotate3d(0,1,0,-90deg);           
  -moz-transform: perspective(9em) rotate3d(0,1,0,-90deg);           
  -o-transform: perspective(9em) rotate3d(0,1,0,-90deg);           
  -ms-transform: perspective(9em) rotate3d(0,1,0,-90deg);           
  transform: perspective(9em) rotate3d(0,1,0,-90deg);           
}
.cube-conteiner.side4 .cube{
  -webkit-transform: perspective(9em) rotate3d(0,1,0,90deg);           
  -moz-transform: perspective(9em) rotate3d(0,1,0,90deg);           
  -o-transform: perspective(9em) rotate3d(0,1,0,90deg);           
  -ms-transform: perspective(9em) rotate3d(0,1,0,90deg);           
  transform: perspective(9em) rotate3d(0,1,0,90deg);           
}                
.cube-conteiner.side5 .cube{
  -webkit-transform: perspective(9em) rotate3d(1,0,0,-90deg);           
  -moz-transform: perspective(9em) rotate3d(1,0,0,-90deg);           
  -o-transform: perspective(9em) rotate3d(1,0,0,-90deg);           
  -ms-transform: perspective(9em) rotate3d(1,0,0,-90deg);           
  transform: perspective(9em) rotate3d(1,0,0,-90deg);           
}
.i0:hover ~ .cube {
  -webkit-transform: perspective(11em) rotate3d(1,0,0,180deg);           
  -moz-transform: perspective(11em) rotate3d(1,0,0,180deg);           
  -o-transform: perspective(11em) rotate3d(1,0,0,180deg);           
  -ms-transform: perspective(11em) rotate3d(1,0,0,180deg);           
  transform: perspective(11em) rotate3d(1,0,0,180deg);           
}                
.i1:hover ~ .cube {
  -webkit-transform: perspective(9em) rotate3d(0,0,0,0deg);           
  -moz-transform: perspective(9em) rotate3d(0,0,0,0deg);           
  -o-transform: perspective(9em) rotate3d(0,0,0,0deg);           
  -ms-transform: perspective(9em) rotate3d(0,0,0,0deg);           
  transform: perspective(9em) rotate3d(0,0,0,0deg);           
}
.i2:hover ~ .cube {
  -webkit-transform: perspective(9em) rotate3d(1,0,0,90deg);           
  -moz-transform: perspective(9em) rotate3d(1,0,0,90deg);           
  -o-transform: perspective(9em) rotate3d(1,0,0,90deg);           
  -ms-transform: perspective(9em) rotate3d(1,0,0,90deg);           
  transform: perspective(9em) rotate3d(1,0,0,90deg);           
}
.i3:hover ~ .cube {
  -webkit-transform: perspective(9em) rotate3d(0,1,0,-90deg);           
  -moz-transform: perspective(9em) rotate3d(0,1,0,-90deg);           
  -o-transform: perspective(9em) rotate3d(0,1,0,-90deg);           
  -ms-transform: perspective(9em) rotate3d(0,1,0,-90deg);           
  transform: perspective(9em) rotate3d(0,1,0,-90deg);           
}
.i4:hover ~ .cube {
  -webkit-transform: perspective(9em) rotate3d(0,1,0,90deg);           
  -moz-transform: perspective(9em) rotate3d(0,1,0,90deg);           
  -o-transform: perspective(9em) rotate3d(0,1,0,90deg);           
  -ms-transform: perspective(9em) rotate3d(0,1,0,90deg);           
  transform: perspective(9em) rotate3d(0,1,0,90deg);           
}                
.i5:hover ~ .cube {
  -webkit-transform: perspective(9em) rotate3d(1,0,0,-90deg);           
  -moz-transform: perspective(9em) rotate3d(1,0,0,-90deg);           
  -o-transform: perspective(9em) rotate3d(1,0,0,-90deg);           
  -ms-transform: perspective(9em) rotate3d(1,0,0,-90deg);           
  transform: perspective(9em) rotate3d(1,0,0,-90deg);           
}
.cube .n0 {
  top: 0;
  left: 0;

  -webkit-transform-origin: 0 1em;
  -moz-transform-origin: 0 1em;
  -o-transform-origin: 0 1em;
  -ms-transform-origin: 0 1em;
  transform-origin: 0 1em;

  -webkit-transform: translate3d(0,0,-1em) rotate3d(1,0,0,180deg);                                    
  -moz-transform: translate3d(0,0,-1em) rotate3d(1,0,0,0deg);                                    
  -o-transform: translate3d(0,0,-1em) rotate3d(1,0,0,180deg);
  -ms-transform: translate3d(0,0,-1em) rotate3d(1,0,0,180deg);                                    
  transform: translate3d(0,0,-1em) rotate3d(1,0,0,180deg);                                    
}
.cube .n1 {
  top: 0;
  left: 0;

  -webkit-transform: translate3d(0,0,1em);
  -moz-transform: translate3d(0,0,1em);
  -o-transform: translate3d(0,0,1em);
  -ms-transform: translate3d(0,0,1em);
  transform: translate3d(0,0,1em);
}
.cube .n2 {
  top: 2em;
  left: 0;

  -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,1em) rotate3d(1,0,0,-90deg);
  -moz-transform: translate3d(0,0,1em) rotate3d(1,0,0,-90deg);
  -o-transform: translate3d(0,0,1em) rotate3d(1,0,0,-90deg);
  -ms-transform: translate3d(0,0,1em) rotate3d(1,0,0,-90deg);
  transform: translate3d(0,0,1em) rotate3d(1,0,0,-90deg);
}
.cube .n3 {
  top: 0;
  left: 2em;

  -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,1em) rotate3d(0,1,0,90deg);
  -moz-transform: translate3d(0,0,1em) rotate3d(0,1,0,90deg);
  -o-transform: translate3d(0,0,1em) rotate3d(0,1,0,90deg);
  -ms-transform: translate3d(0,0,1em) rotate3d(0,1,0,90deg);
  transform: translate3d(0,0,1em) rotate3d(0,1,0,90deg);
}
.cube .n4 {
  top: 0;
  right: 2em;

  -webkit-transform-origin: 2em 0;
  -moz-transform-origin: 2em 0;
  -o-transform-origin: 2em 0;
  -ms-transform-origin: 2em 0;
  transform-origin: 2em 0;

  -webkit-transform: translate3d(0,0,1em) rotate3d(0,1,0,-90deg);
  -moz-transform: translate3d(0,0,1em) rotate3d(0,1,0,-90deg);
  -o-transform: translate3d(0,0,1em) rotate3d(0,1,0,-90deg);
  -ms-transform: translate3d(0,0,1em) rotate3d(0,1,0,-90deg);
  transform: translate3d(0,0,1em) rotate3d(0,1,0,-90deg);
}
.cube .n5 {
  bottom: 2em;
  left: 0;

  -webkit-transform-origin: 0 2em;
  -moz-transform-origin: 0 2em;
  -o-transform-origin: 0 2em;
  -ms-transform-origin: 0 2em;
  transform-origin: 0 2em;

  -webkit-transform: translate3d(0,0,1em) rotate3d(1,0,0,90deg);
  -moz-transform: translate3d(0,0,1em) rotate3d(1,0,0,90deg);
  -o-transform: translate3d(0,0,1em) rotate3d(1,0,0,90deg);
  -ms-transform: translate3d(0,0,1em) rotate3d(1,0,0,90deg);
  transform: translate3d(0,0,1em) rotate3d(1,0,0,90deg);
}