@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Orbitron);

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
li {list-style-type:none;}
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { width:100%; font-family:Orbitron; font-size:12px; height: 28000px;
    letter-spacing: 2px;}

#bg {position: fixed; width: 100%; height: 100%; overflow: hidden;
    background:url(../img/bg.jpg) no-repeat center center; background-size:cover;}
h1 {position: fixed; top: 30px; left: 40px; color: #fff; font-size: 13px;}
h1 img {width: 180px;}

.nav {position: fixed; z-index: 4;right: 40px; top: 70px;}
.nav li {position: relative; height: 150px; width: 50px; text-align: center;
        cursor: pointer; z-index: 1; transition:all 0.3s; float: left;
        transform:scale(1.0);}
.nav li a {display: inline-block; padding-top:10px; font-size: 12px; color:#fff;}
.nav li:nth-child(1) {background: #AD0407;}
.nav li:nth-child(2) {background: #10112F;}
.nav li:nth-child(3) {background: #FF4E00;}
.nav li:nth-child(4) {background: #0C2649;}
.nav li:nth-child(5) {background: #DD472A;}
.nav li:nth-child(6) {background: #BD0737;}
.nav li:nth-child(7) {background: #6D000E;}
.nav li:nth-child(8) {background: #F37321;}
.nav li:nth-child(9) {background: #0065B3;}
.nav li:nth-child(10) {background: #231F20;}
.nav li:hover {width: 130px; z-index: 10;}
.nav li.on {width: 130px;}

section {position: fixed; left: 100px; top: 240px; perspective:2300px;
        z-index: 3; height: 500px; width: 700px;}
section article {position: absolute; z-index: 1; opacity: 0.1; height: 100%;
                 width: 100%; top: 0; left: 0; transition:all 0.5s; font-size: 20px;}
section article>img {height:500px;}
section article:nth-child(1) {transform:translateZ(0px);}
section article:nth-child(2) {transform:translateZ(-3000px);}
section article:nth-child(3) {transform:translateZ(-6000px);}
section article:nth-child(4) {transform:translateZ(-9000px);}
section article:nth-child(4) img {position: absolute; left: -50px;}
section article:nth-child(5) img {width: 550px; height: auto;}
section article:nth-child(5) {transform:translateZ(-12000px);}
section article:nth-child(6) {transform:translateZ(-15000px);}
section article:nth-child(7) {transform:translateZ(-18000px);}
section article:nth-child(8) {transform:translateZ(-21000px);}
section article:nth-child(8) img {width: 650px; height: auto;}
section article:nth-child(9) {transform:translateZ(-24000px);}
section article:nth-child(10) {transform:translateZ(-27000px);}

section article div {position: fixed; left:750px; bottom: 70px; width: 700px;
                    font-size: 30px;}
section article div>span {width: 100%;display: block;}
section article div>p {width: 0px; height: 3px; background: #000; margin-top: 5px;
                      transition:all 2s;}
section article.on {z-index: 2; opacity:1;}
section article.on>div>p {width: 220px;}

.copyright {position: fixed; color:#ccc; font:13px arial; right:30px; bottom: 30px;}