Loading menubar.....

Difference between revisions of "Team:Tuebingen/testloading"

 
(2 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
<meta charset="UTF-8"/>
 
<meta charset="UTF-8"/>
 
<head>
 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <style>
 
     <style>
/* Paste this css to your style sheet file or under head tag */
+
        /* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript,
+
        /* This only works with JavaScript,
if it's not present, don't show loader */
+
        if it's not present, don't show loader */
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
+
        .js #loader {
.se-pre-con {
+
            display: block;
position: fixed;
+
            position: absolute;
left: 0px;
+
            left: 100px;
top: 0px;
+
            top: 0;
width: 100%;
+
        }
height: 100%;
+
 
z-index: 9999;
+
        .se-pre-con {
background: #292b37;
+
            position: fixed;
}
+
            left: 0px;
         .se-pre-con img{
+
            top: 0px;
             width:40%;
+
            width: 100%;
 +
            height: 100%;
 +
            z-index: 9999;
 +
            background: #2B2B35;
 +
        }
 +
 
 +
         .se-pre-con img {
 +
             width: 40%;
 
             height: 40%;
 
             height: 40%;
 
             margin-left: 30%;
 
             margin-left: 30%;
Line 25: Line 32:
 
         }
 
         }
  
         @media screen and (max-width:1100px ) {
+
        @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 {
 
             .se-pre-con img {
 
                 margin-top: 20%;
 
                 margin-top: 20%;
 
                 height: 30%;
 
                 height: 30%;
 +
                width: 50%;
 +
                margin-left: 25%;
 
             }
 
             }
 
         }
 
         }
  
         @media screen and (max-width:700px ) {
+
         @media screen and (max-width: 700px ) {
 
             .se-pre-con img {
 
             .se-pre-con img {
                 margin-top: 30%;
+
                 margin-top: 18%;
 
                 height: 20%;
 
                 height: 20%;
 
             }
 
             }
 
         }
 
         }
        </style>
+
    </style>
 
</head>
 
</head>
 
<body>
 
<body>
Line 44: Line 62:
 
     <img src="https://2019.igem.org/wiki/images/8/83/T--Tuebingen--preloader.gif">
 
     <img src="https://2019.igem.org/wiki/images/8/83/T--Tuebingen--preloader.gif">
 
</div>
 
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+
<script src="https://2019.igem.org/Team:Tuebingen/jqueryLoadJS?action=raw&ctype=text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
+
<script src="https://2019.igem.org/Team:Tuebingen/jmodernizerJS?action=raw&ctype=text/javascript"></script>
        <script>
+
<script>
$(window).load(function() {
+
    $(window).load(function () {
setTimeout(removeLoader, 1000);}); //wait for page load PLUS one seconds.
+
        setTimeout(removeLoader, 1000);
 
+
    }); //wait for page load PLUS one seconds.
    function removeLoader(){
+
    function removeLoader() {
    $( ".se-pre-con" ).fadeOut(500, function() {
+
        $(".se-pre-con").fadeOut(500, function () {
      // fadeOut complete. Remove the loading div
+
            // fadeOut complete. Remove the loading div
      $( ".se-pre-con" ).remove(); //makes page more lightweight
+
            $(".se-pre-con").remove(); //makes page more lightweight
  });
+
        });
}
+
    }
</script>
+
</script>
 
</body>
 
</body>
 
<style>
 
<style>
Line 116: Line 134:
 
         display: block
 
         display: block
 
     }
 
     }
 +
  
 
     body {
 
     body {
Line 145: Line 164:
 
     p {
 
     p {
 
         margin-top: 0;
 
         margin-top: 0;
         margin-bottom: 1rem
+
         margin-bottom: 1rem;
 +
        color: #F4F0DE;
 
     }
 
     }
  
Line 397: Line 417:
  
 
     .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 3,913: Line 3,936:
 
         font-size: 1.25rem;
 
         font-size: 1.25rem;
 
         line-height: inherit;
 
         line-height: inherit;
         white-space: nowrap
+
         white-space: nowrap;
 
     }
 
     }
  
Line 6,015: Line 6,038:
  
 
     .bg-dark {
 
     .bg-dark {
         background-color: #343a40 !important
+
         background-color: #232323 !important
 
     }
 
     }
  
Line 9,264: Line 9,287:
  
 
     .dropdown-menu {
 
     .dropdown-menu {
         background-color: rgba(100, 100, 100, 1);
+
         background-color: #232323;
 
     }
 
     }
  
Line 9,318: Line 9,341:
 
         text-transform: uppercase;
 
         text-transform: uppercase;
 
         letter-spacing: 0.125em;
 
         letter-spacing: 0.125em;
         color: #555;
+
         color: #fff;
 
     }
 
     }
  
Line 9,343: Line 9,366:
 
     .post-content h1 {
 
     .post-content h1 {
 
         padding-top: 30px;
 
         padding-top: 30px;
         color: rgba(105, 202, 98, 1.1);
+
         color: #2ecc71;
 
     }
 
     }
  
Line 9,349: Line 9,372:
 
     .post-content h2 {
 
     .post-content h2 {
 
         padding-top: 150px;
 
         padding-top: 150px;
         color: rgba(105, 202, 98, 1.1);
+
         color: #2ecc71;
 
     }
 
     }
  
 
     /* link color */
 
     /* link color */
 
     .post-content a {
 
     .post-content a {
         color: rgba(105, 202, 98, 1.1);
+
         color: #2ecc71;
 
     }
 
     }
  
 
     #glpreferences a {
 
     #glpreferences a {
         color: rgba(105, 202, 98, 1.1);
+
         color: #2ecc71;
 
     }
 
     }
  
Line 9,370: Line 9,393:
 
         bottom: auto;
 
         bottom: auto;
 
         display: none;
 
         display: none;
         stroke: rgba(105, 202, 98, 1.1);
+
         stroke: #2ecc71;
 
         transform: translateY(-50%);
 
         transform: translateY(-50%);
 
     }
 
     }
Line 9,399: Line 9,422:
 
         position: relative;
 
         position: relative;
 
         text-decoration: none;
 
         text-decoration: none;
         color: #333;
+
         color: #fff;
 
         font-weight: bold;
 
         font-weight: bold;
 
     }
 
     }
Line 9,405: Line 9,428:
 
     a.toc-reading,
 
     a.toc-reading,
 
     a.toc-already-read.toc-reading {
 
     a.toc-already-read.toc-reading {
         color: rgba(105, 202, 98, 1.1);
+
         color: #2ecc71;
 
         opacity: 1;
 
         opacity: 1;
 
     }
 
     }
  
 
     a.toc-already-read {
 
     a.toc-already-read {
         opacity: 0.4;
+
         opacity: 0.6;
 
     }
 
     }
  
Line 9,425: Line 9,448:
 
         transform: translateY(-50%);
 
         transform: translateY(-50%);
 
         transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
 
         transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
        border-radius: 50%;
+
         box-shadow: 0 3px 5px 0 black;
         box-shadow: 0 0 0 1px #d9d9d9 inset;
+
         color: #fff;
         color: #4d4d4d;
+
 
     }
 
     }
  
Line 9,699: Line 9,721:
 
</style>
 
</style>
  
 +
</p>
 +
<p>
  
 
     <head>
 
     <head>
Line 9,705: Line 9,729:
 
         <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" type="text/css" href="//fonts.googleapis.com/css?family=Righteous"/>
 +
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
 +
              type="text/css"/>
 
     </head>
 
     </head>
        <style>
+
    <style>
            .mfp-bg {
+
        .mfp-bg {
                top: 0;
+
            top: 0;
                left: 0;
+
            left: 0;
                width: 100%;
+
            width: 100%;
                height: 100%;
+
            height: 100%;
                z-index: 1042;
+
            z-index: 1042;
                overflow: hidden;
+
            overflow: hidden;
                position: fixed;
+
            position: fixed;
                background: #0b0b0b;
+
            background: #0b0b0b;
                opacity: 0.8;
+
            opacity: 0.8;
            }
+
        }
  
            .mfp-wrap {
+
        .mfp-wrap {
                top: 0;
+
            top: 0;
                left: 0;
+
            left: 0;
                width: 100%;
+
            width: 100%;
                height: 100%;
+
            height: 100%;
                z-index: 1043;
+
            z-index: 1043;
                position: fixed;
+
            position: fixed;
                outline: none !important;
+
            outline: none !important;
                -webkit-backface-visibility: hidden;
+
            -webkit-backface-visibility: hidden;
            }
+
        }
  
            .mfp-container {
+
        .mfp-container {
                text-align: center;
+
            text-align: center;
                position: absolute;
+
            position: absolute;
                width: 100%;
+
            width: 100%;
                height: 100%;
+
            height: 100%;
                left: 0;
+
            left: 0;
                top: 0;
+
            top: 0;
                padding: 0 8px;
+
            padding: 0 8px;
                box-sizing: border-box;
+
            box-sizing: border-box;
            }
+
        }
  
            .mfp-container:before {
+
        .mfp-container:before {
                content: '';
+
            content: '';
                display: inline-block;
+
            display: inline-block;
                height: 100%;
+
            height: 100%;
                vertical-align: middle;
+
            vertical-align: middle;
            }
+
        }
  
            .mfp-align-top .mfp-container:before {
+
        .mfp-align-top .mfp-container:before {
                display: none;
+
            display: none;
            }
+
        }
  
            .mfp-content {
+
        .mfp-content {
                position: relative;
+
            position: relative;
                display: inline-block;
+
            display: inline-block;
                vertical-align: middle;
+
            vertical-align: middle;
                margin: 0 auto;
+
            margin: 0 auto;
                text-align: left;
+
            text-align: left;
                z-index: 1045;
+
            z-index: 1045;
            }
+
        }
  
            .mfp-inline-holder .mfp-content,
+
        .mfp-inline-holder .mfp-content,
            .mfp-ajax-holder .mfp-content {
+
        .mfp-ajax-holder .mfp-content {
                width: 100%;
+
            width: 100%;
                cursor: auto;
+
            cursor: auto;
            }
+
        }
  
            .mfp-ajax-cur {
+
        .mfp-ajax-cur {
                cursor: progress;
+
            cursor: progress;
            }
+
        }
  
            .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+
        .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
                cursor: -moz-zoom-out;
+
            cursor: -moz-zoom-out;
                cursor: -webkit-zoom-out;
+
            cursor: -webkit-zoom-out;
                cursor: zoom-out;
+
            cursor: zoom-out;
            }
+
        }
  
            .mfp-zoom {
+
        .mfp-zoom {
                cursor: pointer;
+
            cursor: pointer;
                cursor: -webkit-zoom-in;
+
            cursor: -webkit-zoom-in;
                cursor: -moz-zoom-in;
+
            cursor: -moz-zoom-in;
                cursor: zoom-in;
+
            cursor: zoom-in;
            }
+
        }
  
            .mfp-auto-cursor .mfp-content {
+
        .mfp-auto-cursor .mfp-content {
                cursor: auto;
+
            cursor: auto;
            }
+
        }
  
            .mfp-close,
+
        .mfp-close,
            .mfp-arrow,
+
        .mfp-arrow,
            .mfp-preloader,
+
        .mfp-preloader,
            .mfp-counter {
+
        .mfp-counter {
                -webkit-user-select: none;
+
            -webkit-user-select: none;
                -moz-user-select: none;
+
            -moz-user-select: none;
                user-select: none;
+
            user-select: none;
            }
+
        }
  
            .mfp-loading.mfp-figure {
+
        .mfp-loading.mfp-figure {
                display: none;
+
            display: none;
            }
+
        }
  
            .mfp-hide {
+
        .mfp-hide {
                display: none !important;
+
            display: none !important;
            }
+
        }
  
            .mfp-preloader {
+
        .mfp-preloader {
                color: #CCC;
+
            color: #CCC;
                position: absolute;
+
            position: absolute;
                top: 50%;
+
            top: 50%;
                width: auto;
+
            width: auto;
                text-align: center;
+
            text-align: center;
                margin-top: -0.8em;
+
            margin-top: -0.8em;
                left: 8px;
+
            left: 8px;
                right: 8px;
+
            right: 8px;
                z-index: 1044;
+
            z-index: 1044;
            }
+
        }
  
            .mfp-preloader a {
+
        .mfp-preloader a {
                color: #CCC;
+
            color: #CCC;
            }
+
        }
  
            .mfp-preloader a:hover {
+
        .mfp-preloader a:hover {
                color: #FFF;
+
            color: #FFF;
            }
+
        }
  
            .mfp-s-ready .mfp-preloader {
+
        .mfp-s-ready .mfp-preloader {
                display: none;
+
            display: none;
            }
+
        }
  
            .mfp-s-error .mfp-content {
+
        .mfp-s-error .mfp-content {
                display: none;
+
            display: none;
            }
+
        }
  
            button.mfp-close,
+
        button.mfp-close,
            button.mfp-arrow {
+
        button.mfp-arrow {
                overflow: visible;
+
            overflow: visible;
                cursor: pointer;
+
            cursor: pointer;
                background: transparent;
+
            background: transparent;
                border: 0;
+
            border: 0;
                -webkit-appearance: none;
+
            -webkit-appearance: none;
                display: block;
+
            display: block;
                outline: none;
+
            outline: none;
                padding: 0;
+
            padding: 0;
                z-index: 1046;
+
            z-index: 1046;
                box-shadow: none;
+
            box-shadow: none;
                touch-action: manipulation;
+
            touch-action: manipulation;
            }
+
        }
  
            button::-moz-focus-inner {
+
        button::-moz-focus-inner {
                padding: 0;
+
            padding: 0;
                border: 0;
+
            border: 0;
            }
+
        }
  
            .mfp-close {
+
        .mfp-close {
                width: 44px;
+
            width: 44px;
                height: 44px;
+
            height: 44px;
                line-height: 44px;
+
            line-height: 44px;
                position: absolute;
+
            position: absolute;
                right: 0;
+
            right: 0;
                top: 0;
+
            top: 0;
                text-decoration: none;
+
            text-decoration: none;
                text-align: center;
+
            text-align: center;
                opacity: 0.65;
+
            opacity: 0.65;
                padding: 0 0 18px 10px;
+
            padding: 0 0 18px 10px;
                color: #FFF;
+
            color: #FFF;
                font-style: normal;
+
            font-style: normal;
                font-size: 28px;
+
            font-size: 28px;
                font-family: Arial, Baskerville, monospace;
+
            font-family: Arial, Baskerville, monospace;
            }
+
        }
  
            .mfp-close:hover,
+
        .mfp-close:hover,
            .mfp-close:focus {
+
        .mfp-close:focus {
                opacity: 1;
+
            opacity: 1;
            }
+
        }
  
            .mfp-close:active {
+
        .mfp-close:active {
                top: 1px;
+
            top: 1px;
            }
+
        }
  
            .mfp-close-btn-in .mfp-close {
+
        .mfp-close-btn-in .mfp-close {
                color: #333;
+
            color: #333;
            }
+
        }
  
            .mfp-image-holder .mfp-close,
+
        .mfp-image-holder .mfp-close,
            .mfp-iframe-holder .mfp-close {
+
        .mfp-iframe-holder .mfp-close {
                color: #FFF;
+
            color: #FFF;
                right: -6px;
+
            right: -6px;
                text-align: right;
+
            text-align: right;
                padding-right: 6px;
+
            padding-right: 6px;
                width: 100%;
+
            width: 100%;
            }
+
        }
  
            .mfp-counter {
+
        .mfp-counter {
                position: absolute;
+
            position: absolute;
                top: 0;
+
            top: 0;
                right: 0;
+
            right: 0;
                color: #CCC;
+
            color: #CCC;
                font-size: 12px;
+
            font-size: 12px;
                line-height: 18px;
+
            line-height: 18px;
                white-space: nowrap;
+
            white-space: nowrap;
            }
+
        }
  
            .mfp-arrow {
+
        .mfp-arrow {
                position: absolute;
+
            position: absolute;
                opacity: 0.65;
+
            opacity: 0.65;
                margin: 0;
+
            margin: 0;
                top: 50%;
+
            top: 50%;
                margin-top: -55px;
+
            margin-top: -55px;
                padding: 0;
+
            padding: 0;
                width: 90px;
+
            width: 90px;
                height: 110px;
+
            height: 110px;
                -webkit-tap-highlight-color: transparent;
+
            -webkit-tap-highlight-color: transparent;
            }
+
        }
  
            .mfp-arrow:active {
+
        .mfp-arrow:active {
                margin-top: -54px;
+
            margin-top: -54px;
            }
+
        }
  
            .mfp-arrow:hover,
+
        .mfp-arrow:hover,
            .mfp-arrow:focus {
+
        .mfp-arrow:focus {
                opacity: 1;
+
            opacity: 1;
            }
+
        }
  
            .mfp-arrow:before,
+
        .mfp-arrow:before,
            .mfp-arrow:after {
+
        .mfp-arrow:after {
                content: '';
+
            content: '';
                display: block;
+
            display: block;
                width: 0;
+
            width: 0;
                height: 0;
+
            height: 0;
                position: absolute;
+
            position: absolute;
                left: 0;
+
            left: 0;
                top: 0;
+
            top: 0;
                margin-top: 35px;
+
            margin-top: 35px;
                margin-left: 35px;
+
            margin-left: 35px;
                border: medium inset transparent;
+
            border: medium inset transparent;
            }
+
        }
  
            .mfp-arrow:after {
+
        .mfp-arrow:after {
                border-top-width: 13px;
+
            border-top-width: 13px;
                border-bottom-width: 13px;
+
            border-bottom-width: 13px;
                top: 8px;
+
            top: 8px;
            }
+
        }
  
            .mfp-arrow:before {
+
        .mfp-arrow:before {
                border-top-width: 21px;
+
            border-top-width: 21px;
                border-bottom-width: 21px;
+
            border-bottom-width: 21px;
                opacity: 0.7;
+
            opacity: 0.7;
            }
+
        }
  
            .mfp-arrow-left {
+
        .mfp-arrow-left {
                left: 0;
+
            left: 0;
            }
+
        }
  
            .mfp-arrow-left:after {
+
        .mfp-arrow-left:after {
                border-right: 17px solid #FFF;
+
            border-right: 17px solid #FFF;
                margin-left: 31px;
+
            margin-left: 31px;
            }
+
        }
  
            .mfp-arrow-left:before {
+
        .mfp-arrow-left:before {
                margin-left: 25px;
+
            margin-left: 25px;
                border-right: 27px solid #3F3F3F;
+
            border-right: 27px solid #3F3F3F;
            }
+
        }
  
            .mfp-arrow-right {
+
        .mfp-arrow-right {
                right: 0;
+
            right: 0;
            }
+
        }
  
            .mfp-arrow-right:after {
+
        .mfp-arrow-right:after {
                border-left: 17px solid #FFF;
+
            border-left: 17px solid #FFF;
                margin-left: 39px;
+
            margin-left: 39px;
            }
+
        }
  
            .mfp-arrow-right:before {
+
        .mfp-arrow-right:before {
                border-left: 27px solid #3F3F3F;
+
            border-left: 27px solid #3F3F3F;
            }
+
        }
  
            .mfp-iframe-holder {
+
        .mfp-iframe-holder {
                padding-top: 40px;
+
            padding-top: 40px;
                padding-bottom: 40px;
+
            padding-bottom: 40px;
            }
+
        }
  
            .mfp-iframe-holder .mfp-content {
+
        .mfp-iframe-holder .mfp-content {
                line-height: 0;
+
            line-height: 0;
                width: 100%;
+
            width: 100%;
                max-width: 900px;
+
            max-width: 900px;
            }
+
        }
  
            .mfp-iframe-holder .mfp-close {
+
        .mfp-iframe-holder .mfp-close {
                top: -40px;
+
            top: -40px;
            }
+
        }
  
            .mfp-iframe-scaler {
+
        .mfp-iframe-scaler {
                width: 100%;
+
            width: 100%;
                height: 0;
+
            height: 0;
                overflow: hidden;
+
            overflow: hidden;
                padding-top: 56.25%;
+
            padding-top: 56.25%;
            }
+
        }
  
            .mfp-iframe-scaler iframe {
+
        .mfp-iframe-scaler iframe {
                position: absolute;
+
            position: absolute;
                display: block;
+
            display: block;
                top: 0;
+
            top: 0;
                left: 0;
+
            left: 0;
                width: 100%;
+
            width: 100%;
                height: 100%;
+
            height: 100%;
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
                background: #000;
+
            background: #000;
            }
+
        }
  
            /* Main image in popup */
+
        /* Main image in popup */
            img.mfp-img {
+
        img.mfp-img {
                width: auto;
+
            width: auto;
                max-width: 100%;
+
            max-width: 100%;
                height: auto;
+
            height: auto;
                display: block;
+
            display: block;
                line-height: 0;
+
            line-height: 0;
                box-sizing: border-box;
+
            box-sizing: border-box;
                padding: 40px 0 40px;
+
            padding: 40px 0 40px;
                margin: 0 auto;
+
            margin: 0 auto;
            }
+
        }
  
            /* The shadow behind the image */
+
        /* The shadow behind the image */
            .mfp-figure {
+
        .mfp-figure {
                line-height: 0;
+
            line-height: 0;
            }
+
        }
  
            .mfp-figure:after {
+
        .mfp-figure:after {
                content: '';
+
            content: '';
                position: absolute;
+
            position: absolute;
                left: 0;
+
            left: 0;
                top: 40px;
+
            top: 40px;
                bottom: 40px;
+
            bottom: 40px;
                display: block;
+
            display: block;
                right: 0;
+
            right: 0;
                width: auto;
+
            width: auto;
                height: auto;
+
            height: auto;
                z-index: -1;
+
            z-index: -1;
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
                background: #444;
+
            background: #444;
            }
+
        }
  
            .mfp-figure small {
+
        .mfp-figure small {
                color: #BDBDBD;
+
            color: #BDBDBD;
                display: block;
+
            display: block;
                font-size: 12px;
+
            font-size: 12px;
                line-height: 14px;
+
            line-height: 14px;
            }
+
        }
  
            .mfp-figure figure {
+
        .mfp-figure figure {
                margin: 0;
+
            margin: 0;
            }
+
        }
  
            .mfp-bottom-bar {
+
        .mfp-bottom-bar {
                margin-top: -36px;
+
            margin-top: -36px;
                position: absolute;
+
            position: absolute;
                top: 100%;
+
            top: 100%;
                left: 0;
+
            left: 0;
                width: 100%;
+
            width: 100%;
                cursor: auto;
+
            cursor: auto;
            }
+
        }
  
            .mfp-title {
+
        .mfp-title {
                text-align: left;
+
            text-align: left;
                line-height: 18px;
+
            line-height: 18px;
                color: #F3F3F3;
+
            color: #F3F3F3;
                word-wrap: break-word;
+
            word-wrap: break-word;
                padding-right: 36px;
+
            padding-right: 36px;
 +
        }
 +
 
 +
        .mfp-image-holder .mfp-content {
 +
            max-width: 100%;
 +
        }
 +
 
 +
        .mfp-gallery .mfp-image-holder .mfp-figure {
 +
            cursor: pointer;
 +
        }
 +
 
 +
        @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
 +
            /**
 +
  * Remove all paddings around the image on small screen
 +
  */
 +
            .mfp-img-mobile .mfp-image-holder {
 +
                padding-left: 0;
 +
                padding-right: 0;
 
             }
 
             }
  
             .mfp-image-holder .mfp-content {
+
             .mfp-img-mobile img.mfp-img {
                 max-width: 100%;
+
                 padding: 0;
 
             }
 
             }
  
             .mfp-gallery .mfp-image-holder .mfp-figure {
+
             .mfp-img-mobile .mfp-figure:after {
                 cursor: pointer;
+
                 top: 0;
 +
                bottom: 0;
 
             }
 
             }
  
             @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
+
             .mfp-img-mobile .mfp-figure small {
                /**
+
                 display: inline;
      * Remove all paddings around the image on small screen
+
                margin-left: 5px;
      */
+
                .mfp-img-mobile .mfp-image-holder {
+
                    padding-left: 0;
+
                    padding-right: 0;
+
                }
+
 
+
                .mfp-img-mobile img.mfp-img {
+
                    padding: 0;
+
                }
+
 
+
                .mfp-img-mobile .mfp-figure:after {
+
                    top: 0;
+
                    bottom: 0;
+
                 }
+
 
+
                .mfp-img-mobile .mfp-figure small {
+
                    display: inline;
+
                    margin-left: 5px;
+
                }
+
 
+
                .mfp-img-mobile .mfp-bottom-bar {
+
                    background: rgba(0, 0, 0, 0.6);
+
                    bottom: 0;
+
                    margin: 0;
+
                    top: auto;
+
                    padding: 3px 5px;
+
                    position: fixed;
+
                    box-sizing: border-box;
+
                }
+
 
+
                .mfp-img-mobile .mfp-bottom-bar:empty {
+
                    padding: 0;
+
                }
+
 
+
                .mfp-img-mobile .mfp-counter {
+
                    right: 5px;
+
                    top: 3px;
+
                }
+
 
+
                .mfp-img-mobile .mfp-close {
+
                    top: 0;
+
                    right: 0;
+
                    width: 35px;
+
                    height: 35px;
+
                    line-height: 35px;
+
                    background: rgba(0, 0, 0, 0.6);
+
                    position: fixed;
+
                    text-align: center;
+
                    padding: 0;
+
                }
+
 
             }
 
             }
  
             @media all and (max-width: 900px) {
+
             .mfp-img-mobile .mfp-bottom-bar {
                .mfp-arrow {
+
                background: rgba(0, 0, 0, 0.6);
                    -webkit-transform: scale(0.75);
+
                bottom: 0;
                    transform: scale(0.75);
+
                 margin: 0;
                 }
+
                top: auto;
 
+
                 padding: 3px 5px;
                .mfp-arrow-left {
+
                position: fixed;
                    -webkit-transform-origin: 0;
+
                 box-sizing: border-box;
                    transform-origin: 0;
+
                 }
+
 
+
                .mfp-arrow-right {
+
                    -webkit-transform-origin: 100%;
+
                    transform-origin: 100%;
+
                 }
+
 
+
                .mfp-container {
+
                    padding-left: 6px;
+
                    padding-right: 6px;
+
                }
+
 
             }
 
             }
  
             .mfp-zoom-out {
+
             .mfp-img-mobile .mfp-bottom-bar:empty {
                 /* start state */
+
                 padding: 0;
                /* animate in */
+
                /* animate out */
+
 
             }
 
             }
  
             .mfp-zoom-out .mfp-with-anim {
+
             .mfp-img-mobile .mfp-counter {
                 opacity: 0;
+
                 right: 5px;
                 transition: all 0.3s ease-in-out;
+
                 top: 3px;
                transform: scale(1.3);
+
 
             }
 
             }
  
             .mfp-zoom-out.mfp-bg {
+
             .mfp-img-mobile .mfp-close {
                 opacity: 0;
+
                 top: 0;
                 transition: all 0.3s ease-out;
+
                 right: 0;
 +
                width: 35px;
 +
                height: 35px;
 +
                line-height: 35px;
 +
                background: rgba(0, 0, 0, 0.6);
 +
                position: fixed;
 +
                text-align: center;
 +
                padding: 0;
 
             }
 
             }
 +
        }
  
             .mfp-zoom-out.mfp-ready .mfp-with-anim {
+
        @media all and (max-width: 900px) {
                 opacity: 1;
+
             .mfp-arrow {
                 transform: scale(1);
+
                 -webkit-transform: scale(0.75);
 +
                 transform: scale(0.75);
 
             }
 
             }
  
             .mfp-zoom-out.mfp-ready.mfp-bg {
+
             .mfp-arrow-left {
                 opacity: 0.8;
+
                -webkit-transform-origin: 0;
 +
                 transform-origin: 0;
 
             }
 
             }
  
             .mfp-zoom-out.mfp-removing .mfp-with-anim {
+
             .mfp-arrow-right {
                 transform: scale(1.3);
+
                 -webkit-transform-origin: 100%;
                 opacity: 0;
+
                 transform-origin: 100%;
 
             }
 
             }
  
             .mfp-zoom-out.mfp-removing.mfp-bg {
+
             .mfp-container {
                 opacity: 0;
+
                 padding-left: 6px;
 +
                padding-right: 6px;
 
             }
 
             }
         </style>
+
         }
  
 +
        .mfp-zoom-out {
 +
            /* start state */
 +
            /* animate in */
 +
            /* animate out */
 +
        }
  
 +
        .mfp-zoom-out .mfp-with-anim {
 +
            opacity: 0;
 +
            transition: all 0.3s ease-in-out;
 +
            transform: scale(1.3);
 +
        }
  
<body style="">
+
        .mfp-zoom-out.mfp-bg {
 +
            opacity: 0;
 +
            transition: all 0.3s ease-out;
 +
        }
  
 +
        .mfp-zoom-out.mfp-ready .mfp-with-anim {
 +
            opacity: 1;
 +
            transform: scale(1);
 +
        }
  
 +
        .mfp-zoom-out.mfp-ready.mfp-bg {
 +
            opacity: 0.8;
 +
        }
  
        <section id="nav-placeholder">
+
        .mfp-zoom-out.mfp-removing .mfp-with-anim {
                <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
+
            transform: scale(1.3);
                    style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
+
            opacity: 0;
                    <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">
+
        .mfp-zoom-out.mfp-removing.mfp-bg {
                                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;" >
+
            opacity: 0;
                                    PROJECT
+
        }
                                </a>
+
    </style>
                                <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/Cas3" 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/Model" style="font-family: 'Righteous', cursive; font-weight: normal;">Model</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/Results" style="font-family: 'Righteous', cursive; font-weight: normal;">Results</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>
+
<body style="">
                                </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>
+
                                    <hr>
+
                                    <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>
+
                                    <hr>
+
                                    <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">
+
<section id="nav-placeholder">
                                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
+
    <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
                                    PEOPLE
+
        style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
                                </a>
+
        <a class="navbar-brand" href="https://2019.igem.org/Team:Tuebingen">
                                <div class="dropdown-menu">
+
            <img src="https://2019.igem.org/wiki/images/2/2a/T--Tuebingen--white_logo_animated.gif" alt="logo"
                                    <a class="dropdown-item" href="/Team:Tuebingen/Team" style="font-family: 'Righteous', cursive; font-weight: normal;">Team</a>
+
                style="width:70px;">
                                    <a class="dropdown-item" href="/Team:Tuebingen/Collaborations" style="font-family: 'Righteous', cursive; font-weight: normal;">Collaborations</a>
+
            <h5 class="d-inline ml-3" style="font-family: 'Righteous', cursive; font-weight: normal;">GLP.exe</h5>
                                    <a class="dropdown-item" href="/Team:Tuebingen/Attributions" style="font-family: 'Righteous', cursive; font-weight: normal;">Attributions</a>
+
        </a>
                                    <a class="dropdown-item" href="/Team:Tuebingen/Sponsors" style="font-family: 'Righteous', cursive; font-weight: normal;">Sponsors</a>
+
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                                    <a class="dropdown-item" href="/Team:Tuebingen/Gallery" style="font-family: 'Righteous', cursive; font-weight: normal;">Gallery</a>
+
            <span class="navbar-toggler-icon"></span>
                                </div>
+
        </button>
                            </li>
+
        <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">
+
                <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;">
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                                    HUMAN PRACTICES
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
                                </a>
+
                        PROJECT
                                <div class="dropdown-menu">
+
                    </a>
                                    <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices" style="font-family: 'Righteous', cursive; font-weight: normal;">Overview</a>
+
                    <div class="dropdown-menu">
                                    <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/Description"
                                    <a class="dropdown-item" href="/Team:Tuebingen/Experts" style="font-family: 'Righteous', cursive; font-weight: normal;">Experts</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Description</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/Killswitch"
                                    <a class="dropdown-item" href="/Team:Tuebingen/SDG" style="font-family: 'Righteous', cursive; font-weight: normal;">Sustainable Development Goals</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Kill Switch</a>
                                    <a class="dropdown-item" href="/Team:Tuebingen/Experimenta" style="font-family: 'Righteous', cursive; font-weight: normal;">Experimenta science center</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Nissle"
                                </div>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Nissle</a>
                            </li>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Incretin"
                            <li class="nav-item dropdown mx-3">
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Incretin</a>
                                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
+
                        <a class="dropdown-item" href="/Team:Tuebingen/CPP"
                                    AWARDS
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Cell Penetrating Peptides</a>
                                </a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Results"
                                <div class="dropdown-menu">
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Results</a>
                                    <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/Demonstrate"
                                    <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement" style="font-family: 'Righteous', cursive; font-weight: normal;">Education & Public Engagement</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Demonstrate</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/Notebook"
                                    <a class="dropdown-item" href="/Team:Tuebingen/Measurement" style="font-family: 'Righteous', cursive; font-weight: normal;">Measurement</a>
+
                          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;">Model</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Model"
                                    <a class="dropdown-item" href="/Team:Tuebingen/Software" style="font-family: 'Righteous', cursive; font-weight: normal;">Software</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
                                </div>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
                            </li>
+
                          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 mx-3">
+
                <li class="nav-item dropdown mx-3">
                                    <a class="nav-link" href="/Team:Tuebingen/Safety" style="font-family: 'Righteous', cursive; font-weight: normal;">SAFETY</a>
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                            </li>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal;color: #2ecc71;">
 +
                        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 mx-3">
+
                <li class="nav-item dropdown 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
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                                    FORM ⇗</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
                             </li>
+
                        HUMAN PRACTICES
 +
                    </a>
 +
                    <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-1 pt-2">
+
                <li class="nav-item mx-3">
                                <a href="https://www.facebook.com/igemtuebingen/" class="fa fa-facebook" target="_blank"></a>
+
                    <a class="nav-link" href="/Team:Tuebingen/Safety"
                            </li>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">SAFETY</a>
                            <li class="nav-item mx-1 pt-2">
+
                </li>
                                <a href="https://twitter.com/iGEMTuebingen" class="fa fa-twitter" target="_blank"></a>
+
                            </li>
+
  
                         </ul>
+
                <li class="nav-item mx-3">
                     </div>
+
                    <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank"
                 </nav>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">JUDGING
             </section>
+
                         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>
 
<script>
 
     var url = window.location.href;
 
     var url = window.location.href;
Line 10,322: Line 10,390:
 
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
 
</body>
 
</body>
 +
 
<style>
 
<style>
  
Line 10,350: Line 10,419:
 
*/
 
*/
  
.btn-link {
+
    .btn-link {
 
         font-weight: 400;
 
         font-weight: 400;
 
         color: #007bff;
 
         color: #007bff;
Line 10,374: Line 10,443:
 
     }
 
     }
  
     .btn-link{
+
     .btn-link {
opacity: 0.8;
+
        opacity: 0.8;
text-decoration: none;
+
        text-decoration: none;
color: white;
+
        color: white;
}
+
    }
.btn-link:hover{
+
 
opacity: 1;
+
    .btn-link:hover {
text-decoration: none;
+
        opacity: 1;
    color: rgba(105, 202, 98, 1.1);
+
        text-decoration: none;
}
+
        color: rgba(105, 202, 98, 1.1);
.btn-link:focus{
+
    }
opacity: 1;
+
 
text-decoration: none;
+
    .btn-link:focus {
    color: rgba(105, 202, 98, 1.1);
+
        opacity: 1;
}
+
        text-decoration: none;
.card-header{
+
        color: rgba(105, 202, 98, 1.1);
background-color: rgba(50,50,50,1);
+
    }
}
+
 
.card button{
+
    .card-header {
width: 100%;
+
        background-color: rgba(50, 50, 50, 1);
font-size: 1.5rem;
+
    }
}
+
 
 +
    .card button {
 +
        width: 100%;
 +
        font-size: 1.5rem;
 +
    }
 +
 
 
     /*
 
     /*
 
========================
 
========================
Line 10,407: Line 10,481:
 
========================
 
========================
 
*/
 
*/
.btn-one {
+
    .btn-one {
color: rgba(105, 202, 98, 1.1);
+
        color: rgba(105, 202, 98, 1.1);
transition: all 0.3s;
+
        transition: all 0.3s;
position: relative;
+
        position: relative;
}
+
    }
.btn-one span {
+
 
transition: all 0.3s;
+
    .btn-one span {
}
+
        transition: all 0.3s;
.btn-one::before {
+
    }
content: '';
+
 
position: absolute;
+
    .btn-one::before {
bottom: 0;
+
        content: '';
left: 0;
+
        position: absolute;
width: 100%;
+
        bottom: 0;
height: 100%;
+
        left: 0;
z-index: 1;
+
        width: 100%;
opacity: 0;
+
        height: 100%;
transition: all 0.3s;
+
        z-index: 1;
border-top-width: 1px;
+
        opacity: 0;
border-bottom-width: 1px;
+
        transition: all 0.3s;
border-top-style: solid;
+
        border-top-width: 1px;
border-bottom-style: solid;
+
        border-bottom-width: 1px;
border-top-color: rgba(105, 202, 98, 1.1);
+
        border-top-style: solid;
border-bottom-color: rgba(105, 202, 98, 1.1);
+
        border-bottom-style: solid;
transform: scale(0.1, 1);
+
        border-top-color: rgba(105, 202, 98, 1.1);
}
+
        border-bottom-color: rgba(105, 202, 98, 1.1);
.btn-one:hover span {
+
        transform: scale(0.1, 1);
letter-spacing: 2px;
+
    }
}
+
 
.btn-one:hover::before {
+
    .btn-one:hover span {
opacity: 1;
+
        letter-spacing: 2px;
transform: scale(1, 1);
+
    }
}
+
 
.btn-one::after {
+
    .btn-one:hover::before {
content: '';
+
        opacity: 1;
position: absolute;
+
        transform: scale(1, 1);
bottom: 0;
+
    }
left: 0;
+
 
width: 100%;
+
    .btn-one::after {
height: 100%;
+
        content: '';
z-index: 1;
+
        position: absolute;
transition: all 0.3s;
+
        bottom: 0;
background-color: rgba(255,255,255,0.05);
+
        left: 0;
}
+
        width: 100%;
.btn-one:hover::after {
+
        height: 100%;
opacity: 0;
+
        z-index: 1;
transform: scale(0.1, 1);}
+
        transition: all 0.3s;
 +
        background-color: rgba(255, 255, 255, 0.05);
 +
    }
 +
 
 +
    .btn-one:hover::after {
 +
        opacity: 0;
 +
        transform: scale(0.1, 1);
 +
    }
 +
 
 
     /*
 
     /*
 
========================
 
========================
Line 10,466: Line 10,548:
 
     */
 
     */
  
  .header{
+
    .header {
  position:relative;
+
        position: relative;
  overflow:hidden;
+
        overflow: hidden;
  display:flex;
+
        display: flex;
  flex-wrap: wrap;
+
        flex-wrap: wrap;
  justify-content: center;
+
        justify-content: center;
  align-items: flex-start;
+
        align-items: flex-start;
  align-content: flex-start;
+
        align-content: flex-start;
  height:50vh;
+
        height: 50vh;
  max-height: 350px;
+
        max-height: 350px;
  min-width:300px;
+
        min-width: 300px;
  color:#eee;
+
        color: #eee;
}
+
     }
.header:after{
+
  content:"";
+
  width:100%;
+
  height:100%;
+
  position:absolute;
+
  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{
+
  content:"";
+
  width:100%;
+
  height:100%;
+
  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://images.unsplash.com/photo-1463405346908-1e464eea5f3b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) center no-repeat;
+
  background-size:100%,80%;
+
  animation: grow 60s  linear 10ms infinite;
+
  transition:all 0.2s ease-in-out;
+
  z-index:-2
+
}
+
.header a{
+
  color:#eee
+
}
+
  
.info{
+
    .header:after {
  width:100%;
+
        content: "";
  padding:15% 10% 0 10%;
+
        width: 100%;
  text-align:center;
+
        height: 100%;
  text-shadow:0 2px 3px rgba(0,0,0,0.2)
+
        position: absolute;
}
+
        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%);
 +
    }
  
.info h4, .meta{
+
    .header:before {
  font-size:0.7em
+
        content: "";
}
+
        width: 100%;
 +
        height: 100%;
 +
        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
 +
    }
  
@media only screen and (max-width: 800px) {
+
    .header a {
.info h1 {
+
        color: #eee
    margin-top: 15%;
+
     }
     font-size: 1.7em;
+
    text-align: center;
+
}
+
}
+
  
@media only screen and (max-width: 660px) {
+
     .info {
     .info h1 {
+
         width: 100%;
         margin-top: 20%;
+
         padding: 15% 10% 0 10%;
         font-size: 1.5em;
+
        text-align: center;
 +
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2)
 
     }
 
     }
}
 
  
@media only screen and (max-width: 560px) {
+
     .info h4, .meta {
     .info h1 {
+
         font-size: 0.7em
         margin-top: 25%;
+
 
     }
 
     }
}
 
  
@media only screen and (max-width: 470px) {
+
    @media only screen and (max-width: 800px) {
    .info h1 {
+
        .info h1 {
        margin-top: 30%;
+
            margin-top: 15%;
 +
            font-size: 1.7em;
 +
            text-align: center;
 +
        }
 
     }
 
     }
}
 
  
@keyframes grow{
+
    @media only screen and (max-width: 660px) {
  0% { transform:scale(1)}
+
        .info h1 {
  50% { transform:scale(1.2)}
+
            margin-top: 20%;
}
+
            font-size: 1.5em;
 +
        }
 +
    }
  
/*  ======================
+
    @media only screen and (max-width: 560px) {
    HEADER BANNER STYLE END
+
        .info h1 {
    ==========================
+
            margin-top: 25%;
    */
+
        }
 +
    }
 +
 
 +
    @media only screen and (max-width: 470px) {
 +
        .info h1 {
 +
            margin-top: 30%;
 +
        }
 +
    }
 +
 
 +
    @keyframes grow {
 +
        0% {
 +
            transform: scale(1)
 +
        }
 +
        50% {
 +
            transform: scale(1.2)
 +
        }
 +
    }
 +
 
 +
    /*  ======================
 +
        HEADER BANNER STYLE END
 +
        ==========================
 +
        */
  
 
</style>
 
</style>
Line 10,561: Line 10,650:
 
<!-- Header Banner Begin-->
 
<!-- Header Banner Begin-->
 
<div class="header">
 
<div class="header">
  <div class="info">
+
    <div class="info">
    <h1 style="font-family: 'Righteous', cursive; font-weight: normal;">GENERAL HEADER</h1>
+
        <h1 style="font-family: 'Righteous', cursive; font-weight: normal;">ATTRIBUTIONS</h1>
  </div>
+
    </div>
 
</div>
 
</div>
 
<!-- Header Banner End-->
 
<!-- Header Banner End-->
 +
<div style="background-color: #232323;">
  
 
<div class="glpContainer">
 
<div class="glpContainer">
Line 10,576: Line 10,666:
 
     <main class="post-content">
 
     <main class="post-content">
  
         <h3>The Problem</h3>
+
         <h3 style="font-family:'Righteous';">We are eternally grateful to our supporters</h3>
 
         <div class="row">
 
         <div class="row">
 
             <div class="col-12">
 
             <div class="col-12">
 
                 <p>
 
                 <p>
                     Antimicrobial resistance is on the rise and the death toll from bacterial infections will continue
+
                     We are deeply grateful for all the support that we have received over the past iGEM year! Many
                    to increase if no alternative solutions are developed. The threat of antimicrobial resistance has
+
                     researchers, students, experts, departments and companies helped us along the way and we owe so much
                    been known for a long time - Alexander Fleming, the discoverer of penicillin, predicted in 1945 that
+
                     to all of them. Here we really want to say thank you. We particularly appreciate Prof. Dr. Lars
                    “exposing […] microbes to nonlethal quantities of the drug makes them resistant”. Even though
+
                     Angenent and Dr. Bastian Molitor, who instructed our team, as well as our incredibly supportive
                     efforts for development of novel antimicrobial compounds have been stepped up in recent years, there
+
                     advisors Sarah Schulz and Patrick Schweizer. We could not have done it without you.
                    is still a lack of safe and effective substitutes for antibiotics<sup><a href="#glpreferences">1</a></sup>.
+
                     A promising alternative – phage therapy – has an extensive history of successful application in
+
                    countries with limited access to antibiotics. Although phage therapy has been known for almost a
+
                    century, widespread application of phage therapy still has to become reality.<sup><a
+
                        href="#glpreferences">2</a></sup> This was the overarching problem our project needed to tackle.
+
 
+
                </p>
+
                <p>
+
                     In order to design an impactful project for this year’s iGEM season, we deemed it important to
+
                    precisely understand and define the problem we wanted to work on.
+
                </p>
+
                <p>
+
                    Through extensive research into the factors impeding phage therapy, we identified the production
+
                    process to be one of the most striking problems. In particular, the current methods are inefficient,
+
                     lead to high impurities and contamination, require the cultivation of human pathogens in large
+
                    quantities and causes regulatory problems due to imprecise manufacturing standards and a lack of
+
                    adequate quality controls.
+
 
                 </p>
 
                 </p>
 
             </div>
 
             </div>
             <h3>The Solution: Phactory</h3>
+
 
 +
             <h2 style="font-family:'Righteous';">Students</h2>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
 
                     <p>
 
                     <p>
                         We contemplated ways to use synthetic biology to overcome these challenges and found that using
+
                         <b>Lina Widerspick</b> designed our wetlab parts and was heavily involved in everything related
                        cell extract as the central component of a manufacturing pipeline for phages might allow us to
+
                         to
                        overcome these issues. With the central piece of our project in place, we were able to define
+
                         human practices and collaborations. Her incredible speed of writing is yet to match.
                         the individual modules of our manufacturing pipeline. The modular approach allowed us to break
+
                         down the overall problem into several isolated, solvable sub-problems that could be worked on in
+
                        parallel. For each module we defined the requirements we wanted to fulfill and brainstormed
+
                        potential solutions for reaching these requirements. The individual modules were designed in
+
                        such a way that they are truly independent of one another and that issues in one module would
+
                        not impede progress in another module. We defined quantitative criteria to measure progress in
+
                        achieving the identified requirements during the build-test cycle. To maximize our chances of
+
                        success and the robustness of our designs, we chose the simplest solutions we could come up
+
                        with. We defined additional goals when multiple solutions fulfilling these criteria were
+
                        available: accessibility, portability, affordability, and safety.
+
 
                     </p>
 
                     </p>
 
 
                     <p>
 
                     <p>
                         Phactory was designed to be an accessible manufacturing pipeline that produces pure, precisely
+
                         <b>Lukas Heumos</b> designed our drylab parts, implemented our wiki, was involved in sponsoring
                         defined bacteriophages at medically relevant concentrations using highly portable, affordable
+
                         and
                         and modular components. </p>
+
                         partnerships and organized the team. If anybody was looking for an answer in our slack channels,
                     <!-- comm: <p> -->
+
                        chances are high that Lukas had already answered it before the message really came through.
                </div>
+
                     </p>
            </div>
+
 
+
            <h2>Preparation of Cell Extract</h2>
+
            <div class="row">
+
                <div class="col-12">
+
 
                     <p>
 
                     <p>
                         Commercially available cell extract is highly expensive, while home-made alternatives are
+
                         <b>Patrick Müller</b> designed our wetlab parts, was our master of constructs and our RNA-Seq
                         time-consuming to produce and lack reliability. Furthermore, the presence of DNases in cell
+
                         library
                         extract complicates the production of phages from linear genomes. This module therefore had two
+
                        wizard. Furthermore, he was also involved in our partnership with the Experimenta He’ll probably
                        separate goals:
+
                         beat you at grain income at the Settlers of Catan.
 
                     </p>
 
                     </p>
 
                     <p>
 
                     <p>
                         The first goal was to produce high-quality, affordable cell extract and to establish quality
+
                         <b>Antonia Binder</b> performed all different kinds of wetlab experiments and didn’t hesitate to
                        control mechanisms to quantify its performance. The preparation protocols described in previous
+
                         stay
                        publications were analysed to identify optimization goals. <sup><a
+
                         for long hours to get the job done. If there’s one person in the world that really loves her
                            href="#glpreferences">3</a></sup> To achieve these goals every step of the preparation
+
                         jute bags - it’s Antonia.
                         process was assessed and improved, with a particular focus on cell cultivation and cell lysis.
+
                         To enable easy distribution and storage, we decided to improve the overall durability and
+
                        storage time of our cell extract by lyophilization. After resuspension of the dried cell
+
                         extract, assembly of any given bacteriophage can be performed.
+
 
                     </p>
 
                     </p>
 
                     <p>
 
                     <p>
                         The second goal was to optimize cell extract for the expression from linear DNA. To accomplish
+
                         <b>Jakob Keck</b> was heavily involved in the wetlab and finance. He also helped us coordinating
                         that, we identified the intracellular DNAse RecBCD as our main target. This enzyme - in
+
                         our
                         cooperation with RecA - is an essential component maintaining the integrity of the bacterial
+
                        stay in the ZMBP laboratories. If you find a working, ancient looking device in your laboratory,
                         genome<sup><a href="#glpreferences">4</a></sup>. Furthermore it is the protein causing
+
                        there is a strong possibility that Jakob fixed and donated it.
                         degradation of linear DNA within cell extract. Therefore, the inactivation of this endonuclease
+
                    </p>
                         was defined as a crucial step to ensure efficient phage production within the cell extract.
+
                    <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>
 
                     </p>
  
Line 10,663: Line 10,764:
  
  
             <h2>Synthetic Phage Manufacturing</h2>
+
             <h2 style="font-family:'Righteous';">Advisors</h2>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
 
                     <p>
 
                     <p>
                         Our goal was to use cell extract as a host-independent platform for phage assembly from a linear
+
                         <b>Sarah Schulz</b> gave staggeringly valuable insight and advice for our wetlab experiments. If
                         DNA template. To demonstrate the universal applicability of our manufacturing platform, we
+
                         we ever got weird results in the lab, she was the one that we consulted first.
                         attempted to express a variety of structurally different phages at titers suitable for
+
                    </p>
                         therapeutic application. In order to generate maximal phage titers, we identified the parameters
+
                    <p>
                         that potentially impact phage production. These included incubation time, influence of dNTP
+
                         <b>Patrick Schweizer’s</b> experience and comprehension of synthetic biology was extremely
                         addition and optimal DNA template concentration.
+
                         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>
 
                     </p>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
  
             <h2>Modular Phage Composition</h2>
+
             <h2 style="font-family:'Righteous';">Partner Institutions</h2>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
 
                     <p>
 
                     <p>
                         When thinking about a release into the environment in the course of a therapeutic application,
+
                         The <b>European Molecular Biology Laboratory</b> (EMBL) warmly welcomed us in Heidelberg and
                         it is important to avoid using genetically engineered phages. We postulated that in our cell
+
                        allowed us to use some of their RNA-Seq library kits and perform the rRNA depletion in their
                         free system it should be possible to modify phages without altering their genome. In a modular
+
                        laboratories. Additionally, Nayara Trevisan Doimo de Azevedo and Ferris Jung proceeded with the
                         approach, we aimed at adding both natural phage DNA and engineered proteins to an assembly
+
                         RNA-Seq library preparation and sequenced it. Specifically, we would like to express our
                         reaction. To test our hypothesis, we chose to externally express an edited HOC (highly
+
                         profound gratitude to Iris Kruijen for handling everything related to communication and public
                         immunogenic outer capsid) protein and incorporate it in the assembly reaction. Thinking about
+
                         relations exceptionally well and to Vladimir Benes for his great interest and extensive feedback
                         the possible applications of fluorescent and bioluminescent phages in medical imaging, we
+
                         for our project, as well as for allowing us to use his laboratories.
                         designed expression constructs encoding for YFP or the NanoLuc luciferase. Additionally, we
+
                    </p>
                         needed to consider first the isolation of the desired protein and then later the purification of
+
                    <p>
                         the phages out of a heterogeneous solution. Therefore, we added a histidine-tag.
+
                         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>
 
                     </p>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
  
             <h2>Quality Control</h2>
+
             <h2 style="font-family:'Righteous';">Project Advice</h2>
 
+
 
+
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
 
                     <p>
 
                     <p>
                         Clinical applications require highly pure samples of functional bacteriophages, free of
+
                         We’re very grateful to <b>Dr. Lisa Maier</b> who provided us with gut microbiome support. Her
                         bacterial endotoxins and contaminations. The purpose of this module is to implement quality
+
                        expertise greatly influenced our RNA-Seq experimental design. Additionally, she generously
                         control mechanisms to ensure a safe and effective application.
+
                        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>
 
                     </p>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
  
 +
            <h2 style="font-family:'Righteous';">Lab Support</h2>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
                    <figure class="figure" id="image-popups">
 
                        <a style="font-size: small"
 
                          href="http://2018.igem.org/wiki/images/6/69/T--Munich--Design_Principles.png"
 
                          data-effect="mfp-zoom-out"
 
                          title="Our therapeutic agent is a probiotic secreting incretin mimetics placed in the patients intestine by oral administration of capsules.
 
                                            This enables an easier therapy where a regular intake of a medication is not required.">
 
                            <img src="http://2018.igem.org/wiki/images/6/69/T--Munich--Design_Principles.png"
 
                                class="figure-img img-fluid rounded"
 
                                alt="A generic square placeholder image with rounded corners in a figure."></a>
 
                    </figure>
 
                </div>
 
            </div>
 
            <div class="row">
 
                <div class="col-12">
 
                    <h3>Quantifying the Level of DNA Contamination</h3>
 
 
                     <p>
 
                     <p>
                         While gels and absorption can be used to detect the presence of the desired phage genomes, they
+
                         iGEM projects get complex and expensive very quickly. Without the generosity of these groups and
                        do not prove the absence of contaminating DNA. In fact, we found that more than 50% of isolated
+
                         institutions, our project could have never entered the laboratory stage.
                        phage genome purified from common <i>E. coli</i> phages using traditional protocols is instead
+
                        <i>E. coli</i> genomic DNA. To precisely quantify the amount of contamination, we used third
+
                        generation sequencing. Nanopore sequencing was chosen because of its affordability and small
+
                         size that makes the device highly portable. Its long-read lengths allows for unambiguous
+
                        identification of the source of contaminations.
+
 
                     </p>
 
                     </p>
 
                     <p>
 
                     <p>
                         As a submodule, we decided to construct a software suite called Sequ-Into that allows the user
+
                         The <b>ZMBP</b>, the <b>NCCT</b>, the <b>EMBL</b>, the <b>group of Professor Wohlleben</b>, the
                        to easily determine the amount of DNA contamination in the first few minutes of sequencing,
+
                         group of our PI <b>Prof. Dr. Lars Angenent</b>, the group of <b>PD Dr. Evi Stegmann</b> and <b>Dr.
                         thereby providing access to this aspect of phage manufacturing without requiring specialized
+
                        Lisa Maier</b> generously supplied us with various lab materials. We’re very grateful for their
                         knowledge in bioinformatics.
+
                         unconditional support.
 
                     </p>
 
                     </p>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
  
 
+
            <h2 style="font-family:'Righteous';">Interview partners</h2>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
 
                     <p>
 
                     <p>
                         3D printed low-cost devices to overcome these challenges independently. The hardware was
+
                         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.
                        designed to be compatible with existing laboratory equipment or open source solutions.
+
 
                     </p>
 
                     </p>
                </div>
 
            </div>
 
            <div class="row">
 
                <div class="col-12">
 
                    <h3>Verifying the Function of the Phage Product</h3>
 
 
 
                     <p>
 
                     <p>
                         To assess the antimicrobial action of our phage product, we combined two methods. We chose a
+
                         <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.
                        plaque assay as a cheap and simple way to confirm the presence of functional phages and to
+
                        quantify the phage titer. Reproduction and transcriptional capability of our phages however
+
                        could be assessed by reverse transcriptase qPCR.
+
 
                     </p>
 
                     </p>
                    <h3>Reducing Toxin Levels</h3>
 
 
 
                     <p>
 
                     <p>
                         In an attempt to push our purity towards enabling intravenous administration, we decided to
+
                         <b>Dr. Annette Christ</b> from the Institute of Innate Immunity in Bonn discussed everything related to our scientific project with us.
                        perform fractionation in a pressure-driven size-exclusion filter system. Suitability of the
+
                        phage product for intravenous application could then be assessed with an additional endotoxin
+
                        test.
+
 
                     </p>
 
                     </p>
 
                     <p>
 
                     <p>
                         After these steps, our phages would be ready for animal testing, which we did not plan to
+
                         <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.
                         attempt in the context of the iGEM competition
+
                    </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>
 
                     </p>
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
            <div class="container-fluid py-5 mb-0 bg-dark"> <!-- FOR REUSE: REMOVE bg-dark IF U DONT WANNA HAVE A DARK BACKGROUND -->
+
         </div>
<div id="accordion">
+
     </main>
  <div class="card">
+
    <div class="card-header" id="headingOne">
+
      <h5 class="mb-0">
+
        <button class="btn btn-one btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+
          Cloning
+
         </button>
+
      </h5>
+
    </div>
+
 
+
     <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
+
      <div class="card-body">
+
          <div class="row">
+
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/8/88/T--Munich--WL1_Colony_PCR.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Colony PCR</a></div>
+
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/a/a5/T--Munich--WL1_Chemical_transformation.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Chemical transformation</a></div>
+
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/b/be/T--Munich--WL1_Agarose-Gel_electrophoresis.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Agarose-Gel electrophoresis</a></div>
+
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/c/ca/T--Munich--WL1_Electrocompetent_transformation.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Electrocompetent transformation</a></div>
+
          </div>
+
          <div class="row">
+
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/1/1a/T--Munich--WL1_Ligation.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Ligation</a></div>
+
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/3/3c/T--Munich--WL1_PCR.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">PCR</a></div>
+
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/7/7e/T--Munich--WL1_Restriction_Digest.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Restriction digest</a></div>
+
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/a/ab/T--Munich--WL1_Sequencing_sample_preparation.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Sequencing sample preparation</a></div>
+
          </div>
+
          <div class="row">
+
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/7/76/T--Munich--Protocol_Oracoli_double_layer_photolitho.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Double Layer Photolitography</a></div>
+
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/7/70/T--Munich--Protocol_Oracoli_Microscopy.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Oracoli Microscopy</a></div>
+
          <div class="col-6 col-md-3 mt-2"><a class="PDFlinks text-center" target="_blank" href="http://2018.igem.org/wiki/images/e/e0/T--Munich--Protocol_Oracoli_Soft_Lithography.pdf"><img class="img-fluid d-block" src="http://2018.igem.org/wiki/images/e/e6/T--Munich--DocIcon.png" alt="PDF" style="width: 6vw;">Soft Lithography</a></div>
+
          </div>
+
      </div>
+
    </div>
+
  </div>
+
 
</div>
 
</div>
            </div>
+
</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 {
 +
        position: relative;
 +
    }
  
            <h2>Encapsulation</h2>
+
    .link_wrapper a {
            <div class="row">
+
        display: block;
                <div class="col-12">
+
        width: 250px;
                    <The goal of this module is to optimize the packaging of assembled phages to prepare them for
+
        height: 50px;
                        application to patients.>
+
        line-height: 50px;
                        <p>
+
        font-weight: bold;
                            The transport within the body often poses problems for the activity and integrity of phages,
+
        text-decoration: none;
                            which can be addressed by packaging of the phages in a protective layer<sup><a
+
        background: #333;
                                href="#phareferences">5</a></sup>. For oral application of our phage product, sufficient
+
        text-align: center;
                            stability for gastric passage has to be guaranteed. The highly acidic environment, as well
+
        color: #fff;
                            as the presence of proteases composed the major challenges. Our packaging method thus needed
+
        text-transform: uppercase;
                            to provide resistance to low pH. At the same time, phages needed to be released from their
+
        letter-spacing: 1px;
                            protection upon reaching intestinal fluid. These characteristics are provided by
+
        border: 3px solid #333;
                            calcium-alginate microspheres<sup><a
+
        transition: all .35s;
                                href=https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5264180/>6</a></sup>. Lacking suitable
+
    }
                            encapsulation hardware, we decided to build our own nozzle to encapsulate the phages in
+
                            monodisperse microcapsules.
+
                        </p>
+
                        <p>
+
                            The methods most suitable for quantification of size and assessment of monodispersity of the
+
                            alginate capsules were brightfield and epifluorescence microscopy. To determine whether our
+
                            encapsulation method fulfills our requirements of survival and release of phages in
+
                            simulated gastric and intestinal fluid, respectively, we subsequently performed plaque
+
                            assays.
+
                        </p>
+
                    </The>
+
                </div>
+
            </div>
+
  
 +
    .icon {
 +
        width: 50px;
 +
        height: 50px;
 +
        border: 3px solid transparent;
 +
        position: absolute;
 +
        transform: rotate(45deg);
 +
        right: 0;
 +
        top: 0;
 +
        z-index: -1;
 +
        transition: all .35s;
 +
    }
  
 +
    .icon svg {
 +
        width: 30px;
 +
        position: absolute;
 +
        top: calc(50% - 15px);
 +
        left: calc(50% - 15px);
 +
        transform: rotate(-45deg);
 +
        fill: #2ecc71;
 +
        transition: all .35s;
 +
    }
  
 +
    .link_wrapper a:hover {
 +
        width: 200px;
 +
        border: 3px solid #2ecc71;
 +
        background: transparent;
 +
        color: #2ecc71;
 +
    }
  
 +
    .link_wrapper a:hover + .icon {
 +
        border: 3px solid #2ecc71;
 +
        right: -25%;
 +
    }
  
            <div id="glpreferences" class="row">
+
    @media only screen and (max-width: 767.98px) {
                <h3>References</h3>
+
                <div class="col-12">
+
                    <ol>
+
                        <li><a href=https://www.nature.com/articles/ja2017124> Incentivising innovation in antibiotic
+
                            drug discovery and development: progress, challenges and next steps.</a></li>
+
                        <li id="ref_2"><a href=https://www.nature.com/articles/nrmicro3564> A century of the phage:
+
                            past, present and future.</a></li>
+
                        <li id="ref_3"><a
+
                                href=https://www.jove.com/video/50762/protocols-for-implementing-an-escherichia-coli-based-tx-tl-cell-free>
+
                            Protocols for Implementing an Escherichia coli Based TX-TL Cell-Free Expression System for
+
                            Synthetic Biology.</a></li>
+
                        <li id="ref_4"><a href=https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2593567/>RecBCD Enzyme and
+
                            the Repair of Double-Stranded DNA Breaks.</a></li>
+
                        <li id="ref_5"><a
+
                                href=https://www.sciencedirect.com/science/article/pii/S000186861630392X#s0185>Malik, D.
+
                            J., Sokolov, I. J., Vinner, G. K., Mancuso, F., Cinquerrui, S., Vladisavljevic, G. T., …
+
                            Kirpichnikova, A. (2017). Formulation, stabilisation and encapsulation of bacteriophage for
+
                            phage therapy. Advances in Colloid and Interface Science, 249, 100–133. </a></li>
+
                        <li id="ref_6"><a href=hhttps://www.ncbi.nlm.nih.gov/pmc/articles/PMC5264180/>Colom, J.,
+
                            Cano-Sarabia, M., Otero, J., Aríñez-Soriano, J., Cortés, P., Maspoch, D., &amp; Llagostera,
+
                            M. (2017). Microencapsulation with alginate/CaCO3: A strategy for improved phage therapy.
+
                            Scientific Reports, 7, 41441. </a></li>
+
                        </li>
+
                    </ol>
+
                </div>
+
            </div>
+
  
    </main>
+
        .link_wrapper a {
</div>
+
            width: 100px;
<!-- BUTTON LINK ANIMATION: CAVE: THIS MAY NOT WORK IN ALL CONTAINERS / <div> etc!!!!!-->
+
            height: 20px;
<style>
+
            line-height: 20px;
    .wrapper{
+
            font-weight: normal;
  position: fixed; /* Change this for absolute positioning  */
+
            font-size: smaller;
  top: 50%;
+
            letter-spacing: 0.05px;
  left: 50%;
+
        }
  transform: translate(-50%, -50%);
+
}
+
  
.link_wrapper{
 
  position: relative;
 
}
 
  
.link_wrapper a{
+
        .icon {
  display: block;
+
            width: 20px;
  width: 250px;
+
            height: 20px;
  height: 50px;
+
        }
  line-height: 50px;
+
  font-weight: bold;
+
  text-decoration: none;
+
  background: #333;
+
  text-align: center;
+
  color: #fff;
+
  text-transform: uppercase;
+
  letter-spacing: 1px;
+
  border: 3px solid #333;
+
  transition: all .35s;
+
}
+
  
.icon{
+
        .icon svg {
  width: 50px;
+
            width: 12px;
  height: 50px;
+
            top: calc(50% - 6px);
  border: 3px solid transparent;
+
            left: calc(50% - 6px);
  position: absolute;
+
        }
  transform: rotate(45deg);
+
  right: 0;
+
  top: 0;
+
  z-index: -1;
+
  transition: all .35s;
+
}
+
  
.icon svg{
+
        .link_wrapper a:hover {
  width: 30px;
+
            width: 90px;
  position: absolute;
+
        }
  top: calc(50% - 15px);
+
    }
  left: calc(50% - 15px);
+
</style>
  transform: rotate(-45deg);
+
  fill: #2ecc71;
+
  transition: all .35s;
+
}
+
  
.link_wrapper a:hover{
+
<script>
  width: 200px;
+
    window.onscroll = function () {
  border: 3px solid #2ecc71;
+
        myFunction()
  background: transparent;
+
    };
  color: #2ecc71;
+
}
+
  
.link_wrapper a:hover + .icon{
+
    var vnav = document.getElementById("phaContents");
  border: 3px solid #2ecc71;
+
    var sticky = vnav.offsetTop + 150;
  right: -25%;
+
}
+
  
@media only screen and (max-width: 767.98px) {
+
    function myFunction() {
 +
        if (window.pageYOffset >= sticky) {
 +
            vnav.classList.add("stickyContents");
 +
        } else {
 +
            vnav.classList.remove("stickyContents");
 +
        }
 +
    }
  
.link_wrapper a{
 
  width: 100px;
 
  height: 20px;
 
  line-height: 20px;
 
  font-weight: normal;
 
    font-size:smaller;
 
    letter-spacing: 0.05px;
 
}
 
  
.icon {
+
    /*
     width: 20px;
+
    * jQuery to build the POC quickly
    height: 20px;
+
    *
}
+
    * 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>';
  
.icon svg {
+
            $('.post-content').find('h2').each(function (i) {
    width: 12px;
+
                $(this).attr('id', 'title_' + i)
    top: calc(50% - 6px);
+
    left: calc(50% - 6px);
+
}
+
  
.link_wrapper a:hover {
+
                output += '<li><a href="#title_' + i + '" class="toc-title_' + i + '">' + svg + $(this).text() + '</a></li>';
    width: 90px;
+
            });
}
+
}
+
</style>
+
  
<div class="wrapper">
+
            return output;
  <div class="link_wrapper">
+
        },
    <a href="#">Hover Me!</a>
+
        get_bottom_off_content = function () {
    <div class="icon">
+
            var $content = $('.post-content'),
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.832 268.832">
+
                offset = $content.offset();
        <path d="M265.17 125.577l-80-80c-4.88-4.88-12.796-4.88-17.677 0-4.882 4.882-4.882 12.796 0 17.678l58.66 58.66H12.5c-6.903 0-12.5 5.598-12.5 12.5 0 6.903 5.597 12.5 12.5 12.5h213.654l-58.66 58.662c-4.88 4.882-4.88 12.796 0 17.678 2.44 2.44 5.64 3.66 8.84 3.66s6.398-1.22 8.84-3.66l79.997-80c4.883-4.882 4.883-12.796 0-17.678z"/>
+
      </svg>
+
    </div>
+
  </div>
+
</div>
+
<!-- BUTTON LINK ANIMATION: CAVE: THIS MAY NOT WORK IN ALL CONTAINERS / <div> etc!!!!! END-->
+
  
<script type="text/javascript"
+
            return $content.outerHeight() + offset.top;
         src="https://2019.igem.org/Team:Tuebingen/sidebarContentJS?action=raw&ctype=text/javascript"></script>
+
         },
 +
        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);
  
</p><p>
+
                if (has_next) {
 +
                    diff = (st - positions[k]) / (positions['title_' + (n + 1)] - positions[k]) * 150;
 +
                } else {
 +
                    diff = (st - positions[k]) / (get_bottom_off_content() - positions[k]) * 240;
 +
                }
  
         <div class='container-fluid p-3' style="background-color: rgba(255, 255, 255, 0.3);">
+
                $link.find('rect').attr('stroke-dashoffset', Math.round(150 - diff));
                <hr>
+
 
                <div class='row align-items-center'>
+
                if (st >= positions[k] && not_next && has_next) {
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
                    $('.toc-' + k).addClass('toc-reading');
                        <a href="https://www.stura-tuebingen.de/" target="_blank2"><img class="img-fluid"
+
                } else if (st >= positions[k] && !not_next && has_next) {
                                                                                      src="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--stura_logo.png"
+
                    $('.toc-' + k).removeClass('toc-reading');
                                                                                      style="max-height: 80px;"></a>
+
                } else if (st >= positions[k] && !not_next && !has_next) {
                    </div>
+
                    $('.toc-' + k).addClass('toc-reading');
                    <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"
+
                if (st >= positions[k]) {
                                                                            style="max-height: 80px;"></a>
+
                    $('.toc-' + k).addClass('toc-already-read');
                    </div>
+
                } else {
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
                    $('.toc-' + k).removeClass('toc-already-read');
                        <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>
+
                if (st < positions[k]) {
                    </div>
+
                    $('.toc-' + k).removeClass('toc-already-read toc-reading');
                    <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"
+
                count++;
                                                                                      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"
+
    // build our table of content
                                                                                            src="https://2019.igem.org/wiki/images/e/eb/T--Tuebingen--Logo-Experimenta.png"
+
    $('.table-of-contents').html(build_toc());
                                                                                            style="max-height: 80px;"></a>
+
 
                    </div>
+
    // first definition of positions
                    <div class='col-6 col-md-2 sponsorLogo text-center'>
+
    get_positions();
                      <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"
+
    // on resize, re-calc positions
                                                                                                style="max-height: 80px;"></a>
+
    $(window).on('resize', function () {
                    </div>
+
        get_positions();
                </div>
+
    });
           
+
 
                <hr>
+
    $(document).on('scroll', function () {
                <div class='row align-items-center'>
+
        set_toc_reading();
                    <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"
+
    /*
                                                                                src="https://2019.igem.org/wiki/images/4/43/T--Tuebingen--lexogen_logo.png"></a>
+
    * Contents Controler End
                    </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>
+
  * Gallery Controler End
                    </div>
+
  */
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
    function gaFunction(imgs) {
                        <a href="https://www.agilent.com/" target="_blank2"><img class="img-fluid"
+
        var expandImg = document.getElementById("expandedImg");
                                                                                src="https://2019.igem.org/wiki/images/e/e7/T--Tuebingen--agilent_logo.png"></a>
+
        var imgText = document.getElementById("imgtext");
                    </div>
+
        expandImg.src = imgs.src;
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
        imgText.innerHTML = imgs.alt;
                        <a href="https://www.digitalocean.com/" target="_blank2"><img class="img-fluid"
+
        expandImg.parentElement.style.display = "block";
                                                                                      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"
+
  * Gallery Controler Start
                                                                        src="https://2019.igem.org/wiki/images/c/ce/T--Tuebingen--dwk_logo.png"></a>
+
  */
                    </div>
+
</script>
                    <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"
+
<script src="https://2019.igem.org/Team:Tuebingen/sidebarJS?action=raw&ctype=text/javascript"></script>
                                                                                  src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--eppendorf_logo.png"></a>
+
 
                    </div>
+
<script src="https://2019.igem.org/Team:Tuebingen/smoothScrollJS?action=raw&ctype=text/javascript"></script>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
<script>
                        <a href="https://www.implen.de/" target="_blank2"><img class="img-fluid"
+
var scroll = new SmoothScroll('a[href*="#"]');
                                                                              src="https://2019.igem.org/wiki/images/b/bb/T--Tuebingen--Logo-Implen.png"></a>
+
</script>
                    </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='container-fluid p-3' style="background-color: #919191;">
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
    <hr>
                        <a href="https://www.gbo.com/" target="_blank2"><img class="img-fluid"
+
    <div class='row align-items-center'>
                                                                            src="https://2019.igem.org/wiki/images/a/ae/T--Tuebingen--greiner_logo.png"></a>
+
        <div class='col-6 col-md-2 sponsorLogo text-center'>
                    </div>
+
            <a href="https://www.stura-tuebingen.de/" target="_blank2"><img class="img-fluid"
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                                                                            src="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--stura_logo.png"
                        <a href="http://www.metabion.com/" target="_blank2"><img class="img-fluid"
+
                                                                            style="max-height: 80px;"></a>
                                                                                src="https://2019.igem.org/wiki/images/4/41/T--Tuebingen--Logo-Metabion.png"></a>
+
        </div>
                    </div>
+
        <div class='col-6 col-md-2 sponsorLogo text-center'>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <a href="https://www.embl.de/" target="_blank2"><img class="img-fluid"
                        <a href="https://www.microsynth.ch/home-ch.html" target="_blank2"><img class="img-fluid"
+
                                                                src="https://2019.igem.org/wiki/images/c/c4/T--Tuebingen--embl_logo.png"
                                                                                              src="https://2019.igem.org/wiki/images/1/18/T--Tuebingen--microsynth_logo.png"></a>
+
                                                                style="max-height: 80px;"></a>
                    </div>
+
        </div>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
        <div class='col-6 col-md-2 sponsorLogo text-center'>
                        <a href="https://www.neb.com/" target="_blank2"><img class="img-fluid"
+
            <a href="https://www.kohlbacherlab.org" target="_blank2"><img class="img-fluid"
                                                                            src="https://2019.igem.org/wiki/images/2/29/T--Tuebingen--neb_logo.png"></a>
+
                                                                          src="https://2019.igem.org/wiki/images/9/99/T--Tuebingen--kohlbacher_logo.png"
                    </div>
+
                                                                          style="max-height: 80px;"></a>
                </div>
+
        </div>
           
+
        <div class='col-6 col-md-2 sponsorLogo text-center'>
                <div class='row align-items-center'>
+
            <a href="https://www.dieter-schwarz-stiftung.de/homepage.html" target="_blank2"><img class="img-fluid"
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
                                                                                                src="https://2019.igem.org/wiki/images/8/86/T--Tuebingen--LogoDSS.png"
                        <a href="https://www.promega.de/en/" target="_blank2"><img class="img-fluid"
+
                                                                                                style="max-height: 80px;"></a>
                                                                                  src="https://2019.igem.org/wiki/images/f/f8/T--Tuebingen--promega_logo.png"></a>
+
        </div>
                    </div>
+
        <div class='col-6 col-md-2 sponsorLogo text-center'>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
            <a href="https://www.experimenta.science/en/" 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/e/eb/T--Tuebingen--Logo-Experimenta.png"
                                                                                  src="https://2019.igem.org/wiki/images/9/92/T--Tuebingen--qiagen_logo.png"></a>
+
                                                                                style="max-height: 80px;"></a>
                    </div>
+
        </div>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
        <div class='col-6 col-md-2 sponsorLogo text-center'>
                        <a href="https://www.carlroth.com/en/en" target="_blank2"><img class="img-fluid"
+
            <a href="https://www.zmbp.uni-tuebingen.de/zmbp.html" target="_blank2"><img class="img-fluid"
                                                                                      src="https://2019.igem.org/wiki/images/6/61/T--Tuebingen--roth_logo.png"></a>
+
                                                                                        src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png"
                    </div>
+
                                                                                        style="max-height: 80px;"></a>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
        </div>
                        <a href="https://www.sitoolsbiotech.com/" target="_blank2"><img class="img-fluid"
+
    </div>
                                                                                        src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--sibiotools_logo.png"></a>
+
 
                    </div>
+
    <hr>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
    <div class='row align-items-center'>
                        <a href="https://www.snapgene.com/" target="_blank2"><img class="img-fluid"
+
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                                                                                  src="https://2019.igem.org/wiki/images/3/3a/T--Tuebingen--snapgene_logo.png"></a>
+
            <a href="https://www.lexogen.com/" target="_blank2"><img class="img-fluid"
                    </div>
+
                                                                    src="https://2019.igem.org/wiki/images/4/43/T--Tuebingen--lexogen_logo.png"></a>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
        </div>
                        <a href="https://www.trilinkbiotech.com/" target="_blank2"><img class="img-fluid"
+
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                                                                                        src="https://2019.igem.org/wiki/images/b/b6/T--Tuebingen--trilink_logo.png"></a>
+
            <a href="http://s466755640.online.de/4bl/" target="_blank2"><img class="img-fluid"
                    </div>
+
                                                                            src="https://2019.igem.org/wiki/images/0/0b/T--Tuebingen--4base_logo.png"></a>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
        </div>
                        <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
+
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                                                                                    src="https://2019.igem.org/wiki/images/4/4c/T--Tuebingen--Logo-Twist.png"></a>
+
            <a href="https://www.agilent.com/" target="_blank2"><img class="img-fluid"
                    </div>
+
                                                                    src="https://2019.igem.org/wiki/images/e/e7/T--Tuebingen--agilent_logo.png"></a>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
        </div>
                        <a href="http://www.vazymebiotech.com/" target="_blank2"><img class="img-fluid"
+
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                                                                                      src="https://2019.igem.org/wiki/images/b/b7/T--Tuebingen--vazyme_logo.png"></a>
+
            <a href="https://www.digitalocean.com/" target="_blank2"><img class="img-fluid"
                    </div>
+
                                                                          src="https://2019.igem.org/wiki/images/6/67/T--Tuebingen--digitalocean_logo.png"></a>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
        </div>
                        <a href="https://www.biolegend.com/" target="_blank2"><img class="img-fluid"
+
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                                                                                  src="https://2019.igem.org/wiki/images/c/c3/T--Tuebingen--biolegend_logo.png"></a>
+
            <a href="https://dwk.com/" target="_blank2"><img class="img-fluid"
                    </div>
+
                                                            src="https://2019.igem.org/wiki/images/c/ce/T--Tuebingen--dwk_logo.png"></a>
                    <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
+
        </div>
                        <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid"
+
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
                                                                                    src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
+
            <a href="https://www.eppendorf.com/" target="_blank2"><img class="img-fluid"
                    </div>
+
                                                                      src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--eppendorf_logo.png"></a>
                </div>
+
        </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='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
            <a href="https://www.promega.de/en/" target="_blank2"><img class="img-fluid"
 +
                                                                      src="https://2019.igem.org/wiki/images/f/f8/T--Tuebingen--promega_logo.png"></a>
 +
        </div>
 +
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
            <a href="https://www.qiagen.com/us/" target="_blank2"><img class="img-fluid"
 +
                                                                      src="https://2019.igem.org/wiki/images/9/92/T--Tuebingen--qiagen_logo.png"></a>
 +
        </div>
 +
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
            <a href="https://www.carlroth.com/en/en" target="_blank2"><img class="img-fluid"
 +
                                                                          src="https://2019.igem.org/wiki/images/6/61/T--Tuebingen--roth_logo.png"></a>
 +
        </div>
 +
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
            <a href="https://www.sitoolsbiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                            src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--sibiotools_logo.png"></a>
 +
        </div>
 +
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
            <a href="https://www.snapgene.com/" target="_blank2"><img class="img-fluid"
 +
                                                                      src="https://2019.igem.org/wiki/images/3/3a/T--Tuebingen--snapgene_logo.png"></a>
 +
        </div>
 +
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
            <a href="https://www.trilinkbiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                            src="https://2019.igem.org/wiki/images/b/b6/T--Tuebingen--trilink_logo.png"></a>
 +
        </div>
 +
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
            <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
 +
                                                                        src="https://2019.igem.org/wiki/images/4/4c/T--Tuebingen--Logo-Twist.png"></a>
 +
        </div>
 +
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
            <a href="http://www.vazymebiotech.com/" target="_blank2"><img class="img-fluid"
 +
                                                                          src="https://2019.igem.org/wiki/images/b/b7/T--Tuebingen--vazyme_logo.png"></a>
 +
        </div>
 +
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
            <a href="https://www.biolegend.com/" target="_blank2"><img class="img-fluid"
 +
                                                                      src="https://2019.igem.org/wiki/images/c/c3/T--Tuebingen--biolegend_logo.png"></a>
 +
        </div>
 +
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'>
 +
            <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid"
 +
                                                                        src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
 +
        </div>
 +
    </div>
 
</div>
 
</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/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>
 
<script src="https://2019.igem.org/Team:Tuebingen/popup-imagesJS?action=raw&ctype=text/javascript"></script>
<div class="visualClear"></div>
+
 
 
</html>
 
</html>

Latest revision as of 19:40, 14 October 2019

GLP.exe

ATTRIBUTIONS

We are eternally grateful to our supporters

We are deeply grateful for all the support that we have received over the past iGEM year! Many researchers, students, experts, departments and companies helped us along the way and we owe so much to all of them. Here we really want to say thank you. We particularly appreciate Prof. Dr. Lars Angenent and Dr. Bastian Molitor, who instructed our team, as well as our incredibly supportive advisors Sarah Schulz and Patrick Schweizer. We could not have done it without you.

Students

Lina Widerspick designed our wetlab parts and was heavily involved in everything related to human practices and collaborations. Her incredible speed of writing is yet to match.

Lukas Heumos designed our drylab parts, implemented our wiki, was involved in sponsoring and partnerships and organized the team. If anybody was looking for an answer in our slack channels, chances are high that Lukas had already answered it before the message really came through.

Patrick Müller 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.

Antonia Binder 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.

Jakob Keck 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.

Famke Bäuerle 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.

Steffen Lemke 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.

Marietheres Evers 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.

Eva Kunzelmann 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.

Luzia Hamma 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.

Philipp Ehmele 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.

Katharina Csik 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.

Carolin Schwitalla 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.

Jonas Steinwender 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.

Advisors

Sarah Schulz gave staggeringly valuable insight and advice for our wetlab experiments. If we ever got weird results in the lab, she was the one that we consulted first.

Patrick Schweizer’s 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.

Dr. Pengfei Xia eminently inspired our kill-switch mechanism and provided invaluable feedback for our project. Additionally, his molecular cloning knowledge is off the roof.

Dr. Bastian Molitor’s deep understanding of anything synthetic biology was very beneficial during our project development and troubleshooting. We’re very grateful for his unconditional support.

Partner Institutions

The European Molecular Biology Laboratory (EMBL) warmly welcomed us in Heidelberg and allowed us to use some of their RNA-Seq library kits and perform the rRNA depletion in their laboratories. Additionally, Nayara Trevisan Doimo de Azevedo and Ferris Jung proceeded with the RNA-Seq library preparation and sequenced it. Specifically, we would like to express our profound gratitude to Iris Kruijen for handling everything related to communication and public relations exceptionally well and to Vladimir Benes for his great interest and extensive feedback for our project, as well as for allowing us to use his laboratories.

The Center for Plant Molecular Biology (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.

Moreover, the group of Prof. Dr. Wolfgang Wohlleben generously allowed us to use their laboratories as well as some of their material.

Additionally, the NGS Competence Center Tübingen (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.

Finally, we want to thank the Quantitative Biology Center (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.

Project Advice

We’re very grateful to Dr. Lisa Maier who provided us with gut microbiome support. Her expertise greatly influenced our RNA-Seq experimental design. Additionally, she generously provided us with bacteria supernatant and mGAM medium.

Dr. Vladimir Benes, 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.

Dr. Daniel Machado, 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.

Prof. Dr. Andreas Dräger, 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.

Prof. Dr. Oliver Kohlbacher, 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.

Dr. Jörg M. Schibel and Dr. Brigitte Walderich examined the safety of our experiments and provided valuable feedback for keeping everything in line and documenting everything related to safety.

Prof. Dr. Andreas Fritsche, 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.

Dr. Anette Christ 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.

Prof. Timo Müller, 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.

Dr. Rolf Hecker, 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.

Synovo, 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.

Lab Support

iGEM projects get complex and expensive very quickly. Without the generosity of these groups and institutions, our project could have never entered the laboratory stage.

The ZMBP, the NCCT, the EMBL, the group of Professor Wohlleben, the group of our PI Prof. Dr. Lars Angenent, the group of PD Dr. Evi Stegmann and Dr. Lisa Maier generously supplied us with various lab materials. We’re very grateful for their unconditional support.

Interview partners

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.

Dr. Rolf Hecker, 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.

Dr. Annette Christ from the Institute of Innate Immunity in Bonn discussed everything related to our scientific project with us.

Prof. Dr. Timo Müller, director of the Institute for Diabetes and Obesity, explained the molecular mechanisms of diabetes and the interactions of obesity with diabetes to us.

Stefan Gammel, an expert for nanoethics, debated the implications of GMO based treatments and the difficulties of convincing European legislation with us.

Claudia Leippert, 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.