<div id="wrapper">
  <div id="outline" class="centering" >
    <div id="sphere" class="base">
      <svg>
        <defs>
          <polygon id="tri" points="0,60 16,-1 32,60"></polygon>
          <polygon id="tpz1" points="13,-1 0,60 59,60 45,-1"></polygon>
          <polygon id="tpz2" points="16,-1 7,60 83.5,60 74.5,-1"></polygon>
          <polygon id="tpz3" points="12.2,-1 8.5,60 91,60 88.5,-1"></polygon>
        </defs>
      </svg>
      <div class="obj">
        <div class="hemi">
          <div class="phase-1">
            <div class="opposite1">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
            <div class="opposite2">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
            <div class="opposite3">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
            <div class="opposite4">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
            <div class="opposite5">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
            <div class="opposite6">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
          </div>
          <div class="phase-2">
            <div class="opposite1">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
            <div class="opposite2">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
            <div class="opposite3">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
            <div class="opposite4">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
            <div class="opposite5">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
            <div class="opposite6">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
          </div>
          <div class="phase-3">
            <div class="opposite1">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
            <div class="opposite2">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
            <div class="opposite3">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
            <div class="opposite4">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
            <div class="opposite5">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
            <div class="opposite6">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
          </div>
          <div class="phase-4">
            <div class="opposite1">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
            <div class="opposite2">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
            <div class="opposite3">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
            <div class="opposite4">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
            <div class="opposite5">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
            <div class="opposite6">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
          </div>
        </div>
        <div class="hemi2">
          <div class="phase-1">
            <div class="opposite1">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
            <div class="opposite2">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
            <div class="opposite3">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
            <div class="opposite4">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
            <div class="opposite5">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
            <div class="opposite6">
              <svg class="tr1a" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
              <svg class="tr1b" width="32px" height="60px">
                <use xlink:href="#tri"></use>
              </svg>
            </div>
          </div>
          <div class="phase-2">
            <div class="opposite1">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
            <div class="opposite2">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
            <div class="opposite3">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
            <div class="opposite4">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
            <div class="opposite5">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
            <div class="opposite6">
              <svg class="tpz1a" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
              <svg class="tpz1b" width="59px" height="60px">
                <use xlink:href="#tpz1"></use>
              </svg>
            </div>
          </div>
          <div class="phase-3">
            <div class="opposite1">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
            <div class="opposite2">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
            <div class="opposite3">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
            <div class="opposite4">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
            <div class="opposite5">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
            <div class="opposite6">
              <svg class="tpz2a" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
              <svg class="tpz2b" width="90px" height="60px">
                <use xlink:href="#tpz2"></use>
              </svg>
            </div>
          </div>
          <div class="phase-4">
            <div class="opposite1">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
            <div class="opposite2">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
            <div class="opposite3">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
            <div class="opposite4">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
            <div class="opposite5">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
            <div class="opposite6">
              <svg class="tpz3a" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
              <svg class="tpz3b" width="100px" height="60px">
                <use xlink:href="#tpz3"></use>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

body {
    padding:0;
    margin:0;
    overflow-x:hidden;
    background-color:#199eff;
}

.base div {
    position:absolute;
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
}

svg {
    position:absolute;
}

svg polygon {
    stroke:rgba(255, 255, 255, 0.50);
}

#tri {
    fill:rgba(255, 255, 255, 0.50);
}

#tpz1 {
    fill:rgba(203, 237, 255, 0.50);
    -webkit-animation-delay:0.4s;
       -moz-animation-delay:0.4s;
         -o-animation-delay:0.4s;
        -ms-animation-delay:0.4s;
            animation-delay:0.4s;
}

#tpz2 {
    fill:rgba(162, 222, 255, 0.50);
    -webkit-animation-delay:0.8s;
       -moz-animation-delay:0.8s;
         -o-animation-delay:0.8s;
        -ms-animation-delay:0.8s;
            animation-delay:0.8s;
}

#tpz3 {
    fill:rgba(162, 222, 255, 0.30);
    -webkit-animation-delay:1s;
       -moz-animation-delay:1s;
         -o-animation-delay:1s;
        -ms-animation-delay:1s;
            animation-delay:1s;
}

#wrapper {
    width:100%;
    height:100%;
    position:fixed;
}

.centering {
    left:50%;
    top:50%;
    margin-left:-120px;
    margin-top:-120px;
    width:240px;
    height:240px;
    position:absolute;
}

#outline {
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
}

.base {
    position:absolute;
    width:inherit;
    height:inherit;
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
    -webkit-transform:translate3d(0.00px,0.00px,0.00px);
       -moz-transform:translate3d(0.00px,0.00px,0.00px);
         -o-transform:translate3d(0.00px,0.00px,0.00px);
        -ms-transform:translate3d(0.00px,0.00px,0.00px);
            transform:translate3d(0.00px,0.00px,0.00px);
}

.obj {
    -webkit-transform:translate3d(104px,121.00px,0.00px);
       -moz-transform:translate3d(104px,121.00px,0.00px);
         -o-transform:translate3d(104px,121.00px,0.00px);
        -ms-transform:translate3d(104px,121.00px,0.00px);
            transform:translate3d(104px,121.00px,0.00px);
}

/*--Basic Setting--*/
.tr1a {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
}

.tr1b {
    -webkit-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
       -moz-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
         -o-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
        -ms-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
            transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
}

.tpz1a {
    -webkit-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
       -moz-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
         -o-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
        -ms-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
            transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
}

.tpz1b {
    -webkit-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
       -moz-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
         -o-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
        -ms-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
            transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
}

.tpz2a {
    -webkit-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
       -moz-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
         -o-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
        -ms-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
            transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
}

.tpz2b {
    -webkit-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
       -moz-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
         -o-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
        -ms-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
            transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
}

.tpz3a {
    -webkit-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
       -moz-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
         -o-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
        -ms-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
            transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
}

.tpz3b {
    -webkit-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
       -moz-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
         -o-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
        -ms-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
            transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
}

.opposite1 {
}

.opposite2 {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
}

.opposite3 {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
}

.opposite4 {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
}

.opposite5 {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
}

.opposite6 {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
}

.phase-1 > div,
.phase-2 > div,
.phase-3 > div,
.phase-4 > div {
    width:32px;
}

.phase-1 {
    -webkit-transform:translate3d(0.00px,0.00px,100px);
       -moz-transform:translate3d(0.00px,0.00px,100px);
         -o-transform:translate3d(0.00px,0.00px,100px);
        -ms-transform:translate3d(0.00px,0.00px,100px);
            transform:translate3d(0.00px,0.00px,100px);
}

.phase-2 {
    -webkit-transform:translate3d(0.00px,0.00px,77.50px);
       -moz-transform:translate3d(0.00px,0.00px,77.50px);
         -o-transform:translate3d(0.00px,0.00px,77.50px);
        -ms-transform:translate3d(0.00px,0.00px,77.50px);
            transform:translate3d(0.00px,0.00px,77.50px);
}

.phase-3 {
    -webkit-transform:translate3d(0.00px,0.00px,36px);
       -moz-transform:translate3d(0.00px,0.00px,36px);
         -o-transform:translate3d(0.00px,0.00px,36px);
        -ms-transform:translate3d(0.00px,0.00px,36px);
            transform:translate3d(0.00px,0.00px,36px);
}

.phase-4 {
    -webkit-transform:translate3d(0.00px,0.00px,-18px);
       -moz-transform:translate3d(0.00px,0.00px,-18px);
         -o-transform:translate3d(0.00px,0.00px,-18px);
        -ms-transform:translate3d(0.00px,0.00px,-18px);
            transform:translate3d(0.00px,0.00px,-18px);
}

.hemi {
    -webkit-transform:translate3d(0.00px,0.00px,47px);
       -moz-transform:translate3d(0.00px,0.00px,47px);
         -o-transform:translate3d(0.00px,0.00px,47px);
        -ms-transform:translate3d(0.00px,0.00px,47px);
            transform:translate3d(0.00px,0.00px,47px);
    width:32px;
}

.hemi2 {
    -webkit-transform:translate3d(0.00px,0.00px,-47px) rotate(0.00deg) rotateX(180.00deg);
       -moz-transform:translate3d(0.00px,0.00px,-47px) rotate(0.00deg) rotateX(180.00deg);
         -o-transform:translate3d(0.00px,0.00px,-47px) rotate(0.00deg) rotateX(180.00deg);
        -ms-transform:translate3d(0.00px,0.00px,-47px) rotate(0.00deg) rotateX(180.00deg);
            transform:translate3d(0.00px,0.00px,-47px) rotate(0.00deg) rotateX(180.00deg);
    width:32px;
}




/*transform*/
#outline {
    -webkit-animation-name:outline;
       -moz-animation-name:outline;
         -o-animation-name:outline;
        -ms-animation-name:outline;
            animation-name:outline;
    -webkit-animation-duration:30s;
       -moz-animation-duration:30s;
         -o-animation-duration:30s;
        -ms-animation-duration:30s;
            animation-duration:30s;
    -webkit-animation-iteration-count:infinite;
       -moz-animation-iteration-count:infinite;
         -o-animation-iteration-count:infinite;
        -ms-animation-iteration-count:infinite;
            animation-iteration-count:infinite;
    -webkit-animation-fill-mode:forwards;
       -moz-animation-fill-mode:forwards;
         -o-animation-fill-mode:forwards;
        -ms-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
  

}

@-webkit-keyframes outline {
    0% {
        -webkit-transform :perspective(14040px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(0.1, 0.1, 0.1);
    }
    0% {
        -webkit-transform :perspective(1420px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    }
    26% {
        -webkit-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(-51deg) rotateZ(90deg) scale3d(1, 1, 1);
    }
    73% {
        -webkit-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(34deg) rotateZ(255deg) scale3d(1, 1, 1);
    }
    100% {
        -webkit-transform :perspective(1240px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(1, 1, 1);
    }
}

@-moz-keyframes outline {
    0% {
        -moz-transform :perspective(14040px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(0.1, 0.1, 0.1);
    }
    0% {
        -moz-transform :perspective(1420px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    }
    26% {
        -moz-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(-51deg) rotateZ(90deg) scale3d(1, 1, 1);
    }
    73% {
        -moz-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(34deg) rotateZ(255deg) scale3d(1, 1, 1);
    }
    100% {
        -moz-transform :perspective(1240px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(1, 1, 1);
    }
}

@-o-keyframes outline {
    0% {
        -o-transform :perspective(14040px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(0.1, 0.1, 0.1);
    }
    0% {
        -o-transform :perspective(1420px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    }
    26% {
        -o-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(-51deg) rotateZ(90deg) scale3d(1, 1, 1);
    }
    73% {
        -o-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(34deg) rotateZ(255deg) scale3d(1, 1, 1);
    }
    100% {
        -o-transform :perspective(1240px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(1, 1, 1);
    }
}

@-ms-keyframes outline {
    0% {
        -ms-transform :perspective(14040px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(0.1, 0.1, 0.1);
    }
    0% {
        -ms-transform :perspective(1420px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    }
    26% {
        -ms-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(-51deg) rotateZ(90deg) scale3d(1, 1, 1);
    }
    73% {
        -ms-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(34deg) rotateZ(255deg) scale3d(1, 1, 1);
    }
    100% {
        -ms-transform :perspective(1240px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(1, 1, 1);
    }
}

@keyframes outline{
    0% {
        transform :perspective(14040px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(0.1, 0.1, 0.1);
    }
    0% {
        transform :perspective(1420px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    }
    26% {
        transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(-51deg) rotateZ(90deg) scale3d(1, 1, 1);
    }
    73% {
        transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(34deg) rotateZ(255deg) scale3d(1, 1, 1);
    }
    100% {
        transform :perspective(1240px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(1, 1, 1);
    }
}