body 
    {
        background-color: #000000;
        overflow:hidden;
        -webkit-animation: fadein 8s; /* Safari and Chrome */
        -moz-animation: fadein 8s; /* Firefox */

        -o-animation: fadein 8s; /* Opera */
        animation: fadein 8s;
        height:100%;
        width:100%;
    }

    @keyframes fadein 
    {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Firefox */
    @-moz-keyframes fadein 
    {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Safari and Chrome */
    @-webkit-keyframes fadein 
    {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @font-face
    { 
        font-family: "Chiller";
        src: url('/chiller.ttf') format("truetype");
    }




    #topFace 
    {
        position:absolute;
        z-index:1;
        top:0px;
        float:left;
        width:100%;
        height:130px;
        
        background: -moz-linear-gradient(80deg,  rgba(0,0,0,0) 0%, rgba(125,125,125,1) 50%, rgba(147,147,147,1) 59%, rgba(255,255,255,1) 76%); /* FF3.6+ */
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(125,125,125,1)), color-stop(59%,rgba(147,147,147,1)), color-stop(76%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(30deg,  rgba(0,0,0,0) 0%,rgba(125,125,125,1) 50%,rgba(147,147,147,1) 59%,rgba(255,255,255,1) 76%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(80deg,  rgba(0,0,0,0) 0%,rgba(125,125,125,1) 50%,rgba(147,147,147,1) 59%,rgba(255,255,255,1) 76%); /* Opera 11.10+ */
        background: -ms-linear-gradient(80deg,  rgba(0,0,0,0) 0%,rgba(125,125,125,1) 50%,rgba(147,147,147,1) 59%,rgba(255,255,255,1) 76%); /* IE10+ */
        background: linear-gradient(80deg,  rgba(0,0,0,0) 0%,rgba(125,125,125,1) 50%,rgba(147,147,147,1) 59%,rgba(255,255,255,1) 76%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    }


    #container 
    {
        position:absolute;
        width: auto;
        height:auto;
        z-index:50;
        -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
        -webkit-animation: movePerspectiveOut 8s forwards ease-out;
    }

    #container:hover 
    {
        position:absolute;
        width: auto;
        height:auto;
        z-index:50;
        -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
        -webkit-animation: movePerspectiveIn 8s forwards ease-out;
    }


    @-webkit-keyframes movePerspectiveOut {
      from 
      {       
          -webkit-perspective-origin: 0% 30px;
      }
      to   
      {       
        -webkit-perspective-origin: 20% 125px;
      }
    }


    @-webkit-keyframes movePerspectiveIn {
      from 
      {       
        -webkit-perspective-origin: 20% 125px;
      }
      to   
      {       
          -webkit-perspective-origin: 20% 30px;
      }
    }

    #stage {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 4s;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: translateZ(0);
      -moz-transition: transform 4s;
      -moz-transform-style: preserve-3d;
      -moz-transform: translateZ(0)

    }
    
    #stage:hover {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 4s;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: translateZ(-400px);

      -moz-transition: transform 4s;
      -moz-transform-style: preserve-3d;
      -moz-transform: translateZ(-400px)


    }

    #shape {
        position: relative;
        top: 0px;
        left:130px; 
        height: 200px;
        width: 200px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        z-index:10;
    }
    
    .plane {
      position: absolute;
      height: 170px;
      width: 170px;
      border: 1px solid white;
      -webkit-border-radius: 50px;
      -webkit-box-sizing: border-box;
      border-radius: 50px;
      box-sizing: border-box;
      text-align: center;
      font-family: Chiller;
      font-size: 124pt;
      line-height:185px;
      color: black;


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

      -moz-transition: -webkit-transform 2s, opacity 2s;
      -moz-backface-visibility: hidden;
      background-color: rgba(100, 100, 100, 0.6);
    }

    #shape.backfaces .plane {
      -webkit-backface-visibility: visible;
      -moz-backface-visibility: visible;
    }
    
    #shape {
      -webkit-animation: moveOut 4s forwards ease-out, spin 16s 8s infinite alternate;
      -moz-animation: moveOut 6s forwards, spin 16s infinite alternate;
    }

    #shape:hover{
      -webkit-animation: moveIn 2s forwards ease-out, spin2 6s 3s infinite linear;
      -moz-animation: moveIn 2s forwards, spin2 12s 2s infinite linear;
    }


    /* WebKit */

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

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

    @-webkit-keyframes moveOut {
      from {       
            -webkit-transform: rotateY(-360deg) rotateZ(-360deg);
            top: 50px;
            left:190px;
      }
      to   {       
          -webkit-transform: rotateY(-360deg) rotateZ(0deg);
          top: 70px;
          left:120px; 
      }
    }

    @-webkit-keyframes moveIn {
      from {       
          -webkit-transform: rotateY(-360deg) rotateZ(0deg);
          top: 70px;
          left:120px; 
      }
      to   {       
           -webkit-transform: rotateY(-360deg) rotateZ(-360deg);
            top: 50px;
            left:190px;
      }
    }

    /* WebKit*/

    /* Others */

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

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

    @-moz-keyframes moveOut {
      from {       
            top: 20px;
            left:190px;
      }
      to   {       
          top: 70px;
          left:120px; 
      }
    }

    @-moz-keyframes moveIn {
      from {       
          top: 70px;
          left:120px; 
      } 
      to   {       
            top: 20px;
            left:190px;
      }
    }

    /* Othters */

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

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

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

    .cube .four {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
      -moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
      line-height: 110px;
    }

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

    .cube .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);
    }


    .cube > .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);
    }

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

    .cube .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);
    }

    .cube .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);
      line-height: 110px;
    }

    .cube .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);
      line-height: 135px;
    }

    .cube .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);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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


      .theTweet 
      {
        position:absolute;
        width:auto;
        left:-700px;
        text-align:left;
        overflow:visible;
        color:white;
        font-family: Chiller;
        font-size:250px;
        white-space:nowrap;
        background-color:transparent;
	    opacity: 0;
        display:none;
        z-index:1000;
      }

      .contact 
      {
        position:absolute;
        width:60%;
        left:0px;
        text-align:center;
        overflow:visible;
        color:white;
        font-family: Chiller;
        font-size:1000px;
        white-space:nowrap;
        background-color:transparent;
	    opacity: 0;
        display:none;
        z-index:2;
      }

    .contact a 
    {
        color:white;
        text-decoration:none;
    }


    .tweetAnimation
    {
        display:block;
	    -webkit-animation-name: transition_Zoom_with_bounce2;
        -webkit-animation-duration: 30s;
	    -webkit-animation-timing-function: ease;
	    -webkit-animation-iteration-count: 1;	
	    -webkit-animation-direction: normal;
	    -webkit-animation-delay: 0s;
	    -webkit-animation-play-state: running;
	    -webkit-animation-fill-mode: forwards;
        z-index:11;
    }

    .contactAnimation
    {
        display:block;
	    -webkit-animation-name: transition_Zoom_with_bounce;
        -webkit-animation-duration: 30s;
	    -webkit-animation-timing-function: ease;
	    -webkit-animation-iteration-count: 1;	
	    -webkit-animation-direction: normal;
	    -webkit-animation-delay: 0s;
	    -webkit-animation-play-state: running;
	    -webkit-animation-fill-mode: forwards;
        z-index:12;
    }

    .contactAnimation2
    {
        display:block;
	    -webkit-animation-name: transition_Zoom_with_bounce;
        -webkit-animation-duration: 30s;
	    -webkit-animation-timing-function: ease;
	    -webkit-animation-iteration-count: 1;	
	    -webkit-animation-direction: normal;
	    -webkit-animation-delay: 11s;
	    -webkit-animation-play-state: running;
	    -webkit-animation-fill-mode: forwards;
        z-index:12;

    }

    .contactAnimation3
    {
        display:block;
	    -webkit-animation-name: transition_Zoom_with_bounce;
        -webkit-animation-duration: 30s;
	    -webkit-animation-timing-function: ease;
	    -webkit-animation-iteration-count: 1;	
	    -webkit-animation-direction: normal;
	    -webkit-animation-delay: 22s;
	    -webkit-animation-play-state: running;
	    -webkit-animation-fill-mode: forwards;
        z-index:11;
    }

    @-webkit-keyframes transition_Zoom_with_bounce
    {
	    0% {opacity: 0; top:-900px; left:-300; -webkit-transform: scale(3);}
	    20% {opacity: 1; top:-700px; left:-320; -webkit-transform: scale(0.3);}
	    40% {top:-650px; left:-340; -webkit-transform: scale(0.15);}
	    45% {top:-600px; left:-360; -webkit-transform: scale(0.4);}
        99% {opacity: 0; top:-1050px; left:-100; -webkit-transform: scale(5) rotateZ(180deg);}
        100% {display:none}
    }


    @-webkit-keyframes transition_Zoom_with_bounce2
    {
	    0% {opacity: 0; top:0px; -webkit-transform: scale(3);}
	    20% {opacity: 1; top:0px; -webkit-transform: scale(0.3);}
	    40% {top:0px; -webkit-transform: scale(0.15);}
	    45% {top:0px; -webkit-transform: scale(0.4);}
        99% {opacity: 0; top:0px; -webkit-transform: scale(5) rotateZ(180deg);}
        100% {display:none}                 
    }