.mask_bg_color {
    background-color:chocolate;
    background-image: linear-gradient(to right, rgba(0,0,0,0.5) , rgba(0,0,0,0.7) , rgba(0,0,0,0.5)) , url(../img/animation/f-a-q.jpg);
  }
#container {
    background-color:black;
    width: 100%;
    height: 100%;
    perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
    -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
    perspective-origin: 50% 225px;
    -webkit-perspective-origin: 50% 225px;
    opacity: 0.33;
}
#stage {
    width: 100%;
    height: 100%;
    transition: -webkit-transform 2s;
    -webkit-transition: -webkit-transform 2s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

#shape {
    position: relative;
    top: 50px;
    margin: 0 auto;
    height: 150px;
    width: 150px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.plane {
    position: absolute;
    height: 150px;
    width: 150px;
    border: 1px solid white;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center;
    padding-top: 15px;
    font-family: Times, serif;
    font-size: 60pt;
    color: black;
    background-color: rgba(255, 255, 255, 0.6);
    transition: -webkit-transform 2s, opacity 2s;
    -webkit-transition: -webkit-transform 2s, opacity 2s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#shape.backfaces .plane {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

#shape {
    animation: spin 8s infinite linear;
    -webkit-animation: spin 8s infinite linear;
}

@keyframes spin {
    from { -webkit-transform: rotateY(0); }
    to   { -webkit-transform: rotateY(-360deg); }
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotateY(0); }
    to   { -webkit-transform: rotateY(-360deg); }
}

/* ---------- cube styles ------------- */
.cube > .one {
    opacity: 0.5;
    transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(75px);
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(75px);
}

.cube > .two {
    opacity: 0.5;
    transform: scale3d(1.2, 1.2, 1.2) translateZ(75px);
    -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(75px);
}

.cube > .three {
    opacity: 0.5;
    transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(75px);
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(75px);
}

.cube > .four {
    opacity: 0.5;
    transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(75px);
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(75px);
}

.cube > .five {
    opacity: 0.5;
    transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(75px);
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(75px);
}

.cube > .six {
    opacity: 0.5;
    transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(75px) rotate(180deg);
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(75px) rotate(180deg);
}


.cube > .seven {
    transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(75px) rotate(180deg);
    -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(75px) rotate(180deg);
}

.cube > .eight {
    transform: scale3d(0.8, 0.8, 0.8) translateZ(75px);
    -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(75px);
}

.cube > .nine {
    transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(75px);
    -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(75px);
}

.cube > .ten {
    transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(75px);
    -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(75px);
}

.cube > .eleven {
    transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(75px);
    -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(75px);
}

.cube > .twelve {
    transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(75px);
    -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(75px);
}