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

From 2013.igem.org

(Difference between revisions)
 
(15 intermediate revisions not shown)
Line 14: Line 14:
     position: relative;
     position: relative;
     /*text-align: center;*/
     /*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 {
#story1_sun {
-
     background: url(../img/homepage/sun1.png);
+
     background: url('https://static.igem.org/mediawiki/2013/3/39/BIT-China-bt-Sun1.png');
     background-size: 100%;
     background-size: 100%;
     margin-top: -800px;
     margin-top: -800px;
Line 28: Line 68:
#story2_sun {
#story2_sun {
-
     background: url(../img/homepage/sun2.png);
+
     background: url('https://static.igem.org/mediawiki/2013/f/f2/BIT-China-bt-Sun2.png');
     background-size: 100%;
     background-size: 100%;
     margin-top: -800px;
     margin-top: -800px;
Line 39: Line 79:
#story4_sun {
#story4_sun {
-
     background: url(../img/homepage/sun3.png);
+
     background: url('https://static.igem.org/mediawiki/2013/8/81/BIT-China-bt-Sun3.png');
     background-size: 100%;
     background-size: 100%;
     margin-top: -800px;
     margin-top: -800px;
Line 50: Line 90:
#story1_gem {
#story1_gem {
-
     background: url(../img/homepage/storygem1.png);
+
     background: url('https://static.igem.org/mediawiki/2013/f/fc/BIT-China-bt-Storygem1.png');
     background-size: 100%;
     background-size: 100%;
     z-index: -1;
     z-index: -1;
Line 65: Line 105:
#story2_gem {
#story2_gem {
-
     background: url(../img/homepage/storygem2.png);
+
     background: url('https://static.igem.org/mediawiki/2013/9/98/BIT-China-bt-Storygem2.png');
     background-size: 100%;
     background-size: 100%;
     z-index: -1;
     z-index: -1;
Line 80: Line 120:
#story4_gem {
#story4_gem {
-
     background: url(../img/homepage/storygem3.png);
+
     background: url('https://static.igem.org/mediawiki/2013/e/e5/BIT-China-bt-Storygem3.png');
     background-size: 100%;
     background-size: 100%;
     z-index: -1;
     z-index: -1;
Line 95: Line 135:
#story1_tem {
#story1_tem {
-
     background: url(../img/homepage/tem.png);
+
     background: url('https://static.igem.org/mediawiki/2013/8/8d/BIT-China-bt-Tem.png');
     background-size: 100%;
     background-size: 100%;
     z-index: -1;
     z-index: -1;
Line 114: Line 154:
#pointer {
#pointer {
-
     background: url(../img/homepage/hand.png);
+
     background: url('https://static.igem.org/mediawiki/2013/b/b1/BIT-China-bt-Hand.png');
     background-size: 100%;
     background-size: 100%;
     bottom: 20px;
     bottom: 20px;
Line 134: Line 174:
     top: 50%;
     top: 50%;
     z-index: 0;
     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;
}
}
Line 157: Line 202:
#advantage {
#advantage {
-
     background: url(../img/homepage/icon2.png);
+
     background: url('https://static.igem.org/mediawiki/2013/f/f2/BIT-China-bt-Icon2.png');
     border-radius: 10px;
     border-radius: 10px;
     float: left;
     float: left;
Line 177: Line 222:
#description {
#description {
-
     background: url(../img/homepage/icon3.png);
+
     background: url('https://static.igem.org/mediawiki/2013/7/75/BIT-China-bt-Icon3.png');
     background-color: rgba(234, 58, 58, 0.85098);
     background-color: rgba(234, 58, 58, 0.85098);
     border-radius: 10px;
     border-radius: 10px;
Line 198: Line 243:
#charactors {
#charactors {
-
     background: url(../img/homepage/icon4.png);
+
     background: url('https://static.igem.org/mediawiki/2013/6/61/BIT-China-bt-Icon4.png');
     border-radius: 10px;
     border-radius: 10px;
     float: left;
     float: left;
Line 218: Line 263:
#extend {
#extend {
-
     background: url(../img/homepage/icon5.png);
+
     background: url('https://static.igem.org/mediawiki/2013/f/ff/BIT-China0Icon5.png');
     border-radius: 10px;
     border-radius: 10px;
     float: left;
     float: left;
Line 239: Line 284:
#cover {
#cover {
-
     background: url('../img/homepage/cover.png');
+
     background: url('https://static.igem.org/mediawiki/2013/d/dd/BIT-China-Cover.png');
     background-color: rgb(234, 58, 58);
     background-color: rgb(234, 58, 58);
 +
    background-size: 100%;
     height: 100%;
     height: 100%;
     padding: 0px !important;
     padding: 0px !important;
Line 261: Line 307:
     display: block;
     display: block;
     position: absolute;
     position: absolute;
-
     background: url(../img/homepage/TV.png);
+
     background: url('https://static.igem.org/mediawiki/2013/3/3f/BIT-China-bt-TV.png');
     top: 100px;
     top: 100px;
     left: 100px;
     left: 100px;
Line 279: Line 325:
     width: 721px;
     width: 721px;
     z-index: 8;
     z-index: 8;
-
     -webkit-transition: all .5s;
+
     -webkit-transition: all .7s ease-in-out;
-
     -moz-transition: all .5s;
+
     -moz-transition: all .7s ease-in-out;
-
     -ms-transition: all .5s;
+
     -ms-transition: all .7s ease-in-out;
-
     -o-transition: all .5s;
+
     -o-transition: all .7s ease-in-out;
-
     transition: all .5s;
+
     transition: all .7s ease-in-out;
}
}
Line 297: Line 343:
     width: 927px;
     width: 927px;
     z-index: 0;
     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;
}
}
Line 310: Line 361:
.home .top-section {
.home .top-section {
-
     background: url(../img/homepage/cover.png) #bc4227;
+
     background: url('https://static.igem.org/mediawiki/2013/d/dd/BIT-China-Cover.png') #bc4227;
     background-size: 100% 100%;
     background-size: 100% 100%;
     width: 100%;
     width: 100%;
Line 1,098: Line 1,149:
.parallax {
.parallax {
-
     background: transparent url('../img/homepage/city.png') repeat-x 0px bottom;
+
     background: transparent url('https://static.igem.org/mediawiki/2013/0/05/BIT-China-bt-City.png') repeat-x 0px bottom;
     background-size: 1500px;
     background-size: 1500px;
     bottom: 80px;
     bottom: 80px;
Line 1,108: Line 1,159:
.parallax2 {
.parallax2 {
-
     background: transparent url('../img/homepage/city2.png') repeat-x 0px bottom;
+
     background: transparent url('https://static.igem.org/mediawiki/2013/e/e6/BIT-China-bt-City2.png') repeat-x 0px bottom;
     background-size: 1500px;
     background-size: 1500px;
     bottom: 80px;
     bottom: 80px;
Line 1,159: Line 1,210:
#taxi div {
#taxi div {
-
     background: transparent url('../img/homepage/contact3.png') no-repeat;
+
     background: transparent url('https://static.igem.org/mediawiki/2013/4/44/BIT-China-bt-Contact3.png') no-repeat;
     height: 180px;
     height: 180px;
     overflow: hidden;
     overflow: hidden;
Line 1,395: Line 1,446:
#story {
#story {
-
     background: url(../img/homepage/blackbar.png);
+
     background: url('https://static.igem.org/mediawiki/2013/0/05/BIT-China-bt-Blackbar.png');
}
}
Line 1,502: Line 1,553:
}
}
-
 
+
#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-img-extend{
Line 1,510: Line 1,573:
#display-img-extend img{
#display-img-extend img{
     margin-left: 20px;
     margin-left: 20px;
-
     width: 38%;
+
     width: 55%;
     height: 45%;
     height: 45%;
     background-size: 100% 100%;
     background-size: 100% 100%;

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;

}