#ctjunglogo img.top,
#ctjunglogo-big img.top {
    -webkit-animation-name: cf3FadeInOut;
            animation-name: cf3FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
}

@-webkit-keyframes cf3FadeInOut {
    0%   { opacity:1; }
    40%  { opacity:1; }
    60%  { opacity:0; }
    100% { opacity:0; }
}

@keyframes cf3FadeInOut {
    0%   { opacity:1; }
    40%  { opacity:1; }
    60%  { opacity:0; }
    100% { opacity:0; }
}


#ctjunglogo-big div {
    position:relative;
    -webkit-animation-name: slideAndSpinIn;
            animation-name: slideAndSpinIn;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
}

@-webkit-keyframes slideAndSpinIn {
    from {
        left:-250%;
        transform:rotate(360deg);
    } to {
        left:0;
        transform:rotate(0deg);
    }
}
@keyframes slideAndSpinIn {
    from {
        left:-250%;
        transform:rotate(360deg);
    } to {
        left:0;
        transform:rotate(0deg);
    }
}



ul#list li {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
}

ul#list li:first-child {
    -webkit-animation-name: flyIn_1;
            animation-name: flyIn_1;
}

ul#list li:nth-child(2) {
    -webkit-animation-name: flyIn_2;
            animation-name: flyIn_2;
}

ul#list li:nth-child(3) {
    -webkit-animation-name: flyIn_3;
            animation-name: flyIn_3;
}

ul#list li:nth-child(4) {
    -webkit-animation-name: flyIn_4;
            animation-name: flyIn_4;
}

ul#list li:nth-child(5) {
         -webkit-animation-name: flyIn_5;
                 animation-name: flyIn_5;
}

ul#list li:nth-child(6) {
    -webkit-animation-name: flyIn_6;
            animation-name: flyIn_6;
}

ul#list li:nth-child(7) {
    -webkit-animation-name: flyIn_7;
            animation-name: flyIn_7;
}

ul#list li:nth-child(8) {
    -webkit-animation-name: flyIn_8;
            animation-name: flyIn_8;
}

ul#list li:nth-child(9) {
    -webkit-animation-name: flyIn_9;
            animation-name: flyIn_9;
}

ul#list li:nth-child(10) {
    -webkit-animation-name: flyIn_10;
            animation-name: flyIn_10;
}


@-webkit-keyframes flyIn_1 {
    from {
        -webkit-transform: translate(300%, -500%);
                transform: translate(300%, -500%);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-webkit-keyframes flyIn_2 {
    from {
        -webkit-transform: translate(200%, -500%);
                transform: translate(200%, -500%);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-webkit-keyframes flyIn_3 {
    from {
        -webkit-transform: translate(100%, -500%);
                transform: translate(100%, -500%);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-webkit-keyframes flyIn_4 {
    from {
        -webkit-transform: translate(0, -500%);
                transform: translate(0, -500%);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-webkit-keyframes flyIn_5 {
    from {
        -webkit-transform: translate(100%, -500%);
                transform: translate(100%, -500%);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-webkit-keyframes flyIn_6 {
    from {
        -webkit-transform: translate(-200%, -500%);
                transform: translate(-200%, -500%);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-webkit-keyframes flyIn_7 {
    from {
        -webkit-transform: translate(-300%, -500%);
                transform: translate(-300%, -500%);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}

@-webkit-keyframes flyIn_8 {
    from {
        -webkit-transform: translate(0, -800%);
                transform: translate(0, -800%);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-webkit-keyframes flyIn_9 {
    from {
        -webkit-transform: translate(300%, -800%);
                transform: translate(300%, -800%);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-webkit-keyframes flyIn_10 {
    from {
        -webkit-transform: translate(-300%, -800%);
                transform: translate(-300%, -800%);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@keyframes flyIn_1 {
    from {
        transform: translate(300%, -500%);
    } to {
        transform: translate(0, 0);
    }
}
@keyframes flyIn_2 {
    from {
        transform: translate(200%, -500%);
    } to {
        transform: translate(0, 0);
    }
}
@keyframes flyIn_3 {
    from {
        transform: translate(100%, -500%);
    } to {
        transform: translate(0, 0);
    }
}
@keyframes flyIn_4 {
    from {
        transform: translate(0, -500%);
    } to {
        transform: translate(0, 0);
    }
}
@keyframes flyIn_5 {
    from {
        transform: translate(100%, -500%);
    } to {
        transform: translate(0, 0);
    }
}
@keyframes flyIn_6 {
    from {
        transform: translate(-200%, -500%);
    } to {
        transform: translate(0, 0);
    }
}
@keyframes flyIn_7 {
    from {
        transform: translate(-300%, -500%);
    } to {
        transform: translate(0, 0);
    }
}

@keyframes flyIn_8 {
    from {
        transform: translate(0, -800%);
    } to {
        transform: translate(0, 0);
    }
}
@keyframes flyIn_9 {
    from {
        transform: translate(300%, -800%);
    } to {
        transform: translate(0, 0);
    }
}
@keyframes flyIn_10 {
    from {
        transform: translate(-300%, -800%);
    } to {
        transform: translate(0, 0);
    }
}



ul#info li {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
}

ul#info li:first-child {
    -webkit-animation-name: pushedIn_1;
            animation-name: pushedIn_1;
}

ul#info li:nth-child(2) {
    -webkit-animation-name: pushedIn_2;
            animation-name: pushedIn_2;
}

@-webkit-keyframes pushedIn_1 {
    from {
        -webkit-transform: translate(-1000%, 0);
                transform: translate(-1000%, 0);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-webkit-keyframes pushedIn_2 {
    from {
        -webkit-transform: translate(1000%, 0);
                transform: translate(1000%, 0);
    } to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@keyframes pushedIn_1 {
    from {
        transform: translate(-1000%, 0);
    } to {
        transform: translate(0, 0);
    }
}
@keyframes pushedIn_2 {
    from {
        transform: translate(1000%, 0);
    } to {
        transform: translate(0, 0);
    }
}


.opacAndSlideIn {
    position:relative;
    -webkit-animation-name: slideItIn;
            animation-name: slideItIn;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
}

@-webkit-keyframes slideItIn {
    from {
        left:-250%;
        opacity: 0;
    } to {
        left:0;
        opacity: 1;
    }
}
@keyframes slideItIn {
    from {
        left:-250%;
        opacity: 0;
    } to {
        left:0;
        opacity: 1;
    }
}


.opacAndDropIn {
    position:relative;
    -webkit-animation-name: dropItIn;
            animation-name: dropItIn;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
}

@-webkit-keyframes dropItIn {
    from {
        top:-250%;
        opacity: 0;
    } to {
        top:0;
        opacity: 1;
    }
}
@keyframes dropItIn {
    from {
        top:-250%;
        opacity: 0;
    } to {
        top:0;
        opacity: 1;
    }
}




.sizeIn {
    -webkit-animation-name: sizeItIn;
            animation-name: sizeItIn;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
}

@-webkit-keyframes sizeItIn {
    from {
        width:0;
    } to {
        width:100%;
    }
}
@keyframes sizeItIn {
    from {
        width:0;
    } to {
        width:100%;
    }
}

.fadeIn {
    -webkit-animation-name: fadeItIn;
            animation-name: fadeItIn;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
}

@-webkit-keyframes fadeItIn {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}
@keyframes fadeItIn {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}

.slowFadeIn {
    -webkit-animation-name: slowFadeItIn;
            animation-name: slowFadeItIn;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
}

@-webkit-keyframes slowFadeItIn {
    0% {
        -webkit-opacity: 0;
                opacity: 0;
    }
    20% {
        -webkit-opacity: 0;
                opacity: 0;
    }
    100% {
        -webkit-opacity: 1;
                opacity: 1;
    }
}

@keyframes slowFadeItIn {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



/* about */
@-webkit-keyframes spinner {
  0% {
      -webkit-transform: rotateY(90deg);
              transform: rotateY(90deg);
  }
  50% {
      -webkit-transform: rotateY(90deg);
              transform: rotateY(90deg);
  }
  100% {
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
  }
}
@keyframes spinner {
  0% {
      transform: rotateY(90deg);
  }
  50% {
      transform: rotateY(90deg);
  }
  100% {
      transform: rotateY(0);
  }
}

.stage {
  width:100%;
  margin: 1em auto;
  -webkit-perspective: 1200px;
          perspective: 1200px;
  text-align:center;
}
#spinner {
  -webkit-animation-name: spinner;
          animation-name: spinner;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  /*transform-origin-x:0;*/
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}