.small-text {
    font-size: 12px;
  }
  
  .medium-text {
    font-size: 18px;
  }
  
  .large-text {
    font-size: 24px;
  }
  

font-face {
    font-family: 'Montserrat';
    src: url(https://static.igem.wiki/teams/4159/wiki/home-page/fonts/montserrat/montserrat-regular.ttf) format('truetype');
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@supports not (-webkit-touch-callout: none) {
    html {
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

@supports (-webkit-touch-callout: none) {
    html {
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
    }
}


body {
    margin: 0;
    padding-top: 56px;
    padding: 0;
    font-family: Montserrat;
}


/*TIMELINE*/
* {
    box-sizing: border-box;
}


* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("https://static.igem.wiki/teams/4214/wiki/source-sans-pro-v21-latin-regular.woff2") format("woff2");
}

body{
    font-family: "Source Sans Pro", "Roboto", Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
    font-size: 112.5%;
     background: rgb(233,73,73);
     background: linear-gradient(90deg, rgba(233,73,73,0.15) 0%, rgba(255,255,255,0) 35%, rgba(42,127,147,0.26) 100%);
     color:#333;
    text-align: justify;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    line-height: 1.6;
    word-spacing: 1.15px;
}


body {
    font-family: arial;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    -webkit-text-size-adjust: 100%;
}


/*button dyslexic*/
.dyslexic {
    background-color: #326789 !important;
    color: white;
 }
 .dyslexic:hover {
    background-color:  #e65c4f !important;
 }



  

.fullpage {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
    font-weight: bolder;
    padding-bottom: 2vh;
}

h3 {
    font-size: 1.5rem;
    font-weight: bold;
    padding-bottom: 2vh;
    padding-top: 2vh;
}

h4 {
    font-size: 1.2rem;
    font-weight: bold;
    padding-bottom: 2vh;
    padding-top: 2vh;
}

p {
    font-size: 16px;
}

@media only screen and (max-width: 350px) {
    p {
        font-size: 14px;
    }
}


a.link {
    transition: 0.3s ease-out;
    color: #1a1a1a;
    box-shadow: inset 0 -0.5em 0 -1px #fce620;
}

a.link:hover {
    color: #1a1a1a;
    text-decoration: none;
    box-shadow: inset 0 -1.2em 0 -1px #fce620;
}

/* Colors */
/* 
    ProjectColor: #525174e1
    LabColor: #41658af1
    EngagementColor: #70a37f
    AboutColor #fabc3c 
*/


.left-aligned {
    margin-left: auto;
}

.bg-dark {
    background-color: #343a40 !important;
}

/* .bg-hero { background-color: #7952b3; } */
.bg-hero {
    background-color: white;
}

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

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

footer a:hover {
    color: white;
    text-decoration: underline;
}

.main-footer {
    background-color: #46658d;
    color: white;
    margin-top: .25em;
    padding: .25em .25em;
    justify-content: space-evenly;
    height: min-content;
    padding-top: 10vh;
}

.main-footer a:hover {
    color: white;
    text-decoration: underline;
}

.main-footer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10em;
    justify-content: space-evenly;
}

.main-footer-container ul {
    flex-grow: 1;
    text-align: center;
}

.main-footer-container h4 {
    text-align: center;
    font-weight: bold;
}

.main-footer-container li {
    display: inline;
    padding: 0 .5em;
}

.main-footer-container li img {
    height: 3em;
    width: 3em;
}

.social-icon:hover {
    transform: scale(1.25);
}


/* navigation */
a {
    text-decoration: none;
}

li {
    list-style: none;
}



.license {
    text-align: center;
    background-color: transparent;
}

.grid-wrapper {
    display: grid;
    height: auto;
    grid-template-rows: min-content auto;
    width: 80vw;
}

.grid-wrapper-home {
    display: grid;
    height: auto;
    grid-template-rows: 1 max(80vh);
    width: 100vw;
}

.team-gallery {
    /* grid-column: 2/3; */
    grid-row: 2/3;
    padding-top: 10vh;
}

.flex-team-leader, .flex-team {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 2em;
    justify-content: center;
}


.content p,
.content ul,
.content ol,
.content section p,
-w-toc p,
.content-w-toc ul,
.content-w-toc ol {
    max-width: 70vw;
    text-align: justify;
}

.content ul li,
.content-w-toc ul li {
    list-style: disc;
    font-size: 16px;
}

.content ol li,
.content-w-toc ol li {
    font-size: 16px;
    padding-top: 1em;
}

.subsection {
    padding-top: 2vh;
}


.flex-content {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: center;
    width: 70vw;
}

figure {
    margin: auto;
}

.fig {
    display: block;
    max-width: 60vw;
    flex-grow: 1;
    margin: auto;
}

figcaption {
    color: black;
    font-style: italic;
    padding: 2px;
    text-align: center;
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.bio {
    position: relative;
}

.bio h4,
h5 {
    text-align: center;
}
.content{
    min-height: 40vh;
}

.image {
    display: inline-block;
    height: 550px;
    margin: 150px;
    flex-grow: 1;
    margin: 0 20px;
    margin-top: 10px;
    margin-bottom: 20px;

    position: relative;
}

/* homepage */
.content_home {
    min-height: 40vh;
}

.background {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto;
    text-align: justify;
    background-color: rgb(253, 218, 182);
}

.background_text {
    padding-top: 20vh;
    padding-left: 10vw;
    margin-right: 2.5vw;
    grid-column: 1 / span 3;
    z-index: 1;
    opacity: 1;
    position: relative;
    font-size: 1.2em;
}

.section h1 {
    padding-bottom: 5vh;
    text-align: left;
}

#background_sccroll {
    position: relative;
}

/*
#background1 {
    position: absolute;
    top: 0%;
    height: 570px;
    width: 400px;
    opacity: 0;
}*/

.overlay {
    display: none;
    position: absolute;
    top: 0%;
    height: 570px;
    width: 400px;
    /* opacity: 0; */
    /* transition: .3s ease; */
    background-color: #41658a;
}

@keyframes bouncein {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.overlay-wetlab {
    background-color: #41658a;
}

.overlay-drylab {
    background-color: #525174;
}

.overlay-mentor {
    background-color: #70a37f;
    width: 460px;
}

.overlay-text {
    width: 300px;
    color: white;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: left;
    text-justify: inter-word;
    display: inline-block;
    overflow-wrap: break-word;
}

.solution {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto;
    height: auto;
    text-align: justify;
    background-image: linear-gradient( rgb(253, 218, 182), white);
}

.solution_text {
    padding-top: 20vh;
    padding-left: 10vw;
    padding-right: 5vw;
    padding-bottom: 10vh;
    grid-column: 1 / span 3;
    font-size: 1.2em;
}

#darpin {
    grid-column: 4 / span 3;
    margin-top: 20vh;
    width: 50vw;
    height: 50vh;
}

.workflow {
    background-color: white;
    display: grid;
    grid-template-columns: 8vw repeat(6, 14vw) 8vw;
    grid-auto-rows: min-content;
    height: auto;
    min-height: 80vh;
    text-align: justify;
    padding-bottom: 10vh;
}

.workflow h1 {
    grid-column: 1 / span 4;
    padding-left: 10vw;
    padding-top: 5vh;
    padding-bottom: 0;
}

.workflow h2 {
    padding: 0.5vw;
    background-color: rgba(255, 255, 255, 0.8);
}

#workflow_desc {
    font-size: 1.2em;
    grid-column: 1 / span 6;
    padding-left: 10vw;
    padding-top: 5vh;
    padding-bottom: 2.5vh;
    grid-row-start: 2;
}

.workflow_header {
    padding-top: 5vh;
    grid-row-start: 3;
    text-align: left;
}

.workflow_text {
    padding-top: 20vh;
    grid-row-start: 4;
    padding-bottom: 5vh;
}

.workflow p {
    padding: 0.5vw;
    background-color: rgba(255, 255, 255, 0.8);
}

.workflow a {
    color: #000;
    padding: 0.5vw;
    background-color: rgba(255, 255, 255, 0.8);
}

.overlay-mentor .overlay-text {
    width: 370px;
}

.overlay-text h6 {
    font-weight: bolder;
}

#design_darpins::before{
    content: "";
    position: absolute;
    background-image: url(https://static.igem.wiki/teams/4833/wiki/case-2.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0px;
    right: 1vw;
    bottom: 0px;
    left: 1vw;
    opacity: 0.8;
}

.bio:hover .overlay,
.bio:hover .overlay-wetlab,
.bio:hover .overlay-drylab,
.bio:active .overlay,
.bio:active .overlay-wetlab,
.bio:active .overlay-drylab {
    z-index: 1;
    display: block;
    animation: bouncein .3s;
    /* opacity: 1; */
}

.link_workflow {
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
    z-index: 2;
}

.workflow2 {
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    grid-column: 4 / span 2;
    position: relative;
}

#modelling::before {
    content: "";
    position: absolute;
    background-color: rgb(0, 0, 0);
    background-image: url(https://static.igem.wiki/teams/4833/wiki/case-2.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0px;
    right: 1vw;
    bottom: 0px;
    left: 1vw;
    opacity: 0.8;
}

/* sponsors section */
.flex-sponsors {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 2em;
    justify-content: space-evenly;
    align-items: center;
}

.sp_logo {
    width: 15vw;
    padding: 2em;
}

.sp_logo:hover {
    transform: scale(1.25);
}

/* general header settings */
.header {
    grid-row: 1/2;
    min-height: 80vh;
    padding-top: 50vh;
}

.header h1 {
    font-size: 5.5rem;
    color: black;
    font-weight: bolder;
}

.header p {
    font-size: 1.2rem;
    font-weight: bold;
    width: 28vw;
    text-align: justify;
    padding-top: 2vh;
}

.lowlight {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 63%, #bfaeff 63%);
    display: inline;
}

.home-header {
    height: 100vh;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: min-content;
    margin: 0;
}

.home-header img {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    grid-column: 1;
    grid-row: 1;
    padding-top: 10vh;
    max-width: 100vw;
    max-height: 80vh;
    z-index: 1;
}

.home-header::before {
    background-image: url();
    background-size: cover;
    position: absolute;
    background-color: rgb(255, 213, 171);
    content: "";
    background-repeat: no-repeat;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    z-index: 1;
}

.home-header h1 {
    grid-column: 1;
    grid-row: 2;
    color: black;
    display: inline;
    z-index: 1;
}

/* 菜单 */
.wide-header {
    grid-row: 1/2;
    min-height: 80vh;
    padding-top: 50vh;
    height: 100vh;
    width: 100vw;
    color: white;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: left;
    align-items: baseline;
    text-align: left;
  }
  

.wide-header h1 {
    display: inline-block;
    color: white;
    font-weight: bolder;
    margin-left: 10vw;
}

.wide-header p {
    color: white;
    text-align: left;
    margin-left: 10vw;
    font-size: 1.5rem;
    font-weight: bold;
    width: 40vw;
    /* text-align: jus  tify; */
    padding-top: 2vh;
}

.grid-wrapper-toc {
    grid-template-columns: 3fr 1fr;
    display: grid;
    height: auto;
    grid-template-rows: auto;
    width: 85vw;
}

.grid-wrapper-toc.left{
    grid-template-columns: 1fr 3fr;
}

.grid-wrapper-toc.left .content-w-toc{
    grid-column: 2/3;
}
.grid-wrapper-toc.left aside{
    grid-column: 1/2;
}

.content-w-toc {
    grid-column: 1/2;
    min-height: 40vh;
    padding-top: 10vh;
}

.project-header{
    background-color: #525174e1;
}

.lab-header {
    background-color: #41658af1;
}

.engagement-header {
    background-color: #70a37f;
}

.t-header {
    background-color: #fabc3c;
}

/* Header */


.team-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/team.jpeg");
    background-position: center;
}

.edu-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/abcd.jpg");
    background-position: center;
}
/* Project header */
.contr-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
}

.res-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
}

.model-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
}

.eng-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
}

.impl-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
}

.description-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/project.jpeg");
    background-position: center;
}

.proof-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/project.jpeg");
    background-position: center;
}

.pc-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
}

/* Lab header */
.engineering-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/lab.jpeg");
    background-position: center;
}

.result-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/lab.jpeg");
    background-position: center;
}

.notebook-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
}

.parts-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
}

.partCol-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
}

.exp-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/lab.jpeg");
    background-position: center;
}

.safety-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/safety.jpeg");
    background-position: center;
}

.protocol-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
}

.model-header{
    background-image: url("https://static.igem.wiki/teams/4833/wiki/lab.jpeg");
    background-position: center;
}


/* Engagement header */
.collab-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
    background-position: center;
}

.hp-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/human.jpeg");
    background-position: center;
}

.com-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
    background-position: center;
}

.human.jpeg {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/education.jpeg");
    background-position: center;
}

.ent-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
    background-position: center;
}

.partnership-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
}

/* About header */
.team-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/team.jpeg");
    background-position: center;
}


.achievement-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/background-1.jpg");
    background-position: center;
}

.attribution-header {
    background-image: url("https://static.igem.wiki/teams/4833/wiki/project.jpeg");
    background-position: center;
}

.p-desc{
    background-color: unset;
    width: fit-content;
    padding: 2em;
    margin-left: 10vw;
    
}

.project-header .p-desc {
    background-color: unset;
}

.engagement-header .p-desc {
    background-color: unset;
}

.t-header .p-desc {
    background-color: unset;
}

.p-desc h1 {
    font-size: 4rem;
    color: #266f9c;
    font-weight: bolder;
    margin-left: 0;
}

.p-desc p {
    color: #266f9c;
    text-align: left;
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 2vh;
    margin-left: 0;
}

.p-desc a{
    color: #266f9c;
    text-decoration: underline;
}

.p-desc a:hover {
    color: #266f9c;
    font-size: 1.6rem;
    font-weight: bolder;
}

.content,
.content section {
    padding-top: 5vh;
    padding-bottom: 10vh;
}

.content p,
.content ul,
.content ol,
.content section p,
.content-w-toc p,
.content-w-toc ul,
.content-w-toc ol {
    max-width: 70vw;
    text-align: justify;
}

.content ul li,
.content-w-toc ul li {
    list-style: disc;
    font-size: 16px;
}

.content ol li,
.content-w-toc ol li {
    font-size: 16px;
    padding-top: 1em;
}

.subsection {
    padding-top: 2vh;
}

.content{
    min-height: 40vh;

}

.section h1 {
    padding-bottom: 5vh;
    text-align: left;
}

#background_sccroll {
    position: relative;
}

#background1 {
    position: absolute;
}

#background2 {
    opacity: 0;
    position: absolute;
}

#background3 {
    opacity: 0;
    position: absolute;
}

#background4 {
    opacity: 0;
    position: absolute;
}

.wound_container {
    display: flex;
    align-items: center;
    position: relative;
    grid-column: 4/span 4;
    overflow: visible;
}

.wound {
    position: absolute;
    width: 50vw;
    transform-origin: 50% 45%;
    opacity: 0.8;
}

.bacteria {
    width: 60vw;
    scale: 0.8;
    opacity: 0.9;
    position: absolute;
 }

#biofilm {
    width: 60vw;
    scale: 0.8;
    opacity: 0.9;
    position: absolute;
}

#biofilm2 {
    width: 50vw;
    opacity: 1;
    position: absolute;
    transform-origin: 50% 45%;
}

.AIP{
    width: 60vw;
    scale: 0.8;
    opacity: 0;
    position: absolute;
}

.the_problem_counter {
    color: rgb(108, 40, 23);
    padding-top: 20vh;
    padding-left: 10vw;
    padding-right: 5vw;
    grid-column: 1 / span 3;
    z-index: 1;
    position: absolute;
    text-align: left;
}

.the_problem_counter h1 {
    padding: 0;
    font-size: 5em;
    font-weight: bold;
}

.the_problem_text {
    padding-top: 20vh;
    padding-left: 0;
    padding-right: 10vw;
    grid-column: 4 / span 3;
    z-index: 1;
    position: absolute;
}

.workflow h1 {
    grid-column: 1 / span 4;
    padding-left: 10vw;
    padding-top: 5vh;
    padding-bottom: 0;
}

.workflow h2 {
    padding: 0.5vw;
    background-color: rgba(255, 255, 255, 0.8);
}

.workflow_header {
    padding-top: 5vh;
    grid-row-start: 3;
    text-align: left;
}

.workflow_text {
    padding-top: 20vh;
    grid-row-start: 4;
    padding-bottom: 5vh;
    font-size: 1em;
}

.workflow p {
    padding: 0.5vw;
    background-color: rgba(255, 255, 255, 0.8);
}

.workflow a {
    font-size: 1.2em;
    color: #000;
    padding: 0.5vw;
    background-color: rgba(255, 255, 255, 0.8);
}

.workflow1 {
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    grid-column: 2 / span 2;
    position: relative;
}

#design_darpins::before{
    content: "";
    position: absolute;
    background-image: url(https://static.igem.wiki/teams/4833/wiki/case-2.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0px;
    right: 1vw;
    bottom: 0px;
    left: 1vw;
    opacity: 0.8;
}

#design_darpins:hover:before {
    opacity: 1;
    z-index: 1;
}

.link_workflow {
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
    z-index: 2;
}

.workflow2 {
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    grid-column: 4 / span 2;
    position: relative;
}

#modelling:hover::before {
    opacity: 1;
    z-index: 1;
}

.workflow3 {
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    grid-column: 6 / span 2;
    position: relative;
}

#bioreporter::before {
    content: "";
    position: absolute;
    background-image: url(https://static.igem.wiki/teams/4833/wiki/case-2.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0px;
    right: 1vw;
    bottom: 0px;
    left: 1vw;
    opacity: 0.8;
}

#bioreporter:hover::before {
    opacity: 1;
    z-index: 1;
}

.results {
    background-image: linear-gradient(white, rgba(204, 220, 251, 0.398));
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: auto;
    height: auto;
    text-align: justify;
    padding-top: 5vh;
    padding-bottom: 20vh;
}

.results h1 {
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.results_text {
    padding-left: 10vw;
    padding-right: 5vw;
    grid-column: 1;
    font-size: 1.2em;
    padding-bottom: 5vh;
}

.results a {
    font-size: 1.2em;
    color: #000;
}

.results_img{
    padding-top: 15vh;
    grid-column: 2;
    max-width: 35vw;
    margin-left: auto;
    margin-right: 9vw;
    opacity: 0.9;
}

.other_stuff {
    background-color: rgba(204, 220, 251, 0.398);
    display: grid;
    grid-template-columns: 8vw repeat(6, 14vw) 8vw;
    grid-template-rows: repeat(2);
    height: auto;
    text-align: justify;
    padding-top: 5vh;
    padding-bottom: 10vh;
    font-size: 1.2em;
}

.other_stuff1 {
    grid-column: 2 / span 2;
    grid-row: 2;
    position: relative;
}

.other_stuff1_header {
    grid-column: 2 / span 2;
    grid-row: 1;
    position: relative;
    padding-left: 2.5vw;
}

#other_stuff1::before{
    content: "";
    position: absolute;
    background-image: url();
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0px;
    right: 1vw;
    bottom: 0px;
    left: 1vw;
    opacity: 0.9;
}

.other_stuff2 {
    grid-column: 4 / span 2;
    grid-row: 2;
    position: relative;
}

.other_stuff2_header {
    grid-column: 4 / span 2;
    grid-row: 1;
    position: relative;
    padding-left: 2.5vw;
}

#other_stuff2::before{
    content: "";
    position: absolute;
    background-image: url();
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0px;
    right: 1vw;
    bottom: 0px;
    left: 1vw;
    opacity: 0.95;
}

.other_stuff3 {
    grid-column: 6 / span 2;
    grid-row: 2;
    padding-left: 1vw;
    padding-right: 1vw;
}

.other_stuff3_header {
    grid-column: 6 / span 2;
    grid-row: 1;
    position: relative;
    padding-left: 2.5vw;
}

.other_stuff_content {
    grid-row-start: 2 /span 1;
}

.other_stuff a {
    opacity: 0.8;
    background-color: rgba(255, 255, 255, 1);
    font-size: 0.8em;
    color: #000;
    position: relative;
    padding: 0.5vw;
}

.other_stuff_text {
    padding-top: 40%;
    padding-bottom: 5%;
    text-align: center;
}

#video_container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

#video_container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


@media only screen and (max-width: 850px) {

    /* * {
        overflow: hidden;
    } */

    /*changes to code to arrange aside below article. */
    .grid-wrapper {
        display: flex;
        flex-direction: column;
        width: 100vw;
        /* padding-left: 5vw; */
    }

     {
        width: 100vw;
    }

    .flex-wrapper {
        flex-direction: column;
    }

    .image {
        margin-bottom: 20px;
    }

    .header h1,
    .wide-header h1 {
        font-size: 2rem;
        font-weight: bold;
        padding-top: 5vh;
    }

    .header p,
    .wide-header p {
        width: 80vw;
        font-size: 1.1rem;
        font-weight: normal;
    }

    .wide-header p {
        padding-top: 1vh;
    }

    .wide-header {
        background-size:100% 50%;
        min-height: 90vh;
        background-position: top;
    }

    .home-header {
        background-size: 100vw;
        background-position: top;
        margin-top: 10vh;
        padding-top: 40vh;
        background-color: white;
    }

    .p-desc{
        width: 100vw;
        height: 50vh;
        padding: 2em;
        margin-left: 0vw;
        padding-left: 5vw;
    }

    .p-desc p{
        width: 80vw;
    }


    .flex-content{
        flex-wrap: wrap;
    }

    .content-w-toc,
    .content {
        padding-left: 5vw;
    }

    .content p,
    .content section p, 
    .content ul,
    .content ol,
    .content-w-toc p,
    .content-w-toc ul,
    .content-w-toc ol {
        max-width: 90vw;
        text-align: justify;
        justify-content: center;
    }

    .content-w-toc ul li,
    .content ul li {
        list-style-position: inside;
    }

    .content-w-toc ol li,
    .content ol li {
        list-style: decimal;
        list-style-position: inside;
    }

    .fig{
        max-width: 90vw;
        width: 100%;
    }

    .cards li {
        min-width: 85%;
        margin: 10px;
        flex-grow: 1;
    }

    .team-gallery {
        padding: 5vw;
    }


    /* Mobile support for home page*/


    .home-header {
        margin: 0;
        padding-top: 20vh;
    }

    .home-header h1 {
        font-size: 2rem;
    }

    .background {
        grid-template-columns: 100vw;
        grid-template-rows: auto;
    }

    .background h1 {
        font-size: 2rem;
        padding-bottom: 0;
    }

    .background_text h1 {        
        padding-bottom: 2vh;
    }

    .background_text {
        grid-column: 1;
        grid-row: 1;
        padding-top: 15vh;
        padding-left: 0;
        padding-right: 0;
        margin-right: 5vw;
        margin-left: 5vw;
        text-align: justify;
        justify-content: center;
        overflow: visible;
    }

    .wound_container {
        grid-column: 1;
        grid-row: 2;
    }

    .wound {
        width: 100vw;
    }

    .bacteria {
        width: 90vw;
        margin-left: 5vw;
        padding-bottom: 5vh;
    }

    #biofilm {
        width: 90vw;
        margin-left: 5vw;
        padding-bottom: 5vh;
    }

    #biofilm2 {
        width: 100vw;
    }

    .AIP {
        width: 90vw;
        margin-left: 5vw;
        padding-bottom: 5vh;
    }



    .the_problem_counter {
        padding-top: 5vh;
        width: 100vw;
        grid-row: 3;
    }

    .the_problem_counter h1 {
        font-size: 4rem;
    }

    .the_problem_text {
        grid-row: 1;
        padding-top: 15vh;
        padding-right: 5vw;
        padding-left: 5vw;
        margin-bottom: 2.5vh;
        text-align: justify;
        justify-content: center;
    }

    .the_problem_text h1 {
        padding-bottom: 2vh;
    }

    .solution {
        padding-top: 10vh;
        display: grid;
        grid-template-columns: 100vw;
        grid-template-rows: min-content;
    }

    .solution_text {
        padding-top: 0;
        padding-left: 5vw;
        grid-column: 1;
        grid-row: 1;
    }

    #darpin {
        grid-column: 1;
        grid-row: 2;
        width: 100vw;
        height: 30vh;
        position: relative;
        margin-top: 5vh;
        margin-bottom: 5vh;
    }

    #darpin canvas {
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .workflow {
        grid-template-columns: 100vw;
        padding-bottom: 0vh;
        grid-auto-rows: min-content;
    }

    .workflow h1 {
        padding-left: 5vw;
        grid-row: 1;
        grid-column: 1;
    }

    .workflow h2 {
        padding-left: 2vw;
    }

    .workflow p {
        padding-left: 2vw;
    }

    .workflow a {
        padding-left: 2vw;
    }

    #workflow_desc {
        grid-row: 2;
        grid-column: 1;
        padding-top: 3vh;
        padding-left: 5vw;
        padding-right: 5vw;
        margin: 0;
    }

    .workflow_header {
        grid-column: 1;
    }

    .workflow_text {
        grid-column: 1;
    }

    .workflow1 {
        grid-column: 1;
        grid-row: 3;
        margin-bottom: 2vh;
    }

    .workflow2 {
        grid-column: 1;
        grid-row: 4;
        margin-bottom: 2vh;
    }

    .workflow3 {
        grid-column: 1;
        grid-row: 5;
        margin-bottom: 2vh;
    }

    #design_darpins::before{
        top: 0vw;
        right: 0vw;
        bottom: 0vw;
        left: 0vw;
    }

    #modelling::before{
        top: 0vw;
        right: 0vw;
        bottom: 0vw;
        left: 0vw;
    }

    #bioreporter::before{
        top: 0vw;
        right: 0vw;
        bottom: 0vw;
        left: 0vw;
    }


    .results {
        grid-template-columns: 100vw;
        padding-bottom: 5vh;
        padding-top: 5vh;
    }

    .results_text {
        padding-left: 3vw;
        padding-right: 3vw;
        padding-bottom: 2vh;
        position: relative;
        z-index: 2;
    }

    .results_text h1 {
        padding: 2vw;
        background-color: rgba(255, 255, 255, 0.8);
        margin-bottom: 3vh;
    }

    .results_text p {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: left;
        margin-bottom: 5vh;
        padding: 2vw;
        text-align: justify;
        justify-content: center;
    }

    .results_text a {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 2vw;
    }

    .results_container {
        padding-top: 10vh;
        padding-bottom: 10vh;
        position: relative;
    }


    .results_container:before {
        content: "";
        position: absolute;
        background-image: url(https://static.igem.wiki/teams/4833/wiki/case-2.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0.8;
    }


    .other_stuff {
        grid-template-columns: 100vw;
        grid-template-rows: 10 50 10 50 10 50;
    }

    .other_stuff1 {
        grid-column: 1;
        grid-row: 2;
        position: relative;
    }

    #other_stuff1::before {
        top: 0vh;
        bottom: 0vh;
        right: 10vw;
        left: 10vw;
    }

    .other_stuff1_header {
        grid-column: 1;
        grid-row: 1;
        padding-left: 15vw;
        padding-top: 5vh;
    }

    .other_stuff2 {
        grid-column: 1;
        grid-row: 4;
        position: relative;
    }

    #other_stuff2::before {
        top: 0vh;
        bottom: 0vh;
        right: 10vw;
        left: 10vw;
    }

    .other_stuff2_header {
        grid-column: 1;
        grid-row: 3;
        padding-left: 15vw;
        padding-top: 5vh;
    }

    .other_stuff3 {
        grid-column: 1;
        grid-row: 6;
        position: relative;
        padding-right: 10vw;
        padding-left: 10vw;
    }

    #other_stuff3::before {
        top: 0vh;
        bottom: 0vh;
        right:10vw;
        left: 10vw;
    }

    .other_stuff3_header {
        grid-column: 1;
        grid-row: 5;
        padding-left: 15vw;
        padding-top: 5vh;
    }

    .other_stuff_content {
        grid-row-start: auto;
    }

    .other_stuff_text {
        padding-top: 30%;
        padding-bottom: 5%;
        text-align: center;
    }

    .parts_table {
        overflow: scroll;
    }

}

/* Table styling */
.tab {
    padding-top: 5vh;
    padding-bottom: 10vh;
    align-items: center;
}

table {
    max-width: 60vw;
    margin: 2vh 0;
    /* border-collapse: collapse; */
}


th {
    font-size: 1.3em;
    padding: 12px 15px;
    border-bottom: solid 2px rgb(129, 127, 127);
}

td {
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
    font-weight: 300;
    color: black;
    border-bottom: solid 1px rgb(129, 127, 127);
    overflow-wrap: break-word;
}

tablecaption {
    color: black;
    font-style: italic;
    padding: 2px;
    text-align: center;
}

/* Timeline  */
.ag-format-container {
    /* width: 1160px; */
    margin: 0 auto;

    position: relative;
}

.ag-timeline-block {
    padding: 10vh 0;
}

.ag-timeline_title-box {
    padding: 0 0 30px;

    text-align: center;
}

.ag-timeline_tagline {
    font-size: 40px;
    color: #5204fa;
}

.ag-timeline_title {
    font-size: 20px;
}

.ag-timeline_item {
    margin: 0 0 50px;

    position: relative;
}

.ag-timeline_item:nth-of-type(2n) {
    text-align: right;
}

.ag-timeline {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;

    position: relative;
}

.ag-timeline_line {
    width: 4px;
    background-color: #393935;

    position: absolute;
    top: 2px;
    left: 50%;
    bottom: 0;

    overflow: hidden;

    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.ag-timeline_line-progress {
    width: 100%;
    height: 20%;
    background-color: #70a37f;
}

.ag-timeline-card_box {
    padding: 0 0 20px 50%;
}

.ag-timeline_item:nth-child(2n) .ag-timeline-card_box {
    padding: 0 50% 20px 0;
}

.ag-timeline-card_point-box {
    display: inline-block;
    margin: 0 14px 0 -50px;
}

.ag-timeline_item:nth-child(2n) .ag-timeline-card_point-box {
    margin: 0 -50px 0 14px;
}
.ag-timeline_list{
    margin-top: -35px;
}
.ag-timeline-card_point {
    height: 100px;
    line-height: 100px;
    width: 100px;
    /* border: 3px solid #70a37f;
    background-color: #1d1d1b; */
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #FFF;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.ag-timeline-card_point.bg1{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon01.png") no-repeat center;
    background-size: 100%;
}

.ag-timeline-card_point.bg2{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon02.png") no-repeat center;
    background-size: 100%;
}

.ag-timeline-card_point.bg3{
    background: url("team-icon03.png") no-repeat center;
    background-size: 100%;
}

.ag-timeline-card_point.bg4{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon04.png") no-repeat center;
    background-size: 100%;
}

.js-ag-active .ag-timeline-card_point {
    /* color: #1d1d1b;
    background-color: #70a37f; */
}

.ag-timeline-card_meta-box {
    display: inline-block;
}

._meta {
    margin: 10px 0 0;

    font-weight: bold;
    font-size: 28px;
    color: #70a37f;
}

/* 卡片颜色 */
.ag-timeline-card_item {
    display: inline-block;
    width: 45%;
    margin: -77px 0 0;
    background-color: #dbdbae;

    opacity: 0;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, .5);
    -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, .5);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .5);

    -webkit-transition: -webkit-transform .5s, opacity .5s;
    -moz-transition: -moz-transform .5s, opacity .5s;
    -o-transition: -o-transform .5s, opacity .5s;
    transition: transform .5s, opacity .5s;

    position: relative;
}

.ag-timeline_item:nth-child(2n+1) .ag-timeline-card_item {
    -webkit-transform: translateX(-200%);
    -moz-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    -o-transform: translateX(-200%);
    transform: translateX(-200%);
}

.ag-timeline_item:nth-child(2n) ._item {
    -webkit-transform: translateX(200%);
    -moz-transform: translateX(200%);
    -ms-transform: translateX(200%);
    -o-transform: translateX(200%);
    transform: translateX(200%);
}

.js-ag-active.ag-timeline_item:nth-child(2n+1) .ag-timeline-card_item,
.js-ag-active.ag-timeline_item:nth-child(2n) .ag-timeline-card_item {
    opacity: 1;

    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.ag-timeline-card_arrow {
    height: 18px;
    width: 18px;
    margin-top: 20px;
    background-color: lightgray;

    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ag-timeline_item:nth-child(2n+1) .ag-timeline-card_arrow {
    margin-left: calc(-18px / 2);
    margin-right: calc(-18px / 2);
}

.ag-timeline_item:nth-child(2n) .ag-timeline-card_arrow {
    margin-left: -10px;

    right: auto;
    left: 0;
}

.ag-timeline-card_img {
    width: 100%;
}

.ag-timeline-card_info {
    padding: 20px 30px;
}

.ag-timeline-card_title {
    font-weight: bold;
    font-size: 28px;
    color: black;
    word-break: keep-all;
}

.aag-timeline-card_title {
    font-weight: bold;
    font-size: 28px;
    color: #dbdbae;
    word-break: keep-all;
}


.ag-timeline-card_desc {
    line-height: 1.45;

    font-size: 16px;
    color: white;
    word-break: keep-all;
}


@media only screen and (max-width: 979px) {
    .ag-timeline_line {
        left: 30px;
    }

    .ag-timeline_item:nth-child(2n) {
        text-align: left;
    }

    .ag-timeline-card_box,
    .ag-timeline_item:nth-child(2n) .ag-timeline-card_box {
        padding: 0 0 20px;
    }

    .ag-timeline-card_meta-box {
        display: none;
    }

    .ag-timeline-card_point-box,
    .ag-timeline_item:nth-child(2n) .ag-timeline-card_point-box {
        margin: 0 0 0 8px;
    }

    .ag-timeline-card_point {
        height: 40px;
        line-height: 40px;
        width: 40px;
    }

    .ag-timeline-card_item {
        width: 80%;
        margin: -65px 0 0 75px
    }

    .ag-timeline_item:nth-child(2n+1) .ag-timeline-card_item,
    .ag-timeline_item:nth-child(2n) .ag-timeline-card_item {
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
        /* width: 70vw; */
    }

    .ag-timeline_item:nth-child(2n+1) .ag-timeline-card_arrow {
        right: auto;
        left: 0;
    }

    .ag-timeline-card_title {
        display: block;
    }
    .aag-timeline-card_title {
        display: block;
    }
    .ag-timeline-card_arrow {
        margin-top: 12px;
    }

    .ag-timeline-card_img{
        width: 100%;
        height: auto;
    }

    .ag-timeline-card_point {
        font-size: 14px;
    }

    .ag-format-container {
        width: 50vw;
    }
}

@media only screen and (max-width: 767px) {
    .ag-format-container {
        width: 96%;
    }

    .ag-timeline-card_img-box {
        width: 60vw;
    }

    .ag-timeline-card_img{
        width: 100%;
        height: auto;
    }

    .ag-timeline_item:nth-child(2n+1) .ag-timeline-card_item,
    .ag-timeline_item:nth-child(2n) .ag-timeline-card_item {
        width: 55vw;
    }

    .image {
        width: 100%;
        height: auto;
    }

    .overlay {
        width: 100%;
        height: 90%;
    }

    .overlay .overlay-text,
    .overlay-mentor .overlay-text {
        width: 85%;  
    }

    .overlay-text h6 {
        font-weight: bold;
    }

    .overlay-text p{
        font-size: 14px;
    }

    .opt {
        display: none;
    }
    

}

@media only screen and (max-width: 639px) {
    .ag-timeline_title {
        font-size: 60px;
    }

    .ag-timeline-card_info {
        padding: 10px 15px;
    }

    .ag-timeline-card_desc {
        font-size: 14px;
    }
}

@media only screen and (max-width: 479px) {}

@media (min-width: 0px) and (max-width: 0px) {
    .ag-format-container {
        width: 750px;
    }

    

}

@media (min-width: 980px) and (max-width: 1161px) {
    .ag-format-container {
        width: 960px;
    }

}

/* Progress Bar */
.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background-color: #46658d;
}

.progress-container {
    width: 100%;
    height: 5px;
}

.progress-bar {
    height: 5px;
    /* background: #8174ad; */
    background: #46658d;
    width: 0%;
}


/* Page Setup with toc at side */
aside {
    grid-column: 2/3;
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 5vw;
    transform: translateY(-50%);
}

aside .toc-menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

aside .toc-menu li {
    position: relative;
    min-width: 200px;
    text-align: left;
}

aside .toc-menu li .dot {
    display: block;
    color: #fff;
    padding: 5px 0;
}

aside .toc-menu li .dot::before,
aside .toc-menu li .dot::after {
    display: block;
    position: absolute;
    content: '';
    border-radius: 50%;
    /* top: 50%; */
    top: 36px;
    transition: all .3s ease;
}

aside .toc-menu li .dot::before {
    width: 90px;
    height: 90px;
    left: 0;
    /* border: 2px solid #000; */
    transform: translateY(-50%) scale(1);
}
aside .toc-menu li:nth-child(1) .dot::before,
aside .toc-menu li:nth-child(1) .dot.active::before,
aside .toc-menu li:nth-child(1):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/01.png") no-repeat center;
    background-size: 90px;
}
aside .toc-menu li:nth-child(2) .dot::before,
aside .toc-menu li:nth-child(2) .dot.active::before,
aside .toc-menu li:nth-child(2):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/02.png") no-repeat center;
    background-size: 90px;
}
aside .toc-menu li:nth-child(3) .dot::before,
aside .toc-menu li:nth-child(3) .dot.active::before,
aside .toc-menu li:nth-child(3):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/03.png") no-repeat center;
    background-size: 90px;
}
aside .toc-menu li:nth-child(4) .dot::before,
aside .toc-menu li:nth-child(4) .dot.active::before,
aside .toc-menu li:nth-child(4):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/04.png") no-repeat center;
    background-size: 90px;
}
aside .toc-menu li:nth-child(5) .dot::before,
aside .toc-menu li:nth-child(5) .dot.active::before,
aside .toc-menu li:nth-child(5):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/01.png") no-repeat center;
    background-size: 90px;
}
aside .toc-menu li:nth-child(6) .dot::before,
aside .toc-menu li:nth-child(6) .dot.active::before,
aside .toc-menu li:nth-child(6):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/02.png") no-repeat center;
    background-size: 90px;
}
aside .toc-menu li:nth-child(7) .dot::before,
aside .toc-menu li:nth-child(7) .dot.active::before,
aside .toc-menu li:nth-child(7):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/03.png") no-repeat center;
    background-size: 90px;
}
aside .toc-menu li:nth-child(8) .dot::before,
aside .toc-menu li:nth-child(8) .dot.active::before,
aside .toc-menu li:nth-child(8):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/04.png") no-repeat center;
    background-size: 90px;
}
aside .toc-menu li:nth-child(9) .dot::before,
aside .toc-menu li:nth-child(9) .dot.active::before,
aside .toc-menu li:nth-child(9):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/01.png") no-repeat center;
    background-size: 90px;
}
aside .toc-menu li:nth-child(10) .dot::before,
aside .toc-menu li:nth-child(10) .dot.active::before,
aside .toc-menu li:nth-child(10):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/02.png") no-repeat center;
    background-size: 90px;
}


aside .toc-menu .dot::before{
    transform: translateY(-50%) scale(1);
}
aside .toc-menu li .dot::after {

    /* border: 2px solid #000; */
    right: -5px;
    transform: translateY(-50%) scale(1);
}

aside .toc-menu li .dot.active::before,
aside .toc-menu li:hover .dot::before {
    /* background: #46658d;
    border-color: #46658d; */
    background: url("https://static.igem.wiki/teams/4833/wiki/list-bj.png") no-repeat center;
    background-size: 90px;
    transform: translateY(-50%) scale(1);
}

aside .toc-menu li .dot.active::after,
aside .toc-menu li:hover .dot::after {
    transform: translateY(-50%) scale(1);
}

aside .toc-menu li .dot span {
    display: inline-block;
    opacity: 0;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: capitalize;
    background-color: #46658d;
    padding: 10px 20px;
    margin-left: 90px;
    transform: translateX(20px);
    transition: all .3s ease;
    border-radius: 100px;
}

aside .toc-menu li .dot span::before {
    display: block;
    display: none;
    position: absolute;
    content: '';
    border-right: 7px solid #46658d;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    top: 50%;
    transform: translate(7px, -50%);
    left: -20px;
    transition: all .3s ease;
}

aside .toc-menu li .dot.active span,
aside .toc-menu li:hover .dot span {
    transform: translateX(0px);
    opacity: 1;
}


/* 侧边栏样式2 */
aside .toc-menu2 {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

aside .toc-menu2 li {
    position: relative;
    min-width: 200px;
    text-align: right;
}

aside .toc-menu2 li .dot {
    display: block;
    color: #fff;
    padding: 5px 0;
}

aside .toc-menu2 li .dot::before,
aside .toc-menu2 li .dot::after {
    display: block;
    position: absolute;
    content: '';
    border-radius: 50%;
    top: 50%;
    transition: all .3s ease;
}

aside .toc-menu2 li .dot::before {
    width: 50px;
    height: 50px;
    right: 0;
    /* border: 2px solid #000; */
    transform: translateY(-50%) scale(0.8);
}
aside .toc-menu2 .dot::before{
    transform: translateY(-50%) scale(1);
}
aside .toc-menu2 li .dot::after {

    /* border: 2px solid #000; */
    right: -5px;
    transform: translateY(-50%) scale(0.7);
}

/* 右侧按钮列表背景图 */
aside .toc-menu2 li:nth-child(1) .dot::before,
aside .toc-menu2 li:nth-child(1) .dot.active::before,
aside .toc-menu2 li:nth-child(1):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon01.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu2 li:nth-child(2) .dot::before,
aside .toc-menu2 li:nth-child(2) .dot.active::before,
aside .toc-menu2 li:nth-child(2):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon02.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu2 li:nth-child(3) .dot::before,
aside .toc-menu2 li:nth-child(3) .dot.active::before,
aside .toc-menu2 li:nth-child(3):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon03.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu2 li:nth-child(4) .dot::before,
aside .toc-menu2 li:nth-child(4) .dot.active::before,
aside .toc-menu2 li:nth-child(4):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon04.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu2 li:nth-child(5) .dot::before,
aside .toc-menu2 li:nth-child(5) .dot.active::before,
aside .toc-menu2 li:nth-child(5):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon01.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu2 li:nth-child(6) .dot::before,
aside .toc-menu2 li:nth-child(6) .dot.active::before,
aside .toc-menu2 li:nth-child(6):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon02.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu2 li:nth-child(7) .dot::before,
aside .toc-menu2 li:nth-child(7) .dot.active::before,
aside .toc-menu2 li:nth-child(7):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon03.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu2 li:nth-child(8) .dot::before,
aside .toc-menu2 li:nth-child(8) .dot.active::before,
aside .toc-menu2 li:nth-child(8):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon04.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu2 li:nth-child(9) .dot::before,
aside .toc-menu2 li:nth-child(9) .dot.active::before,
aside .toc-menu2 li:nth-child(9):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon01.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu2 li:nth-child(10) .dot::before,
aside .toc-menu2 li:nth-child(10) .dot.active::before,
aside .toc-menu2 li:nth-child(10):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon02.png") no-repeat center;
    background-size: 50px;
}
/* -- */
aside .toc-menu2 li .dot.active::before,
aside .toc-menu2 li:hover .dot::before {
    /* background: #46658d;
    border-color: #46658d; */
    background: url("https://static.igem.wiki/teams/4833/wiki/01.png") no-repeat center;
    background-size: 50px;
    transform: translateY(-50%) scale(1.2);
}

aside .toc-menu2 li .dot.active::after,
aside .toc-menu2 li:hover .dot::after {
    transform: translateY(-50%) scale(1.2);
}

aside .toc-menu2 li .dot span {
    display: inline-block;
    opacity: 0;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: capitalize;
    background-color: #46658d;
    padding: 10px 20px;
    margin-right: 78px;
    transform: translateX(20px);
    transition: all .3s ease;
    border-radius: 100px;
}

aside .toc-menu2 li .dot span::before {
    display: block;
    position: absolute;
    content: '';
    border-left: 7px solid #46658d;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    top: 50%;
    transform: translate(7px, -50%);
    right: -8px;
    transition: all .3s ease;
}

aside .toc-menu2 li .dot.active span,
aside .toc-menu2 li:hover .dot span {
    transform: translateX(0px);
    opacity: 1;
}
/* 侧边栏样式2end */

/* 侧边栏样式3 */
aside .toc-menu3 {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

aside .toc-menu3 li {
    position: relative;
    min-width: 200px;
    text-align: left;
}

aside .toc-menu3 li .dot {
    display: block;
    color: #fff;
    padding: 5px 0;
}

aside .toc-menu3 li .dot::before,
aside .toc-menu3 li .dot::after {
    display: block;
    position: absolute;
    content: '';
    border-radius: 50%;
    top: 50%;
    transition: all .3s ease;
}

aside .toc-menu3 li .dot::before {
    width: 50px;
    height: 50px;
    left: 0;
    /* border: 2px solid #000; */
    transform: translateY(-50%) scale(1);
}
aside .toc-menu3 li:nth-child(1) .dot::before,
aside .toc-menu3 li:nth-child(1) .dot.active::before,
aside .toc-menu3 li:nth-child(1):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon01.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu3 li:nth-child(2) .dot::before,
aside .toc-menu3 li:nth-child(2) .dot.active::before,
aside .toc-menu3 li:nth-child(2):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon02.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu3 li:nth-child(3) .dot::before,
aside .toc-menu3 li:nth-child(3) .dot.active::before,
aside .toc-menu3 li:nth-child(3):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon03.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu3 li:nth-child(4) .dot::before,
aside .toc-menu3 li:nth-child(4) .dot.active::before,
aside .toc-menu3 li:nth-child(4):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon04.png") no-repeat center;
    background-size: 90px;
}
aside .toc-menu3 li:nth-child(5) .dot::before,
aside .toc-menu3 li:nth-child(5) .dot.active::before,
aside .toc-menu3 li:nth-child(5):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon01.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu3 li:nth-child(6) .dot::before,
aside .toc-menu3 li:nth-child(6) .dot.active::before,
aside .toc-menu3 li:nth-child(6):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon02.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu3 li:nth-child(7) .dot::before,
aside .toc-menu3 li:nth-child(7) .dot.active::before,
aside .toc-menu3 li:nth-child(7):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon03.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu3 li:nth-child(8) .dot::before,
aside .toc-menu3 li:nth-child(8) .dot.active::before,
aside .toc-menu3 li:nth-child(8):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon04.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu3 li:nth-child(9) .dot::before,
aside .toc-menu3 li:nth-child(9) .dot.active::before,
aside .toc-menu3 li:nth-child(9):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/team-icon01.png") no-repeat center;
    background-size: 50px;
}
aside .toc-menu3 li:nth-child(10) .dot::before,
aside .toc-menu3 li:nth-child(10) .dot.active::before,
aside .toc-menu3 li:nth-child(10):hover .dot::before{
    background: url("https://static.igem.wiki/teams/4833/wiki/02.png") no-repeat center;
    background-size: 50px;
}


aside .toc-menu3 .dot::before{
    transform: translateY(-50%) scale(0.8);
}
aside .toc-menu3 li .dot::after {

    /* border: 2px solid #000; */
    right: -5px;
    transform: translateY(-50%) scale(0.8);
}

aside .toc-menu3 li .dot.active::before,
aside .toc-menu3 li:hover .dot::before {
    /* background: #46658d;
    border-color: #46658d; */
    background: url("https://static.igem.wiki/teams/4833/wiki/list-bj.png") no-repeat center;
    background-size: 50px;
    transform: translateY(-50%) scale(1.2);
}

aside .toc-menu3 li .dot.active::after,
aside .toc-menu3 li:hover .dot::after {
    transform: translateY(-50%) scale(1.2);
}

aside .toc-menu3 li .dot span {
    display: inline-block;
    opacity: 0;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: capitalize;
    background-color: #46658d;
    padding: 10px 20px;
    margin-left: 90px;
    transform: translateX(20px);
    transition: all .3s ease;
    border-radius: 100px;
}

aside .toc-menu3 li .dot span::before {
    display: block;
    position: absolute;
    content: '';
    border-right: 7px solid #46658d;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    top: 50%;
    transform: translate(7px, -50%);
    left: -20px;
    transition: all .3s ease;
}

aside .toc-menu3 li .dot.active span,
aside .toc-menu3 li:hover .dot span {
    transform: translateX(0px);
    opacity: 1;
}
/* 侧边栏样式3end */

.toc-label {
    margin-bottom: 10px;
    text-align: right;
    color: #000;
    font-weight: 700;
    display: none;
}

.toc-label.active {
    display: block;
}

.content-w-toc section {
    padding-bottom: 5vh;
}

@media (max-width: 850px) {
    aside {
        visibility: hidden;
    }

    .content-w-toc {
        grid-column: 1/3;
    }
}

/* Collapsible Widgets */
/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color: #46658d36;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.3rem;
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible:active,
.collapsible:hover {
    background-color: #46658d42;
}

.collapsible:after {
    content: '\02795';
    /* Unicode character for "plus" sign (+) */
    font-size: 1.1rem;
    color: white;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}

/* Style the collapsible content. Note: hidden by default */
.week {
    padding: 0 18px;
    padding-top: 18px;
    display: none;
    overflow: hidden;
    background-color: #46658d15;
}


.ref-item {
    line-height: 1.5
}

.ref-item>:not(:last-child) {
    margin-bottom: .4rem
}

.ref-title {
    font-family: Montserrat, serif;
    font-size: 1.05rem;
    font-weight: 700
}

.ref-links {
    display: flex;
    --flex-column-gap: 0px;
    flex-wrap: wrap
}

.ref-links>:not(:last-child) {
    --flex-column-gap: 1rem;
    margin-right: 1rem
}

.ref-link {
    font-weight: 500;
    text-decoration-thickness: 2px;
    color: #1a1a1a;
}

ol li {
    list-style: decimal;
    padding-top: 2em;
}

/* protocols */
.protocol h4 {
    font-weight: bold;
    font-size: 1.2rem;
}

.protocol ul li, section ul li {
    list-style: disc;
}

.protocol ul li,
.protocol ol li,
.protocol p {
    padding-top: 1em;
    font-size: 1.1rem;
}

.protocol .collapsible {
    background-color: #c0c0c081;
    ;
}

.protocol p.remark {
    padding-top: 0em;
    font-size: 0.9rem;
}

.protocol th {
    font-size: 1.2rem;
}

.protocol td {
    font-size: 1.1rem;
}


/* .navbar {
    display: flex;
    justify-content: space-around;
    background-color: gray;
    color: black;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    align-items: baseline;
    padding-bottom: 0%;
}

.logo {
    margin: 0;
    padding: 0;
}

.menu {
    display: flex;
    gap: 2em;
    font-size: 16px;
    margin-right: 0em;
    justify-content: flex-end
} */


.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
/* nav { 
	margin:0;
	padding: 0;
	background-color: white;
}

#logo {
	display: block;
	float: left;
} */

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

/* nav:after {
	content:"";
	display:table;
	clear:both;
} */

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
/* nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	} */
	
/* Positioning the navigation items inline */
/* nav ul li {
	margin: 0px;
	display:inline-block;
	float: left; 
	background-color: gray;
	} */

/* Styling the links */
/* nav a {
	display:block;
	padding:0px 20px;	
	color:black;
	text-decoration:none;
    background-color: gold;
} */


/* nav ul li ul li:hover { 
    color: black;
    background: white; 
} */

/* Background color change on Hover */
/* nav a:hover { 
    color: black;
    background: white;
    text-decoration: underline; 
    text-decoration-thickness: 3px;
    text-decoration-color: #46658d;
} */

.pr:hover{
    text-decoration-color: #525174e5;
}

.eng:hover {
    text-decoration-color: #70a37fe5;
}

.about:hover {
    text-decoration-color: #fabc3ce5;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
    background:white;
    transition: 0.3s ease;
}
	
/* First Tier Dropdown */
nav ul ul li {
	width:190px;
	float:none;
	display:list-item;
	position: relative;
    padding: 5px 0px;
    background-color: rgb(247, 247, 247);
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' '; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 850px) {
    .collapsible {
            width: 95%;
        }

    .week {
        width: 95%
    }

	#logo {
		display: block;
		padding: 0;
		width: 50%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: white;
		padding:14px 20px;	
		color:black;
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: white;
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-decoration-color: #46658d;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

    nav ul {
	    text-align: center;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: transparent;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:black;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: rgb(247, 247, 247); 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
	}


}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}

/* styling for regulation or law text */
/* .sec li {
    list-style: none;
    gap: 36px;
} */

.red {
    color: #b6465f;
}

/* Photo gallery */
.flex-fig{
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.flex-fig .fig{
    padding-top: 0;
}

.cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* TODO: adapt with for mobile */
.cards li {
    max-width: 40%;
    /* gets rid of the bullets */
    list-style: none;
    margin: 10px;
    flex-grow: 1;
}

.cards img {
    width: 100%;
}

/*button to top*/
#btn-back-to-top {
    position: fixed;
    z-index: 22;
    bottom: 70px;
    right: 70px;
    display: none;
    transition: 0.3s;
    background-color: #326789; 
    color: white;
  }
  @media screen and (max-width: 600px){
     #btn-back-to-top {
        bottom: 30px;
        right: 30px;
        }
  }
  
  #btn-back-to-top:hover {
     color: #e65c4f;
  }

.center {
   display: block;
   margin-left: auto;
   margin-right: auto;
   /*width: 50%;*/
   text-align: center;
   align-items: center;
}

/* label.form-check-label::before {
    content: "";
    visibility: hidden;
} */



/* Preloader 
	https://ihatetomatoes.net/create-custom-preloading-screen/
*/
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; }
   #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fcf7f8; /* Chrome, Opera 15+, Safari 5+ */
   	animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ z-index: 2001; }
   #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent;
   	border-top-color: #100f0f; /* Chrome, Opera 15+, Safari 5+ */
   animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ }
   #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent;
border-top-color: #52f50d; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ }
@keyframes spin {
	0%   {  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}

#loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: hwb(79 73% 11%); z-index: 2000;  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */ transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */}

#loader-wrapper .loader-section.section-left { left: 0; }

#loader-wrapper .loader-section.section-right { right: 0; }

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
	transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */  
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
	transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */  
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader {
	opacity: 0;  
	transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
	visibility: hidden;  /* Chrome, Opera 15+, Safari 3.1+ */  /* IE 9 */
	transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */  
	transition: all 0.3s 1s ease-out;
}
/* JavaScript Turned Off */
.no-js #loader-wrapper { display: none; }
/*============ Preloader ends ==================================*/