Team:SYSU-Software/overview.css

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
@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/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: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/d/d6/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/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: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{top:213px;left:515px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);transform:translateZ(50px)}.hm-part4-download{left:445px;top:10px;-webkit-transform:translateZ(70px);-moz-transform:translateZ(70px);transform:translateZ(70px)}@-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}
+
@charset "UTF-8";
 +
/**
 +
*
 +
* @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: doors 2s infinite;
 +
  -moz-animation: doors 2s infinite;
 +
        animation: doors 2s infinite;
 +
-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 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;
 +
}

Revision as of 16:00, 17 October 2014

@charset "UTF-8"; /** 

* 
* @authors 晚茗 (huangm.ss.sysu@gmail.com)
* @date    2014-10-06 21:14:23
* @version $1.0$
*/
  • {

margin: 0; padding: 0; }

  1. globalWrapper{

height: 100%; }

  1. content{

height: 100%; }

  1. 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); }

  1. menubar>ul>li:nth-child(7),#menubar>ul>li:nth-child(5),#menubar>ul>li:nth-child(6){

color: transparent !important; }

  1. 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); }

  1. 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);

}

  1. 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); }

  1. 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); }

  1. 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(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); }

  1. 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; }

  1. showparts{

-webkit-transform: translateZ(10px); -moz-transform: translateZ(10px); transform: translateZ(10px); }

  1. showdna{

left: -150px; top: 120px; -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); transform: translateZ(100px); }

  1. 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(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(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(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(Nand.png); -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); transform: rotateX(90deg);

} .hm-door.nor{ background-image: url(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(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(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; }

  1. 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; }

  1. 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: doors 2s infinite; -moz-animation: doors 2s infinite; animation: doors 2s infinite; -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; }

  1. 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 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; }

Retrieved from "http://2014.igem.org/Team:SYSU-Software/overview.css"