﻿
.model {
    position:absolute;
    z-index:100000;
}

.model svg {
    position:absolute;
    -webkit-backface-visibility:hidden;
       -moz-backface-visibility:hidden;
         -o-backface-visibility:hidden;
        -ms-backface-visibility:hidden;
            backface-visibility:hidden;
}

#stage {
    position:absolute;
    width:100%;
    height:100%;
	left:50%;
	top:50%;
	opacity:1;
}

.prism{
    width:128px;
    height:128px;
    -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-backface-visibility: hidden;
}
.prism polygon{
    -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-backface-visibility: hidden;
}


.prism1 {
    -webkit-animation-name:scene;
    -webkit-animation-duration:15s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:linear;

    
    -moz-animation-name:scene;
    -moz-animation-duration:15s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-fill-mode:forwards;
    -moz-animation-timing-function:linear;
    
    animation-name:scene;
    animation-duration:15s;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-timing-function:linear;
}

.prism2 {
    -webkit-animation-name:scene2;
    -webkit-animation-duration:8s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:linear;
    -webkit-transform:perspective(1209px);

    
    -moz-animation-name:scene2;
    -moz-animation-duration:8s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-fill-mode:forwards;
    -moz-animation-timing-function:linear;
    -moz-transform:perspective(1209px);
    
    animation-name:scene2;
    animation-duration:8s;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-timing-function:linear;
    transform:perspective(1209px);
}



.prism3 {

    -webkit-animation-name:scene3;
    -webkit-animation-duration:8s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:linear;
    
    -moz-animation-name:scene3;
    -moz-animation-duration:8s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-fill-mode:forwards;
    -moz-animation-timing-function:linear;

    
    animation-name:scene3;
    animation-duration:8s;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-timing-function:linear;

}





.prism4 {
    -webkit-animation-name:scene4;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:linear;

    -moz-animation-name:scene4;
    -moz-animation-duration:10s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-fill-mode:forwards;
    -moz-animation-timing-function:linear;

    animation-name:scene4;
    animation-duration:10s;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-timing-function:linear;
}

.prism5 {

    -webkit-animation-name:scene5;
    -webkit-animation-duration:25s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:linear;
    
    -moz-animation-name:scene5;
    -moz-animation-duration:25s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-fill-mode:forwards;
    -moz-animation-timing-function:linear;

    animation-name:scene5;
    animation-duration:25s;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-timing-function:linear;


}


.prism6 {
    -webkit-animation-name:scene6;
    -webkit-animation-duration:15s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:linear;
    
    -moz-animation-name:scene6;
    -moz-animation-duration:15s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-fill-mode:forwards;
    -moz-animation-timing-function:linear;
    
    animation-name:scene6;
    animation-duration:15s;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-timing-function:linear;
}


.prism7 {
    -webkit-animation-name:scene7;
    -webkit-animation-duration:12s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:linear;
    
    -moz-animation-name:scene7;
    -moz-animation-duration:12s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-fill-mode:forwards;
    -moz-animation-timing-function:linear;
    
    animation-name:scene7;
    animation-duration:12s;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-timing-function:linear;
}





@-webkit-keyframes scene7 {
    0% {
        -webkit-transform :translate3d(-40em, -120em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        -webkit-transform :translate3d(0em, 70em, 0) rotateX(180deg) rotateY(180deg);
    }
}


@-moz-keyframes scene7 {
    0% {
        -moz-transform :translate3d(-40em, -120em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        -moz-transform :translate3d(0em, 70em, 0) rotateX(180deg) rotateY(180deg);
    }
}

@keyframes scene7 {
    0% {
        transform :translate3d(-40em, -120em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        transform :translate3d(0em, 70em, 0) rotateX(180deg) rotateY(180deg);
    }
}




@-webkit-keyframes scene6 {
    0% {
        -webkit-transform :translate3d(0em, 70em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        -webkit-transform :translate3d(40em, -70em, 0) rotateX(180deg) rotateY(180deg);
    }
}


@-moz-keyframes scene6 {
    0% {
        -moz-transform :translate3d(0em, 70em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        -moz-transform :translate3d(40em, -70em, 0) rotateX(180deg) rotateY(180deg);
    }
}
@keyframes scene6 {
    0% {
        transform :translate3d(0em, 70em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        transform :translate3d(40em, -70em, 0) rotateX(180deg) rotateY(180deg);
    }
}








@-webkit-keyframes scene5 {
    0% {
        -webkit-transform :translate3d(0em, -90em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        -webkit-transform :translate3d(-40em, 70em, 0) rotateX(180deg) rotateY(180deg);
    }
}

@-moz-keyframes scene5 {
    0% {
        -moz-transform :translate3d(0em, -90em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        -moz-transform :translate3d(-40em, 70em, 0) rotateX(180deg) rotateY(180deg);
    }
}



@keyframes scene5 {
    0% {
        transform :translate3d(0em, -90em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        transform :translate3d(-40em, 70em, 0) rotateX(180deg) rotateY(180deg);
    }
}








@-webkit-keyframes scene4 {
    0% {
        -webkit-transform :translate3d(-30em, -70em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        -webkit-transform :translate3d(50em, 50em, 0) rotateX(180deg) rotateY(180deg);
    }
}




@-moz-keyframes scene4 {
    0% {
        -moz-transform :translate3d(-30em, -70em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        -moz-transform :translate3d(50em, 50em, 0) rotateX(180deg) rotateY(180deg);
    }
}


@keyframes scene4 {
    0% {
        transform :translate3d(-30em, -70em, 0) rotateX(0deg) rotateY(-180deg);
    }
    100% {
        transform :translate3d(50em, 50em, 0) rotateX(180deg) rotateY(180deg);
    }
}









@-webkit-keyframes scene3 {
    0% {
        -webkit-transform :translate3d(60em, 0, 0) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        -webkit-transform :translate3d(-60em, 0, 0) rotateX(180deg) rotateY(180deg);
    }
}


@-moz-keyframes scene3 {
    0% {
        -moz-transform :translate3d(60em, 0, 0) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        -moz-transform :translate3d(-60em, 0, 0) rotateX(180deg) rotateY(180deg);
    }
}



@keyframes scene3 {
    0% {
        transform :translate3d(60em, 0, 0) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        transform :translate3d(-60em, 0, 0) rotateX(180deg) rotateY(180deg);
    }
}






@-webkit-keyframes scene2 {
    0% {
        -webkit-transform :perspective(1209px) translate3d(0em, 50em, 0) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        -webkit-transform :perspective(1209px) translate3d(0em, -60em, 0) rotateX(180deg) rotateY(180deg);
    }
}

@-moz-keyframes scene2 {
    0% {
        -moz-transform :perspective(1209px) translate3d(0em, 50em, 0) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        -moz-transform :perspective(1209px) translate3d(0em, -60em, 0) rotateX(180deg) rotateY(180deg);
    }
}


@keyframes scene2 {
    0% {
        transform :perspective(1209px) translate3d(0em, 50em, 0) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        transform :perspective(1209px) translate3d(0em, -60em, 0) rotateX(180deg) rotateY(180deg);
    }
}










@-webkit-keyframes scene {
    0% {
        -webkit-transform : translate3d(0em, 0em, 0) rotateX(-720deg) rotateY(-180deg);
    }
    100% {
        -webkit-transform : translate3d(0em, 0em, 0) rotateX(720deg) rotateY(180deg);
    }
}

@-moz-keyframes scene {
    0% {
        -moz-transform : translate3d(0em, 0em, 0) rotateX(-720deg) rotateY(-180deg);
    }
    100% {
        -moz-transform : translate3d(0em, 0em, 0) rotateX(720deg) rotateY(180deg);
    }
}

@keyframes scene {
    0% {
        transform : translate3d(0em, 0em, 0) rotateX(-720deg) rotateY(-180deg);
    }
    100% {
        transform : translate3d(0em, 0em, 0) rotateX(720deg) rotateY(180deg);
    }
}






.nt-logo{
    background:url("../images/nola-tech-logo.png") center no-repeat;
    background-size:100%;
    width:600px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-250px;
    display:block;
}





@media screen and (max-width: 600px) {

    .prism{
        zoom:.5;
    }
}