body { padding: 80px 0 0 0; margin: 0px; font-family:  "Microsoft YaHei", "Arial", Gadget, sans-serif;}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #7b2825 !important; }
.bg-hero { background-color: #182632; height: 800px; }

/* 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 }

/* anchor top offset */
[id]::before {
  content: '';
  display: block;
  height:      90px;
  margin-top: -90px;
  visibility: hidden;
}

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

.navbar{
  padding-top: 20px;
  padding-bottom: 20px;
}

.dropdown-menu{
  background-color: #e8ecd7;
}

.dropdown-item:hover{
  background-color: transparent;
  font-size: 17px;
  font-weight: 500;
}

.home-card {
  padding-top:20vh;
  padding-bottom:20vh;
  border-radius:0;
  margin:0;
  background-color:#182632;
  position:relative
 }
 .home-card p {
  font-size: 1.5rem;
  text-align: justify;
}



.main{position:relative;margin:0 auto;overflow:hidden;padding: 100px 80px;background-color: #7b5325;}
.sidebar{float:left;width:25%;}
/* .sidebar li{margin-bottom:1px;padding:20px;line-height:50px;font-size:18px;background:#f0f0f0;cursor:pointer;transition:all .5s;}
.siderBar li.cur{color:#fff;background:#000;} */
.content{float:right;width:70%;background-color: #ecefde;border-radius: 5px;padding: 20px;}
.content .item{padding:300px 0;font-size:50px;color:#fff;text-align:center;overflow:hidden;}
.content h3{
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.banner-title{
  text-shadow: 5px 5px 10px #f02020;
  font-size: 7rem;
}

.banner1{
  background-image: url(https://static.igem.wiki/teams/4183/wiki/background-image/background-image-1.jpeg);
  background-position: center;
  background-size: 100%;
}
.banner2{
  background-image: url(https://static.igem.wiki/teams/4183/wiki/background-image/backrgound-image-2.jpeg);
  background-position: center;
  background-size: 100%;
}
.banner3{
  background-image: url(https://static.igem.wiki/teams/4183/wiki/background-image/background-image-3.jpeg);
  background-position: center;
  background-size: 100%;
}
.banner4{
  background-image: url(https://static.igem.wiki/teams/4183/wiki/background-image/background-image-4.jpeg);
  background-position: center;
  background-size: 100%;
}
.banner5{
  background-image: url(https://static.igem.wiki/teams/4183/wiki/background-image/background-image-5.jpeg);
  background-position: center;
  background-size: 100%;
}

.text-banner1{
  color: #2c3e50;
}

/* .sidebar {
  margin-top:1rem;
  padding:2rem 5rem 0 1rem;
  left:-100px
 } */
 .sidebar h5 {
  color:#E8ECD7;
  font-weight:700;
  font-size:1rem;
  text-transform:uppercase
 }
 .sidebar #contents::-webkit-scrollbar {
  width:0 !important
 }
 .sidebar #contents {
  position:sticky;
  /* top:150px; */
  font-size:1.2rem;
  font-weight:500;
  /* height:80vh; */
  /* width:20vw; */
  -ms-overflow-style:none;
  scrollbar-width:none;
  overflow-y:scroll;
  overflow-x:hidden;
  transition:none
 }
 .sidebar #contents ul {
  padding-left: 0px;
 }
 .sidebar #contents li {
  margin:15px 0;
  justify-content:left;
  list-style:none;
  display:flex
 }
 .sidebar #contents li svg {
  color: #e8ecd7;
  margin-top:15px;
  height:12px
 }
 .sidebar #contents li a {
  cursor: pointer;
  font-size:1.1rem;
  position:relative;
  text-decoration:none;
  padding-bottom:6px;
  overflow-wrap:break-word;
  transition:color 0.5s;
  color:#E8ECD7;
  transition:font-size 0.3s, color 0.3s, font-weight 0.3s !important
 }
 .sidebar #contents li a:before,
 .sidebar #contents li a:after {
  content:"";
  position:absolute;
  bottom:6px;
  left:0;
  right:0;
  height:2px;
  background-color:#18bc9c
 }
 .sidebar #contents li a:before {
  opacity:0;
  transform:translateY(-6px);
  transition:transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity 0s
 }
 .sidebar #contents li a:after {
  opacity:0;
  transform:translateY(3px);
  transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .2s;
  width:100%
 }
 .sidebar #contents li a:hover:before,
 .sidebar #contents li a:hover:after,
 .sidebar #contents li a:focus:before,
 .sidebar #contents li a:focus:after {
  opacity:1;
  transform:translateY(0)
 }
 .sidebar #contents li a:hover:before,
 .sidebar #contents li a:focus:before {
  transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity .2s
 }
 .sidebar #contents li a:hover:after,
 .sidebar #contents li a:focus:after {
  transition:transform 0s .2s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity 0s .2s
 }
 .sidebar .active a{
  color:#34E08F !important;
  font-size:20px !important;
  transition:font-size 0.3s, color 0.3s, font-weight 0.3s !important
 }


 .mentor {
  background-color:#E8ECD7;
  border-radius:30px;
  margin-bottom:30px;
  padding:10px 15px 30px 15px;
  min-height:500px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
 }
.mentor h4,
.mentor h5 {
  color:#182632
 }
.mentor .institution {
  font-size:18px
 }
.mentor .card-body {
  padding:0
 }
.mentor-top {
  position:relative;
  display:flex;
  align-items:center;
  padding:20px
 }
.mentor-top img {
  margin:0;
  width:50%;
  /* border-radius:50%; */
  object-fit:contain;
 }
.mentor-description {
  margin:0 10px 0 10px;
  font-size:medium
 }
.mentor-description h4,
.mentor-description h5 {
  margin:0px;
  padding:0px
 }
.mentor-description h4 {
  font-weight:bold;
  font-size:large
 }
.mentor-description h5 {
  font-size:small
 }
.mentor-description img {
  height:100%
 }

.attributor {
  background-color: #E8ECD7;
  color: #182632;
  padding: 20px;
  margin-left: 5px;
  border-radius: 10px;
  margin-bottom: 50px;
  position: relative;
  display: flex;
}
.attributor .person {
  margin-right: 1.5rem;
  width: 30%;
}
.attributor .attribution {
  max-width: 70%;
  /* padding-top: 35px; */
  text-align: justify;
}

.break-all{
  word-break:break-all;
}