Team:BIT-China/css/homepage2013.min.css

From 2013.igem.org

(Difference between revisions)
(Created page with "body{background-image: none; background-color: #fff;}.page_content{background: url(../img/homepage/DNA.jpg); background-size: cover; background-attachment: fixed;}.sprite{backgro...")
 
(22 intermediate revisions not shown)
Line 1: Line 1:
-
body{background-image: none; background-color: #fff;}.page_content{background: url(../img/homepage/DNA.jpg); background-size: cover; background-attachment: fixed;}.sprite{background: url(../img/misc_sprites.png) no-repeat;}.sprite.arrow-right{background-position: -140px -337px; width: 15px; height: 24px;}.sprite.arrow-left{background-position: -155px -337px; width: 15px; height: 24px;}#wrapper{background: #f3f6ff;}.color-bar{background: url(../img/color_strips.png) repeat-x; height: 8px;}.color-bar.orange{background-position: 0 0;}.color-bar.cyan{background-position: 0 -8px;}.color-bar.lavendar{background-position: 0 -16px;}.color-bar.gray{background-position: 0 -24px;}.project-logo{background: url(../img/project.png);margin-left: -109px;top: 72px;}.igem-logo.youtube{background-position: 0 0; width: 56px; height: 24px;}.igem-logo.fitbit{background-position: -56px 0; width: 71px; height: 19px;}.igem-logo.twitch{background-position: 0 -24px; width: 62px; height: 23px;}.igem-logo.branchout{background-position: 0 -47px; width: 75px; height: 25px;}.igem-logo.notebook{background-position: 0 -197px; width: 218px; height: 131px;}.igem-logo.safety{background-position: 0 -197px; width: 218px; height: 131px;}.igem-logo.parts{background-position: 0 -197px; width: 218px; height: 131px;}.igem-logo.project{background-position: 0 -197px; width: 218px; height: 131px;}.igem-logo.team{background-position: 0 -197px; width: 218px; height: 131px;}.igem-logo.model{background-position: 0 -197px; width: 218px; height: 131px;}.action-button{cursor: pointer; display: inline-block; text-transform: uppercase; text-decoration: none; font-family: proxima-nova,sans-serif; font-weight: 700; font-size: 16px; padding: 20px 64px; border: 0; border-radius: 3px;}.action-button.purple{color: #fff; text-shadow: 0 -1px #8e74c5; background-color: #a287d4; background-image: -moz-linear-gradient(top,#a68dd6,#9b7fd1); background-image: -ms-linear-gradient(top,#a68dd6,#9b7fd1); background-image: -webkit-gradient(linear,0 0,0 100%,from(#a68dd6),to(#9b7fd1)); background-image: -webkit-linear-gradient(top,#a68dd6,#9b7fd1); background-image: -o-linear-gradient(top,#a68dd6 0,#9b7fd1 0); background-image: linear-gradient(top,#a68dd6 0,#9b7fd1 0); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a68dd6',endColorstr='#9b7fd1',GradientType=0); -webkit-box-shadow: inset 0 -1px #9479c9,0 1px 2px #e1e4e8; -moz-box-shadow: inset 0 -1px #9479c9,0 1px 2px #e1e4e8; box-shadow: inset 0 -1px #9479c9,0 1px 2px #e1e4e8; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;}.action-button.purple:hover{background-color: #a98fda; background-image: -moz-linear-gradient(top,#af97de,#a084d4); background-image: -ms-linear-gradient(top,#af97de,#a084d4); background-image: -webkit-gradient(linear,0 0,0 100%,from(#af97de),to(#a084d4)); background-image: -webkit-linear-gradient(top,#af97de,#a084d4); background-image: -o-linear-gradient(top,#af97de 0,#a084d4 0); background-image: linear-gradient(top,#af97de 0,#a084d4 0); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#af97de',endColorstr='#a084d4',GradientType=0);}.action-button.purple:active{background-color: #a185d4; background-image: -moz-linear-gradient(top,#a084d4,#a286d5); background-image: -ms-linear-gradient(top,#a084d4,#a286d5); background-image: -webkit-gradient(linear,0 0,0 100%,from(#a084d4),to(#a286d5)); background-image: -webkit-linear-gradient(top,#a084d4,#a286d5); background-image: -o-linear-gradient(top,#a084d4 0,#a286d5 0); background-image: linear-gradient(top,#a084d4 0,#a286d5 0); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a084d4',endColorstr='#a286d5',GradientType=0);}.action-button.cyan{color: #fff; text-shadow: 0 -1px #18abab; background-color: #1cbcdf; background-image: -moz-linear-gradient(top,#1ebfe1,#1ab7dd); background-image: -ms-linear-gradient(top,#1ebfe1,#1ab7dd); background-image: -webkit-gradient(linear,0 0,0 100%,from(#1ebfe1),to(#1ab7dd)); background-image: -webkit-linear-gradient(top,#1ebfe1,#1ab7dd); background-image: -o-linear-gradient(top,#1ebfe1 0,#1ab7dd 0); background-image: linear-gradient(top,#1ebfe1 0,#1ab7dd 0); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ebfe1',endColorstr='#1ab7dd',GradientType=0); -webkit-box-shadow: inset 0 -1px #18a7d1,0 1px 2px #c4d7dd; -moz-box-shadow: inset 0 -1px #18a7d1,0 1px 2px #c4d7dd; box-shadow: inset 0 -1px #18a7d1,0 1px 2px #c4d7dd; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}.action-button.cyan:hover{background-color: #1ec4e9; background-image: -moz-linear-gradient(top,#21c9ec,#1abde5); background-image: -ms-linear-gradient(top,#21c9ec,#1abde5); background-image: -webkit-gradient(linear,0 0,0 100%,from(#21c9ec),to(#1abde5)); background-image: -webkit-linear-gradient(top,#21c9ec,#1abde5); background-image: -o-linear-gradient(top,#21c9ec 0,#1abde5 0); background-image: linear-gradient(top,#21c9ec 0,#1abde5 0); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#21c9ec',endColorstr='#1abde5',GradientType=0);}.action-button.cyan:active{background-color: #1cbfe5; background-image: -moz-linear-gradient(top,#1abde5,#1fc2e5); background-image: -ms-linear-gradient(top,#1abde5,#1fc2e5); background-image: -webkit-gradient(linear,0 0,0 100%,from(#1abde5),to(#1fc2e5)); background-image: -webkit-linear-gradient(top,#1abde5,#1fc2e5); background-image: -o-linear-gradient(top,#1abde5 0,#1fc2e5 0); background-image: linear-gradient(top,#1abde5 0,#1fc2e5 0); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1abde5',endColorstr='#1fc2e5',GradientType=0);}.action-button.white{color: #b1bad0; border: 2px solid #e7eaf1; padding: 18px 50px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;}.action-button.white:hover{color: #7e8aa7; border-color: #e0e3ec;}/*#header{position: fixed; left: 50%; margin-left: -533px;}*/.home.ready{background-attachment: fixed;}.home a{color: inherit; text-decoration: none;}.home .content{width: 1066px; margin: 0 auto;}.home .parallax{background-attachment: fixed; position: relative; width: 100%;}.home.ready .top-section .arrows{opacity: 1;}.home.ready .hero.current{opacity: 1; z-index: 2; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out;}.home.ready .hero.current .text{opacity: 1; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}.home.ready .hero.current.segmentation .subtle-animation .halo,.home.ready .hero.current.segmentation .subtle-animation .left,.home.ready .hero.current.segmentation .subtle-animation .right{-webkit-transform: translate3d(0,0,0) scale3d(1,1,1); -moz-transform: translate3d(0,0,0) scale3d(1,1,1); -ms-transform: translate3d(0,0,0) scale3d(1,1,1); -o-transform: translate3d(0,0,0) scale3d(1,1,1); transform: translate3d(0,0,0) scale3d(1,1,1);}.home.ready .hero.current.retention .table{-webkit-transform: translate3d(0,-10px,0); -moz-transform: translate3d(0,-10px,0); -ms-transform: translate3d(0,-10px,0); -o-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0);}.home.ready .hero.current.retention .magnify{-webkit-transform: scale3d(1,1,1) translate3d(0,-20px,0); -moz-transform: scale3d(1,1,1) translate3d(0,-20px,0); -ms-transform: scale3d(1,1,1) translate3d(0,-20px,0); -o-transform: scale3d(1,1,1) translate3d(0,-20px,0); transform: scale3d(1,1,1) translate3d(0,-20px,0);}.home.ready .hero.current.people .dude{-webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -ms-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; transition: all .8s ease-in-out;}.home.ready .hero.current.people .front{-webkit-transform: translate3d(-18px,0,0); -moz-transform: translate3d(-18px,0,0); -ms-transform: translate3d(-18px,0,0); -o-transform: translate3d(-18px,0,0); transform: translate3d(-18px,0,0);}.home.ready .hero.current.people .back{-webkit-transform: translate3d(18px,0,0); -moz-transform: translate3d(18px,0,0); -ms-transform: translate3d(18px,0,0); -o-transform: translate3d(18px,0,0); transform: translate3d(18px,0,0);}.home.ready .hero.current.notifications .phone{-webkit-transform: translate3d(2px,-10px,0); -moz-transform: translate3d(2px,-10px,0); -ms-transform: translate3d(2px,-10px,0); -o-transform: translate3d(2px,-10px,0); transform: translate3d(2px,-10px,0);}.home.ready .hero.current.funnels .bar{-webkit-transform: translate3d(0,-30px,0); -moz-transform: translate3d(0,-30px,0); -ms-transform: translate3d(0,-30px,0); -o-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0);}.home .top-section{/*background: white;*/ padding-top: 60px; /*overflow: hidden;*/ height: 658px; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}.home .top-section h1{font-size: 56px; font-weight: 700; letter-spacing: -2px; color: #FFF; margin-left: -3px; -webkit-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text;}.home .top-section p{color: #FFF; font-size: 29px; margin: 16px 0; -webkit-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text;}.home .top-section .content{position: relative; height: 100%;}.home .top-section .text{opacity: 0; -webkit-transform: translate3d(-50px,0,0); -moz-transform: translate3d(-50px,0,0); -ms-transform: translate3d(-50px,0,0); -o-transform: translate3d(-50px,0,0); transform: translate3d(-50px,0,0); -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}.home .top-section .arrows{z-index: 5; opacity: 0; -webkit-transition: opacity .3s linear 1s; -moz-transition: opacity .3s linear 1s; -ms-transition: opacity .3s linear 1s; -o-transition: opacity .3s linear 1s; transition: opacity .3s linear 1s;}.home .top-section .arrow{width: 50px; height: 50px; position: absolute; top: 287px; z-index: 3; border: 3px solid #e7eaf1; border-radius: 99px; opacity: .58; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}.home .top-section .arrow.left{left: -92px;}.home .top-section .arrow.left .sprite{margin: 13px 0 0 16px;}.home .top-section .arrow.right{right: -92px;}.home .top-section .arrow.right .sprite{margin: 13px 0 0 19px;}.home .top-section .arrow:hover{cursor: pointer; opacity: 1; border-color: #e0e3ec;}.home .top-section .heroes{position: relative;}.home .top-section .hero{opacity: 0; min-width: 1066px; width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: opacity .45s ease-in-out; -moz-transition: opacity .45s ease-in-out; -ms-transition: opacity .45s ease-in-out; -o-transition: opacity .45s ease-in-out; transition: opacity .45s ease-in-out;}.home .top-section .hero.segmentation{height: 658px;}.home .top-section .hero.segmentation .content{text-align: center;}.home .top-section .hero.segmentation .dude{position: absolute; bottom: 0; left: 50%; margin-left: -126px; z-index: 5;}.home .top-section .hero.segmentation .buttons{margin-top: 37px;}.home .top-section .hero.segmentation .buttons .action-button{margin: 0 11px;}.home .top-section .hero.segmentation .subtle-animation{height: 434px; width: 100%; position: absolute; bottom: 0;}.home .top-section .hero.segmentation .subtle-animation .bg{width: 948px; height: 434px; position: absolute; bottom: 0; left: 50%; padding: 0; margin-left: -474px; z-index: 1; -webkit-transform: scale3d(0.98,0.98,1); -moz-transform: scale3d(0.98,0.98,1); -ms-transform: scale3d(0.98,0.98,1); -o-transform: scale3d(0.98,0.98,1); transform: scale3d(0.98,0.98,1); -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; -webkit-transition: all .5s ease-in-out .4s; -moz-transition: all .5s ease-in-out .4s; -ms-transition: all .5s ease-in-out .4s; -o-transition: all .5s ease-in-out .4s; transition: all .5s ease-in-out .4s;}.home .top-section .hero.segmentation .subtle-animation .halo{width: 948px; height: 434px; position: absolute; bottom: 0; left: 50%; padding: 0; margin-left: -474px; z-index: 1; -webkit-transform: scale3d(0.98,0.98,1); -moz-transform: scale3d(0.98,0.98,1); -ms-transform: scale3d(0.98,0.98,1); -o-transform: scale3d(0.98,0.98,1); transform: scale3d(0.98,0.98,1); -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; -webkit-transition: all .5s ease-in-out .4s; -moz-transition: all .5s ease-in-out .4s; -ms-transition: all .5s ease-in-out .4s; -o-transition: all .5s ease-in-out .4s; transition: all .5s ease-in-out .4s; background: url(../img/halo.png);}.home .top-section .hero.segmentation .subtle-animation .left{background: url(../img/lines-and-circles-left.png); width: 444px; height: 278px; position: absolute; top: 73px; left: 60px; z-index: 4; -webkit-transform: scale3d(0.98,0.98,1) rotateZ(1deg); -moz-transform: scale3d(0.98,0.98,1) rotateZ(1deg); -ms-transform: scale3d(0.98,0.98,1) rotateZ(1deg); -o-transform: scale3d(0.98,0.98,1) rotateZ(1deg); transform: scale3d(0.98,0.98,1) rotateZ(1deg); -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transition: all .6s ease-in-out .3s; -moz-transition: all .6s ease-in-out .3s; -ms-transition: all .6s ease-in-out .3s; -o-transition: all .6s ease-in-out .3s; transition: all .6s ease-in-out .3s;}.home .top-section .hero.segmentation .subtle-animation .right{background: url(../img/lines-and-circles-right.png); width: 429px; height: 313px; position: absolute; top: 52px; left: 578px; z-index: 4; -webkit-transform: scale3d(0.98,0.98,1) rotateZ(-1deg); -moz-transform: scale3d(0.98,0.98,1) rotateZ(-1deg); -ms-transform: scale3d(0.98,0.98,1) rotateZ(-1deg); -o-transform: scale3d(0.98,0.98,1) rotateZ(-1deg); transform: scale3d(0.98,0.98,1) rotateZ(-1deg); -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transition: all .6s ease-in-out .3s; -moz-transition: all .6s ease-in-out .3s; -ms-transition: all .6s ease-in-out .3s; -o-transition: all .6s ease-in-out .3s; transition: all .6s ease-in-out .3s;}.home .top-section .hero.funnels{height: 658px;}.home .top-section .hero.funnels .action-button{position: absolute; right: 0; top: 7px;}.home .top-section .hero.funnels .background{background: url(../img/bg.png) center bottom no-repeat; width: 100%; height: 100%; position: absolute; bottom: 0;}.home .top-section .hero.funnels .bar{width: 96px; height: 100%; position: absolute; left: 50%; bottom: -90px; -webkit-transition: all .65s ease-in-out; -moz-transition: all .65s ease-in-out; -ms-transition: all .65s ease-in-out; -o-transition: all .65s ease-in-out; transition: all .65s ease-in-out;}.home .top-section .hero.funnels .bar.cerulean{background: url(../img/bars.png) 0 bottom no-repeat; margin-left: -417px; bottom: -70px;}.home .top-section .hero.funnels .bar.violet{background: url(../img/bars.png) -96px bottom no-repeat; margin-left: -173px; bottom: -70px;}.home .top-section .hero.funnels .bar.bluegray{background: url(../img/bars.png) -192px bottom no-repeat; margin-left: 71px; bottom: -70px;}.home .top-section .hero.funnels .bar.teal{background: url(../img/bars.png) -288px bottom no-repeat; margin-left: 309px; bottom: -80px;}.home .top-section .hero.funnels h1{width: 500px;}.home .top-section .hero.funnels p{width: 550px; line-height: 27px;}.home .top-section .hero.retention{height: 658px;}.home .top-section .hero.retention .action-button{position: absolute; right: 0; top: 7px;}.home .top-section .hero.retention .magnify{position: absolute; top: 313px; left: 434px; -webkit-transform: scale3d(0.9,0.9,1); -moz-transform: scale3d(0.9,0.9,1); -ms-transform: scale3d(0.9,0.9,1); -o-transform: scale3d(0.9,0.9,1); transform: scale3d(0.9,0.9,1); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s;}.home .top-section .hero.retention .table{background: url(../img/table.png) center bottom no-repeat; width: 100%; height: 100%; position: absolute; bottom: -10px; -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s;}.home .top-section .hero.retention .background{background: url(../img/bg.png) center bottom no-repeat; width: 100%; height: 100%; position: absolute; bottom: 0;}.home .top-section .hero.people{height: 645px;}.home .top-section .hero.people .action-button{position: absolute; right: 0; top: 7px;}.home .top-section .hero.people p{width: 570px; line-height: 30px;}.home .top-section .hero.people .dude{position: absolute; left: 50%; bottom: 44px; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -ms-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out;}.home .top-section .hero.people .dude.front{z-index: 4; margin-left: -196px;}.home .top-section .hero.people .dude.back{z-index: 3; margin-left: -116px;}.home .top-section .hero.people .background{background: url(../img/bg.png) center bottom no-repeat; width: 100%; height: 315px; position: absolute; bottom: 100px; z-index: 2;}.home .top-section .hero.notifications{position: relative; left: 0; height: 658px; overflow: hidden; margin-left: 0;}.home .top-section .hero.notifications .content{left: 50%; margin-left: -533px;}.home .top-section .hero.notifications p{line-height: 25px; margin: 14px 0 39px; width: 430px;}.home .top-section .hero.notifications .phone{position: absolute; right: 2px; bottom: -10px; -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s;}.home .top-section .hero.notifications .background{padding-left: 34px; background: url(../img/bg.png) center bottom no-repeat; position: absolute; width: 100%; height: 100%; top: 0;}.home .workmap{background: -moz-linear-gradient(180deg, #920091 0%, #bd3353 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#920091), color-stop(100%,#bd3353)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(180deg, #920091 0%,#bd3353 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(180deg, #920091 0%,#bd3353 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(180deg, #920091 0%,#bd3353 100%); /* IE10+ */ background: linear-gradient(180deg, #920091 0%,#bd3353 100%); /* W3C */ /*z-index: 1;*/ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); /* for the Safari browser /*background: url(../img/blue_bg_light.png);*/ /*color: white;*/ overflow: hidden; position: relative; z-index: 7;}.home .workmap h2{color: white; font-size: 60px; font-weight: 700; font-family: "stratum-1-web",sans-serif; letter-spacing: -1px; text-shadow: 0 -1px 1px rgba(0,0,0,0.2); text-align: center; margin: 38px 0 66px;}.home .workmap .icon-workmap{margin: 82px auto 0; display: block;}.home .workmap .blocks{width: 1029px; margin: 0 auto 102px; overflow: hidden;}.home .workmap .block{float: left; width: 333px; height: 280px; margin: 5px; padding: 35px 45px; background: url(../img/color_bars.png) repeat-x; background-position: 0 0; position: relative; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.2),0 1px 2px #7082a3; -moz-box-shadow: inset 0 1px rgba(255,255,255,0.2),0 1px 2px #7082a3; box-shadow: inset 0 1px rgba(255,255,255,0.2),0 1px 2px #7082a3;}.home .workmap .block.lavendar{background-position: 0 -280px;}.home .workmap .block.cyan{background-position: 0 -560px;}.home .workmap .block.orange{background-position: 0 -840px;}.home .workmap .block:hover .igem-logo{opacity: 0; -webkit-transition: opacity .16s ease-in-out; -moz-transition: opacity .16s ease-in-out; -ms-transition: opacity .16s ease-in-out; -o-transition: opacity .16s ease-in-out; transition: opacity .16s ease-in-out;}.home .workmap .block:hover blockquote{opacity: 1; -webkit-transition: opacity .16s ease-in-out .08s; -moz-transition: opacity .16s ease-in-out .08s; -ms-transition: opacity .16s ease-in-out .08s; -o-transition: opacity .16s ease-in-out .08s; transition: opacity .16s ease-in-out .08s;}.home .workmap .block:hover .case-study-link{-webkit-transform: translate3d(0,-64px,0); -moz-transform: translate3d(0,-64px,0); -ms-transform: translate3d(0,-64px,0); -o-transform: translate3d(0,-64px,0); transform: translate3d(0,-64px,0);}.home .workmap .block .igem-logo{display: block; opacity: 1; -webkit-transition: opacity .16s ease-in-out .08s; -moz-transition: opacity .16s ease-in-out .08s; -ms-transition: opacity .16s ease-in-out .08s; -o-transition: opacity .16s ease-in-out .08s; transition: opacity .16s ease-in-out .08s;}.home .workmap .block blockquote{opacity: 0; font-family: "stratum-1-web",sans-serif; text-align: left; text-shadow: 0 -1px 1px rgba(0,0,0,0.2); -webkit-transition: opacity .16s; -moz-transition: opacity .16s; -ms-transition: opacity .16s; -o-transition: opacity .16s; transition: opacity .16s;}.home .workmap .block blockquote .quote{font-size: 21px; line-height: 25px; margin-bottom: 26px;}.home .workmap .block blockquote .quote.small{font-size: 19px;}.home .workmap .block blockquote .quote:before{content: "\201C"; position: absolute; left: 36px; margin-top: -1px;}.home .workmap .block blockquote .quote:after{content: "\201D";}.home .workmap .block blockquote .author{font-size: 18px; font-weight: 500;}.home .workmap .block .case-study-link{font-size: 14px; font-weight: bold; font-family: "proxima-nova",sans-serif; text-shadow: 0 -1px 1px rgba(0,0,0,0.1); text-transform: uppercase; text-align: right; position: absolute; left: 0; bottom: -64px; height: 64px; line-height: 64px; padding: 0 30px 0 50px; width: 333px; background: rgba(0,0,0,0.04); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: all .16s; -moz-transition: all .16s; -ms-transition: all .16s; -o-transition: all .16s; transition: all .16s; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.home .workmap .block .case-study-link .sprite{display: inline-block; margin-left: 10px; position: relative; top: 1px;}.home .workmap .igem-logo{display: block; position: absolute; left: 50%;}.home .workmap .igem-logo.team{background: url(../img/icons/team.png); margin-left: -109px; top: 72px;}.home .workmap .igem-logo.project{background: url(../img/icons/project.png); margin-left: -109px; top: 72px;}.home .workmap .igem-logo.parts{background: url(../img/icons/parts.png); margin-left: -109px; top: 72px;}.home .workmap .igem-logo.model{background: url(../img/icons/model.png); margin-left: -109px; top: 72px;}.home .workmap .igem-logo.notebook{background: url(../img/icons/notebook.png); margin-left: -109px; top: 72px;}.home .workmap .igem-logo.safety{background: url(../img/icons/safety.png); margin-left: -109px; top: 72px;}.home .sponsers{/*margin-top: 20px;*/ border-top: 1px solid rgba(255,255,255,0.15); background: -moz-linear-gradient(0deg, #dd3353 0%, #bd3353 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#dd3353), color-stop(100%,#bd3353)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(0deg, #dd3353 0%,#bd3353 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(0deg, #dd3353 0%,#bd3353 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(0deg, #dd3353 0%,#bd3353 100%); /* IE10+ */ background: linear-gradient(0deg, #dd3353 0%,#bd3353 100%); /* W3C */ /*z-index: 1;*/ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); text-shadow: 0 -1px 1px rgba(0,0,0,0.2); overflow: hidden; position: relative; z-index: 7;}.home .sponsers_border{background-image: url('../img/icons/IGEM.png'); margin: 0; padding: 0; width: 150px; height: 115px; border: 0; background-color: transparent; z-index: 10; position: absolute; top: -56px; left: 557px; overflow: visible;}.home .sponsers .content{margin-top: 60px; text-align: center;}.home .sponsers .content h2{color: white; font-size: 60px; font-weight: 700; font-family: "stratum-1-web",sans-serif; letter-spacing: -1px; margin: 18px auto 24px;}.home .sponsers .content p{width: 760px; margin: 24px auto 68px; line-height: 24px;}.home .sponsers .content .icon-tv{margin: 64px auto 0;}.home .sponsers .companies{text-align: center; float: left; width: 100%; margin-top: 20px; margin-bottom: 100px;}.home .sponsers .companies .block{border: none; vertical-align: middle;}.home .sponsers .companies .block .company{border: none; vertical-align: middle; margin-left: 50px; margin-right: 50px;}.home .sponsers .companies .block .logo-container{position: relative; height: 70px;}.home .sponsers .companies .block .logo-container .igem-logo{position: absolute; bottom: 20px;}.home .sponsers .companies .block .info{border-top: 1px solid rgba(255,255,255,0.18); padding: 0 30px; position: relative;}.home .sponsers .companies .block .desc-container{height: 30px; padding-bottom: 18px;}.home .sponsers .companies .block h3{font-family: "stratum-1-web",sans-serif; font-size: 15px; font-weight: 500; text-transform: uppercase; padding-bottom: 15px;}.home .sponsers .companies .block p{opacity: 0; position: absolute; font-size: 15px; line-height: 19px; padding-right: 30px; margin: 0;}.home .testimonials{background: #f3f6ff; text-align: center; position: relative; z-index: 7; overflow: hidden;}.home .testimonials h2{font-size: 40px; font-weight: 300; font-family: "stratum-1-web",sans-serif; letter-spacing: -1px; margin: 45px 0 100px; color: #5b657c;}.home .testimonials .content{padding-bottom: 30px;}.home .testimonials .icon-speech-bubbles{margin: 0 auto; margin-top: -160px;}.home .testimonials .left-col{float: left; width: 429px;}.home .testimonials .right-col{float: left;}.home .testimonials .speech-bubble{text-align: left; width: 300px; border-radius: 4px; padding: 29px 18px 29px 27px; margin-bottom: 40px; background: #f8faff; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6; -moz-box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6; box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6;}.home .testimonials .speech-bubble .arrow-speech-bubble{position: absolute; width: 22px; height: 23px; left: 50px; bottom: -23px;}.home .testimonials .speech-bubble .quote{font-family: "stratum-1-web",sans-serif; font-size: 23px; line-height: 28px; color: #778095; margin: 0;}.home .testimonials .speech-bubble .quote-date{font-family: "proxima-nova",sans-serif; font-weight: bold; font-size: 11px; margin: 17px 0 27px; text-transform: uppercase; color: #a2adc6;}.home .testimonials .speech-bubble .author{display: block; overflow: hidden;}.home .testimonials .speech-bubble .author-avatar{width: 54px; height: 54px; border-radius: 99px; float: left;}.home .testimonials .speech-bubble .author-info{font-size: 15px; font-family: "proxima-nova",sans-serif; font-weight: bold; float: left; margin-left: 16px; margin-top: 8px;}.home .testimonials .speech-bubble .author-info .name{color: #6b7489; padding-bottom: 5px;}.home .testimonials .speech-bubble .author-info .handle{color: #31bdeb;}.home .testimonials .read-more{display: inline-block; padding: 16px 20px 15px 20px; border-radius: 4px; font-size: 15px; font-family: "Helvetica Neue",sans-serif; font-weight: bold; color: #b9c3db; text-shadow: 1px -1px #fff; text-decoration: none; background: #f8faff; position: relative; left: -213px; top: 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6; -moz-box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6; box-shadow: inset 0 1px #fff,0 1px 2px #c8cfe6; -webkit-transition: color .5s; -moz-transition: color .5s; -ms-transition: color .5s; -o-transition: color .5s; transition: color .5s;}.home .testimonials .read-more:hover{color: #7e8aa7;}
+
body {
 +
    background-image: none;
 +
    background-color: #fff;
 +
    min-width: 1100px;
 +
    overflow-x: hidden !important;
 +
    width: 100% !important;
 +
    height: 100%;
 +
    position: relative;
 +
}
 +
 
 +
body section {
 +
    z-index: 0;
 +
    display: block;
 +
    position: relative;
 +
    /*text-align: center;*/
 +
}
 +
 
 +
#leftarrow {
 +
    opacity: 0;
 +
    visibility: hidden;
 +
    -webkit-transition: all .7s ease-in-out;
 +
    -moz-transition: all .7s ease-in-out;
 +
    -ms-transition: all .7s ease-in-out;
 +
    -o-transition: all .7s ease-in-out;
 +
    transition: all .7s ease-in-out;
 +
}
 +
 
 +
#rightarrow {
 +
    opacity: 1;
 +
    visibility: visible;
 +
    -webkit-transition: all .7s ease-in-out;
 +
    -moz-transition: all .7s ease-in-out;
 +
    -ms-transition: all .7s ease-in-out;
 +
    -o-transition: all .7s ease-in-out;
 +
    transition: all .7s ease-in-out;
 +
}
 +
 
 +
#award {
 +
    background: transparent url(https://static.igem.org/mediawiki/2013/b/b5/BIT-China_Award.png) no-repeat;
 +
    background-size: 100%;
 +
    height: 30%;
 +
    left: 50%;
 +
    margin-left: -460px;
 +
    margin-top: -300px;
 +
    position: absolute;
 +
    top: 50%;
 +
    width: 200px;
 +
    z-index: 10;
 +
    opacity: 0;
 +
    visibility: hidden;
 +
    -webkit-transition: all 1s ease-in-out;
 +
    -moz-transition: all 1s ease-in-out;
 +
    -ms-transition: all 1s ease-in-out;
 +
    -o-transition: all 1s ease-in-out;
 +
    transition: all 1s ease-in-out;
 +
}
 +
 
 +
#story1_sun {
 +
    background: url('https://static.igem.org/mediawiki/2013/3/39/BIT-China-bt-Sun1.png');
 +
    background-size: 100%;
 +
    margin-top: -800px;
 +
    z-index: 10;
 +
    height: 400px;
 +
    width: 400px;
 +
    position: relative;
 +
    left: 60px;
 +
}
 +
 
 +
#story2_sun {
 +
    background: url('https://static.igem.org/mediawiki/2013/f/f2/BIT-China-bt-Sun2.png');
 +
    background-size: 100%;
 +
    margin-top: -800px;
 +
    z-index: 10;
 +
    height: 400px;
 +
    width: 400px;
 +
    position: relative;
 +
    left: 60px;
 +
}
 +
 
 +
#story4_sun {
 +
    background: url('https://static.igem.org/mediawiki/2013/8/81/BIT-China-bt-Sun3.png');
 +
    background-size: 100%;
 +
    margin-top: -800px;
 +
    z-index: 10;
 +
    height: 400px;
 +
    width: 400px;
 +
    position: relative;
 +
    left: 60px;
 +
}
 +
 
 +
#story1_gem {
 +
    background: url('https://static.igem.org/mediawiki/2013/f/fc/BIT-China-bt-Storygem1.png');
 +
    background-size: 100%;
 +
    z-index: -1;
 +
    height: 400px;
 +
    width: 400px;
 +
    position: relative;
 +
    left: 290px;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
 
 +
#story2_gem {
 +
    background: url('https://static.igem.org/mediawiki/2013/9/98/BIT-China-bt-Storygem2.png');
 +
    background-size: 100%;
 +
    z-index: -1;
 +
    height: 400px;
 +
    width: 400px;
 +
    position: relative;
 +
    left: 50px;
 +
    -webkit-transition: all 2s;
 +
    -moz-transition: all 2s;
 +
    -ms-transition: all 2s;
 +
    -o-transition: all 2s;
 +
    transition: all 2s;
 +
}
 +
 
 +
#story4_gem {
 +
    background: url('https://static.igem.org/mediawiki/2013/e/e5/BIT-China-bt-Storygem3.png');
 +
    background-size: 100%;
 +
    z-index: -1;
 +
    height: 400px;
 +
    width: 400px;
 +
    position: relative;
 +
    left: 290px;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
 
 +
#story1_tem {
 +
    background: url('https://static.igem.org/mediawiki/2013/8/8d/BIT-China-bt-Tem.png');
 +
    background-size: 100%;
 +
    z-index: -1;
 +
    height: 100px;
 +
    width: 100px;
 +
    position: relative;
 +
    top: 50%;
 +
    left: 50%;
 +
    margin-left: 250px;
 +
    margin-top: -320px;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
 
 +
 
 +
#pointer {
 +
    background: url('https://static.igem.org/mediawiki/2013/b/b1/BIT-China-bt-Hand.png');
 +
    background-size: 100%;
 +
    bottom: 20px;
 +
    color: rgba(0, 0, 0, 0.5);
 +
    display: block;
 +
    position: fixed;
 +
    right: 20px;
 +
    z-index: 10;
 +
    height: 74px;
 +
    font-size: 64px;
 +
    width: 74px;
 +
}
 +
 
 +
#introduction {
 +
    left: 50%;
 +
    margin-left: -480px;
 +
    margin-top: 120px;
 +
    position: absolute;
 +
    top: 50%;
 +
    z-index: 0;
 +
    -webkit-transition: all .7s ease-in-out;
 +
    -moz-transition: all .7s ease-in-out;
 +
    -ms-transition: all .7s ease-in-out;
 +
    -o-transition: all .7s ease-in-out;
 +
    transition: all .7s ease-in-out;
 +
}
 +
 
 +
#idea {
 +
    background: url('https://static.igem.org/mediawiki/2013/a/a6/BIT-China-bt-Icon1.png');
 +
    border-radius: 10px;
 +
    float: left;
 +
    background-size: 100%;
 +
    margin-top: 45px;
 +
    margin-left: 172px;
 +
    height: 70px;
 +
    width: 70px;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
 
 +
#idea:hover {
 +
    background-color: rgba(58, 153, 211, 0.85);
 +
}
 +
 
 +
#advantage {
 +
    background: url('https://static.igem.org/mediawiki/2013/f/f2/BIT-China-bt-Icon2.png');
 +
    border-radius: 10px;
 +
    float: left;
 +
    background-size: 100%;
 +
    margin-top: 45px;
 +
    margin-left: 60px;
 +
    height: 70px;
 +
    width: 70px;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
 
 +
#advantage:hover {
 +
    background-color: rgba(118, 181, 71, 0.85098);
 +
}
 +
 
 +
#description {
 +
    background: url('https://static.igem.org/mediawiki/2013/7/75/BIT-China-bt-Icon3.png');
 +
    background-color: rgba(234, 58, 58, 0.85098);
 +
    border-radius: 10px;
 +
    float: left;
 +
    background-size: 100%;
 +
    margin-top: 45px;
 +
    margin-left: 60px;
 +
    height: 70px;
 +
    width: 70px;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
 
 +
#description:hover {
 +
    background-color: rgba(234, 58, 58, 0.85098);
 +
}
 +
 
 +
#charactors {
 +
    background: url('https://static.igem.org/mediawiki/2013/6/61/BIT-China-bt-Icon4.png');
 +
    border-radius: 10px;
 +
    float: left;
 +
    background-size: 100%;
 +
    margin-top: 45px;
 +
    margin-left: 60px;
 +
    height: 70px;
 +
    width: 70px;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
 
 +
#charactors:hover {
 +
    background-color: rgba(133, 133, 197, 0.85098);
 +
}
 +
 
 +
#extend {
 +
    background: url('https://static.igem.org/mediawiki/2013/f/ff/BIT-China0Icon5.png');
 +
    border-radius: 10px;
 +
    float: left;
 +
    background-size: 100%;
 +
    margin-top: 45px;
 +
    margin-left: 60px;
 +
    height: 70px;
 +
    width: 70px;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
 
 +
#extend:hover {
 +
    background-color: rgba(255, 165, 0, 0.85098);
 +
}
 +
 
 +
 
 +
#cover {
 +
    background: url('https://static.igem.org/mediawiki/2013/d/dd/BIT-China-Cover.png');
 +
    background-color: rgb(234, 58, 58);
 +
    background-size: 100%;
 +
    height: 100%;
 +
    padding: 0px !important;
 +
    text-align: center;
 +
    min-height: 700px !important;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
 
 +
.sun {
 +
    position: absolute;
 +
    top: 100px;
 +
    left: 100px;
 +
}
 +
 
 +
#TV {
 +
    display: block;
 +
    position: absolute;
 +
    background: url('https://static.igem.org/mediawiki/2013/3/3f/BIT-China-bt-TV.png');
 +
    top: 100px;
 +
    left: 100px;
 +
}
 +
 
 +
#laptop-screen {
 +
    background: rgba(234, 58, 58, 0.85);
 +
    height: 390px !important;
 +
    left: 50%;
 +
    margin-left: -376px;
 +
    margin-top: -248px;
 +
    overflow: hidden;
 +
    position: absolute;
 +
    text-align: left;
 +
    top: 50%;
 +
    white-space: nowrap;
 +
    width: 721px;
 +
    z-index: 8;
 +
    -webkit-transition: all .7s ease-in-out;
 +
    -moz-transition: all .7s ease-in-out;
 +
    -ms-transition: all .7s ease-in-out;
 +
    -o-transition: all .7s ease-in-out;
 +
    transition: all .7s ease-in-out;
 +
}
 +
 
 +
#laptop {
 +
    background: transparent url('https://static.igem.org/mediawiki/2013/7/70/BIT-China-bt-Imac.png') no-repeat;
 +
    background-size: 100%;
 +
    height: 954px;
 +
    left: 50%;
 +
    margin-left: -470px;
 +
    margin-top: -320px;
 +
    position: absolute;
 +
    top: 50%;
 +
    width: 927px;
 +
    z-index: 0;
 +
    -webkit-transition: all .7s ease-in-out;
 +
    -moz-transition: all .7s ease-in-out;
 +
    -ms-transition: all .7s ease-in-out;
 +
    -o-transition: all .7s ease-in-out;
 +
    transition: all .7s ease-in-out;
 +
}
 +
 
 +
#wrapper {
 +
    background: #f3f6ff;
 +
    width: 100%;
 +
}
 +
 
 +
.home a {
 +
    color: inherit;
 +
    text-decoration: none;
 +
}
 +
 
 +
.home .top-section {
 +
    background: url('https://static.igem.org/mediawiki/2013/d/dd/BIT-China-Cover.png') #bc4227;
 +
    background-size: 100% 100%;
 +
    width: 100%;
 +
    padding-top: 60px;
 +
    /*overflow: hidden;*/
 +
    height: 650px;
 +
    -webkit-user-select: none;
 +
    -moz-user-select: none;
 +
    -o-user-select: none;
 +
    user-select: none;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
 
 +
.home .top-section h1 {
 +
    font-size: 56px;
 +
    font-weight: 700;
 +
    letter-spacing: -2px;
 +
    color: #FFF;
 +
    margin-left: -3px;
 +
    -webkit-user-select: text;
 +
    -moz-user-select: text;
 +
    -o-user-select: text;
 +
    user-select: text;
 +
}
 +
 
 +
.header-icon {
 +
    display: block;
 +
    height: 128px;
 +
    left: 50%;
 +
    margin-left: -114px;
 +
    margin-top: -85px;
 +
    position: absolute;
 +
    width: 128px;
 +
}
 +
 
 +
.header-icon div {
 +
    border-radius: 200px;
 +
    overflow: hidden;
 +
    padding: 50px
 +
}
 +
 
 +
.header-icon .icon-sitemap {
 +
    transition: all 0s ease;
 +
    -webkit-transition: all 0s ease;
 +
    height: 128px;
 +
    margin-left: 0px;
 +
    margin-top: 0px;
 +
    width: 128px;
 +
}
 +
 
 +
.header-icon img {
 +
    margin-left: -10px;
 +
    width: 150px;
 +
}
 +
 
 +
.wrap {
 +
    min-height: 100%;
 +
    text-align: center;
 +
    overflow-x: hidden;
 +
    margin: 0 auto;
 +
    max-width: 1160px;
 +
}
 +
 
 +
body section .wrap {
 +
    min-height: 100%;
 +
    text-align: center;
 +
    overflow-x: hidden;
 +
}
 +
 
 +
body section .wrap h1,
 +
body section .wrap h2 {
 +
    white-space: nowrap
 +
}
 +
 
 +
#cover .wrap > h1 {
 +
    color: transparent;
 +
    font-size: 46px;
 +
    left: 50%;
 +
    margin-left: -32px;
 +
    margin-top: -260px;
 +
    position: absolute;
 +
    overflow: hidden;
 +
    top: 50%;
 +
    white-space: nowrap;
 +
    width: 70px;
 +
}
 +
 
 +
 
 +
#sitemap {
 +
    background: #152732;
 +
    min-height: 1300px !important
 +
}
 +
 
 +
#sitemap .header-icon div {
 +
    background: #7ec9ac;
 +
  /* box-shadow:
 +
        40px 30px 0px -15px #7ec9ac,
 +
        -60px 40px 0px -30px #7ec9ac,
 +
        -100px 0px 0px -50px #7ec9ac,
 +
        100px 0px 0px -50px #7ec9ac*/
 +
}
 +
 
 +
#sitemap h2 {
 +
    color: #b1f6d5;
 +
    margin-bottom: 100px
 +
}
 +
 
 +
#sitemap .wrap div {
 +
    margin-bottom: 50px
 +
}
 +
 
 +
#sitemap p {
 +
    color: #fff;
 +
    margin-bottom: 50px;
 +
    margin-top: 100px;
 +
    opacity: 0.1;
 +
    text-align: center;
 +
}
 +
 
 +
#sitemap p strong {
 +
    display: block;
 +
    font-size: 50px;
 +
    margin-top: 30px;
 +
}
 +
 
 +
#sitemap section {
 +
    -webkit-backface-visibility: hidden !important;
 +
    -webkit-perspective: 1000 !important;
 +
    -webkit-transition: all 350ms ease-out 0s;
 +
    backface-visibility: hidden !important;
 +
    perspective: 1000 !important;
 +
    transition: all 350ms ease-out 0s;
 +
 
 +
    color: #fff;
 +
    cursor: pointer;
 +
    display: inline-block;
 +
    height: 321px;
 +
    margin-bottom: 0px;
 +
    margin-right: -4px;
 +
    overflow: hidden;
 +
    position: relative;
 +
    width: 321px;
 +
    z-index: 0;
 +
}
 +
 
 +
#sitemap section * {
 +
    -webkit-transition: all 350ms ease-out 0s;
 +
    transition: all 350ms ease-out 0s
 +
}
 +
 
 +
#sitemap section:hover {
 +
    -webkit-transition: all 350ms ease-out 0s;
 +
    transition: all 350ms ease-out 0s;
 +
 
 +
    background-color: rgba(0, 0, 0, 0.75) !important
 +
}
 +
 
 +
#sitemap section:hover * {
 +
    -webkit-transition: all 350ms ease-out 0s;
 +
    transition: all 350ms ease-out 0s
 +
}
 +
 
 +
#sitemap section div {
 +
    /*background: rgba(21, 39, 50, 0.75);*/
 +
    height: 100%;
 +
    opacity: 1;
 +
    position: absolute;
 +
    width: 100%;
 +
}
 +
 
 +
#sitemap section h1 {
 +
    margin-top: -100%;
 +
    opacity: 0;
 +
    padding-top: 15px
 +
}
 +
 
 +
#sitemap section h1 a {
 +
    font-size: 32px
 +
}
 +
 
 +
#sitemap section h1 a:hover {
 +
    text-decoration: none
 +
}
 +
 
 +
#sitemap section h2 {
 +
    color: rgba(255, 255, 255, 0.75);
 +
    font-size: 18px;
 +
    margin-top: 200%;
 +
    opacity: 0
 +
}
 +
 
 +
#sitemap section i {
 +
    color: #fff;
 +
    left: 50%;
 +
    margin-left: -64px;
 +
    margin-top: -64px;
 +
    top: 50%;
 +
    position: absolute;
 +
    z-index: -1;
 +
}
 +
 
 +
#sitemap section:hover div {
 +
    opacity: 1
 +
}
 +
 
 +
#sitemap section:hover div h1 {
 +
    margin-top: 100px;
 +
    opacity: 1
 +
}
 +
 
 +
#sitemap section:hover div h2 {
 +
    margin-top: 0px;
 +
    opacity: 1
 +
}
 +
 
 +
#sitemap section:hover i {
 +
    color: #152732
 +
}
 +
 
 +
#project {
 +
    opacity: 0;
 +
    z-index: -1;
 +
    background: #ccccff;
 +
    -webkit-transition:all 0.35s linear;
 +
    -moz-transition:all 0.35s linear;
 +
    -ms-transition:all 0.35s linear;
 +
    -o-transition:all 0.35s linear;
 +
    transition:all 0.35s linear;
 +
}
 +
 
 +
#project h1 a {
 +
    color: #CCCCFF;
 +
}
 +
 
 +
#project .icon-project {
 +
    z-index: 5;
 +
    padding-top: 70px;
 +
}
 +
#project .icon-project:hover{
 +
    opacity: 0;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#team {
 +
    opacity: 0;
 +
    z-index: -1;
 +
    background: #99ccff;
 +
    -webkit-transition:all 0.35s linear;
 +
    -moz-transition:all 0.35s linear;
 +
    -ms-transition:all 0.35s linear;
 +
    -o-transition:all 0.35s linear;
 +
    transition:all 0.35s linear;
 +
}
 +
 
 +
#team h1 a {
 +
    color: #99CCFF;
 +
}
 +
#team .icon-team:hover{
 +
    opacity: 0;
 +
}
 +
 
 +
#team .icon-team {
 +
    z-index: 5;
 +
    padding-top: 70px;
 +
}
 +
#modeling {
 +
    opacity: 0;
 +
    z-index: -1;
 +
    background: #66eecc;
 +
    -webkit-transition:all 0.35s linear;
 +
    -moz-transition:all 0.35s linear;
 +
    -ms-transition:all 0.35s linear;
 +
    -o-transition:all 0.35s linear;
 +
    transition:all 0.35s linear;
 +
}
 +
 
 +
#modeling h1 a {
 +
    color: #66eeCC;
 +
}
 +
 
 +
#modeling i {
 +
    font-size: 256px !important;
 +
    margin-left: -127px !important;
 +
    margin-top: -120px !important
 +
}
 +
#modeling .icon-modeling:hover{
 +
    opacity: 0;
 +
}
 +
#modeling .icon-modeling{
 +
    z-index: 5;
 +
    padding-top: 75px;
 +
}
 +
 
 +
#human-practice {
 +
    opacity: 0;
 +
    z-index: -1;
 +
    background: #99cc66;
 +
    -webkit-transition:all 0.35s linear;
 +
    -moz-transition:all 0.35s linear;
 +
    -ms-transition:all 0.35s linear;
 +
    -o-transition:all 0.35s linear;
 +
    transition:all 0.35s linear;
 +
}
 +
 
 +
#human-practice h1 a {
 +
    color: #99CC66;
 +
}
 +
 
 +
#human-practice i {
 +
    margin-left: -85px !important
 +
}
 +
#human-practice .icon-human-practice:hover{
 +
    opacity: 0;
 +
}
 +
#human-practice .icon-human-practice{
 +
    z-index: 5;
 +
    padding-top: 70px;
 +
}
 +
 
 +
 
 +
 
 +
#notebook {
 +
    opacity: 0;
 +
    z-index: -1;
 +
    background: #ffdd22;
 +
    -webkit-transition:all 0.35s linear;
 +
    -moz-transition:all 0.35s linear;
 +
    -ms-transition:all 0.35s linear;
 +
    -o-transition:all 0.35s linear;
 +
    transition:all 0.35s linear;
 +
}
 +
 
 +
#notebook h1 a {
 +
    color: #FFDD22;
 +
}
 +
 
 +
#notebook i {
 +
    margin-left: -105px !important
 +
}
 +
#notebook .icon-notebook:hover{
 +
    opacity: 0;
 +
}
 +
#notebook .icon-notebook{
 +
    z-index: 5;
 +
    padding-top: 75px;
 +
}
 +
 
 +
 
 +
 
 +
#sponser {
 +
    opacity: 0;
 +
    z-index: -1;
 +
    background: #ff99cc;
 +
    -webkit-transition:all 0.35s linear;
 +
    -moz-transition:all 0.35s linear;
 +
    -ms-transition:all 0.35s linear;
 +
    -o-transition:all 0.35s linear;
 +
    transition:all 0.35s linear;
 +
}
 +
 
 +
#sponser h1 a {
 +
    color: #FF99CC;
 +
}
 +
 
 +
#sponser i {
 +
    margin-left: -75px !important
 +
}
 +
#sponser .icon-sponser:hover{
 +
    opacity: 0;
 +
}
 +
#sponser .icon-sponser{
 +
    z-index: 5;
 +
    padding-top: 70px;
 +
}
 +
section h1 {
 +
    color: #fff;
 +
    margin-left: 10px;
 +
    margin-right: 10px;
 +
    margin-top: 180px;
 +
    font-size: 39px;
 +
}
 +
 
 +
section p {
 +
    font-size: 18px;
 +
    margin-left: 10px;
 +
    margin-right: 10px;
 +
    text-align: left;
 +
}
 +
 
 +
#about {
 +
    background: #ffffdd;
 +
    min-height: 1000px !important;
 +
}
 +
 
 +
#about .header-icon div {
 +
    background: #ea3a3a;
 +
    /*box-shadow:
 +
        40px 30px 0px -15px #ea3a3a,
 +
        -60px 40px 0px -30px #ea3a3a,
 +
        -100px 0px 0px -50px #ea3a3a,
 +
        100px 0px 0px -50px #ea3a3a*/
 +
}
 +
 
 +
#about h1 {
 +
    color: #000
 +
}
 +
 
 +
#about h2 {
 +
    color: #ea3a3a
 +
}
 +
 
 +
#map {
 +
    background: #fafafa;
 +
    height: 100%;
 +
    position: absolute;
 +
    width: 100%;
 +
    z-index: 6;
 +
}
 +
 
 +
#map > div {
 +
    height: 100% !important;
 +
    padding-top: 250px !important;
 +
    width: 100%;
 +
}
 +
 
 +
#about .icon-BIT {
 +
    margin-top: 10px;
 +
    margin-left: -10px;
 +
    float: left;
 +
    width: 50px;
 +
    margin-bottom: 10px;
 +
}
 +
 
 +
#about .icon-BIT img{
 +
    float: left;
 +
}
 +
 
 +
#about dl {
 +
    margin-top: 10px;
 +
    font-size: 13px;
 +
    min-height: 110px !important;
 +
}
 +
 
 +
#about p {
 +
    display: block;
 +
    margin-top: 100px;
 +
    padding: 5px;
 +
    width: 930px
 +
}
 +
 
 +
#about p,
 +
#about p strong,
 +
#about p em {
 +
    color: #111;
 +
    font-size: 28px;
 +
    letter-spacing: -1px;
 +
    line-height: 47px
 +
}
 +
 
 +
#about p .placeholder {
 +
    display: none;
 +
    float: right;
 +
    height: 296px;
 +
    padding: 20px;
 +
    width: 353px
 +
}
 +
 
 +
#about .icon-heart {
 +
    color: #e93839;
 +
    height: 24px;
 +
    font-size: 28px;
 +
    margin-top: 8px;
 +
    position: relative;
 +
    width: 28px;
 +
}
 +
 
 +
#about p strong {
 +
    display: inline-block;
 +
    padding-left: 5px;
 +
    padding-right: 5px;
 +
}
 +
 
 +
#about p em {
 +
    color: #999
 +
}
 +
 
 +
#about p strong {
 +
    background: #e93839;
 +
    color: #fafafa
 +
}
 +
 
 +
#about aside {
 +
    background: rgba(0, 0, 0, 0.75);
 +
    border-radius: 5px;
 +
    float: left;
 +
    margin: 0 auto;
 +
    margin-bottom: 50px;
 +
    margin-left: -30px;
 +
    margin-top: -220px;
 +
    padding: 20px;
 +
    position: relative;
 +
    width: 380px;
 +
    z-index: 2;
 +
}
 +
 
 +
#about aside:after {
 +
    content: ' ';
 +
    border: solid transparent;
 +
    border-top-color: rgba(0, 0, 0, 0.75);
 +
    border-width: 20px;
 +
    display: block;
 +
    height: 0px;
 +
    margin-left: 130px;
 +
    margin-top: 20px;
 +
    position: absolute;
 +
    width: 0px;
 +
}
 +
 
 +
#point {
 +
    background: #ea3a3a;
 +
    border-radius: 50px;
 +
    box-shadow:
 +
        inset 0px 0px 25px rgba(0, 0, 0, 0.25),
 +
        0px 5px 0px 3px rgba(255, 25, 25, 0.75),
 +
        0px 10px 0px 10px rgba(0, 0, 0, 0.75);
 +
    content: ' ';
 +
    display: block;
 +
    float: left;
 +
    height: 50px;
 +
    margin-left: 150px;
 +
    margin-top: 550px;
 +
    position: absolute;
 +
    width: 50px;
 +
    -webkit-transition: all 0.5s linear;
 +
    -moz-transition: all 0.5s linear;
 +
    -ms-transition: all 0.5s linear;
 +
    -o-transition: all 0.5s linear;
 +
    transition: all 0.5s linear;
 +
}
 +
 
 +
#about aside dt {
 +
    color: #ccc;
 +
    display: inline-block;
 +
    margin-bottom: 10px;
 +
    text-align: right;
 +
    width: 100px;
 +
}
 +
 
 +
 
 +
#about aside dd {
 +
    color: #fafafa;
 +
    display: inline-block;
 +
    margin-bottom: 10px;
 +
    margin-left: 20px;
 +
    text-align: left;
 +
    width: 200px;
 +
}
 +
 
 +
#about #googlemap {
 +
    opacity: 0;
 +
    border-radius: 5px;
 +
    float: right;
 +
    margin: 0 auto;
 +
    margin-bottom: 50px;
 +
    margin-left: 10px;
 +
    margin-top: 110px;
 +
    padding: 20px;
 +
    position: relative;
 +
    width: 640px;
 +
    height: 480px;
 +
    z-index: 2;
 +
    -webkit-transition: all .5s ease-in-out;
 +
    -moz-transition: all .5s ease-in-out;
 +
    -ms-transition: all .5s ease-in-out;
 +
    -o-transition: all .5s ease-in-out;
 +
    transition: all .5s ease-in-out;
 +
 
 +
}
 +
 
 +
#contact {
 +
    background: #00222d;
 +
    bottom: 0px;
 +
    height: 100% !important;
 +
    min-height: 1100px !important;
 +
    z-index: 11 !important
 +
}
 +
 
 +
#contact .header-icon div {
 +
    background: #7d9faa;
 +
    /*box-shadow:
 +
        40px 30px 0px -15px #7d9faa,
 +
        -60px 40px 0px -30px #7d9faa,
 +
        -100px 0px 0px -50px #7d9faa,
 +
        100px 0px 0px -50px #7d9faa*/
 +
}
 +
 
 +
#contact .header-icon:before {
 +
    background: #7d9faa
 +
}
 +
 
 +
#contact h2 {
 +
    color: #b0ddec
 +
}
 +
 
 +
#get-in-touch {
 +
    -webkit-transition: all 0.25s;
 +
    transition: all 0.25s;
 +
 
 +
    background: #7d9faa;
 +
    border-radius: 10px;
 +
    box-shadow: 0px 10px 0px 0px #42646f, 0px 15px 0px 10px #001a24;
 +
    color: #fff;
 +
    display: block;
 +
    font-size: 64px;
 +
    margin: 0 auto;
 +
    margin-bottom: 10px;
 +
    margin-top: 100px;
 +
    padding: 20px;
 +
    position: relative;
 +
    text-align: center;
 +
    text-shadow: 0px 3px 0px #42646f;
 +
    width: 460px;
 +
    z-index: 20
 +
}
 +
 
 +
#get-in-touch:hover {
 +
    background: #42646f;
 +
    box-shadow: 0px 5px 0px 10px #001a24;
 +
    margin-bottom: 0px;
 +
    margin-top: 110px;
 +
    padding-bottom: 15px;
 +
    padding-top: 25px;
 +
    text-decoration: none
 +
}
 +
 
 +
#world {
 +
    bottom: 0px;
 +
    height: 100%;
 +
    margin-top: -178px;
 +
    overflow: hidden !important;
 +
    position: absolute;
 +
    width: 100%;
 +
    z-index: 1
 +
}
 +
 
 +
#sky {
 +
    height: 100%;
 +
    bottom: -113px;
 +
    position: absolute;
 +
    overflow: hidden;
 +
    width: 100%;
 +
 
 +
}
 +
 
 +
#city {
 +
    height: 100%;
 +
    position: absolute;
 +
    width: 100%
 +
}
 +
 
 +
#moon {
 +
    -webkit-animation: floating 10s 2s linear infinite;
 +
    -webkit-transform: scale3d(100%, 100%, 1);
 +
    animation: floating 15s linear infinite;
 +
    transform: scale3d(100%, 100%, 1);
 +
 
 +
    background: #fff7e1;
 +
    border-radius: 200px;
 +
    bottom: 800px;
 +
    height: 115px;
 +
    left: 100px;
 +
    position: absolute;
 +
    width: 115px
 +
}
 +
 
 +
#moon:after {
 +
    -webkit-transform: rotate(-25deg) scale(1);
 +
    transform: rotate(-25deg) scale(1);
 +
 
 +
    background: #fff;
 +
    content: ' ';
 +
    display: block;
 +
    height: 900px;
 +
    margin-left: 194px;
 +
    margin-top: 25px;
 +
    opacity: 0.04;
 +
    position: absolute;
 +
    width: 116px
 +
}
 +
 
 +
#moon i {
 +
    color: #00222d;
 +
    left: 50%;
 +
    margin-left: -36px;
 +
    margin-top: 25px;
 +
    opacity: 0.1;
 +
    position: absolute;
 +
}
 +
 
 +
#sky .cloud {
 +
    -webkit-animation: floating 15s linear infinite;
 +
    -webkit-transform: scale3d(100%, 100%, 1);
 +
    animation: floating 15s linear infinite;
 +
    transform: scale3d(100%, 100%, 1)
 +
}
 +
 
 +
#contact .icon-cloud-2,
 +
#contact .icon-cloud-3,
 +
#contact .icon-cloud-4 {
 +
    bottom: 620px;
 +
    left: 0px;
 +
    position: absolute
 +
}
 +
 
 +
#contact .icon-64.icon-cloud-2,
 +
#contact .icon-64.icon-cloud-3,
 +
#contact .icon-64.icon-cloud-4 {
 +
    opacity: 0.1
 +
}
 +
 
 +
#contact .icon-128.icon-cloud-2 {
 +
    margin-left: 100px
 +
}
 +
 
 +
#contact .icon-128.icon-cloud-2:before {
 +
    opacity: 0.1 !important;
 +
}
 +
 
 +
#contact .icon-128.icon-cloud-3 {
 +
    bottom: 600px;
 +
    margin-left: 400px
 +
}
 +
 
 +
#contact .icon-128.icon-cloud-3:before {
 +
    opacity: 0.3 !important;
 +
}
 +
 
 +
#contact .icon-128.icon-cloud-4 {
 +
    bottom: 640px;
 +
    margin-left: 200px;
 +
    opacity: 1
 +
}
 +
 
 +
#contact .icon-128.icon-cloud-4:before {
 +
    opacity: 0.15 !important;
 +
}
 +
 
 +
#contact .icon-64.icon-cloud-2 {
 +
    bottom: 700px;
 +
    margin-left: 400px;
 +
    opacity: 0.1
 +
}
 +
 
 +
#contact .icon-64.icon-cloud-3 {
 +
    bottom: 700px;
 +
    margin-left: 300px;
 +
    opacity: 0.1
 +
}
 +
 
 +
#contact .icon-64.icon-cloud-4 {
 +
    bottom: 640px;
 +
    margin-left: 300px;
 +
    opacity: 0.15
 +
}
 +
 
 +
#contact .twitter-share-button {
 +
    margin-left: 25px;
 +
    margin-top: -50px;
 +
}
 +
 
 +
#contact #___plusone_1 {
 +
    margin-left: -94px !important;
 +
    margin-top: 70px !important;
 +
    position: absolute;
 +
}
 +
 
 +
#contact .fb-like {
 +
    margin-top: -60px;
 +
}
 +
 
 +
.parallax {
 +
    background: transparent url('https://static.igem.org/mediawiki/2013/0/05/BIT-China-bt-City.png') repeat-x 0px bottom;
 +
    background-size: 1500px;
 +
    bottom: 80px;
 +
    height: 100%;
 +
    position: absolute;
 +
    width: 400%;
 +
    z-index: -1;
 +
}
 +
 
 +
.parallax2 {
 +
    background: transparent url('https://static.igem.org/mediawiki/2013/e/e6/BIT-China-bt-City2.png') repeat-x 0px bottom;
 +
    background-size: 1500px;
 +
    bottom: 80px;
 +
    height: 100%;
 +
    opacity: 0.5;
 +
    position: absolute;
 +
    width: 200%;
 +
    z-index: -2;
 +
}
 +
 
 +
#road {
 +
    -webkit-perspective: 1000 !important;
 +
    background: #111;
 +
    bottom: 0px;
 +
    height: 80px;
 +
    position: absolute;
 +
    width: 100%;
 +
    z-index: 10
 +
}
 +
 
 +
#road div {
 +
    -webkit-animation: road 1s linear infinite;
 +
    -webkit-transform: rotateX(50deg) translateX(0) translate3d(0, 0, 0);
 +
 
 +
    animation: road 1s linear infinite;
 +
    transform: rotateX(65deg) skewX(-20deg);
 +
 
 +
    border-bottom: 10px dashed #5f5439;
 +
    content: ' ';
 +
    display: block;
 +
    height: 0px;
 +
    margin-top: 30px;
 +
    opacity: 0.5;
 +
    width: 120%
 +
}
 +
 
 +
#taxi {
 +
    -webkit-animation: taxi 20s linear infinite;
 +
    -webkit-transform: scale3d(100%, 100%, 1);
 +
    animation: taxi 20s linear infinite;
 +
    transform: scale3d(100%, 100%, 1);
 +
 
 +
    bottom: 20px;
 +
    left: 0%;
 +
    margin-left: -240px;
 +
    position: absolute;
 +
    width: 100%;
 +
    z-index: 10
 +
}
 +
 
 +
#taxi div {
 +
    background: transparent url('https://static.igem.org/mediawiki/2013/4/44/BIT-China-bt-Contact3.png') no-repeat;
 +
    height: 180px;
 +
    overflow: hidden;
 +
    width: 239px
 +
}
 +
 
 +
#taxi_headlights {
 +
    border-right: 100px solid rgba(255, 234, 0, 0.05);
 +
    border-top: 50px solid transparent;
 +
    border-bottom: 50px solid transparent;
 +
    display: block;
 +
    height: 0px;
 +
    margin-left: 90px;
 +
    margin-top: 50px;
 +
    position: absolute;
 +
    width: 100px;
 +
    z-index: 11;
 +
}
 +
 
 +
#signs {
 +
    -webkit-animation: signs 67s linear infinite;
 +
    -webkit-backface-visibility: hidden;
 +
    -webkit-perspective: 1000;
 +
    -webkit-transform: scale3d(100%, 100%, 1);
 +
    animation: signs 67s linear infinite;
 +
    backface-visibility: hidden;
 +
    transform: scale3d(100%, 100%, 1);
 +
 
 +
    bottom: 82px;
 +
    height: 150px;
 +
    left: 100%;
 +
    position: absolute;
 +
    white-space: nowrap;
 +
    width: auto;
 +
    z-index: 10;
 +
}
 +
 
 +
#signs:hover {
 +
    -webkit-animation-play-state: paused;
 +
    animation-play-state: paused
 +
}
 +
 
 +
.sign {
 +
    display: inline-block;
 +
    height: 32px;
 +
    margin-left: 300px;
 +
    margin-top: -40px;
 +
    padding: 20px;
 +
    width: 32px;
 +
}
 +
 
 +
.sign div {
 +
    -webkit-transform: rotateZ(45deg);
 +
    transform: rotateZ(45deg);
 +
 
 +
    background: #888;
 +
    display: block;
 +
    margin-left: -33px;
 +
    padding: 20px;
 +
    width: 32px;
 +
}
 +
 
 +
.sign div:hover {
 +
    -webkit-filter: brightness(120%);
 +
    filter: brightness(120%)
 +
}
 +
 
 +
.sign .pole {
 +
    -webkit-transform: rotateZ(0deg);
 +
    transform: rotateZ(0deg);
 +
 
 +
    background: #222;
 +
    display: block;
 +
    height: 100px;
 +
    margin-left: 0px;
 +
    overflow: hidden;
 +
    padding: 0px;
 +
    position: absolute;
 +
    width: 5px !important;
 +
    z-index: -1
 +
}
 +
 
 +
.sign div i {
 +
    -webkit-transform: rotateZ(-45deg);
 +
    transform: rotateZ(-45deg)
 +
}
 +
 
 +
.carousel {
 +
  position: relative;
 +
  /*margin-bottom: 20px;*/
 +
  line-height: 1;
 +
}
 +
 
 +
.carousel-inner {
 +
  position: relative;
 +
  width: 100%;
 +
  overflow: hidden;
 +
}
 +
 
 +
.carousel-inner > .item {
 +
  position: relative;
 +
  display: none;
 +
  -webkit-transition: 0.6s ease-in-out left;
 +
    -moz-transition: 0.6s ease-in-out left;
 +
      -o-transition: 0.6s ease-in-out left;
 +
          transition: 0.6s ease-in-out left;
 +
}
 +
 
 +
.carousel-inner > .item > img,
 +
.carousel-inner > .item > a > img {
 +
  display: block;
 +
  line-height: 1;
 +
}
 +
 
 +
.carousel-inner > .active,
 +
.carousel-inner > .next,
 +
.carousel-inner > .prev {
 +
  display: block;
 +
}
 +
 
 +
.carousel-inner > .active {
 +
  left: 0;
 +
}
 +
 
 +
.carousel-inner > .next,
 +
.carousel-inner > .prev {
 +
  position: absolute;
 +
  top: 0;
 +
  width: 100%;
 +
}
 +
 
 +
.carousel-inner > .next {
 +
  left: 100%;
 +
}
 +
 
 +
.carousel-inner > .prev {
 +
  left: -100%;
 +
}
 +
 
 +
.carousel-inner > .next.left,
 +
.carousel-inner > .prev.right {
 +
  left: 0;
 +
}
 +
 
 +
.carousel-inner > .active.left {
 +
  left: -100%;
 +
}
 +
 
 +
.carousel-inner > .active.right {
 +
  left: 100%;
 +
}
 +
 
 +
.carousel-control {
 +
  position: absolute;
 +
  top: 40%;
 +
  left: 15px;
 +
  width: 40px;
 +
  height: 40px;
 +
  margin-top: -20px;
 +
  font-size: 60px;
 +
  font-weight: 100;
 +
  line-height: 30px;
 +
  color: #ffffff;
 +
  text-align: center;
 +
  background: #222222;
 +
  border: 3px solid #ffffff;
 +
  -webkit-border-radius: 23px;
 +
    -moz-border-radius: 23px;
 +
          border-radius: 23px;
 +
  opacity: 0.5;
 +
  filter: alpha(opacity=50);
 +
}
 +
 
 +
.carousel-control.right {
 +
  right: 15px;
 +
  left: auto;
 +
}
 +
 
 +
.carousel-control:hover,
 +
.carousel-control:focus {
 +
  color: #ffffff;
 +
  text-decoration: none;
 +
  opacity: 0.9;
 +
  filter: alpha(opacity=90);
 +
}
 +
 
 +
.carousel-indicators {
 +
  position: absolute;
 +
  top: 15px;
 +
  right: 15px;
 +
  z-index: 5;
 +
  margin: 0;
 +
  list-style: none;
 +
}
 +
 
 +
.carousel-indicators li {
 +
  display: block;
 +
  float: left;
 +
  width: 10px;
 +
  height: 10px;
 +
  margin-left: 5px;
 +
  text-indent: -999px;
 +
  background-color: #ccc;
 +
  background-color: rgba(255, 255, 255, 0.25);
 +
  border-radius: 5px;
 +
}
 +
 
 +
.carousel-indicators .active {
 +
  background-color: #fff;
 +
}
 +
 
 +
.carousel-caption {
 +
  position: absolute;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  padding: 15px;
 +
  background: #333333;
 +
  background: rgba(0, 0, 0, 0.75);
 +
}
 +
 
 +
.carousel-caption h4,
 +
.carousel-caption p {
 +
  line-height: 20px;
 +
  color: #ffffff;
 +
}
 +
 
 +
.carousel-caption h4 {
 +
  margin: 0 0 5px;
 +
}
 +
 
 +
.carousel-caption p {
 +
  margin-bottom: 0;
 +
}
 +
 
 +
#story {
 +
    background: url('https://static.igem.org/mediawiki/2013/0/05/BIT-China-bt-Blackbar.png');
 +
}
 +
 
 +
#display-img-idea {
 +
    visibility: hidden;
 +
    display: none;
 +
}
 +
 
 +
#display-img-idea img{
 +
    margin-left: 20px;
 +
    margin-right: 10px;
 +
    width: 38%;
 +
    height: 45%;
 +
    background-size: 100% 100%;
 +
    float: left;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
#display-img-idea p{
 +
    white-space: pre-wrap;
 +
    font-size: 25px;
 +
    font-family: 'Capriola', sans-serif;
 +
    letter-spacing: 0.5px;
 +
    color: white;
 +
    line-height: 36px;
 +
}
 +
 
 +
#display-img-advantage {
 +
    display: none;
 +
    visibility: hidden;
 +
}
 +
#display-img-advantage img{
 +
    margin-left: 20px;
 +
    width: 38%;
 +
    height: 45%;
 +
    background-size: 100% 100%;
 +
    float: left;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
#display-img-advantage p{
 +
    white-space: pre-wrap;
 +
    font-size: 28px;
 +
    font-family: 'Capriola', sans-serif;
 +
    letter-spacing: 0.5px;
 +
    color: white;
 +
    line-height: 36px;
 +
}
 +
 
 +
#display-img-description img{
 +
    margin-top: 20px;
 +
    margin-left: 20px;
 +
    width: 38%;
 +
    height: 45%;
 +
    background-size: 100% 100%;
 +
    float: left;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
    margin-right: 10px;
 +
    margin-bottom: 20px;
 +
}
 +
#display-img-description {
 +
   
 +
}
 +
#display-img-description p{
 +
    white-space: pre-wrap;
 +
    font-size: 30px;
 +
    font-family: 'Capriola', sans-serif;
 +
    letter-spacing: 0.5px;
 +
    color: white;
 +
    line-height: 42px;
 +
}
 +
 
 +
 
 +
#display-img-charactors {
 +
    display: none;
 +
    visibility: hidden;
 +
}
 +
#display-img-charactors img{
 +
    margin-left: 20px;
 +
    height: 130px;
 +
    background-size: 100% 100%;
 +
    float: left;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
#display-img-charactors p{
 +
    white-space: pre-wrap;
 +
    font-size: 20px;
 +
    font-family: 'Capriola', sans-serif;
 +
    letter-spacing: 0.5px;
 +
    color: white;
 +
    line-height: 30px;
 +
}
 +
 
 +
#display-img-charactors #teamphoto {
 +
    background: url(https://static.igem.org/mediawiki/2013/8/84/BIT-China-bt3730.png);
 +
    width: 250px;
 +
    height: 700px;
 +
    background-size: 100%;
 +
    margin-top: -80px;
 +
    position: relative;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
 
 +
#display-img-extend{
 +
    display: none;
 +
    visibility: hidden;
 +
}
 +
#display-img-extend img{
 +
    margin-left: 20px;
 +
    width: 55%;
 +
    height: 45%;
 +
    background-size: 100% 100%;
 +
    float: left;
 +
    -webkit-transition: all .5s;
 +
    -moz-transition: all .5s;
 +
    -ms-transition: all .5s;
 +
    -o-transition: all .5s;
 +
    transition: all .5s;
 +
}
 +
#display-img-extend p{
 +
    white-space: pre-wrap;
 +
    font-size: 20px;
 +
    font-family: 'Capriola', sans-serif;
 +
    letter-spacing: 0.5px;
 +
    color: white;
 +
    line-height: 30px;
 +
}
 +
.info-sch{
 +
    opacity: 0.6;
 +
    width: 350px;
 +
    height: 430px;
 +
    background-color: black;
 +
    margin-left: -150px;
 +
    margin-top: -460px;
 +
    border-radius: 10px;
 +
    padding: 10px;
 +
    white-space: pre-wrap;
 +
}
 +
 
 +
#point .info-sch {
 +
    white-space: pre-wrap;
 +
    font-size: 23px;
 +
    font-family: 'Capriola', sans-serif;
 +
    letter-spacing: 0.5px;
 +
    color: white;
 +
    line-height: 32px;
 +
 
 +
}

Latest revision as of 02:22, 29 October 2013

body { 

   background-image: none;
   background-color: #fff;
   min-width: 1100px;
   overflow-x: hidden !important;
   width: 100% !important;
   height: 100%;
   position: relative;

}

body section { 

   z-index: 0;
   display: block;
   position: relative;
   /*text-align: center;*/

}

  1. leftarrow { 
   opacity: 0;
   visibility: hidden;
   -webkit-transition: all .7s ease-in-out;
   -moz-transition: all .7s ease-in-out;
   -ms-transition: all .7s ease-in-out;
   -o-transition: all .7s ease-in-out;
   transition: all .7s ease-in-out;

}

  1. rightarrow { 
   opacity: 1;
   visibility: visible;
   -webkit-transition: all .7s ease-in-out;
   -moz-transition: all .7s ease-in-out;
   -ms-transition: all .7s ease-in-out;
   -o-transition: all .7s ease-in-out;
   transition: all .7s ease-in-out;

}

  1. award { 
   background: transparent url(BIT-China_Award.png) no-repeat;
   background-size: 100%;
   height: 30%;
   left: 50%;
   margin-left: -460px;
   margin-top: -300px;
   position: absolute;
   top: 50%;
   width: 200px;
   z-index: 10;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -ms-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;

}

  1. story1_sun { 
   background: url('https://static.igem.org/mediawiki/2013/3/39/BIT-China-bt-Sun1.png');
   background-size: 100%;
   margin-top: -800px;
   z-index: 10;
   height: 400px;
   width: 400px;
   position: relative;
   left: 60px;

}

  1. story2_sun { 
   background: url('https://static.igem.org/mediawiki/2013/f/f2/BIT-China-bt-Sun2.png');
   background-size: 100%;
   margin-top: -800px;
   z-index: 10;
   height: 400px;
   width: 400px;
   position: relative;
   left: 60px;

}

  1. story4_sun { 
   background: url('https://static.igem.org/mediawiki/2013/8/81/BIT-China-bt-Sun3.png');
   background-size: 100%;
   margin-top: -800px;
   z-index: 10;
   height: 400px;
   width: 400px;
   position: relative;
   left: 60px;

}

  1. story1_gem { 
   background: url('https://static.igem.org/mediawiki/2013/f/fc/BIT-China-bt-Storygem1.png');
   background-size: 100%;
   z-index: -1;
   height: 400px;
   width: 400px;
   position: relative;
   left: 290px;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. story2_gem { 
   background: url('https://static.igem.org/mediawiki/2013/9/98/BIT-China-bt-Storygem2.png');
   background-size: 100%;
   z-index: -1;
   height: 400px;
   width: 400px;
   position: relative;
   left: 50px;
   -webkit-transition: all 2s;
   -moz-transition: all 2s;
   -ms-transition: all 2s;
   -o-transition: all 2s;
   transition: all 2s;

}

  1. story4_gem { 
   background: url('https://static.igem.org/mediawiki/2013/e/e5/BIT-China-bt-Storygem3.png');
   background-size: 100%;
   z-index: -1;
   height: 400px;
   width: 400px;
   position: relative;
   left: 290px;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. story1_tem { 
   background: url('https://static.igem.org/mediawiki/2013/8/8d/BIT-China-bt-Tem.png');
   background-size: 100%;
   z-index: -1;
   height: 100px;
   width: 100px;
   position: relative;
   top: 50%;
   left: 50%;
   margin-left: 250px;
   margin-top: -320px;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}


  1. pointer { 
   background: url('https://static.igem.org/mediawiki/2013/b/b1/BIT-China-bt-Hand.png');
   background-size: 100%;
   bottom: 20px;
   color: rgba(0, 0, 0, 0.5);
   display: block;
   position: fixed;
   right: 20px;
   z-index: 10;
   height: 74px;
   font-size: 64px;
   width: 74px;

}

  1. introduction { 
   left: 50%;
   margin-left: -480px;
   margin-top: 120px;
   position: absolute;
   top: 50%;
   z-index: 0;
   -webkit-transition: all .7s ease-in-out;
   -moz-transition: all .7s ease-in-out;
   -ms-transition: all .7s ease-in-out;
   -o-transition: all .7s ease-in-out;
   transition: all .7s ease-in-out;

}

  1. idea { 
   background: url('https://static.igem.org/mediawiki/2013/a/a6/BIT-China-bt-Icon1.png');
   border-radius: 10px;
   float: left;
   background-size: 100%;
   margin-top: 45px;
   margin-left: 172px;
   height: 70px;
   width: 70px;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. idea:hover { 
   background-color: rgba(58, 153, 211, 0.85);

}

  1. advantage { 
   background: url('https://static.igem.org/mediawiki/2013/f/f2/BIT-China-bt-Icon2.png');
   border-radius: 10px;
   float: left;
   background-size: 100%;
   margin-top: 45px;
   margin-left: 60px;
   height: 70px;
   width: 70px;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. advantage:hover { 
   background-color: rgba(118, 181, 71, 0.85098);

}

  1. description { 
   background: url('https://static.igem.org/mediawiki/2013/7/75/BIT-China-bt-Icon3.png');
   background-color: rgba(234, 58, 58, 0.85098);
   border-radius: 10px;
   float: left;
   background-size: 100%;
   margin-top: 45px;
   margin-left: 60px;
   height: 70px;
   width: 70px;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. description:hover { 
   background-color: rgba(234, 58, 58, 0.85098);

}

  1. charactors { 
   background: url('https://static.igem.org/mediawiki/2013/6/61/BIT-China-bt-Icon4.png');
   border-radius: 10px;
   float: left;
   background-size: 100%;
   margin-top: 45px;
   margin-left: 60px;
   height: 70px;
   width: 70px;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. charactors:hover { 
   background-color: rgba(133, 133, 197, 0.85098);

}

  1. extend { 
   background: url('https://static.igem.org/mediawiki/2013/f/ff/BIT-China0Icon5.png');
   border-radius: 10px;
   float: left;
   background-size: 100%;
   margin-top: 45px;
   margin-left: 60px;
   height: 70px;
   width: 70px;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. extend:hover { 
   background-color: rgba(255, 165, 0, 0.85098);

}


  1. cover { 
   background: url('https://static.igem.org/mediawiki/2013/d/dd/BIT-China-Cover.png');
   background-color: rgb(234, 58, 58);
   background-size: 100%;
   height: 100%;
   padding: 0px !important;
   text-align: center;
   min-height: 700px !important;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

.sun { 

   position: absolute;
   top: 100px;
   left: 100px;

}

  1. TV { 
   display: block;
   position: absolute;
   background: url('https://static.igem.org/mediawiki/2013/3/3f/BIT-China-bt-TV.png');
   top: 100px;
   left: 100px;

}

  1. laptop-screen { 
   background: rgba(234, 58, 58, 0.85);
   height: 390px !important;
   left: 50%;
   margin-left: -376px;
   margin-top: -248px;
   overflow: hidden;
   position: absolute;
   text-align: left;
   top: 50%;
   white-space: nowrap;
   width: 721px;
   z-index: 8;
   -webkit-transition: all .7s ease-in-out;
   -moz-transition: all .7s ease-in-out;
   -ms-transition: all .7s ease-in-out;
   -o-transition: all .7s ease-in-out;
   transition: all .7s ease-in-out;

}

  1. laptop { 
   background: transparent url('https://static.igem.org/mediawiki/2013/7/70/BIT-China-bt-Imac.png') no-repeat;
   background-size: 100%;
   height: 954px;
   left: 50%;
   margin-left: -470px;
   margin-top: -320px;
   position: absolute;
   top: 50%;
   width: 927px;
   z-index: 0;
   -webkit-transition: all .7s ease-in-out;
   -moz-transition: all .7s ease-in-out;
   -ms-transition: all .7s ease-in-out;
   -o-transition: all .7s ease-in-out;
   transition: all .7s ease-in-out;

}

  1. wrapper { 
   background: #f3f6ff;
   width: 100%;

}

.home a { 

   color: inherit;
   text-decoration: none;

}

.home .top-section { 

   background: url('https://static.igem.org/mediawiki/2013/d/dd/BIT-China-Cover.png') #bc4227;
   background-size: 100% 100%;
   width: 100%;
   padding-top: 60px;
   /*overflow: hidden;*/
   height: 650px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -o-user-select: none;
   user-select: none;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

.home .top-section h1 { 

   font-size: 56px;
   font-weight: 700;
   letter-spacing: -2px;
   color: #FFF;
   margin-left: -3px;
   -webkit-user-select: text;
   -moz-user-select: text;
   -o-user-select: text;
   user-select: text;

}

.header-icon { 

   display: block;
   height: 128px;
   left: 50%;
   margin-left: -114px;
   margin-top: -85px;
   position: absolute;
   width: 128px;

}

.header-icon div { 

   border-radius: 200px;
   overflow: hidden;
   padding: 50px

}

.header-icon .icon-sitemap { 

   transition: all 0s ease; 
   -webkit-transition: all 0s ease; 
   height: 128px; 
   margin-left: 0px; 
   margin-top: 0px;
   width: 128px;

}

.header-icon img { 

   margin-left: -10px;
   width: 150px;

}

.wrap { 

   min-height: 100%;
   text-align: center;
   overflow-x: hidden;
   margin: 0 auto;
   max-width: 1160px;

}

body section .wrap { 

   min-height: 100%;
   text-align: center;
   overflow-x: hidden;

}

body section .wrap h1, body section .wrap h2 { 

   white-space: nowrap

}

  1. cover .wrap > h1 { 
   color: transparent;
   font-size: 46px;
   left: 50%;
   margin-left: -32px;
   margin-top: -260px;
   position: absolute;
   overflow: hidden;
   top: 50%;
   white-space: nowrap;
   width: 70px;

}


  1. sitemap { 
   background: #152732;
   min-height: 1300px !important

}

  1. sitemap .header-icon div { 
   background: #7ec9ac;
  /* box-shadow:
       40px 30px 0px -15px #7ec9ac,
       -60px 40px 0px -30px #7ec9ac,
       -100px 0px 0px -50px #7ec9ac,
       100px 0px 0px -50px #7ec9ac*/

}

  1. sitemap h2 { 
   color: #b1f6d5;
   margin-bottom: 100px

}

  1. sitemap .wrap div { 
   margin-bottom: 50px

}

  1. sitemap p { 
   color: #fff;
   margin-bottom: 50px;
   margin-top: 100px;
   opacity: 0.1;
   text-align: center;

}

  1. sitemap p strong { 
   display: block;
   font-size: 50px;
   margin-top: 30px;

}

  1. sitemap section { 
   -webkit-backface-visibility: hidden !important;
   -webkit-perspective: 1000 !important;
   -webkit-transition: all 350ms ease-out 0s;
   backface-visibility: hidden !important;
   perspective: 1000 !important;
   transition: all 350ms ease-out 0s;

   color: #fff;
   cursor: pointer;
   display: inline-block;
   height: 321px;
   margin-bottom: 0px;
   margin-right: -4px;
   overflow: hidden;
   position: relative;
   width: 321px;
   z-index: 0;

}

  1. sitemap section * { 
   -webkit-transition: all 350ms ease-out 0s;
   transition: all 350ms ease-out 0s

}

  1. sitemap section:hover { 
   -webkit-transition: all 350ms ease-out 0s;
   transition: all 350ms ease-out 0s;

   background-color: rgba(0, 0, 0, 0.75) !important

}

  1. sitemap section:hover * { 
   -webkit-transition: all 350ms ease-out 0s;
   transition: all 350ms ease-out 0s

}

  1. sitemap section div { 
   /*background: rgba(21, 39, 50, 0.75);*/
   height: 100%;
   opacity: 1;
   position: absolute;
   width: 100%;

}

  1. sitemap section h1 { 
   margin-top: -100%;
   opacity: 0;
   padding-top: 15px

}

  1. sitemap section h1 a { 
   font-size: 32px

}

  1. sitemap section h1 a:hover { 
   text-decoration: none

}

  1. sitemap section h2 { 
   color: rgba(255, 255, 255, 0.75);
   font-size: 18px;
   margin-top: 200%;
   opacity: 0

}

  1. sitemap section i { 
   color: #fff;
   left: 50%;
   margin-left: -64px;
   margin-top: -64px;
   top: 50%;
   position: absolute;
   z-index: -1;

}

  1. sitemap section:hover div { 
   opacity: 1

}

  1. sitemap section:hover div h1 { 
   margin-top: 100px;
   opacity: 1

}

  1. sitemap section:hover div h2 { 
   margin-top: 0px;
   opacity: 1

}

  1. sitemap section:hover i { 
   color: #152732

}

  1. project { 
   opacity: 0;
   z-index: -1;
   background: #ccccff;
   -webkit-transition:all 0.35s linear;
   -moz-transition:all 0.35s linear;
   -ms-transition:all 0.35s linear;
   -o-transition:all 0.35s linear;
   transition:all 0.35s linear;

}

  1. project h1 a { 
   color: #CCCCFF;

}

  1. project .icon-project { 
   z-index: 5;
   padding-top: 70px;

}

  1. project .icon-project:hover{ 
   opacity: 0;

}



  1. team { 
   opacity: 0;
   z-index: -1;
   background: #99ccff;
   -webkit-transition:all 0.35s linear;
   -moz-transition:all 0.35s linear;
   -ms-transition:all 0.35s linear;
   -o-transition:all 0.35s linear;
   transition:all 0.35s linear;

}

  1. team h1 a { 
   color: #99CCFF;

}

  1. team .icon-team:hover{ 
   opacity: 0;

}

  1. team .icon-team { 
   z-index: 5;
   padding-top: 70px;

}

  1. modeling { 
   opacity: 0;
   z-index: -1;
   background: #66eecc;
   -webkit-transition:all 0.35s linear;
   -moz-transition:all 0.35s linear;
   -ms-transition:all 0.35s linear;
   -o-transition:all 0.35s linear;
   transition:all 0.35s linear;

}

  1. modeling h1 a { 
   color: #66eeCC;

}

  1. modeling i { 
   font-size: 256px !important;
   margin-left: -127px !important;
   margin-top: -120px !important

}

  1. modeling .icon-modeling:hover{ 
   opacity: 0;

}

  1. modeling .icon-modeling{ 
   z-index: 5;
   padding-top: 75px;

}

  1. human-practice { 
   opacity: 0;
   z-index: -1;
   background: #99cc66;
   -webkit-transition:all 0.35s linear;
   -moz-transition:all 0.35s linear;
   -ms-transition:all 0.35s linear;
   -o-transition:all 0.35s linear;
   transition:all 0.35s linear;

}

  1. human-practice h1 a { 
   color: #99CC66;

}

  1. human-practice i { 
   margin-left: -85px !important

}

  1. human-practice .icon-human-practice:hover{ 
   opacity: 0;

}

  1. human-practice .icon-human-practice{ 
   z-index: 5;
   padding-top: 70px;

}


  1. notebook { 
   opacity: 0;
   z-index: -1;
   background: #ffdd22;
   -webkit-transition:all 0.35s linear;
   -moz-transition:all 0.35s linear;
   -ms-transition:all 0.35s linear;
   -o-transition:all 0.35s linear;
   transition:all 0.35s linear;

}

  1. notebook h1 a { 
   color: #FFDD22;

}

  1. notebook i { 
   margin-left: -105px !important

}

  1. notebook .icon-notebook:hover{ 
   opacity: 0;

}

  1. notebook .icon-notebook{ 
   z-index: 5;
   padding-top: 75px;

}


  1. sponser { 
   opacity: 0;
   z-index: -1;
   background: #ff99cc;
   -webkit-transition:all 0.35s linear;
   -moz-transition:all 0.35s linear;
   -ms-transition:all 0.35s linear;
   -o-transition:all 0.35s linear;
   transition:all 0.35s linear;

}

  1. sponser h1 a { 
   color: #FF99CC;

}

  1. sponser i { 
   margin-left: -75px !important

}

  1. sponser .icon-sponser:hover{ 
   opacity: 0;

}

  1. sponser .icon-sponser{ 
   z-index: 5;
   padding-top: 70px;

} section h1 { 

   color: #fff;
   margin-left: 10px;
   margin-right: 10px;
   margin-top: 180px;
   font-size: 39px;

}

section p { 

   font-size: 18px;
   margin-left: 10px;
   margin-right: 10px;
   text-align: left;

}

  1. about { 
   background: #ffffdd;
   min-height: 1000px !important;

}

  1. about .header-icon div { 
   background: #ea3a3a;
   /*box-shadow:
       40px 30px 0px -15px #ea3a3a,
       -60px 40px 0px -30px #ea3a3a,
       -100px 0px 0px -50px #ea3a3a,
       100px 0px 0px -50px #ea3a3a*/

}

  1. about h1 { 
   color: #000

}

  1. about h2 { 
   color: #ea3a3a

}

  1. map { 
   background: #fafafa;
   height: 100%;
   position: absolute;
   width: 100%;
   z-index: 6;

}

  1. map > div { 
   height: 100% !important;
   padding-top: 250px !important;
   width: 100%;

}

  1. about .icon-BIT { 
   margin-top: 10px;
   margin-left: -10px;
   float: left;
   width: 50px;
   margin-bottom: 10px;

}

  1. about .icon-BIT img{ 
   float: left;

}

  1. about dl { 
   margin-top: 10px;
   font-size: 13px;
   min-height: 110px !important;

}

  1. about p { 
   display: block;
   margin-top: 100px;
   padding: 5px;
   width: 930px

}

  1. about p,
  2. about p strong,
  3. about p em { 
   color: #111;
   font-size: 28px;
   letter-spacing: -1px;
   line-height: 47px

}

  1. about p .placeholder { 
   display: none;
   float: right;
   height: 296px;
   padding: 20px;
   width: 353px

}

  1. about .icon-heart { 
   color: #e93839;
   height: 24px;
   font-size: 28px;
   margin-top: 8px;
   position: relative;
   width: 28px;

}

  1. about p strong { 
   display: inline-block;
   padding-left: 5px;
   padding-right: 5px;

}

  1. about p em { 
   color: #999

}

  1. about p strong { 
   background: #e93839;
   color: #fafafa

}

  1. about aside { 
   background: rgba(0, 0, 0, 0.75);
   border-radius: 5px;
   float: left;
   margin: 0 auto;
   margin-bottom: 50px;
   margin-left: -30px;
   margin-top: -220px;
   padding: 20px;
   position: relative;
   width: 380px;
   z-index: 2;

}

  1. about aside:after { 
   content: ' ';
   border: solid transparent;
   border-top-color: rgba(0, 0, 0, 0.75);
   border-width: 20px;
   display: block;
   height: 0px;
   margin-left: 130px;
   margin-top: 20px;
   position: absolute;
   width: 0px;

}

  1. point { 
   background: #ea3a3a;
   border-radius: 50px;
   box-shadow:
       inset 0px 0px 25px rgba(0, 0, 0, 0.25),
       0px 5px 0px 3px rgba(255, 25, 25, 0.75),
       0px 10px 0px 10px rgba(0, 0, 0, 0.75);
   content: ' ';
   display: block;
   float: left;
   height: 50px;
   margin-left: 150px;
   margin-top: 550px;
   position: absolute;
   width: 50px;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   transition: all 0.5s linear;

}

  1. about aside dt { 
   color: #ccc;
   display: inline-block;
   margin-bottom: 10px;
   text-align: right;
   width: 100px;

}


  1. about aside dd { 
   color: #fafafa;
   display: inline-block;
   margin-bottom: 10px;
   margin-left: 20px;
   text-align: left;
   width: 200px;

}

  1. about #googlemap { 
   opacity: 0;
   border-radius: 5px;
   float: right;
   margin: 0 auto;
   margin-bottom: 50px;
   margin-left: 10px;
   margin-top: 110px;
   padding: 20px;
   position: relative;
   width: 640px;
   height: 480px;
   z-index: 2;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -ms-transition: all .5s ease-in-out;
   -o-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;

}

  1. contact { 
   background: #00222d;
   bottom: 0px;
   height: 100% !important;
   min-height: 1100px !important;
   z-index: 11 !important

}

  1. contact .header-icon div { 
   background: #7d9faa;
   /*box-shadow:
       40px 30px 0px -15px #7d9faa,
       -60px 40px 0px -30px #7d9faa,
       -100px 0px 0px -50px #7d9faa,
       100px 0px 0px -50px #7d9faa*/

}

  1. contact .header-icon:before { 
   background: #7d9faa

}

  1. contact h2 { 
   color: #b0ddec

}

  1. get-in-touch { 
   -webkit-transition: all 0.25s;
   transition: all 0.25s;

   background: #7d9faa;
   border-radius: 10px;
   box-shadow: 0px 10px 0px 0px #42646f, 0px 15px 0px 10px #001a24;
   color: #fff;
   display: block;
   font-size: 64px;
   margin: 0 auto;
   margin-bottom: 10px;
   margin-top: 100px;
   padding: 20px;
   position: relative;
   text-align: center;
   text-shadow: 0px 3px 0px #42646f;
   width: 460px;
   z-index: 20

}

  1. get-in-touch:hover { 
   background: #42646f;
   box-shadow: 0px 5px 0px 10px #001a24;
   margin-bottom: 0px;
   margin-top: 110px;
   padding-bottom: 15px;
   padding-top: 25px;
   text-decoration: none

}

  1. world { 
   bottom: 0px;
   height: 100%;
   margin-top: -178px;
   overflow: hidden !important;
   position: absolute;
   width: 100%;
   z-index: 1

}

  1. sky { 
   height: 100%;
   bottom: -113px;
   position: absolute;
   overflow: hidden;
   width: 100%;

}

  1. city { 
   height: 100%;
   position: absolute;
   width: 100%

}

  1. moon { 
   -webkit-animation: floating 10s 2s linear infinite;
   -webkit-transform: scale3d(100%, 100%, 1);
   animation: floating 15s linear infinite;
   transform: scale3d(100%, 100%, 1);

   background: #fff7e1;
   border-radius: 200px;
   bottom: 800px;
   height: 115px;
   left: 100px;
   position: absolute;
   width: 115px

}

  1. moon:after { 
   -webkit-transform: rotate(-25deg) scale(1);
   transform: rotate(-25deg) scale(1);

   background: #fff;
   content: ' ';
   display: block;
   height: 900px;
   margin-left: 194px;
   margin-top: 25px;
   opacity: 0.04;
   position: absolute;
   width: 116px

}

  1. moon i { 
   color: #00222d;
   left: 50%;
   margin-left: -36px;
   margin-top: 25px;
   opacity: 0.1;
   position: absolute;

}

  1. sky .cloud { 
   -webkit-animation: floating 15s linear infinite;
   -webkit-transform: scale3d(100%, 100%, 1);
   animation: floating 15s linear infinite;
   transform: scale3d(100%, 100%, 1)

}

  1. contact .icon-cloud-2,
  2. contact .icon-cloud-3,
  3. contact .icon-cloud-4 { 
   bottom: 620px;
   left: 0px;
   position: absolute

}

  1. contact .icon-64.icon-cloud-2,
  2. contact .icon-64.icon-cloud-3,
  3. contact .icon-64.icon-cloud-4 { 
   opacity: 0.1

}

  1. contact .icon-128.icon-cloud-2 { 
   margin-left: 100px

}

  1. contact .icon-128.icon-cloud-2:before { 
   opacity: 0.1 !important;

}

  1. contact .icon-128.icon-cloud-3 { 
   bottom: 600px;
   margin-left: 400px

}

  1. contact .icon-128.icon-cloud-3:before { 
   opacity: 0.3 !important;

}

  1. contact .icon-128.icon-cloud-4 { 
   bottom: 640px;
   margin-left: 200px;
   opacity: 1

}

  1. contact .icon-128.icon-cloud-4:before { 
   opacity: 0.15 !important;

}

  1. contact .icon-64.icon-cloud-2 { 
   bottom: 700px;
   margin-left: 400px;
   opacity: 0.1

}

  1. contact .icon-64.icon-cloud-3 { 
   bottom: 700px;
   margin-left: 300px;
   opacity: 0.1

}

  1. contact .icon-64.icon-cloud-4 { 
   bottom: 640px;
   margin-left: 300px;
   opacity: 0.15

}

  1. contact .twitter-share-button { 
   margin-left: 25px;
   margin-top: -50px;

}

  1. contact #___plusone_1 { 
   margin-left: -94px !important;
   margin-top: 70px !important;
   position: absolute;

}

  1. contact .fb-like { 
   margin-top: -60px;

}

.parallax { 

   background: transparent url('https://static.igem.org/mediawiki/2013/0/05/BIT-China-bt-City.png') repeat-x 0px bottom;
   background-size: 1500px;
   bottom: 80px;
   height: 100%;
   position: absolute;
   width: 400%;
   z-index: -1;

}

.parallax2 { 

   background: transparent url('https://static.igem.org/mediawiki/2013/e/e6/BIT-China-bt-City2.png') repeat-x 0px bottom;
   background-size: 1500px;
   bottom: 80px;
   height: 100%;
   opacity: 0.5;
   position: absolute;
   width: 200%;
   z-index: -2;

}

  1. road { 
   -webkit-perspective: 1000 !important;
   background: #111;
   bottom: 0px;
   height: 80px;
   position: absolute;
   width: 100%;
   z-index: 10

}

  1. road div { 
   -webkit-animation: road 1s linear infinite;
   -webkit-transform: rotateX(50deg) translateX(0) translate3d(0, 0, 0);

   animation: road 1s linear infinite;
   transform: rotateX(65deg) skewX(-20deg);

   border-bottom: 10px dashed #5f5439;
   content: ' ';
   display: block;
   height: 0px;
   margin-top: 30px;
   opacity: 0.5;
   width: 120%

}

  1. taxi { 
   -webkit-animation: taxi 20s linear infinite;
   -webkit-transform: scale3d(100%, 100%, 1);
   animation: taxi 20s linear infinite;
   transform: scale3d(100%, 100%, 1);

   bottom: 20px;
   left: 0%;
   margin-left: -240px;
   position: absolute;
   width: 100%;
   z-index: 10

}

  1. taxi div { 
   background: transparent url('https://static.igem.org/mediawiki/2013/4/44/BIT-China-bt-Contact3.png') no-repeat;
   height: 180px;
   overflow: hidden;
   width: 239px

}

  1. taxi_headlights { 
   border-right: 100px solid rgba(255, 234, 0, 0.05);
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   display: block;
   height: 0px;
   margin-left: 90px;
   margin-top: 50px;
   position: absolute;
   width: 100px;
   z-index: 11;

}

  1. signs { 
   -webkit-animation: signs 67s linear infinite;
   -webkit-backface-visibility: hidden;
   -webkit-perspective: 1000;
   -webkit-transform: scale3d(100%, 100%, 1);
   animation: signs 67s linear infinite;
   backface-visibility: hidden;
   transform: scale3d(100%, 100%, 1);

   bottom: 82px;
   height: 150px;
   left: 100%;
   position: absolute;
   white-space: nowrap;
   width: auto;
   z-index: 10;

}

  1. signs:hover { 
   -webkit-animation-play-state: paused;
   animation-play-state: paused

}

.sign { 

   display: inline-block;
   height: 32px;
   margin-left: 300px;
   margin-top: -40px;
   padding: 20px;
   width: 32px;

}

.sign div { 

   -webkit-transform: rotateZ(45deg);
   transform: rotateZ(45deg);

   background: #888;
   display: block;
   margin-left: -33px;
   padding: 20px;
   width: 32px;

}

.sign div:hover { 

   -webkit-filter: brightness(120%);
   filter: brightness(120%)

}

.sign .pole { 

   -webkit-transform: rotateZ(0deg);
   transform: rotateZ(0deg);

   background: #222;
   display: block;
   height: 100px;
   margin-left: 0px;
   overflow: hidden;
   padding: 0px;
   position: absolute;
   width: 5px !important;
   z-index: -1

}

.sign div i { 

   -webkit-transform: rotateZ(-45deg);
   transform: rotateZ(-45deg)

}

.carousel { 

 position: relative;
 /*margin-bottom: 20px;*/
 line-height: 1;

}

.carousel-inner { 

 position: relative;
 width: 100%;
 overflow: hidden;

}

.carousel-inner > .item { 

 position: relative;
 display: none;
 -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
      -o-transition: 0.6s ease-in-out left;
         transition: 0.6s ease-in-out left;

}

.carousel-inner > .item > img, .carousel-inner > .item > a > img { 

 display: block;
 line-height: 1;

}

.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { 

 display: block;

}

.carousel-inner > .active { 

 left: 0;

}

.carousel-inner > .next, .carousel-inner > .prev { 

 position: absolute;
 top: 0;
 width: 100%;

}

.carousel-inner > .next { 

 left: 100%;

}

.carousel-inner > .prev { 

 left: -100%;

}

.carousel-inner > .next.left, .carousel-inner > .prev.right { 

 left: 0;

}

.carousel-inner > .active.left { 

 left: -100%;

}

.carousel-inner > .active.right { 

 left: 100%;

}

.carousel-control { 

 position: absolute;
 top: 40%;
 left: 15px;
 width: 40px;
 height: 40px;
 margin-top: -20px;
 font-size: 60px;
 font-weight: 100;
 line-height: 30px;
 color: #ffffff;
 text-align: center;
 background: #222222;
 border: 3px solid #ffffff;
 -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
         border-radius: 23px;
 opacity: 0.5;
 filter: alpha(opacity=50);

}

.carousel-control.right { 

 right: 15px;
 left: auto;

}

.carousel-control:hover, .carousel-control:focus { 

 color: #ffffff;
 text-decoration: none;
 opacity: 0.9;
 filter: alpha(opacity=90);

}

.carousel-indicators { 

 position: absolute;
 top: 15px;
 right: 15px;
 z-index: 5;
 margin: 0;
 list-style: none;

}

.carousel-indicators li { 

 display: block;
 float: left;
 width: 10px;
 height: 10px;
 margin-left: 5px;
 text-indent: -999px;
 background-color: #ccc;
 background-color: rgba(255, 255, 255, 0.25);
 border-radius: 5px;

}

.carousel-indicators .active { 

 background-color: #fff;

}

.carousel-caption { 

 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
 padding: 15px;
 background: #333333;
 background: rgba(0, 0, 0, 0.75);

}

.carousel-caption h4, .carousel-caption p { 

 line-height: 20px;
 color: #ffffff;

}

.carousel-caption h4 { 

 margin: 0 0 5px;

}

.carousel-caption p { 

 margin-bottom: 0;

}

  1. story { 
   background: url('https://static.igem.org/mediawiki/2013/0/05/BIT-China-bt-Blackbar.png');

}

  1. display-img-idea { 
   visibility: hidden;
   display: none;

}

  1. display-img-idea img{ 
   margin-left: 20px;
   margin-right: 10px;
   width: 38%;
   height: 45%;
   background-size: 100% 100%;
   float: left;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. display-img-idea p{ 
   white-space: pre-wrap;
   font-size: 25px;
   font-family: 'Capriola', sans-serif;
   letter-spacing: 0.5px;
   color: white;
   line-height: 36px;

}

  1. display-img-advantage { 
   display: none;
   visibility: hidden;

}

  1. display-img-advantage img{ 
   margin-left: 20px;
   width: 38%;
   height: 45%;
   background-size: 100% 100%;
   float: left;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. display-img-advantage p{ 
   white-space: pre-wrap;
   font-size: 28px;
   font-family: 'Capriola', sans-serif;
   letter-spacing: 0.5px;
   color: white;
   line-height: 36px;

}

  1. display-img-description img{ 
   margin-top: 20px;
   margin-left: 20px;
   width: 38%;
   height: 45%;
   background-size: 100% 100%;
   float: left;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
   margin-right: 10px;
   margin-bottom: 20px;

}

  1. display-img-description {

}

  1. display-img-description p{ 
   white-space: pre-wrap;
   font-size: 30px;
   font-family: 'Capriola', sans-serif;
   letter-spacing: 0.5px;
   color: white;
   line-height: 42px;

}


  1. display-img-charactors { 
   display: none;
   visibility: hidden;

}

  1. display-img-charactors img{ 
   margin-left: 20px;
   height: 130px;
   background-size: 100% 100%;
   float: left;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. display-img-charactors p{ 
   white-space: pre-wrap;
   font-size: 20px;
   font-family: 'Capriola', sans-serif;
   letter-spacing: 0.5px;
   color: white;
   line-height: 30px;

}

  1. display-img-charactors #teamphoto { 
   background: url(BIT-China-bt3730.png);
   width: 250px;
   height: 700px;
   background-size: 100%;
   margin-top: -80px;
   position: relative;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. display-img-extend{ 
   display: none;
   visibility: hidden;

}

  1. display-img-extend img{ 
   margin-left: 20px;
   width: 55%;
   height: 45%;
   background-size: 100% 100%;
   float: left;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

}

  1. display-img-extend p{ 
   white-space: pre-wrap;
   font-size: 20px;
   font-family: 'Capriola', sans-serif;
   letter-spacing: 0.5px;
   color: white;
   line-height: 30px;

} .info-sch{ 

   opacity: 0.6;
   width: 350px;
   height: 430px;
   background-color: black;
   margin-left: -150px;
   margin-top: -460px;
   border-radius: 10px;
   padding: 10px;
   white-space: pre-wrap;

}

  1. point .info-sch { 
   white-space: pre-wrap;
   font-size: 23px;
   font-family: 'Capriola', sans-serif;
   letter-spacing: 0.5px;
   color: white;
   line-height: 32px;

}

Retrieved from "http://2013.igem.org/Team:BIT-China/css/homepage2013.min.css"