Difference between revisions of "Team:Tuebingen/test lukas"

 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<html lang="en" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/html">
+
<html lang="en" dir="ltr" class="client-nojs">
  
−
<meta charset="UTF-8"/>
+
<meta charset="UTF-8" content="width=device-width, initial-scale=1.0"/>
 
<style>
 
<style>
 
     /*!
 
     /*!
Line 2,902: Line 2,902:
 
     .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
 
     .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
 
         box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
 
         box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5)
 +
    }
 +
 +
    .btn-link {
 +
        font-weight: 400;
 +
        color: #007bff;
 +
        background-color: transparent
 +
    }
 +
 +
    .btn-link:hover {
 +
        color: #0056b3;
 +
        text-decoration: underline;
 +
        background-color: transparent;
 +
        border-color: transparent
 +
    }
 +
 +
    .btn-link.focus, .btn-link:focus {
 +
        text-decoration: underline;
 +
        border-color: transparent;
 +
        box-shadow: none
 +
    }
 +
 +
    .btn-link.disabled, .btn-link:disabled {
 +
        color: #6c757d;
 +
        pointer-events: none
 
     }
 
     }
  
Line 3,972: Line 3,996:
 
     }
 
     }
  
−
     @media (max-width: 767.98px) {
+
     @media (max-width: 1199.98px) {
 
         .navbar-expand-md > .container, .navbar-expand-md > .container-fluid {
 
         .navbar-expand-md > .container, .navbar-expand-md > .container-fluid {
 
             padding-right: 0;
 
             padding-right: 0;
Line 3,979: Line 4,003:
 
     }
 
     }
  
−
     @media (min-width: 768px) {
+
     @media (min-width: 1200px) {
 
         .navbar-expand-md {
 
         .navbar-expand-md {
 
             -ms-flex-flow: row nowrap;
 
             -ms-flex-flow: row nowrap;
Line 9,185: Line 9,209:
  
  
−
     /* sponsor foooter */
+
     /* sponsor footer */
 
     .sponsorLogo img {
 
     .sponsorLogo img {
 
         padding: 8px;
 
         padding: 8px;
Line 9,220: Line 9,244:
 
     }
 
     }
  
−
    /*++++++++++++++++++++++++++++++++
+
/*++++++++++++++++++++++++++++++++
 
contents CSS ++++++++++++++++++++++++++++++*/
 
contents CSS ++++++++++++++++++++++++++++++*/
−
    * {
+
* {
−
        box-sizing: border-box;
+
  box-sizing: border-box;
−
    }
+
}
  
  
−
    .glpContainer {
+
.glpContainer {
−
        display: flex;
+
  display: flex;
−
        width: 100%;
+
  width: 100%;
−
        margin: 0;
+
  margin: 0;
−
        padding: 1em auto 0;
+
  padding: 1em auto 0;
−
    }
+
}
  
−
    .glpContainer > * {
+
.glpContainer > * {
−
        padding: 20px 25px;
+
  padding: 20px 25px;
−
    }
+
}
 +
/* Both Needed */
 +
#glpContentsOuter{
 +
  position: relative;
 +
  flex-basis: 15vw;
 +
  width: 15vw;
  
−
    /* Both Needed */
+
}
−
    #glpContentsOuter {
+
/* Both Needed */
−
        position: relative;
+
.table-of-contents {
−
        flex-basis: 15vw;
+
  position: relative;
−
        width: 15vw;
+
  flex-basis: 15vw;
 +
  width: 15vw;
  
−
    }
+
}
 +
.stickyContents {
 +
  position: fixed;
 +
  top: 120px;
 +
}
 +
.table-of-contents p {
 +
  text-transform: uppercase;
 +
  letter-spacing: 0.125em;
 +
  color: #555;
 +
}
  
−
    /* Both Needed */
+
.table-of-contents ul {
−
    .table-of-contents {
+
  position: fixed;
−
        position: relative;
+
  /* Chrome (asshole) */
−
        flex-basis: 15vw;
+
  position: sticky;
−
        width: 15vw;
+
  /* Firefox */
 +
  margin-top: 2em;
 +
  top: 4em;
 +
}
  
−
    }
+
h1:first-child {
 +
  margin-top: 0;
 +
}
  
−
    .stickyContents {
+
.post-content {
−
        position: fixed;
+
  flex-basis: 70vw;
−
        top: 120px;
+
  max-width: 100%;
−
    }
+
  margin-left: 5vw;
 +
}
 +
/* important to the link position of the headings */
 +
.post-content h1{
 +
padding-top: 30px;
 +
color:rgba(0, 158, 198,1);
 +
}
  
−
    .table-of-contents p {
+
/* important to the link position of the headings */
−
        text-transform: uppercase;
+
.post-content h2{
−
        letter-spacing: 0.125em;
+
padding-top: 150px;
−
        color: #555;
+
color:rgba(0, 158, 198,1);
−
    }
+
}
  
−
    .table-of-contents ul {
+
/* link color */
−
        position: fixed;
+
.post-content a{
−
        /* Chrome (asshole) */
+
color:#009EC6;
−
        position: sticky;
+
}
−
        /* Firefox */
+
−
        margin-top: 2em;
+
−
        top: 4em;
+
−
    }
+
  
−
    h1:first-child {
+
#glpreferences a{
−
        margin-top: 0;
+
color:#009EC6;
−
    }
+
}
  
−
    .post-content {
 
−
        flex-basis: 70vw;
 
−
        max-width: 100%;
 
−
        margin-left: 5vw;
 
−
    }
 
  
−
    /* important to the link position of the headings */
+
/* TOC part */
−
    .post-content h1 {
+
−
        padding-top: 30px;
+
−
        color: rgba(105, 202, 98, 1.1);
+
−
    }
+
  
−
    /* important to the link position of the headings */
+
.table-of-contents svg {
−
    .post-content h2 {
+
  position: absolute;
−
        padding-top: 150px;
+
  left: 0;
−
        color: rgba(105, 202, 98, 1.1);
+
  top: 50%;
−
    }
+
  bottom: auto;
 +
  display: none;
 +
  stroke: #009EC6;
 +
  transform: translateY(-50%);
 +
}
  
−
    /* link color */
+
.toc-reading svg {
−
    .post-content a {
+
  display: block;
−
        color: rgba(105, 202, 98, 1.1);
+
}
−
    }
+
  
−
    #glpreferences a {
+
.table-of-contents ul {
−
        color: rgba(105, 202, 98, 1.1);
+
  width: 200px;
−
    }
+
  counter-reset: articles;
 +
  padding: 0;
 +
  margin-left: 0;
 +
}
  
 +
.table-of-contents li {
 +
  display: block;
 +
  counter-increment: articles;
 +
}
  
−
    /* TOC part */
+
.table-of-contents li + li {
 +
  margin-top: 2em;
 +
}
  
−
    .table-of-contents svg {
+
.table-of-contents a {
−
        position: absolute;
+
  display: block;
−
        left: 0;
+
  padding: 0 1.1em 0 3.2em;
−
        top: 50%;
+
  position: relative;
−
        bottom: auto;
+
  text-decoration: none;
−
        display: none;
+
  color: #333;
−
        stroke: rgba(105, 202, 98, 1.1);
+
  font-weight: bold;
−
        transform: translateY(-50%);
+
}
−
    }
+
  
−
    .toc-reading svg {
+
a.toc-reading,
−
        display: block;
+
a.toc-already-read.toc-reading {
−
    }
+
  color: #009EC6;
 +
  opacity: 1;
 +
}
  
−
    .table-of-contents ul {
+
a.toc-already-read {
−
        width: 200px;
+
  opacity: 0.4;
−
        counter-reset: articles;
+
}
−
        padding: 0;
+
−
        margin-left: 0;
+
−
    }
+
  
−
    .table-of-contents li {
+
.table-of-contents a:before {
−
        display: block;
+
  content: counter(articles, decimal);
−
        counter-increment: articles;
+
  position: absolute;
−
    }
+
  bottom: auto;
 +
  left: 0;
 +
  top: 50%;
 +
  width: 36px;
 +
  height: 36px;
 +
  line-height: 34px;
 +
  text-align: center;
 +
  transform: translateY(-50%);
 +
  transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
 +
  border-radius: 50%;
 +
  box-shadow: 0 0 0 1px #d9d9d9 inset;
 +
  color: #4d4d4d;
 +
}
  
−
    .table-of-contents li + li {
+
.post-content .row{
−
        margin-top: 2em;
+
  text-align: justify;
−
    }
+
}
−
 
+
/*++++++++++++++++++++++++++++++++
−
    .table-of-contents a {
+
−
        display: block;
+
−
        padding: 0 1.1em 0 3.2em;
+
−
        position: relative;
+
−
        text-decoration: none;
+
−
        color: #333;
+
−
        font-weight: bold;
+
−
    }
+
−
 
+
−
    a.toc-reading,
+
−
    a.toc-already-read.toc-reading {
+
−
        color: rgba(105, 202, 98, 1.1);
+
−
        opacity: 1;
+
−
    }
+
−
 
+
−
    a.toc-already-read {
+
−
        opacity: 0.4;
+
−
    }
+
−
 
+
−
    .table-of-contents a:before {
+
−
        content: counter(articles, decimal);
+
−
        position: absolute;
+
−
        bottom: auto;
+
−
        left: 0;
+
−
        top: 50%;
+
−
        width: 36px;
+
−
        height: 36px;
+
−
        line-height: 34px;
+
−
        text-align: center;
+
−
        transform: translateY(-50%);
+
−
        transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
+
−
        border-radius: 50%;
+
−
        box-shadow: 0 0 0 1px #d9d9d9 inset;
+
−
        color: #4d4d4d;
+
−
    }
+
−
 
+
−
    .post-content .row {
+
−
        text-align: justify;
+
−
    }
+
−
 
+
−
    /*++++++++++++++++++++++++++++++++
+
 
contents End ++++++++++++++++++++++++++++++*/
 
contents End ++++++++++++++++++++++++++++++*/
  
Line 9,576: Line 9,594:
 
     /*++++++++++++++++++++++++++++++++
 
     /*++++++++++++++++++++++++++++++++
 
gallery End ++++++++++++++++++++++++++++++*/
 
gallery End ++++++++++++++++++++++++++++++*/
 +
@media only screen and (max-width: 575.98px) {}
  
−
    @media only screen and (max-width: 575.98px) {
+
@media only screen and (max-width: 767.98px) {
−
    }
+
.pictureTitle{
 +
height: 200px;
 +
}
 +
.pictureTitle .display-2{
 +
font-size: 2rem;
 +
}
  
−
    @media only screen and (max-width: 767.98px) {
+
.pictureTitle h4{
−
         .pictureTitle {
+
font-size: 1rem;
−
             height: 200px;
+
}
 +
 
 +
#glpContentsOuter{
 +
display: none;
 +
}
 +
.glpContainer {
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0 auto;
 +
}
 +
 
 +
.glpContainer > * {
 +
  padding: 0;
 +
}
 +
.post-content {
 +
  flex-basis: 90vw;
 +
  max-width: 100%;
 +
  margin:0 3vw;
 +
}
 +
/* important to the link position of the headings */
 +
.post-content h2{
 +
padding-top: 50px;
 +
}
 +
table{
 +
font-size: .8rem;
 +
}
 +
.quote-card p {
 +
  font-size: 1rem !important;
 +
}
 +
}
 +
 
 +
 
 +
@media only screen and (max-width: 1199.98px) {
 +
 
 +
}
 +
 
 +
@media only screen and (max-width: 1400px) {
 +
.table-of-contents a{
 +
font-size: 0.8rem;
 +
}
 +
.table-of-contents li + li{
 +
margin-top: 1.5em;
 +
}
 +
}
 +
 
 +
</style>
 +
 
 +
</p>
 +
<p>
 +
 
 +
    <head>
 +
         <title>GLP.exe</title>
 +
        <meta charset="utf-8">
 +
        <meta name="viewport" content="width=device-width, initial-scale=1">
 +
        <link rel="stylesheet" href="https://2019.igem.org/Template:Tuebingen/FontAwesomeCSS">
 +
        <link rel="stylesheet" href="https://2019.igem.org/Team:Tuebingen/aosCSS?action=raw&ctype=text/css" />
 +
        <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous" />
 +
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
 +
        <script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&amp;ctype=text/javascript"></script>
 +
        <script src="https://2019.igem.org/Team:Tuebingen/popperjs?action=raw&amp;ctype=text/javascript"></script>
 +
        <script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&amp;ctype=text/javascript"></script>
 +
        <script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&amp;ctype=text/javascript"></script>
 +
    </head>
 +
 
 +
<body style="">
 +
 
 +
    <section id="nav-placeholder">
 +
        <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
 +
            style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
 +
            <a class="navbar-brand" href="https://2019.igem.org/Team:Tuebingen">
 +
                <img src="https://2019.igem.org/wiki/images/2/2a/T--Tuebingen--white_logo_animated.gif" alt="logo"
 +
                    style="width:70px;">
 +
                <h5 class="d-inline ml-3" style="font-family: 'Righteous', cursive; font-weight: normal;">GLP.exe</h5>
 +
            </a>
 +
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
 +
                <span class="navbar-toggler-icon"></span>
 +
            </button>
 +
            <div class="collapse navbar-collapse justify-content-around" id="collapsibleNavbar">
 +
                <ul class="navbar-nav">
 +
                    <li id="ourStoryButton" class="nav-item mx-3">
 +
                        <a class="nav-link" href="/Team:Tuebingen/Story" style="font-family: 'Righteous', cursive; font-weight: normal;">OUR STORY</a>
 +
                    </li>
 +
 
 +
                    <li class="nav-item dropdown mx-3">
 +
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;" >
 +
                            PROJECT
 +
                        </a>
 +
                        <div class="dropdown-menu">
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Description" style="font-family: 'Righteous', cursive; font-weight: normal;">Description</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Killswitch" style="font-family: 'Righteous', cursive; font-weight: normal;">Kill Switch</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Nissle" style="font-family: 'Righteous', cursive; font-weight: normal;">Nissle</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Incretin" style="font-family: 'Righteous', cursive; font-weight: normal;">Incretin</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/CPP" style="font-family: 'Righteous', cursive; font-weight: normal;">Cell Penetrating Peptides</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Results" style="font-family: 'Righteous', cursive; font-weight: normal;">Results</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Demonstrate" style="font-family: 'Righteous', cursive; font-weight: normal;">Demonstrate</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Notebook" style="font-family: 'Righteous', cursive; font-weight: normal;">Notebook</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Model" style="font-family: 'Righteous', cursive; font-weight: normal;">Model</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Software" style="font-family: 'Righteous', cursive; font-weight: normal;">Software</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Outlook" style="font-family: 'Righteous', cursive; font-weight: normal;">Outlook</a>
 +
                        </div>
 +
                    </li>
 +
                    <li class="nav-item dropdown mx-3">
 +
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
 +
                            PARTS
 +
                        </a>
 +
                        <div class="dropdown-menu">
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Parts" style="font-family: 'Righteous', cursive; font-weight: normal;">Parts Overview</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part" style="font-family: 'Righteous', cursive; font-weight: normal;">Basic Parts</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part" style="font-family: 'Righteous', cursive; font-weight: normal;">Improved Parts</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Composite_Part" style="font-family: 'Righteous', cursive; font-weight: normal;">Composite Parts</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Part_Collection" style="font-family: 'Righteous', cursive; font-weight: normal;">Part Collection</a>
 +
                        </div>
 +
                    </li>
 +
 
 +
                    <li class="nav-item dropdown mx-3">
 +
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
 +
                            PEOPLE
 +
                        </a>
 +
                        <div class="dropdown-menu">
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Team" style="font-family: 'Righteous', cursive; font-weight: normal;">Team</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Collaborations" style="font-family: 'Righteous', cursive; font-weight: normal;">Collaborations</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Attributions" style="font-family: 'Righteous', cursive; font-weight: normal;">Attributions</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Sponsors" style="font-family: 'Righteous', cursive; font-weight: normal;">Sponsors</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Gallery" style="font-family: 'Righteous', cursive; font-weight: normal;">Gallery</a>
 +
                        </div>
 +
                    </li>
 +
 
 +
                    <li class="nav-item dropdown mx-3">
 +
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
 +
                            HUMAN PRACTICES
 +
                        </a>
 +
                        <div class="dropdown-menu">
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices" style="font-family: 'Righteous', cursive; font-weight: normal;">Overview</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement" style="font-family: 'Righteous', cursive; font-weight: normal;">Education & Public Engagement</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Experts" style="font-family: 'Righteous', cursive; font-weight: normal;">Experts</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship" style="font-family: 'Righteous', cursive; font-weight: normal;">Entrepreneurship</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/SDG" style="font-family: 'Righteous', cursive; font-weight: normal;">Sustainable Development Goals</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Experimenta" style="font-family: 'Righteous', cursive; font-weight: normal;">Experimenta Science Center</a>
 +
                        </div>
 +
                    </li>
 +
                    <li class="nav-item dropdown mx-3">
 +
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
 +
                            AWARDS
 +
                        </a>
 +
                        <div class="dropdown-menu">
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices" style="font-family: 'Righteous', cursive; font-weight: normal;">Integrated Human Practise</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement" style="font-family: 'Righteous', cursive; font-weight: normal;">Education & Public Engagement</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship" style="font-family: 'Righteous', cursive; font-weight: normal;">Supporting Entrepreneurship</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Measurement" style="font-family: 'Righteous', cursive; font-weight: normal;">Measurement</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Model" style="font-family: 'Righteous', cursive; font-weight: normal;">Model</a>
 +
                            <a class="dropdown-item" href="/Team:Tuebingen/Software" style="font-family: 'Righteous', cursive; font-weight: normal;">Software</a>
 +
                        </div>
 +
                    </li>
 +
 
 +
                    <li class="nav-item mx-3">
 +
                            <a class="nav-link" href="/Team:Tuebingen/Safety" style="font-family: 'Righteous', cursive; font-weight: normal;">SAFETY</a>
 +
                    </li>
 +
 
 +
                    <li class="nav-item mx-3">
 +
                        <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank" style="font-family: 'Righteous', cursive; font-weight: normal;">JUDGING
 +
                            FORM ⇗</a>
 +
                    </li>
 +
 
 +
                    <li class="nav-item mx-1 pt-2">
 +
                        <a href="https://www.facebook.com/igemtuebingen/" class="fa fa-facebook" target="_blank"></a>
 +
                    </li>
 +
                    <li class="nav-item mx-1 pt-2">
 +
                        <a href="https://twitter.com/iGEMTuebingen" class="fa fa-twitter" target="_blank"></a>
 +
                    </li>
 +
                    <li class="nav-item mx-1 pt-2">
 +
                        <a href="https://www.instagram.com/igem_tuebingen/" class="fa fa-instagram" target="_blank"></a>
 +
                    </li>
 +
 
 +
                </ul>
 +
            </div>
 +
        </nav>
 +
    </section>
 +
<script>
 +
var url = window.location.href;
 +
$(function () {
 +
$('.nav-link[href="' + url + '"]').addClass("active");
 +
$('.dropdown-item[href="' + url + '"]').addClass("active");
 +
$('.dropdown-item[href="' + url + '"]').parent().parent().addClass("active");
 +
});
 +
</script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/popperjs?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
 +
    <script src="https://2019.igem.org/Team:Tuebingen/aosJS?action=raw&ctype=text/javascript"></script>
 +
  <script>
 +
    AOS.init();
 +
  </script>
 +
 
 +
</body>
 +
 
 +
 
 +
</p>
 +
<p>
 +
    <style>
 +
 
 +
        /* Scroll Down Icon*/
 +
        #goToBox {
 +
            position: relative;
 +
            width: 30px;
 +
             height: 28px;
 +
            left: calc(50% - 15px);
 
         }
 
         }
  
−
         .pictureTitle .display-2 {
+
         .chevron {
 +
            position: absolute;
 +
            width: 28px;
 +
            height: 8px;
 +
            opacity: 0;
 +
            transform: scale3d(0.5, 0.5, 0.5);
 +
            animation: move 3s ease-out infinite;
 +
        }
 +
 
 +
        .chevron:first-child {
 +
            animation: move 3s ease-out 1s infinite;
 +
        }
 +
 
 +
        .chevron:nth-child(2) {
 +
            animation: move 3s ease-out 2s infinite;
 +
        }
 +
 
 +
        .chevron:before,
 +
        .chevron:after {
 +
            content: ' ';
 +
            position: absolute;
 +
            top: 0;
 +
            height: 100%;
 +
            width: 51%;
 +
            background: #fff;
 +
        }
 +
 
 +
        .chevron:before {
 +
            left: 0;
 +
            transform: skew(0deg, 30deg);
 +
        }
 +
 
 +
        .chevron:after {
 +
            right: 0;
 +
            width: 50%;
 +
            transform: skew(0deg, -30deg);
 +
        }
 +
 
 +
        @keyframes move {
 +
            25% {
 +
                opacity: 1;
 +
 
 +
            }
 +
            33% {
 +
                opacity: 1;
 +
                transform: translateY(30px);
 +
            }
 +
            67% {
 +
                opacity: 1;
 +
                transform: translateY(40px);
 +
            }
 +
            100% {
 +
                opacity: 0;
 +
                transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
 +
            }
 +
        }
 +
 
 +
        @keyframes pulse {
 +
            to {
 +
                opacity: 1;
 +
            }
 +
        }
 +
 
 +
 
 +
        /* FlowChart*/
 +
        .circleO {
 +
            height: 60px;
 +
            width: 60px;
 +
            padding: auto;
 +
            border-radius: 50%;
 +
            background-color: rgba(230, 230, 230, 1);
 +
            color: black;
 +
            z-index: 2;
 +
        }
 +
 
 +
        .circleO img {
 +
            max-height: 40px;
 +
            width: auto;
 +
        }
 +
 
 +
        .circleS {
 +
            height: 60px;
 +
            width: 60px;
 +
            padding: auto;
 +
            border-radius: 50%;
 +
            background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
 +
            color: black;
 +
            z-index: 2;
 +
        }
 +
 
 +
        .circleS img {
 +
            max-height: 40px;
 +
            width: auto;
 +
        }
 +
 
 +
        .circleM {
 +
            height: 100px;
 +
            width: 100px;
 +
            padding: auto;
 +
            border-radius: 50%;
 +
            background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
 +
            color: black;
 +
            z-index: 2;
 +
            1, 101, 224
 +
        }
 +
 
 +
        .circleM img {
 +
            max-height: 80px;
 +
            width: auto;
 +
        }
 +
 
 +
        .circleL {
 +
            height: 160px;
 +
            width: 160px;
 +
            padding: auto;
 +
            border-radius: 50%;
 +
            background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1));
 +
            color: black;
 +
            z-index: 2;
 +
        }
 +
 
 +
        .circleL img {
 +
            max-height: 130px;
 +
            width: auto;
 +
        }
 +
 
 +
        #conceptFlow h5 {
 +
            font-weight: bold;
 
             font-size: 2rem;
 
             font-size: 2rem;
 +
            margin-bottom: 30px;
 +
            color: #009ec6;
 
         }
 
         }
  
−
         .pictureTitle h4 {
+
         #conceptFlow span {
−
             font-size: 1rem;
+
             font-size: 1.5rem;
 
         }
 
         }
  
−
         #glpContentsOuter {
+
         /* height of each section*/
−
             display: none;
+
        .how-it-works.row {
 +
             height: 50vh
 
         }
 
         }
  
−
         .glpContainer {
+
         .how-it-works.row .col-3 {
−
             width: 100%;
+
             align-self: stretch;
−
            margin: 0;
+
−
            padding: 0 auto;
+
 
         }
 
         }
  
−
         .glpContainer > * {
+
         .how-it-works.row .col-3::after {
−
             padding: 0;
+
             content: "";
 +
            position: absolute;
 +
            border-left: 3px solid rgba(82, 187, 199, 1);
 +
            z-index: 1;
 
         }
 
         }
  
−
         .post-content {
+
         .diagnosis.row .col-3::after {
−
             flex-basis: 90vw;
+
             content: "";
−
             max-width: 100%;
+
             position: absolute;
−
             margin: 0 3vw;
+
            border-left: 3px dotted rgba(82, 187, 199, 1);
 +
             z-index: 1;
 
         }
 
         }
  
−
        /* important to the link position of the headings */
+
         .how-it-works.row .col-3.bottom::after {
−
         .post-content h2 {
+
             height: 50%;
−
             padding-top: 50px;
+
            left: 50%;
 +
            top: 50%;
 
         }
 
         }
  
−
         table {
+
         .how-it-works.row .col-3.full::after {
−
             font-size: .8rem;
+
             height: 100%;
 +
            left: calc(50% - 3px);
 
         }
 
         }
  
−
         .quote-card p {
+
         .how-it-works.row .col-3.fullRight::after {
−
             font-size: 1rem !important;
+
             height: 100%;
 +
            left: 50%;
 
         }
 
         }
−
    }
 
  
 +
        .how-it-works.row .col-3.top::after {
 +
            height: 50%;
 +
            left: calc(50% - 3px);
 +
            top: 0;
 +
            border: 2px dotted rgba(82, 187, 199, 1);
 +
        }
  
−
    @media only screen and (max-width: 1199.98px) {
 
  
−
    }
+
        .timeline div {
 +
            padding: 0;
 +
            height: 40px;
 +
        }
  
−
    @media only screen and (max-width: 1400px) {
+
        .timeline hr {
−
        .table-of-contents a {
+
            border-top: 3px solid rgba(82, 187, 199, 1);
−
             font-size: 0.8rem;
+
            background-color: transparent;
 +
             margin: 0;
 +
            top: 17px;
 +
            position: relative;
 
         }
 
         }
  
−
         .table-of-contents li + li {
+
         .timeline .col-3 {
−
             margin-top: 1.5em;
+
             display: flex;
 +
            overflow: hidden;
 
         }
 
         }
−
    }
 
−
</style>
 
  
−
</p>
+
        .timeline .corner {
−
<p>
+
            border: 3px solid rgba(82, 187, 199, 1);
 +
            width: 100%;
 +
            position: relative;
 +
            border-radius: 15px;
 +
        }
  
−
    <head>
+
         .timeline .top-right {
−
         <title>Human Practices Overview</title>
+
            left: 50%;
−
        <meta charset="utf-8">
+
            top: -50%;
−
        <meta name="viewport" content="width=device-width, initial-scale=1">
+
        }
−
        <link rel="stylesheet" href="https://2019.igem.org/Template:Tuebingen/FontAwesomeCSS">
+
−
        <style>
+
−
            .mfp-bg {
+
−
                top: 0;
+
−
                left: 0;
+
−
                width: 100%;
+
−
                height: 100%;
+
−
                z-index: 1042;
+
−
                overflow: hidden;
+
−
                position: fixed;
+
−
                background: #0b0b0b;
+
−
                opacity: 0.8;
+
−
            }
+
  
−
            .mfp-wrap {
+
        .timeline .left-bottom {
−
                top: 0;
+
            left: -50%;
−
                left: 0;
+
            top: calc(50% - 3px);
−
                width: 100%;
+
        }
−
                height: 100%;
+
−
                z-index: 1043;
+
−
                position: fixed;
+
−
                outline: none !important;
+
−
                -webkit-backface-visibility: hidden;
+
−
            }
+
  
−
            .mfp-container {
+
        .timeline .top-left {
−
                text-align: center;
+
            left: -50%;
−
                position: absolute;
+
            top: -50%;
−
                width: 100%;
+
        }
−
                height: 100%;
+
−
                left: 0;
+
−
                top: 0;
+
−
                padding: 0 8px;
+
−
                box-sizing: border-box;
+
−
            }
+
  
−
            .mfp-container:before {
+
        .timeline .right-bottom {
−
                content: '';
+
            left: 50%;
−
                display: inline-block;
+
            top: calc(50% - 3px);
−
                height: 100%;
+
        }
−
                vertical-align: middle;
+
−
            }
+
  
−
             .mfp-align-top .mfp-container:before {
+
        /* Qoutes Part*/
−
                display: none;
+
        #warnPics {
−
             }
+
             height: auto;
 +
            min-height: 20vw;
 +
             font-weight: 100;
 +
        }
  
−
            .mfp-content {
+
        #warnPics .qoutes span {
−
                position: relative;
+
            font-size: 1.5rem;
−
                display: inline-block;
+
        }
−
                vertical-align: middle;
+
−
                margin: 0 auto;
+
−
                text-align: left;
+
−
                z-index: 1045;
+
−
            }
+
  
−
            .mfp-inline-holder .mfp-content,
+
        #warnPics .qoutes {
−
            .mfp-ajax-holder .mfp-content {
+
−
                width: 100%;
+
−
                cursor: auto;
+
−
            }
+
  
−
            .mfp-ajax-cur {
+
        }
−
                cursor: progress;
+
−
            }
+
  
−
             .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+
        #qoute1 {
−
                cursor: -moz-zoom-out;
+
             background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/c/c9/T--Munich--death_background.png");
−
                cursor: -webkit-zoom-out;
+
            background-repeat: no-repeat;
−
                cursor: zoom-out;
+
            background-size: cover;
−
             }
+
            background-position: center;
 +
             color: #fff;
 +
        }
  
−
            .mfp-zoom {
+
        #qoute2 {
−
                cursor: pointer;
+
            background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/4/4e/T--Munich--WarningPic1.jpg");
−
                cursor: -webkit-zoom-in;
+
            background-repeat: no-repeat;
−
                cursor: -moz-zoom-in;
+
            background-size: cover;
−
                cursor: zoom-in;
+
            background-position: center;
−
             }
+
             color: #fff;
 +
        }
  
−
             .mfp-auto-cursor .mfp-content {
+
        #qoute3 {
−
                cursor: auto;
+
             background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/6/66/T--Munich--PHAGE.jpg");
−
             }
+
            background-repeat: no-repeat;
 +
            background-size: cover;
 +
             background-position: top;
 +
            color: #fff;
 +
        }
  
−
            .mfp-close,
+
        #whyTitle {
−
             .mfp-arrow,
+
             background: rgba(35, 35, 35, 1);
−
            .mfp-preloader,
+
        }
−
            .mfp-counter {
+
−
                -webkit-user-select: none;
+
−
                -moz-user-select: none;
+
−
                user-select: none;
+
−
            }
+
  
−
            .mfp-loading.mfp-figure {
+
        .warningContent span {
−
                display: none;
+
            font-size: 2.5rem;
−
             }
+
             font-weight: bold;
 +
        }
  
−
            .mfp-hide {
+
        .mobileText {
−
                display: none !important;
+
            font-size: 1.5rem !important;
−
             }
+
             margin-top: 3rem;
 +
        }
  
−
            .mfp-preloader {
 
−
                color: #CCC;
 
−
                position: absolute;
 
−
                top: 50%;
 
−
                width: auto;
 
−
                text-align: center;
 
−
                margin-top: -0.8em;
 
−
                left: 8px;
 
−
                right: 8px;
 
−
                z-index: 1044;
 
−
            }
 
  
−
            .mfp-preloader a {
+
        #conceptFlowTitle {
−
                color: #CCC;
+
            font-size: 2.5rem;
−
             }
+
             font-weight: bold;
 +
        }
  
−
            .mfp-preloader a:hover {
 
−
                color: #FFF;
 
−
            }
 
  
−
            .mfp-s-ready .mfp-preloader {
+
        /* START PopUp STYLES */
−
                display: none;
+
        .labelBox {
−
            }
+
            display: inline;
 +
        }
  
−
             .mfp-s-error .mfp-content {
+
        .reg {
−
                display: none;
+
             background-color: white;
−
             }
+
            display: inline;
 +
            margin: 0 auto;
 +
            width: auto;
 +
            font-size: 16.996px;
 +
            line-height: 20px;
 +
            padding: 12px 18px 13px;
 +
            -webkit-border-radius: 6px;
 +
            -moz-border-radius: 6px;
 +
            -ms-border-radius: 6px;
 +
            -o-border-radius: 6px;
 +
            border-radius: 6px;
 +
            -webkit-transition: all 0.3s ease-in-out;
 +
            -moz-transition: all 0.3s ease-in-out;
 +
            transition: all 0.3s ease-in-out;
 +
            color: #009ec6;
 +
            cursor: pointer;
 +
            border: none;
 +
             text-decoration: underline;
 +
        }
  
−
            button.mfp-close,
+
        .reg:hover {
−
             button.mfp-arrow {
+
             opacity: 0.8;
−
                overflow: visible;
+
            -webkit-transition: all 0.3s ease-in-out;
−
                cursor: pointer;
+
            -moz-transition: all 0.3s ease-in-out;
−
                background: transparent;
+
            transition: all 0.3s ease-in-out;
−
                border: 0;
+
        }
−
                -webkit-appearance: none;
+
−
                display: block;
+
−
                outline: none;
+
−
                padding: 0;
+
−
                z-index: 1046;
+
−
                box-shadow: none;
+
−
                touch-action: manipulation;
+
−
            }
+
  
−
             button::-moz-focus-inner {
+
        .pop {
−
                padding: 0;
+
             display: none;
−
                border: 0;
+
            position: absolute;
−
             }
+
            top: 75%;
 +
            max-width: 100%;
 +
            height: auto;
 +
            -webkit-border-radius: 6px;
 +
            -moz-border-radius: 6px;
 +
            -ms-border-radius: 6px;
 +
            -o-border-radius: 6px;
 +
             border-radius: 6px;
 +
            z-index: 200;
 +
            padding: 10px;
 +
            background-color: rgba(240, 240, 240, 1);
 +
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 +
        }
  
−
            .mfp-close {
+
        .pop > h1 {
−
                width: 44px;
+
            color: #009ec6;
−
                height: 44px;
+
            font-size: 100%;
−
                line-height: 44px;
+
        }
−
                position: absolute;
+
−
                right: 0;
+
−
                top: 0;
+
−
                text-decoration: none;
+
−
                text-align: center;
+
−
                opacity: 0.65;
+
−
                padding: 0 0 18px 10px;
+
−
                color: #FFF;
+
−
                font-style: normal;
+
−
                font-size: 28px;
+
−
                font-family: Arial, Baskerville, monospace;
+
−
            }
+
  
−
            .mfp-close:hover,
+
        .pop > p {
−
             .mfp-close:focus {
+
             font-size: 100%;
−
                opacity: 1;
+
            color: #777777;
−
            }
+
        }
  
−
            .mfp-close:active {
+
        .pop > span {
−
                top: 1px;
+
            cursor: pointer;
−
             }
+
            position: absolute;
 +
            top: 10px;
 +
             right: 10px;
 +
            -webkit-border-radius: 100px;
 +
            -moz-border-radius: 100px;
 +
            color: #777777;
 +
            width: 30px;
 +
            height: 30px;
 +
        }
  
−
            .mfp-close-btn-in .mfp-close {
+
        /* END PopUp STYLES */
−
                color: #333;
+
−
            }
+
  
−
            .mfp-image-holder .mfp-close,
+
        .mobileTitle {
−
             .mfp-iframe-holder .mfp-close {
+
             font-size: 3.5rem !important;
−
                color: #FFF;
+
        }
−
                right: -6px;
+
−
                text-align: right;
+
−
                padding-right: 6px;
+
−
                width: 100%;
+
−
            }
+
  
−
            .mfp-counter {
+
        .readButton, .readButton:visited {
−
                position: absolute;
+
            color: #17a2b8;
−
                top: 0;
+
        }
−
                right: 0;
+
−
                color: #CCC;
+
−
                font-size: 12px;
+
−
                line-height: 18px;
+
−
                white-space: nowrap;
+
−
            }
+
  
−
            .mfp-arrow {
+
        .readButton:hover {
−
                position: absolute;
+
            color: white;
−
                opacity: 0.65;
+
        }
−
                margin: 0;
+
−
                top: 50%;
+
−
                margin-top: -55px;
+
−
                padding: 0;
+
−
                width: 90px;
+
−
                height: 110px;
+
−
                -webkit-tap-highlight-color: transparent;
+
−
            }
+
  
−
            .mfp-arrow:active {
+
        .showCase .row {
−
                margin-top: -54px;
+
            padding-left: 10vw;
 +
            padding-right: 10vw;
 +
        }
 +
 
 +
        @media only screen and (max-width: 767.98px) {
 +
            #videoBox #videoShow {
 +
                position: relative;
 
             }
 
             }
  
−
             .mfp-arrow:hover,
+
             #PhactoryTitle {
−
            .mfp-arrow:focus {
+
                 font-size: 4rem;
−
                 opacity: 1;
+
 
             }
 
             }
  
−
             .mfp-arrow:before,
+
             #PhactoryText {
−
            .mfp-arrow:after {
+
                 font-size: 1.5rem;
−
                 content: '';
+
−
                display: block;
+
−
                width: 0;
+
−
                height: 0;
+
−
                position: absolute;
+
−
                left: 0;
+
−
                top: 0;
+
−
                margin-top: 35px;
+
−
                margin-left: 35px;
+
−
                border: medium inset transparent;
+
 
             }
 
             }
  
−
             .mfp-arrow:after {
+
             .warningContent span {
−
                 border-top-width: 13px;
+
                 font-size: 1.5rem;
−
                border-bottom-width: 13px;
+
−
                top: 8px;
+
 
             }
 
             }
  
−
             .mfp-arrow:before {
+
             #warnPics .qoutes {
−
                 border-top-width: 21px;
+
                 font-size: 1rem;
−
                border-bottom-width: 21px;
+
−
                opacity: 0.7;
+
 
             }
 
             }
  
−
             .mfp-arrow-left {
+
             #compareBox img {
−
                 left: 0;
+
                 max-height: 20vh;
 +
                width: auto;
 
             }
 
             }
  
−
             .mfp-arrow-left:after {
+
             .mobileTitle {
−
                 border-right: 17px solid #FFF;
+
                 font-size: 3rem !important;
−
                margin-left: 31px;
+
 
             }
 
             }
  
−
             .mfp-arrow-left:before {
+
             #conceptFlowTitle {
−
                 margin-left: 25px;
+
                 font-size: 2rem;
−
                 border-right: 27px solid #3F3F3F;
+
                 font-weight: bold;
 
             }
 
             }
  
−
             .mfp-arrow-right {
+
             #conceptFlow h5 {
−
                 right: 0;
+
                 font-size: 1.5rem;
 
             }
 
             }
  
−
             .mfp-arrow-right:after {
+
             #conceptFlow span {
−
                 border-left: 17px solid #FFF;
+
                 font-size: 1rem;
−
                margin-left: 39px;
+
 
             }
 
             }
  
−
             .mfp-arrow-right:before {
+
             .how-it-works.row {
−
                 border-left: 27px solid #3F3F3F;
+
                 height: auto;
 
             }
 
             }
  
−
             .mfp-iframe-holder {
+
            /* FlowChart*/
−
                 padding-top: 40px;
+
             .circleO {
−
                 padding-bottom: 40px;
+
                 height: 40px;
 +
                 width: 40px;
 
             }
 
             }
  
−
             .mfp-iframe-holder .mfp-content {
+
             .circleO img {
−
                 line-height: 0;
+
                 max-height: 25px;
−
                 width: 100%;
+
                 width: auto;
−
                max-width: 900px;
+
 
             }
 
             }
  
−
             .mfp-iframe-holder .mfp-close {
+
             .circleS {
−
                 top: -40px;
+
                 height: 40px;
 +
                width: 40px;
 
             }
 
             }
  
−
             .mfp-iframe-scaler {
+
             .circleS img {
−
                 width: 100%;
+
                 max-height: 25px;
−
                height: 0;
+
                 width: auto;
−
                 overflow: hidden;
+
−
                padding-top: 56.25%;
+
 
             }
 
             }
  
−
             .mfp-iframe-scaler iframe {
+
             .circleM {
−
                 position: absolute;
+
                 height: 50px;
−
                display: block;
+
                 width: 50px;
−
                top: 0;
+
−
                left: 0;
+
−
                 width: 100%;
+
−
                height: 100%;
+
−
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+
−
                background: #000;
+
 
             }
 
             }
  
−
             /* Main image in popup */
+
             .circleM img {
−
            img.mfp-img {
+
                max-height: 35px;
 
                 width: auto;
 
                 width: auto;
−
                max-width: 100%;
 
−
                height: auto;
 
−
                display: block;
 
−
                line-height: 0;
 
−
                box-sizing: border-box;
 
−
                padding: 40px 0 40px;
 
−
                margin: 0 auto;
 
 
             }
 
             }
  
−
            /* The shadow behind the image */
+
             .circleL {
−
             .mfp-figure {
+
                 height: 60px;
−
                 line-height: 0;
+
                width: 60px;
 
             }
 
             }
  
−
             .mfp-figure:after {
+
             .circleL img {
−
                 content: '';
+
                 max-height: 45px;
−
                position: absolute;
+
−
                left: 0;
+
−
                top: 40px;
+
−
                bottom: 40px;
+
−
                display: block;
+
−
                right: 0;
+
 
                 width: auto;
 
                 width: auto;
−
                height: auto;
 
−
                z-index: -1;
 
−
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 
−
                background: #444;
 
 
             }
 
             }
  
−
             .mfp-figure small {
+
             .reg {
−
                 color: #BDBDBD;
+
                 padding: 0;
−
                display: block;
+
−
                font-size: 12px;
+
−
                line-height: 14px;
+
 
             }
 
             }
  
−
             .mfp-figure figure {
+
             .mobileText {
−
                 margin: 0;
+
                font-size: 1rem !important;
 +
                 margin-top: 0;
 
             }
 
             }
  
−
             .mfp-bottom-bar {
+
             .showCase .row {
−
                 margin-top: -36px;
+
                 padding: 0;
−
                position: absolute;
+
−
                top: 100%;
+
−
                left: 0;
+
−
                width: 100%;
+
−
                cursor: auto;
+
 
             }
 
             }
 +
        }
  
−
            .mfp-title {
+
        @media only screen and (max-width: 991.98px) {
−
                text-align: left;
+
        }
−
                line-height: 18px;
+
−
                color: #F3F3F3;
+
−
                word-wrap: break-word;
+
−
                padding-right: 36px;
+
−
            }
+
  
−
            .mfp-image-holder .mfp-content {
+
        @media only screen and (max-width: 1199.98px) {
−
                max-width: 100%;
+
        }
−
            }
+
    </style>
  
−
            .mfp-gallery .mfp-image-holder .mfp-figure {
+
    <script>
−
                cursor: pointer;
+
        // Scroll Down Icon
−
             }
+
        $(document).ready(function () {
 +
            // Add smooth scrolling to all links
 +
             $("#goTo").on('click', function (event) {
  
−
            @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
+
                 // Make sure this.hash has a value before overriding default behavior
−
                 /**
+
                 if (this.hash !== "") {
−
      * Remove all paddings around the image on small screen
+
                     // Prevent default anchor click behavior
−
      */
+
                     event.preventDefault();
−
                 .mfp-img-mobile .mfp-image-holder {
+
−
                     padding-left: 0;
+
−
                     padding-right: 0;
+
−
                }
+
  
−
                .mfp-img-mobile img.mfp-img {
+
                    // Store hash
−
                     padding: 0;
+
                     var hash = this.hash;
−
                }
+
  
−
                .mfp-img-mobile .mfp-figure:after {
+
                    // Using jQuery's animate() method to add smooth page scroll
−
                     top: 0;
+
                     // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
−
                     bottom: 0;
+
                     $('html, body').animate({
−
                }
+
                        scrollTop: $(hash).offset().top
 +
                    }, 800, function () {
  
−
                .mfp-img-mobile .mfp-figure small {
+
                        // Add hash (#) to URL when done scrolling (default click behavior)
−
                    display: inline;
+
                        window.location.hash = hash;
−
                     margin-left: 5px;
+
                     });
−
                 }
+
                 } // End if
 +
            });
 +
        });
  
−
                .mfp-img-mobile .mfp-bottom-bar {
 
−
                    background: rgba(0, 0, 0, 0.6);
 
−
                    bottom: 0;
 
−
                    margin: 0;
 
−
                    top: auto;
 
−
                    padding: 3px 5px;
 
−
                    position: fixed;
 
−
                    box-sizing: border-box;
 
−
                }
 
  
−
                .mfp-img-mobile .mfp-bottom-bar:empty {
+
        $(document).ready(function () {
−
                    padding: 0;
+
            $(".reg").click(function () {
−
                 }
+
                $(".pop").fadeOut(100);
 +
                 $(this).next().fadeIn(300);
 +
            });
  
−
                .mfp-img-mobile .mfp-counter {
+
            $(".pop > span, .pop").click(function () {
−
                    right: 5px;
+
                $(".pop").fadeOut(300);
−
                    top: 3px;
+
            });
−
                }
+
        });
  
−
                .mfp-img-mobile .mfp-close {
+
    </script>
−
                    top: 0;
+
−
                    right: 0;
+
−
                    width: 35px;
+
−
                    height: 35px;
+
−
                    line-height: 35px;
+
−
                    background: rgba(0, 0, 0, 0.6);
+
−
                    position: fixed;
+
−
                    text-align: center;
+
−
                    padding: 0;
+
−
                }
+
−
            }
+
  
−
            @media all and (max-width: 900px) {
+
<div id="videoBox" class="text-center" style="position: relative;  min-height:5%; width:100%; margin-top: 50px">
−
                .mfp-arrow {
+
    <video id="videoShow" playsinline autoplay muted id="myVideo" style="min-height:5%; width:100%; margin-top: 50px">
−
                    -webkit-transform: scale(0.75);
+
        <source src="https://2019.igem.org/wiki/images/c/c1/T--Tuebingen--cover_video.mp4" type="video/mp4"
−
                    transform: scale(0.75);
+
                 style="width: 100%;">
−
                 }
+
        Your browser does not support HTML5 video.
 +
    </video>
  
−
                .mfp-arrow-left {
+
</div>
−
                    -webkit-transform-origin: 0;
+
−
                    transform-origin: 0;
+
−
                }
+
  
−
                .mfp-arrow-right {
 
−
                    -webkit-transform-origin: 100%;
 
−
                    transform-origin: 100%;
 
−
                }
 
  
−
                .mfp-container {
+
<div id="whyTitle" class="container-fluid jumbotron jumbotron-fluid text-center mb-0 p-0 align-items-center text-light" style="overflow-x: hidden; overflow-y: hidden; font-family: 'Righteous'">
−
                    padding-left: 6px;
+
<div data-aos="zoom-out-left"
−
                    padding-right: 6px;
+
    data-aos-offset="200"
−
                }
+
    data-aos-delay="50"
−
             }
+
    data-aos-duration="2000"
 +
    data-aos-easing="ease-in-out-cubic"
 +
    data-aos-mirror="true"
 +
    data-aos-once="false">
 +
    <div class="row pt-5 pb-3 ">
 +
        <div class="warningContent col-12">
 +
             <span class="align-middle">GLP.exe - a safe and effective treatment for Diabetes Mellitus Type II</span>
 +
        </div>
 +
    </div>
  
−
            .mfp-zoom-out {
+
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
−
                /* start state */
+
        <div class="col-12 col-md-6">
−
                /* animate in */
+
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/3/3c/T--Tuebingen--Diabetes-Treatment-transparent-Landing-Page.png"
−
                /* animate out */
+
                alt="meetUp" style="padding-left: 6vw;">
−
             }
+
        </div>
 +
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
 +
             <p class="text-justify  mobileText">Several treatment options for Type II Diabetes Mellitus
 +
                have been developed in recent years significantly improving the patients' insulin level.
 +
            </p>
  
−
             .mfp-zoom-out .mfp-with-anim {
+
             <p class="text-justify  mobileText">
−
                 opacity: 0;
+
                 Hence, the diagnosis of Type II Diabetes Mellitus is no longer a death sentence.
−
                transition: all 0.3s ease-in-out;
+
            </p>
−
                transform: scale(1.3);
+
        </div>
−
            }
+
    </div>
 +
</div>
  
−
            .mfp-zoom-out.mfp-bg {
+
    <div class="row pt-5 pb-3 ">
−
                opacity: 0;
+
        <div class="warningContent col-12 slide-in">
−
                transition: all 0.3s ease-out;
+
             <span class="align-middle">Yet...</span>
−
             }
+
        </div>
 +
    </div>
  
−
            .mfp-zoom-out.mfp-ready .mfp-with-anim {
+
    <div data-aos="zoom-out-right"
−
                opacity: 1;
+
    data-aos-offset="200"
−
                transform: scale(1);
+
    data-aos-delay="50"
−
            }
+
    data-aos-duration="2000"
 +
    data-aos-easing="ease-in-out-cubic"
 +
    data-aos-mirror="true"
 +
    data-aos-once="false">
 +
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
 +
        <div class="col-12 col-md-6">
 +
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/1/15/T--Tuebingen--Injection-Scheme-transparent-Landing-Page.png"
 +
                alt="meetUp" style="padding-left: 6vw;">
 +
        </div>
  
−
            .mfp-zoom-out.mfp-ready.mfp-bg {
+
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
−
                opacity: 0.8;
+
             <h2 class="display-4 mobileTitle">Current Drugs</h2>
−
             }
+
            <p class="text-justify mobileText">are expensive, require fine tuning and daily shots.
 +
                Moreover, they have severe side-effects, causing patients to skip doses.</p>
  
−
             .mfp-zoom-out.mfp-removing .mfp-with-anim {
+
             <p class="text-justify mobileText">“Many patients don’t want to use insulin. They don’t want
−
                 transform: scale(1.3);
+
                 to do finger sticks and they’re afraid of hypoglycemia.”<br>
−
                opacity: 0;
+
             </p>
−
             }
+
  
−
             .mfp-zoom-out.mfp-removing.mfp-bg {
+
             <p class="text-justify mobileText">
−
                 opacity: 0;
+
                “To fight the global diabetes pandemic, we would ideally have an accessible cost-effective
−
             }
+
                easily-compliant intervention that has high clinical efficacy and that is free of adverse side effects.”<br><br>
−
         </style>
+
                 Prof. Harold Lebovitz, State University of New York Health Science Center, Brooklyn, New York
 +
             </p>
 +
         </div>
 +
    </div>
 +
    </div>
  
−
     </head>
+
     <div class="row pt-5 pb-3 ">
 +
        <div class="warningContent col-12">
 +
            <span class="align-middle">However...</span>
 +
        </div>
 +
    </div>
  
−
<body style="">
+
    <div data-aos="zoom-out-left"
 +
    data-aos-offset="200"
 +
    data-aos-delay="50"
 +
    data-aos-duration="2000"
 +
    data-aos-easing="ease-in-out-cubic"
 +
    data-aos-mirror="true"
 +
    data-aos-once="false">
  
 +
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
 +
        <div class="col-12 col-md-6">
 +
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/e/e3/T--Tuebingen--Our-Probiotic-transparent-Landing-page.png"
 +
                alt="meetUp" style="padding-left: 6vw;">
 +
        </div>
  
−
<section id="nav-placeholder">
+
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
−
    <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
+
             <h2 class="display-4 mobileTitle">There's a solution!</h2>
−
        style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
+
             <p class="text-justify mobileText">Our therapeutic agent is a probiotic secreting incretin
−
        <a class="navbar-brand" href="https://2019.igem.org/Team:Tuebingen">
+
                 mimetics placed in the patients intestine by oral administration of capsules. GLP-1 and Exendin-4, our
−
             <img src="https://2019.igem.org/wiki/images/2/2a/T--Tuebingen--white_logo_animated.gif" alt="logo"
+
                 main actors, cause an increase in insulin secretion, if the cell has already taken up sugar.</p>
−
                style="width:70px;">
+
−
            <h5 class="d-inline ml-3">GLP.exe</h5>
+
−
        </a>
+
−
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
+
−
             <span class="navbar-toggler-icon"></span>
+
−
        </button>
+
−
        <div class="collapse navbar-collapse justify-content-around" id="collapsibleNavbar">
+
−
            <ul class="navbar-nav">
+
−
                 <li id="homeButton" class="nav-item mx-3">
+
−
                    <a class="nav-link" href="https://2019.igem.org/Team:Tuebingen">HOME</a>
+
−
                 </li>
+
−
                <li id="ourStoryButton" class="nav-item mx-3">
+
−
                    <a class="nav-link" href="https://2019.igem.org/Team:Tuebingen/story">OUR STORY</a>
+
−
                </li>
+
  
−
                <li class="nav-item dropdown mx-3">
+
            <p class="text-justify mobileText">This enables an easier therapy where a regular intake of
−
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+
                 medicals are not required.</p>
−
                        PROJECT
+
−
                    </a>
+
−
                    <div class="dropdown-menu">
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/description">Description</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/incretin">Incretin</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/kill_switch">Kill Switch</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/cpp">Cell Penetrating Peptides</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/nissle">Nissle</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/model">Model</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/software">Software</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/notebook">Notebook</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/results">Results</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/demonstrate">Demonstrate</a>
+
−
                    </div>
+
−
                 </li>
+
−
                <li class="nav-item dropdown mx-3">
+
−
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+
−
                        PARTS
+
−
                    </a>
+
−
                    <div class="dropdown-menu">
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/parts_overview">Parts Overview</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/parts_basic">Basic Parts</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/parts_improved">Improved Parts</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/parts_composite">Composite Parts</a>
+
−
                    </div>
+
−
                </li>
+
  
−
                <li class="nav-item mx-3">
+
            <p class="text-justify mobileText">Improved cell penetrating peptides with the use of
−
                    <a class="nav-link" href="https://2019.igem.org/Team:Tuebingen/safety">SAFETY</a>
+
                artificial intelligence allow for an efficient and safe transport of our effectors into the cells.</p>
−
                </li>
+
        </div>
 +
    </div>
 +
    </div>
  
−
                <li class="nav-item dropdown mx-3">
+
    <div class="row pt-5 pb-3 ">
−
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+
        <div class="warningContent col-12">
−
                        PEOPLE
+
            <span class="align-middle">Safety</span>
−
                    </a>
+
        </div>
−
                    <div class="dropdown-menu">
+
    </div>
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/team">Team</a>
+
−
                        <a class="dropdown-item"
+
−
                          href="https://2019.igem.org/Team:Tuebingen/collaborations">Collaborations</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/attributions">Attributions</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/sponsors">Sponsors</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/for_judges">For Judges</a>
+
−
                    </div>
+
−
                </li>
+
  
−
                <li class="nav-item dropdown mx-3">
+
    <div data-aos="zoom-out-right"
−
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+
    data-aos-offset="200"
−
                        HUMAN PRACTICES
+
    data-aos-delay="50"
−
                    </a>
+
    data-aos-duration="2000"
−
                    <div class="dropdown-menu">
+
    data-aos-easing="ease-in-out-cubic"
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/hp_overview">Overview</a>
+
    data-aos-mirror="true"
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/education">Educational Outreach</a>
+
    data-aos-once="false">
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/experts">Experts</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/sdg">UN Sustainable Development Goals</a>
+
−
                    </div>
+
−
                </li>
+
−
                <li class="nav-item dropdown mx-3">
+
−
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+
−
                        AWARDS
+
−
                    </a>
+
−
                    <div class="dropdown-menu">
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/entrepreneurship">Entrepreneurship</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/measurement">Measurement</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/model">Model</a>
+
−
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/software">Software</a>
+
−
                    </div>
+
−
                </li>
+
  
−
                <li class="nav-item mx-3">
+
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
−
                    <a class="nav-link" href="https://2019.igem.org/Team:Tuebingen/gallery" target="_blank">Gallery</a>
+
        <div class="col-12 col-md-6">
−
                </li>
+
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/6/6d/T--Tuebingen--Cas3-system-transparent-Landing-page.png"
 +
                alt="meetUp" style="padding-left: 6vw;">
 +
        </div>
  
−
                <li class="nav-item mx-3">
+
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
−
                    <a class="nav-link" href="http://igem.org/2018_Judging_Form?team=Munich" target="_blank">JUDGING
+
            <h2 class="display-4 mobileTitle">is our highest priority!</h2>
−
                        FORM ⇗</a>
+
            <p class="text-justify mobileText">Therefore, we developed a novel, Cas3 based kill-switch
−
                 </li>
+
                 mechanism. The flexible system uses three regulators inspired by the human intestines: temperature,
 +
                availability of fatty acids in form of Acyl CoA and N-Acetyl-Glucosamin. </p>
  
−
                <li class="nav-item mx-1 pt-2">
+
            <p class="text-justify mobileText">
−
                    <a href="https://www.facebook.com/igemtuebingen/" class="fa fa-facebook" target="_blank"></a>
+
                If the conditions of our regulatory system are no longer met, Cas3 will be degrading all genetic
−
                </li>
+
                information.
−
                <li class="nav-item mx-1 pt-2">
+
            </p>
−
                    <a href="https://twitter.com/iGEMTuebingen" class="fa fa-twitter" target="_blank"></a>
+
        </div>
−
                </li>
+
    </div>
 +
    </div>
  
−
             </ul>
+
    <div class="row pt-5 pb-3 ">
 +
        <div class="warningContent col-12">
 +
             <span class="align-middle">Additionally</span>
 
         </div>
 
         </div>
−
     </nav>
+
     </div>
−
</section>
+
−
<script>
+
−
    var url = window.location.href;
+
−
    $(function () {
+
−
        $('.nav-link[href="' + url + '"]').addClass("active");
+
−
        $('.dropdown-item[href="' + url + '"]').addClass("active");
+
−
        $('.dropdown-item[href="' + url + '"]').parent().parent().addClass("active");
+
−
    });
+
−
</script>
+
−
<script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&ctype=text/javascript"></script>
+
−
<script src="https://2019.igem.org/Team:Tuebingen/popperjs?action=raw&ctype=text/javascript"></script>
+
−
<script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&ctype=text/javascript"></script>
+
−
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
+
−
<script src="https://2019.igem.org/Team:Tuebingen/d3?action=raw&amp;ctype=text/javascript"></script>
+
−
<script src="https://2019.igem.org/Team:Tuebingen/topojson?action=raw&amp;ctype=text/javascript"></script>
+
−
</body>
+
−
<style>
+
  
−
     .pictureTitle {
+
     <div data-aos="zoom-out-left"
−
        background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .5)), url("http://2018.igem.org/wiki/images/2/21/T--Munich--header_projectdesign.png");
+
    data-aos-offset="200"
−
        background-repeat: no-repeat;
+
    data-aos-delay="50"
−
        background-size: cover;
+
    data-aos-duration="2000"
−
        background-position: center;
+
    data-aos-easing="ease-in-out-cubic"
−
     }
+
     data-aos-mirror="true"
 +
    data-aos-once="false">
  
 +
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
 +
        <div class="col-12 col-md-6">
 +
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--EcN-Charakterisierung-transparent-Landing-page.png"
 +
                alt="meetUp" style="padding-left: 6vw;">
 +
        </div>
  
−
    @media only screen and (max-width: 575.98px) {
+
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
−
    }
+
            <h2 class="display-4 mobileTitle" style="overflow-x: visible">An in depth E.coli Nissle characterization</h2>
 +
            <p class="text-justify mobileText">Despite the fact that E. Coli Nissle is an already
 +
                approved probiotic, it's surprisingly badly characterized.</p>
  
−
    @media only screen and (max-width: 767.98px) {
+
            <p class="text-justify mobileText">
−
    }
+
                Hence, we provide the first metabolic model of E. coli Nissle and optimize it's growth for various
 +
                growth media. Furthermore, we predicted the interaction and competition of E. coli Nissle with common competitors for various fluxes in the gut.
 +
            </p>
  
−
    @media only screen and (max-width: 991.98px) {
+
            <p class="text-justify mobileText">
−
     }
+
                Finally, we carried out a series of RNA-Seq experiments to assess the adaptions and reactions of E. coli
 +
                Nissle to aerobic, as well as anaerobic occurring stress factors.
 +
            </p>
 +
        </div>
 +
    </div>
 +
     </div>
  
−
     @media only screen and (max-width: 1199.98px) {
+
     <div class="row pt-5 pb-3 ">
−
     }
+
        <div class="warningContent col-12 slide-in">
 +
            <span class="align-middle">Bringing it all together</span>
 +
        </div>
 +
     </div>
  
−
     /*
+
     <div data-aos="zoom-out-right"
−
========================
+
    data-aos-offset="200"
−
     BUTTON STYLE BEGIN
+
    data-aos-delay="50"
−
========================
+
    data-aos-duration="2000"
−
*/
+
    data-aos-easing="ease-in-out-cubic"
 +
    data-aos-mirror="true"
 +
     data-aos-once="false">
  
−
.btn-link {
+
    <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
−
        font-weight: 400;
+
         <div class="col-12 col-md-6">
−
        color: #007bff;
+
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/3/3d/T--Tuebingen--New-Approach-transparent-Landing-page.png"
−
         background-color: transparent
+
                alt="meetUp" style="padding-left: 6vw;">
−
    }
+
        </div>
  
−
    .btn-link:hover {
 
−
        color: #0056b3;
 
−
        text-decoration: underline;
 
−
        background-color: transparent;
 
−
        border-color: transparent
 
−
    }
 
  
−
    .btn-link.focus, .btn-link:focus {
+
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
−
        text-decoration: underline;
+
            <h2 class="display-4 mobileTitle">Our work lays the foundation for an innovative, unprecedented approach to treat Diabetes Mellitus Type II.</h2>
−
        border-color: transparent;
+
         </div>
−
         box-shadow: none
+
     </div>
−
     }
+
</div>
  
−
    .btn-link.disabled, .btn-link:disabled {
+
</div>
−
        color: #6c757d;
+
−
        pointer-events: none
+
−
    }
+
  
−
    .btn-link{
+
<style>
−
opacity: 0.8;
+
 
−
text-decoration: none;
+
.testclasse {
−
color: white;
+
  margin: 0;
 +
  background-color: #2ecc71;
 +
  background-image: radial-gradient(#2ecc71 20%, #1b7a43 50%, rgba(0, 0, 0, 0.5) 100%);
 +
  background-size: 120%;
 +
  background-position: center;
 +
  font-family: "Barlow Condensed", sans-serif;
 +
  -webkit-animation: tighten-vinette ease-out 1800ms forwards;
 +
          animation: tighten-vinette ease-out 1800ms forwards;
 
}
 
}
−
.btn-link:hover{
+
 
−
opacity: 1;
+
.babbelbubu .logo .kokosnusss {
−
text-decoration: none;
+
    width: 120%; margin-left: -10%; margin-top: -45%;
−
     color: rgba(105, 202, 98, 1.1);
+
  pointer-events: none;
 +
  height: 90vh;
 +
     top: 0;
 +
    bottom: 0;
 +
  right: 0;
 +
  left: 0;
 +
  position: relative;
 +
  opacity: .6;
 +
  z-index: 20;
 +
  background-size: cover;
 +
  background-position: center;
 +
  background-image: url("https://static.comicvine.com/uploads/original/11124/111240517/4986890-4700382785-29908.jpg");
 
}
 
}
−
.btn-link:focus{
+
 
−
opacity: 1;
+
.babbelbubu {
−
text-decoration: none;
+
  height: 80%;
−
    color: rgba(105, 202, 98, 1.1);
+
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 
}
 
}
−
.card-header{
+
 
−
background-color: rgba(50,50,50,1);
+
.logo {
 +
  cursor: pointer;
 +
  text-align: center;
 
}
 
}
−
.card button{
+
.logo:hover .restart {
−
width: 100%;
+
  opacity: .8;
−
font-size: 1.5rem;
+
 
}
 
}
−
    /*
 
−
========================
 
−
    BUTTON STYLE END
 
−
========================
 
−
*/
 
  
−
    /*
+
.restart {
−
========================
+
  color: #fff;
−
      BUTTON ONE
+
  margin-top: 20px;
−
========================
+
  font-size: 1.5rem;
−
*/
+
  text-transform: uppercase;
−
.btn-one {
+
  letter-spacing: -.08rem;
−
color: rgba(105, 202, 98, 1.1);
+
  transition: opacity 150ms linear;
−
transition: all 0.3s;
+
−
position: relative;
+
 
}
 
}
−
.btn-one span {
+
 
−
transition: all 0.3s;
+
.marvel, .studios {
 +
  position: relative;
 +
  color: #fff;
 +
  text-transform: uppercase;
 +
  letter-spacing: -.2rem;
 +
  font-size: 5rem;
 +
  margin: .05rem .05rem .5rem;
 +
  padding: 0 0.4rem;
 +
  display: inline-block;
 +
    margin-top: 30%;
 
}
 
}
−
.btn-one::before {
+
 
−
content: '';
+
.studios {
−
position: absolute;
+
  font-weight: 500;
−
bottom: 0;
+
  letter-spacing: -.3rem;
−
left: 0;
+
  -webkit-transform: translateX(-95px);
−
width: 100%;
+
          transform: translateX(-95px);
−
height: 100%;
+
−
z-index: 1;
+
−
opacity: 0;
+
−
transition: all 0.3s;
+
−
border-top-width: 1px;
+
−
border-bottom-width: 1px;
+
−
border-top-style: solid;
+
−
border-bottom-style: solid;
+
−
border-top-color: rgba(105, 202, 98, 1.1);
+
−
border-bottom-color: rgba(105, 202, 98, 1.1);
+
−
transform: scale(0.1, 1);
+
 
}
 
}
−
.btn-one:hover span {
+
 
−
letter-spacing: 2px;
+
.marvel {
 +
  z-index: 10;
 +
  font-weight: 800;
 +
  -webkit-transform: translateX(95px);
 +
          transform: translateX(95px);
 
}
 
}
−
.btn-one:hover::before {
+
.marvel:before {
−
opacity: 1;
+
  z-index: -10;
−
transform: scale(1, 1);
+
  content: '';
 +
  display: block;
 +
  background-color: #2ecc71;
 +
  border: solid rgba(255, 255, 255, 0.2) 1px;
 +
  height: 100%;
 +
  width: 100%;
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 
}
 
}
−
.btn-one::after {
+
 
−
content: '';
+
.studios:after, .studios:before {
−
position: absolute;
+
  content: '';
−
bottom: 0;
+
  display: block;
−
left: 0;
+
  height: 3px;
−
width: 100%;
+
  position: absolute;
−
height: 100%;
+
  background-color: #fff;
−
z-index: 1;
+
  display: block;
−
transition: all 0.3s;
+
  left: 0.4rem;
−
background-color: rgba(255,255,255,0.05);
+
  right: 0.4rem;
 
}
 
}
−
.btn-one:hover::after {
 
−
opacity: 0;
 
−
transform: scale(0.1, 1);
 
−
/*
 
−
========================
 
−
      BUTTON ONE END
 
−
========================
 
−
*/
 
−
</style>
 
  
 +
.studios:before {
 +
  top: 0;
 +
}
 +
.studios:after {
 +
  bottom: 0;
 +
}
  
−
<style>
+
@media screen and (max-width: 900px) and (max-height: 1170px) {
−
/*
+
    .babbelbubu .logo .kokosnusss {
−
========================
+
        margin-top: -90%;
−
      GLOBUS
+
         width: 100%;
−
========================
+
        margin-left: 0;
−
*/
+
    }
−
        .globus-bg {
+
}
−
            min-height: 100vh;
+
−
            background: hsl(215, 40%, 20%);
+
−
            /* center the viz in the viewport */
+
−
            display: flex;
+
−
            justify-content: center;
+
−
            align-items: center;
+
−
         }
+
−
        .viz {
+
−
            max-width: 500px;
+
−
            width: 90vw;
+
−
            cursor: grab;
+
−
        }
+
−
        .viz:active {
+
−
            cursor: grabbing;
+
−
        }
+
−
</style>
+
  
−
<div class="pictureTitle container-fluid text-center mb-0 align-items-center text-light">
+
@media screen and (max-width: 500px) and (max-height: 750px) {
 +
    .babbelbubu .logo .kokosnusss {
 +
        margin-top: -120%;
 +
        width: 100%;
 +
        margin-left: 0;
 +
    }
  
−
     <div class="display-2 mb-0">
+
     .marvel, .studios {
−
         Project Design
+
         font-size: 3rem;
−
     </div>
+
     }
−
    <h4></h4>
+
}
  
−
</div>
+
@media screen and (max-width: 420px) and (max-height: 850px) {
 +
    .babbelbubu .logo .kokosnusss {
 +
        margin-top: -140%;
 +
        width: 100%;
 +
        margin-left: 0;
 +
    }
  
−
 
+
     .marvel, .studios {
−
<div class="glpContainer">
+
         font-size: 3rem;
−
     <aside id="glpContentsOuter">
+
−
        <aside id="phaContents" class="table-of-contents">
+
−
            <!-- will be generated with JS -->
+
−
        </aside>
+
−
    </aside>
+
−
 
+
−
    <main class="post-content">
+
−
 
+
−
        <h3>The Problem</h3>
+
−
 
+
−
<div class="globus-bg" id="globus_div">
+
−
    <div class="viz"></div>
+
−
</div>
+
−
 
+
−
<!--
+
−
GLOBUS BEGIN
+
−
-->
+
−
<script>
+
−
    /* globals d3 topojson */
+
−
    // include an svg wide as tall
+
−
    const width = 800;
+
−
    const height = 800;
+
−
    const world = d3
+
−
        .select('.viz')
+
−
        .append('svg')
+
−
        .attr('viewBox', `0 0 ${width} ${height}`);
+
−
    // function called as the geometries are retrieved from the world atlas
+
−
    function mapData(countries, landings) {
+
−
         // set up a projection using the size of the svg as a reference
+
−
        const projection = d3
+
−
        // for the other projections browse the docs
+
−
        // https://github.com/d3/d3-geo/blob/master/README.md#geoOrthographic
+
−
            .geoOrthographic()
+
−
            .fitSize([width, height], countries);
+
−
        // create a generator function to use the projection in order to map the geometries to the svg
+
−
        const geoPath = d3
+
−
            .geoPath()
+
−
            .projection(projection);
+
−
        // include the world elements in a group
+
−
        const group = world.append('g');
+
−
        // sphere for the world's outline
+
−
        group
+
−
            .append('path')
+
−
            .attr('class', 'sphere')
+
−
            .datum({type: 'Sphere'})
+
−
            .attr('d', geoPath)
+
−
            .attr('fill', 'hsl(215, 40%, 40%)');
+
−
        // countries
+
−
        group
+
−
            .selectAll('path.country')
+
−
            .data(countries.features)
+
−
            .enter()
+
−
            .append('path')
+
−
            .attr('class', 'country')
+
−
            .attr('d', geoPath)
+
−
            .attr('fill', 'hsl(215, 40%, 50%)');
+
−
        // graticule
+
−
        const geoGraticule = d3
+
−
            .geoGraticule();
+
−
        group
+
−
            .append('path')
+
−
            .attr('class', 'graticule')
+
−
            .attr('d', geoPath(geoGraticule()))
+
−
            .attr('stroke', 'hsl(215, 40%, 0%)')
+
−
            .attr('fill', 'none')
+
−
            .attr('opacity', 0.15);
+
−
        // landing sites
+
−
        group
+
−
            .selectAll('path.landing')
+
−
            .data(landings.features)
+
−
            .enter()
+
−
            .append('path')
+
−
            .attr('class', 'landing')
+
−
            .attr('d', geoPath)
+
−
            .attr('fill', 'hsl(40, 40%, 60%)');
+
−
        // allow to rotate the projection following mouse events
+
−
        const rotation = {
+
−
            x: 0,
+
−
            y: 0,
+
−
        };
+
−
        let isMouseDown = false;
+
−
        d3.select('globus_div')
+
−
            .on('mouseup', () => {
+
−
                isMouseDown = false;
+
−
            })
+
−
            .on('mouseleave', () => {
+
−
                isMouseDown = false;
+
−
            });
+
−
        world
+
−
            .on('mousedown', () => {
+
−
                isMouseDown = true;
+
−
            })
+
−
            .on('mouseup', () => {
+
−
                isMouseDown = false;
+
−
            })
+
−
            .on('mousemove', () => {
+
−
                    // update the rotation using the horizontal and vertical movement
+
−
                    // ! greater y values should be reflected in a rotation in the opposite direction
+
−
                    const {movementX, movementY} = d3.event;
+
−
                    rotation.x += movementX;
+
−
                    rotation.y -= movementY;
+
−
                    // update the projection and the d attribute of all elements which rely on the projection
+
−
                    projection
+
−
                        .rotate([rotation.x, rotation.y]);
+
−
                    d3.select('path.sphere')
+
−
                        .attr('d', geoPath);
+
−
                    d3.selectAll('path.country')
+
−
                        .attr('d', geoPath);
+
−
                    d3.selectAll('path.graticule')
+
−
                        .attr('d', geoPath(geoGraticule()));
+
−
                    d3.selectAll('path.landing')
+
−
                        .attr('d', geoPath);
+
−
            });
+
 
     }
 
     }
−
    // topojson describing the world atlas
+
}
−
    const worldAtlas = 'https://unpkg.com/world-atlas@1.1.4/world/110m.json';
+
−
    const meteoriteLandings = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json';
+
−
    // fetch the data from the provided url(s) and call the function mapping the geometries to path elements
+
−
    Promise
+
−
        .all([d3.json(worldAtlas), d3.json(meteoriteLandings)])
+
−
        .then(([atlas, landings]) => {
+
−
            // convert the topojson to geojson
+
−
            const countries = topojson.feature(atlas, atlas.objects.countries);
+
−
            mapData(countries, landings);
+
−
        });
+
−
</script>
+
−
<!--
+
−
GLOBUS END
+
−
-->
+
  
−
        <div class="row">
+
.wrapper.run-animation .restart {
−
            <div class="col-12">
+
  opacity: 0;
−
                <p>
+
  -webkit-animation: fade-down 1200ms ease 3600ms forwards;
−
                    Antimicrobial resistance is on the rise and the death toll from bacterial infections will continue
+
          animation: fade-down 1200ms ease 3600ms forwards;
−
                    to increase if no alternative solutions are developed. The threat of antimicrobial resistance has
+
}
−
                    been known for a long time - Alexander Fleming, the discoverer of penicillin, predicted in 1945 that
+
−
                    “exposing […] microbes to nonlethal quantities of the drug makes them resistant”. Even though
+
−
                    efforts for development of novel antimicrobial compounds have been stepped up in recent years, there
+
−
                    is still a lack of safe and effective substitutes for antibiotics<sup><a href="#glpreferences">1</a></sup>.
+
−
                    A promising alternative – phage therapy – has an extensive history of successful application in
+
−
                    countries with limited access to antibiotics. Although phage therapy has been known for almost a
+
−
                    century, widespread application of phage therapy still has to become reality.<sup><a
+
−
                        href="#glpreferences">2</a></sup> This was the overarching problem our project needed to tackle.
+
  
−
                </p>
+
.babbelbubu.run-animation {
−
                <p>
+
  -webkit-animation: shrink ease-out 4800ms forwards 600ms;
−
                    In order to design an impactful project for this year’s iGEM season, we deemed it important to
+
          animation: shrink ease-out 4800ms forwards 600ms;
−
                    precisely understand and define the problem we wanted to work on.
+
}
−
                </p>
+
−
                <p>
+
−
                    Through extensive research into the factors impeding phage therapy, we identified the production
+
−
                    process to be one of the most striking problems. In particular, the current methods are inefficient,
+
−
                    lead to high impurities and contamination, require the cultivation of human pathogens in large
+
−
                    quantities and causes regulatory problems due to imprecise manufacturing standards and a lack of
+
−
                    adequate quality controls.
+
−
                </p>
+
−
            </div>
+
−
            <h3>The Solution: Phactory</h3>
+
−
            <div class="row">
+
−
                <div class="col-12">
+
−
                    <p>
+
−
                        We contemplated ways to use synthetic biology to overcome these challenges and found that using
+
−
                        cell extract as the central component of a manufacturing pipeline for phages might allow us to
+
−
                        overcome these issues. With the central piece of our project in place, we were able to define
+
−
                        the individual modules of our manufacturing pipeline. The modular approach allowed us to break
+
−
                        down the overall problem into several isolated, solvable sub-problems that could be worked on in
+
−
                        parallel. For each module we defined the requirements we wanted to fulfill and brainstormed
+
−
                        potential solutions for reaching these requirements. The individual modules were designed in
+
−
                        such a way that they are truly independent of one another and that issues in one module would
+
−
                        not impede progress in another module. We defined quantitative criteria to measure progress in
+
−
                        achieving the identified requirements during the build-test cycle. To maximize our chances of
+
−
                        success and the robustness of our designs, we chose the simplest solutions we could come up
+
−
                        with. We defined additional goals when multiple solutions fulfilling these criteria were
+
−
                        available: accessibility, portability, affordability, and safety.
+
−
                    </p>
+
  
−
                    <p>
+
.babbelbubu.run-animation .marvel {
−
                        Phactory was designed to be an accessible manufacturing pipeline that produces pure, precisely
+
  -webkit-transform: translateX(95px);
−
                        defined bacteriophages at medically relevant concentrations using highly portable, affordable
+
          transform: translateX(95px);
−
                        and modular components. </p>
+
  -webkit-animation: slide-out-X 750ms ease forwards;
−
                    <!-- comm: <p> -->
+
          animation: slide-out-X 750ms ease forwards;
−
                </div>
+
}
−
            </div>
+
.babbelbubu.run-animation .studios {
 +
  -webkit-transform: translateX(-95px);
 +
          transform: translateX(-95px);
 +
  color: transparent;
 +
  -webkit-animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms;
 +
          animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms;
 +
}
 +
.babbelbubu.run-animation .studios:before {
 +
  -webkit-transform: translateY(2.9rem);
 +
          transform: translateY(2.9rem);
 +
  -webkit-animation: slide-out-Y 300ms ease forwards 750ms;
 +
          animation: slide-out-Y 300ms ease forwards 750ms;
 +
}
 +
.babbelbubu.run-animation .studios:after {
 +
  -webkit-transform: translateY(-2.9rem);
 +
          transform: translateY(-2.9rem);
 +
  -webkit-animation: slide-out-Y 300ms ease forwards 750ms;
 +
          animation: slide-out-Y 300ms ease forwards 750ms;
 +
}
  
−
            <h2>Preparation of Cell Extract</h2>
+
.babbelbubu.run-animation .logo .kokosnusss {
−
            <div class="row">
+
  -webkit-animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;
−
                <div class="col-12">
+
          animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;
−
                    <p>
+
}
−
                        Commercially available cell extract is highly expensive, while home-made alternatives are
+
−
                        time-consuming to produce and lack reliability. Furthermore, the presence of DNases in cell
+
−
                        extract complicates the production of phages from linear genomes. This module therefore had two
+
−
                        separate goals:
+
−
                    </p>
+
−
                    <p>
+
−
                        The first goal was to produce high-quality, affordable cell extract and to establish quality
+
−
                        control mechanisms to quantify its performance. The preparation protocols described in previous
+
−
                        publications were analysed to identify optimization goals. <sup><a
+
−
                            href="#glpreferences">3</a></sup> To achieve these goals every step of the preparation
+
−
                        process was assessed and improved, with a particular focus on cell cultivation and cell lysis.
+
−
                        To enable easy distribution and storage, we decided to improve the overall durability and
+
−
                        storage time of our cell extract by lyophilization. After resuspension of the dried cell
+
−
                        extract, assembly of any given bacteriophage can be performed.
+
−
                    </p>
+
−
                    <p>
+
−
                        The second goal was to optimize cell extract for the expression from linear DNA. To accomplish
+
−
                        that, we identified the intracellular DNAse RecBCD as our main target. This enzyme - in
+
−
                        cooperation with RecA - is an essential component maintaining the integrity of the bacterial
+
−
                        genome<sup><a href="#glpreferences">4</a></sup>. Furthermore it is the protein causing
+
−
                        degradation of linear DNA within cell extract. Therefore, the inactivation of this endonuclease
+
−
                        was defined as a crucial step to ensure efficient phage production within the cell extract.
+
−
                    </p>
+
  
−
                </div>
+
@-webkit-keyframes slide-out-X {
−
             </div>
+
  100% {
 +
    -webkit-transform: translateX(0);
 +
             transform: translateX(0);
 +
  }
 +
}
  
 +
@keyframes slide-out-X {
 +
  100% {
 +
    -webkit-transform: translateX(0);
 +
            transform: translateX(0);
 +
  }
 +
}
 +
@-webkit-keyframes slide-out-Y {
 +
  100% {
 +
    -webkit-transform: translateY(0);
 +
            transform: translateY(0);
 +
  }
 +
}
 +
@keyframes slide-out-Y {
 +
  100% {
 +
    -webkit-transform: translateY(0);
 +
            transform: translateY(0);
 +
  }
 +
}
 +
@-webkit-keyframes show-text {
 +
  100% {
 +
    color: #fff;
 +
  }
 +
}
 +
@keyframes show-text {
 +
  100% {
 +
    color: #fff;
 +
  }
 +
}
 +
@-webkit-keyframes shrink {
 +
  100% {
 +
    -webkit-transform: scale(0.8);
 +
            transform: scale(0.8);
 +
  }
 +
}
 +
@keyframes shrink {
 +
  100% {
 +
    -webkit-transform: scale(0.8);
 +
            transform: scale(0.8);
 +
  }
 +
}
 +
@-webkit-keyframes tighten-vinette {
 +
  100% {
 +
    background-size: 120%;
 +
  }
 +
}
 +
@keyframes tighten-vinette {
 +
  100% {
 +
    background-size: 120%;
 +
  }
 +
}
 +
@-webkit-keyframes fade-down {
 +
  0% {
 +
    -webkit-transform: translateY(-2rem);
 +
            transform: translateY(-2rem);
 +
    opacity: 0;
 +
  }
 +
  100% {
 +
    -webkit-transform: translateY(0);
 +
            transform: translateY(0);
 +
    opacity: .5;
 +
  }
 +
}
 +
@keyframes fade-down {
 +
  0% {
 +
    -webkit-transform: translateY(-2rem);
 +
            transform: translateY(-2rem);
 +
    opacity: 0;
 +
  }
 +
  100% {
 +
    -webkit-transform: translateY(0);
 +
            transform: translateY(0);
 +
    opacity: .5;
 +
  }
 +
}
 +
@-webkit-keyframes fade-out {
 +
  100% {
 +
    opacity: 0;
 +
  }
 +
}
 +
@keyframes fade-out {
 +
  100% {
 +
    opacity: 0;
 +
  }
 +
}
 +
@-webkit-keyframes flicker-images {
 +
  0% {
 +
    background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg");
 +
  }
 +
  10% {
 +
    background-image: url("https://doomrocket.com/wp-content/uploads/2014/08/IMG_4527.png");
 +
  }
 +
  20% {
 +
    background-image: url("https://www.nerdmuch.com/wp-content/uploads/2016/02/funny-deadpool.jpg");
 +
  }
 +
  30% {
 +
    background-image: url("https://i.pinimg.com/736x/b4/e0/d5/b4e0d51ab9af14198f733ca582d06794--geek-things-geek-art.jpg");
 +
  }
 +
  40% {
 +
    background-image: url("https://images.fastcompany.net/image/upload/w_1280,f_auto,q_auto,fl_lossy/fc/3025621-poster-p-1-ka-pow-marvel-opens-massive-comic-book-images-archive-and-api-to-fans-developers.jpg");
 +
  }
 +
  50% {
 +
    background-image: url("http://nerdist.com/wp-content/uploads/2015/03/captain-america-iron-man-civil-war-1024x597.jpg");
 +
  }
 +
  60% {
 +
    background-image: url("https://geekreply.com/wp-content/uploads/2015/05/watchmen.jpg");
 +
  }
 +
  70% {
 +
    background-image: url("http://cdn.playbuzz.com/cdn/3c096341-2a6c-4ae6-bb76-3973445cfbcf/6b938520-4962-403a-9ce3-7bf298918cad.jpg");
 +
  }
 +
  80% {
 +
    background-image: url("http://cdn.wegotthiscovered.com/wp-content/uploads/2016/05/Storm-and-Black-Panther-marriage.jpg");
 +
  }
 +
  90% {
 +
    background-image: url("https://am21.akamaized.net/tms/cnt/uploads/2014/01/Black-Widow-70s-Suit-3-580x270.jpg");
 +
  }
 +
  100% {
 +
    background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg");
 +
  }
 +
}
 +
@keyframes flicker-images {
 +
  0% {
 +
    background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg");
 +
  }
 +
  10% {
 +
    background-image: url("https://doomrocket.com/wp-content/uploads/2014/08/IMG_4527.png");
 +
  }
 +
  20% {
 +
    background-image: url("https://www.nerdmuch.com/wp-content/uploads/2016/02/funny-deadpool.jpg");
 +
  }
 +
  30% {
 +
    background-image: url("https://i.pinimg.com/736x/b4/e0/d5/b4e0d51ab9af14198f733ca582d06794--geek-things-geek-art.jpg");
 +
  }
 +
  40% {
 +
    background-image: url("https://images.fastcompany.net/image/upload/w_1280,f_auto,q_auto,fl_lossy/fc/3025621-poster-p-1-ka-pow-marvel-opens-massive-comic-book-images-archive-and-api-to-fans-developers.jpg");
 +
  }
 +
  50% {
 +
    background-image: url("http://nerdist.com/wp-content/uploads/2015/03/captain-america-iron-man-civil-war-1024x597.jpg");
 +
  }
 +
  60% {
 +
    background-image: url("https://geekreply.com/wp-content/uploads/2015/05/watchmen.jpg");
 +
  }
 +
  70% {
 +
    background-image: url("http://cdn.playbuzz.com/cdn/3c096341-2a6c-4ae6-bb76-3973445cfbcf/6b938520-4962-403a-9ce3-7bf298918cad.jpg");
 +
  }
 +
  80% {
 +
    background-image: url("http://cdn.wegotthiscovered.com/wp-content/uploads/2016/05/Storm-and-Black-Panther-marriage.jpg");
 +
  }
 +
  90% {
 +
    background-image: url("https://am21.akamaized.net/tms/cnt/uploads/2014/01/Black-Widow-70s-Suit-3-580x270.jpg");
 +
  }
 +
  100% {
 +
    background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg");
 +
  }
 +
}
  
−
            <h2>Synthetic Phage Manufacturing</h2>
+
</style>
−
            <div class="row">
+
−
                <div class="col-12">
+
−
                    <p>
+
−
                        Our goal was to use cell extract as a host-independent platform for phage assembly from a linear
+
−
                        DNA template. To demonstrate the universal applicability of our manufacturing platform, we
+
−
                        attempted to express a variety of structurally different phages at titers suitable for
+
−
                        therapeutic application. In order to generate maximal phage titers, we identified the parameters
+
−
                        that potentially impact phage production. These included incubation time, influence of dNTP
+
−
                        addition and optimal DNA template concentration.
+
−
                    </p>
+
−
                </div>
+
−
            </div>
+
  
−
            <h2>Modular Phage Composition</h2>
 
−
            <div class="row">
 
−
                <div class="col-12">
 
−
                    <p>
 
−
                        When thinking about a release into the environment in the course of a therapeutic application,
 
−
                        it is important to avoid using genetically engineered phages. We postulated that in our cell
 
−
                        free system it should be possible to modify phages without altering their genome. In a modular
 
−
                        approach, we aimed at adding both natural phage DNA and engineered proteins to an assembly
 
−
                        reaction. To test our hypothesis, we chose to externally express an edited HOC (highly
 
−
                        immunogenic outer capsid) protein and incorporate it in the assembly reaction. Thinking about
 
−
                        the possible applications of fluorescent and bioluminescent phages in medical imaging, we
 
−
                        designed expression constructs encoding for YFP or the NanoLuc luciferase. Additionally, we
 
−
                        needed to consider first the isolation of the desired protein and then later the purification of
 
−
                        the phages out of a heterogeneous solution. Therefore, we added a histidine-tag.
 
−
                    </p>
 
−
                </div>
 
−
            </div>
 
  
−
            <h2>Quality Control</h2>
 
  
 +
<div class="testclasse">
  
−
            <div class="row">
+
<div class="babbelbubu run-animation" id="ananananananas">
−
                <div class="col-12">
+
<div class="logo">
−
                    <p>
+
−
                        Clinical applications require highly pure samples of functional bacteriophages, free of
+
−
                        bacterial endotoxins and contaminations. The purpose of this module is to implement quality
+
−
                        control mechanisms to ensure a safe and effective application.
+
−
                    </p>
+
−
                </div>
+
−
            </div>
+
  
−
            <div class="row">
+
        <span class="marvel" > <a href="https://www.google.com" style="color: #fff;text-decoration: none;">View our</a></span>
−
                <div class="col-12">
+
<span class="studios" > <a href="https://www.google.com" style="color: #fff;text-decoration: none;">Story</a></span>
−
                    <figure class="figure" id="image-popups">
+
−
                        <a style="font-size: small"
+
−
                          href="http://2018.igem.org/wiki/images/6/69/T--Munich--Design_Principles.png"
+
−
                          data-effect="mfp-zoom-out"
+
−
                          title="Our therapeutic agent is a probiotic secreting incretin mimetics placed in the patients intestine by oral administration of capsules.
+
−
                                            This enables an easier therapy where a regular intake of a medication is not required.">
+
−
                            <img src="http://2018.igem.org/wiki/images/6/69/T--Munich--Design_Principles.png"
+
−
                                class="figure-img img-fluid rounded"
+
−
                                alt="A generic square placeholder image with rounded corners in a figure."></a>
+
−
                    </figure>
+
−
                </div>
+
−
            </div>
+
−
            <div class="row">
+
−
                <div class="col-12">
+
−
                    <h3>Quantifying the Level of DNA Contamination</h3>
+
−
                    <p>
+
−
                        While gels and absorption can be used to detect the presence of the desired phage genomes, they
+
−
                        do not prove the absence of contaminating DNA. In fact, we found that more than 50% of isolated
+
−
                        phage genome purified from common <i>E. coli</i> phages using traditional protocols is instead
+
−
                        <i>E. coli</i> genomic DNA. To precisely quantify the amount of contamination, we used third
+
−
                        generation sequencing. Nanopore sequencing was chosen because of its affordability and small
+
−
                        size that makes the device highly portable. Its long-read lengths allows for unambiguous
+
−
                        identification of the source of contaminations.
+
−
                    </p>
+
−
                    <p>
+
−
                        As a submodule, we decided to construct a software suite called Sequ-Into that allows the user
+
−
                        to easily determine the amount of DNA contamination in the first few minutes of sequencing,
+
−
                        thereby providing access to this aspect of phage manufacturing without requiring specialized
+
−
                        knowledge in bioinformatics.
+
−
                    </p>
+
−
                </div>
+
−
            </div>
+
  
 +
        <div class="restart">Restart</div>
  
−
            <div class="row">
+
        <div class="kokosnusss"></div>
−
                <div class="col-12">
+
</div>
−
                    <p>
+
−
                        3D printed low-cost devices to overcome these challenges independently. The hardware was
+
−
                        designed to be compatible with existing laboratory equipment or open source solutions.
+
−
                    </p>
+
−
                </div>
+
−
            </div>
+
−
            <div class="row">
+
−
                <div class="col-12">
+
−
                    <h3>Verifying the Function of the Phage Product</h3>
+
  
−
                    <p>
+
</div>
−
                        To assess the antimicrobial action of our phage product, we combined two methods. We chose a
+
−
                        plaque assay as a cheap and simple way to confirm the presence of functional phages and to
+
−
                        quantify the phage titer. Reproduction and transcriptional capability of our phages however
+
−
                        could be assessed by reverse transcriptase qPCR.
+
−
                    </p>
+
−
                    <h3>Reducing Toxin Levels</h3>
+
  
−
                    <p>
 
−
                        In an attempt to push our purity towards enabling intravenous administration, we decided to
 
−
                        perform fractionation in a pressure-driven size-exclusion filter system. Suitability of the
 
−
                        phage product for intravenous application could then be assessed with an additional endotoxin
 
−
                        test.
 
−
                    </p>
 
−
                    <p>
 
−
                        After these steps, our phages would be ready for animal testing, which we did not plan to
 
−
                        attempt in the context of the iGEM competition
 
−
                    </p>
 
  
−
                </div>
 
−
            </div>
 
−
            <div class="container-fluid py-5 mb-0 bg-dark"> <!-- FOR REUSE: REMOVE bg-dark IF U DONT WANNA HAVE A DARK BACKGROUND -->
 
−
<div id="accordion">
 
−
  <div class="card">
 
−
    <div class="card-header" id="headingOne">
 
−
      <h5 class="mb-0">
 
−
        <button class="btn btn-one btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
 
−
          Cloning
 
−
        </button>
 
−
      </h5>
 
−
    </div>
 
  
−
    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
 
−
      <div class="card-body">
 
−
          <div class="row">
 
−
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/8/88/T--Munich--WL1_Colony_PCR.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Colony PCR</a></div>
 
−
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/a/a5/T--Munich--WL1_Chemical_transformation.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Chemical transformation</a></div>
 
−
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/b/be/T--Munich--WL1_Agarose-Gel_electrophoresis.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Agarose-Gel electrophoresis</a></div>
 
−
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/c/ca/T--Munich--WL1_Electrocompetent_transformation.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Electrocompetent transformation</a></div>
 
−
          </div>
 
−
          <div class="row">
 
−
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/1/1a/T--Munich--WL1_Ligation.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Ligation</a></div>
 
−
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/3/3c/T--Munich--WL1_PCR.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">PCR</a></div>
 
−
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/7/7e/T--Munich--WL1_Restriction_Digest.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Restriction digest</a></div>
 
−
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/a/ab/T--Munich--WL1_Sequencing_sample_preparation.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Sequencing sample preparation</a></div>
 
−
          </div>
 
−
          <div class="row">
 
−
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/7/76/T--Munich--Protocol_Oracoli_double_layer_photolitho.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Double Layer Photolitography</a></div>
 
−
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/7/70/T--Munich--Protocol_Oracoli_Microscopy.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Oracoli Microscopy</a></div>
 
−
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/e/e0/T--Munich--Protocol_Oracoli_Soft_Lithography.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Soft Lithography</a></div>
 
−
          </div>
 
−
      </div>
 
 
     </div>
 
     </div>
−
  </div>
 
−
</div>
 
−
            </div>
 
  
  
−
            <h2>Encapsulation</h2>
 
−
            <div class="row">
 
−
                <div class="col-12">
 
−
                    <The goal of this module is to optimize the packaging of assembled phages to prepare them for
 
−
                        application to patients.>
 
−
                        <p>
 
−
                            The transport within the body often poses problems for the activity and integrity of phages,
 
−
                            which can be addressed by packaging of the phages in a protective layer<sup><a
 
−
                                href="#phareferences">5</a></sup>. For oral application of our phage product, sufficient
 
−
                            stability for gastric passage has to be guaranteed. The highly acidic environment, as well
 
−
                            as the presence of proteases composed the major challenges. Our packaging method thus needed
 
−
                            to provide resistance to low pH. At the same time, phages needed to be released from their
 
−
                            protection upon reaching intestinal fluid. These characteristics are provided by
 
−
                            calcium-alginate microspheres<sup><a
 
−
                                href=https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5264180/>6</a></sup>. Lacking suitable
 
−
                            encapsulation hardware, we decided to build our own nozzle to encapsulate the phages in
 
−
                            monodisperse microcapsules.
 
−
                        </p>
 
−
                        <p>
 
−
                            The methods most suitable for quantification of size and assessment of monodispersity of the
 
−
                            alginate capsules were brightfield and epifluorescence microscopy. To determine whether our
 
−
                            encapsulation method fulfills our requirements of survival and release of phages in
 
−
                            simulated gastric and intestinal fluid, respectively, we subsequently performed plaque
 
−
                            assays.
 
−
                        </p>
 
−
                    </The>
 
−
                </div>
 
−
            </div>
 
  
−
            <div id="glpreferences" class="row">
+
<script>
−
                <h3>References</h3>
+
    element = document.getElementById("ananananananas");
−
                <div class="col-12">
+
−
                    <ol>
+
−
                        <li><a href=https://www.nature.com/articles/ja2017124> Incentivising innovation in antibiotic
+
−
                            drug discovery and development: progress, challenges and next steps.</a></li>
+
−
                        <li id="ref_2"><a href=https://www.nature.com/articles/nrmicro3564> A century of the phage:
+
−
                            past, present and future.</a></li>
+
−
                        <li id="ref_3"><a
+
−
                                href=https://www.jove.com/video/50762/protocols-for-implementing-an-escherichia-coli-based-tx-tl-cell-free>
+
−
                            Protocols for Implementing an Escherichia coli Based TX-TL Cell-Free Expression System for
+
−
                            Synthetic Biology.</a></li>
+
−
                        <li id="ref_4"><a href=https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2593567/>RecBCD Enzyme and
+
−
                            the Repair of Double-Stranded DNA Breaks.</a></li>
+
−
                        <li id="ref_5"><a
+
−
                                href=https://www.sciencedirect.com/science/article/pii/S000186861630392X#s0185>Malik, D.
+
−
                            J., Sokolov, I. J., Vinner, G. K., Mancuso, F., Cinquerrui, S., Vladisavljevic, G. T., …
+
−
                            Kirpichnikova, A. (2017). Formulation, stabilisation and encapsulation of bacteriophage for
+
−
                            phage therapy. Advances in Colloid and Interface Science, 249, 100–133. </a></li>
+
−
                        <li id="ref_6"><a href=hhttps://www.ncbi.nlm.nih.gov/pmc/articles/PMC5264180/>Colom, J.,
+
−
                            Cano-Sarabia, M., Otero, J., Aríñez-Soriano, J., Cortés, P., Maspoch, D., &amp; Llagostera,
+
−
                            M. (2017). Microencapsulation with alginate/CaCO3: A strategy for improved phage therapy.
+
−
                            Scientific Reports, 7, 41441. </a></li>
+
−
                        </li>
+
−
                    </ol>
+
−
                </div>
+
−
            </div>
+
  
−
    </main>
+
if (element) {
−
</div>
+
// reset the transition by...
−
<!-- BUTTON LINK ANIMATION: CAVE: THIS MAY NOT WORK IN ALL CONTAINERS / <div> etc!!!!!-->
+
element.addEventListener("mouseenter", function(e) {
−
<style>
+
e.preventDefault;
−
    .wrapper{
+
−
  position: fixed; /* Change this for absolute positioning  */
+
−
  top: 50%;
+
−
  left: 50%;
+
−
  transform: translate(-50%, -50%);
+
−
}
+
  
−
.link_wrapper{
+
console.log('element', element.classList);
−
  position: relative;
+
−
}
+
  
−
.link_wrapper a{
+
// removing the class
−
  display: block;
+
element.classList.remove("run-animation");
−
  width: 250px;
+
−
  height: 50px;
+
−
  line-height: 50px;
+
−
  font-weight: bold;
+
−
  text-decoration: none;
+
−
  background: #333;
+
−
  text-align: center;
+
−
  color: #fff;
+
−
  text-transform: uppercase;
+
−
  letter-spacing: 1px;
+
−
  border: 3px solid #333;
+
−
  transition: all .35s;
+
−
}
+
  
−
.icon{
+
// triggering reflow
−
  width: 50px;
+
void element.offsetWidth;
−
  height: 50px;
+
−
  border: 3px solid transparent;
+
−
  position: absolute;
+
−
  transform: rotate(45deg);
+
−
  right: 0;
+
−
  top: 0;
+
−
  z-index: -1;
+
−
  transition: all .35s;
+
−
}
+
  
−
.icon svg{
+
// and re-adding the class
−
  width: 30px;
+
element.classList.add("run-animation");
−
  position: absolute;
+
}, false);
−
  top: calc(50% - 15px);
+
−
  left: calc(50% - 15px);
+
−
  transform: rotate(-45deg);
+
−
  fill: #2ecc71;
+
−
  transition: all .35s;
+
−
}
+
  
−
.link_wrapper a:hover{
+
element.addEventListener("click", function(e) {
−
  width: 200px;
+
e.preventDefault;
−
  border: 3px solid #2ecc71;
+
−
  background: transparent;
+
−
  color: #2ecc71;
+
−
}
+
  
−
.link_wrapper a:hover + .icon{
+
console.log('element', element.classList);
−
  border: 3px solid #2ecc71;
+
−
  right: -25%;
+
−
}
+
  
−
@media only screen and (max-width: 767.98px) {
+
// removing the class
 +
element.classList.remove("run-animation");
  
−
.link_wrapper a{
+
// triggering reflow
−
  width: 100px;
+
void element.offsetWidth;
−
  height: 20px;
+
−
  line-height: 20px;
+
−
  font-weight: normal;
+
−
    font-size:smaller;
+
−
    letter-spacing: 0.05px;
+
−
}
+
  
−
.icon {
+
// and re-adding the class
−
    width: 20px;
+
element.classList.add("run-animation");
−
    height: 20px;
+
}, false);
 
}
 
}
 +
</script>
  
−
.icon svg {
+
<div class='container-fluid p-3' style="background-color: rgba(35, 35, 35, 0.4);">
−
    width: 12px;
+
        <hr>
−
    top: calc(50% - 6px);
+
        <div class='row align-items-center'>
−
    left: calc(50% - 6px);
+
            <div class='col-6 col-md-2 sponsorLogo text-center'>
−
}
+
                <a href="https://www.stura-tuebingen.de/" target="_blank2"><img class="img-fluid"
 +
                                                                                src="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--stura_logo.png"
 +
                                                                                style="max-height: 80px;"></a>
 +
            </div>
 +
            <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
                <a href="https://www.embl.de/" target="_blank2"><img class="img-fluid"
 +
                                                                    src="https://2019.igem.org/wiki/images/c/c4/T--Tuebingen--embl_logo.png"
 +
                                                                    style="max-height: 80px;"></a>
 +
            </div>
 +
            <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
                <a href="https://www.kohlbacherlab.org" target="_blank2"><img class="img-fluid"
 +
                                                                              src="https://2019.igem.org/wiki/images/9/99/T--Tuebingen--kohlbacher_logo.png"
 +
                                                                              style="max-height: 80px;"></a>
 +
            </div>
 +
            <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
                <a href="https://www.dieter-schwarz-stiftung.de/homepage.html" target="_blank2"><img class="img-fluid"
 +
                                                                                                    src="https://2019.igem.org/wiki/images/8/86/T--Tuebingen--LogoDSS.png"
 +
                                                                                                    style="max-height: 80px;"></a>
 +
            </div>
 +
            <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
                <a href="https://www.experimenta.science/en/" target="_blank2"><img class="img-fluid"
 +
                                                                                    src="https://2019.igem.org/wiki/images/e/eb/T--Tuebingen--Logo-Experimenta.png"
 +
                                                                                    style="max-height: 80px;"></a>
 +
            </div>
 +
            <div class='col-6 col-md-2 sponsorLogo text-center'>
 +
                <a href="https://www.zmbp.uni-tuebingen.de/zmbp.html" target="_blank2"><img class="img-fluid"
 +
                                                                                            src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png"
 +
                                                                                            style="max-height: 80px;"></a>
 +
            </div>
  
−
.link_wrapper a:hover {
 
−
    width: 90px;
 
−
}
 
−
}
 
−
</style>
 
  
−
<div class="wrapper">
+
            <!--
−
  <div class="link_wrapper">
+
<div class='col sponsorLogo'>
−
    <a href="#">Hover Me!</a>
+
<a href="https://www.grk2062.uni-muenchen.de/index.html" target="_blank2" ><img class="img-fluid" src="http://2018.igem.org/wiki/images/f/fe/T--Munich--GRK2062.png" style="max-height: 70px;"></a>
−
    <div class="icon">
+
−
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.832 268.832">
+
−
        <path d="M265.17 125.577l-80-80c-4.88-4.88-12.796-4.88-17.677 0-4.882 4.882-4.882 12.796 0 17.678l58.66 58.66H12.5c-6.903 0-12.5 5.598-12.5 12.5 0 6.903 5.597 12.5 12.5 12.5h213.654l-58.66 58.662c-4.88 4.882-4.88 12.796 0 17.678 2.44 2.44 5.64 3.66 8.84 3.66s6.398-1.22 8.84-3.66l79.997-80c4.883-4.882 4.883-12.796 0-17.678z"/>
+
−
      </svg>
+
−
    </div>
+
−
  </div>
+
 
</div>
 
</div>
−
<!-- BUTTON LINK ANIMATION: CAVE: THIS MAY NOT WORK IN ALL CONTAINERS / <div> etc!!!!! END-->
+
-->
 +
        </div>
  
−
<script type="text/javascript"
+
        <hr>
−
        src="https://2019.igem.org/Team:Tuebingen/sidebarContentJS?action=raw&ctype=text/javascript"></script>
+
        <div class='row align-items-center'>
−
 
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
−
 
+
                <a href="https://www.lexogen.com/" target="_blank2"><img class="img-fluid"
−
</p><p>
+
                                                                        src="https://2019.igem.org/wiki/images/4/43/T--Tuebingen--lexogen_logo.png"></a>
−
 
+
            </div>
−
<div class='container-fluid p-3'>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
−
    <hr>
+
                <a href="http://s466755640.online.de/4bl/" target="_blank2"><img class="img-fluid"
−
    <div class='row align-items-center'>
+
                                                                                src="https://2019.igem.org/wiki/images/0/0b/T--Tuebingen--4base_logo.png"></a>
−
        <div class='col-6 col-md-2 sponsorLogo'>
+
            </div>
−
            <a href="https://www.embl.de/" target="_blank2"><img class="img-fluid"
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
−
                                                                src="https://2019.igem.org/wiki/images/c/c4/T--Tuebingen--embl_logo.png"
+
                <a href="https://www.agilent.com/" target="_blank2"><img class="img-fluid"
−
                                                                style="max-height: 70px;"></a>
+
                                                                        src="https://2019.igem.org/wiki/images/e/e7/T--Tuebingen--agilent_logo.png"></a>
−
        </div>
+
            </div>
−
        <div class='col-6 col-md-2 sponsorLogo'>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
−
            <a href="https://www.stura-tuebingen.de/" target="_blank2"><img class="img-fluid"
+
                <a href="https://www.digitalocean.com/" target="_blank2"><img class="img-fluid"
−
                                                                            src="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--stura_logo.png"
+
                                                                              src="https://2019.igem.org/wiki/images/6/67/T--Tuebingen--digitalocean_logo.png"></a>
−
                                                                            style="max-height: 70px;"></a>
+
            </div>
−
        </div>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
−
        <div class='col-6 col-md-2 sponsorLogo'>
+
                <a href="https://dwk.com/" target="_blank2"><img class="img-fluid"
−
            <a href="https://www.zmbp.uni-tuebingen.de/zmbp.html" target="_blank2"><img class="img-fluid"
+
                                                                src="https://2019.igem.org/wiki/images/c/ce/T--Tuebingen--dwk_logo.png"></a>
−
                                                                                        src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png"
+
            </div>
−
                                                                                        style="max-height: 70px;"></a>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
−
        </div>
+
                <a href="https://www.eppendorf.com/" target="_blank2"><img class="img-fluid"
−
        <div class='col-6 col-md-2 sponsorLogo'>
+
                                                                          src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--eppendorf_logo.png"></a>
−
            <a href="https://www.experimenta.science/en/" target="_blank2"><img class="img-fluid"
+
            </div>
−
                                                                                src="https://2019.igem.org/wiki/images/0/0a/T--Tuebingen--experimenta_logo.png"
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
−
                                                                                style="max-height: 70px;"></a>
+
                <a href="https://www.implen.de/" target="_blank2"><img class="img-fluid"
−
        </div>
+
                                                                      src="https://2019.igem.org/wiki/images/b/bb/T--Tuebingen--Logo-Implen.png"></a>
−
        <div class='col-6 col-md-2 sponsorLogo'>
+
            </div>
−
            <a href="https://www.kohlbacherlab.org" target="_blank2"><img class="img-fluid"
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
−
                                                                          src="https://2019.igem.org/wiki/images/9/99/T--Tuebingen--kohlbacher_logo.png"
+
                <a href="https://www.jenabioscience.com/" target="_blank2"><img class="img-fluid"
−
                                                                          style="max-height: 70px;"></a>
+
                                                                                src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--JBS_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.gbo.com/" target="_blank2"><img class="img-fluid"
 +
                                                                    src="https://2019.igem.org/wiki/images/a/ae/T--Tuebingen--greiner_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="http://www.metabion.com/" target="_blank2"><img class="img-fluid"
 +
                                                                        src="https://2019.igem.org/wiki/images/4/41/T--Tuebingen--Logo-Metabion.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.microsynth.ch/home-ch.html" target="_blank2"><img class="img-fluid"
 +
                                                                                      src="https://2019.igem.org/wiki/images/1/18/T--Tuebingen--microsynth_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.neb.com/" target="_blank2"><img class="img-fluid"
 +
                                                                    src="https://2019.igem.org/wiki/images/2/29/T--Tuebingen--neb_logo.png"></a>
 +
            </div>
 
         </div>
 
         </div>
  
 +
        <div class='row align-items-center'>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.promega.de/en/" target="_blank2"><img class="img-fluid"
 +
                                                                          src="https://2019.igem.org/wiki/images/f/f8/T--Tuebingen--promega_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.qiagen.com/us/" target="_blank2"><img class="img-fluid"
 +
                                                                          src="https://2019.igem.org/wiki/images/9/92/T--Tuebingen--qiagen_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.carlroth.com/en/en" target="_blank2"><img class="img-fluid"
 +
                                                                              src="https://2019.igem.org/wiki/images/6/61/T--Tuebingen--roth_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.sitoolsbiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--sibiotools_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.snapgene.com/" target="_blank2"><img class="img-fluid"
 +
                                                                          src="https://2019.igem.org/wiki/images/3/3a/T--Tuebingen--snapgene_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.trilinkbiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                                src="https://2019.igem.org/wiki/images/b/b6/T--Tuebingen--trilink_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
 +
                                                                            src="https://2019.igem.org/wiki/images/4/4c/T--Tuebingen--Logo-Twist.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="http://www.vazymebiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                              src="https://2019.igem.org/wiki/images/b/b7/T--Tuebingen--vazyme_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.biolegend.com/" target="_blank2"><img class="img-fluid"
 +
                                                                          src="https://2019.igem.org/wiki/images/c/c3/T--Tuebingen--biolegend_logo.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid"
 +
                                                                            src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
 +
            </div>
  
−
        <!--
 
−
  <div class='col sponsorLogo'>
 
−
    <a href="https://www.grk2062.uni-muenchen.de/index.html" target="_blank2" ><img class="img-fluid" src="http://2018.igem.org/wiki/images/f/fe/T--Munich--GRK2062.png" style="max-height: 70px;"></a>
 
−
  </div>
 
−
-->
 
−
    </div>
 
−
 
−
    <hr>
 
−
    <div class='row align-items-center'>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.lexogen.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                    src="https://2019.igem.org/wiki/images/4/43/T--Tuebingen--lexogen_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="http://s466755640.online.de/4bl/" target="_blank2"><img class="img-fluid"
 
−
                                                                            src="https://2019.igem.org/wiki/images/0/0b/T--Tuebingen--4base_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.agilent.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                    src="https://2019.igem.org/wiki/images/e/e7/T--Tuebingen--agilent_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.digitalocean.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                          src="https://2019.igem.org/wiki/images/6/67/T--Tuebingen--digitalocean_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://dwk.com/" target="_blank2"><img class="img-fluid"
 
−
                                                            src="https://2019.igem.org/wiki/images/c/ce/T--Tuebingen--dwk_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.eppendorf.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                      src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--eppendorf_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.implen.de/" target="_blank2"><img class="img-fluid"
 
−
                                                                  src="https://2019.igem.org/wiki/images/f/f1/T--Tuebingen--implem_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.jenabioscience.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                            src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--JBS_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.gbo.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                src="https://2019.igem.org/wiki/images/a/ae/T--Tuebingen--greiner_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="http://www.metabion.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                    src="https://2019.igem.org/wiki/images/8/88/T--Tuebingen--metabion_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.microsynth.ch/home-ch.html" target="_blank2"><img class="img-fluid"
 
−
                                                                                  src="https://2019.igem.org/wiki/images/1/18/T--Tuebingen--microsynth_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.neb.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                src="https://2019.igem.org/wiki/images/2/29/T--Tuebingen--neb_logo.png"></a>
 
 
         </div>
 
         </div>
 
     </div>
 
     </div>
−
 
−
    <div class='row align-items-center'>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.promega.de/en/" target="_blank2"><img class="img-fluid"
 
−
                                                                      src="https://2019.igem.org/wiki/images/f/f8/T--Tuebingen--promega_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.qiagen.com/us/" target="_blank2"><img class="img-fluid"
 
−
                                                                      src="https://2019.igem.org/wiki/images/9/92/T--Tuebingen--qiagen_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.carlroth.com/en/en" target="_blank2"><img class="img-fluid"
 
−
                                                                          src="https://2019.igem.org/wiki/images/6/61/T--Tuebingen--roth_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.sitoolsbiotech.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                            src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--sibiotools_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.snapgene.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                      src="https://2019.igem.org/wiki/images/3/3a/T--Tuebingen--snapgene_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.trilinkbiotech.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                            src="https://2019.igem.org/wiki/images/b/b6/T--Tuebingen--trilink_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                        src="https://2019.igem.org/wiki/images/9/95/T--Tuebingen--twist_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="http://www.vazymebiotech.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                          src="https://2019.igem.org/wiki/images/b/b7/T--Tuebingen--vazyme_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.biolegend.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                      src="https://2019.igem.org/wiki/images/c/c3/T--Tuebingen--biolegend_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                        src="https://2019.igem.org/wiki/images/9/95/T--Tuebingen--twist_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid"
 
−
                                                                        src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
 
−
        </div>
 
−
 
−
    </div>
 
−
</div>
 
−
</p>
 
−
 
−
</div>
 
−
<script src="https://2019.igem.org/Team:Tuebingen/magni-popup-minJS?action=raw&ctype=text/javascript"></script>
 
−
<script src="https://2019.igem.org/Team:Tuebingen/popup-imagesJS?action=raw&ctype=text/javascript"></script>
 
−
<div class="visualClear"></div>
 
−
</div>
 
−
</div>
 
−
 
−
</div>
 
−
</div>
 
 
</html>
 
</html>

Latest revision as of 18:33, 15 October 2019

GLP.exe

GLP.exe - a safe and effective treatment for Diabetes Mellitus Type II
meetUp

Several treatment options for Type II Diabetes Mellitus have been developed in recent years significantly improving the patients' insulin level.

Hence, the diagnosis of Type II Diabetes Mellitus is no longer a death sentence.

Yet...
meetUp

Current Drugs

are expensive, require fine tuning and daily shots. Moreover, they have severe side-effects, causing patients to skip doses.

“Many patients don’t want to use insulin. They don’t want to do finger sticks and they’re afraid of hypoglycemia.”

“To fight the global diabetes pandemic, we would ideally have an accessible cost-effective easily-compliant intervention that has high clinical efficacy and that is free of adverse side effects.”

Prof. Harold Lebovitz, State University of New York Health Science Center, Brooklyn, New York

However...
meetUp

There's a solution!

Our therapeutic agent is a probiotic secreting incretin mimetics placed in the patients intestine by oral administration of capsules. GLP-1 and Exendin-4, our main actors, cause an increase in insulin secretion, if the cell has already taken up sugar.

This enables an easier therapy where a regular intake of medicals are not required.

Improved cell penetrating peptides with the use of artificial intelligence allow for an efficient and safe transport of our effectors into the cells.

Safety
meetUp

is our highest priority!

Therefore, we developed a novel, Cas3 based kill-switch mechanism. The flexible system uses three regulators inspired by the human intestines: temperature, availability of fatty acids in form of Acyl CoA and N-Acetyl-Glucosamin.

If the conditions of our regulatory system are no longer met, Cas3 will be degrading all genetic information.

Additionally
meetUp

An in depth E.coli Nissle characterization

Despite the fact that E. Coli Nissle is an already approved probiotic, it's surprisingly badly characterized.

Hence, we provide the first metabolic model of E. coli Nissle and optimize it's growth for various growth media. Furthermore, we predicted the interaction and competition of E. coli Nissle with common competitors for various fluxes in the gut.

Finally, we carried out a series of RNA-Seq experiments to assess the adaptions and reactions of E. coli Nissle to aerobic, as well as anaerobic occurring stress factors.

Bringing it all together
meetUp

Our work lays the foundation for an innovative, unprecedented approach to treat Diabetes Mellitus Type II.