body { padding-top: 0px; background-image: url(https://static.igem.wiki/teams/4362/wiki/bg-part3.png);}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #0A1B2D !important; }
.bg-hero { 
   background-image: url(https://static.igem.wiki/teams/4362/wiki/test/title-figure-7.svg);
   background-size:cover ;
   text-align: center;
   height: 800px;
    }
    .mt-5{margin-top:-2rem!important}

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

.main-title{
    color:#ffffff;
    text-shadow: -3px -3px 3px black, 0 0 5px #ebebff, 0 0 10px #e7d8f4;
   font-weight:800;
font-size: 8vw;
font-family: Comic Sans MS;
margin-top: 0%;
    /* <text text-anchor="middle" x="75" y="12" font-size="9" fill="url(#gradient)" fill-opacity="0.1">Inspiration</text> */
}

 

.picture {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    box-shadow:1px 1px 5px 2px #cccccc;
}
.ppicture1 {
    display: block;
    margin: 0 auto;
    height: 40px;
}


.pppicture1 {
    display: block;
    height: 50px;
}

.Figureexplain {
    font-size: 85%;
    text-align: center;
}

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

/*其余页面布局*/
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 左列 */
.leftcolumn {   
  float: left;
  width: 23%;
  /*background-color: #f1f1f1; */
  padding-left: 20px;
  border-radius: 8px;
}

ul.leftco li ul {
   list-style-type: none;
   margin:auto;
    margin-top: 0px;
    padding: 10px;
    width: 100%;
    background-color: #77aaf0;
	  border:2px;
	  border-radius: 8px;
    position: sticky;
    top: 20px;
    font-weight: 500;
    font-size: small;
}

ul.leftco{
	list-style-type: none;
  margin:auto;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 10px;
    width: 80%;
    background-color: #77aaf0;
	border:2px;
	border-radius: 8px;
	position: -webkit-sticky;
    position: sticky;
    top: 10%;
    font-weight: 700;
    font-size: medium;
}
li.leftco a {
  display: block;
  color: rgb(253, 251, 253);
  padding: 5px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li.leftco a:hover {
  background-color: rgb(177, 196, 247);
  color: white;
}

/* 右列 */
.rightcolumn {
  position: relative;
  float: left;
  width: 75%;
  
}
/* 卡片 */
.card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width:100%;
  margin: 30px 20px 10px 10px;
  display : inline-block;
  text-align: justify;
  border-style: inset;
}

.card1 {
  padding: 20px;
  border-radius: 8px;
  width:100%;
  margin: 30px 20px 10px 10px;
  display : inline-block;
  text-align: justify;

}
.card2 {
  padding: 20px;
  border-radius: 8px;
  width:100%;
  margin: 30px 30px 10px 10px;
  font-size: 2.5em;
  display : inline-block;
  text-align: justify;

}

.special-h4{
  line-height: 1.0;
  text-align: center;
  font-family: fontTitle;
  font-weight: bold;
  font-size: 2.0em;
  color:rgb(14, 65, 169);
}

.special-h2{
  line-height: 1.2;
  text-align: center;
  font-family: fontTitle;
  font-weight: bold;
  font-size: 3.0em;
  color:rgb(14, 65, 169);
}

.special-h5{
  line-height: 1.1;
  text-align: left;
  font-family: fontTitle;
  font-weight: bold;
  font-size: 1.5em;
  color: #2e88e1;
}

.subtitle{
  text-align : center;
  color:rgb(14, 65, 169) ;
}

.card-content{
  margin:3% 7%;
}

/*References内容*/
.References-content
{ font-family: " Times New Roman", Times, serif;
    font-size: 16px !important; 
    color:#6c757d;
    font-weight:100;
}
.References
{
  font-family: "Times New Roman", Times, serif;
    color:#5d6368;
    font-weight:bold;
    text-align: left;
} 


/* 首页头部 */
.header {
  padding-top: 0px;
  height: 400px;
  width: 100%;
}

/*
h2.header {
  padding-top: 100px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  padding-left: 40px;
}
*/

/* 进度条 */
#scroll-wrapper{
  width: 7px;
  height: 40%;
  position: fixed;
  left: 20px;
  top: 30%;
  border-radius: 10px;
}
 #sidebar-wrapper {
  width: 7px;
  height: 40%;
  background-color: #e2b6f3e7;
  opacity: 0.2;
  position: fixed;
  left: 20px;
  top: 30%;
  border-radius: 10px;
  }
 #scrollbar-container {
 width: 7px;
 height: 0%;
 left: 20px;
 top: 30%;
 background-color: rgb(177, 196, 247);
 }

 /* loading 
 :root {
  --background-color: #2c3e50;
  --border-color: #7591AD;
  --text-color: #34495e;
  --color1: #EC3E27;
  --color2: #fd79a8;
  --color3: #0984e3;
  --color4: #00b894;
  --color5: #fdcb6e;
  --color6: #e056fd;
  --color7: #F97F51;
  --color8: #BDC581;
}*/

.loader {
  position: relative;
  width: 100px;
  height: 100px;
  color: #fff;
  border-radius: 50%;
  border-top: 5px solid var(--color2);
  border-bottom: 5px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: animate .05s linear infinite;
  animation-duration:3s;;
}

.loader::after, .loader::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: -5px;
  border-radius: 50%;
  border-bottom: 5px solid transparent;
}

.loader::after {
  border-top: 5px solid var(--color3);
  transform: rotate(120deg);
}

.loader::before {
  border-top: 5px solid var(--color6);
  transform: rotate(-120deg);
}


@keyframes animate {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.loader span{
  animation: animate .5s linear infinite reverse;
  animation-duration:2.5s;
}
 

/* 进度条 */

/* 下面的五彩石 */
/* ul{
			background: #ededed;
			height: 300px;
			width: 640px;
			margin: 0 auto;
		}
		ul li{
			
			background: #fff;
			box-sizing: border-box;
			border: 1px solid #333;
			height: 300px;
			width: 200px;
			float: left;
			margin-right: 20px;
		}
		ul li:last-child{
			margin-right: 0px;
		}
		ul li p{
			text-align: center;

		}
		ul li span{
			display: block;
			font-size: 14px;
			text-align: center;
			color: #e08c35;
			font-weight: bold;
		}
 */