body{
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select:none;
}
.contexto{perspective: 1500px; width: 1023px; height: 700px;background-image: url('./images/fondo.png');
font-family: "arial";font-size: 2rem;
}
 
.cubo{width: 250px;height: 250px;position: absolute; 
  -webkit-transform-style: preserve-3d;
  /*-webkit-animation: rotatecube 10s infinite;*/
  
  -moz-transform-style: preserve-3d;
  /*-moz-animation: rotatecube 10s infinite;*/
transition-duration: 2s;
  
}
#cu1{left:200px;top:250px;}
#cu2{left:550px;top:250px;color: darkblue;}

.marcador{}
.boton{position: fixed;top: 150px;width: 100px;height: 30px;border: solid 2px; border-radius: 5px;color: black;text-align: center;padding-top: 10px;}
#b1{left:450px;background-color: green;}


.cara{position: relative;width: 250px;height: 250px;top:0px;left:0px;opacity: 0.95;background-image: url("./images/fondocara3.png");text-align: center;}
#frente1,#frente2{top:0px;
  -webkit-transform: translateZ( 125px );
  -moz-transform: translateZ( 125px );
  }

#atras1,#atras2{top:-250px;
  -webkit-transform: rotateY( 180deg ) translateZ( 125px );
  -moz-transform: rotateY( 180deg ) translateZ( 125px );
}

#izquierda1,#izquierda2{top:-500px;background-image: url("./images/fondocara4.png");
  -webkit-transform: rotateY( -90deg ) translateZ( 125px );
  -moz-transform: rotateY( -90deg ) translateZ( 125px );
}

#derecha1,#derecha2{top:-750px;background-image: url("./images/fondocara4.png");
  -webkit-transform: rotateY(  90deg ) translateZ( 125px );
  -moz-transform: rotateY(  90deg ) translateZ( 125px );
}

#arriba1,#arriba2{top:-1000px;
  -webkit-transform: rotateX(  90deg ) translateZ( 125px );
  -moz-transform: rotateX(  90deg ) translateZ( 125px );
}

#abajo1,#abajo2{top:-1250px;background-image: url("./images/fondocara4.png");
  -webkit-transform: rotateX( -90deg ) translateZ( 125px );
  -moz-transform: rotateX( -90deg ) translateZ( 125px );
}

@-webkit-keyframes rotatecube {
  0% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  25% { -webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(270deg); }
  40% { -webkit-transform: rotateX(180deg) rotateY(0deg) rotateZ(180deg); }
  65% { -webkit-transform: rotateX(270deg) rotateY(90deg) rotateZ(90deg); }
  80% { -webkit-transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg); }
}

@-moz-keyframes rotatecube {
  0% { -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  25% { -moz-transform: rotateX(90deg) rotateY(90deg) rotateZ(270deg); }
  40% { -moz-transform: rotateX(180deg) rotateY(0deg) rotateZ(180deg); }
  65% { -moz-transform: rotateX(270deg) rotateY(90deg) rotateZ(90deg); }
  80% { -moz-transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg); }
}