/*all page*/
body { padding-top: 50px;background-color:#28344d;}
    h1{text-align:center;color: #fff; font-size: 1em; font-weight: bold;}
    h2{color: white;text-align:center;}
    h3{color: white;text-align:center;}
    h4{color: white;text-align:center;}
    h5{color: white;text-align:center;Font-weight:bold;}
    hr{color: rgb(156, 194, 224);width: auto;}
    li{color: rgb(255, 255, 255);text-align:justify;}
    td{color: white;}
    th{color: white;}
    p { color: white; text-align: justify;text-indent: 3em;}
.row mb-4{    
    align-items: center;
    display: table-cell; /*主要是这个属性*/
    vertical-align: middle;
    text-align: center!important;    
}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #28344d !important; }
.bg-hero { background-color: #28344d;}
  
/*index*/
.box{
  width:100%;
  height:auto; 
  margin:auto; 
}                  
/*team*/
.box3{    
    width: 100%;
    height: 500px;
    background-image: url("https://static.igem.wiki/teams/4226/wiki/wiki-de/000004.gif");
    background-size:500px 500px ;
    background-repeat:no-repeat;
    background-position:center center;}
.boximg1{
    width: 200;
    height: 200px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/photo/640-2.jpeg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:200px 200px ;}
.boximg2{
    width: 200;
    height: 200px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/photo/640-3.jpeg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:200px 200px ;
}
.boximg3{
    width: 200;
    height: 200px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/photo/tehu.jpeg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:200px 200px ;
}
.boximg4{
    width: 200;
    height: 200px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/photo/640-5.jpeg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:200px 200px ;
}
.boximg5{
    width: 200;
    height: 200px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/photo/640-11.jpeg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:200px 200px ;
}
.boximg6{
    width: 200;
    height: 200px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/photo/tezishen.jpeg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:200px 200px ;
}
.boximg7{
    width: 200;
    height: 200px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/photo/640-12.png");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:200px 200px ;
}
.boximg8{
    width: 200;
    height: 200px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/photo/640-7.jpeg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:200px 200px ;
}
.boximg9{
    width: 200;
    height: 200px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/photo/640-8.jpeg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:200px 200px ;
}
.boximg10{
    width: 200;
    height: 200px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/photo/640-9.jpeg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:200px 200px ;
}
/*attributions*/
.att-1{    
    width: 100%;
    height: 360px;
    background-image: url("https://static.igem.wiki/teams/4226/wiki/wiki-de/000011.gif");
    background-size:640px 360px ;
    background-repeat:no-repeat;
    background-position:center center;}
/*description*/
.des1{ width: 100%; height:600px;background-image: url("https://static.igem.wiki/teams/4226/wiki/3.gif");
        background-size:800px 800px ;background-repeat:no-repeat;background-position:bottom center;}

/*engineering*/
.box5{    
    width: 100%;
    height: 500px;
    background-image: url("https://static.igem.wiki/teams/4226/wiki/wiki-de/giphy-1.gif");/*开关*/
    background-size:480px 270px ;
    background-repeat:no-repeat;
    background-position:center;
}

    
/* CALLOUT */
.bd-callout {
     /*padding:1.25rem; */
     margin-top:1.25rem; 
     margin-bottom:1.25rem; 
     border:1px solid #e9ecef; 
     }

.bd-callout p:last-child {color: white; margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#cbeef8 }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */

footer {
/*background-image: url("https://static.igem.wiki/teams/4226/wiki/wiki-de/giphy-2.gif");*/
background-repeat:no-repeat;
background-position:bottom;
}
.footerimg1{
    width: 40;
    height: 40px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/facebook.png");
    background-repeat:no-repeat;
    background-position:top center;
    background-size:40px 40px ;
}
.footerimg2{
    width: 40;
    height: 40px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/ins.png");
    background-repeat:no-repeat;
    background-position:top center;
    background-size:40px 40px ;
}
.footerimg3{
    width: 40;
    height: 40px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/weixin.png");
    background-repeat:no-repeat;
    background-position:top center;
    background-size:40px 40px ;
}
.footerimg4{
    width: 40;
    height: 40px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/twitter.png");
    background-repeat:no-repeat;
    background-position:top center;
    background-size:40px 40px ;
}
.footerimg5{
    width: 40;
    height: 40px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/youxiang-2.png");
    background-repeat:no-repeat;
    background-position:top center;
    background-size:40px 40px ;
}
.footerimg6{
    width: 40;
    height: 40px;
    background-image:url("https://static.igem.wiki/teams/4226/wiki/weizhi.png");
    background-repeat:no-repeat;
    background-position:top center;
    background-size:40px 40px ;
}
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }


    h1 span{
        display: inline-block;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 500;
          perspective: 500;
  -webkit-font-smoothing: antialiased;
    }
h1 span::before,
h1 span::after {
  display: none;
  position: absolute;
  top: 0;
  left: -1px;
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: all ease-out 0.3s;
          transition: all ease-out 0.3s;
  content: attr(data-text);
}
h1 span::before {
  z-index: 1;
  color: rgba(0,0,0,0.2);
  -webkit-transform: scale(1.1, 1) skew(0deg, 20deg);
      -ms-transform: scale(1.1, 1) skew(0deg, 20deg);
          transform: scale(1.1, 1) skew(0deg, 20deg);
}
h1 span::after {
  z-index: 2;
  color: #28344d;
  text-shadow: -1px 0 1px #28344d, 1px 0 1px rgba(0,0,0,0.8);
  -webkit-transform: rotateY(-40deg);
          transform: rotateY(-40deg);
}
h1 span:hover::before {
  -webkit-transform: scale(1.1, 1) skew(0deg, 5deg);
      -ms-transform: scale(1.1, 1) skew(0deg, 5deg);
          transform: scale(1.1, 1) skew(0deg, 5deg);
}
h1 span:hover::after {
  -webkit-transform: rotateY(-10deg);
          transform: rotateY(-10deg);
}
h1 span + span {
  margin-left: 0.1em;
}
@media (min-width: 20em) {
  h1 {
    font-size: 2em;
  }
  h1 span::before,
  h1 span::after {
    display: block;
  }
}
@media (min-width: 30em) {
  h1 {
    font-size: 3em;
  }
}
@media (min-width: 40em) {
  h1 {
    font-size: 5em;
  }
}
@media (min-width: 60em) {
  h1 {
    font-size: 8em;
  }
}

/* _timeline.css */
.timeline {
  position: relative;
  margin: 30px auto;
  padding: 60px 0;

}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 4px;
  height: 100%;
  background-color: #8d94b1;
}
@media (min-width: 800px){
  .timeline::before{
    left: 50%;
    margin-left: -2px;
  }
}
.timeline__item {
  margin-bottom: 100px;
  position: relative;
}
.timeline__item::after{
  content: "";
  clear: both;
  display: table;
}
.timeline__item:nth-child(2n) .timeline__item__content {
  float: right;
}
.timeline__item:nth-child(2n) .timeline__item__content::before {
  content: '';
  right: 40%;
}
@media (min-width: 800px){
  .timeline__item:nth-child(2n) .timeline__item__content::before{
    left: inherit;
  }
}
.timeline__item:nth-child(2n) .timeline__item__content__date {
  background-color: #b292c5;
}
.timeline__item:nth-child(2n) .timeline__item__content__description {
  color: #b292c5;
}
.timeline__item:last-child {
  margin-bottom: 0;
}
.timeline__item-bg {
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
  color: #fff;
}
.timeline__item-bg:nth-child(2n) .timeline__item__station {
  background-color: #7646b5;
}
.timeline__item-bg:nth-child(2n) .timeline__item__content {
  background-color: #7646b5;
}
.timeline__item-bg:nth-child(2n) .timeline__item__content::before {
  background-color: #b292c5;
}
.timeline__item-bg:nth-child(2n) .timeline__item__content__description {
  color: #fff;
}
.timeline__item-bg .timeline__item__station {
  background-color: #0072e8;
}
.timeline__item-bg .timeline__item__content {
  background-color: #0072e8;
}
.timeline__item-bg .timeline__item__content::before {
  background-color: #65adb7;
}
.timeline__item-bg .timeline__item__content__description {
  color: #fff;
}
.timeline__item__station {
  background-color: #9aa0b9;
  width: 40px;
  height: 40px;
  position: absolute;
  border-radius: 50%;
  padding: 10px;
  top: 0;
  left: 10%;
  margin-left: -33px;
  border: 4px solid #8d94b1;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
@media (min-width: 800px){
  .timeline__item__station{
    left: 50%;
    margin-left: -30px;
    width: 60px;
    height: 60px;
    padding: 15px;
    border-width: 6px;
  }
}
.timeline__item__content {
  width: 80%;
  background: #fff;
  padding: 20px 30px;
  border-radius: 6px;
  float: right;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
@media (min-width: 800px){
  .timeline__item__content{
    width: 40%;
    float: inherit;
    padding: 30px 40px;
  }
}
.timeline__item__content::before {
  content: '';
  position: absolute;
  left: 10%;
  background: #8d94b1;
  top: 20px;
  width: 10%;
  height: 4px;
  z-index: -1;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
@media (min-width: 800px){
  .timeline__item__content::before{
    left: 40%;
    top: 30px;
    height: 4px;
    margin-top: -2px;
  }
}

.timeline__item__content__description {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: #65adb7;
}
@media (min-width: 800px){
  .timeline__item__content__description{
    font-size: 19px;
    line-height: 28px;
  }
}