.NOIE>div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    width: 100%;

    /* -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -ms-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d; */
}

.NOIE .top {
    z-index: 9999
}

.NOIE .rotateCubeTopOut {

    -ms-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;

    -webkit-animation: rotateCubeTopOut .6s both ease-in;
    animation: rotateCubeTopOut .6s both ease-in;
}

.NOIE .rotateCubeTopIn {
    -ms-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;

    -webkit-animation: rotateCubeTopIn .6s both ease-in;
    animation: rotateCubeTopIn .6s both ease-in;
}

.NOIE .rotateCubeBottomOut {
    -ms-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;

    -webkit-animation: rotateCubeBottomOut .6s both ease-in;
    animation: rotateCubeBottomOut .6s both ease-in;
}

.NOIE .rotateCubeBottomIn {
    -ms-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;

    -webkit-animation: rotateCubeBottomIn .6s both ease-in;
    animation: rotateCubeBottomIn .6s both ease-in;
}


@keyframes rotateCubeTopOut {
    50% {

        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;

        -ms-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
        -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
        -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
        -o-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
        transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
        transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
    }
    100% {
        opacity: .3;

        -ms-transform: translateY(-100%) rotateX(90deg);
        -moz-transform: translateY(-100%) rotateX(90deg);
        -webkit-transform: translateY(-100%) rotateX(90deg);
        -o-transform: translateY(-100%) rotateX(90deg);
        transform: translateY(-100%) rotateX(90deg);
    }
}

@keyframes rotateCubeTopIn {
    0% {
        opacity: .3;

        -ms-transform: translateY(100%) rotateX(-90deg);
        -moz-transform: translateY(100%) rotateX(-90deg);
        -webkit-transform: translateY(100%) rotateX(-90deg);
        -o-transform: translateY(100%) rotateX(-90deg);
        transform: translateY(100%) rotateX(-90deg);
    }
    50% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;

        -ms-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
        -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
        -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
        -o-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
        transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
    }
}


@keyframes rotateCubeBottomOut {
    50% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;

        -ms-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
        -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
        -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
        -o-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
        transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
    }
    100% {
        opacity: .3;

        -ms-transform: translateY(100%) rotateX(-90deg);
        -moz-transform: translateY(100%) rotateX(-90deg);
        -webkit-transform: translateY(100%) rotateX(-90deg);
        -o-transform: translateY(100%) rotateX(-90deg);
        transform: translateY(100%) rotateX(-90deg);
    }
}

@keyframes rotateCubeBottomIn {
    0% {
        opacity: .3;

        -ms-transform: translateY(-100%) rotateX(90deg);
        -moz-transform: translateY(-100%) rotateX(90deg);
        -webkit-transform: translateY(-100%) rotateX(90deg);
        -o-transform: translateY(-100%) rotateX(90deg);
        transform: translateY(-100%) rotateX(90deg);
    }
    50% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;

        -ms-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
        -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
        -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
        -o-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
        transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
    }
}