@charset "utf-8";
/* CSS Document */


/* keyframes for rotating animation */
@-webkit-keyframes spin {
  from { transform: rotateY(-0deg); }
  to   { transform: rotateY(-360deg); }
}

/* scene wrapper */
.wrapper{
  height: 400px;
  margin-top:50px;
  position:relative;
  perspective: 2700;
  perspective-origin: 50% 50px;
  background-color:#FFF;
}

/* cube wrapper */
.cube{
  top:50px;	
  position: relative;
  margin: 0 auto;
  width: 300px;
  transform-style: preserve-3d;
  animation: spin 10s infinite linear;
  transition: all 10s linear;
}

/* outer cube */
b{
  position:absolute;
  width:100px;
  height:250px;
  display:block;
  background:rgba(255,255,255,0.6);
  box-shadow:inset 0 30px 30px rgba(0,0,0,0.4);
  font-size:20px;
  text-align:center;
  line-height:0px;
  color:rgba(0,0,0,0.5);
  font-family:sans-serif;
  text-transform:uppercase;
  transition: all 1s linear;
  padding: 20px;
  box-shadow:
       inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 1px rgb(255,255,255),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
   /*background:url(https://cotizacion.gcprinting.ink/example.jpg);*/
   /*background:url(https://gcprinting.ink/wp-content/uploads/2023/04/logo-gc-printing-blanco-render.png) !important;
   background-size:contain;*/
 
}
b.back{
  transform: translateX(50px) translateZ(-25px) rotateY(180deg);
   background-color:#F00;
   background:url(https://cotizacion.gcprinting.ink/images/Artboard3.png);
    background-position-x: -72px;
    background-position-y: -0px;
   
}
b.right{
  width: 50px;
  transform:rotateY(-270deg) translateX(25px) translateZ(100px);
  transform-origin: center right;
   
  
}
b.left{
  width: 50px; 	
  transform:rotateY(270deg) translateX(-25px) translateZ(-50px);
  transform-origin: center left;
}
b.top{
	height:50px;
/*  transform:rotateX(-90deg) translateX(50px) translateY(0px) translateZ(50px);*/
  transform: translateZ(-25px) translateX(50px) rotateX(-90deg);
  transform-origin: top center;
}
b.bottom{
	height:50px;
  transform:rotateX(-90deg) translateY(175px);
  transform-origin: bottom center;
}
b.front{
  transform: translateX(50px) translateZ(25px);
 background:url(https://cotizacion.gcprinting.ink/images/Artboard3.png);
    background-position-x: 0px;
    background-position-y: 0px;
}

/* inner cube */
/*i{
  position:absolute;
  top:50px;
  left:50px;
  width:100px;
  height:100px;
  display:block;
  background:url(https://gcprinting.ink/wp-content/uploads/2023/04/logo-gc-printing-blanco-render.png);
  background-size:contain;
  transition: all 1s linear;
}
i.front{
  transform: translateZ(50px);
}
i.back{
  transform: translateZ(-50px) rotateY(180deg);
}
i.bottom{
  transform:rotateX(-90deg) translateY(50px);
  transform-origin: left bottom;
}
i.left{
  transform:rotateY(270deg) translateX(-50px);
  transform-origin: center left;
}
i.right{
  transform:rotateY(-270deg) translateX(50px);
  transform-origin: top right;
}
i.top{
  transform:rotateX(-270deg) translateY(-50px);
  transform-origin: left top;
}
*/
/* hover transformations */
.cube:hover{
  top:50px;
}
.cube:hover b.top{
  transform: translateZ(-25px) translateX(50px) rotateX(-210deg);
  transform-origin: top center;
}
.cube:hover b.bottom{
	transform: translateZ(50px) translateX(50px) traslateY(100) rotateX(-210deg);
  transform-origin: bottom center ;
}
.cube:hover i{
  top:-200px;
}