@import url(https://fonts.googleapis.com/css?family=Livvic);



html {
  scroll-behavior: smooth;
}


.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px
}



.content {
  font-family: "Livvic";
  flex: 0 0 80%;
  max-width: 80%
}

@media only screen and (max-width: 600px) {
  .content {
      flex: 0 0 100%;
      max-width: 100%;
  }
}

.content article {
  padding: calc(1rem + 1.2vw);
  background-color: #EBF5FE;
  transition: background-color .3s ease
}

.content h1,.content h2,.content h3 {
  font-family: "Livvic";
}

.content h1 {
  font-weight: 400;
  font-size: 2.65rem;
  margin: 1.5rem 0 .5rem 0;
  word-spacing: .3rem
}

.content h1:first-of-type {
  margin-top: 0
}

.content h1 button {
  font-weight: 400;
  margin-right: 25px
}

.content h1,.content h2 {
  scroll-margin-top: 140px
}

.content h1 .anchor,.content h2 .anchor {
  float: left;
  line-height: 2;
  opacity: .01;
  background-image: url();
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: visible;
  filter: invert(56%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(87%) contrast(84%);
  border: 0px transparent solid;
  transition: all ease .2s
}

.content h1:hover .anchor,.content h2:hover .anchor {
  opacity: 100
}

.content h2 {
  font-size: 2rem;
  word-spacing: .3rem;
  margin-top: 1.5rem
}

.content h3 {
  font-size: 1.5rem;
  word-spacing: .3rem;
  margin-top: 1.5rem
}

.content button.section {
  font-size: 2rem;
  color: #bdbdbd;
  padding: 0
}

.content button.section:focus {
  box-shadow: none
}

.content button.section:hover {
  text-decoration: none;
  color: #828282
}

.content p {
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.75;
  word-spacing: .1rem;
  color: #3d3d3d;
  text-align: left
}

.content p .MathJax_Display {
  overflow: auto;
  overflow-y: hidden
}

.content p span {
  scroll-margin-top: 200px
}

.content p span:target {
  animation: target-fade 3s 1
}

.content ol {
  padding-left: 3em;
}

.content ul {
  padding-left: 3em;
}

.content li {
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 2x;
  word-spacing: .1rem;
  color: #3d3d3d
}

.content mark {
  background: rgba(255,233,0,.4)
}

.content .image {
  text-align: center
}

.content .image img {
  margin: 20px;
  width: 90%
}

.content .image p {
  text-align: center;
  font-style: italic;
  color: #3d3d3d
}

.content blockquote {
  font-size: 1.4em;
  width: 60%;
  margin: 50px auto;
  font-style: italic;
  color: #555;
  padding: 1.2em 30px .7em 75px;
  line-height: 1.6;
  position: relative
}

.content blockquote::before {
  font-family: "Livvic";
  content: "“";
  font-size: 6rem;
  position: absolute;
  left: 10px;
  top: -10px
}

.content blockquote::after {
  content: ""
}

.content blockquote strong {
  display: block;
  color: #333;
  font-style: normal;
  font-weight: bold;
  margin-top: 1em
}

.content table {
  border: 1px solid #dee2e6;
  width: 100%;
  margin: 1.5rem 0 1rem 0;
  color: #212529;
  border-collapse: collapse
}

.content table thead th,.content table thead td {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6
}

.content table tbody th,.content table tbody td {
  border: 1px solid #dee2e6
}

.content table tbody tr:nth-of-type(odd) {
  background-color: rgba(0,0,0,.05)
}

.content table th,.content table td {
  padding: .75rem;
  vertical-align: center;
  border: 1px solid #dee2e6
}

.content table a:hover {
  text-decoration: underline
}

.content table caption {
  text-align: center;
  font-style: italic;
  margin-top: 15px;
  font-family: "Livvic";
  padding-top: .75rem;
  padding-bottom: .75rem;
  color: #6c757d;
  caption-side: bottom
}

.content span.in-text:hover {
  cursor: pointer
}

.content a.citation {
  color: #8e8e8e;
  scroll-margin-top: 200px
}

.content a.citation:target {
  animation: target-fade 3s 1
}

.content dfn {
  border-bottom: 1px solid #000
}

.content .table-wrapper {
  overflow: auto
}



.sidebar {
  padding: 10px 50px 0 0px;
  flex: 0 0 20%;
  max-width: 20%;
  background-color: #1ba6a6;

}

.sidebar #contents,.sidebar #months {
  position: sticky;
  top: 150px;
  font-size: 1.05rem;
  font-family: "Livvic";
  color: white;
  font-weight: 500,bold;
  height: auto;
  transition: none
}

.sidebar #contents li,.sidebar #months li {
  margin: 10px 0;
  justify-content: left;
  list-style: none;
  display: flex;
  padding-left: 2em;
}


.sidebar #contents li span,.sidebar #months li span {
  padding-top: 2px;
}

.sidebar #contents li span div,.sidebar #months li span div {
  background: no-repeat url(https://static.igem.wiki/teams/4438/wiki/removal-ai-tmp-634186ec00b2f.png);
  width: 1.4rem;
  height: 1.4rem;
  background-size: contain;
  margin: auto;
}

.sidebar #contents li a,.sidebar #months li a {
  margin-left: 10px;
  position: relative;
  text-decoration: none;
  padding-bottom: 6px;
  color: white;
  font-weight: 500,bold;
}

/

.sidebar #contents li a:before,.sidebar #months li a:before {
  opacity: 0;
  transform: translateY(-8px);
  transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity 0s
}

.sidebar #contents li a:after,.sidebar #months li a:after {
  opacity: 0;
  transform: translateY(4px);
  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,.sidebar #contents li a.active:before,.sidebar #contents li a.active:after,.sidebar #months li a:hover:before,.sidebar #months li a:hover:after,.sidebar #months li a:focus:before,.sidebar #months li a:focus:after,.sidebar #months li a.active:before,.sidebar #months li a.active:after {
  opacity: 1;
  transform: translateY(0)
}

.sidebar #contents li a:hover:before,.sidebar #contents li a:focus:before,.sidebar #contents li a.active:before,.sidebar #months li a:hover:before,.sidebar #months li a:focus:before,.sidebar #months li a.active: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,.sidebar #contents li a.active:after,.sidebar #months li a:hover:after,.sidebar #months li a:focus:after,.sidebar #months li a.active:after {
  transition: transform 0s .2s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity 0s .2s
}

@keyframes target-fade {
  0% {
      background-color: rgba(255,255,0,.2)
  }

  100% {
      background-color: rgba(0,0,0,0)
  }
}