Team:SYSU-Software/overview.css

From 2014.igem.org

(Difference between revisions)
 
(6 intermediate revisions not shown)
Line 1: Line 1:
-
@charset "UTF-8";
+
@charset "UTF-8";*{margin:0;padding:0}#globalWrapper{height:100%}#content{height:100%}#bodyContent{width:100%;height:100%;overflow:hidden;position:relative}html{width:100%;height:100%;overflow:hidden}body{width:100%;height:100%;background:-webkit-gradient(linear,left top,left bottom,from(#1b0634),color-stop(#2d4292),to(#3494d8));background:-webkit-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-moz-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-ms-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:linear-gradient(top,#1b0634,#2d4292,#3494d8)}#menubar>ul>li:nth-child(7),#menubar>ul>li:nth-child(5),#menubar>ul>li:nth-child(6){color:transparent !important}#bodyContent{background:-webkit-gradient(linear,left top,left bottom,from(top),color-stop(#1b0634),color-stop(#2d4292),to(#3494d8));background:-webkit-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-moz-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-ms-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:linear-gradient(top,#1b0634,#2d4292,#3494d8)}#bodyContent.hm-part1,body.hm-part1{background:-webkit-gradient(linear,left top,left bottom,from(#1b0634),color-stop(#2d4292),to(#3494d8));background:-webkit-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-moz-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-ms-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:linear-gradient(top,#1b0634,#2d4292,#3494d8)}#bodyContent.hm-part2,body.hm-part2{background:-webkit-gradient(linear,left top,left bottom,from(top),color-stop(#1a0a30),to(#40b63c));background:-webkit-linear-gradient(top,#1a0a30,#40b63c);background:-moz-linear-gradient(top,#1a0a30,#40b63c);background:-ms-linear-gradient(top,#1a0a30,#40b63c);background:linear-gradient(top,#1a0a30,#40b63c)}#bodyContent.hm-part3,body.hm-part3{background:-webkit-gradient(linear,left top,left bottom,from(#150348),to(#d04c59));background:-webkit-linear-gradient(top,#150348,#d04c59);background:-moz-linear-gradient(top,#150348,#d04c59);background:-ms-linear-gradient(top,#150348,#d04c59);background:linear-gradient(top,#150348,#d04c59)}#bodyContent.hm-part4,body.hm-part4{background:-webkit-gradient(linear,left top,left bottom,from(top),color-stop(#2b1340),to(#42bdbd));background:-webkit-linear-gradient(top,#2b1340,#42bdbd);background:-moz-linear-gradient(top,#2b1340,#42bdbd);background:-ms-linear-gradient(top,#2b1340,#42bdbd);background:linear-gradient(top,#2b1340,#42bdbd)}.hm-part{visibility:hidden;-webkit-perspective:1px;-moz-perspective:1px;perspective:1px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;perspective-origin:50% 50%}.hm-part1 .hm-light,.hm-part1 .scrollPosition{visibility:visible}.hm-part1 #hm-part1,.hm-part3 #hm-part3{visibility:visible;-webkit-perspective:2000px;-moz-perspective:2000px;perspective:2000px;-webkit-transition:-webkit-perspective 2s ease-in;-moz-transition:-moz-perspective 2s ease-in;transition:perspective 2s ease-in}.hm-part2 #hm-part2{-webkit-perspective:10000px;-moz-perspective:10000px;perspective:10000px;visibility:visible;-webkit-perspective-origin:39% 50%;-moz-perspective-origin:39% 50%;perspective-origin:39% 50%;-webkit-transition:-webkit-perspective 2s ease-in;-moz-transition:-moz-perspective 2s ease-in;transition:perspective 2s ease-in}.hm-part4 #hm-part4{visibility:visible;-webkit-perspective-origin:56% 81%;-moz-perspective-origin:56% 81%;perspective-origin:56% 81%;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;-webkit-transition:-webkit-perspective 2s ease-in;-moz-transition:-moz-perspective 2s ease-in;transition:perspective 2s ease-in}.hm-light{width:912px;height:390px;position:fixed;bottom:0;left:50%;visibility:hidden;background-image:url(https://static.igem.org/mediawiki/2014/b/bd/SYSU-Software_BgLight.png);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.screenCenter{width:912px;height:500px;position:absolute;top:45%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.hm-part1-header{text-align:center;-webkit-transform:translateZ(10px);-moz-transform:translateZ(10px);transform:translateZ(10px)}#showpics{margin-top:-80px;position:relative;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.hm-part1 .rotate#showpics{-webkit-animation:rotate 20s linear 1.5s infinite;-moz-animation:rotate 20s linear 1.5s infinite;animation:rotate 20s linear 1.5s infinite}.showpic{position:absolute;top:0;left:0}#showparts{-webkit-transform:translateZ(10px);-moz-transform:translateZ(10px);transform:translateZ(10px)}#showdna{left:-150px;top:120px;-webkit-transform:translateZ(100px);-moz-transform:translateZ(100px);transform:translateZ(100px)}#showvector{left:150px;top:140px;-webkit-transform:translateZ(150px);-moz-transform:translateZ(150px);transform:translateZ(150px)}.scrollPosition{position:fixed;visibility:hidden;left:50%;bottom:15px;-webkit-transform:translate(0,0) translateX(-50%);-moz-transform:translate(0,0) translateX(-50%);-ms-transform:translate(0,0) translateX(-50%);transform:translate(0,0) translateX(-50%)}.scrolltip{width:40px;height:63px;background-image:url(https://static.igem.org/mediawiki/2014/0/0a/SYSU-Software_Roll.png);-webkit-animation:float 2s infinite alternate;-moz-animation:float 2s infinite alternate;animation:float 2s infinite alternate}.hm-line{width:2500px;height:3px;margin-top:250px;margin-left:-794px;background-color:#9ff70f}.hm-line-star img{margin-top:-66px;margin-left:-564px}.hm-part2 .hm-line-star img{-webkit-animation:line-star 1s .5s;-moz-animation:line-star 1s .5s;animation:line-star 1s .5s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards}.hm-doors-perspective{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);margin-top:-200px}.hm-doors{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;position:relative;-webkit-animation:doors 10s linear infinite;-moz-animation:doors 10s linear infinite;animation:doors 10s linear infinite}.hm-door{width:424px;height:424px}.hm-door.and{background-image:url(https://static.igem.org/mediawiki/2014/9/93/SYSU-Software_And.png);-webkit-transform:translateZ(212px);-moz-transform:translateZ(212px);-ms-transform:translateZ(212px);transform:translateZ(212px)}.hm-door.or{position:absolute;top:211px;background-image:url(https://static.igem.org/mediawiki/2014/8/8c/SYSU-Software_Or.png);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);-ms-transform:rotateX(-90deg);transform:rotateX(-90deg)}.hm-door.nand{position:absolute;top:-211px;background-image:url(https://static.igem.org/mediawiki/2014/a/a5/SYSU-Software_Nand.png);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);-ms-transform:rotateX(90deg);transform:rotateX(90deg)}.hm-door.nor{background-image:url(https://static.igem.org/mediawiki/2014/5/53/SYSU-Software_Nor.png);position:absolute;top:0;-webkit-transform:translateZ(-212px) rotateX(180deg);-moz-transform:translateZ(-212px) rotateX(180deg);-ms-transform:translateZ(-212px) rotateX(180deg);transform:translateZ(-212px) rotateX(180deg)}.hm-door.empty{background-image:url(https://static.igem.org/mediawiki/2014/6/68/SYSU-Software_Door-empty.png);position:absolute;top:0;left:211px;-webkit-transform:rotateY(-90deg);-moz-transform:rotateY(-90deg);-ms-transform:rotateY(-90deg);transform:rotateY(-90deg);-webkit-backface-visibility:visible;-moz-backface-visibility:visible;backface-visibility:visible}.hm-part2-circle{width:850px;height:850px;background-image:url(https://static.igem.org/mediawiki/2014/0/0e/SYSU-Software_Part2-circle.png);position:absolute;top:-180px;left:150px;-webkit-animation:circle 2.5s linear infinite;-moz-animation:circle 2.5s linear infinite;animation:circle 2.5s linear infinite}.hm-part2-header{position:absolute;top:164px;left:550px;-webkit-transform:translateZ(400px);-moz-transform:translateZ(400px);transform:translateZ(400px)}.hm-part3-axis{width:1px;height:1px;position:absolute;bottom:-60px;left:200px;-webkit-transition:width 2s,height 2s;-moz-transition:width 2s,height 2s;transition:width 2s,height 2s;overflow:hidden}.hm-part3 .hm-part3-axis{width:888px;height:585px}.hm-part3-axis img{position:absolute;bottom:0;left:0}.hm-part3-header{position:absolute;left:-152px;top:270px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px)}.hm-part3-line{position:absolute;top:10px;left:270px;opacity:0}.hm-part3 .hm-part3-line{opacity:1;-webkit-transition:opacity 2s 2s;-moz-transition:opacity 2s 2s;transition:opacity 2s 2s}.hm-part3-ball{position:absolute;left:249px;top:470px}.hm-part3 .hm-part3-ball{-webkit-animation:ball-y 2.5s 3s linear infinite;-moz-animation:ball-y 2.5s 3s linear infinite;animation:ball-y 2.5s 3s linear infinite}.hm-part3 .hm-part3-ball img{-webkit-animation:ball-x 2.5s 3s linear infinite;-moz-animation:ball-x 2.5s 3s linear infinite;animation:ball-x 2.5s 3s linear infinite}.hm-part3-fx{position:absolute;left:450px;top:150px}#hm-part3-fx-25{position:absolute;left:120px;top:-30px;left:122px;top:-24px;-webkit-transform-origin:-6% 66%;-moz-transform-origin:-6% 66%;-ms-transform-origin:-6% 66%;transform-origin:-6% 66%;-webkit-animation:uncircle 2s 1s linear infinite;-moz-animation:uncircle 2s 1s linear infinite;animation:uncircle 2s 1s linear infinite}#hm-part4>div{position:absolute}.hm-part4-require{top:-20px;left:0;-webkit-transform:translateZ(2px);-moz-transform:translateZ(2px);transform:translateZ(2px)}.hm-part4-doc{top:310px;left:-97px;-webkit-transform:translateZ(20px);-moz-transform:translateZ(20px);transform:translateZ(20px)}.hm-part4-proj{top:74px;left:133px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px)}.hm-part4-policy{top:370px;left:517px;-webkit-transform:translateZ(20px);-moz-transform:translateZ(20px);transform:translateZ(20px)}.hm-part4-team{top:330px;left:709px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px)}.hm-part4-header{-webkit-animation:h-switch 1.5s infinite ease-in-out alternate;-moz-animation:h-switch 1.5s infinite ease-in-out alternate;animation:h-switch 1.5s infinite ease-in-out alternate;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px);width:351px;height:110px;top:213px;left:515px}.hm-part4-header img{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;position:absolute;top:0;left:0}#hm-part4-header2{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);transform:rotateX(180deg)}.hm-part4-download{left:445px;top:10px;-webkit-transform:translateZ(70px);-moz-transform:translateZ(70px);transform:translateZ(70px)}@-webkit-keyframes h-switch{from{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}}@-moz-keyframes h-switch{from{-moz-transform:rotateX(0deg);transform:rotateX(0deg)}to{-moz-transform:rotateX(180deg);transform:rotateX(180deg)}}@keyframes h-switch{from{-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);transform:rotateX(180deg)}}@-webkit-keyframes ball-x{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(700px);transform:translateX(700px)}}@-moz-keyframes ball-x{from{-moz-transform:translateX(0);transform:translateX(0)}to{-moz-transform:translateX(700px);transform:translateX(700px)}}@keyframes ball-x{from{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(700px);-moz-transform:translateX(700px);transform:translateX(700px)}}@-webkit-keyframes ball-y{0%{-webkit-transform:translateY(0);transform:translateY(0)}5%{-webkit-transform:translateY(-110px);transform:translateY(-110px)}10%{-webkit-transform:translateY(-200px);transform:translateY(-200px)}20%{-webkit-transform:translateY(-300px);transform:translateY(-300px)}30%{-webkit-transform:translateY(-360px);transform:translateY(-360px)}40%{-webkit-transform:translateY(-400px);transform:translateY(-400px)}50%{-webkit-transform:translateY(-435px);transform:translateY(-435px)}70%{-webkit-transform:translateY(-470px);transform:translateY(-470px)}90%{-webkit-transform:translateY(-489px);transform:translateY(-489px)}100%{-webkit-transform:translateY(-480px);transform:translateY(-480px)}}@-moz-keyframes ball-y{0%{-moz-transform:translateY(0);transform:translateY(0)}5%{-moz-transform:translateY(-110px);transform:translateY(-110px)}10%{-moz-transform:translateY(-200px);transform:translateY(-200px)}20%{-moz-transform:translateY(-300px);transform:translateY(-300px)}30%{-moz-transform:translateY(-360px);transform:translateY(-360px)}40%{-moz-transform:translateY(-400px);transform:translateY(-400px)}50%{-moz-transform:translateY(-435px);transform:translateY(-435px)}70%{-moz-transform:translateY(-470px);transform:translateY(-470px)}90%{-moz-transform:translateY(-489px);transform:translateY(-489px)}100%{-moz-transform:translateY(-480px);transform:translateY(-480px)}}@keyframes ball-y{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);transform:translateY(0)}5%{-webkit-transform:translateY(-110px);-moz-transform:translateY(-110px);transform:translateY(-110px)}10%{-webkit-transform:translateY(-200px);-moz-transform:translateY(-200px);transform:translateY(-200px)}20%{-webkit-transform:translateY(-300px);-moz-transform:translateY(-300px);transform:translateY(-300px)}30%{-webkit-transform:translateY(-360px);-moz-transform:translateY(-360px);transform:translateY(-360px)}40%{-webkit-transform:translateY(-400px);-moz-transform:translateY(-400px);transform:translateY(-400px)}50%{-webkit-transform:translateY(-435px);-moz-transform:translateY(-435px);transform:translateY(-435px)}70%{-webkit-transform:translateY(-470px);-moz-transform:translateY(-470px);transform:translateY(-470px)}90%{-webkit-transform:translateY(-489px);-moz-transform:translateY(-489px);transform:translateY(-489px)}100%{-webkit-transform:translateY(-480px);-moz-transform:translateY(-480px);transform:translateY(-480px)}}@-webkit-keyframes circle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(360deg);transform:rotateY(0deg) rotateZ(360deg)}}@-moz-keyframes circle{from{-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-moz-transform:rotateY(0deg) rotateZ(360deg);transform:rotateY(0deg) rotateZ(360deg)}}@keyframes circle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(360deg);-moz-transform:rotateY(0deg) rotateZ(360deg);transform:rotateY(0deg) rotateZ(360deg)}}@-webkit-keyframes uncircle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(-360deg);transform:rotateY(0deg) rotateZ(-360deg)}}@-moz-keyframes uncircle{from{-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-moz-transform:rotateY(0deg) rotateZ(-360deg);transform:rotateY(0deg) rotateZ(-360deg)}}@keyframes uncircle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(-360deg);-moz-transform:rotateY(0deg) rotateZ(-360deg);transform:rotateY(0deg) rotateZ(-360deg)}}@-webkit-keyframes doors{from{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(360deg);transform:rotateX(360deg)}}@-moz-keyframes doors{from{-moz-transform:rotateX(0deg);transform:rotateX(0deg)}to{-moz-transform:rotateX(360deg);transform:rotateX(360deg)}}@keyframes doors{from{-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(360deg);-moz-transform:rotateX(360deg);transform:rotateX(360deg)}}@-webkit-keyframes line-star{from{-webkit-transform:translateX(0px);transform:translateX(0px)}to{-webkit-transform:translateX(884px);transform:translateX(884px)}}@-moz-keyframes line-star{from{-moz-transform:translateX(0px);transform:translateX(0px)}to{-moz-transform:translateX(884px);transform:translateX(884px)}}@keyframes line-star{from{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px)}to{-webkit-transform:translateX(884px);-moz-transform:translateX(884px);transform:translateX(884px)}}@-webkit-keyframes rotate{from{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}to{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}@-moz-keyframes rotate{from{-moz-transform:rotateY(0deg);transform:rotateY(0deg)}to{-moz-transform:rotateY(360deg);transform:rotateY(360deg)}}@keyframes rotate{from{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);transform:rotateY(0deg)}to{-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);transform:rotateY(360deg)}}@-webkit-keyframes float{0%{-webkit-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}50%{-webkit-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}100%{-webkit-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}}@-moz-keyframes float{0%{-moz-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}50%{-moz-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}100%{-moz-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}}@keyframes float{0%{-webkit-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}50%{-webkit-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}100%{-webkit-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}}@-webkit-keyframes eyeball{0%{left:9px}100%{left:1px}}@-moz-keyframes eyeball{0%{left:9px}100%{left:1px}}@keyframes eyeball{0%{left:9px}100%{left:1px}}.hm-sequence{position:fixed;right:3%;top:40%}.hm-sequence div{width:14px;height:14px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;background-color:white;opacity:.2;cursor:pointer}.hm-sequence div+div{margin-top:18px}.hm-part1 #hm-sequence1,.hm-part2 #hm-sequence2,.hm-part3 #hm-sequence3,.hm-part4 #hm-sequence4{opacity:.9}.hm-skip{color:white;font-size:26px;position:fixed;bottom:20px;right:50px;cursor:pointer}.igemlogo{position:fixed;top:20px;right:20px}.hm-part4 .hm-skip{display:none}.css3-icon{height:20px;width:20px;display:block;position:relative;display:inline-block}.right-triangle{height:10px;width:12px}.right-triangle:before{content:'';height:0;width:0;display:block;border:10px transparent solid;border-right-width:0;border-left-color:#fff;position:absolute;top:-8px;left:7px}.eye{display:inline-block;width:20px;height:20px;background-color:rgba(255,255,255,0.8);border-radius:50%;box-shadow:30px 0 0 0 rgba(255,255,255,0.8);position:relative;margin:0 10px}.eye:after{background-color:#333;width:10px;height:10px;box-shadow:30px 0 0 0 #333;border-radius:50%;left:9px;top:8px;position:absolute;content:"";-webkit-animation:eyeball 2s linear infinite alternate;-moz-animation:eyeball 2s linear infinite alternate;animation:eyeball 2s linear infinite alternate}.spinner{margin:200px auto 0;width:70px;text-align:center}.spinner>div{width:18px;height:18px;background-color:#FFF;opacity:.6;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out both;animation:bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.spinner .bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}40%{transform:scale(1.0);-webkit-transform:scale(1.0)}}.hm-bubble-tips{color:white;font-size:22px;position:fixed;left:40%;bottom:20px;display:none}.hm-part4 .hm-bubble-tips{display:block}
-
/**
+
-
*
+
-
* @authors 晚茗 (huangm.ss.sysu@gmail.com)
+
-
* @date    2014-10-06 21:14:23
+
-
* @version $1.0$
+
-
*/
+
-
*{
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
#globalWrapper{
+
-
height: 100%;
+
-
}
+
-
#content{
+
-
height: 100%;
+
-
}
+
-
#bodyContent{
+
-
width: 100%;
+
-
height: 100%;
+
-
overflow: hidden;
+
-
position: relative;
+
-
}
+
-
html{
+
-
width: 100%;
+
-
height: 100%;
+
-
overflow: hidden;
+
-
}
+
-
body{
+
-
width: 100%;
+
-
height: 100%;
+
-
background: -webkit-gradient(linear, left top, left bottom, from(#1B0634), color-stop(#2D4292), to(#3494D8));
+
-
background: -webkit-linear-gradient(top, #1B0634, #2D4292, #3494D8);
+
-
background: -moz-linear-gradient(top, #1B0634, #2D4292, #3494D8);
+
-
background: -ms-linear-gradient(top, #1B0634, #2D4292, #3494D8);
+
-
background: linear-gradient(top,#1B0634,#2D4292,#3494D8);
+
-
}
+
-
#menubar>ul>li:nth-child(7),#menubar>ul>li:nth-child(5),#menubar>ul>li:nth-child(6){
+
-
color: transparent !important;
+
-
}
+
-
#bodyContent{
+
-
background: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(#1B0634), color-stop(#2D4292), to(#3494D8));
+
-
background: -webkit-linear-gradient(top, #1B0634, #2D4292, #3494D8);
+
-
background: -moz-linear-gradient(top, #1B0634, #2D4292, #3494D8);
+
-
background: -ms-linear-gradient(top, #1B0634, #2D4292, #3494D8);
+
-
background: linear-gradient(top,#1B0634,#2D4292,#3494D8);
+
-
}
+
-
#bodyContent.hm-part1, body.hm-part1{
+
-
background: -webkit-gradient(linear, left top, left bottom, from(#1B0634), color-stop(#2D4292), to(#3494D8));
+
-
background: -webkit-linear-gradient(top, #1B0634, #2D4292, #3494D8);
+
-
background: -moz-linear-gradient(top, #1B0634, #2D4292, #3494D8);
+
-
background: -ms-linear-gradient(top, #1B0634, #2D4292, #3494D8);
+
-
background: linear-gradient(top,#1B0634,#2D4292,#3494D8);
+
-
 
+
-
}
+
-
#bodyContent.hm-part2, body.hm-part2{
+
-
background: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(#1a0a30), to(#40b63c));
+
-
background: -webkit-linear-gradient(top, #1a0a30, #40b63c);
+
-
background: -moz-linear-gradient(top, #1a0a30, #40b63c);
+
-
background: -ms-linear-gradient(top, #1a0a30, #40b63c);
+
-
background: linear-gradient(top,#1a0a30,#40b63c);
+
-
}
+
-
#bodyContent.hm-part3, body.hm-part3{
+
-
background: -webkit-gradient(linear, left top, left bottom, from(#150348), to(#d04c59));
+
-
background: -webkit-linear-gradient(top, #150348, #d04c59);
+
-
background: -moz-linear-gradient(top, #150348, #d04c59);
+
-
background: -ms-linear-gradient(top, #150348, #d04c59);
+
-
background: linear-gradient(top,#150348,#d04c59);
+
-
}
+
-
#bodyContent.hm-part4, body.hm-part4{
+
-
background: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(#2b1340), to(#42bdbd));
+
-
background: -webkit-linear-gradient(top, #2b1340, #42bdbd);
+
-
background: -moz-linear-gradient(top, #2b1340, #42bdbd);
+
-
background: -ms-linear-gradient(top, #2b1340, #42bdbd);
+
-
background: linear-gradient(top,#2b1340,#42bdbd);
+
-
}
+
-
.hm-part{
+
-
visibility: hidden;
+
-
-webkit-perspective: 1px;
+
-
  -moz-perspective: 1px;
+
-
        perspective: 1px;
+
-
-webkit-perspective-origin: 50% 50%;
+
-
  -moz-perspective-origin: 50% 50%;
+
-
        perspective-origin: 50% 50%;
+
-
}
+
-
.hm-part1 .hm-light, .hm-part1 .scrollPosition{
+
-
visibility: visible;
+
-
}
+
-
.hm-part1 #hm-part1
+
-
,.hm-part3 #hm-part3{
+
-
visibility: visible;
+
-
-webkit-perspective: 2000px;
+
-
  -moz-perspective: 2000px;
+
-
        perspective: 2000px;
+
-
-webkit-transition: -webkit-perspective 2s ease-in;
+
-
  -moz-transition: -moz-perspective 2s ease-in;
+
-
        transition: perspective 2s ease-in;
+
-
}
+
-
.hm-part2 #hm-part2{
+
-
-webkit-perspective: 10000px;
+
-
  -moz-perspective: 10000px;
+
-
        perspective: 10000px;
+
-
visibility: visible;
+
-
-webkit-perspective-origin: 39% 50%;
+
-
  -moz-perspective-origin: 39% 50%;
+
-
        perspective-origin: 39% 50%;
+
-
+
-
-webkit-transition: -webkit-perspective 2s ease-in;
+
-
  -moz-transition: -moz-perspective 2s ease-in;
+
-
        transition: perspective 2s ease-in;
+
-
}
+
-
.hm-part4 #hm-part4{
+
-
visibility: visible;
+
-
-webkit-perspective-origin: 56% 81%;
+
-
  -moz-perspective-origin: 56% 81%;
+
-
        perspective-origin: 56% 81%;
+
-
-webkit-perspective: 1000px;
+
-
  -moz-perspective: 1000px;
+
-
        perspective: 1000px;
+
-
-webkit-transition: -webkit-perspective 2s ease-in;
+
-
  -moz-transition: -moz-perspective 2s ease-in;
+
-
        transition: perspective 2s ease-in;
+
-
}
+
-
.hm-light{
+
-
width: 912px;
+
-
height: 390px;
+
-
position: fixed;
+
-
bottom: 0px;
+
-
left: 50%;
+
-
visibility: hidden;
+
-
background-image: url(https://static.igem.org/mediawiki/2014/7/74/Overview-BgLight.png);
+
-
  -webkit-transform: translateX(-50%);
+
-
    -moz-transform: translateX(-50%);
+
-
      -ms-transform: translateX(-50%);
+
-
          transform: translateX(-50%);
+
-
}
+
-
.screenCenter{
+
-
width: 912px;
+
-
height: 500px;
+
-
position: absolute;
+
-
top: 45%;
+
-
left: 50%; 
+
-
  -webkit-transform: translate(-50%,-50%); 
+
-
    -moz-transform: translate(-50%,-50%); 
+
-
      -ms-transform: translate(-50%,-50%); 
+
-
          transform: translate(-50%,-50%);
+
-
}
+
-
.hm-part1-header{
+
-
text-align: center;
+
-
-webkit-transform: translateZ(10px);
+
-
  -moz-transform: translateZ(10px);
+
-
        transform: translateZ(10px);
+
-
}
+
-
#showpics{
+
-
margin-top: -80px;
+
-
position: relative;
+
-
-webkit-transform-style: preserve-3d;
+
-
  -moz-transform-style: preserve-3d;
+
-
        transform-style: preserve-3d;
+
-
}
+
-
.hm-part1 .rotate#showpics{
+
-
-webkit-animation: rotate 20s linear 1.5s infinite;
+
-
  -moz-animation: rotate 20s linear 1.5s infinite;
+
-
        animation: rotate 20s linear 1.5s infinite;
+
-
}
+
-
.showpic{
+
-
position: absolute;
+
-
top: 0;
+
-
left: 0;
+
-
}
+
-
#showparts{
+
-
-webkit-transform: translateZ(10px);
+
-
  -moz-transform: translateZ(10px);
+
-
        transform: translateZ(10px);
+
-
}
+
-
#showdna{
+
-
left: -150px;
+
-
top: 120px;
+
-
-webkit-transform: translateZ(100px);
+
-
  -moz-transform: translateZ(100px);
+
-
        transform: translateZ(100px);
+
-
}
+
-
#showvector{
+
-
left: 150px;
+
-
top: 140px;
+
-
-webkit-transform: translateZ(150px);
+
-
  -moz-transform: translateZ(150px);
+
-
        transform: translateZ(150px);
+
-
 
+
-
}
+
-
.scrollPosition{
+
-
position: fixed;
+
-
visibility: hidden;
+
-
left: 50%;
+
-
bottom: 15px;
+
-
-webkit-transform: translate(0,0) translateX(-50%);
+
-
  -moz-transform: translate(0,0) translateX(-50%);
+
-
    -ms-transform: translate(0,0) translateX(-50%);
+
-
        transform: translate(0,0) translateX(-50%);
+
-
}
+
-
.scrolltip{
+
-
width: 40px;
+
-
height: 63px;
+
-
background-image: url(https://static.igem.org/mediawiki/2014/2/2f/Overview-roll.png);
+
-
-webkit-animation: float 2s infinite alternate;
+
-
  -moz-animation: float 2s infinite alternate;
+
-
        animation: float 2s infinite alternate;
+
-
}
+
-
.hm-line{
+
-
width: 2500px;
+
-
height: 3px;
+
-
margin-top: 250px;
+
-
margin-left: -794px;
+
-
background-color: #9ff70f;
+
-
}
+
-
.hm-line-star img{
+
-
margin-top: -66px;
+
-
margin-left: -564px;
+
-
}
+
-
.hm-part2 .hm-line-star img{
+
-
-webkit-animation: line-star 1s .5s;
+
-
  -moz-animation: line-star 1s .5s;
+
-
        animation: line-star 1s .5s;
+
-
-webkit-animation-fill-mode: forwards;
+
-
  -moz-animation-fill-mode: forwards;
+
-
        animation-fill-mode: forwards;
+
-
}
+
-
.hm-doors-perspective{
+
-
-webkit-transform-style: preserve-3d;
+
-
  -moz-transform-style: preserve-3d;
+
-
        transform-style: preserve-3d;
+
-
-webkit-transform: scale(.7);
+
-
  -moz-transform: scale(.7);
+
-
    -ms-transform: scale(.7);
+
-
        transform: scale(.7);
+
-
margin-top: -200px;
+
-
}
+
-
.hm-doors{
+
-
-webkit-transform-style: preserve-3d;
+
-
  -moz-transform-style: preserve-3d;
+
-
        transform-style: preserve-3d;
+
-
position: relative;
+
-
-webkit-animation: doors 10s linear infinite;
+
-
  -moz-animation: doors 10s linear infinite;
+
-
        animation: doors 10s linear infinite;
+
-
}
+
-
.hm-door{
+
-
width: 424px;
+
-
height: 424px;
+
-
}
+
-
.hm-door.and{
+
-
background-image: url(https://static.igem.org/mediawiki/2014/3/32/And.png);
+
-
-webkit-transform: translateZ(212px);
+
-
  -moz-transform: translateZ(212px);
+
-
    -ms-transform: translateZ(212px);
+
-
        transform: translateZ(212px);
+
-
+
-
}
+
-
.hm-door.or{
+
-
position: absolute;
+
-
top: 211px;
+
-
background-image: url(https://static.igem.org/mediawiki/2014/c/c3/Or.png);
+
-
-webkit-transform: rotateX(-90deg);
+
-
  -moz-transform: rotateX(-90deg);
+
-
    -ms-transform: rotateX(-90deg);
+
-
        transform: rotateX(-90deg);
+
-
}
+
-
.hm-door.nand{
+
-
position: absolute;
+
-
top: -211px;
+
-
background-image: url(https://static.igem.org/mediawiki/2014/8/83/Nand.png);
+
-
-webkit-transform: rotateX(90deg);
+
-
  -moz-transform: rotateX(90deg);
+
-
    -ms-transform: rotateX(90deg);
+
-
        transform: rotateX(90deg);
+
-
 
+
-
}
+
-
.hm-door.nor{
+
-
background-image: url(https://static.igem.org/mediawiki/2014/0/08/Nor.png);
+
-
position: absolute;
+
-
top: 0px;
+
-
-webkit-transform: translateZ(-212px) rotateX(180deg);
+
-
  -moz-transform: translateZ(-212px) rotateX(180deg);
+
-
  -ms-transform: translateZ(-212px) rotateX(180deg);
+
-
        transform: translateZ(-212px) rotateX(180deg);
+
-
}
+
-
.hm-door.empty{
+
-
background-image: url(https://static.igem.org/mediawiki/2014/d/d6/Door-empty.png);
+
-
position: absolute;
+
-
top: 0px;
+
-
left: 211px;
+
-
-webkit-transform: rotateY(-90deg);
+
-
  -moz-transform: rotateY(-90deg);
+
-
    -ms-transform: rotateY(-90deg);
+
-
        transform: rotateY(-90deg);
+
-
-webkit-backface-visibility: visible;
+
-
  -moz-backface-visibility: visible;
+
-
        backface-visibility: visible;
+
-
}
+
-
.hm-part2-circle{
+
-
width: 850px;
+
-
height: 850px;
+
-
background-image: url(https://static.igem.org/mediawiki/2014/2/28/Part2-circle.png);
+
-
position: absolute;
+
-
top: -180px;
+
-
left: 150px;
+
-
-webkit-animation: circle 2.5s linear infinite;
+
-
  -moz-animation: circle 2.5s linear infinite;
+
-
        animation: circle 2.5s linear infinite;
+
-
}
+
-
.hm-part2-header{
+
-
position: absolute;
+
-
top: 164px;
+
-
left: 550px;
+
-
-webkit-transform: translateZ(400px);
+
-
  -moz-transform: translateZ(400px);
+
-
        transform: translateZ(400px);
+
-
}
+
-
.hm-part3-axis{
+
-
width: 1px;
+
-
height: 1px;
+
-
position: absolute;
+
-
bottom: -60px;
+
-
left: 200px;
+
-
-webkit-transition: width 2s, height 2s;
+
-
  -moz-transition: width 2s, height 2s;
+
-
        transition: width 2s, height 2s;
+
-
overflow: hidden;
+
-
}
+
-
.hm-part3 .hm-part3-axis{
+
-
width: 888px;
+
-
height: 585px;
+
-
}
+
-
.hm-part3-axis img{
+
-
position: absolute;
+
-
bottom: 0px;
+
-
left: 0px;
+
-
}
+
-
.hm-part3-header{
+
-
position: absolute;
+
-
left: -152px;
+
-
top: 270px;
+
-
-webkit-transform: translateZ(50px);
+
-
  -moz-transform: translateZ(50px);
+
-
        transform: translateZ(50px);
+
-
}
+
-
.hm-part3-line{
+
-
position: absolute;
+
-
top: 10px;
+
-
left: 270px;
+
-
opacity: 0;
+
-
+
-
}
+
-
.hm-part3 .hm-part3-line{
+
-
opacity: 1;
+
-
-webkit-transition: opacity 2s 2s;
+
-
  -moz-transition: opacity 2s 2s;
+
-
        transition: opacity 2s 2s;
+
-
}
+
-
.hm-part3-ball{
+
-
position: absolute;
+
-
left: 249px;
+
-
top: 470px;
+
-
}
+
-
.hm-part3 .hm-part3-ball{
+
-
-webkit-animation: ball-y 2.5s 3s linear infinite;
+
-
  -moz-animation: ball-y 2.5s 3s linear infinite;
+
-
        animation: ball-y 2.5s 3s linear infinite;
+
-
}
+
-
.hm-part3 .hm-part3-ball img{
+
-
-webkit-animation: ball-x 2.5s 3s linear infinite;
+
-
  -moz-animation: ball-x 2.5s 3s linear infinite;
+
-
        animation: ball-x 2.5s 3s linear infinite;
+
-
}
+
-
.hm-part3-fx{
+
-
position: absolute;
+
-
left: 450px;
+
-
top: 150px;
+
-
}
+
-
#hm-part3-fx-25{
+
-
position: absolute;
+
-
left: 120px;
+
-
top: -30px;
+
-
left: 122px;
+
-
top: -24px;
+
-
-webkit-transform-origin:-6% 66%;
+
-
  -moz-transform-origin:-6% 66%;
+
-
    -ms-transform-origin:-6% 66%;
+
-
        transform-origin:-6% 66%;
+
-
-webkit-animation: uncircle 2s 1s linear infinite;
+
-
  -moz-animation: uncircle 2s 1s linear infinite;
+
-
        animation: uncircle 2s 1s linear infinite;
+
-
}
+
-
#hm-part4 > div{
+
-
position: absolute;
+
-
}
+
-
.hm-part4-require{
+
-
top: -20px;
+
-
left: 0px;
+
-
-webkit-transform: translateZ(2px);
+
-
  -moz-transform: translateZ(2px);
+
-
        transform: translateZ(2px);
+
-
}
+
-
.hm-part4-doc{
+
-
top: 310px;
+
-
left: -97px;
+
-
-webkit-transform: translateZ(20px);
+
-
  -moz-transform: translateZ(20px);
+
-
        transform: translateZ(20px);
+
-
}
+
-
.hm-part4-proj{
+
-
top: 74px;
+
-
left: 133px;
+
-
-webkit-transform: translateZ(50px);
+
-
  -moz-transform: translateZ(50px);
+
-
        transform: translateZ(50px);
+
-
}
+
-
.hm-part4-policy{
+
-
top: 370px;
+
-
left: 517px;
+
-
-webkit-transform: translateZ(20px);
+
-
  -moz-transform: translateZ(20px);
+
-
        transform: translateZ(20px);
+
-
}
+
-
.hm-part4-team{
+
-
top: 330px;
+
-
left: 709px;
+
-
-webkit-transform: translateZ(50px);
+
-
  -moz-transform: translateZ(50px);
+
-
        transform: translateZ(50px);
+
-
}
+
-
.hm-part4-headers{
+
-
    background: #00aeef;
+
-
    top: 213px;
+
-
    left: 515px;
+
-
    width: 351px;
+
-
    height: 110px;
+
-
-webkit-transform: translateZ(50px);
+
-
  -moz-transform: translateZ(50px);
+
-
        transform: translateZ(50px);
+
-
}
+
-
.hm-part4-header{
+
-
-webkit-animation: h-switch 1.2s infinite ease-in-out alternate;
+
-
  -moz-animation: h-switch 1.2s infinite ease-in-out alternate;
+
-
        animation: h-switch 1.2s infinite ease-in-out alternate;
+
-
-webkit-transform-style: preserve-3d;
+
-
  -moz-transform-style: preserve-3d;
+
-
        transform-style: preserve-3d;
+
-
width: 351px;
+
-
}
+
-
.hm-part4-header img{
+
-
-webkit-backface-visibility: hidden;
+
-
  -moz-backface-visibility: hidden;
+
-
        backface-visibility: hidden;
+
-
}
+
-
#hm-part4-header2{
+
-
-webkit-transform: rotateX(180deg);
+
-
  -moz-transform: rotateX(180deg);
+
-
        transform: rotateX(180deg);
+
-
position: absolute;
+
-
top: 0px;
+
-
}
+
-
.hm-part4-download{
+
-
left: 445px;
+
-
top:10px;
+
-
-webkit-transform: translateZ(70px);
+
-
  -moz-transform: translateZ(70px);
+
-
        transform: translateZ(70px);
+
-
}
+
-
@-webkit-keyframes h-switch{
+
-
from{
+
-
-webkit-transform: rotateX(0deg);
+
-
        transform: rotateX(0deg);
+
-
}
+
-
to {
+
-
-webkit-transform: rotateX(180deg);
+
-
        transform: rotateX(180deg);
+
-
}
+
-
}@-moz-keyframes h-switch{
+
-
from{
+
-
-moz-transform: rotateX(0deg);
+
-
    transform: rotateX(0deg);
+
-
}
+
-
to {
+
-
-moz-transform: rotateX(180deg);
+
-
    transform: rotateX(180deg);
+
-
}
+
-
}@keyframes h-switch{
+
-
from{
+
-
-webkit-transform: rotateX(0deg);
+
-
  -moz-transform: rotateX(0deg);
+
-
        transform: rotateX(0deg);
+
-
}
+
-
to {
+
-
-webkit-transform: rotateX(180deg);
+
-
  -moz-transform: rotateX(180deg);
+
-
        transform: rotateX(180deg);
+
-
}
+
-
}
+
-
@-webkit-keyframes ball-x{
+
-
from{
+
-
-webkit-transform: translateX(0);
+
-
        transform: translateX(0);
+
-
}
+
-
to{
+
-
-webkit-transform: translateX(700px);
+
-
        transform: translateX(700px);
+
-
}
+
-
}@-moz-keyframes ball-x{
+
-
from{
+
-
-moz-transform: translateX(0);
+
-
    transform: translateX(0);
+
-
}
+
-
to{
+
-
-moz-transform: translateX(700px);
+
-
    transform: translateX(700px);
+
-
}
+
-
}@keyframes ball-x{
+
-
from{
+
-
-webkit-transform: translateX(0);
+
-
  -moz-transform: translateX(0);
+
-
        transform: translateX(0);
+
-
}
+
-
to{
+
-
-webkit-transform: translateX(700px);
+
-
  -moz-transform: translateX(700px);
+
-
        transform: translateX(700px);
+
-
}
+
-
}
+
-
@-webkit-keyframes ball-y{
+
-
0%{
+
-
-webkit-transform: translateY(0);
+
-
        transform: translateY(0);
+
-
}
+
-
5%{
+
-
-webkit-transform: translateY(-110px);
+
-
        transform: translateY(-110px);
+
-
}
+
-
10%{
+
-
-webkit-transform: translateY(-200px);
+
-
        transform: translateY(-200px);
+
-
}
+
-
20%{
+
-
-webkit-transform: translateY(-300px);
+
-
        transform: translateY(-300px);
+
-
}
+
-
30%{
+
-
-webkit-transform: translateY(-360px);
+
-
        transform: translateY(-360px);
+
-
}
+
-
40%{
+
-
-webkit-transform: translateY(-400px);
+
-
        transform: translateY(-400px);
+
-
}
+
-
50%{
+
-
-webkit-transform: translateY(-435px);
+
-
        transform: translateY(-435px);
+
-
}
+
-
70%{
+
-
-webkit-transform: translateY(-470px);
+
-
        transform: translateY(-470px);
+
-
}
+
-
90%{
+
-
-webkit-transform: translateY(-489px);
+
-
        transform: translateY(-489px);
+
-
}
+
-
100%{
+
-
-webkit-transform: translateY(-480px);
+
-
        transform: translateY(-480px);
+
-
}
+
-
}
+
-
@-moz-keyframes ball-y{
+
-
0%{
+
-
-moz-transform: translateY(0);
+
-
    transform: translateY(0);
+
-
}
+
-
5%{
+
-
-moz-transform: translateY(-110px);
+
-
    transform: translateY(-110px);
+
-
}
+
-
10%{
+
-
-moz-transform: translateY(-200px);
+
-
    transform: translateY(-200px);
+
-
}
+
-
20%{
+
-
-moz-transform: translateY(-300px);
+
-
    transform: translateY(-300px);
+
-
}
+
-
30%{
+
-
-moz-transform: translateY(-360px);
+
-
    transform: translateY(-360px);
+
-
}
+
-
40%{
+
-
-moz-transform: translateY(-400px);
+
-
    transform: translateY(-400px);
+
-
}
+
-
50%{
+
-
-moz-transform: translateY(-435px);
+
-
    transform: translateY(-435px);
+
-
}
+
-
70%{
+
-
-moz-transform: translateY(-470px);
+
-
    transform: translateY(-470px);
+
-
}
+
-
90%{
+
-
-moz-transform: translateY(-489px);
+
-
    transform: translateY(-489px);
+
-
}
+
-
100%{
+
-
-moz-transform: translateY(-480px);
+
-
    transform: translateY(-480px);
+
-
}
+
-
}
+
-
@keyframes ball-y{
+
-
0%{
+
-
-webkit-transform: translateY(0);
+
-
  -moz-transform: translateY(0);
+
-
        transform: translateY(0);
+
-
}
+
-
5%{
+
-
-webkit-transform: translateY(-110px);
+
-
  -moz-transform: translateY(-110px);
+
-
        transform: translateY(-110px);
+
-
}
+
-
10%{
+
-
-webkit-transform: translateY(-200px);
+
-
  -moz-transform: translateY(-200px);
+
-
        transform: translateY(-200px);
+
-
}
+
-
20%{
+
-
-webkit-transform: translateY(-300px);
+
-
  -moz-transform: translateY(-300px);
+
-
        transform: translateY(-300px);
+
-
}
+
-
30%{
+
-
-webkit-transform: translateY(-360px);
+
-
  -moz-transform: translateY(-360px);
+
-
        transform: translateY(-360px);
+
-
}
+
-
40%{
+
-
-webkit-transform: translateY(-400px);
+
-
  -moz-transform: translateY(-400px);
+
-
        transform: translateY(-400px);
+
-
}
+
-
50%{
+
-
-webkit-transform: translateY(-435px);
+
-
  -moz-transform: translateY(-435px);
+
-
        transform: translateY(-435px);
+
-
}
+
-
70%{
+
-
-webkit-transform: translateY(-470px);
+
-
  -moz-transform: translateY(-470px);
+
-
        transform: translateY(-470px);
+
-
}
+
-
90%{
+
-
-webkit-transform: translateY(-489px);
+
-
  -moz-transform: translateY(-489px);
+
-
        transform: translateY(-489px);
+
-
}
+
-
100%{
+
-
-webkit-transform: translateY(-480px);
+
-
  -moz-transform: translateY(-480px);
+
-
        transform: translateY(-480px);
+
-
}
+
-
}
+
-
@-webkit-keyframes circle{
+
-
from{
+
-
-webkit-transform: rotateY(0deg) rotateZ(0deg);
+
-
        transform: rotateY(0deg) rotateZ(0deg);
+
-
}
+
-
to {
+
-
-webkit-transform: rotateY(0deg) rotateZ(360deg);
+
-
        transform: rotateY(0deg) rotateZ(360deg);
+
-
}
+
-
}
+
-
@-moz-keyframes circle{
+
-
from{
+
-
-moz-transform: rotateY(0deg) rotateZ(0deg);
+
-
    transform: rotateY(0deg) rotateZ(0deg);
+
-
}
+
-
to {
+
-
-moz-transform: rotateY(0deg) rotateZ(360deg);
+
-
    transform: rotateY(0deg) rotateZ(360deg);
+
-
}
+
-
}
+
-
@keyframes circle{
+
-
from{
+
-
-webkit-transform: rotateY(0deg) rotateZ(0deg);
+
-
  -moz-transform: rotateY(0deg) rotateZ(0deg);
+
-
        transform: rotateY(0deg) rotateZ(0deg);
+
-
}
+
-
to {
+
-
-webkit-transform: rotateY(0deg) rotateZ(360deg);
+
-
  -moz-transform: rotateY(0deg) rotateZ(360deg);
+
-
        transform: rotateY(0deg) rotateZ(360deg);
+
-
}
+
-
}
+
-
@-webkit-keyframes uncircle{
+
-
from{
+
-
-webkit-transform: rotateY(0deg) rotateZ(0deg);
+
-
        transform: rotateY(0deg) rotateZ(0deg);
+
-
}
+
-
to {
+
-
-webkit-transform: rotateY(0deg) rotateZ(-360deg);
+
-
        transform: rotateY(0deg) rotateZ(-360deg);
+
-
}
+
-
}
+
-
@-moz-keyframes uncircle{
+
-
from{
+
-
-moz-transform: rotateY(0deg) rotateZ(0deg);
+
-
    transform: rotateY(0deg) rotateZ(0deg);
+
-
}
+
-
to {
+
-
-moz-transform: rotateY(0deg) rotateZ(-360deg);
+
-
    transform: rotateY(0deg) rotateZ(-360deg);
+
-
}
+
-
}
+
-
@keyframes uncircle{
+
-
from{
+
-
-webkit-transform: rotateY(0deg) rotateZ(0deg);
+
-
  -moz-transform: rotateY(0deg) rotateZ(0deg);
+
-
        transform: rotateY(0deg) rotateZ(0deg);
+
-
}
+
-
to {
+
-
-webkit-transform: rotateY(0deg) rotateZ(-360deg);
+
-
  -moz-transform: rotateY(0deg) rotateZ(-360deg);
+
-
        transform: rotateY(0deg) rotateZ(-360deg);
+
-
}
+
-
}
+
-
 
+
-
@-webkit-keyframes doors{
+
-
from{
+
-
-webkit-transform: rotateX(0deg);
+
-
        transform: rotateX(0deg);
+
-
}
+
-
to {
+
-
-webkit-transform: rotateX(360deg);
+
-
        transform: rotateX(360deg);
+
-
}
+
-
}
+
-
 
+
-
@-moz-keyframes doors{
+
-
from{
+
-
-moz-transform: rotateX(0deg);
+
-
    transform: rotateX(0deg);
+
-
}
+
-
to {
+
-
-moz-transform: rotateX(360deg);
+
-
    transform: rotateX(360deg);
+
-
}
+
-
}
+
-
 
+
-
@keyframes doors{
+
-
from{
+
-
-webkit-transform: rotateX(0deg);
+
-
  -moz-transform: rotateX(0deg);
+
-
        transform: rotateX(0deg);
+
-
}
+
-
to {
+
-
-webkit-transform: rotateX(360deg);
+
-
  -moz-transform: rotateX(360deg);
+
-
        transform: rotateX(360deg);
+
-
}
+
-
}
+
-
@-webkit-keyframes line-star{
+
-
from{
+
-
-webkit-transform: translateX(0px);
+
-
        transform: translateX(0px);
+
-
}
+
-
to{
+
-
-webkit-transform: translateX(884px);
+
-
        transform: translateX(884px);
+
-
}
+
-
}
+
-
@-moz-keyframes line-star{
+
-
from{
+
-
-moz-transform: translateX(0px);
+
-
    transform: translateX(0px);
+
-
}
+
-
to{
+
-
-moz-transform: translateX(884px);
+
-
    transform: translateX(884px);
+
-
}
+
-
}
+
-
@keyframes line-star{
+
-
from{
+
-
-webkit-transform: translateX(0px);
+
-
  -moz-transform: translateX(0px);
+
-
        transform: translateX(0px);
+
-
}
+
-
to{
+
-
-webkit-transform: translateX(884px);
+
-
  -moz-transform: translateX(884px);
+
-
        transform: translateX(884px);
+
-
}
+
-
}
+
-
@-webkit-keyframes rotate{
+
-
from{
+
-
-webkit-transform: rotateY(0deg);
+
-
        transform: rotateY(0deg);
+
-
}
+
-
to{
+
-
-webkit-transform: rotateY(360deg);
+
-
        transform: rotateY(360deg);
+
-
}
+
-
}
+
-
@-moz-keyframes rotate{
+
-
from{
+
-
-moz-transform: rotateY(0deg);
+
-
    transform: rotateY(0deg);
+
-
}
+
-
to{
+
-
-moz-transform: rotateY(360deg);
+
-
    transform: rotateY(360deg);
+
-
}
+
-
}
+
-
@keyframes rotate{
+
-
from{
+
-
-webkit-transform: rotateY(0deg);
+
-
  -moz-transform: rotateY(0deg);
+
-
        transform: rotateY(0deg);
+
-
}
+
-
to{
+
-
-webkit-transform: rotateY(360deg);
+
-
  -moz-transform: rotateY(360deg);
+
-
        transform: rotateY(360deg);
+
-
}
+
-
}
+
-
@-webkit-keyframes float{
+
-
0% {
+
-
    -webkit-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
            transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
  }
+
-
  50% {
+
-
    -webkit-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
            transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
  }
+
-
  100% {
+
-
    -webkit-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
            transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
  }
+
-
}
+
-
@-moz-keyframes float{
+
-
0% {
+
-
    -moz-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
        transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
  }
+
-
  50% {
+
-
    -moz-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
        transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
  }
+
-
  100% {
+
-
    -moz-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
        transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
  }
+
-
}
+
-
@keyframes float{
+
-
0% {
+
-
    -webkit-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
      -moz-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
            transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
  }
+
-
  50% {
+
-
    -webkit-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
      -moz-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
            transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
  }
+
-
  100% {
+
-
    -webkit-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
      -moz-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
            transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+
-
  }
+
-
}
+
-
 
+
-
.hm-sequence{
+
-
position: fixed;
+
-
right: 3%;
+
-
top: 40%;
+
-
}
+
-
.hm-sequence div{
+
-
width: 14px;
+
-
height: 14px;
+
-
-webkit-border-radius: 7px;
+
-
  -moz-border-radius: 7px;
+
-
        border-radius: 7px;
+
-
background-color: white;
+
-
opacity: .2;
+
-
cursor: pointer;
+
-
}
+
-
.hm-sequence div + div{
+
-
margin-top: 18px;
+
-
}
+
-
.hm-part1 #hm-sequence1
+
-
, .hm-part2 #hm-sequence2
+
-
, .hm-part3 #hm-sequence3
+
-
, .hm-part4 #hm-sequence4{
+
-
opacity: .9;
+
-
}
+
-
.hm-skip{
+
-
color: white;
+
-
font-size: 26px;
+
-
position: fixed;
+
-
bottom: 20px;
+
-
right: 50px;
+
-
cursor: pointer;
+
-
}
+
-
.igemlogo {
+
-
position: fixed;
+
-
top: 20px;
+
-
right: 20px;
+
-
}
+
-
.hm-part4 .hm-skip{
+
-
display: none;
+
-
}
+

Latest revision as of 03:14, 18 October 2014

@charset "UTF-8";*{margin:0;padding:0}#globalWrapper{height:100%}#content{height:100%}#bodyContent{width:100%;height:100%;overflow:hidden;position:relative}html{width:100%;height:100%;overflow:hidden}body{width:100%;height:100%;background:-webkit-gradient(linear,left top,left bottom,from(#1b0634),color-stop(#2d4292),to(#3494d8));background:-webkit-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-moz-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-ms-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:linear-gradient(top,#1b0634,#2d4292,#3494d8)}#menubar>ul>li:nth-child(7),#menubar>ul>li:nth-child(5),#menubar>ul>li:nth-child(6){color:transparent !important}#bodyContent{background:-webkit-gradient(linear,left top,left bottom,from(top),color-stop(#1b0634),color-stop(#2d4292),to(#3494d8));background:-webkit-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-moz-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-ms-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:linear-gradient(top,#1b0634,#2d4292,#3494d8)}#bodyContent.hm-part1,body.hm-part1{background:-webkit-gradient(linear,left top,left bottom,from(#1b0634),color-stop(#2d4292),to(#3494d8));background:-webkit-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-moz-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:-ms-linear-gradient(top,#1b0634,#2d4292,#3494d8);background:linear-gradient(top,#1b0634,#2d4292,#3494d8)}#bodyContent.hm-part2,body.hm-part2{background:-webkit-gradient(linear,left top,left bottom,from(top),color-stop(#1a0a30),to(#40b63c));background:-webkit-linear-gradient(top,#1a0a30,#40b63c);background:-moz-linear-gradient(top,#1a0a30,#40b63c);background:-ms-linear-gradient(top,#1a0a30,#40b63c);background:linear-gradient(top,#1a0a30,#40b63c)}#bodyContent.hm-part3,body.hm-part3{background:-webkit-gradient(linear,left top,left bottom,from(#150348),to(#d04c59));background:-webkit-linear-gradient(top,#150348,#d04c59);background:-moz-linear-gradient(top,#150348,#d04c59);background:-ms-linear-gradient(top,#150348,#d04c59);background:linear-gradient(top,#150348,#d04c59)}#bodyContent.hm-part4,body.hm-part4{background:-webkit-gradient(linear,left top,left bottom,from(top),color-stop(#2b1340),to(#42bdbd));background:-webkit-linear-gradient(top,#2b1340,#42bdbd);background:-moz-linear-gradient(top,#2b1340,#42bdbd);background:-ms-linear-gradient(top,#2b1340,#42bdbd);background:linear-gradient(top,#2b1340,#42bdbd)}.hm-part{visibility:hidden;-webkit-perspective:1px;-moz-perspective:1px;perspective:1px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;perspective-origin:50% 50%}.hm-part1 .hm-light,.hm-part1 .scrollPosition{visibility:visible}.hm-part1 #hm-part1,.hm-part3 #hm-part3{visibility:visible;-webkit-perspective:2000px;-moz-perspective:2000px;perspective:2000px;-webkit-transition:-webkit-perspective 2s ease-in;-moz-transition:-moz-perspective 2s ease-in;transition:perspective 2s ease-in}.hm-part2 #hm-part2{-webkit-perspective:10000px;-moz-perspective:10000px;perspective:10000px;visibility:visible;-webkit-perspective-origin:39% 50%;-moz-perspective-origin:39% 50%;perspective-origin:39% 50%;-webkit-transition:-webkit-perspective 2s ease-in;-moz-transition:-moz-perspective 2s ease-in;transition:perspective 2s ease-in}.hm-part4 #hm-part4{visibility:visible;-webkit-perspective-origin:56% 81%;-moz-perspective-origin:56% 81%;perspective-origin:56% 81%;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;-webkit-transition:-webkit-perspective 2s ease-in;-moz-transition:-moz-perspective 2s ease-in;transition:perspective 2s ease-in}.hm-light{width:912px;height:390px;position:fixed;bottom:0;left:50%;visibility:hidden;background-image:url(https://static.igem.org/mediawiki/2014/b/bd/SYSU-Software_BgLight.png);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.screenCenter{width:912px;height:500px;position:absolute;top:45%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.hm-part1-header{text-align:center;-webkit-transform:translateZ(10px);-moz-transform:translateZ(10px);transform:translateZ(10px)}#showpics{margin-top:-80px;position:relative;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.hm-part1 .rotate#showpics{-webkit-animation:rotate 20s linear 1.5s infinite;-moz-animation:rotate 20s linear 1.5s infinite;animation:rotate 20s linear 1.5s infinite}.showpic{position:absolute;top:0;left:0}#showparts{-webkit-transform:translateZ(10px);-moz-transform:translateZ(10px);transform:translateZ(10px)}#showdna{left:-150px;top:120px;-webkit-transform:translateZ(100px);-moz-transform:translateZ(100px);transform:translateZ(100px)}#showvector{left:150px;top:140px;-webkit-transform:translateZ(150px);-moz-transform:translateZ(150px);transform:translateZ(150px)}.scrollPosition{position:fixed;visibility:hidden;left:50%;bottom:15px;-webkit-transform:translate(0,0) translateX(-50%);-moz-transform:translate(0,0) translateX(-50%);-ms-transform:translate(0,0) translateX(-50%);transform:translate(0,0) translateX(-50%)}.scrolltip{width:40px;height:63px;background-image:url(https://static.igem.org/mediawiki/2014/0/0a/SYSU-Software_Roll.png);-webkit-animation:float 2s infinite alternate;-moz-animation:float 2s infinite alternate;animation:float 2s infinite alternate}.hm-line{width:2500px;height:3px;margin-top:250px;margin-left:-794px;background-color:#9ff70f}.hm-line-star img{margin-top:-66px;margin-left:-564px}.hm-part2 .hm-line-star img{-webkit-animation:line-star 1s .5s;-moz-animation:line-star 1s .5s;animation:line-star 1s .5s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards}.hm-doors-perspective{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);margin-top:-200px}.hm-doors{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;position:relative;-webkit-animation:doors 10s linear infinite;-moz-animation:doors 10s linear infinite;animation:doors 10s linear infinite}.hm-door{width:424px;height:424px}.hm-door.and{background-image:url(https://static.igem.org/mediawiki/2014/9/93/SYSU-Software_And.png);-webkit-transform:translateZ(212px);-moz-transform:translateZ(212px);-ms-transform:translateZ(212px);transform:translateZ(212px)}.hm-door.or{position:absolute;top:211px;background-image:url(https://static.igem.org/mediawiki/2014/8/8c/SYSU-Software_Or.png);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);-ms-transform:rotateX(-90deg);transform:rotateX(-90deg)}.hm-door.nand{position:absolute;top:-211px;background-image:url(https://static.igem.org/mediawiki/2014/a/a5/SYSU-Software_Nand.png);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);-ms-transform:rotateX(90deg);transform:rotateX(90deg)}.hm-door.nor{background-image:url(https://static.igem.org/mediawiki/2014/5/53/SYSU-Software_Nor.png);position:absolute;top:0;-webkit-transform:translateZ(-212px) rotateX(180deg);-moz-transform:translateZ(-212px) rotateX(180deg);-ms-transform:translateZ(-212px) rotateX(180deg);transform:translateZ(-212px) rotateX(180deg)}.hm-door.empty{background-image:url(https://static.igem.org/mediawiki/2014/6/68/SYSU-Software_Door-empty.png);position:absolute;top:0;left:211px;-webkit-transform:rotateY(-90deg);-moz-transform:rotateY(-90deg);-ms-transform:rotateY(-90deg);transform:rotateY(-90deg);-webkit-backface-visibility:visible;-moz-backface-visibility:visible;backface-visibility:visible}.hm-part2-circle{width:850px;height:850px;background-image:url(https://static.igem.org/mediawiki/2014/0/0e/SYSU-Software_Part2-circle.png);position:absolute;top:-180px;left:150px;-webkit-animation:circle 2.5s linear infinite;-moz-animation:circle 2.5s linear infinite;animation:circle 2.5s linear infinite}.hm-part2-header{position:absolute;top:164px;left:550px;-webkit-transform:translateZ(400px);-moz-transform:translateZ(400px);transform:translateZ(400px)}.hm-part3-axis{width:1px;height:1px;position:absolute;bottom:-60px;left:200px;-webkit-transition:width 2s,height 2s;-moz-transition:width 2s,height 2s;transition:width 2s,height 2s;overflow:hidden}.hm-part3 .hm-part3-axis{width:888px;height:585px}.hm-part3-axis img{position:absolute;bottom:0;left:0}.hm-part3-header{position:absolute;left:-152px;top:270px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px)}.hm-part3-line{position:absolute;top:10px;left:270px;opacity:0}.hm-part3 .hm-part3-line{opacity:1;-webkit-transition:opacity 2s 2s;-moz-transition:opacity 2s 2s;transition:opacity 2s 2s}.hm-part3-ball{position:absolute;left:249px;top:470px}.hm-part3 .hm-part3-ball{-webkit-animation:ball-y 2.5s 3s linear infinite;-moz-animation:ball-y 2.5s 3s linear infinite;animation:ball-y 2.5s 3s linear infinite}.hm-part3 .hm-part3-ball img{-webkit-animation:ball-x 2.5s 3s linear infinite;-moz-animation:ball-x 2.5s 3s linear infinite;animation:ball-x 2.5s 3s linear infinite}.hm-part3-fx{position:absolute;left:450px;top:150px}#hm-part3-fx-25{position:absolute;left:120px;top:-30px;left:122px;top:-24px;-webkit-transform-origin:-6% 66%;-moz-transform-origin:-6% 66%;-ms-transform-origin:-6% 66%;transform-origin:-6% 66%;-webkit-animation:uncircle 2s 1s linear infinite;-moz-animation:uncircle 2s 1s linear infinite;animation:uncircle 2s 1s linear infinite}#hm-part4>div{position:absolute}.hm-part4-require{top:-20px;left:0;-webkit-transform:translateZ(2px);-moz-transform:translateZ(2px);transform:translateZ(2px)}.hm-part4-doc{top:310px;left:-97px;-webkit-transform:translateZ(20px);-moz-transform:translateZ(20px);transform:translateZ(20px)}.hm-part4-proj{top:74px;left:133px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px)}.hm-part4-policy{top:370px;left:517px;-webkit-transform:translateZ(20px);-moz-transform:translateZ(20px);transform:translateZ(20px)}.hm-part4-team{top:330px;left:709px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px)}.hm-part4-header{-webkit-animation:h-switch 1.5s infinite ease-in-out alternate;-moz-animation:h-switch 1.5s infinite ease-in-out alternate;animation:h-switch 1.5s infinite ease-in-out alternate;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px);width:351px;height:110px;top:213px;left:515px}.hm-part4-header img{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;position:absolute;top:0;left:0}#hm-part4-header2{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);transform:rotateX(180deg)}.hm-part4-download{left:445px;top:10px;-webkit-transform:translateZ(70px);-moz-transform:translateZ(70px);transform:translateZ(70px)}@-webkit-keyframes h-switch{from{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}}@-moz-keyframes h-switch{from{-moz-transform:rotateX(0deg);transform:rotateX(0deg)}to{-moz-transform:rotateX(180deg);transform:rotateX(180deg)}}@keyframes h-switch{from{-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);transform:rotateX(180deg)}}@-webkit-keyframes ball-x{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(700px);transform:translateX(700px)}}@-moz-keyframes ball-x{from{-moz-transform:translateX(0);transform:translateX(0)}to{-moz-transform:translateX(700px);transform:translateX(700px)}}@keyframes ball-x{from{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(700px);-moz-transform:translateX(700px);transform:translateX(700px)}}@-webkit-keyframes ball-y{0%{-webkit-transform:translateY(0);transform:translateY(0)}5%{-webkit-transform:translateY(-110px);transform:translateY(-110px)}10%{-webkit-transform:translateY(-200px);transform:translateY(-200px)}20%{-webkit-transform:translateY(-300px);transform:translateY(-300px)}30%{-webkit-transform:translateY(-360px);transform:translateY(-360px)}40%{-webkit-transform:translateY(-400px);transform:translateY(-400px)}50%{-webkit-transform:translateY(-435px);transform:translateY(-435px)}70%{-webkit-transform:translateY(-470px);transform:translateY(-470px)}90%{-webkit-transform:translateY(-489px);transform:translateY(-489px)}100%{-webkit-transform:translateY(-480px);transform:translateY(-480px)}}@-moz-keyframes ball-y{0%{-moz-transform:translateY(0);transform:translateY(0)}5%{-moz-transform:translateY(-110px);transform:translateY(-110px)}10%{-moz-transform:translateY(-200px);transform:translateY(-200px)}20%{-moz-transform:translateY(-300px);transform:translateY(-300px)}30%{-moz-transform:translateY(-360px);transform:translateY(-360px)}40%{-moz-transform:translateY(-400px);transform:translateY(-400px)}50%{-moz-transform:translateY(-435px);transform:translateY(-435px)}70%{-moz-transform:translateY(-470px);transform:translateY(-470px)}90%{-moz-transform:translateY(-489px);transform:translateY(-489px)}100%{-moz-transform:translateY(-480px);transform:translateY(-480px)}}@keyframes ball-y{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);transform:translateY(0)}5%{-webkit-transform:translateY(-110px);-moz-transform:translateY(-110px);transform:translateY(-110px)}10%{-webkit-transform:translateY(-200px);-moz-transform:translateY(-200px);transform:translateY(-200px)}20%{-webkit-transform:translateY(-300px);-moz-transform:translateY(-300px);transform:translateY(-300px)}30%{-webkit-transform:translateY(-360px);-moz-transform:translateY(-360px);transform:translateY(-360px)}40%{-webkit-transform:translateY(-400px);-moz-transform:translateY(-400px);transform:translateY(-400px)}50%{-webkit-transform:translateY(-435px);-moz-transform:translateY(-435px);transform:translateY(-435px)}70%{-webkit-transform:translateY(-470px);-moz-transform:translateY(-470px);transform:translateY(-470px)}90%{-webkit-transform:translateY(-489px);-moz-transform:translateY(-489px);transform:translateY(-489px)}100%{-webkit-transform:translateY(-480px);-moz-transform:translateY(-480px);transform:translateY(-480px)}}@-webkit-keyframes circle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(360deg);transform:rotateY(0deg) rotateZ(360deg)}}@-moz-keyframes circle{from{-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-moz-transform:rotateY(0deg) rotateZ(360deg);transform:rotateY(0deg) rotateZ(360deg)}}@keyframes circle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(360deg);-moz-transform:rotateY(0deg) rotateZ(360deg);transform:rotateY(0deg) rotateZ(360deg)}}@-webkit-keyframes uncircle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(-360deg);transform:rotateY(0deg) rotateZ(-360deg)}}@-moz-keyframes uncircle{from{-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-moz-transform:rotateY(0deg) rotateZ(-360deg);transform:rotateY(0deg) rotateZ(-360deg)}}@keyframes uncircle{from{-webkit-transform:rotateY(0deg) rotateZ(0deg);-moz-transform:rotateY(0deg) rotateZ(0deg);transform:rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateY(0deg) rotateZ(-360deg);-moz-transform:rotateY(0deg) rotateZ(-360deg);transform:rotateY(0deg) rotateZ(-360deg)}}@-webkit-keyframes doors{from{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(360deg);transform:rotateX(360deg)}}@-moz-keyframes doors{from{-moz-transform:rotateX(0deg);transform:rotateX(0deg)}to{-moz-transform:rotateX(360deg);transform:rotateX(360deg)}}@keyframes doors{from{-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(360deg);-moz-transform:rotateX(360deg);transform:rotateX(360deg)}}@-webkit-keyframes line-star{from{-webkit-transform:translateX(0px);transform:translateX(0px)}to{-webkit-transform:translateX(884px);transform:translateX(884px)}}@-moz-keyframes line-star{from{-moz-transform:translateX(0px);transform:translateX(0px)}to{-moz-transform:translateX(884px);transform:translateX(884px)}}@keyframes line-star{from{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px)}to{-webkit-transform:translateX(884px);-moz-transform:translateX(884px);transform:translateX(884px)}}@-webkit-keyframes rotate{from{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}to{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}@-moz-keyframes rotate{from{-moz-transform:rotateY(0deg);transform:rotateY(0deg)}to{-moz-transform:rotateY(360deg);transform:rotateY(360deg)}}@keyframes rotate{from{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);transform:rotateY(0deg)}to{-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);transform:rotateY(360deg)}}@-webkit-keyframes float{0%{-webkit-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}50%{-webkit-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}100%{-webkit-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}}@-moz-keyframes float{0%{-moz-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}50%{-moz-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}100%{-moz-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}}@keyframes float{0%{-webkit-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}50%{-webkit-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}100%{-webkit-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1)}}@-webkit-keyframes eyeball{0%{left:9px}100%{left:1px}}@-moz-keyframes eyeball{0%{left:9px}100%{left:1px}}@keyframes eyeball{0%{left:9px}100%{left:1px}}.hm-sequence{position:fixed;right:3%;top:40%}.hm-sequence div{width:14px;height:14px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;background-color:white;opacity:.2;cursor:pointer}.hm-sequence div+div{margin-top:18px}.hm-part1 #hm-sequence1,.hm-part2 #hm-sequence2,.hm-part3 #hm-sequence3,.hm-part4 #hm-sequence4{opacity:.9}.hm-skip{color:white;font-size:26px;position:fixed;bottom:20px;right:50px;cursor:pointer}.igemlogo{position:fixed;top:20px;right:20px}.hm-part4 .hm-skip{display:none}.css3-icon{height:20px;width:20px;display:block;position:relative;display:inline-block}.right-triangle{height:10px;width:12px}.right-triangle:before{content:;height:0;width:0;display:block;border:10px transparent solid;border-right-width:0;border-left-color:#fff;position:absolute;top:-8px;left:7px}.eye{display:inline-block;width:20px;height:20px;background-color:rgba(255,255,255,0.8);border-radius:50%;box-shadow:30px 0 0 0 rgba(255,255,255,0.8);position:relative;margin:0 10px}.eye:after{background-color:#333;width:10px;height:10px;box-shadow:30px 0 0 0 #333;border-radius:50%;left:9px;top:8px;position:absolute;content:"";-webkit-animation:eyeball 2s linear infinite alternate;-moz-animation:eyeball 2s linear infinite alternate;animation:eyeball 2s linear infinite alternate}.spinner{margin:200px auto 0;width:70px;text-align:center}.spinner>div{width:18px;height:18px;background-color:#FFF;opacity:.6;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out both;animation:bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.spinner .bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}40%{transform:scale(1.0);-webkit-transform:scale(1.0)}}.hm-bubble-tips{color:white;font-size:22px;position:fixed;left:40%;bottom:20px;display:none}.hm-part4 .hm-bubble-tips{display:block}