body {
     /* background-color: black;
      color: white;
      font-family: 'Lucida Grande', Verdana, Arial;
      font-size: 12px;
      background-image: -webkit-gradient(radial,
                            50% 500, 1,
                            50% 500, 400,
                            from(rgba(255, 255, 255, 0.3)),
                            to(rgba(255, 255, 255, 0)));
     background-repeat: no-repeat;*/
    }

    #containerA11 {
      /*width: 100%;
      height: 700px;*/
      -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
      -webkit-perspective-origin: 50% 225px;

        -moz-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
      -moz-perspective-origin: 50% 225px;

        -ms-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
      -ms-perspective-origin: 50% 225px;

        -o-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
      -o-perspective-origin: 50% 225px;

        perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
      perspective-origin: 50% 225px;

    }
    #stageA11 {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 2s;
      -webkit-transform-style: preserve-3d;

       -moz-transition: -webkit-transform 2s;
      -moz-transform-style: preserve-3d;

       -ms-transition: -webkit-transform 2s;
      -ms-transform-style: preserve-3d;

       -o-transition: -webkit-transform 2s;
      -o-transform-style: preserve-3d;

       transition: -webkit-transform 2s;
      transform-style: preserve-3d;


    }

    #shapeA11 {
      position: relative;
      top: 0px;

      margin: 0 auto;
      height: 150px;
      width: 150px;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;


    }

    .plane {
      position: absolute;
      height: 150px;
      width: 150px;
      /*border: 1px solid white;*/

      -webkit-border-radius: 12px;
      -webkit-box-sizing: border-box;

        -moz-border-radius: 12px;
      -moz-box-sizing: border-box;

        -ms-border-radius: 12px;
      -ms-box-sizing: border-box;

        -o-border-radius: 12px;
      -o-box-sizing: border-box;

        border-radius: 12px;
      box-sizing: border-box;

      text-align: center;
      font-family: Times, serif;
      font-size: 124pt;
      color: black;
      //background-color: rgba(255, 255, 255, 0.0);
      ////background-color: rgba(255, 255, 255, 0.6);
      background-color: rgba(25, 126, 42, 0.6);

      -webkit-transition: -webkit-transform 2s, opacity 2s;
      -webkit-backface-visibility: hidden;

      -moz-transition: -webkit-transform 2s, opacity 2s;
      -moz-backface-visibility: hidden;

      -ms-transition: -webkit-transform 2s, opacity 2s;
      -ms-backface-visibility: hidden;

      -o-transition: -webkit-transform 2s, opacity 2s;
      -o-backface-visibility: hidden;

      transition: -webkit-transform 2s, opacity 2s;
      backface-visibility: hidden;

    }

    #shapeA11.backfaces .plane {
      -webkit-backface-visibility: visible;
      -moz-backface-visibility: visible;
      -ms-backface-visibility: visible;
      -o-backface-visibility: visible;
      backface-visibility: visible;
    }

    #shapeA11 {
      -webkit-animation: spin 8s infinite linear;
      -moz-animation: spin 8s infinite linear;
      -ms-animation: spin 8s infinite linear;
      -o-animation: spin 8s infinite linear;
      animation: spin 8s infinite linear;
    }

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

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

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

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

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

    }

    /* ---------- cube styles ------------- */
    .cubeA11 > .one {
      opacity: 1;
      -webkit-transform: scale3d(1.0, 1.0, 1.0) rotateX(90deg) translateZ(100px) ;
      -moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
      -ms-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
      -o-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
      transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
    }

    .cubeA11 > .two {
      opacity: 1;
      -webkit-transform: scale3d(1.0, 1.0, 1.0) translateZ(100px) ;
      -moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
      -ms-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
      -o-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
      transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
    }

    .cubeA11 > .three {
      opacity: 1;
      -webkit-transform: scale3d(1.0, 1.0, 1.0) rotateY(90deg) translateZ(100px) ;
      -moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
      -ms-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
      -o-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
      transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px) ;
    }

    .cubeA11 > .four {
      opacity: 1;
      -webkit-transform: scale3d(1.0, 1.0, 1.0) rotateY(180deg) translateZ(100px) ;
       -moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px) ;
        -ms-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px) ;
         -o-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px) ;
          transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px) ;

    }

    .cubeA11 > .five {
      opacity: 1;
      -webkit-transform: scale3d(1.0, 1.0, 1.2) rotateY(-90deg) translateZ(100px) ;
       -moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px) ;
        -ms-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px) ;
         -o-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px) ;
          transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px) ;
    }

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


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

    .cubeA11 > .eight {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
       -moz-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
        -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
         -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
          -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
    }

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

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

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

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

    /* ---------- ring styles ------------- */
    .ring > .one {
      -webkit-transform: translateZ(380px);
      -moz-transform: translateZ(380px);
      -ms-transform: translateZ(380px);
      -o-transform: translateZ(380px);
      transform: translateZ(380px);
    }

    .ring > .two {
      -webkit-transform: rotateY(30deg) translateZ(380px);
      -moz-transform: rotateY(30deg) translateZ(380px);
      -ms-transform: rotateY(30deg) translateZ(380px);
      -o-transform: rotateY(30deg) translateZ(380px);
      transform: rotateY(30deg) translateZ(380px);
    }

    .ring > .three {
      -webkit-transform: rotateY(60deg) translateZ(380px);
      -moz-transform: rotateY(60deg) translateZ(380px);
      -ms-transform: rotateY(60deg) translateZ(380px);
      -o-transform: rotateY(60deg) translateZ(380px);
      transform: rotateY(60deg) translateZ(380px);
    }

    .ring > .four {
      -webkit-transform: rotateY(90deg) translateZ(380px);
      -moz-transform: rotateY(90deg) translateZ(380px);
      -ms-transform: rotateY(90deg) translateZ(380px);
      -o-transform: rotateY(90deg) translateZ(380px);
      transform: rotateY(90deg) translateZ(380px);
    }

    .ring > .five {
      -webkit-transform: rotateY(120deg) translateZ(380px);
      -moz-transform: rotateY(120deg) translateZ(380px);
      -ms-transform: rotateY(120deg) translateZ(380px);
      -o-transform: rotateY(120deg) translateZ(380px);
      transform: rotateY(120deg) translateZ(380px);
    }

    .ring > .six {
      -webkit-transform: rotateY(150deg) translateZ(380px);
      -moz-transform: rotateY(150deg) translateZ(380px);
      -webkit-transform: rotateY(150deg) translateZ(380px);
      -webkit-transform: rotateY(150deg) translateZ(380px);
      -webkit-transform: rotateY(150deg) translateZ(380px);
    }

    .ring > .seven {
      -webkit-transform: rotateY(180deg) translateZ(380px);
      -moz-transform: rotateY(180deg) translateZ(380px);
      -webkit-transform: rotateY(180deg) translateZ(380px);
      -webkit-transform: rotateY(180deg) translateZ(380px);
      -webkit-transform: rotateY(180deg) translateZ(380px);
    }

    .ring > .eight {
      -webkit-transform: rotateY(210deg) translateZ(380px);
      -moz-transform: rotateY(210deg) translateZ(380px);
      -webkit-transform: rotateY(210deg) translateZ(380px);
      -webkit-transform: rotateY(210deg) translateZ(380px);
      -webkit-transform: rotateY(210deg) translateZ(380px);
    }

    .ring > .nine {
      -webkit-transform: rotateY(-120deg) translateZ(380px);
      -moz-transform: rotateY(-120deg) translateZ(380px);
      -webkit-transform: rotateY(-120deg) translateZ(380px);
      -webkit-transform: rotateY(-120deg) translateZ(380px);
      -webkit-transform: rotateY(-120deg) translateZ(380px);
    }

    .ring > .ten {
      -webkit-transform: rotateY(-90deg) translateZ(380px);
      -moz-transform: rotateY(-90deg) translateZ(380px);
      -webkit-transform: rotateY(-90deg) translateZ(380px);
      -webkit-transform: rotateY(-90deg) translateZ(380px);
      -webkit-transform: rotateY(-90deg) translateZ(380px);
    }

    .ring > .eleven {
      -webkit-transform: rotateY(300deg) translateZ(380px);
      -moz-transform: rotateY(300deg) translateZ(380px);
      -webkit-transform: rotateY(300deg) translateZ(380px);
      -webkit-transform: rotateY(300deg) translateZ(380px);
      -webkit-transform: rotateY(300deg) translateZ(380px);
    }

    .ring > .twelve {
      -webkit-transform: rotateY(330deg) translateZ(380px);
      -moz-transform: rotateY(330deg) translateZ(380px);
      -webkit-transform: rotateY(330deg) translateZ(380px);
      -webkit-transform: rotateY(330deg) translateZ(380px);
      -webkit-transform: rotateY(330deg) translateZ(380px);
    }

    .controls {
      width: 80%;
      margin: 0 auto;
      padding: 5px 20px;
      -webkit-border-radius: 12px;
      background-color: rgba(255, 255, 255, 0.5);
    }
    .controls > div {
      margin: 10px;
    }