/* -- Group -- */
/* -- normal -- */
background-color: #eee;
border-radius: 5px;
display: inline-block;
height: 240px;
padding: 10px;
position: relative;
-webkit-transition: -webkit-transform 500ms linear;
transition: transform 500ms linear;
width: 240px;
z-index: 1;

/* -- hover -- */
/* rotate of x-axis */
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);

/* rotate of x=y axis */
-webkit-transform: rotate3d(-2,1, 0,-180deg);
transform: rotate3d(-2,1, 0,-180deg);

/* rotate of y-axis */
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);

/* -- Title -- */
/* -- normal -- */
box-sizing: border-box;
height: 25%;
left: 0;
opacity: 1;
padding: 10px;
position: absolute;
top: 0;
-webkit-transition: opacity 0 250ms linear;
transition: opacity 0 250ms linear;
width: 100%;

/* -- Brief Description -- */
/* -- normal -- */
box-sizing: border-box;
height: 75%;
left: 0;
opacity: 1;
padding: 10px;
position: absolute;
top: 25%;
-webkit-transition: opacity 0 250ms linear;
transition: opacity 0 250ms linear;
width: 100%;

/* -- Long Description -- */
/* -- normal -- */
background-color: #eee;
box-sizing: border-box;
height: 100%;
left: 0;
opacity: 0;
padding: 12.5% 10px;
position: absolute;
top: 0;
-webkit-transition: transform 500ms linear, opacity 0 250s linear;
transition: transform 500ms linear, opacity 0 250ms linear;
width: 100%;

/* Title & Brief Description */
/* -- hide when the group rotates -- */
.style-10212 .group:hover h4,
.style-10212 .group:hover .brief-description {
    opacity: 0;
}

/* -- Login Description -- */
/* -- rotate the long description with the group so it's visible -- */
.style-10212 .group:hover .long-description {
  opacity: 1;

  /* rotate of x-axis */
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);

  /* rotate of x=y axis */
  -webkit-transform: rotate3d(-2,1, 0,-180deg);
  transform: rotate3d(-2,1, 0,-180deg);

  /* rotate of y-axis */
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* Long Description - Rotate X = Y */
/* -- Hide the rotated backface because it rotates differently -- */
.style-10212 .group:nth-child(2){
  -webkit-transition: transform 500ms linear, background-color 0 250ms linear;
  transition: transform 500ms linear, background-color 0 250ms ;
}
.style-10212 .group:nth-child(2):hover {
  background-color: transparent;
}