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

 
(One intermediate revision by one other user 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"/>
<head>
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
    <style>
+
        /* Paste this css to your style sheet file or under head tag */
+
        /* This only works with JavaScript,
+
        if it's not present, don't show loader */
+
        .js #loader {
+
            display: block;
+
            position: absolute;
+
            left: 100px;
+
            top: 0;
+
        }
+
 
+
        .se-pre-con {
+
            position: fixed;
+
            left: 0px;
+
            top: 0px;
+
            width: 100%;
+
            height: 100%;
+
            z-index: 9999;
+
            background: #2B2B35;
+
        }
+
 
+
        .se-pre-con img {
+
            width: 40%;
+
            height: 40%;
+
            margin-left: 30%;
+
            margin-top: 15%;
+
        }
+
 
+
        @media screen and (min-width: 1500px ) {
+
            .se-pre-con img {
+
                margin-top: 20%;
+
                width: 25%;
+
                height: 15%;
+
                margin-left: 35%;
+
            }
+
        }
+
 
+
        @media screen and (max-width: 1100px ) {
+
            .se-pre-con img {
+
                margin-top: 20%;
+
                height: 30%;
+
                width: 50%;
+
                margin-left: 25%;
+
            }
+
        }
+
 
+
        @media screen and (max-width: 700px ) {
+
            .se-pre-con img {
+
                margin-top: 18%;
+
                height: 20%;
+
            }
+
        }
+
    </style>
+
</head>
+
<body>
+
<div class="se-pre-con">
+
    <img src="https://2019.igem.org/wiki/images/8/83/T--Tuebingen--preloader.gif">
+
</div>
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
+
<script>
+
    $(window).load(function () {
+
        setTimeout(removeLoader, 1000);
+
    }); //wait for page load PLUS one seconds.
+
    function removeLoader() {
+
        $(".se-pre-con").fadeOut(500, function () {
+
            // fadeOut complete. Remove the loading div
+
            $(".se-pre-con").remove(); //makes page more lightweight
+
        });
+
    }
+
</script>
+
</body>
+
 
<style>
 
<style>
 
     /*!
 
     /*!
Line 134: Line 60:
 
         display: block
 
         display: block
 
     }
 
     }
 
  
 
     body {
 
     body {
Line 164: Line 89:
 
     p {
 
     p {
 
         margin-top: 0;
 
         margin-top: 0;
         margin-bottom: 1rem;
+
         margin-bottom: 1rem
        color: #F4F0DE;
+
 
     }
 
     }
  
Line 417: Line 341:
  
 
     .h1, h1 {
 
     .h1, h1 {
         font-size: 2.5rem;
+
         font-size: 2.5rem
        color: #2ecc71;
+
 
     }
 
     }
  
 
     .h2, h2 {
 
     .h2, h2 {
         font-size: 2rem;
+
         font-size: 2rem
        color: #2ecc71;
+
 
     }
 
     }
  
 
     .h3, h3 {
 
     .h3, h3 {
         font-size: 1.75rem;
+
         font-size: 1.75rem
        color: #2ecc71;
+
 
     }
 
     }
  
Line 2,981: 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,936: Line 3,881:
 
         font-size: 1.25rem;
 
         font-size: 1.25rem;
 
         line-height: inherit;
 
         line-height: inherit;
         white-space: nowrap;
+
         white-space: nowrap
 
     }
 
     }
  
Line 6,038: Line 5,983:
  
 
     .bg-dark {
 
     .bg-dark {
         background-color: #232323 !important
+
         background-color: #343a40 !important
 
     }
 
     }
  
Line 9,264: Line 9,209:
  
  
     /* sponsor foooter */
+
     /* sponsor footer */
 
     .sponsorLogo img {
 
     .sponsorLogo img {
 
         padding: 8px;
 
         padding: 8px;
Line 9,287: Line 9,232:
  
 
     .dropdown-menu {
 
     .dropdown-menu {
         background-color: #232323;
+
         background-color: rgba(100, 100, 100, 1);
 
     }
 
     }
  
Line 9,299: 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: #2ecc71;
+
    }
+
  
    /* important to the link position of the headings */
+
.table-of-contents svg {
    .post-content h2 {
+
  position: absolute;
        padding-top: 150px;
+
  left: 0;
        color: #2ecc71;
+
  top: 50%;
    }
+
  bottom: auto;
 +
  display: none;
 +
  stroke: #009EC6;
 +
  transform: translateY(-50%);
 +
}
  
    /* link color */
+
.toc-reading svg {
    .post-content a {
+
  display: block;
        color: #2ecc71;
+
}
    }
+
  
    #glpreferences a {
+
.table-of-contents ul {
        color: #2ecc71;
+
  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: #2ecc71;
+
  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: #2ecc71;
+
        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;
+
        box-shadow: 0 3px 5px 0 black;
+
        color: #4d4d4d;
+
    }
+
 
+
    .post-content .row {
+
        text-align: justify;
+
    }
+
 
+
    /*++++++++++++++++++++++++++++++++
+
 
contents End ++++++++++++++++++++++++++++++*/
 
contents End ++++++++++++++++++++++++++++++*/
  
Line 9,654: 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;
+
}
        }
+
  
        .pictureTitle .display-2 {
+
#glpContentsOuter{
            font-size: 2rem;
+
display: none;
        }
+
}
 +
.glpContainer {
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0 auto;
 +
}
  
        .pictureTitle h4 {
+
.glpContainer > * {
            font-size: 1rem;
+
  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;
 +
}
 +
}
  
        #glpContentsOuter {
 
            display: none;
 
        }
 
  
        .glpContainer {
+
@media only screen and (max-width: 1199.98px) {
            width: 100%;
+
            margin: 0;
+
            padding: 0 auto;
+
        }
+
  
        .glpContainer > * {
+
}
            padding: 0;
+
        }
+
  
        .post-content {
+
@media only screen and (max-width: 1400px) {
            flex-basis: 90vw;
+
.table-of-contents a{
            max-width: 100%;
+
font-size: 0.8rem;
            margin: 0 3vw;
+
}
        }
+
.table-of-contents li + li{
 +
margin-top: 1.5em;
 +
}
 +
}
  
        /* 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>
 
</style>
  
Line 9,729: Line 9,661:
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <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/Template:Tuebingen/FontAwesomeCSS">
         <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous"/>
+
        <link rel="stylesheet" href="https://2019.igem.org/Team:Tuebingen/aosCSS?action=raw&ctype=text/css" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
+
         <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous" />
              type="text/css"/>
+
         <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>
 
     </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>
 
     <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 {
+
         /* Scroll Down Icon*/
             top: 0;
+
        #goToBox {
            left: 0;
+
             position: relative;
             width: 100%;
+
             width: 30px;
             height: 100%;
+
             height: 28px;
             z-index: 1043;
+
             left: calc(50% - 15px);
            position: fixed;
+
            outline: none !important;
+
            -webkit-backface-visibility: hidden;
+
 
         }
 
         }
  
         .mfp-container {
+
         .chevron {
            text-align: center;
+
 
             position: absolute;
 
             position: absolute;
             width: 100%;
+
             width: 28px;
             height: 100%;
+
             height: 8px;
             left: 0;
+
             opacity: 0;
             top: 0;
+
             transform: scale3d(0.5, 0.5, 0.5);
            padding: 0 8px;
+
             animation: move 3s ease-out infinite;
             box-sizing: border-box;
+
 
         }
 
         }
  
         .mfp-container:before {
+
         .chevron:first-child {
             content: '';
+
             animation: move 3s ease-out 1s infinite;
            display: inline-block;
+
            height: 100%;
+
            vertical-align: middle;
+
 
         }
 
         }
  
         .mfp-align-top .mfp-container:before {
+
         .chevron:nth-child(2) {
             display: none;
+
             animation: move 3s ease-out 2s infinite;
 
         }
 
         }
  
         .mfp-content {
+
         .chevron:before,
             position: relative;
+
        .chevron:after {
             display: inline-block;
+
             content: ' ';
             vertical-align: middle;
+
             position: absolute;
             margin: 0 auto;
+
             top: 0;
             text-align: left;
+
             height: 100%;
             z-index: 1045;
+
             width: 51%;
 +
             background: #fff;
 
         }
 
         }
  
         .mfp-inline-holder .mfp-content,
+
         .chevron:before {
        .mfp-ajax-holder .mfp-content {
+
             left: 0;
             width: 100%;
+
             transform: skew(0deg, 30deg);
             cursor: auto;
+
 
         }
 
         }
  
         .mfp-ajax-cur {
+
         .chevron:after {
             cursor: progress;
+
             right: 0;
 +
            width: 50%;
 +
            transform: skew(0deg, -30deg);
 
         }
 
         }
  
         .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+
         @keyframes move {
             cursor: -moz-zoom-out;
+
             25% {
             cursor: -webkit-zoom-out;
+
                opacity: 1;
             cursor: zoom-out;
+
 
 +
             }
 +
            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);
 +
            }
 
         }
 
         }
  
         .mfp-zoom {
+
         @keyframes pulse {
             cursor: pointer;
+
             to {
            cursor: -webkit-zoom-in;
+
                opacity: 1;
             cursor: -moz-zoom-in;
+
             }
            cursor: zoom-in;
+
 
         }
 
         }
  
         .mfp-auto-cursor .mfp-content {
+
 
             cursor: auto;
+
        /* FlowChart*/
 +
         .circleO {
 +
            height: 60px;
 +
            width: 60px;
 +
            padding: auto;
 +
            border-radius: 50%;
 +
            background-color: rgba(230, 230, 230, 1);
 +
             color: black;
 +
            z-index: 2;
 
         }
 
         }
  
         .mfp-close,
+
         .circleO img {
        .mfp-arrow,
+
             max-height: 40px;
        .mfp-preloader,
+
             width: auto;
        .mfp-counter {
+
             -webkit-user-select: none;
+
             -moz-user-select: none;
+
            user-select: none;
+
 
         }
 
         }
  
         .mfp-loading.mfp-figure {
+
         .circleS {
             display: none;
+
            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;
 
         }
 
         }
  
         .mfp-hide {
+
         .circleS img {
             display: none !important;
+
             max-height: 40px;
 +
            width: auto;
 
         }
 
         }
  
         .mfp-preloader {
+
         .circleM {
             color: #CCC;
+
             height: 100px;
             position: absolute;
+
             width: 100px;
             top: 50%;
+
             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;
 
             width: auto;
            text-align: center;
 
            margin-top: -0.8em;
 
            left: 8px;
 
            right: 8px;
 
            z-index: 1044;
 
 
         }
 
         }
  
         .mfp-preloader a {
+
         .circleL {
             color: #CCC;
+
            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;
 
         }
 
         }
  
         .mfp-preloader a:hover {
+
         .circleL img {
             color: #FFF;
+
            max-height: 130px;
 +
             width: auto;
 
         }
 
         }
  
         .mfp-s-ready .mfp-preloader {
+
         #conceptFlow h5 {
             display: none;
+
            font-weight: bold;
 +
            font-size: 2rem;
 +
            margin-bottom: 30px;
 +
             color: #009ec6;
 
         }
 
         }
  
         .mfp-s-error .mfp-content {
+
         #conceptFlow span {
             display: none;
+
             font-size: 1.5rem;
 
         }
 
         }
  
         button.mfp-close,
+
         /* height of each section*/
         button.mfp-arrow {
+
         .how-it-works.row {
             overflow: visible;
+
             height: 50vh
            cursor: pointer;
+
            background: transparent;
+
            border: 0;
+
            -webkit-appearance: none;
+
            display: block;
+
            outline: none;
+
            padding: 0;
+
            z-index: 1046;
+
            box-shadow: none;
+
            touch-action: manipulation;
+
 
         }
 
         }
  
         button::-moz-focus-inner {
+
         .how-it-works.row .col-3 {
             padding: 0;
+
             align-self: stretch;
            border: 0;
+
 
         }
 
         }
  
         .mfp-close {
+
         .how-it-works.row .col-3::after {
            width: 44px;
+
             content: "";
            height: 44px;
+
             line-height: 44px;
+
 
             position: absolute;
 
             position: absolute;
             right: 0;
+
             border-left: 3px solid rgba(82, 187, 199, 1);
            top: 0;
+
             z-index: 1;
            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,
+
         .diagnosis.row .col-3::after {
        .mfp-close:focus {
+
            content: "";
             opacity: 1;
+
            position: absolute;
 +
            border-left: 3px dotted rgba(82, 187, 199, 1);
 +
             z-index: 1;
 
         }
 
         }
  
         .mfp-close:active {
+
         .how-it-works.row .col-3.bottom::after {
             top: 1px;
+
            height: 50%;
 +
            left: 50%;
 +
             top: 50%;
 
         }
 
         }
  
         .mfp-close-btn-in .mfp-close {
+
         .how-it-works.row .col-3.full::after {
             color: #333;
+
             height: 100%;
 +
            left: calc(50% - 3px);
 
         }
 
         }
  
         .mfp-image-holder .mfp-close,
+
         .how-it-works.row .col-3.fullRight::after {
        .mfp-iframe-holder .mfp-close {
+
             height: 100%;
            color: #FFF;
+
             left: 50%;
            right: -6px;
+
             text-align: right;
+
             padding-right: 6px;
+
            width: 100%;
+
 
         }
 
         }
  
         .mfp-counter {
+
         .how-it-works.row .col-3.top::after {
             position: absolute;
+
             height: 50%;
 +
            left: calc(50% - 3px);
 
             top: 0;
 
             top: 0;
             right: 0;
+
             border: 2px dotted rgba(82, 187, 199, 1);
            color: #CCC;
+
            font-size: 12px;
+
            line-height: 18px;
+
            white-space: nowrap;
+
 
         }
 
         }
  
         .mfp-arrow {
+
 
            position: absolute;
+
         .timeline div {
            opacity: 0.65;
+
            margin: 0;
+
            top: 50%;
+
            margin-top: -55px;
+
 
             padding: 0;
 
             padding: 0;
            width: 90px;
+
             height: 40px;
             height: 110px;
+
            -webkit-tap-highlight-color: transparent;
+
 
         }
 
         }
  
         .mfp-arrow:active {
+
         .timeline hr {
             margin-top: -54px;
+
             border-top: 3px solid rgba(82, 187, 199, 1);
 +
            background-color: transparent;
 +
            margin: 0;
 +
            top: 17px;
 +
            position: relative;
 
         }
 
         }
  
         .mfp-arrow:hover,
+
         .timeline .col-3 {
        .mfp-arrow:focus {
+
            display: flex;
             opacity: 1;
+
             overflow: hidden;
 
         }
 
         }
  
         .mfp-arrow:before,
+
         .timeline .corner {
        .mfp-arrow:after {
+
             border: 3px solid rgba(82, 187, 199, 1);
             content: '';
+
             width: 100%;
            display: block;
+
             position: relative;
             width: 0;
+
             border-radius: 15px;
            height: 0;
+
             position: absolute;
+
             left: 0;
+
            top: 0;
+
            margin-top: 35px;
+
            margin-left: 35px;
+
            border: medium inset transparent;
+
 
         }
 
         }
  
         .mfp-arrow:after {
+
         .timeline .top-right {
             border-top-width: 13px;
+
             left: 50%;
            border-bottom-width: 13px;
+
             top: -50%;
             top: 8px;
+
 
         }
 
         }
  
         .mfp-arrow:before {
+
         .timeline .left-bottom {
             border-top-width: 21px;
+
             left: -50%;
            border-bottom-width: 21px;
+
             top: calc(50% - 3px);
             opacity: 0.7;
+
 
         }
 
         }
  
         .mfp-arrow-left {
+
         .timeline .top-left {
             left: 0;
+
             left: -50%;
 +
            top: -50%;
 
         }
 
         }
  
         .mfp-arrow-left:after {
+
         .timeline .right-bottom {
             border-right: 17px solid #FFF;
+
             left: 50%;
             margin-left: 31px;
+
             top: calc(50% - 3px);
 
         }
 
         }
  
         .mfp-arrow-left:before {
+
         /* Qoutes Part*/
             margin-left: 25px;
+
        #warnPics {
             border-right: 27px solid #3F3F3F;
+
             height: auto;
 +
            min-height: 20vw;
 +
             font-weight: 100;
 
         }
 
         }
  
         .mfp-arrow-right {
+
         #warnPics .qoutes span {
             right: 0;
+
             font-size: 1.5rem;
 
         }
 
         }
  
         .mfp-arrow-right:after {
+
         #warnPics .qoutes {
            border-left: 17px solid #FFF;
+
 
            margin-left: 39px;
+
 
         }
 
         }
  
         .mfp-arrow-right:before {
+
         #qoute1 {
             border-left: 27px solid #3F3F3F;
+
            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");
 +
            background-repeat: no-repeat;
 +
             background-size: cover;
 +
            background-position: center;
 +
            color: #fff;
 
         }
 
         }
  
         .mfp-iframe-holder {
+
         #qoute2 {
             padding-top: 40px;
+
            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");
             padding-bottom: 40px;
+
             background-repeat: no-repeat;
 +
             background-size: cover;
 +
            background-position: center;
 +
            color: #fff;
 
         }
 
         }
  
         .mfp-iframe-holder .mfp-content {
+
         #qoute3 {
             line-height: 0;
+
            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");
             width: 100%;
+
             background-repeat: no-repeat;
             max-width: 900px;
+
             background-size: cover;
 +
             background-position: top;
 +
            color: #fff;
 
         }
 
         }
  
         .mfp-iframe-holder .mfp-close {
+
         #whyTitle {
             top: -40px;
+
             background: rgba(35, 35, 35, 1);
 
         }
 
         }
  
         .mfp-iframe-scaler {
+
         .warningContent span {
             width: 100%;
+
             font-size: 2.5rem;
             height: 0;
+
             font-weight: bold;
            overflow: hidden;
+
            padding-top: 56.25%;
+
 
         }
 
         }
  
         .mfp-iframe-scaler iframe {
+
         .mobileText {
             position: absolute;
+
             font-size: 1.5rem !important;
            display: block;
+
             margin-top: 3rem;
            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 */
+
 
         img.mfp-img {
+
        #conceptFlowTitle {
 +
            font-size: 2.5rem;
 +
            font-weight: bold;
 +
        }
 +
 
 +
 
 +
         /* START PopUp STYLES */
 +
         .labelBox {
 +
            display: inline;
 +
        }
 +
 
 +
        .reg {
 +
            background-color: white;
 +
            display: inline;
 +
            margin: 0 auto;
 
             width: auto;
 
             width: auto;
             max-width: 100%;
+
             font-size: 16.996px;
             height: auto;
+
             line-height: 20px;
             display: block;
+
             padding: 12px 18px 13px;
             line-height: 0;
+
             -webkit-border-radius: 6px;
             box-sizing: border-box;
+
             -moz-border-radius: 6px;
             padding: 40px 0 40px;
+
            -ms-border-radius: 6px;
             margin: 0 auto;
+
             -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;
 
         }
 
         }
  
         /* The shadow behind the image */
+
         .reg:hover {
        .mfp-figure {
+
            opacity: 0.8;
             line-height: 0;
+
            -webkit-transition: all 0.3s ease-in-out;
 +
             -moz-transition: all 0.3s ease-in-out;
 +
            transition: all 0.3s ease-in-out;
 
         }
 
         }
  
         .mfp-figure:after {
+
         .pop {
             content: '';
+
             display: none;
 
             position: absolute;
 
             position: absolute;
            left: 0;
+
             top: 75%;
             top: 40px;
+
             max-width: 100%;
            bottom: 40px;
+
            display: block;
+
            right: 0;
+
             width: auto;
+
 
             height: auto;
 
             height: auto;
             z-index: -1;
+
            -webkit-border-radius: 6px;
             box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+
            -moz-border-radius: 6px;
            background: #444;
+
            -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-figure small {
+
         .pop > h1 {
             color: #BDBDBD;
+
             color: #009ec6;
            display: block;
+
             font-size: 100%;
             font-size: 12px;
+
            line-height: 14px;
+
 
         }
 
         }
  
         .mfp-figure figure {
+
         .pop > p {
             margin: 0;
+
             font-size: 100%;
 +
            color: #777777;
 
         }
 
         }
  
         .mfp-bottom-bar {
+
         .pop > span {
             margin-top: -36px;
+
             cursor: pointer;
 
             position: absolute;
 
             position: absolute;
             top: 100%;
+
             top: 10px;
             left: 0;
+
             right: 10px;
             width: 100%;
+
            -webkit-border-radius: 100px;
             cursor: auto;
+
            -moz-border-radius: 100px;
 +
            color: #777777;
 +
             width: 30px;
 +
             height: 30px;
 
         }
 
         }
  
         .mfp-title {
+
        /* END PopUp STYLES */
             text-align: left;
+
 
            line-height: 18px;
+
         .mobileTitle {
            color: #F3F3F3;
+
             font-size: 3.5rem !important;
            word-wrap: break-word;
+
            padding-right: 36px;
+
 
         }
 
         }
  
         .mfp-image-holder .mfp-content {
+
         .readButton, .readButton:visited {
             max-width: 100%;
+
             color: #17a2b8;
 
         }
 
         }
  
         .mfp-gallery .mfp-image-holder .mfp-figure {
+
         .readButton:hover {
             cursor: pointer;
+
            color: white;
 +
        }
 +
 
 +
        .showCase .row {
 +
             padding-left: 10vw;
 +
            padding-right: 10vw;
 
         }
 
         }
  
         @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
+
         @media only screen and (max-width: 767.98px) {
             /**
+
             #videoBox #videoShow {
  * Remove all paddings around the image on small screen
+
                 position: relative;
  */
+
            .mfp-img-mobile .mfp-image-holder {
+
                 padding-left: 0;
+
                padding-right: 0;
+
 
             }
 
             }
  
             .mfp-img-mobile img.mfp-img {
+
             #PhactoryTitle {
                 padding: 0;
+
                 font-size: 4rem;
 
             }
 
             }
  
             .mfp-img-mobile .mfp-figure:after {
+
             #PhactoryText {
                 top: 0;
+
                 font-size: 1.5rem;
                bottom: 0;
+
 
             }
 
             }
  
             .mfp-img-mobile .mfp-figure small {
+
             .warningContent span {
                 display: inline;
+
                 font-size: 1.5rem;
                margin-left: 5px;
+
 
             }
 
             }
  
             .mfp-img-mobile .mfp-bottom-bar {
+
             #warnPics .qoutes {
                 background: rgba(0, 0, 0, 0.6);
+
                 font-size: 1rem;
                bottom: 0;
+
                margin: 0;
+
                top: auto;
+
                padding: 3px 5px;
+
                position: fixed;
+
                box-sizing: border-box;
+
 
             }
 
             }
  
             .mfp-img-mobile .mfp-bottom-bar:empty {
+
             #compareBox img {
                 padding: 0;
+
                max-height: 20vh;
 +
                 width: auto;
 
             }
 
             }
  
             .mfp-img-mobile .mfp-counter {
+
             .mobileTitle {
                 right: 5px;
+
                 font-size: 3rem !important;
                top: 3px;
+
 
             }
 
             }
  
             .mfp-img-mobile .mfp-close {
+
             #conceptFlowTitle {
                 top: 0;
+
                 font-size: 2rem;
                right: 0;
+
                 font-weight: bold;
                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) {
+
             #conceptFlow h5 {
             .mfp-arrow {
+
                 font-size: 1.5rem;
                 -webkit-transform: scale(0.75);
+
                transform: scale(0.75);
+
 
             }
 
             }
  
             .mfp-arrow-left {
+
             #conceptFlow span {
                 -webkit-transform-origin: 0;
+
                 font-size: 1rem;
                transform-origin: 0;
+
 
             }
 
             }
  
             .mfp-arrow-right {
+
             .how-it-works.row {
                 -webkit-transform-origin: 100%;
+
                 height: auto;
                transform-origin: 100%;
+
 
             }
 
             }
  
             .mfp-container {
+
            /* FlowChart*/
                 padding-left: 6px;
+
             .circleO {
                 padding-right: 6px;
+
                 height: 40px;
 +
                 width: 40px;
 
             }
 
             }
        }
 
  
        .mfp-zoom-out {
+
            .circleO img {
            /* start state */
+
                max-height: 25px;
            /* animate in */
+
                width: auto;
             /* animate out */
+
             }
        }
+
  
        .mfp-zoom-out .mfp-with-anim {
+
            .circleS {
            opacity: 0;
+
                height: 40px;
            transition: all 0.3s ease-in-out;
+
                width: 40px;
             transform: scale(1.3);
+
             }
        }
+
  
        .mfp-zoom-out.mfp-bg {
+
            .circleS img {
            opacity: 0;
+
                max-height: 25px;
            transition: all 0.3s ease-out;
+
                width: auto;
        }
+
            }
  
        .mfp-zoom-out.mfp-ready .mfp-with-anim {
+
            .circleM {
            opacity: 1;
+
                height: 50px;
            transform: scale(1);
+
                width: 50px;
        }
+
            }
  
        .mfp-zoom-out.mfp-ready.mfp-bg {
+
            .circleM img {
            opacity: 0.8;
+
                max-height: 35px;
        }
+
                width: auto;
 +
            }
  
        .mfp-zoom-out.mfp-removing .mfp-with-anim {
+
            .circleL {
            transform: scale(1.3);
+
                height: 60px;
            opacity: 0;
+
                width: 60px;
        }
+
            }
  
        .mfp-zoom-out.mfp-removing.mfp-bg {
+
            .circleL img {
            opacity: 0;
+
                max-height: 45px;
        }
+
                width: auto;
    </style>
+
            }
  
 +
            .reg {
 +
                padding: 0;
 +
            }
  
<body style="">
+
            .mobileText {
 +
                font-size: 1rem !important;
 +
                margin-top: 0;
 +
            }
  
<section id="nav-placeholder">
+
             .showCase .row {
    <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
+
                padding: 0;
        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; color: #2ecc71;">OUR STORY</a>
+
                </li>
+
  
                <li class="nav-item dropdown mx-3">
+
        @media only screen and (max-width: 991.98px) {
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
+
        }
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
+
                        PROJECT
+
                    </a>
+
                    <div class="dropdown-menu">
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Description"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Description</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Killswitch"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Kill Switch</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Nissle"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Nissle</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Incretin"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Incretin</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/CPP"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Cell Penetrating Peptides</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Results"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Results</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Demonstrate"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Demonstrate</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Notebook"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Notebook</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Model"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Outlook"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">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; color: #2ecc71;">
+
                        PARTS
+
                    </a>
+
                    <div class="dropdown-menu">
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Parts"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Parts Overview</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Basic Parts</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Improved Parts</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Composite_Part"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Composite Parts</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Part_Collection"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Part Collection</a>
+
                    </div>
+
                </li>
+
  
                <li class="nav-item dropdown mx-3">
+
        @media only screen and (max-width: 1199.98px) {
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
+
        }
                      style="font-family: 'Righteous', cursive; font-weight: normal;color: #2ecc71;">
+
    </style>
                        PEOPLE
+
                    </a>
+
                    <div class="dropdown-menu">
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Team"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Team</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Collaborations"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Collaborations</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Attributions"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Attributions</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Sponsors"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sponsors</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Gallery"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Gallery</a>
+
                    </div>
+
                </li>
+
  
                <li class="nav-item dropdown mx-3">
+
    <script>
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
+
        // Scroll Down Icon
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
+
        $(document).ready(function () {
                        HUMAN PRACTICES
+
            // Add smooth scrolling to all links
                    </a>
+
            $("#goTo").on('click', function (event) {
                    <div class="dropdown-menu">
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Overview</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public
+
                            Engagement</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Experts"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experts</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Entrepreneurship</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/SDG"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sustainable Development
+
                            Goals</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Experimenta"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">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; color: #2ecc71;">
+
                        AWARDS
+
                    </a>
+
                    <div class="dropdown-menu">
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Integrated Human Practise</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public
+
                            Engagement</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Supporting
+
                            Entrepreneurship</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Measurement"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Measurement</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Model"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
+
                    </div>
+
                </li>
+
  
                 <li class="nav-item mx-3">
+
                 // Make sure this.hash has a value before overriding default behavior
                     <a class="nav-link" href="/Team:Tuebingen/Safety"
+
                if (this.hash !== "") {
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">SAFETY</a>
+
                     // Prevent default anchor click behavior
                </li>
+
                    event.preventDefault();
  
                <li class="nav-item mx-3">
+
                     // Store hash
                     <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank"
+
                    var hash = this.hash;
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">JUDGING
+
                        FORM ⇗</a>
+
                </li>
+
  
                <li class="nav-item mx-1 pt-2">
+
                     // Using jQuery's animate() method to add smooth page scroll
                     <a href="https://www.facebook.com/igemtuebingen/" class="fa fa-facebook" target="_blank"></a>
+
                    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
                </li>
+
                     $('html, body').animate({
                <li class="nav-item mx-1 pt-2">
+
                        scrollTop: $(hash).offset().top
                     <a href="https://twitter.com/iGEMTuebingen" class="fa fa-twitter" target="_blank"></a>
+
                    }, 800, function () {
                </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>
+
                        // Add hash (#) to URL when done scrolling (default click behavior)
        </div>
+
                        window.location.hash = hash;
    </nav>
+
                    });
</section>
+
                } // End if
<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>
+
</body>
+
  
<style>
 
  
    .pictureTitle {
+
        $(document).ready(function () {
        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");
+
            $(".reg").click(function () {
        background-repeat: no-repeat;
+
                $(".pop").fadeOut(100);
        background-size: cover;
+
                $(this).next().fadeIn(300);
        background-position: center;
+
            });
    }
+
  
 +
            $(".pop > span, .pop").click(function () {
 +
                $(".pop").fadeOut(300);
 +
            });
 +
        });
  
     @media only screen and (max-width: 575.98px) {
+
     </script>
    }
+
  
     @media only screen and (max-width: 767.98px) {
+
<div id="videoBox" class="text-center" style="position: relative;  min-height:5%; width:100%; margin-top: 50px">
     }
+
     <video id="videoShow" playsinline autoplay muted id="myVideo" style="min-height:5%; width:100%; margin-top: 50px">
 +
        <source src="https://2019.igem.org/wiki/images/c/c1/T--Tuebingen--cover_video.mp4" type="video/mp4"
 +
                style="width: 100%;">
 +
        Your browser does not support HTML5 video.
 +
     </video>
  
    @media only screen and (max-width: 991.98px) {
+
</div>
    }
+
  
    @media only screen and (max-width: 1199.98px) {
 
    }
 
  
    /*
+
<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'">
========================
+
<div data-aos="zoom-out-left"
     BUTTON STYLE BEGIN
+
    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>
  
     .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/3c/T--Tuebingen--Diabetes-Treatment-transparent-Landing-Page.png"
         background-color: transparent
+
                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>
  
    .btn-link:hover {
+
            <p class="text-justify  mobileText">
        color: #0056b3;
+
                Hence, the diagnosis of Type II Diabetes Mellitus is no longer a death sentence.
        text-decoration: underline;
+
            </p>
         background-color: transparent;
+
         </div>
        border-color: transparent
+
    </div>
    }
+
</div>
  
     .btn-link.focus, .btn-link:focus {
+
     <div class="row pt-5 pb-3 ">
         text-decoration: underline;
+
         <div class="warningContent col-12 slide-in">
        border-color: transparent;
+
            <span class="align-middle">Yet...</span>
         box-shadow: none
+
         </div>
     }
+
     </div>
  
     .btn-link.disabled, .btn-link:disabled {
+
     <div data-aos="zoom-out-right"
        color: #6c757d;
+
    data-aos-offset="200"
         pointer-events: none
+
    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>
  
    .btn-link {
+
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
        opacity: 0.8;
+
            <h2 class="display-4 mobileTitle">Current Drugs</h2>
        text-decoration: none;
+
            <p class="text-justify mobileText">are expensive, require fine tuning and daily shots.
        color: white;
+
                Moreover, they have severe side-effects, causing patients to skip doses.</p>
    }
+
  
    .btn-link:hover {
+
            <p class="text-justify mobileText">“Many patients don’t want to use insulin. They don’t want
        opacity: 1;
+
                to do finger sticks and they’re afraid of hypoglycemia.”<br>
        text-decoration: none;
+
            </p>
        color: rgba(105, 202, 98, 1.1);
+
    }
+
  
    .btn-link:focus {
+
            <p class="text-justify mobileText">
        opacity: 1;
+
                “To fight the global diabetes pandemic, we would ideally have an accessible cost-effective
        text-decoration: none;
+
                easily-compliant intervention that has high clinical efficacy and that is free of adverse side effects.”<br><br>
        color: rgba(105, 202, 98, 1.1);
+
                Prof. Harold Lebovitz, State University of New York Health Science Center, Brooklyn, New York
     }
+
            </p>
 +
        </div>
 +
    </div>
 +
     </div>
  
     .card-header {
+
     <div class="row pt-5 pb-3 ">
         background-color: rgba(50, 50, 50, 1);
+
         <div class="warningContent col-12">
     }
+
            <span class="align-middle">However...</span>
 +
        </div>
 +
     </div>
  
     .card button {
+
     <div data-aos="zoom-out-left"
        width: 100%;
+
    data-aos-offset="200"
        font-size: 1.5rem;
+
    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">
    BUTTON STYLE END
+
            <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>
  
    /*
+
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
========================
+
            <h2 class="display-4 mobileTitle">There's a solution!</h2>
      BUTTON ONE
+
            <p class="text-justify mobileText">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.</p>
    .btn-one {
+
        color: rgba(105, 202, 98, 1.1);
+
        transition: all 0.3s;
+
        position: relative;
+
    }
+
  
    .btn-one span {
+
            <p class="text-justify mobileText">This enables an easier therapy where a regular intake of
        transition: all 0.3s;
+
                medicals are not required.</p>
    }
+
  
    .btn-one::before {
+
            <p class="text-justify mobileText">Improved cell penetrating peptides with the use of
        content: '';
+
                artificial intelligence allow for an efficient and safe transport of our effectors into the cells.</p>
        position: absolute;
+
         </div>
        bottom: 0;
+
    </div>
        left: 0;
+
     </div>
        width: 100%;
+
        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 {
+
     <div class="row pt-5 pb-3 ">
         letter-spacing: 2px;
+
         <div class="warningContent col-12">
     }
+
            <span class="align-middle">Safety</span>
 +
        </div>
 +
     </div>
  
     .btn-one:hover::before {
+
     <div data-aos="zoom-out-right"
        opacity: 1;
+
    data-aos-offset="200"
        transform: scale(1, 1);
+
    data-aos-delay="50"
     }
+
     data-aos-duration="2000"
 +
    data-aos-easing="ease-in-out-cubic"
 +
    data-aos-mirror="true"
 +
    data-aos-once="false">
  
     .btn-one::after {
+
     <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
        content: '';
+
         <div class="col-12 col-md-6">
        position: absolute;
+
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/6/6d/T--Tuebingen--Cas3-system-transparent-Landing-page.png"
        bottom: 0;
+
                alt="meetUp" style="padding-left: 6vw;">
        left: 0;
+
        </div>
        width: 100%;
+
         height: 100%;
+
        z-index: 1;
+
        transition: all 0.3s;
+
        background-color: rgba(255, 255, 255, 0.05);
+
    }
+
  
    .btn-one:hover::after {
+
        <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
        opacity: 0;
+
            <h2 class="display-4 mobileTitle">is our highest priority!</h2>
        transform: scale(0.1, 1);
+
            <p class="text-justify mobileText">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. </p>
  
    /*
+
            <p class="text-justify mobileText">
========================
+
                If the conditions of our regulatory system are no longer met, Cas3 will be degrading all genetic
      BUTTON ONE END
+
                information.
========================
+
            </p>
*/
+
        </div>
 +
    </div>
 +
    </div>
  
     /*
+
     <div class="row pt-5 pb-3 ">
    ======================
+
        <div class="warningContent col-12">
    HEADER BANNER STYLE BEGIN
+
            <span class="align-middle">Additionally</span>
    ==========================
+
        </div>
     */
+
     </div>
  
     .header {
+
     <div data-aos="zoom-out-left"
        position: relative;
+
    data-aos-offset="200"
        overflow: hidden;
+
    data-aos-delay="50"
        display: flex;
+
    data-aos-duration="2000"
        flex-wrap: wrap;
+
    data-aos-easing="ease-in-out-cubic"
        justify-content: center;
+
    data-aos-mirror="true"
        align-items: flex-start;
+
     data-aos-once="false">
        align-content: flex-start;
+
        height: 50vh;
+
        max-height: 350px;
+
        min-width: 300px;
+
        color: #eee;
+
     }
+
  
     .header:after {
+
     <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
        content: "";
+
         <div class="col-12 col-md-6">
        width: 100%;
+
            <img class="img-fluid" src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--EcN-Charakterisierung-transparent-Landing-page.png"
        height: 100%;
+
                alt="meetUp" style="padding-left: 6vw;">
         position: absolute;
+
        </div>
        bottom: 0;
+
        left: 0;
+
        z-index: -1;
+
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 40%, rgba(27, 32, 48, 1) 100%);
+
    }
+
  
    .header:before {
+
         <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
         content: "";
+
            <h2 class="display-4 mobileTitle" style="overflow-x: visible">An in depth E.coli Nissle characterization</h2>
        width: 100%;
+
            <p class="text-justify mobileText">Despite the fact that E. Coli Nissle is an already
        height: 100%;
+
                approved probiotic, it's surprisingly badly characterized.</p>
        position: absolute;
+
        top: 0;
+
        left: 0;
+
        -webkit-backface-visibility: hidden;
+
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
+
        transform: translateZ(0);
+
        background: #1B2030 url(https://2019.igem.org/wiki/images/e/e1/T--Tuebingen--attributions-banner.jpg) center no-repeat;
+
        background-size: 100%, 80%;
+
        animation: grow 30s linear 10ms infinite;
+
        transition: all 0.2s ease-in-out;
+
        z-index: -2
+
    }
+
  
    .header a {
+
            <p class="text-justify mobileText">
        color: #eee
+
                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>
  
    .info {
+
            <p class="text-justify mobileText">
        width: 100%;
+
                Finally, we carried out a series of RNA-Seq experiments to assess the adaptions and reactions of E. coli
        padding: 15% 10% 0 10%;
+
                Nissle to aerobic, as well as anaerobic occurring stress factors.
         text-align: center;
+
            </p>
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2)
+
         </div>
     }
+
    </div>
 +
     </div>
  
     .info h4, .meta {
+
     <div class="row pt-5 pb-3 ">
         font-size: 0.7em
+
         <div class="warningContent col-12 slide-in">
     }
+
            <span class="align-middle">Bringing it all together</span>
 +
        </div>
 +
     </div>
  
     @media only screen and (max-width: 800px) {
+
     <div data-aos="zoom-out-right"
        .info h1 {
+
    data-aos-offset="200"
            margin-top: 15%;
+
    data-aos-delay="50"
            font-size: 1.7em;
+
    data-aos-duration="2000"
            text-align: center;
+
    data-aos-easing="ease-in-out-cubic"
        }
+
    data-aos-mirror="true"
     }
+
     data-aos-once="false">
  
     @media only screen and (max-width: 660px) {
+
     <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;">
         .info h1 {
+
         <div class="col-12 col-md-6">
             margin-top: 20%;
+
             <img class="img-fluid" src="https://2019.igem.org/wiki/images/3/3d/T--Tuebingen--New-Approach-transparent-Landing-page.png"
            font-size: 1.5em;
+
                alt="meetUp" style="padding-left: 6vw;">
         }
+
         </div>
    }
+
  
    @media only screen and (max-width: 560px) {
 
        .info h1 {
 
            margin-top: 25%;
 
        }
 
    }
 
  
    @media only screen and (max-width: 470px) {
+
         <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;">
         .info h1 {
+
            <h2 class="display-4 mobileTitle">Our work lays the foundation for an innovative, unprecedented approach to treat Diabetes Mellitus Type II.</h2>
            margin-top: 30%;
+
         </div>
        }
+
    }
+
 
+
    @keyframes grow {
+
        0% {
+
            transform: scale(1)
+
        }
+
        50% {
+
            transform: scale(1.2)
+
        }
+
    }
+
 
+
    /*  ======================
+
        HEADER BANNER STYLE END
+
        ==========================
+
        */
+
 
+
</style>
+
 
+
<!-- Header Banner Begin-->
+
<div class="header">
+
    <div class="info">
+
         <h1 style="font-family: 'Righteous', cursive; font-weight: normal;">ATTRIBUTIONS</h1>
+
 
     </div>
 
     </div>
 
</div>
 
</div>
<!-- Header Banner End-->
 
<div style="background-color: #232323;">
 
  
<div class="glpContainer">
+
</div>
    <aside id="glpContentsOuter">
+
        <aside id="phaContents" class="table-of-contents">
+
            <!-- will be generated with JS -->
+
        </aside>
+
    </aside>
+
  
    <main class="post-content">
+
<style>
  
        <h3>We are eternally grateful to our supporters</h3>
+
.testclasse {
        <div class="row">
+
  margin: 0;
            <div class="col-12">
+
  background-color: #2ecc71;
                <p>
+
  background-image: radial-gradient(#2ecc71 20%, #1b7a43 50%, rgba(0, 0, 0, 0.5) 100%);
                    We are deeply grateful for all the support that we have received over the past iGEM year! Many
+
  background-size: 120%;
                    researchers, students, experts, departments and companies helped us along the way and we owe so much
+
  background-position: center;
                    to all of them. Here we really want to say thank you. We particularly appreciate Prof. Dr. Lars
+
  font-family: "Barlow Condensed", sans-serif;
                    Angenent and Dr. Bastian Molitor, who instructed our team, as well as our incredibly supportive
+
  -webkit-animation: tighten-vinette ease-out 1800ms forwards;
                    advisors Sarah Schulz and Patrick Schweizer. We could not have done it without you.
+
          animation: tighten-vinette ease-out 1800ms forwards;
                </p>
+
}
            </div>
+
  
            <h2>Students</h2>
+
.babbelbubu .logo .kokosnusss {
            <div class="row">
+
    width: 120%; margin-left: -10%; margin-top: -45%;
                <div class="col-12">
+
  pointer-events: none;
                    <p>
+
  height: 90vh;
                        <b>Lina Widerspick</b> designed our wetlab parts and was heavily involved in everything related
+
    top: 0;
                        to
+
    bottom: 0;
                        human practices and collaborations. Her incredible speed of writing is yet to match.
+
  right: 0;
                    </p>
+
  left: 0;
                    <p>
+
  position: relative;
                        <b>Lukas Heumos</b> designed our drylab parts, implemented our wiki, was involved in sponsoring
+
  opacity: .6;
                        and
+
  z-index: 20;
                        partnerships and organized the team. If anybody was looking for an answer in our slack channels,
+
  background-size: cover;
                        chances are high that Lukas had already answered it before the message really came through.
+
  background-position: center;
                    </p>
+
  background-image: url("https://static.comicvine.com/uploads/original/11124/111240517/4986890-4700382785-29908.jpg");
                    <p>
+
}
                        <b>Patrick Müller</b> designed our wetlab parts, was our master of constructs and our RNA-Seq
+
                        library
+
                        wizard. Furthermore, he was also involved in our partnership with the Experimenta He’ll probably
+
                        beat you at grain income at the Settlers of Catan.
+
                    </p>
+
                    <p>
+
                        <b>Antonia Binder</b> performed all different kinds of wetlab experiments and didn’t hesitate to
+
                        stay
+
                        for long hours to get the job done. If there’s one person in the world that really loves her
+
                        jute bags - it’s Antonia.
+
                    </p>
+
                    <p>
+
                        <b>Jakob Keck</b> was heavily involved in the wetlab and finance. He also helped us coordinating
+
                        our
+
                        stay in the ZMBP laboratories. If you find a working, ancient looking device in your laboratory,
+
                        there is a strong possibility that Jakob fixed and donated it.
+
                    </p>
+
                    <p>
+
                        <b>Famke Bäuerle</b> was responsible for our metabolic modelling, managed our partnership with
+
                        the
+
                        Experimenta, organized our team and took great care of our finances. Famke did everything for
+
                        the team and didn’t even dread driving five girls four hours to Düsseldorf.
+
                    </p>
+
                    <p>
+
                        <b>Steffen Lemke</b> designed our cpp constructs and implemented our software. Few people know
+
                        the
+
                        rules of board games as well as Steffen, especially the infamous Steffen house rules.
+
                    </p>
+
                    <p>
+
                        <b>Marietheres Evers</b> performed a multiplicity of experiments and managed our social media
+
                        channels. Her well-timed jokes during our meetings ensured that our spirits were kept high.
+
                    </p>
+
                    <p>
+
                        <b>Eva Kunzelmann</b> performed all different kinds of wetlab experiments and had an overview of
+
                        the
+
                        course of various experiments. Eva’s choice of music really helped us bypass the waiting time
+
                        between experiments and motivated us not to give up even when things went wrong.
+
                    </p>
+
                    <p>
+
                        <b>Luzia Hamma</b> helped in different projects in the lab, was involved in our human practices
+
                        parts
+
                        and helped us designing our poster and banner. When our long meetings yet again didn’t want to
+
                        end, Luzi cinched our survival with nourishing snacks.
+
                    </p>
+
                    <p>
+
                        <b>Philipp Ehmele</b> implemented our wiki. If technical limitations prevent something from
+
                        being
+
                        implemented on an iGEM wiki, Philipp will find a creative way to still do so.
+
                    </p>
+
                    <p>
+
                        <b>Katharina Csik</b> helped in the lab and captured our expert interview videos. Her experience
+
                        with
+
                        people helped us approach experts from different backgrounds and in turn develop new ideas.
+
                    </p>
+
                    <p>
+
                        <b>Carolin Schwitalla</b> organized us a laboratory and important materials. Additionally, she
+
                        helped
+
                        us design our images to be understandable even by non-scientists. The team is currently waiting
+
                        for our probiotic to find a way to Caro’s Sims3 families.
+
                    </p>
+
                    <p>
+
                        <b>Jonas Steinwender</b> is our design expert, who despite the approaching deadline of his
+
                        bachelor
+
                        thesis, has always managed to present our sometimes quite bizarre design ideas in a clear and
+
                        structured way.
+
                    </p>
+
  
                </div>
+
.babbelbubu {
            </div>
+
  height: 80%;
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 +
}
  
 +
.logo {
 +
  cursor: pointer;
 +
  text-align: center;
 +
}
 +
.logo:hover .restart {
 +
  opacity: .8;
 +
}
  
            <h2>Advisors</h2>
+
.restart {
            <div class="row">
+
  color: #fff;
                <div class="col-12">
+
  margin-top: 20px;
                    <p>
+
  font-size: 1.5rem;
                        <b>Sarah Schulz</b> gave staggeringly valuable insight and advice for our wetlab experiments. If
+
  text-transform: uppercase;
                        we ever got weird results in the lab, she was the one that we consulted first.
+
  letter-spacing: -.08rem;
                    </p>
+
  transition: opacity 150ms linear;
                    <p>
+
}
                        <b>Patrick Schweizer’s</b> experience and comprehension of synthetic biology was extremely
+
                        valuable. Additionally, his past experience of competitions ensured that we set up a
+
                        professional working and design environment. We won’t forget our time spent on the roofs of the
+
                        Max Planck Institute organized by Patrick.
+
                    </p>
+
                    <p>
+
                        <b>Dr. Pengfei Xia</b> eminently inspired our kill-switch mechanism and provided invaluable
+
                        feedback for our project. Additionally, his molecular cloning knowledge is off the roof.
+
                    </p>
+
                    <p>
+
                        <b>Dr. Bastian Molitor’s</b> deep understanding of anything synthetic biology was very
+
                        beneficial during our project development and troubleshooting. We’re very grateful for his
+
                        unconditional support.
+
                    </p>
+
                </div>
+
            </div>
+
  
            <h2>Partner Institutions</h2>
+
.marvel, .studios {
            <div class="row">
+
  position: relative;
                <div class="col-12">
+
  color: #fff;
                    <p>
+
  text-transform: uppercase;
                        The <b>European Molecular Biology Laboratory</b> (EMBL) warmly welcomed us in Heidelberg and
+
  letter-spacing: -.2rem;
                        allowed us to use some of their RNA-Seq library kits and perform the rRNA depletion in their
+
  font-size: 5rem;
                        laboratories. Additionally, Nayara Trevisan Doimo de Azevedo and Ferris Jung proceeded with the
+
  margin: .05rem .05rem .5rem;
                        RNA-Seq library preparation and sequenced it. Specifically, we would like to express our
+
  padding: 0 0.4rem;
                        profound gratitude to Iris Kruijen for handling everything related to communication and public
+
  display: inline-block;
                        relations exceptionally well and to Vladimir Benes for his great interest and extensive feedback
+
    margin-top: 30%;
                        for our project, as well as for allowing us to use his laboratories.
+
}
                    </p>
+
                    <p>
+
                        The <b>Center for Plant Molecular Biology</b> (ZMBP) kindly allowed us to use their
+
                        laboratories, enabling our wetlab projects in the first place. Prof. Dr. Klaus Harter in
+
                        particular supported us in a great measure.
+
                    </p>
+
                    <p>
+
                        Moreover, the <b>group of Prof. Dr. Wolfgang Wohlleben</b> generously allowed us to use their
+
                        laboratories as well as some of their material.
+
                    </p>
+
                    <p>
+
                        Additionally, the <b>NGS Competence Center Tübingen</b> (NCCT) provided us with their
+
                        laboratories, as well as material such as the flow cell for RNA-Seq. We are particularly
+
                        grateful to Dr. Angel Angelov who supervised and encouraged us even when things went badly.
+
                    </p>
+
                    <p>
+
                        Finally, we want to thank the <b>Quantitative Biology Center</b> (QBiC) for storing our
+
                        sequencing
+
                        data and providing us access to high performance clusters. Moreover, we would like to thank
+
                        Simon
+
                        Heumos for providing us with bacterial RNA-Seq bioinformatics data analysis expertise.
+
                    </p>
+
                </div>
+
            </div>
+
  
            <h2>Project Advice</h2>
+
.studios {
            <div class="row">
+
  font-weight: 500;
                <div class="col-12">
+
  letter-spacing: -.3rem;
                    <p>
+
  -webkit-transform: translateX(-95px);
                        We’re very grateful to <b>Dr. Lisa Maier</b> who provided us with gut microbiome support. Her
+
          transform: translateX(-95px);
                        expertise greatly influenced our RNA-Seq experimental design. Additionally, she generously
+
}
                        provided us with bacteria supernatant and mGAM medium.
+
                    </p>
+
                    <p>
+
                        <b>Dr. Vladimir Benes</b>, head of the Genomics Core Facility at the EMBL, was the main person
+
                        who suggested to examine the gut interaction and anaerobic conditions in the gut further via our
+
                        RNA-Seq experimental design and metabolic modelling. He also greatly supported our RNA-Seq
+
                        efforts and inspired us to work out a thoughtful experimental set-up for the experiments.
+
                    </p>
+
                    <p>
+
                        <b>Dr. Daniel Machado</b>, at our visit of the EMBL, gave us great insight into the internal of
+
                        CarveMe, recommended various ways of improving our generated model and validated our novel model
+
                        of E. coli Nissle. Furthermore, he introduced and explained Smetana in an exceptional
+
                        presentation to us.
+
                    </p>
+
                    <p>
+
                        <b>Prof. Dr. Andreas Dräger</b>, assistant professor for Computational Systems Biology of
+
                        Infection and Antimicrobial-Resistant Pathogens, was the main person who jump-started our
+
                        metabolic modelling approaches. He pointed us towards the creation of our own metabolic model
+
                        for E.coli Nissle with the use of CarveMe.
+
                    </p>
+
                    <p>
+
                        <b>Prof. Dr. Oliver Kohlbacher</b>, professor for applied bioinformatics, provided extensive
+
                        feedback for our constructs and shaped our initial RNA-Seq experimental design. Moreover, he
+
                        provided first hints at our metabolic modelling approaches.
+
                    </p>
+
                    <p>
+
                        <b>Dr. Jörg M. Schibel</b> and <b>Dr. Brigitte Walderich</b> examined the safety of our
+
                        experiments and provided valuable feedback for keeping everything in line and documenting
+
                        everything related to safety.
+
                    </p>
+
                    <p>
+
                        <b>Prof. Dr. Andreas Fritsche</b>, Deputy Director of the Institute for Diabetes Research and
+
                            Metabolic Diseases at the Helmholtz Centre Munich at the University of Tübingen, helped us
+
                            with his extensive knowledge of diabetes and answered fundamental questions about the
+
                            disease. Moreover, as a clinician, he could give an estimation about patient acceptance and
+
                            potential shortcomings of our idea.
+
                    </p>
+
                    <p>
+
                        <b>Dr. Anette Christ</b> is a member of the Institute of Innate Immunity in Bonn and works in
+
                        the group of Prof. Eicke Latz. Her support in researching potential outreach strategies for
+
                        diabetes prevention, as well as her expertise in inflammation and nutrition, helped us greatly
+
                        in designing our educational flyer and the concept of our information booth.
+
                    </p>
+
                    <p>
+
                        <b>Prof. Timo Müller</b>, acting director of IDO (Institute for Diabetes and Obesity) of the
+
                        Helmholtz Institute Munich is researching Diabetes mellitus, greatly supported us by raising our
+
                        awareness to the issue of pharmacological availability, as well as stability of GLP-1 analogues.
+
                        Moreover, he kindly participated in our expert interviews.
+
                    </p>
+
                    <p>
+
                        <b>Dr. Rolf Hecker</b>, director of the Institute of Technology Transfer and startups of the
+
                        University of Tübingen, discussed the open-source nature of iGEM with respect to patents with
+
                        us. Moreover, he gave valuable insight into the process of founding a company and entering
+
                        pharmaceutical markets and we are happy to collaborate with him in the next year.
+
                    </p>
+
                    <p>
+
                        <b>Synovo</b>, a pharmaceutical company in Tübingen, was very helpful in project design and the
+
                        evaluation of our idea. Moreover, they gave us insight into their company and helped us refine
+
                        our entrepreneurial strategy. For this support, we are very thankful.
+
                    </p>
+
                </div>
+
            </div>
+
  
            <h2>Lab Support</h2>
+
.marvel {
            <div class="row">
+
  z-index: 10;
                <div class="col-12">
+
  font-weight: 800;
                    <p>
+
  -webkit-transform: translateX(95px);
                        iGEM projects get complex and expensive very quickly. Without the generosity of these groups and
+
          transform: translateX(95px);
                        institutions, our project could have never entered the laboratory stage.
+
}
                    </p>
+
.marvel:before {
                    <p>
+
  z-index: -10;
                        The <b>ZMBP</b>, the <b>NCCT</b>, the <b>EMBL</b>, the <b>group of Professor Wohlleben</b>, the
+
  content: '';
                        group of our PI <b>Prof. Dr. Lars Angenent</b>, the group of <b>PD Dr. Evi Stegmann</b> and <b>Dr.
+
  display: block;
                        Lisa Maier</b> generously supplied us with various lab materials. We’re very grateful for their
+
  background-color: #2ecc71;
                        unconditional support.
+
  border: solid rgba(255, 255, 255, 0.2) 1px;
                    </p>
+
  height: 100%;
                </div>
+
  width: 100%;
            </div>
+
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
}
  
            <h2>Interview partners</h2>
+
.studios:after, .studios:before {
            <div class="row">
+
  content: '';
                <div class="col-12">
+
  display: block;
                    <p>
+
  height: 3px;
                        Conducting experts is vital for sophisticated projects to reevaluate the approaches and adapt to a constantly changing environment. Several experts were willing to conduct interviews and share their expertise with us and the iGEM community.
+
  position: absolute;
                    </p>
+
  background-color: #fff;
                    <p>
+
  display: block;
                        <b>Dr. Rolf Hecker</b>, director of the Institute of Technology Transfer and startups of the University of Tübingen, discussed the challenges of entering a pharmaceutical market as a young student-driven startup.
+
  left: 0.4rem;
                    </p>
+
  right: 0.4rem;
                    <p>
+
}
                        <b>Dr. Annette Christ</b> from the Institute of Innate Immunity in Bonn discussed everything related to our scientific project with us.
+
                    </p>
+
                    <p>
+
                        <b>Prof. Dr. Timo Müller</b>, director of the Institute for Diabetes and Obesity, explained the molecular mechanisms of diabetes and the interactions of obesity with diabetes to us.
+
                    </p>
+
                    <p>
+
                        <b>Stefan Gammel</b>, an expert for nanoethics, debated the implications of GMO based treatments and the difficulties of convincing European legislation with us.
+
                    </p>
+
                    <p>
+
                        <b>Claudia Leippert</b>, a certified diabetes consultant, discussed the possible usage of our probiotic by diabetes type 2 patients and the difficulties that patients have with the disease.
+
                    </p>
+
                </div>
+
            </div>
+
        </div>
+
    </main>
+
</div>
+
</div>
+
<!-- BUTTON LINK ANIMATION: CAVE: THIS MAY NOT WORK IN ALL CONTAINERS / <div> etc!!!!!-->
+
<style>
+
    .wrapper {
+
        position: fixed; /* Change this for absolute positioning  */
+
        top: 50%;
+
        left: 50%;
+
        transform: translate(-50%, -50%);
+
    }
+
  
    .link_wrapper {
+
.studios:before {
        position: relative;
+
  top: 0;
    }
+
}
 +
.studios:after {
 +
  bottom: 0;
 +
}
  
    .link_wrapper a {
+
@media screen and (max-width: 900px) and (max-height: 1170px) {
        display: block;
+
    .babbelbubu .logo .kokosnusss {
        width: 250px;
+
         margin-top: -90%;
        height: 50px;
+
         width: 100%;
        line-height: 50px;
+
         margin-left: 0;
        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 {
+
@media screen and (max-width: 500px) and (max-height: 750px) {
        width: 50px;
+
    .babbelbubu .logo .kokosnusss {
        height: 50px;
+
         margin-top: -120%;
        border: 3px solid transparent;
+
         width: 100%;
        position: absolute;
+
         margin-left: 0;
        transform: rotate(45deg);
+
        right: 0;
+
         top: 0;
+
         z-index: -1;
+
         transition: all .35s;
+
 
     }
 
     }
  
     .icon svg {
+
     .marvel, .studios {
         width: 30px;
+
         font-size: 3rem;
        position: absolute;
+
        top: calc(50% - 15px);
+
        left: calc(50% - 15px);
+
        transform: rotate(-45deg);
+
        fill: #2ecc71;
+
        transition: all .35s;
+
 
     }
 
     }
 +
}
  
     .link_wrapper a:hover {
+
@media screen and (max-width: 420px) and (max-height: 850px) {
         width: 200px;
+
     .babbelbubu .logo .kokosnusss {
         border: 3px solid #2ecc71;
+
         margin-top: -140%;
        background: transparent;
+
         width: 100%;
         color: #2ecc71;
+
         margin-left: 0;
 
     }
 
     }
  
     .link_wrapper a:hover + .icon {
+
     .marvel, .studios {
         border: 3px solid #2ecc71;
+
         font-size: 3rem;
        right: -25%;
+
 
     }
 
     }
 +
}
  
    @media only screen and (max-width: 767.98px) {
+
.wrapper.run-animation .restart {
 +
  opacity: 0;
 +
  -webkit-animation: fade-down 1200ms ease 3600ms forwards;
 +
          animation: fade-down 1200ms ease 3600ms forwards;
 +
}
  
        .link_wrapper a {
+
.babbelbubu.run-animation {
            width: 100px;
+
  -webkit-animation: shrink ease-out 4800ms forwards 600ms;
            height: 20px;
+
          animation: shrink ease-out 4800ms forwards 600ms;
            line-height: 20px;
+
}
            font-weight: normal;
+
            font-size: smaller;
+
            letter-spacing: 0.05px;
+
        }
+
  
 +
.babbelbubu.run-animation .marvel {
 +
  -webkit-transform: translateX(95px);
 +
          transform: translateX(95px);
 +
  -webkit-animation: slide-out-X 750ms ease forwards;
 +
          animation: slide-out-X 750ms ease forwards;
 +
}
 +
.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;
 +
}
  
        .icon {
+
.babbelbubu.run-animation .logo .kokosnusss {
            width: 20px;
+
  -webkit-animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;
            height: 20px;
+
          animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;
        }
+
}
  
        .icon svg {
+
@-webkit-keyframes slide-out-X {
             width: 12px;
+
  100% {
             top: calc(50% - 6px);
+
    -webkit-transform: translateX(0);
             left: calc(50% - 6px);
+
            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");
 +
  }
 +
}
  
        .link_wrapper a:hover {
 
            width: 90px;
 
        }
 
    }
 
 
</style>
 
</style>
  
<script>
 
    window.onscroll = function () {
 
        myFunction()
 
    };
 
  
    var vnav = document.getElementById("phaContents");
 
    var sticky = vnav.offsetTop + 150;
 
  
    function myFunction() {
+
<div class="testclasse">
        if (window.pageYOffset >= sticky) {
+
            vnav.classList.add("stickyContents");
+
        } else {
+
            vnav.classList.remove("stickyContents");
+
        }
+
    }
+
  
 +
<div class="babbelbubu run-animation" id="ananananananas">
 +
<div class="logo">
  
    /*
+
         <span class="marvel" > <a href="https://www.google.com" style="color: #fff;text-decoration: none;">View our</a></span>
    * jQuery to build the POC quickly
+
<span class="studios" > <a href="https://www.google.com" style="color: #fff;text-decoration: none;">Story</a></span>
    *
+
    * SCRIPT IS UNDER CONSTRUCTION
+
    */
+
    var positions = [],
+
         build_toc = function () {
+
            var output = '';
+
            svg = '<svg viewBox="0 0 36 36" height="36px" width="36px" y="0px" x="0px"><rect transform="rotate(90 18 18)" width="36" height="36" stroke-dashoffset="100" stroke-dasharray="150 150" stroke-width="4" fill="none"/></svg>';
+
  
            $('.post-content').find('h2').each(function (i) {
+
        <div class="restart">Restart</div>
                $(this).attr('id', 'title_' + i)
+
  
                output += '<li><a href="#title_' + i + '" class="toc-title_' + i + '">' + svg + $(this).text() + '</a></li>';
+
        <div class="kokosnusss"></div>
            });
+
</div>
  
            return output;
+
</div>
        },
+
        get_bottom_off_content = function () {
+
            var $content = $('.post-content'),
+
                offset = $content.offset();
+
  
            return $content.outerHeight() + offset.top;
 
        },
 
        get_positions = function () {
 
            $('.post-content').find('h2').each(function (i) {
 
                offset = $(this).offset();
 
                positions['title_' + i] = offset.top - 140;
 
            });
 
            return positions;
 
        },
 
        set_toc_reading = function () {
 
            var st = $(document).scrollTop(),
 
                count = 0;
 
  
            for (var k in positions) {
 
                var n = parseInt(k.replace('title_', ''));
 
                has_next = typeof positions['title_' + (n + 1)] !== 'undefined',
 
                    not_next = has_next && st < positions['title_' + (n + 1)] ? true : false,
 
                    diff = 0,
 
                    $link = $('.toc-' + k);
 
  
                if (has_next) {
+
    </div>
                    diff = (st - positions[k]) / (positions['title_' + (n + 1)] - positions[k]) * 150;
+
                } else {
+
                    diff = (st - positions[k]) / (get_bottom_off_content() - positions[k]) * 240;
+
                }
+
  
                $link.find('rect').attr('stroke-dashoffset', Math.round(150 - diff));
 
  
                if (st >= positions[k] && not_next && has_next) {
 
                    $('.toc-' + k).addClass('toc-reading');
 
                } else if (st >= positions[k] && !not_next && has_next) {
 
                    $('.toc-' + k).removeClass('toc-reading');
 
                } else if (st >= positions[k] && !not_next && !has_next) {
 
                    $('.toc-' + k).addClass('toc-reading');
 
                }
 
  
                if (st >= positions[k]) {
+
<script>
                    $('.toc-' + k).addClass('toc-already-read');
+
    element = document.getElementById("ananananananas");
                } else {
+
                    $('.toc-' + k).removeClass('toc-already-read');
+
                }
+
  
                if (st < positions[k]) {
+
if (element) {
                    $('.toc-' + k).removeClass('toc-already-read toc-reading');
+
// reset the transition by...
                }
+
element.addEventListener("mouseenter", function(e) {
 +
e.preventDefault;
  
                count++;
+
console.log('element', element.classList);
            }
+
        };
+
  
    // build our table of content
+
// removing the class
    $('.table-of-contents').html(build_toc());
+
element.classList.remove("run-animation");
  
    // first definition of positions
+
// triggering reflow
    get_positions();
+
void element.offsetWidth;
  
    // on resize, re-calc positions
+
// and re-adding the class
    $(window).on('resize', function () {
+
element.classList.add("run-animation");
        get_positions();
+
}, false);
    });
+
  
    $(document).on('scroll', function () {
+
element.addEventListener("click", function(e) {
        set_toc_reading();
+
e.preventDefault;
    });
+
    /*
+
    * Contents Controler End
+
    */
+
  
    /*
+
console.log('element', element.classList);
  * Gallery Controler End
+
 
  */
+
// removing the class
    function gaFunction(imgs) {
+
element.classList.remove("run-animation");
        var expandImg = document.getElementById("expandedImg");
+
 
        var imgText = document.getElementById("imgtext");
+
// triggering reflow
        expandImg.src = imgs.src;
+
void element.offsetWidth;
        imgText.innerHTML = imgs.alt;
+
        expandImg.parentElement.style.display = "block";
+
    }
+
  
    /*
+
// and re-adding the class
  * Gallery Controler Start
+
element.classList.add("run-animation");
  */
+
}, false);
 +
}
 
</script>
 
</script>
  
<script src="https://2019.igem.org/Team:Tuebingen/sidebarJS?action=raw&ctype=text/javascript"></script>
+
<div class='container-fluid p-3' style="background-color: rgba(35, 35, 35, 0.4);">
 +
        <hr>
 +
        <div class='row align-items-center'>
 +
            <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>
  
  
<div style="display: none">
+
            <!--
    </p>123<p>
+
<div class='col sponsorLogo'>
    </p>123<p>
+
<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>
    </p>123<p>
+
    </p>123<p>
+
    </p>123<p>
+
 
</div>
 
</div>
 
+
-->
<div class='container-fluid p-3' style="background-color: #232323;">
+
    <hr>
+
    <div class='row align-items-center'>
+
        <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>
        <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>
 
    </div>
 
  
    <hr>
+
        <hr>
    <div class='row align-items-center'>
+
        <div class='row align-items-center'>
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-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"
+
                <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>
+
                                                                        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 text-center'>
 +
                <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 text-center'>
 +
                <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 text-center'>
 +
                <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 text-center'>
 +
                <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 text-center'>
 +
                <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 text-center'>
 +
                <a href="https://www.implen.de/" target="_blank2"><img class="img-fluid"
 +
                                                                      src="https://2019.igem.org/wiki/images/b/bb/T--Tuebingen--Logo-Implen.png"></a>
 +
            </div>
 +
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
                <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 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='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 
            <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 text-center'>
 
            <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 text-center'>
 
            <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 text-center'>
 
            <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 text-center'>
 
            <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 text-center'>
 
            <a href="https://www.implen.de/" target="_blank2"><img class="img-fluid"
 
                                                                  src="https://2019.igem.org/wiki/images/b/bb/T--Tuebingen--Logo-Implen.png"></a>
 
        </div>
 
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 
            <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 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 class='row align-items-center'>
+
        <div class='row align-items-center'>
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-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"
+
                <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>
+
                                                                          src="https://2019.igem.org/wiki/images/f/f8/T--Tuebingen--promega_logo.png"></a>
        </div>
+
            </div>
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <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"
+
                <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>
+
                                                                          src="https://2019.igem.org/wiki/images/9/92/T--Tuebingen--qiagen_logo.png"></a>
        </div>
+
            </div>
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <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"
+
                <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>
+
                                                                              src="https://2019.igem.org/wiki/images/6/61/T--Tuebingen--roth_logo.png"></a>
        </div>
+
            </div>
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <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"
+
                <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>
+
                                                                                src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--sibiotools_logo.png"></a>
        </div>
+
            </div>
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <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"
+
                <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>
+
                                                                          src="https://2019.igem.org/wiki/images/3/3a/T--Tuebingen--snapgene_logo.png"></a>
        </div>
+
            </div>
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <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"
+
                <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>
+
                                                                                src="https://2019.igem.org/wiki/images/b/b6/T--Tuebingen--trilink_logo.png"></a>
        </div>
+
            </div>
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
            <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
+
                <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>
+
                                                                            src="https://2019.igem.org/wiki/images/4/4c/T--Tuebingen--Logo-Twist.png"></a>
        </div>
+
            </div>
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <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"
+
                <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>
+
                                                                              src="https://2019.igem.org/wiki/images/b/b7/T--Tuebingen--vazyme_logo.png"></a>
        </div>
+
            </div>
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <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"
+
                <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>
+
                                                                          src="https://2019.igem.org/wiki/images/c/c3/T--Tuebingen--biolegend_logo.png"></a>
        </div>
+
            </div>
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <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"
+
                <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>
+
                                                                            src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
 +
            </div>
 +
 
 
         </div>
 
         </div>
 
     </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>
 
 
 
</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.